May 2012
19 posts
2 tags
Responsive Typography →
With the chaos of different screen sizes and a new generation of Web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom Web fonts. But screens have not just changed in size but also in pixel density. In other words: We do not just need responsive layouts, we also need responsive typefaces. To test that...
2 tags
1 tag
Facebook Camera →
It’s about time. I know this seems a bit crazy given the recent (but not yet completed) Instagram purchase. But I had heard a few weeks ago that the app was really close to being done.
Remember, the Instagram deal was done very quickly by Zuckerberg himself. I imagine they figured there was no point scrapping all the work this team was doing — at first glance, the app looks great — especially...
1 tag
WYSIHTML5 - A Better Approach to Rich Text Editing →
Wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
1 tag
Lessons From A Review Of JavaScript Code →
Reviewing code is possibly the single best technique to improve the overall quality of your solutions, and if you’re not actively taking advantage of it, then you’re missing out on identifying bugs and hearing suggestions that could make your code better.
2 tags
The Toolbox →
A collection of the best time-saving apps, tools, and widgets from around the web.
1 tag
Browsers and Apps in 2012 →
It’s like this: The browser’s doomed, because apps are the future. Wait! Apps are doomed because HTML5 is the future. I see something almost every day saying one or the other. Only it’s mostly wrong.
2 tags
8 web standards myths debunked →
Lea Verou takes a look at some of the misconceptions of web standards, what the W3C and its working groups actually do and how the standardisation process works.
1 tag
1 tag
EpicEditor →
EpicEditor : An Embeddable JavaScript Markdown Editor
WYSIWYGs suck and they suck hard. Markdown is quickly becoming the replacement. GitHub, Stackoverflow, and even blogging apps like Posterous support Markdown now. This allows you to generate a Markdown editor with a preview, fullscreen editing, full CSS theming, and offline support.
1 tag
Everything you need to know about HTML5 video and... →
A very comprehensive article. In-depth coverage of HTML5 video concepts.
1 tag
2 tags
How Browsers Work →
This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code.
2 tags
Taming the SVG Beast →
Andrew Baker looks at the rendering of SVG files in the browser, along with two rather different approaches to bring SVG files to the HTML5 Canvas, Ink2Canvas and Canvg.
1 tag
Fluid CSS3 Sslideshow with Parallax Effect →
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.
2 tags
Fixie.js →
By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.
1 tag
Screenfull.js - Simple cross browser wrapper for... →
The Fullscreen API is fairly new with growing support but the implementation varies across browsers. Screenfull.js is a simple script from Sindre Sorhus to change that, changing:
document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen; function requestFullscreen( element ) { if ( element.requestFullscreen ) {...
3 tags
7 Reasons to Consider SVGs Instead of Canvas →
SVGs are being neglected in favor of the canvas element? Craig cites several good reasons why your next project could benefit from using Scalable Vector Graphics
2 tags
jQuery Endless Scroll →
Endless Scroll not only helps you build highly customisable infinite scrolling effects, it also offers features not commonly seen. Such features include:
The ability to up-scroll and prepend content to the beginning of the page
The ability to limit the number of available “pages”, i.e. data truncation
And there are more exciting features in the works, including SEO-friendly URLs!
April 2012
16 posts
1 tag
Google JavaScript Style Guide →
A JavaScript style guide to go along with Google’s HTML & CSS style guide
JavaScript is the main client-side scripting language used by many of Google’s open-source projects. This style guide is a list of dos and don’ts for JavaScript programs.
Here are some really good one’s
Always use semicolons
Declarations with var: Always
Use a variable initialized with a...
3 tags
2 tags
Google HTML/CSS Style Guide →
ialreadydontlikeyou:
Pretty decent resource. Nice to see Google’s best practices when it comes to mark-up in front-end web development.
Here are some really good one’s (that I’ve seen used incorrectly around the office before)
Use only lowercase.
Remove trailing white spaces.
Provide alternative contents for multimedia.
Omit type attributes for style sheets and scripts.
Use...
2 tags
A HTML5 Mobile Game Primer →
It wanders around a bit, but this extensive article by Pascal Rettig covers a lot of interesting points relating to HTML5 game development for mobile devices (with a focus on iOS devices) including sound, performance, and viewport considerations.
2 tags
CSS Variables Published as First Public Working... →
Tab Atkins Jr. has announced that ‘CSS Variables’ has been published as a first public working draft at the W3C. This module introduces a family of custom user-defined properties known collectively as variable properties which can be used throughout a CSS document (think Sass).
1 tag
Retina.js: Retina Graphics For Your Site →
An open source script that makes it easy to serve high-resolution images to devices with ‘retina’ displays (such as the new iPad or iPhone 4+).
1 tag
2 tags
Using HTML5 localStorage on a form →
HTML5 localStorage provides us with the ability to store named key/value pairs locally within a users browser, this means that the data stored in localStorage is still there even after a user has closed the browser, deleted their cookies or turned off their machine/device.The HTML5 localStorage attribute is supported by most modern browsers including Firefox 3.5+, Chrome 4+, Safari 4+, Mobile...
2 tags
HTML5 Audio and Audio Sprites - This Should Be... →
HTML5 evangelist Chris Heilmann uses a simple demo to pick at a sore point of HTML5: its cross-browser audio support. He wants to reignite the discussion over HTML5 audio.
3 tags
2 tags
Modernizing Your HTML5 Canvas Games Part 1:... →
Over at MSDN, David Rousset kicks off a series on turbocharging your HTML5 Canvas-based games. In this case, he picks on Canvas scaling and using CSS3 transforms to improve transitions between scenes.
3 tags
1 tag
Webshims Lib →
Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.
2 tags
2 tags
Internet Explorer Market Share Surges, as IE 9... →
Contrary to the data from StatCounter, linked in last week’s H5W, WebMonkey notes that IE is actually growing in popularity and explains where the discrepancy in the figures comes from.
1 tag
A Tron Game in 219 Bytes of JavaScript - Explained →
Alok Menghrajani and some coworkers set out to do some JavaScript ‘golfing’ and came up with a 219 byte ‘tron’ style game. The techniques used are interesting and they’re all explained here.
March 2012
20 posts
3 tags
JavaScript Libraries for All Things 'Touch' →
A GitHub wiki page listing JavaScript libraries for dealing with touch events, multitouch, normalizing across the Webkit/IE touch models, etc.
2 tags
Foresight.js: Adaptive Image Support →
Foresight.js judges if a user’s device and connection is suitable for high-resolution images and requests the appropriate image for the situation. The README explains the idea in depth.
1 tag
CSS Regions: One Year In →
On Adobe’s Web Platform Team Blog, Vincent Hardy looks at Adobe’s original ‘CSS Regions’ proposal for bringing high quality, print-like styling to the Web, and how it has eventually branched out into other standards. It seems WebKit browsers and IE10 are the best ways to play with this for now.
2 tags
2 tags
Stop (Mis)Using Return False →
Why in most situations, you should be using e.preventDefault() instead of return false. And thoughts on where you should insert that call within the callback function (hint: as early as fits with your program logic).
2 tags
1 tag
1 tag
Tangle →
Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.
Be sure to explore the rest of the site for some nice Webkit and great content.
2 tags
CSS3 Pseudo-Classes and HTML5 Forms →
A killer feature of HTML5 is JavaScript-free client-side form validation and Peter Gasston shows off how to lean on those features using CSS3 to put together interesting UI effects.
2 tags
HTML semantics and front-end architecture →
Semantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the study of the meaning of signs (such as words, phrases, or sounds) in language. In the context of front-end web development, semantics are largely concerned with the agreed meaning of HTML elements, attributes, and attribute values (including extensions like...
2 tags
WSX: VMware Working on Virtual Machines in the... →
Over at VMware, they’ve been working on a prototype called ‘WSX’ that brings VMware hosted VMs to your tablets, smart phones, and other browsers. It leans heavily on HTML5 Canvas and WebSockets.
2 tags
basket.js (0.2) →
A simple (proof-of-concept) script loader that caches scripts with localStorage
basket.js is a small JavaScript library supporting localStorage caching of scripts. If script(s) have previously been saved locally, they will simply be loaded and injected into the current document. If not, they will be XHR’d in for use right away, but cached so that no additional loads are required in the...
2 tags
2 tags
Say hello to the color picker in WebKit Inspector →
If you’re using the Chrome dev channel or the WebKit Nightlies, you might have noticed this already: previously, when you clicked the colored square on the left of a color code in the WebKit Inspector, it used to cycle through different color formats. That’s still possible when you shift-click it, but a regular click will now spawn a color picker.
2 tags
developer.espn.com →
ESPN is opening up API’s to access its data.