December 2011
50 posts
Video Subtitling and WebVTT | HTML5 Doctor →
We’ve been able to play video in the browser without a plugin for a couple of years now, and whilst there are still some codec annoyances, things appear to have settled down on the video front. The next step is adding resources to the video to make it more accessible and provide more options to the viewer.
Fullscreen HTML5 video | The CSS Ninja - All... →
In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. The FullScreen API now...
MDN holiday calendar - come back each day this... →
Elements →
Impressive
25 Secrets of the Browser Developer Tools –... →
Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allows us to manipulate DOM elements, CSS styles, JavaScript and other useful information from the same window often in real time.
Mobile Performance Manifesto | David Calhoun's... →
I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcing his focus on mobile, and I thought it was time for an update, this time in blog form. Also, my old slides have been somewhat embarrassing. For some strange reason, at the time I wanted to give S5 a try – that outdated, ancient, not-performant slideshow framework. The result is a slideshow...
Fixed Positioning in Mobile Browsers | Brad Frost... →
Fixed positioned elements (typically headers or footers) are extremely common conventions for native mobile platforms, so naturally fixed elements found their way into mobile browsers. Web designers are used to fixing elements to the window using CSS’s position: fixed, however, in the land of mobile browsers, support for fixed positioning is far less universal and is way more quirky.
Transitioning Max Height — Article — The Nerdary →
Over at Happy Cog, we recently worked with MTV on their second Online Music Awards event. The project consisted of both a live streaming event as well as a supporting web site where users could come and vote on nominees. As a site that was designed to be exciting to use, we also wanted to make sure the experience was easy to use, while including some “surprise and delight” factors. The Vote page...
Fixing oninput in IE Using html5Widgets →
In my previous blog post, I wished that the onforminput event was not deprecated in the HTML5 specification. I have used this attribute in the past to show values in range elements and show calculations of values inside a form, and thought it was perfect for those who know little JavaScript to implement features like this very easily. Rob Crowther made pointed out that the oninput event, which has...
The output element | HTML5 Doctor →
Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the element! In this article, we’ll show you and some related JavaScript tricks. Let’s get cracking.
The Payoff of Saying →
When faced with selling his company to Apple, Dropbox CEO Drew Houston told Steve Jobs to take a hike. In this video interview with Forbes, Houston recalls saying “no” to Jobs:
How to make a web standards proposal - The... →
One of the web platform’s greatest strengths is that no one company or organization controls the platform. For developers to use a platform feature, that feature needs to be present in some critical mass of browsers, which means the web platform is some rough consensus of what browser vendors ship.
Learning Loops » phpmaster →
A significant advantage of computers is that they can perform repetitive tasks easily and efficiently. Instead of writing repetitive code you can write a set of statements that processes some data and then have the computer execute them repeatedly by using a construct known as a loop. Loops come in several different flavors in PHP: for, while, do-while, and foreach. I’ll introduce you to each of...
Custom Events are Pretty Cool | CSS-Tricks →
Let’s say you are working on a web application in jQuery and you are tasked with writing an accordion suited to the needs of your web app. You decide to make it into a plugin. That way anywhere in this app that needs an accordion, they can load this plugin and call it upon semantic markup that is ready to become an accordion. Then ta-da, they have a lovely working accordion.
A Tour of PHP.INI » phpmaster →
Anyone who has a server using PHP has undoubtedly heard of php.ini – it’s the configuration file used to control and customize PHP’s run-time behavior. It provides a simple way to configure settings for such things as:
is for Block →
Do you think using and in markup is not semantic? That tags are so 1999? That everyone who still uses them should be serving burgers in McDonalds instead?
Say Hello to CSS3 Filters | Nettuts →
Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!
Machine tags and ISBNs | Clagnut § Blogging ·... →
About a year ago I wrote about how tagging had become more than just a way to annotate content with keywords. Tags had become the wires by which disparate content could be connected. Through use of consistent and detailed tagging, I could begin associating my blog posts with my content on other web sites, such as my Flickr photos and my ma.gnolia links. This is, of course, the joy of API in...
CSS Filter Effects Landing in WebKit - HTML5Rocks... →
Filter effects have been around for awhile but were designed to work in SVG. They’re fantastically powerful at applying effects like color intensity, warping, or blurring to an image before it’s composited and rendered into the document.
Flickr: Discussing Machine tags in Flickr API →
We are rolling out a new feature called “machine tags” that allows users to be more precise in how they tag, and how they search, their photos.
Adactio: Journal—Ghost in the Machine Tags →
Richard has some very nifty ideas up his sleeve for the next iteration of his site. Some of these are design-related and some are technical. He just gave a peek into the technical side of things by explaining how he’s using tags to tie content together. Not just any old tags, mind: machine tags.
24 ways: Getting the Most Out of Google Analytics →
Something a bit different for today’s 24 ways article. For starters, I’m not a designer or a developer. I’m an evil man who sells things to people on the internet. Second, this article will likely be a little more nebulous than you’re used to, since it covers quite a number of points in a relatively short space.
24 ways: Raising the Bar on Mobile →
One of the primary challenges of designing for mobile devices is that screen real estate is often in limited supply. Through the advocacy of Luke W and others, we’ve drawn comfort from the idea that this constraint ends up benefiting users and designers alike, from obvious advantages like portability and reach, to influencing our content strategy decisions through focus and restraint. But that...
24 ways: Front-end Style Guides →
We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work.
Method & Craft | Easier Parallel Lines in... →
Learn how to use the text tool in Photoshop to keep lines equally spaced, and easily adjustable. A great productivity tip for when you’re designing navigation dividers, charts, and tables.
Responsive Advertising | Mark Boulton →
Recently at Mark Boulton Design, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue — either through multiple ad slots on the page, or from video pre-rolls.
Wayfinding: Writing for Accessibility - Web... →
Our work helps people do all sorts of things, like buying a raincoat, booking a hotel, and traveling from the Tate Modern to Buckingham Palace. We’re responsible for making information clear and meaningful for everyone, including people with disabilities. So how can we approach content and accessibility? How can we write for people with a range of abilities?
Imagine a World Without Managers by ZURB →
Give someone monarchlike authority, and sooner or later there will be a royal screwup. A related problem is that the most powerful managers are the ones furthest from frontline realities. All too often, decisions made on an Olympian peak prove to be unworkable on the ground.
Why “variables” in CSS are harmful →
Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.
Heaven Devoid of Stars – a tale of cross-browser... →
Over on the Fontdeck Blog I posted a Christmas List for Type Fans. Among the things of beauty listed was this print sold in the I Love Typography store.
Bruce Lawson’s personal site : Notes on Adaptive... →
All the cool kids are doing responsive design, it seems. This means fluid designs, having some hot media query action to reformat your layout depending on screen size, and ensuring your images are flexible so they don’t break out of container, generally by setting them to {max-width:100%;}.
The problem with CSS pre-processors | Blog |... →
I’ve been considering to use a CSS pre-processor like SASS, LESS, Stylus, etc, for a very long time. Every time someone asked me if I was using any of these tools/languages I would say that I’m kinda used to my current workflow and I don’t really see a reason for changing it since the problems those languages solves are not really the problems I’m having with CSS. Then yesterday I read two blog...
24 ways: Creating Custom Font Stacks with... →
Any web designer or front-end developer worth their salt will be familiar with the CSS @font-face rule used for embedding fonts in a web page. We’ve all used it — either directly in our code ourselves, or via one of the web font services like Fontdeck, Typekit or Google Fonts.
Web 2.0 Development and Business Lessons:... →
While many of you will probably disagree with me, I find the trend towards writing in languages that compile to JavaScript somewhat alarming. The most notable of these languages CoffeeScript, and it’s one that has gained a good degree of traction over the last year or so.
Six CSS Layout Features To Look Forward To -... →
A few concerns keep bobbing up now and then for Web developers, one of which relates to how to lay out a given design. Developers have made numerous attempts to do so with existing solutions. Several articles have been written on finding the holy grail of CSS layouts, but to date, not a single solution works without major caveats. At the W3Conf, I gave a talk on how the CSS Working Group is...
3 ways to improve copy for a better user... →
Recently I wrote about user testing content, and how the main results I got from testing was that the copy and content needed to be improved.
24 ways: CSS3 Patterns, Explained →
Many of you have probably seen my CSS3 patterns gallery. It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and...
Panic Blog » Check App Store Updates With a URL →
And when we tell people there’s something new, like a software update, we really like to provide a specially crafted URL that will allow that person to get said update with one click. We built this functionality into Transmit and Unison, and it makes for a great Twitter experience: here’s a new thing, click here to get it, boom, done.
Why Spotify can never be profitable: The secret... →
Imagine a new hot-dog selling venture. Let’s also say there’s only one supplier to purchase hot dogs from. Instead of simply charging a fixed price for hot dogs, that supplier demands the HIGHER of the following: $1 per hot dog sold OR $2 for every customer served OR 50 percent of all revenues for anything sold in the store.In addition, the supplier requires a two-year minimum order of 300 hot...
The Exporter →
Sometimes social networks go too far. Overzealous privacy policies and poorly thought out redesigns abound! You have an exit strategy!
24 ways: Your jQuery: Now With 67% Less Suck →
jQuery is an amazing tool that’s made JavaScript accessible to developers and designers of all levels of experience. However, as Spiderman taught us, “with great power comes great responsibility.” The unfortunate downside to jQuery is that while it makes it easy to write JavaScript, it makes it easy to write really really f*ing bad JavaScript. Scripts that slow down page load, unresponsive user...
Personal names around the world →
People who create web forms, databases, or ontologies are often unaware how different people’s names can be in other countries. They build their forms or databases in a way that assumes too much on the part of foreign users. This article will first introduce you to some of the different styles used for personal names, and then some of the possible implications for handling those on the Web.
24 ways: Displaying Icons with Fonts and Data-... →
Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites. They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Bitmaps have two drawbacks, however: multiple HTTP requests, affecting the page’s loading performance; and a lack of scalability, noticeable when the page is zoomed or viewed on a screen with a high pixel...
Alternate Sleep Cycles | High Existence →
Most people only think that there is one way to sleep: Go to sleep at night for 6-8 hours, wake up in the morning, stay awake for 16-18 hours and then repeat. Actually, that is called a monophasic sleep cycle, which is only 1 of 5 major sleep cycles that have been used successfully throughout history. The other 4 are considered polyphasic sleep cycles due to the multiple number of naps they...
Daniel Davis - The HTML5 element in words of one... →
Opera colleague Bruce Lawson thought it might be spiffing if the description of the element that appears in the HTML5 spec was clarified a bit, so here’s my attempt. I’m using Japanese as an example although it applies to Chinese and possibly other languages as well. Please note my definition of one syllable may differ from yours.
Path menu in pure CSS3 →
I’m fall in love with the new UI of Path. I really love the user interaction design like the “add menu”. So, as I’m a front-end developer, I tried to recreate the same thing on my browser.
Flexbox will kick your dog and pee on your rug –... →
I wanted to like flexbox, I really did. I read Paul Irish’s Quick hits with flexible box layout and drooled. However, the lack of browser support at the time meant I couldn’t do anything more than bookmark the article for future reference.
24 ways: Conditional Loading for Responsive... →
On the eighteenth day of last year’s 24 ways, Paul Hammond wrote a great article called Speed Up Your Site with Delayed Content. He outlined a technique for loading some content — like profile avatars — after the initial page load. This gives you a nice performance boost.
Subpixel positioning with CSS transforms and type... →
Along with WebKit hardware-accelerated anti-aliasing, CSS 3D transforms can have adverse effects on type rendering when translate X/Y values have subpixel, or decimal values.
Resolving anti-aliasing on WebKit... →
Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.