The Web Design & Development Megathread

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

Skiant: Mar 10, 2013

dereekb posted:

I'm currently working on a Google App Engine application and am almost to the point where I'm going to dip into the HTML/JS a lot more than I have currently. So far at this stage I've created a basic amount of CSS and added some JS for handling Google Maps.

After reading the huge amount of info in the op (Thanks for putting that together!), I'm considering using JQuery UI and HTML5 Boilerplate.

Is there anything else to HTML5 Boilerplate other than being a starting place for websites? I opened it up and it looks like only some starting CSS, JS packages, and a few other files.

Is it better to create a website first, and then make sure it is compatible with everything else, or tackle the entire issue to begin with?

H5BP is indeed a starting point with a lot of current best paractices bundled in.
If you want something more advanced, you should look at CSS frameworks like Bootstrap, PureCSS and so on. If you are unfamiliar with CSS, starting with those will allow you not to write boilerplate code for colums, forms, tables, and everything else they got covered.

JqueryUI is fine when you need the kind of UI widgets they propose, but if you don't, skip it.

# ¿ Jun 27, 2013 07:17

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 12:49

Skiant: Mar 10, 2013

DreadCthulhu posted:

In fact I wonder how many times developers review other developers' portfolios when deciding whether to pursue recruitment. Does anybody have experience actually doing this? You'd think that things are still done old school where only the recruiter is involved in the first step and thus github doesn't factor in.

Doing code review is quite common from my experience. When my previous job was trying to find another good front-end dev, the team lead asked me to review old projects from the applicant so I could have an idea of how he works.

We also did a technical test: sent him a small assignment (one small page design to put in HTML/CSS/JS) to see how he approaches that kind of work.
The idea with this test is to check if the code is outright terrible, the recruitment process stops. If not, we invite the guy for an interview and we question him about his technical choices, so the whole test was not a "can you code" as much as a "how do you make choices between multiple technical solutions".

# ¿ Jul 10, 2013 09:44

Skiant: Mar 10, 2013

kedo posted:

I'd guess your provider responded like that because A) they didn't write that javascript (it's a third party plugin) and probably have no idea how to fix it, because B) they're clearly lovely at their jobs as that website really sucks. :P

Don't forget: C) killing IE8 with a bat isn't exactly the worst idea in the world.

# ¿ Jul 10, 2013 15:49

Skiant: Mar 10, 2013

Vintersorg posted:

This was awesome and did what I wanted!

But then my boss came down and said since transitions do not work with IE8 or 9 I had to code my own little jquery thing.

Use Modernizr and apply the jQuery thing only for browers not supporting CSS transitions.

# ¿ Jul 15, 2013 08:29

Skiant: Mar 10, 2013

Fuoco posted:

No, I'll be using Wordpress as a CMS.

If you haven't already, you should really take a look at the server-side caching plugins available for WP, that will vastly reduce the amount of stress on the server caused by massive affluence.

Most plugins will store a plain HTML file based on the rendering done by the first visitor to a page, and serve that cached version to following visitors, instead of requesting Database over and over again.

# ¿ Jul 16, 2013 12:21

Skiant: Mar 10, 2013

MonkeyMaker posted:

The Internet is "primarily a bunch of people with old-rear end computers."

But I fully agree. If you only build stuff that'll work everywhere, you won't innovate.

These days, the Internet in industrialized countries is mostly a bunch of people with smartphones/tablets tbh.

# ¿ Jul 26, 2013 22:08

Skiant: Mar 10, 2013

Suspicious Dish posted:

http://practicaltypography.com/summary-of-key-rules.html

#000000 on #FFFFFF is hard to read. Making it #333333 on #ECE6E6 would be better.

Try and identify where the hyperlinks are. They're not underlined. I haven't found any consistent pattern about where they'll appear.

The weight is also fairly inconsistent between the numbers on the left and the prose on the right. The SOMETIMES WE'RE GOING TO USE CAPS also seems more heavy than the text around it and is distracting.

By removing the style entirely, I can actually read the prose a lot easier.

You do realize the all-caps is the consistent pattern you tried so hard to find for the links, right?
You might also want to check your screen contrast/lightning settings if black on white burns your eyes that much.

# ¿ Jul 27, 2013 11:15

Skiant: Mar 10, 2013

akadajet posted:

I'd focus on a good experience for users who don't break their browsers.

This sums up all I could have written on the subject.
Plus, blocking JS is an advanced user move. If you know how to disable JS, you know how to whitelist websites that require it.

# ¿ Aug 2, 2013 12:40

Skiant: Mar 10, 2013

Frankly, I think HSL is way easier to read than RGB or Hex (which is really close to RGB in terms of readability), but the support for HSL isn't exactly top notch.

# ¿ Aug 6, 2013 14:37

Skiant: Mar 10, 2013

pipes! posted:

W3C: Gradients, drop shadows, and rounded borders, but no vertical centering.

You can, actually. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

It's not exactly W3C's fault if IE is being retarded.

# ¿ Aug 23, 2013 03:30

Skiant: Mar 10, 2013

fuf posted:

I've just discovered http://www.google.com/fonts and it seems like a pretty ideal way of allowing unconventional fonts.

I vaguely remember some controversy about web fonts. Is there anything I should look out for? Is there a proportion of users it won't work for?

A bit late to the party but if you want to pick fonts from the google webfonts directory, make sure to check http://hellohappy.org/beautiful-web-type/ to find actual nice fonts.

# ¿ Sep 24, 2013 06:48

Skiant: Mar 10, 2013

Uziel posted:

Any idea on a better way to display this information overload?

What's being display:
For a given timeframe, show the following fields:
Total (if fake is 0, shown without T, else with)
Fake (hidden if zero) as F
Built as B
Scheduled as S
Jobs as Jobs
Buffer as Buffer
Techs as Techs
Contractors as Contractors

The business owners want it all there per timeframe explicitly as I've tried to hide some of it in tooltips before and the suggestion was declined.

You have to establish a proper information hierarchy.

Pick up one � and only one � field being the most important (something that helps you scan the document quickly is preferred), make it stand out from the rest (size, boldness, color).
Then, establish if you have one or two other levels of information, and define a style for those (grayed out instead of black, smaller font, �).

The fact that the text organization is so much different between the tiny box on the left and the large one on the far right doesn't help neither because you don't have a defined visual structure in common between all your cells, but if they don't want to hear about a tooltip, it's not exactly something you can fix easily.

# ¿ Sep 27, 2013 09:43

Skiant: Mar 10, 2013

darthbob88 posted:

Probably a stupid question, but what are the most common screen sizes for mobile devices? 480x800px, 640x960px, what else? I can't rely on percentages, so I need to use raw px for some things.

It's a stupid question.
Use ems and percentages, do not try to cover all devices with absolute pixel values because those will change more often than you'd like to update your stylesheet.

# ¿ Sep 30, 2013 09:03

Skiant: Mar 10, 2013

Mister Chief posted:

I think he's talking about media queries and not his general css.

Why would he want to use percentages in media queries?

# ¿ Sep 30, 2013 10:14

Skiant: Mar 10, 2013

kedo posted:

So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk.

[�]

To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines. The second option saves a bit of space by lumping all the queries together, but is harder to navigate.

Thoughts?

Use the first method and then lump your queries together in the final output with grunt-combine-media-queries.

Ron Don Volante posted:

Any recommendations for the best free html/css tutorial site? I've used w3schools in the past (for sql) but I've heard a fair number of negative things about it.

Codeacademy is doing a fine job IMO.
Use the Mozilla Developper Network when looking for information about a specific attribute/property/method (prefix your google query by "MDN" and that should do).

Skiant fucked around with this message at 07:13 on Oct 25, 2013

# ¿ Oct 25, 2013 07:10

Skiant: Mar 10, 2013

Pollyanna posted:

How do you go about "planning" a website's layout? I want to be able to make something like this:

...but I don't really have any sense of design. I don't know the first thing about good design and I can't make anything much better than a big ol' column. Right now my site's not much more than a handful of words on as creen, although there will be content once I figure out how to get a database going in Flask.

Also: box shadow. I see that that's basically the difference between my crappy looking boxes and everyone else's professional poo poo. Can I just say 0 0 1px and be done with it?

And what are some good professional fonts to use? Is there a compendium of them somewhere?

Re: layout, the most important thing you have to remember is the information hierarchy.
Most of the lovely layouts and designs are made because people want everything to stand out and can't figure how to properly put the focus on something.
If you can convey what is the most important piece of information on your design and you put it in the spotlight, you should be good to go already.
Look up the Gestalt laws, they're quite simple to grasp and will help you a lot.

Box shadows themselves don't do the pro poo poo. Subtle usage of a technique is the key. Box shadows are a cheap and easy way to make something stand out because they provide an outline that isn't as obvious as a big red border, so our mind can see the group but not focus on the wrapper. Proper usage of whitespace also goes a long way (again referring to Gestalt).

And for fonts, refer to Beautiful web type

# ¿ Nov 11, 2013 23:51

Skiant: Mar 10, 2013

fletcher posted:

I'm curious what you design savvy folks think of linkedin.com. I haven't used it much but my god it feels like such a clusterfuck of a UI.

linkedin is really the worst. The whole experience, not just the UI.

# ¿ Nov 15, 2013 08:30

Skiant: Mar 10, 2013

Ghostlight posted:

I don't think Chrome likes whatever they've done with Source Sans.

OSX has a different font rendering and usually makes it appear bolder, so it probably looks fine on their 3000$ machines.

# ¿ Dec 19, 2013 12:00

Skiant: Mar 10, 2013

KARMA! posted:

If the person having to input a lot of accented characters, wouldn't it be easier to just select a different input language in the os? Why do you need to implement this functionality in a browser?

Pretty much this. US-International is the layout you're looking for.

# ¿ May 14, 2014 13:13

Skiant: Mar 10, 2013

cbirdsong posted:

Is this the right thread to ask what the fastest way to compile Less CSS locally on a Mac is? I currently use LiveReload, and it can take a second or three to finish recompiling after a file is saved. Are task runners like Grunt or Gulp appreciably faster?

It's better to use either Gulp/Grunt (I like Gulp better) or a tool like Koala and build your file, then use LiveReload to detect changes in your compiled file and reload it as needed.

# ¿ Jun 4, 2014 19:29

Skiant: Mar 10, 2013

fletcher posted:

New version of Firefox & Firebug released today.

Tons of good stuff in the new Firebug! https://blog.getfirebug.com/2014/06/10/firebug-2-0/

Why would anyone use that old bloated RAM-eating mess that's Firebug while the built-in dev tools of Firefox are now on-par with if not better than what's in Chrome?

# ¿ Jun 10, 2014 20:28

Skiant: Mar 10, 2013

pokeyman posted:

Just use flexbox.

FTFY.

E: You could also use "display: table-cell" tbh.

# ¿ Jun 14, 2014 09:15

Skiant: Mar 10, 2013

fuf posted:

How come?

Haters gonna hate.

# ¿ Jun 16, 2014 16:04

Skiant: Mar 10, 2013

Lord Windy posted:

So a web framework is basically a collection of code that handles a significant amount of the mundane backend (in particular, backend that looks easy to break) for a developer? Similar to how a game framework like LibGDX takes over for things like drawing sprites to the screen, pushing audio through speakers and other backend stuff like that?

I can see how that would make them very useful in that case. I just had trouble working out what they did as I knew next to nothing about what they did.

Yes, except you have frameworks for pretty much anything and everything (ie: Bootstrap, Angular, etc.).

# ¿ Jun 17, 2014 09:07

Skiant: Mar 10, 2013

fuf posted:

I mean how often are people resizing their browser windows anyway?

I'd say "Not often unless you're a developer specifically testing out responsive stylesheet" but it's an assumption based on zero data at all and thus it may well be 100% wrong.

# ¿ Jun 18, 2014 14:34

Skiant: Mar 10, 2013

Bastard posted:

"I don't think you need that many hours for a simple email, you get <X>"

This right there is why I chose to believe in some form of karmic justice to inflict torment on every single fucker who makes up a time estimate for a dev task without being a dev himself.

# ¿ Jul 1, 2014 06:21

Skiant: Mar 10, 2013

Pollyanna posted:

What's a good way of keeping current on web development topics, rather than design? There's stuff like Hackernews and Sidebar, but Sidebar is design/looks-focused and apparently HN is not very good. I've got a lot of downtime at my job right now and I was looking to fill it with stuff I can learn on the side. But, I'm a developer, not a designer - though I like designing, that's not what I'm paid for. I wanna get better at what I do, and I'm willing to learn, but I don't know where to start. Any tips?

Follow Google / Mozilla evangelists on Google Plus.

# ¿ Jul 2, 2014 17:45

Skiant: Mar 10, 2013

Seconding Django as it's the thing I'll be learning next.

# ¿ Sep 5, 2014 10:19

Skiant: Mar 10, 2013

prom candy posted:

Why all the Django recommendations and no recommendations for Rails? I always thought Django was fairly unpopular compared to Rails, am I so out of touch?

All the people who went nuts on Rails being The Supreme Web Framework went nuts over Express and are now moving on to something more hip and new.

# ¿ Sep 8, 2014 13:19

Skiant: Mar 10, 2013

Opulent Ceremony posted:

I thought using jQuery in an Angular controller was the really frowned-upon thing. jQuery is good for manipulating the DOM, and the Angular way was to put any of that into a directive so as not to clutter controllers with stuff that isn't about manipulating the view-model. Isn't the whole point of angular.element to be an angular-native API potentially backed by the full jQuery library?

Yep, angular.element is using jqlite when jQuery isn't available and fallback to the full jQuery API if it's available in your page.
Not to mention the vast amount of directives you can find over the Internet relying on jQuery.

# ¿ Oct 7, 2014 07:23

Skiant: Mar 10, 2013

fuf posted:

Speaking of software:

I've been using Linux for a long time but I'm thinking of switching to Windows, and I'm wondering how I'm gonna preserve some of my workflow. Any Windows users here who still use command line tools like grunt, bower, ssh, git etc? How do you do it? I guess I should just run a virtual linux machine?

Personally I roll with Git-Bash wrapped inside Console.
It's kinda hacky but gets the job done on a daily basis.

# ¿ Oct 8, 2014 11:54

Skiant: Mar 10, 2013

Chris! posted:

On that note, I have real problems using Sass with Grunt on Windows (7 specifically). I wonder if anyone can offer advice, I'm probably doing something wrong...

To get it work currently, I have to use Compass, which works but takes so long to compile. I would much rather use Grunt, but I get error messages each time I try and set it up. Specifically, I want to use it with Zurb Foundation, using the directions here:

http://foundation.zurb.com/docs/sass.html

Everytime I install via Grunt I get an error message saying "Error: Cannot find local grunt file" or something, even though the grunt file has been created and exists. I have everything installed - and have worked with Grunt a few times, often get the same error message and have to just try again, but recently it's been impossible to set up, so I've had to work with Compass, which is massive hassle. I've re-downloaded nodeJS, checked the version of Ruby is OK, use the ruby command line as administrator, re-installed Bower, re-installed Foundation, re-installed Grunt, but I get the same error no matter what.

What am I loving up?

Grunt 0.3.X looks for Grunt.js, Grunt 0.4.X looks for Gruntfile.js.
Could be the version they're using and your globally installed version are different.

# ¿ Oct 8, 2014 14:31

Skiant: Mar 10, 2013

Ghostlight posted:

I use Dreamweaver as a bare ftp client because it's on my pc as part of the suite and I'm too lazy to replace it with something else, also I'm a caveman.

Respect yourself, man.

# ¿ Oct 10, 2014 13:03

Skiant: Mar 10, 2013

Bodhi Tea posted:

What's the best place to post some javascript and get a critique of my code?
I'm trying to get better and desperately need a code review.

There's a Javascript thread. Also a Modern front-end dev thread in case your question relates to Backbone/Ember/Angular/React/etc.

# ¿ Oct 13, 2014 22:57

Skiant: Mar 10, 2013

my bony fealty posted:

Can anyone comment on this book, Professional Javascript for Web Developers as a tool for learning JS properly? I'm moderately comfortable with JS, but have learned through bits and pieces and random tutorials here and there, never through one resource. As a result I feel that I'm lacking a lot of fundamentals/having gaps.

Two books helped me a lot progressing from "I know how to do jQuery stuff" to "I can read the source of most JS libs and get what they're doing": Javascript - The Good Parts and Secrets of a Javascript Ninja.

Alternatively, you can also find Javascript Allonge for free over the Internet and it's a good read as well.

# ¿ Oct 13, 2014 23:51

Skiant: Mar 10, 2013

revmoo posted:

I work for a unicorn. We're required to support IE >10

We found out last week we got less than 4% of people using IE8, and Chrome + Firefox are equal to roughly 70% of our audience. I'm cool with that.

# ¿ Oct 27, 2014 16:48

Skiant: Mar 10, 2013

down with slavery posted:

Try adding the following to your html's head element:
code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
More info: http://dev.w3.org/csswg/css-device-adapt/#viewport-meta

You should not restrict users from zooming in and out on your website, drop the "maximum-scale=1.0, user-scalable=no" part.

# ¿ Oct 28, 2014 08:29

Skiant: Mar 10, 2013

down with slavery posted:

Eh, I disagree. You should use CSS to make the website look appropriate on devices based on viewport width. There's really no reason to allow zooming and in many ways a user needing to zoom is a sign that you've hosed up your mobile site.

Why would you restrict users from adapting the content to their own needs? It's the same idea as people realizing their superb pixel-perfect design looks botched as gently caress when people zoom in with their desktop browsers and throw a tantrum about how "users are stupid". Well, some people have bad eyes and want to read better. Some have 10/10 eyes and want to see as much content in a single page as possible.

Throwing the "no zoom" meta is basically saying gently caress you to anyone who wish to read your content on their own terms.

# ¿ Oct 28, 2014 17:35

Skiant: Mar 10, 2013

Thermopyle posted:

Rant follows.

So I'm wanting to use Facebook's Flux and React on a project. I'm part way in to it and using RequireJS.

I haven't used Flux before, so I'm learning as I go.

I go to download their Dispatcher.js file. Oops, Facebook uses Browserify and the ES6 class statement. I dig around for a bit and realize I've got to clone the repo and do an npm install to build a de-sugarified version. Good to go now...

Oh wait, it also depends on invariant.js. Ok, I'll just add that to my RequireJS-style require statement.

Oh no, won't work, Dispatcher.js and invariant.js both use CommonJS-style require and module.exports. I've got to wrap them with RequireJS's code for handling CommonJS modules.

I loving hate javascript tooling and modules and bleh. The people who came up with this house of cards should be ashamed.

I could have switched everything over to using browserify, but man this is just a constant on-going pain. I don't really want to use browserify anyway, as this is a complex single page app and there's like 2MB of js that I don't want to load all at once. I'm not sure if it's one of those things where it's irritating because I don't do it enough and I'd think the same thing about...say...python's import statement, if I wasn't really familiar with python.

Well hopefully the ES6 modules syntax should clear that clusterfuck and get rid of all that RequireJS or CommonJS or Browserify or whatever, because god drat all those tools are a loving pain to use. Even working with Angular and only its own Dependency Injection system is a hassle.

I'm not especially holding my breath right now, tho.

# ¿ Nov 30, 2014 01:39

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 12:49

Skiant: Mar 10, 2013

Gmaz posted:

Sounds pretty much like Yeoman to me.

With reason, that's pretty much exactly what Yeoman genrators are supposed to be.

# ¿ Dec 27, 2014 10:03

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