The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

glompix posted:

This argument has been beat to death on these forums, but I think it's a better idea to package your binary dependencies with your code. Your software may need very long-term support, (the project I'm working on right now has been around 10 years and just will not die) and so it makes sense to not solely rely on external sources for that kind of thing.

At my current job, we do include binaries in our repositories for the reasons you specify. Anything I do outside of that, though, I end up just letting NuGet figure it out.

# ? Jan 23, 2014 04:11

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 22:57

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Pollyanna posted:

Okay, I'm a bit lost on the whole Nodejs thing. What usually happens when you decide to make a new webapp? Is there an article that covers the typical development of a web app using not-necessarily-Node? Is Node necessary if I'm planning to use a framework like Flask?

So what people are usually using node for on the kind of web app you're thinking of, is to build the front end using tools like grunt, jade, a front end web app framework(like Angular or Ember) and so forth. It generally makes sense because in the end of the day, a front end has to run on the browser, so JavaScript has to be the end result.

The front end has to talk to an API to be useful in most cases, though, so you need a backend web server for that. That bit CAN be done using Node with Express, but you can just as easily have it talk to a Flask application, and since that is where your experience up to this point lies, you're probably better off sticking with it.

A lot of people pushing to write all JavaScript back end and front end are saying so because then you can potentially reuse code and not have to rewrite business logic twice. Its not a necessity.

# ? Jan 23, 2014 07:37

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

I thought node is used for real time stuff that flask etc. can't do?

# ? Jan 23, 2014 11:16

libcxx: Mar 15, 2013; thread_local post<shit> shit_post("lol if u");

Gmaz posted:

I thought node is used for real time stuff that flask etc. can't do?

Jesus Christ.

# ? Jan 23, 2014 14:20

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Can you please explain instead of being condescending? Isn't it easier to do something like webchat with node than with flask, because of non blocking I/O?

# ? Jan 23, 2014 15:26

Mogomra: Nov 5, 2005; simply having a wonderful time

It has nothing to do with non blocking processes, or Node.js really. "Webchats" that you're probably thinking of are usually leveraging websockets, a relatively new web technology that developers happen to be able to get Node.js to handle fairly easily.

I haven't done any research, but I'm pretty sure there has to be a Websocket implementation for Python/Flask.

As long as you know that Node.js != realtime web apps, you'll be OK.

# ? Jan 23, 2014 16:19

Fruit Smoothies: Mar 28, 2004; The bat with a ZING

I'm using bootstrap to make a responsive web page. It's all going great, except that my Galaxy SIII phone uses a resolution much higher than bootstrap's extra-small size, so it ends up displaying a layout that's far too small (and high-res) to be usable without zooming. Any ideas?

# ? Jan 23, 2014 17:00

Oh My Science: Dec 29, 2008

Fruit Smoothies posted:

I'm using bootstrap to make a responsive web page. It's all going great, except that my Galaxy SIII phone uses a resolution much higher than bootstrap's extra-small size, so it ends up displaying a layout that's far too small (and high-res) to be usable without zooming. Any ideas?

You may be missing:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Put that in the <head> and all should be right in the world.

# ? Jan 23, 2014 20:28

Robot Arms: Sep 19, 2008; R!

I'm trying to create a responsive nav menu for http://caveatemptorblog.com. It works fine on a desktop browser (just narrow your browser window past the width of the columns), but the menu doesn't pop up when you tap the menu icon on a phone.

I thought it would work to just use an active/focus/hover state in CSS, but I obviously need something else. My Googling has turned up nothing (I'm obviously searching for the wrong thing). What am I doing wrong?

# ? Jan 24, 2014 01:08

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Is that built using any kind of framework, or is it just classic CSS?

Your hover and focus states won't work on mobile devices; most frameworks like Bootstrap 3 use a smidgen of JavaScript (Bootstrap 3 uses it's own Collapse plugin) and latch on to directives like "data-target" and "data-toggle" to trigger the show/hide states. There's more on that in Bootstrap 3's Navbar docs.

Long story short, you need some JavaScript to toggle visibility of the drop down.

# ? Jan 24, 2014 02:56

Pollyanna: Mar 5, 2005; Milk's on them.

I've got a piddly little Bootstrap+Knockout app on JSFiddle right now, and I'm realizing that I have no margins whatsoever.

http://jsfiddle.net/q7E68/1/

Is there a particular rule I have to add so that it doesn't run right up against the edge? (Also, how do I get that subheading under the heading?)

