Learning by Hacking

My talk covered how to build big, scalable front-ends and one of the key factors involved in doing so is sensible and generous use of abstracted classes. One thing that really helps you achieve this is the application of the single responsibility principle, a method used mainly in OO programming.

Background

This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.

<blockquote class='posterous_long_quote'><p>These are supporting examples for the blog entry, The Paragraph in Web Typography & Design.</p> <p>Only standard <code>&lt;p&gt;</code> tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.</p> <ol> <li>Browser default style</li> <li>Block flush left, ragged right</li> <li>Block justified</li> <li>One em indent with boundary, flush left, ragged right</li> <li>Two lead indent without boundary, flush left, ragged right</li> <li>Indent without boundary, justified</li> <li>Outdent flush left, ragged right</li> <li>Continuous text, CSS generated pilcrow divided</li> <li>Elevated cap (versal) with bold opening</li> <li>Drop cap (versal) with bold opening</li> <li>Outdent cap (versal) with bold small caps opening</li> <li>Initial outdented block with CSS generated section and mid point dividers</li></ol></blockquote>

Because you can easily change the size

Because you can easily change the color

Because you can easily shadow their shape

I have never made a map...

If you have ever written one line of CSS, you'll be right at home with TileMill's map styling language Carto. TileMill comes with well-documented examples that illustrate the basics of layer management, feature styling, and interaction. A step-by-step manual can teach you everything you need to know about geodata, projections, and symbolizers.

CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found. Let's have a look at what new CSS selectors and features will be available to us in future browsers!