Skip to content

24 ways to impress your friends


Poetry? Not likely (though Dan Cederholm wrote some doggerel back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty hacks tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.

  1. Refactoring Your Way to a Design System

    Mina Markham

    Mina Markham brings a ray of hope that flitters in the sky with advice on refactoring an existing codebase into a design system. Greenfield projects are rare, so can we move forward with legacy styles in place? All across the land dawns a brand new morn, this comes to pass when a new design system is born.

  2. Feeding the Audio Graph

    Ben Foxall

    Ben Foxall dives deep into the Web Audio API to serve up such well known Christmas hits as I’m Dreaming Of A White Noise Generator, and All I Want For Christmas Is 440Hz. Get ready to dance around your browser this season, because it certainly won’t be a silent night.

  3. Accessibility Through Semantic HTML

    Laura Kalbag

    Laura Kalbag takes us back to basics to make sure we consider accessibility when structuring our HTML. The Christmas tree needs to be standing firm before we drape it in lights and tinsel, and until you lot start doing it, we’re not going to stop preaching it.

  4. Getting Hardboiled with CSS Custom Properties

    Andy Clarke

    Andy Clarke lifts the lid on Custom Properties, and adds a little spice with an elegant method for providing fallbacks for those with older browsers. Remember, at Christmas we all need to look out for our elders, be they friends, family or even just browsers.

  5. Design Systems and CSS Grid

    Stuart Robson

    Stuart Robson tackles the thorny issue of integrating modern CSS Grid layouts into an existing design system, but in doing so reaps the benefits of leaner, more easily maintainable markup. It goes to show that with careful planning, there’s no reason old and new CSS layout methods cannot meet under the mistletoe.

  6. Teach the CLI to Talk Back

    Anna Debenham

    Anna Debenham sets out to humanise our interactions with the command line to put more of the user into the user interface. Like an injured hedgehog in the winter snow, sometimes we can all benefit from interacting with a human.

  7. Styling Components - Typed CSS With Stylable

    Bruce Lawson

    Bruce Lawson extracts the silver sixpence of CSS from the JavaScript figgy pudding with an open source tool designed to make building styled components a matter of process and not just convention. CSS at scale is challenging, and without good tooling you’ll soon be dousing it with cognac and setting the world alight.

  8. Automating Your Accessibility Tests

    Seren Davies

    Seren Davies reminds us that unlike Christmas, accessibility testing should not come but once a year with a look at how to apply automated testing. By configuring tests to run against each commit, you can ensure that your site’s accessibility compliance need not be left to chance.

  9. Levelling Up for Junior Developers

    Dean Hume

    Dean Hume places another log on the fire, sets the poker back on its stand, pulls up and chair and gathers the junior developers around the hearth to impart some wisdom. Whether you’re just starting out or have been in the game some time, we can all benefit from a little levelling up.

  10. Lint the Web Forward With Sonarwhal

    Stephanie Drescher

    Stephanie Drescher is making a list and checking it twice to introduce an open source web linting tool that will help identify parts of your site that are naughty or nice. So roll up your sleeves and brush up on your best practices – there’s websites to fix.

  11. Cascading Web Design with Feature Queries

    Chen Hui Jing

    Chen Hui Jing pulls off the dust covers, swings open the storm shutters and lets the winter light fall on the subject of CSS feature queries. The chestnuts may not yet be roasting, and the halls may be still be undecked, but pull up a chair and settle down. It’s Christmas.

  12. CSS Writing Modes

    Jen Simmons

    Jen Simmons points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience. Like the wise men following the Star of Bethlehem, sometimes the best direction is given to us, not chosen.

  13. Fairytale of new Promise

    Mat Marquis

    Mat Marquis puts on some festive tunes before recounting the tale of asynchronous JavaScript. Promises offer a robust way of structuring your code to avoid event-driven disasters of visitor-vexing jankiness. Don’t be stuck in queues this Christmas. You might miss the main event.

  14. New Tricks for an Old Dog

    Tom Ashworth

    Tom Ashworth pops a few mince pies in the oven to warm through as he shares with us experiences learned when on-boarding new front-enders into his team. From frameworks to refactoring, code reviews to componentisation, it’s got everything bar the brandy butter.

  15. Animation in Design Systems

    Sarah Drasner

    Sarah Drasner drops down on the sofa, turns on the TV and puts on some Christmas classics. Yes, it’s time to talk animation, and not just any animation, but how you prescribe and document animation in your design systems. Perhaps you’ll be moved to make some changes.

  16. First Steps in VR

    Shane Hudson

    Shane Hudson dusts the snow from his jacket and helps us take our first tentative steps into the gloomy world of virtual reality. So mark his footsteps good my page, tread thou in them boldly. Thou shalt find the virtual world spin thy head less coldly.

  17. Watch Your Language!

    Annie-Claude Côté

    Annie-Claude Côté gathers us round the hearth to tell a tale of many languages. Like choosing the right Christmas sweater to wear while building a snowman, we must choose the language we code in wisely. Make a poor choice and risk getting left out in the cold as the darkness draws in.

  18. How Tabs Should Work

    Remy Sharp

    Remy Sharp picks that old chestnut – tabs – and roasts it afresh on the open fire of JavaScript to see how a fully navigable, accessible and clickable set of tabs can work. Everybody knows some scripting and some CSS can help to make your website bright. Although it’s been said many times, many ways, please be careful to do it right.

  19. The Accessibility Mindset

    Eric Eggert

    Eric Eggert celebrates the simplicity of making websites accessible and, when accessibility is as fundamental to a project as performance and code quality, how it can improve the experience for all users. The web, like a gleeful cheer of “Merry Christmas” at yuletide, is for everyone.

  20. Upping Your Web Security Game

    Guy Podjarny

    Guy Podjarny sounds a sober warning during our festivities, and gathers some winter fuel to help secure your apps and users from the web’s occasionally cruel frost. So mark his footsteps good, my friend, and tread thou in them boldly. Thou shalt find the hacker’s rage freeze thy site less coldly.

  21. Universal React

    Jack Franklin

    Jack Franklin darns the holes left in our applications by exploring how our client-side JavaScript frameworks might also be run on the server to provide universal support for all types of user. How will you react when you see mommy kissing Server Claus?

  22. Naming Things

    Paul Lloyd

    Paul Lloyd perches his partridge in the CSS pear tree to discuss naming methodologies, ontologies and semantics. What’s in a name? That which we call a cherub by any other name would smell as sweet.

  23. Responsive Enhancement

    Jeremy Keith

    Jeremy Keith leads us gently back to the basics of progressive enhancement with a simple navigation example. Ask yourself: does Christmas need to look exactly the same in every browser? Nope. Well, as long as you’re reading 24 ways…

  24. Make Your Browser Dance

    Ruth John

    Ruth John ushers the Christmas party disco online using the Web Audio API to festoon your browser with some twinkling scripted lights that pulse along with your favourite festive tunes. So don’t be a wallflower — Santa’s up all night to get lucky…

  25. URL Rewriting for the Fearful

    Drew McLellan

    Drew McLellan opens 24 ways’ ninth annual advent calendar with a primer on the sometimes arcane lore of rewriting URLs. But while Drew may ably match URL patterns using regular expressions, that shirt with the snowflake pattern clashes hideously with his holly and ivy tie…

  26. HTML5 Video Bumpers

    Drew McLellan

    Drew McLellan invites you to pull up to the 2012 24 ways bumper, baby, with an neat JavaScript solution to an HTML5 <video> branding problem. And that was “24 ways bumper” not “Christmas jumper”. He has enough of those already.

  27. CSS3 Patterns, Explained

    Lea Verou

    Lea Verou unlocks the mysteries of CSS background gradients and investigates how they can be used more creatively to replace images. You’ll soon rather be throwing shapes at work than the Christmas party dance floor.

  28. Calculating Color Contrast

    Brian Suda

    Brian Suda ponders some techniques for maintaining correct color contrast whilst still offering your users the ability to customise their own color scheme. So put your slippers on, kick back with a sherry and let the algorithms do the work.

  29. Spruce It Up

    Jonathan Snook

    Jonathan Snook picks up our theme of font embedding with some ideas on how to reduce font download sizes and load time to lessen the impact of the Flash Of Unstyled Text. The less flashing the better, if you ask me.

  30. Incite A Riot

    Jeremy Keith

    Jeremy Keith issues a call to arms over how passages of dialogue are marked up in HTML, and more specifically, in HTML5. Stand firm, good designers and developers of the web, and don’t let poorly worded specs lead the people astray!

  31. Absolute Columns

    Dan Rubin

    Dan Rubin pops down the chimney to deliver a neat little CSS gift that, in certain circumstances, could be just the trick needed to obtain those matched height columns so often desired. Whilst no technique is perfect for every situation, the more sharp tools we have in our CSS toolbox the better.

  32. Geotag Everywhere with Fire Eagle

    Ben Ward

    Ben Ward walks us through the process of building a small client-side application using the Fire Eagle API. Yahoo’s Fire Eagle is a service for disseminating details of your location physical location to other services on the web. Ben shows us how such a thing can be made useful.

  33. Moo'y Christmas

    Brian Suda

    Brian Suda mooves us up a gear with a look at using the Moo API for print-on-demand services. No web application is an island, so well written APIs can be a great way to hook into specialist services with the very minimum of effort. With a few simple steps, print can be one of those services.

  34. Shiny Happy Buttons

    John Allsopp

    John Allsopp has a shining example of what can be done to customise the look of HTML buttons without resorting to images. Custom button styles are a frequent request, but the use of images can heavily restrict the implementation. Avoid those pitfalls by sticking to pure CSS.

  35. The First Tool You Reach For

    Kevin Yank

    Kevin Yank gets down and dirty with CSS tables, a technique that offers all the layout properties we loved from long forsaken HTML tables with the clear advantages of modern CSS based design. Remember, just because it looks like a table and flows like a table, doesn’t mean it has to be bad.

  36. The IE6 Equation

    Jeremy Keith

    Jeremy Keith does the maths and presents an interesting equation to help you to decide when to put the effort into providing support for Internet Explorer 6, and when to fall back on pre-existing shortcuts. Browser support is always a tricky business, so why not roll in some complex algebra too?

  37. Christmas Is In The AIR

    Jonathan Snook

    Jonathan Snook introduces us to the world of Adobe AIR and talks us through using standard web technologies such as HTML, CSS and JavaScript to build a run-anywhere desktop application. I used to think I could run anywhere, but after sprinting through the town centre naked, the antisocial behaviour order has rather put a stop to all that.

  38. Conditional Love

    Ethan Marcotte

    Ethan Marcotte explores methods of delivering browser-tailored CSS to uncooperative user agents if the need arises. Like the brightly coloured, ill-fitting sweater granny gave you last Christmas, there’s some styles that are only appropriate in certain company. Choose wisely, my friend.

  39. Capturing Caps Lock

    Stuart Langridge

    Stuart Langridge ponders that if a desktop application can warn us when Caps Lock is on, why not on the web too? Avoid unsightly login errors with this handy JavaScript technique, offering the opportunity to warn users that they have Caps Lock on when entering their password. You don’t have to tell me twice.

  40. Get To Grips with Slippy Maps

    Andrew Turner

    Andrew Turner helps us take our first steps into neogeography by creating interactive, draggable maps using the Mapstraction library. So if you’re aiming to mash-up more than swede and carrots over the holidays, or simply need to plan an effective pub-crawl there should be something here to get your chestnuts roasting.

  41. Boost Your Hyperlink Power

    Jeremy Keith

    Jeremy Keith appraises the humble hyperlink and highlights some of the more interesting, and perhaps lesser-known attributes that can be used to enrich the semantic value of your links. Consider it something to mull over whilst you polish off that gingerbread.

  42. Hide And Seek in The Head

    Peter-Paul Koch

    Peter-Paul Koch continues our focus on JavaScript and Accessibility by demonstrating how fall-back HTML elements can be convincingly hidden when their functionality is to be replaced by Ajax. A viable alternative to what could be considered to be flashing your underwear at your users. No one wants that.

  43. Rounded Corner Boxes the CSS3 Way

    Andy Budd

    Andy Budd explores the thorny issue of adding rounded corners to boxes, this time looking at what solutions lie waiting for us with CSS3. Consider it a little like feeling the presents under a Christmas tree … you know what’s there, you just can’t quite have it yet.

  44. Introducing UDASSS!

    Dustin Diaz

    Dustin Diaz introduces a technique for server-side style sheet switching without reloading the page. Using Ajax, the Unobtrusive Degradable Ajax Style Sheet Switcher combines the convenience of client-side switching with the robustness of processing at the server.

  45. Splintered Striper

    Patrick Lauke

    Patrick H. Lauke concocts a rather handy little JavaScript function to help you stripe your tables, lists, bathroom, you name it. And there you were thinking the only stripy thing you were getting for Christmas was a sweater. How little do you know.

  46. Centered Tabs with CSS

    Ethan Marcotte

    Ethan Marcotte delves headlong into the sticky issue of centered, list-based tab navigation with remarkable verve and compelling results. Snuggle up by the fire with a hot toddy and a moist companion, for today’s tip is freshly ironed for sir’s pleasure.

  47. Don't be eval()

    Simon Willison

    Simon Willison gets down and dirty with JavaScript and explains why caution should be exercised in use of the eval() function. It may be the season of good will and all, but we can’t have our caution getting all flabby now, can we?