# ? Jan 24, 2014 03:03

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Stick everything in a <div class="container"> and add a css rule for the subheading: http://jsfiddle.net/q7E68/2/

# ? Jan 24, 2014 03:17

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

Mogomra posted:

It has nothing to do with non blocking processes, or Node.js really. "Webchats" that you're probably thinking of are usually leveraging websockets, a relatively new web technology that developers happen to be able to get Node.js to handle fairly easily.

I haven't done any research, but I'm pretty sure there has to be a Websocket implementation for Python/Flask.

As long as you know that Node.js != realtime web apps, you'll be OK.

Okay, this conversation is getting really ridiculous with misinformation and bad advice. Flask is not designed for asynchronous I/O or massive concurrency. I'm sure you could bolt a WebSocket onto it, but that's like connecting the exhaust from a Ferrari engine onto the air intake on a tractor trailer and expecting it to go faster. They're built to do different things, and if you don't really grasp how the system works, your application is going to suffer for it.

Assuming the common usage, "web chats" means you have people communicating with each other over the Internet in a nearly-real-time manner, like instant messaging or IRC. You can do this with any number of technologies on either the frontend or the backend. If you don't care about frontend or backend performance at all, you can poll every conversation once a second and generate tens of thousands of requests per minute from your user base. This is dumb all around, so letting the server push data at the clients when a message is received in a conversation is probably a better idea. WebSockets are one way to do this, but long polling has been around for over a decade. But both of these approaches only concern themselves with how data gets from the application to the client, and vice versa. They have nothing to do with the backend architecture of the application, and whether it uses asynchronous or synchronous programming style.

Whether you're using long polling or WebSockets, you don't need to be using a server with fully asynchronous I/O on the backend. It's just network I/O over a protocol of some kind. People have been doing this for over thirty years.

---

Back to the Node discussion:

Node is a runtime for JavaScript applications. That's it. We've been down that road already. Let's talk about where you would or wouldn't use JavaScript, and Node, outside of the browser. This requires a little bit of a history lesson.

A long time ago, people started talking about something called the C10K problem. The C10K problem says "there's ways of getting regular applications written by normal people to scale to ten thousand concurrent connections, but we're going to need to rethink our approach to network programming a little bit." Before asynchronous I/O came into vogue -- that is to say, before evented I/O libraries like libevent and libev really became mainstream -- the most common ways to support concurrency on a network server were to fork multiple processes or spawn multiple threads. Since each process or thread is something that the kernel directly schedules onto the CPU, having 10,000 processes running on a system was starting to cause some scalability problems. This was because in addition to the application needing to keep metadata on all the connections it was servicing, the kernel needed to use a ton of memory and CPU keeping track of each thread's memory space, environment, shared objects (DLLs), and so forth. On top of that, you had this big list of gyrations that your operating system and hardware have to do every time you switch a thread, because when you're switching between multiple processes, you can't reuse any of the state that's already on the processor. It's easy, but it wastes a lot of cycles doing pretty much nothing.

Kernel scheduling is what's known as preemptive multitasking -- the kernel has the ability to tell any process to stop what it's doing so another one can get its share of CPU time. This means that if you have a million short-lived requests on different threads, the kernel will start juggling the basketballs, forgetting that it's trying to put them in the basket. High-concurrency streaming applications use what's called cooperative multitasking, where one task at a time gets the CPU, and the task either runs to completion or reaches a point where it makes sense to give another task a turn. When you're dealing with asynchronous I/O, you typically want to yield to another task at exactly the time that you start waiting for I/O.

In addition to the scalability problems from preemptive multitasking and kernel scheduling, applications written using this style tended to keep a lot of state and do a lot of validation, and doing these things means you need bigger buffers and more processing time. These things all add latency. Think of the network card in your computer -- it doesn't care what your HTTP session looks like, because it's the job of your browser to keep track of that. It wants to be concerned with packets in, packets out.

