Popular posts

Ok, first -- forget EVERYTHING you've learned from jQuery, and if you have the urge to use JavaScript BEFORE the page is working properly, punch yourself in the face.

Not joking. A front end should be accessible and graceful degrading, two things scripttardery simply do not provide.

Though I'm wondering how you could "know some JS and jQ" without a command of the HTML and CSS it should be operating upon. That's your key technologies to know, and what you have to learn inside, out, forwards, and backwards.

... and it means ACTUALLY understanding their purpose, WHY they are separate technologies that work together... and that means concepts like:

1) Semantic markup -- a sick euphemism for "using HTML properly" which is to say that you choose your tags based on what they MEAN (paragraphs for actual grammatical paragraphs, headings to indicate the start of sections and subsections, lists on short bullet points or selections, tables on tabular data) or WHY they would be used in a normal professionally written document (em for emphasis, strong for more emphasis, b for proper names or references, i for book titles when not cited, cite for when you're citing a source) and NOT what you ACTUALLY want them to look like. If you choose your tags based on their default appearance you are choosing ALL the wrong tags for ALL the wrong reasons. This also means that when you first write your markup, it should have no DIV or SPAN since they are non-semantic wrappers. You only add those when styling your content as hooks without saying in the markup what that style is. (combined with numbered headings, this is why HTML 5's <article>, <section>, <nav>, <header>, <footer> and so forth are pointless redundancies that serve no legitimate purpose HTML 4 Strict didn't already provide!)

2) Separation of presentation from content -- that means NOTHING in your markup (at least when possible... there are like two or three corner case exceptions) should be saying what things are going to look like. That means classes like "column-8" or "xs-wide" or "red" are RIGHT OUT. You say WHY it's a column, WHY it would be wide, or WHAT it is... NOT what you want it to look like. This is why garbage like bootstrap is some of the most mouth-breathing idiotic short-bus nonsense in existence. Good rule of thumb, if you use the style="" attribute in your markup, you are PROBABLY doing something wrong, if you use the <style> tag, you ARE doing something wrong!

Maintaining this separation lets you create different appearances for any past, present, or future media targets. It makes creating your semi-fluid elastic responsive layout (A good accessible layout should be all three) easier as you only have to manipulate your CSS, and also simplifies reskinning at a future time or even allowing users to choose from a list of possible appearances.

3) <ballmer impersonation>ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY. ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY. ACCESSIBILITY, ACCESSIBILITY, ACCESSIBILITY sigh, gasp, clasp heart like having a stroke</ballmer>

No joke. Learn about dynamic fonts (%/em) and why we're supposed to use them and not pixels. Learn about elastic layout based in EM and why we're supposed to use that instead of pixels. Learn about emissive colourspace, why most webfonts are inaccessible trash on flow text, learn about the different gylph rendering engines and their effect on legible colour contrasts. READ the WCAG and try to at least grasp what it's trying to tell you. Take a good deal of time and read the articles section on NNGroup since they're one of the few places dealing in "user experience" and "accessibility" that bothers taking the time to test on actual people instead of randomly pulling fashionable bullshit out of their backside...

4) Paint programs are not design tools. The ignorant fools dicking around in Photoshop under the DELUSION that they are "designers" are generally so ignorant of everything I just outlined above, they have little if any business "designing" a blasted thing for anyone! End of the day it doesn't matter how pretty the result; if the artsy crap is so slow nobody is waiting for the page to load, the colours and fonts compromise legibility for large swaths of the public, and the resulting code ends up filled with hacks and non-semantic markup because the artsy fartsy type who knows nothing about document writing just spent the day spanking it on their tablet... what good is it?

5) The unwritten rule of JavaScript: "If you can't make a fully functioning page without JavaScript FIRST, you likely have zero damned business adding scripting to it!"

It's part of what's called "progressive enhancement" -- you write semantic markup, you create all your styles for all the different possible media targets with CSS, then you enhance the functionality with JavaScript. If we're talking about websites as your front-end, if you can't make it at least deliver the page's actual content without scripting, you're doing something WRONG.

Admittedly, if you are talking crapplications built with web technologies, that's a different ballgame altogether since those universally tell users with accessibility needs or trust issues to go plow themselves!

There's a good deal to learn, and a LOT of bad advice out there, but hopefully this response will give you some things to ponder. Bottom line, learn HTML, learn CSS, learn accessibility.... without those, you've got no business working on anything front-end related.