Exactly how much CSS3 does your browser support? | Lea Verou

Lea Verou wrote a new tool that tests how much CSS3 your browser supports. All data is collected and sent over to Browserscope. The best thing about this tool (apart from the attention to detail, good documentation, nice design, etc.) is the reason why she built it. You should read the article and then point your browser to the CSS3 Test.

css3, tool

Skip links and standards? | Max Design

Should you use skiplinks on your site? Russ Weakley explains that skiplinks are mandatory if there are blocks of material that are repeated on multiple Web pages before the main content. So if your webpage starts with your main content (like it should in my opinion) you don’t need skiplinks. You can still add a skiplink that points to the navigation at the bottom of your page though. It will come in handy when your screen is really small.

accessibility, ux, patterns

Robert’s read January 31st 2012 – Robert’s talk

I didn’t have enough time to write a proper weekend edition for the Daily Nerd, with lots and lots of high quality reading material, but thankfully Robert Nyman published a good set of links (with a small comment and an image!).

links, linkdump

TTMMHTM – HTML5 Synth, women in tech, the return of JS, remote tilt, and deploying kittens | Christian Heilmann

One of the big inspirations for the Daily Nerd were the regular Things That Made Me Happy This Morning posts by Christian Heilmann. He started posting them again and they are a joy to read.

links, linkdump

Bruce Lawson’s personal site  : Reading List: mobile development approaches

I think a good way to end this Daily Nerd is by pointing to this excellent little analysis of different mobile development approaches written by Bruce Lawson in which he compares the incredible Lanyrd mobile site with the way 37Signals approaches the web. I think you can actually divide these companies into two camps: the content first camp and the design first camp. I like the first one better.

development, progressive enhancement, linkdump, links

Firefox Adds Powerful New Developer Tools | The Mozilla Blog

Firefox finally added their own developer tools to the new version of their browser. You can inspect elements and check their CSS. I like it. They made one silly mistake with the CSS pane though: if you open the pane the size of the viewport-width changes, which makes it unsuitable to test responsive websites with (a good place to test this feature is the Adaptive CSS Zen Garden).

developer, tool

Mobile interfaces: Mistakes to avoid and trends to watch – O’Reilly Radar

An interesting interview with Steven Hoober about the good and bad of current mobile user interface design.

mobile, ux

Beating Borders: The Bane of Responsive Layout | Design Shack

Borders are hard to get right in a fluid layout since they are not allowed to have a width defined in percentages. Joshua Johnson collected some solutions (there are more solutions in the comments (the troll who wrote the first comment should be added to the hollywoodr-blacklist))

fluid, css

Filament Group’s Open Source Code Repositories | Filament Group, Inc., Boston, MA

Here are some nice and some handy scripts made by the Filament Group. There might be something useful in there.

scripts

Some real world browser stats | Christian Heilmann

Somehow, lately, we get to see all these super sexy browser stats where IE is gone and mobile has taken over from the classic desktop. Here are some stats from a large healthcare web site in the UK. This is not a nice article but you should read it nevertheless.

stats

The Audience You Didn’t Know You Had | Contents Magazine

A pretty large portion of your audience might actually have low literacy skills. How large? Much larger than you might think. Here’s a very interesting article that takes a close look at this little known fact. You should definitely take your time to read (and understand if you have low literacy skills) this.

content, accessibility

De Wasstraat #07 | De Wasstraat

For the seventh time I drove with my colleague Peet Sneekes through the Car Wash (which I accidentally broke by putting my car in reverse instead of neutral, ghehehe), and as alway we talked about content (marketing, copyright, pirates, and more). In Dutch which you should probably learn if you want to understand what we’re saying. There’s also a six minute summary for people who don’t like long movies, like me.

content, car, wash

Detox // ShaunInman.com

Twitters own URL shortner is the worst URL shortner even made. Everything is wrong with it. One of the worst things is that (in some browsers) links you find via Twitter don’t show up in your browser history and aren’t suggested by autocomplete in the url bar. Since the Twitter team doesn’t really seem to care about details Shaun Inman decided to fix this one issue (now if someone could just fix the crazy 404 you get when there’s a punctiation mark at the end of a t.co URL).

twitter, sloppy, detail, URL

HTML5 Rocks – Case Study: Building the Stanisław Lem Google doodle

A while ago the Google logo was replaced with this crazy animated interactive Google doodle. Here’s the technical writeup about that doodle. Must read for creative scripters.

javascript, animation, html5

Resolution Independence With SVG – Smashing Coding | Smashing Coding

In this excellent in depth article David Bushell takes a close look at using SVG-sprites (and em as a unit, of course) instead of png for serving background images. Must read for designers and developers.

svg, css

Why tabs are clearly superior | Lea Verou

I never really cared about the Tabs vs Spaces debate: people who use spaces are wrong and that’s it, not much to discuss about, is there? Lea Verou did take the time to explain exactly why spaces are wrong and tabs are right. The article, the comments and especially the last sentence made me giggle (yes, I am a nerd)

coding, best practices

HTML5 sectioning flowchart

Not sure when to use a section, an article or a div (or any other block level HTML element)? Having trouble understanding the new sectioning elements? Here is a very handy and clever HTML sectioning flowchart.

html5

Caching Images With JavaScript and HTML5 progress Bars

If you understand the title and/or are intrigued by it, go ahead and read it, it’s a very interesting read, as always with articles by Zoltan Hawryluk. (And yes, once again there’s Mathias Bynens collecting yet another internet point with a valuable first post).

cache, javascript, progress

A List Apart: Articles: A Pixel Identity Crisis

There are thousands of different screens out there for mobiles and tablets but there are two ways to deal with this problem: (1) create fluid layouts that adapt to anything or if that is not good enough (2) try to fix the issue with complex calculations and mediaqueries. A very interesting article by Scott Kellum about the latter.

screens, sizes, responsive design

CSS3 Click Chart | CSS3 Browser Support and Information

Here’s a very handy tool that will show you the syntax, an explanation, a link to the spec, an example, browser support, polyfills and links to related articles, all on a nice one page layout, made by Louis Lazaris. Brilliant work and an excellent resource. You should definitely bookmark this page (and copy the concept)

css3, reference

Visual Idiot · CSS3 For The Real World

Here are some great real world examples of what can be done with CSS3 today.

css3

Remote-Tilt – emulate motion events

Motion events are hard to test: you usually write your code on a device that doesn’t support these events. Remy Sharp, genius, build this incredibly handy tool that will help you if you need these events. You will start using them now.

events, mobile, testing

Typograph – Scale & Rhythm

This is probably the best tool for designers to set up the basic layout styles and basic scale and rhythm of the typography of you new design. And yes, I did link to this before. And yes, I will link to it again, I really think every designer must use this.

design, typography

Design Principles

Some people collect links, others – like Jeremy Keith – collect design principles. Right now you are reading my collection of links but Jeremy‘s collection will make you a wiser person and a better developer/designer. You should really visit this page once in a while.

design principles, patterns

Shady Characters » Miscellany № 4

The blog for type nerds has a nice small post about the pilcrow, about paragraphing, and Winerlinks.

typography, nerd

The developer’s guide to the HTML5 APIs | Feature | .net magazine

You probably want to know more about the media API (audio and video), the text track API, the drag and drop API and all the other cool Application programming interfaces that exist in HTML5. This article by Rich Clark explains them all and provides all the necessary links.

html5, api

Markup / from a working library

People who work with content must learn HTML, says Mandy Brown in this excellent article about the difference between paper content and content on the web. You should really read this article, especially if you think WYSIWIG editors are a feature.

content, html

Controlling Selection with CSS user-select – IEBlog – Site Home – MSDN Blogs

I can think of a few use cases where you want certain pieces of text to be unselectable. I can think of many more use cases where designers will wrongly decide that I should not be able to select a piece of text. In the near future we will be able to control selection with CSS user-select. Somebody will eventually make a bookmarklet that lets you remove it.

css3, text

Niklas von Hertzen – Google+ – http://hertzen.com/experiments/css3calculator/ (Firefox 4…

Can you make a calculator with HTML and CSS only? Would I linkt to it if the answer was no?

css, math

Apps – MDN

Theoretically it is possible to build one web app and distribute it in many different ways: as a URL, as a webview in an app or as a smart bookmark. The problem with this theory is that everybody invented their own types of metadata and device API’s: there’s no standard. Mozilla is trying to fix this.

standards, html

Simple: Getting users to pick strong, memorable passwords | crystal beasley

How can you force your users – in a gentle way – to choose a safe password. Here’s a nice movie of a possible solution. There are some interesting comments below.

passwords, security

Responsive Data Table Roundup | CSS-Tricks

Tables with lots of data are hard to display on small screens. There are a few very clever solutions for this issue. Chris Coyier collected them and explains them.

tables, responsive design

JavaScript pattern and antipattern collection

I think JavaScript is easy to start with (instant satisfaction with alert('')) but I know it is hard to master. Here’s a very good resource by Shi Chuan that will help you in becoming a master, it’s filled with design patterns and best practices. All web developers should study this guide, I think.

javascript, design patterns

Auto-detecting Credit Card Type – Web Standards Sherpa

Nobody should have to type their credit card number into a form field, ever. Online payment should be easier than that. But until then you might find this article by Nicholas Zakas about detecting the kind of credit card with JavaScript of use.

javascript, money, payment, credit card

Inclusive Design – Smashing UX Design | Smashing UX Design

Here’s a nice, thought provoking article by Faruk Ateş about the history of inclusive design in interfaces and the future of the interface as he sees it: a responsive interface that changes according to the needs of the user. A great read.

ux, responsive design

Handling CSS Transitions with prepareTransition – Snook.ca

With CSS3 transitions you can easily enhance the user experience, for instance when closing a dialog. Technically however some transitions (like fading-out) are harder than you’d expect. Jonathan Snook came up with this very clever JavaScript hack to solve this issue for now, be he also came up with a proposal to solve this issue once and for all from within CSS. Excellent as always, a must read for people who write code.

css3, javascript, hack, design patterns

(Better) Tabs with Round Out Borders | CSS-Tricks

Here’s a very nice tutorial that explains how you can create a certain effect on tabs by using the :before and :after pseudo-elements. It’s not just a nice article because it explains some clever tricks, it’s also filled with useful information, things I didn’t know. Example:

In my opinion, the terms :before and :after are slightly confusing since the pseudo’s aren’t actually added before or after the element they apply to, but are inserted as children. This is also why you can’t apply :before and :after to elements that can’t contain children (“no content” elements), like <input>.

I didn’t know that but I always wondered why that was. Thanks for explaining, Menno van Slooten!

css, pseudo-elements

Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog

I linked to an example page which shows how powerful OpenType features can be before. Here’s a more technical introduction on the matter.

typography, opentype

Tim O’Reilly – Google+ – Before Solving a Problem, Make Sure You’ve Got the Right…

In the discussions around SOPA and PIPA in the USA a while ago, and ACTA here in Europe right now there’s always the core argument that online piracy is a real threat. All these law proposals are based on this argument yet there is no real evidence that there is any truth in it. Tim O’Reilly, a publisher, wrote down his ideas about this argument. An absolute must read for everybody who just thinks that online piracy is such a big problem.

copyright, piracy

The new (and hopefully final) linear gradient syntax – Broken Links

The syntax for linear gradients has changed lately. Peter Gasston explains the reasons behind the change and the differences between the old and the new syntax (and Mathias Bynens earns yet another internet point in the comments).

gradient, css3, css

uxebu » blog » Blog Archiv » Improve your product: Make better tutorials

Many of the techniques I know I learned through online tutorials, articles with code examples written by nerds. David Pfahler and Stephan Bönnemann have been thinking about how tutorials can be improved and came up with this very interesting article.

tutorials, education

Height matters! – Anders M. Andersen

Here’s some excellent advice from Anders M. Andersen about screen size: it’s not just about screen-width when we talk about mobile, screen height is equally important (it might even be more important in some situations, like the header in small screens or multi-column texts on wide screens)

mobile, web design, height

Textarea Auto Resize | Impressive Webs

Some elements are just weird. The textarea for example doesn’t resize if the content inside it gets too high. There’s no way you can change this behavior with CSS, you will need some JavaScript. Here’s a clever hack.

bugs, html, css, javascript, hack

Accessible HTML5 Forms – Required Inputs « Unrepentant

How accessible is the required attribute on form elements. It turns out that with a little help from some ARIA it is quite accessible. Nice.

accessibility

on the story of browser names | don’t code today

Here’s a very nice story about the names of browsers. It’s either based on excellent research or it’s just a fantastic story. You should read it. (Here’s another article on this subject)

browsers

Spice Your Type

Did you know you can use Open Type features on the web? Do you know what Open Type is? Both no? Take a look at this site and switch some features on and off.

typography, open type

Adactio: Journal—Months and years

Filling out the date in a form can be a pain in the ass if not done right. If done right though it can be a pleasure. The problem is that the right way to enter a date is rather different on different devices. Jeremy Keith came up with a nice future friendly solution.

progressive enhancement, form

HTML5 Webcam Toy

Photo Booth is hilarious, unfortunately it’s only available on iOs and Macs. But now we have this HTML5 Webcam Toy which works with an experimental Opera build you can find right here.

getusermedia, opera, ghehehe

Standardista » CSS Specificity

CSS Specificity is hard and the best way to explain anything that’s hard is by using sharks in you example. Estelle Weyl made this very clever specificity chart and she wrote an article that explains it even further. Must read for people who write CSS.

css, sharks, specificity

The contenteditable attribute | HTML5 Doctor

When an alement has the contenteditable attribute assigned to it, its content can be changed. This can be used in CMS’es but also in presentations with live CSS coding. Jack Osborne wrote this good in depth article about it. You should read it, you can do nice things with it.

contenteditable

Triangle with Shadow ✿ dabblet.com

One of the things you can not make with CSS only is a triangle with a shadow. Well, actually you can (if your name is Chris Coyier).

css3

Delivering a Mozilla Firefox Extended Support Release | The Mozilla Blog

I will probably never understand why but some big corporations don’t want to update their browsers too often. Mozilla changed their upgrade policy lately and these corporations were not happy about it. There’s a solution to that problem now.

enterprise, browsers

Emigre Web Font Pricing

Web fonts were supposed to make it easier for us and were supposed to make the web a more beautiful place. Unfortunately the web got worse. Font foundries turned out to be greedy bastards who don’t understand the web at all. What do the amount of page views have to do with the price of a font-file? It’s none of their business, it’s a rather rude thing to ask, isn’t it? And then they have some requirements about how I host these font-files. But maybe the worst of all is that I’m not allowed to optimize the font-file for my own specific needs (font-files can be huge and should be optimized really). Other crazy things: you’re not allowed to use the font on an element with the contenteditable attribute, and you have to use the CSS they provide. What the foundries don’t understand is that they have to compete with free services (and pirated fonts), not promote them. Want to use @font-face? Use a free service like font-squirrel, The League of Movable Type or Google Webfonts. Am I the only person who thinks these licenses are insane?

insanity, fonts, legal

Islands of Thought in Macrotypography · ART=WORK

One of the weirdest leftovers from the IE6 era is the fact that we don’t use sibling selectors and thus never bothered to use real typography on the web. We’re waking up now and realize that all along we could have read all these articles (about how bad IE6 is, for example) in a much more pleasant way. Nathan C. Ford tells us some things about paragraph indentation and gives us a handy bookmarklet.