So, in fairly recent history, we've started to see a lot of frameworks and libraries emerge that use cooperative multitasking to handle networked applications with better concurrency and lower latency. Python's Twisted is still first-class (though it's earned a reputation as being very difficult to program for), along with the much leaner gevent. Perl has POE (its answer to Twisted) and AnyEvent. Java has Netty. Ruby has EventMachine. All of these tools have the same strengths and weaknesses for network services as Node.js, and it usually makes sense to use the right tool for the job.

JavaScript is a special snowflake, though, because JavaScript was designed with an asynchronous model from the start, as opposed to other languages that were really designed for serial execution of code. The event-driven model came about so it could easily react to DOM events within web browsers. Because the model already existed, network I/O paradigms like XMLHttpRequest emerged that were also asynchronous.

Here's why Node became a thing: because JavaScript is already largely asynchronous, more people are familiar with asynchronous coding in JavaScript than any other language. There, in a nutshell. There's why people use Node.js for asynchronous services: because they've coded asynchronous JavaScript before on the frontend and they already know how to do it. There's no gargantuan async API to learn like Python/Twisted, because the language is the async API. Use what you already know. It's done.

---

Epilogue:

You can use JavaScript for a lot of things. It's a pretty verbose language, though people have tried addressing this with layers like CoffeeScript. It's a language where doing serial I/O requests (make a REST call, then make another REST call based on the results of that call, etc.) is actually a pretty big pain in the rear end, which makes it a horrible language to work with when you need to string together and orchestrate a bunch of different services. It's a general-purpose language, and you can use it to write build utilities, package managers, and whatever else you want. But developers also have to be cognizant of its weaknesses, because relying on promises for sequential service calls and producing code like this sucks:

code:

app.get('/', function (req, res) {
    when(function () {
        return doSomething(req.query.butt);
    }).then(function (value) {
        return doSomethingElseWithValue(value);
    }).then(function (rear end)) {
        var reply = constructReply(rear end);
        res.send(reply);
    }).otherwise(function (error) {
        logger.log('oh god make it stop');
    });
});

instead of:

code:

def index
  something = do_something(params[:butt])
  something_else = do_something_else(something)
  respond_with construct_reply(something_else)
rescue Error => e
  # Do something here
end

Its strengths lie in asynchronous programming, and fully-asynchronous programming is best done only when it's absolutely necessary, because it's a gargantuan pain in the rear end. That's largely why Node apps tend to be these highly-scalable microservices, and rarely end up holding a lot of business logic.

Vulture Culture fucked around with this message at 03:38 on Jan 24, 2014

# ? Jan 24, 2014 03:31

Pollyanna: Mar 5, 2005; Milk's on them.

fletcher posted:

Stick everything in a <div class="container"> and add a css rule for the subheading: http://jsfiddle.net/q7E68/2/

Yay, thanks! Although the subheading rule doesn't seem to work for me on the live website...

# ? Jan 24, 2014 03:57

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Pollyanna posted:

Yay, thanks! Although the subheading rule doesn't seem to work for me on the live website...

Not sure what the markup is on the live website but maybe it's the > in the selector?

# ? Jan 24, 2014 04:28

Pollyanna: Mar 5, 2005; Milk's on them.

fletcher posted:

Not sure what the markup is on the live website but maybe it's the > in the selector?

No, I'm actually just retarded and forgot to add the stylesheet to my template. :downs:

# ? Jan 24, 2014 04:34

Robot Arms: Sep 19, 2008; R!

v1nce posted:

Is that built using any kind of framework, or is it just classic CSS?

Your hover and focus states won't work on mobile devices; most frameworks like Bootstrap 3 use a smidgen of JavaScript (Bootstrap 3 uses it's own Collapse plugin) and latch on to directives like "data-target" and "data-toggle" to trigger the show/hide states. There's more on that in Bootstrap 3's Navbar docs.

Long story short, you need some JavaScript to toggle visibility of the drop down.

Plain CSS. I've been trying to learn how to do it all myself.

# ? Jan 24, 2014 04:48

glompix: Jan 19, 2004; propane grill-pilled

Chat suggestion: just try socket.io or signalr. It's pretty drat simple these days.

# ? Jan 24, 2014 06:13

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Misogynist posted:

/cut

Thanks for this thorough explanation, really appreciate it.

# ? Jan 24, 2014 11:28

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

How do you guys pick colors for things? Are there any others sites like colourlovers or kuler that can help me?

# ? Jan 24, 2014 20:16

pipes!: Jul 10, 2001; Nap Ghost

fletcher posted:

How do you guys pick colors for things? Are there any others sites like colourlovers or kuler that can help me?

Ideally, you start with something contextually relevant that speaks to the project overall (or, if you are a startup, pick a shade of light blue). Triad rule on a color wheel gives you a lot of flexibility, but may not be appropriate for the site's tone, so definitely play around with it before you commit too much effort to asset production.

For my projects, I like to select primary, secondary, and tertiary values, then add more with a great deal of discretion - restrained, considered color use can be a very powerful tool, and less is definitely more. Try to rely on adjustment to these initial values before invoking a new color and adding it.

