HTML Best Practices

Issue You want phone numbers to not be styled by the webview

Solution Meta tag for disabling telephone number styling - <meta name=“format-detection” content=“telephone=no” />

Issue Android doesn't support font-face:local. When it sees the local attribute, the entire font-face is ignored. This makes it hard to embed fonts.

Solution The CSS must be rewritten on the fly. Usually this is done by the app. Fonts can be read from the Android asset directory using a specially constructed file URLs: file:///android_asset/path/to/font. Replace the local attribute with a standard url attribute.

Issue SVG fonts are slow.

Solution Don't use SVG fonts!

Issue Fonts not displaying at expected sizes on iPhone

Solution Set webkitTextSizeAdjust:100%; as a general style. You can read more here - http://css-infos.net/property/-webkit-text-size-adjust

Issue You want to plug your mark-up into the font-resizing functionality of Pugpig

Solution iOS - Read this Android - see first issue in this section.

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html - Understanding CSS specificity (http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg in particular)

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context - Understanding z-index stacking calculations

http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/ - Smart CSS selectors, lets get specific.

caniuse.com - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

quirksmode.org - “you’ll find hype-free assessments of the major browsers’ CSS and JavaScript capabilities, as well as their adherence to theW3C standards.”

http://responsive.victorcoulon.fr/ - allows you to resize the browser viewport to test your responsive designs

http://bradfrostweb.com/demo/ish/ - similar to the previous link, Ish strays from the typical adaptive design route and instead promotes completely fluid layouts that do not rely on specific breakpoints

http://www.lukew.com/ff/entry.asp?933 - LukeW’s original article on why we should be building websites mobile first.

Chrome 24 lets you use Source Maps with Sass in the Inspector sass –watch css:css –style expanded –debug-info

THE B’s

Avoid transparency (margins, divs with no background color)

Avoid overlapping divs

It is not advised, but using a CSS selector like so allows you to modify the page layout based on the font size that the user has selected: body[style*=“font-size: 112.5%”] It is not advisable as it is tighly coupled to the app container as these increments are not always the same.

Responsive videos - container div with a height, set video to 100% height

A DOCTYPE is one of the most essential pieces of any HTML document. It informs the browser (and other tools) which version of HTML you will be using. It will ensure that Standards mode is used to render the page and Internet Explorer will love you for it.

Think you’re finished? Validate. Got a bug? Validate. Validated? Validate. Validating our HTML allows us to catch nasty errors before they cause problems further down the line. If you have an issue with your markup not displaying as expected it is quite possibly due to your HTML not being valid. Once you’ve got a valid HTML document, debugging becomes a far easier task. http://validator.w3.org/ Info about automatically validating documents goes here

ID’s should only be used for JavaScript hooks rather than styling. Due to the specificity that an ID applies to a selector, they can be difficult to override using other selector combinations. The performance increase of using an ID is negligible. Another advantage of using this technique is that if we see an ID, we know straight away that its purpose is a hook for JavaScript.

Loading JavaScript blocks the rendering of the page so all JavaScript should be placed at the bottom of the page. This will make the page appear to render faster even though the time required to finish running all of the scripts will not be different.

Keep the number of DOM nodes (html tags) down to a bare minimum as per the Yahoo Best Practices for speeding up your websitehttp://developer.yahoo.com/performance/rules.html#min_dom

Use lowercase for all attributes and tags e.g. <header class=”main-header”></header> not <HEADER class=”main-header”></header>

HTML5 does not require attribute values to be quoted, however if the value has a space in it does require the quotes therefore it makes sense to always quote them e.g. <header class=”main-header”></header> not <header class=main-header></header>

Use lots of partials so everything is very modular and can be specifically imported into a pages main scss file

nth child http://css-tricks.com/useful-nth-child-recipies/

Media queries in sass http://thesassway.com/intermediate/responsive-web-design-part-2

Mixin all the things http://www.netmagazine.com/tutorials/improve-your-responsive-design-workflow-sass

Hardware acceleration placeholder

Use a retina sass placeholder

Always compile with –style expanded except for when releasing, use –style compressed

Promote the SMACSS way of working, re read SMACSS to do this

Responsive Grid frameworks - Foundation (possibly conflicts with the SMACSS way)

Use a single sprite sheet for retina and a half sized version of the same sheet for normal resolution

Animations

Clearfix without using overflow hidden - http://css-tricks.com/snippets/css/clear-fix/

Normalize (a great reset) - http://necolas.github.com/normalize.css/

Simple CSS Transition tips

Creating shapes in CSS http://css-tricks.com/examples/ShapesOfCSS/

Background attachment local http://lea.verou.me/2012/04/background-attachment-local/

Rule of thumb is never style on something like, aside or article. Be more specific

Code smells http://csswizardry.com/2012/11/code-smells-in-css/

Dont use !important unless absolutely necessary, see Specificity Wars

Placeholders are awesome, use them. Mixins are for when you need parameters (they duplicate code unlike placeholders)

Create reusable selectors http://csswizardry.com/2012/05/keep-your-css-selectors-short/

We should really be using more vendor prefixes to simplify moving to new platforms, creating something for webkit shouldn’t be our only priority

SVG fonts are slow http://blog.riobard.com/2010/05/31/svg-web-fonts-suck

Safari animationhttp://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html

Dont use a jquery click event to trigger click events. Share events script that allows a click on desktop and a touchend on mobile. Discuss the fact that if the user scrolls whilst touching an element that this event is bound on, you need to cancel the event. Perhaps explain wasDragged method from WHICH.

One cause for a page not feeling responsive is attaching too many event handlers to nodes on the page (http://developer.yahoo.com/performance/rules.html#events). A way to avoid this is to use something called Event Delegation. Essentially what this means is the event is bound to the parent element of the element you want to fire events on, e.g. typically if we wanted to fire an event on every li using the following markup:

<ul id=”my-awesome-js-nav”> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul>

Traditionally we would do something like the following, binding an event to every li element.

jQuery var links = $(‘#my-awesome-js-nav’).find(‘li’); links.on(‘click’, myAwesomeMethod);

Raw JS var links = document.querySelectorAll(‘#my-awesome-js-nav li’); links.addEventListener(‘click’, myAwesomeMethod);

Instead of doing this, we’re going to bind an event to the ul and then check that the element that was clicked was an li. jQuery has some sugar to let us do this very easily, without jQuery we need to do a little bit more work.

jQuery var nav = $(‘#my-awesome-js-nav’); nav.on(‘click’, ‘li’, myAwesomeMethod);

Raw JS

Concatenate and minify your scripts before releasing!

Share my ‘class’ implementation (maybe show it being used in Backbone)

Pub/Sub for communicating between modules

Unit tested modules that can be reused between projects

Push Jasmine as the unit testing framework

PhantomJS as headless webkit to run unit tests

Use a templating engine for handling HTML strings (if absolutely necessary as JavaScript is crap in webviews) - lodash being preferred

Avoid touching the DOM

No CSS in JavaScript, use classes to style things unless it must be dynamically set

Styleguide: https://github.com/rwldrn/idiomatic.js/

Automate all of the things, section about grunt / r.js / phantomjs

Things I need to look at:

Grunt - automate minifying, concatenation, sprite creation

Reusable modules (unit tested using jasmine)

Reusable mixins / placeholders / variables / sass templates

Example templates

Work out if I can load scripts asynchronously in a pugpig webview. If it is possible using requirejs it may effect my test runner choice

Testacular Buster

Buster Jasmine