Skip to content

24 ways to impress your friends

Code

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. Dynamic Social Sharing Images

    Drew McLellan

    Drew McLellan draws this, our fourteenth season to a gentle close by getting a little Inside Snowball and gives an account of how we put the robots to work in generating custom dynamic social media sharing images for each of the articles here on the site. Christmas is a time to share what you have, even if it’s just a grid of pixels.

  2. Designing Your Site Like It’s 1998

    Andy Clarke

    Andy Clarke tells a tale as old as time, a tale of tables, framesets, fixed widths and spacer GIFs (ask your parents). Harking back to the methods that were appropriate to used to build cutting-edge websites twenty years ago, not only can we see how far we’ve come but can be excited for what lies ahead.

  3. Jank-Free Image Loads

    Eric Portis

    Eric Portis remembers that images on the web, just like presents under the tree, come in different shapes and sizes. There’s little more disappointing than unwrapping a large-looking gift to find that it’s mostly packaging. Avoid expectation-jank with some great enhancements coming to the web platform soon.

  4. Clip Paths Know No Bounds

    Dan Wilson

    Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought. It may be the time of year to follow a star, but was the star plotted with five or ten points?

  5. Fast Autocomplete Search for Your Website

    Simon Willison

    Simon Willison searches for the true meaning of Christmas, but settles on making a search engine for our articles on 24 ways. In doing he so demonstrates how a little bit of JavaScript, some open source tools and a sprinkling of database magic can make your festive dreams come true.

  6. It’s Beginning to Look a Lot Like XSSmas

    Anna Debenham

    Anna Debenham picks up the reins to continue our journey of understanding in the dark forest of web security. With so many packages the reindeer are struggling to pull the sleigh against the weight of all those dependancies. The question is, which packages hold wonderful gifts, and which just coal?

  7. Researching a Property in the CSS Specifications

    Rachel Andrew

    Rachel Andrew shows us which direction is up on a gift that looks great but comes with complex instructions. Like most operating manuals CSS specifications can seem overwhelming, but it turns out that some of the most daunting tasks can be simple when you know what you’re doing.

  8. Managing Flow and Rhythm with CSS Custom Properties

    Andy Bell

    Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.

  9. Creating My First Chrome Extension

    Jennifer Wong

    Jennifer Wong takes the good stuff down from the shelf and pours out a generous measure of know-how on the subject of creating extensions for Google Chrome. Pull up a chair and get ready to find out how the HTML, CSS and JavaScript skills you already possess can be put to use to extend your browser of choice.

  10. Mistletoe Offline

    Jeremy Keith

    Jeremy Keith reminds us that 4G is king. The carollers sing. One tunnel has passed, a new one’s beginning. Dreams of wi-fi on the go. Fingers numb, smart phones aglow. It’s Christmas time, mistletoe offline. Children streaming their gameplay online. With batteries on fire and gigabytes for free, it’s time to rejoice in connectivity.

  11. The Art of Mathematics: A Mandala Maker Tutorial

    Hagar Shilo

    Hagar Shilo breaks out the Christmas decorations with a tutorial to show how a little knowledge of JavaScript can lead to impressive results. Forget about the doilies and fake snow on the windows, all we need to create geometric patterns is a web browser and a sprinkling of mathematics.

  12. Securing Your Site like It’s 1999

    Katie Fenn

    Katie Fenn opens the door on our 2018 season by transporting us back to the turn of the century when new lessons were being learned about web security. Those who don’t learn from the past are condemned to repeat it, so fasten up your winter coat and let Katie lead you through some of the darker parts of the forest.

  13. 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.

  14. 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.

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. 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.

  20. 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.

  21. 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.

  22. 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.

  23. 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.

  24. 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.

  25. 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.

  26. 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.

  27. 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.

  28. 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.

  29. 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.

  30. 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.

  31. 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.

  32. 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.

  33. 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?

  34. 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.

  35. 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…

  36. 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…

  37. 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…

  38. 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.

  39. 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.

  40. 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.

  41. 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.

  42. 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!

  43. 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.

  44. 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.

  45. 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.

  46. 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.

  47. 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.

  48. 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?

  49. 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.

  50. 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.

  51. 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.

  52. 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.

  53. 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.

  54. 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.

  55. 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.

  56. 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.

  57. 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.

  58. 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.

  59. 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?