As for sites, here's a few others I have bookmarked:
http://0to255.com/
http://pltts.me/
http://lokeshdhakar.com/projects/color-thief/

I have some bias here, but you also might want to read up a little bit on color with regards to accessibility, the long and short of it being don't use color alone to communicate critical information:
http://24ways.org/2012/colour-accessibility/

pipes! fucked around with this message at 21:34 on Jan 24, 2014

# ? Jan 24, 2014 21:08

substitute: Aug 30, 2003; you for my mum

Speaking of colors, does anyone use Style Tiles? Saw an interesting presentation on this method at An Event Apart last year.

http://styletil.es/

http://designshack.net/articles/graphics/style-tiles-the-flip-side-of-wireframes/

http://badassideas.com/style-tiles-as-a-web-design-process-tool/

# ? Jan 24, 2014 21:20

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

I've always just used http://colorschemedesigner.com/

# ? Jan 24, 2014 22:07

Ethereal: Mar 8, 2003

Munkeymon posted:

You're talking about sticking an Apache/Nginx caching proxy in front of the production servers, right? If so, how would that get you zero downtime for dynamic content?

Run X number of app servers behind a single Nginx instance on your box and setup round robin load balancing. Then add a config to goto the next reverse proxy on errors or timeouts from your app server. Shutdown each app server one at a time and then rebind to that same port with your new instance. Boom, zero downtime.

# ? Jan 25, 2014 10:35

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Ethereal posted:

Run X number of app servers behind a single Nginx instance on your box and setup round robin load balancing. Then add a config to goto the next reverse proxy on errors or timeouts from your app server. Shutdown each app server one at a time and then rebind to that same port with your new instance. Boom, zero downtime.

What about things like database schema migrations that are part of an upgrade?

And thanks for all the links about colors guys, they were really helpful.

# ? Jan 25, 2014 10:39

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

fletcher posted:

How do you guys pick colors for things? Are there any others sites like colourlovers or kuler that can help me?

This series of posts is specific to dataviz, but have a read through, it's good. Gets technical, but a lot of the focus is on creating palettes that are harmonious but made up of perceptually distinct hues. It's very useful for any kind of ui stuff especially, and there's a big list of references and online tools near the end. http://tools.medialab.sciences-po.fr/iwanthue/ is very good once you figure out how to get good results from it

# ? Jan 25, 2014 16:41

midnightclimax: Dec 3, 2011; by XyloJW

I'm thinking about starting a blog/website to publish some of my drawings, cartoons, etc. What website engine should I go with? Just use Wordpress? Asking because I don't know what's hip these days (and good for image-heavy sites).

# ? Jan 25, 2014 17:43

Fruit Smoothies: Mar 28, 2004; The bat with a ZING

midnightclimax posted:

I'm thinking about starting a blog/website to publish some of my drawings, cartoons, etc. What website engine should I go with? Just use Wordpress? Asking because I don't know what's hip these days (and good for image-heavy sites).

Yup, wordpress.

# ? Jan 25, 2014 20:01

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

You might also consider Tumblr, if you're trying to promote yourself.

# ? Jan 25, 2014 20:04

Fruit Smoothies: Mar 28, 2004; The bat with a ZING

Also, while I'm here, I have a weird CSS animation problem. Historically, when I've wanted to have a slide-in left menu, I'd used positioning offsets to move things around. However, the site I'm working on uses bootstrap's responsive / dynamic column widths at varying sizes

HTML code:

<div class="row">
	<div class="col-xs-3 col-md-2" id="menu">
		...
	</div>
	<div class="hidden-xs col-sm-9 col-md-10" id="content">
	</div>
</div>

This makes it very hard to make a menu slide in. Any ideas?

# ? Jan 25, 2014 20:06

midnightclimax: Dec 3, 2011; by XyloJW

Fruit Smoothies posted:

Yup, wordpress.

cbirdsong posted:

You might also consider Tumblr, if you're trying to promote yourself.

Some SEO-dude told me that Tumblr is actually bad, because Google treats their network like link-sharing or whatever it's called. That was some time ago and maybe it's obsolete now. Thanks though, I'll look at these two options.

# ? Jan 25, 2014 20:09

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

I have no idea about that angle, all I know that Tumblr is a really popular way to share drawings/cartoons, because it makes it really easy for people to re-share stuff they like.

# ? Jan 25, 2014 21:41

