May 2013
4 posts
CSS: Elastic Videos →
How to embed youtube and vimeo etc video in fluid containers.
How Facebook Designs the 'Perfect Empty Vessel'... →
If you are adhering to the “scripts at the bottom” best practice, then you have...
– 5 Things You Should Stop Doing With jQuery | Flippin’ Awesome
Increase image size and compression level for... →
Article covering how double dimension images with huge jpg compression reduced to smaller sizes by the browser are generally no different from the original, allowing for better viewing on retina display with higher pixel density.
April 2013
1 post
3 tags
Very Simple CSS-only Proportional Resizing of... →
March 2013
6 posts
HTML5 boilerplate google analytics script loader... →
A quick code review would be appreciated, but I believe this works (the fonts load, at least)
Touch And Mouse: Together Again For The First Time... →
Important details on combinations of event handlers.
CSS - flexbox →
Very easy to understand one page overview of flexbox, within a rather well written, up-to-date tutorial on CSS layout.
Marking one year since the Inside Government beta... →
Article covering how UK Govt websites could be successfully run on an agile basis and how editorial staff don’t necessarily need WISYWYG editors, and can be as happy as developers using markdown.
Do you really need a microsite? →
Helpful article covering the pros and cons of choosing a microsite from @boagworld.
I’ve sat on both sides of the build process (working for an agency wanting to create a decent experience with its own style and flair and linked to a campaign - a moment in time) and as part of a maintainer of a large site, trying to avoid fragmenting the experience.
There’s no easy answer, but this article...
HTML's New Template Tag: standardizing client-side... →
February 2013
3 posts
Mobile carriers may inject script onto your html... →
You can protect against it (assuming your site is optimised already, and has compressed scripts/styles that do not need rewriting), you can add
<meta http-equiv=”Cache-control” content=”no-cache”>
to your pages. However, this may prevent caching (although not necessarily), and
<meta http-equiv=”Cache-control”...
What is hoisting, really? - blog by @johnkpaul →
Baptism of fire introduction to Emmet.io
tbody>(tr>th[scope=row rowspan=9]{Stage...
January 2013
7 posts
What is the most efficient way to clone a... →
About HTML5 document sectioning
MDN:
https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document
Smashing Mag:
http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
Roger Johansson:
http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/
Sitepoint Forums (HTML5 Sectioning and Accessibility):
...
4 tags
Link javascript with CSS media query breakpoints
Some articles:
http://seesparkbox.com/foundry/breakpoint_checking_in_javascript_with_css_user_values
- Adding generated content with the property being a text reference to the size - uses the transitionEnd event referred to in
http://www.paulrhayes.com/2011-11/use-css-transitions-to-link-media-queries-and-javascript/
This is not supported in IE9, but this...
You know that you have to click that submit button exactly once. Why on earth...
– Preventing Duplicate Execution | Rodney Rehm
“Testing is not about making sure it works. Testing is about making sure it doesn’t break.”
Things to bear in mind when building single page...
From ‘On Single Page Apps’, by @codepo8
We compete with a lot of useful browser features that we need to simulate:
History navigation
Preventing wrong loading by hitting the stop button or ESC
Loading indicators – is something happening?
Bookmarkability
Ability to open a link in another tab
State retention. When I reload the page I should get back to where I was and not the...
when you use gradients, vertical gradients will be faster and use less battery...
– Splash Vector Graphics on your Responsive Site - HTML5 Rocks
About Favicons
From Mathias Bynens (html5 boilerplate contributor)
http://mathiasbynens.be/notes/rel-shortcut-icon
http://mathiasbynens.be/notes/touch-icons
Two articles, the upshot of which being that if youhave basic requirements from your favicons you can have no favicon html at all in your page.
The spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon and an article on...
December 2012
3 posts
An overview of accessible web applications and... →
List of Browsers and Platforms for Cross Browser... →
TITLE attributes - WAC blog - RNIB →
October 2012
7 posts
the layout of the component responded based on the width of its containing...
– Responsive Containers | Andy Hume
Testing.
There are a lot of devices, platforms, viewport sizes to test on. Not including the three major OSs and versions, and the five major browsers and versions, there’s now this and it’s viewport options,
http://www.mobilexweb.com/blog/windows-8-surface-ie10-html5
this
http://gizmodo.com/5952060/xbox-360-dashboard-update-oh-hey-internet-explorer-for-your-tv
This,
...
Any thoughts about the best approach for a test set up for Win 8 / IE10 desktop?
– Windows 8 and Microsoft Surface: IE10 meets modern mobile HTML5 | Breaking the Mobile Web
Lea Verou built this awesome contrast ratio tool. Give it any form of CSS color...
– Create More Accessible Color Schemes With ‘Contrast Ratio’ | Webmonkey | Wired.com
Don’t Use Automatic Image Sliders or Carousels,... →
At some point, someone is going to request a rotating banner. I’ll need this article to remember the pros and cons (probably cons).
Retina revolution →
Using high jpeg compression to, counter-intuitively, create better quality images on retina displays than larger less compressed images.
Fixing A Broken User Experience | Smashing UX... →
Article covering how to mend systemic issues with design within an organisation’s products.
September 2012
11 posts
we emulate native apps and the practices of thick client development, rather...
– It’s Not All Doom And Gloom On The Web | Smashing Magazine
Note to self: `git-stash save ` - Handy, always confusing my stashes. @{1} just...
– git-stash: not your mom’s temporary branches « git-fu
Worm turning on Tufte-ified UIs
Google’s UI changes are a fair example of Tufte’s principles in action. Since Web 2.0’s rounded corners, drop-shadows and lickable buttons there’s been this (justified) reaction to needless ‘authenticity’ (or decoration). These articles warn against a this trend going too far and losing the metaphors that those techniques originally helped express (e.g....
New Mobile Safari stuff in iOS5: position:fixed,... →
“It’s assumed that it’s up to the developer to implement some sort of visual indicator to let the user know they can interact with the element.” Huh.
The JavaScript Comma Operator | JavaScript,... →
var a = (7, 5);
a; //5
Javascript Animation: Tutorial, Part 1 -... →
I have a feeling this would be better with requestAnimationFrame now. Not sure if this is an older article.
jQuery.proxy() – jQuery API →
Ben Alman » There's no such thing as a "JSON... →
They’re either json formatted strings, or javascript object literals. Occasionally, a javascript object literal (if in string format) will be a json formatted string. Clears that up.
Backbone has made me a better programmer | Float... →
How To Module - How To Node - NodeJS →
How to (directory) structure your node projects (with implicit github assumptions)
Scott Chacon - an alternative workflow used on... →
An alternative to git-flow http://nvie.com/posts/a-successful-git-branching-model/ which doesn’t assume releases, rather continuous deployment.
August 2012
7 posts
To be the most efficient with your icon font, you should only load the...
– #113: Creating and Using a Custom Icon Font | CSS-Tricks
Rendering: repaint, reflow/relayout, restyle →
How browsers render a page and possible pitfalls to avoid (forcing unneeded repaint)
Using generated content to display the value in a... →
Using HTML5 input type range, css calculated content values and an event listener on change. Cited in this article: http://www.netmagazine.com/features/five-things-you-didnt-know-web-could-do
/* Specify quotes for two languages */
:lang(en) > q { quotes:...
– Languages specific generated quotes. I’ll need to remember this technique, I feel. CSS generated content techniques - Dev.Opera
The myth of the “modern browser” | Christian... →
On how we should not only use feature detection, but describe browser support in terms of features supported, given the rapid version change of non-IE browsers.
Support for @supports in Firefox Nightly →
Is this a browser cow-path paving for Modernizr?
Use background-size, YepNope.js, & Modernizr to... →
July 2012
8 posts
Using Beyond Compare with Version Control Systems →
Beyond Compare can be configured as the external difference utility in many popular VCS applications.
Including git, it turns out, which is very handy for me.