typography, bookmarklet

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

Almost two years ago Mathias Bynens wrote an article about the details element, how you can detect if it is supported and how you can polyfill it. He’s been updating the article ever since (like he does with all his articles), for which he’s earned yet again some extra internet points.

details, html5, polyfill

Learn You a Flexbox for Great Good! | The Haystack.

In December Stephen Hay published an excellent article about Flexbox on the Fronteers blog, in Dutch. For those of you that don’t speak that language he took the time to translate it to proper English. You’re very lucky, it’s a very good article.

flexbox, css

What The Heck Is Responsive Web Design?

Here’s a nice presentation about responsive design: what it is, what flavours we have, how it works and some nice examples and resources as a bonus. (I like the effects used in the slideshow too)

responsive design, presentation

Perfection kills » Profiling CSS for fun and profit. Optimization notes.

If you’ve been playing with CSS3 you’ve probably noticed that pages can get a bit slower when you add radii on boxes with complex gradients and complex box-shadows, especially if it’s a complicated page with lots of DOM nodes, and it’s a page you want to use to explain how responsive design works. For these occasions there are some very handy new optimization tools in Opera and Webkit that let you debug CSS. Here’s a very thorough writeup by Juriy Zaytsev about how these tools work.

css, performance, tools

What To Do When You Meet A Sighted Person « The Dutch Prutser’s Blog

We’ve been studying accessibility for years now and we know how a lot about how deaf, spastic and especially blind people use their computers and get by in general. But what do you know about sighted people? Not much probably. Here’s an excellent article that explains a lot about their behaviour.

accessibility

Test on Real Mobile Devices without Breaking the Bank | Brad Frost Web

You should test your websites on real devices, not just emulators, and not just on your own iPhone or Android device, there’s much more out there that people actually use. But what devices should you get? Here’s a list of devices that Brad Frost thinks you should have. Here’s the list of devices I think you should have and Stephen Hay told me his pragmatic list last weekend: for every project you do just buy the device your client uses.

devices, mobile

Vanilla JavaScript FTW

JavaScript is getting easier, even I could write this.

javascript

Adventures In The Third Dimension: CSS 3D Transforms – Smashing Coding | Smashing Coding

We’ve been faking depth with images and simple shadows on the web for years but now in more and more browsers we can use 3D Transforms with CSS. Peter Gasston wrote an excellent article about it which you should read, a few months from now a majority of your visitors will be able to see these transforms. Here’s an example of what can be done with CSS3 3D.

3d, css3

CSS media queries in JavaScript, Part 1 | NCZOnline

If you use mediaqueries for your CSS it might be a good idea to use them for JavaScript too. How? Nicholas Zakas explains. Read it and use it.

mediaqueries, css, javascript

Choosing device sizes to support for your responsive designs | Matt Wilcox .net

Responsive design, it sounds like a good idea and all but how do you design a responsive website? That’s a legitimate question if up until now you’ve been building fixed width layouts, like most of us. Matt Wilcox explains the fluid, small screen first approach which I think is a very good one.

responsive design

What we still can’t do client-side | Lea Verou

A lot of work that was traditionally done on the server is now done on the client and if it isn’t it will be soon. There are some exceptions though and Lea Verou explains them, thorough and well informed as always.

future, client, server

hurl

Hurl is a nice little tool that shows you the response headers from a URL.

headers, http, tool, api

Lose the Wait: Page Weight and Transfer Weight | Zoompf

The bigger a site (in Kb) the slower it will be. That’s easy and that’s the basis behind the whole performance movement. Zoompf wrote a blog post about this simple principle with the promise that more will follow. I’m looking forward to reading them.

performance

[open tabs] some reading I did lately and you can now, too | Christian Heilmann

Do you want more to read? Here’s a nice collection of links, with comments, by Christian Heilmann.

linkdump, links

scrollorama

Scrolling is the new black, at least on the desktop. We’ve all seen nice effects while scrolling down a page. This is done with some javascript and here’s a jQuery plugin for the people who are not fluent in that language.