lunar detritus: May 6, 2009

midnightclimax posted:

Some SEO-dude told me that Tumblr is actually bad, because Google treats their network like link-sharing or whatever it's called. That was some time ago and maybe it's obsolete now. Thanks though, I'll look at these two options.

If you're on Tumblr you don't really need Google or SEO as other tumblr users will be the ones that share and read your content.

# ? Jan 25, 2014 23:19

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

Crossposting from the web critique thread:

MondayHotDog posted:

I've made a website for my little webcomic using my very limited HTML skills. I'm going for a very minimalistic/old-school look.

http://www.scribbleswithwords.com

One thing I'm looking to do is to change the archive page to use my handwriting so it matches the navigation and the contact page, but I'm not sure how to do to that and still have them show up on Google. Another thing I was thinking about is moving the "previous" and "next" buttons underneath the comic, but I'd like them to align with the left and right edges of the image above it. Again, don't know how to do this yet. If I did, I'd probably make the URL on each strip smaller.

Just looking for people's opinions on how it looks in general.

Two questions:

1. How do I make the content of images show up in Google searches? Would just adding alt text work?

2. How do I align an image to the sides of the image above it?

Keep in mind I'm very much a beginner. Thanks.

# ? Jan 26, 2014 01:17

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

midnightclimax posted:

Some SEO-dude told me that Tumblr is actually bad, because Google treats their network like link-sharing or whatever it's called. That was some time ago and maybe it's obsolete now. Thanks though, I'll look at these two options.

Tumblr is not a tool for generating a fully functional website like WP is. That's not necessarily a bad thing in any way, but Tumblr is best understood as as a social network, self-contained. It is very easy to use, it's optimised for what you want, and it integrates with other social networks and sharing services (and if you use something like ITTT you can automate away any effort in that regard).

# ? Jan 26, 2014 01:51

midnightclimax: Dec 3, 2011; by XyloJW

Aha, interesting. Tbh I've never looked that much into tumblr. Also MondayHotDog, your website looks cute. I'm pretty biased towards minimalist solutions tho.

edit: holy crap IFTTT, never heard of half the services there, the things you can do!

midnightclimax fucked around with this message at 09:54 on Jan 26, 2014

# ? Jan 26, 2014 08:45

Oh My Science: Dec 29, 2008

MondayHotDog posted:

Crossposting from the web critique thread:

Two questions:

1. How do I make the content of images show up in Google searches? Would just adding alt text work?

2. How do I align an image to the sides of the image above it?

Keep in mind I'm very much a beginner. Thanks.

Take a look at twitter bootstrap / zurb foundation and see if you can handle mashing together a decent template. Or better yet steal and modify one of the templates they provide in the documentation. They will give you common UI elements for navigation, scale your website for mobile devices, center the content, and I believe they both have utilities to handle retina image swaps. You can make everything white if that's the look you're going for.

I agree that the next / prev buttons should not be part of the main navigation.

# ? Jan 26, 2014 08:54

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

MondayHotDog posted:

1. How do I make the content of images show up in Google searches? Would just adding alt text work?

2. How do I align an image to the sides of the image above it?

Keep in mind I'm very much a beginner. Thanks.

1. Yes, Google SEO starter guide explicitly recommends doing this for any image that is used as a link.

2. Put the next, previous and strip images inside a <div> the same width as the comic strip and then set the next/previous to float:left and float:right.

# ? Jan 26, 2014 11:25

Pollyanna: Mar 5, 2005; Milk's on them.

e: ignore this post, look down

Pollyanna fucked around with this message at 17:42 on Jan 26, 2014

# ? Jan 26, 2014 15:23

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 22:57

Jaded Burnout: Jul 10, 2004

fletcher posted:

What about things like database schema migrations that are part of an upgrade?

There's different ways to do this but one is to use a 2-pass approach; make your schema migrations non-breaking e.g. instead of renaming a column create the new one and copy the data, likewise with tables etc, then follow up with a second migration which cleans up the old columns / tables.

This allows your running code to keep running during and after the first migration, then you restart the backends one by one as above with them using the new columns, then at your leisure run the second pass migration.

The only thing to be careful about is the timing of the restarts, as you don't want to be writing data into the old columns after the first pass copy completes. Depending on your architecture, pausing your queues or replication can be a way to deal with this.

If you're not running a system big enough to have replication or write queues, you probably don't care about write-uptime much, so just run it during a quiet period and lock the tables with a transaction.

# ? Jan 26, 2014 15:35

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »