Category: Basics
A series on fundamental knowledge of web development, aimed at beginners.
A series on fundamental knowledge of web development, aimed at beginners.
I recently ran into a problem involving the removeEventListener() method, which caused me a good half an hour of confusion before a lightbulb appeared above my head and I was enlightened by a solution — a solution which, it must be said, is very obvious in hindsight. So doubtless many people know this already, but I’m recording it here along with another approach I thought of afterwards, in the hope that they may be useful to someone in the future.
Harry Roberts wrote a great article, Front-end performance for web designers and front-end developers, which details various techniques for improving page load times. One thing he skips over, though, is image optimisation. There are many ways to optimise images for loading performance, including using image sprites, icon fonts, and replacing bitmaps with SVGs. But whenever you have to use bitmap images you should also optimise them before they make it to the page.
In this article I want to show a few simple image optimisation techniques I use, which are aimed at reducing the filesize of the images, and therefore speeding up your page loading times.
I’ve written some posts for the Safari Books blog, featuring practical CSS advice.
Using CSS Fonts for Adaptive Icons is the lead article, and there are two shorter tips: Making Better Print Stylesheets, and Faking Randomisation With nth-child.
We, as website makers, quite often advise our clients to avoid generic link text (read more,click here, etc.), and explain that more verbose descriptions help give context to users with screen readers. But using semantic link descriptions actually helps everyone.
I recently read Peter Morville’s fantastic book, Ambient Findability, which defined really well the motivation to use semantic descriptions for links: they give the target page aboutness.
Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).
One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.
The way to get around that is quite simple; use local() to check if the font is on the user’s system first.
I’m happy to see that IE8 includes native support for console.log, the JavaScript command which writes information to your preferred debugging tool (mine is Firebug). If you leave it in your code – as I did on my latest project – it throws an error in IE7 & below.
The way around it is to quickly check that the command is supported by your browser, and to provide an alternative (I use that old standby, alert) if not; and the quickest way to do that is with the if…else shorthand:
window.console ? console.log(foo) : alert(foo);