scroll, jquery

Fabric.js Javascript Canvas Library

This looks like a very nice library for creating cool (interactive) things with Canvas of SVG. Creative nerds, you should check it out.

canvas, svg, javascript

HTML5 Canvas Cheat Sheet – Nihilogic

Here’s a handy Canvas Cheat sheet for all those creative nerds.

canvas

CSS Circles

It’s pretty easy to make circles with CSS3. David Walsh explains how you do it and he shows some extra things you might want to do with circles.

css3, circle

A plea for progressive enhancement | Stephanie Rieger

Progressive enhancement is important, especially for vital parts of your site like the navigation. Stephanie Rieger took a look at the navigation of the new Obama site with several devices and wrote an article about it, it was that bad. She writes about a complex navigation solution she’s building right now and I can’t help thinking that the design pattern for navigation should be pretty simple: a skip link at the top and the navigation itself at the bottom of the page. Works everywhere and can be enhanced in many different ways. Here’s an example with a picture of a shark in it.

progressive enhancement, mobile, patterns

Better CSS Sprites with SVG – Bessere CSS Sprites mit SVG | eleqtriq

The title of this article looks very promising, it’s a pity that there’s a browser that doesn’t play nice with this solution. No you guessed wrong, it’s not IE. Some hackery is needed to get this to work in all modern browsers but then there’s a plethora of new creative possiblities for you background-images.

css, svg

CSS Selector Profiler, Source Mapping and Software Rendering « Peter Beverloo

I think it’s been a while since I linked to one of the Webkit and Chromium updates that Peter Beverloo writes every week. In this one there is some nice news about the Web Inspector (CSS Selector Profiler FTW!). Here’s another one with news about things I don’t understand and here’s last week’s update with more news about the CSS Selector Profiler and many more things I don’t understand.

weekly, chrome, webkit

A tel Tale Sign | Brad Frost Web

We nerds sometimes forget that people do other stuff on their mobile phones than surfing the web: the sometimes make phone calls for instance, and sometimes they want to call the owner of a website. Brad Frost wrote this in depth article on making a telephone number clickable on phones and useful on other devices. A very interesting read!

telephone

Cross Browser HTML5 Progress Bars In Depth

Sometimes you need a progress bar in your website and we have the progress element just for that purpose. Zoltan Hawryluk did some extensive research and gives you all the information you need to build a custom styled, future friendly, backwards compatible progress bar. Very wel documented and researched article, as always.

progress

mjg59 | TVs are all awful

So you think that Android screen sizes are fucked up? You’re right, they are. But TV’s are even worse. Here’s a very interesting read about some crazy legacy from the old days of television.

tv, resolution

IP Feudalism and the Shrinking of the Public Domain — Marginal Revolution

Since 1978 a work is copyrighted for the length of the life of the author plus an additional 70 years. Alex Tabarrok calls this IP Feudalism where heirs inherit the rights to a work. The only people who gain something by this are, of course, the heirs. There’s a nice list with works we could freely use right now if this law didn’t exist.

copyright

Proposed HTML elements and attributes

Here’s a list with proposed HTML elements and attributes and links to the proposal text. A pretty interesting overview.

html

Skills for Front-End Developers | Impressive Webs

Here’s a nice list with skills a front-end developer should have (according to Louis Lazaris). I am absolutely sure that every front-end developer will disagree with this list: it’s either overcomplete or incomplete. It is a very nice list to discuss about though.

front-end, professionalism, knowledge

Untitled ✿ dabblet.com

Scrollbars can be styled in webkit. Here are some experiments. You used to be able to style scrollbars in IE. This feature always resulted in less usable sites. I hope people will use this feature wisely.

scrollbars, styling

Responsive Design, Responsively Illustrated

Here’s an incredibly clever responsive website: you can use this site to explain what responsive web design is by resizing you browser window (it won’t work on you mobile).

responsive design