Bookmarks

2020

1. Uncommon CSS Properties

   🔖 Some useful gems in here I had no idea about!

   07 July 2020

2. The samsui women of Singapore

   🔖 An interesting read about the history of my girlfriend’s paternal grandmother, detailing the lives of women who immigrated to Singapore...

   23 May 2020

3. Every Noise at Once

   🔖 A serious rabbit-hole deep-dive into musical genres that’s uniquely presented.

   21 May 2020

4. The World-Wide Work

   🔖 This resonates with me time and time again. Such a powerful talk.

   22 April 2020

5. Element.focus vs aria-activedescendant

   🔖 When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs...

   08 April 2020

6. Why outbreaks like coronavirus spread exponentially

   🔖 Incredible visualisations and information from Washington Post.

   17 March 2020

7. Fraidycat

   🔖 This is so freaking cool. “Fraidycat is a desktop app or browser extension for Firefox or Chrome [you can] use...

   12 March 2020

8. Build a light and global state system - Piccalilli

   🔖 “Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.”

   11 March 2020

9. Getting the easy stuff right ･ Robin Rendle

   🔖 It me.

   11 March 2020

10. HTML: The Inaccessible Parts

    🔖 Dave Rupert gives an extremely thorough run-through of numerous gotchas to do with writing HTML you might think is accessible...

    28 February 2020

11. Desktop Goose

    🔖 “A downloadable goose-sperience for Windows and macOS”

    24 February 2020

12. In-Browser Performance Linting With Feature Policies

    🔖 “Feature-Policy is a relatively new feature that lets you opt-in or out of certain browser features on your site.” Tim...

    21 February 2020

13. A Complete Guide to Links and Buttons

    🔖 CSS-Tricks’ complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

    19 February 2020

14. Some Imaginary CSS

    🔖 “The other day I was using CSS grid and custom properties to solve some problems that would have seemed almost...

    19 February 2020

15. Neumorphism/Soft UI CSS shadow generator

    🔖 Generate clever and gorgeous CSS shadows with this simple tool.

    13 February 2020

16. Fluid custom properties | Utopia

    🔖 Trys, once again, taking things to the next level with CSS locks, CSS properties, media queries, and the cascade to...

    07 February 2020

17. GT Alpina by Grilli Type

    🔖 Amazing demo for this variable font.

    29 January 2020

18. Canadian Stock Photography

    🔖 REALLY Canadian. I have a slightly embarrassing feeling I’ll be using these.

    23 January 2020

19. The CSS Cascade

    🔖 Not only is this beautiful and a joy to read, it’s chock-full of of useful info about how CSS’ cascading...

    22 January 2020

20. The Accessibility of Styled Form Controls

    🔖 A repository of styled and styled form control elements and markup patterns, and how they are announced by screen readers...

    10 January 2020

21. Simplified Fluid Typography | CSS-Tricks

    🔖 With min(), max(), and clamp() we can greatly simplify how we define fluid property values in CSS—can’t wait for for...

    06 January 2020

2019

1. Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables | Rob Weychert

   🔖 “A rational system for generating thousands of possible color schemes.”

   16 December 2019

2. Leonardo

   🔖 “Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.”

   16 December 2019

3. Neal.fun

   🔖 Bringing back the weird web!

   13 December 2019

4. Accessible Color Spaces - Color Contrast Tool

   🔖 This is such an amazing tool for visualising colour and contrast that’ll help you confidently meet your accessibility requirements. It...

   13 December 2019

5. JournalBook

   🔖 From the venerable Trys Mudford comes JournalBook, a private, offline-first personal journal.

   06 December 2019

6. Binary Music Player

   🔖 Another bit of clever fun from Tim Holman—this time building some fun musical melodies by counting in binary, and you...

   04 December 2019

7. Masking GIFs with other GIFs

   🔖 A super-fun technique for using SVG to mask one GIF on top of another.

   03 December 2019

8. Ordered Error Diffusion Dithering

   🔖 I admit that I don’t understand a lot of the math going on here, but I’m very interested in the...

   02 December 2019

9. giffgaff design

   🔖 This is a set of standards that define the universal design language and content composition at giffgaff.

   21 November 2019

10. The Web Almanac

    🔖 HTTP Archive’s annual state of the web report. This is *super-comprehensive* and is jam-packed with useful information.

    13 November 2019

11. Codevember

    🔖 Codevember is a challenge for developers to sharpen their creativity and improve their skills. The goal is to build a...

    29 October 2019

12. GitSheet

    🔖 A dead simple git cheatsheet.

    14 October 2019

13. Advanced Lesson of the Firefox Font Editor

    🔖 In this YouTube video, Jen Simmons gives a thorough run-through of Firefox’s Font Editor in its Dev Tools.

    09 October 2019

14. Keep a Changelog

    🔖 Everything you need to know about changelogs, and presented beautifully as well.

    03 October 2019

15. Compound Grid Generator

    🔖 A little tool to generate compound grids by Michelle Barker. Enter the number of columns for each of your grids...

    25 September 2019

16. 3D Ken Burns Effect from a Single Image

    🔖 Simon Niklaus, Long Mai, Jimei Yang and Feng Liu have made an incredible framework for automatically synthesising a parallax/Ken Burns...

    18 September 2019

17. ASCIICKER

    🔖 It boggles the mind how much effort went into building this, and how clean it is!

    18 September 2019

18. An ode to OpenType

    🔖 Fall in love with the secret world of fonts

    10 September 2019

19. Leon Sans

    🔖 This has to be the coolest typeface demo I’ve ever seen, hands down.

    02 September 2019

20. vi is a language

    🔖 Until reading this, I’ve been stumbling around feeling frustrated that I can’t seem to find any efficiency in my use...

    20 August 2019

21. Use snippets in VS Code

    🔖 Arek’s got Part 2 of his Tips & Tricks for VS Code where he shows you how to save time...

    20 August 2019

22. Using the aria-current attribute

    🔖 Ever used an active or current class to denote/style a navigation element? Léonie demonstrates how to use the aria-current attribute...

    15 August 2019

23. Create a user controlled dark or light mode

    🔖 Andy Bell breaks down implementing robust theme-switching functionality on your own site.

    14 August 2019

24. Styling title bars in VS Code

    🔖 I find this useful when switching between multiple windows. Written by my good friend, Arek.

    13 August 2019

25. Foreign Rap

    🔖 Foreignrap is a platform to discover + enjoy international rap music. Run by enthusiasts, we share sounds from across the...

    29 July 2019

26. Poolside FM

    🔖 Get on loser! We’re going POOLSIDE

    26 July 2019

27. SVG Calendar showing todays date in Squiz Matrix

    🔖 My good friend, Dave, has remixed Terence Eden’s SVG with JavaScript calendar icon to be powered by keywords in Matrix...

    23 July 2019

28. Making an interactive hoverboard game using JavaScript and web sockets

    🔖 The internet is full of amazing people building amazing things, including this! I’m so inspired by projects like this.

    10 July 2019

29. CSS and Network Performance

    🔖 Invaluable tips on CSS and Network Performance from Harry Roberts

    01 July 2019

30. Every Layout

    🔖 Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

    21 June 2019

31. Drawing Realistic Clouds with SVG and CSS

    🔖 Equally as interesting as the technique on display is Beau Jackson’s explanation of this incredible, photo-realistic combination of SVG and...

    13 June 2019

32. Appscope - Progressive Web Apps Examples

    🔖 Bookmark

    02 June 2019

33. Fornacalia

    🔖 If, like me, you’re getting into baking your own bread, there may be no better teacher than Jeremy Cherfas, who’s...

    02 May 2019

34. Web Design Experiments by Jen Simmons

    🔖 Jen Simmons’ demos and experiments were instrumental in my learning CSS Grid, and even if you already know your way...

    30 April 2019

35. The Farce of Record Store Day

    🔖 My very good friend, Dave, outlines what Record Store Day is, why movements like these are important, and why this...

    26 April 2019

36. The Celebrated New Miscellany of Mr. Simon Collison

    🔖 Bookmark

    09 April 2019

37. How Not To Sort By Average Rating – Evan Miller

    🔖 PROBLEM: You are a web programmer. You have users. Your users rate stuff on your site. You want to put...

    03 April 2019

38. All you need to know about hyphenation in CSS

    🔖 I tend to write quite verbosely and as a result end up with big, unruly blocks of text in my...

    29 March 2019

39. An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods

    🔖 I’ve struggled for a little while to wrap my head around these new methods, but this article by Una Kravets...

    26 March 2019

40. Sophisticated Partitioning with CSS Grid

    🔖 Equally as impressive as Rob Weychert’s ’Tinnitus Tracker’ is the CSS Grid that powers it. This article and accompanying code...

    26 March 2019

41. 1% Better • Robin Rendle

    🔖 This really resonates with me—too often I’ve planned or been part of planning a big project that fizzles out and...

    22 March 2019

42. Celebrating Johann Sebastian Bach

    🔖 Compose a two-measure melody and machine learning will harmonise with your tune! This is basically magic to me.

    21 March 2019

43. Quill

    🔖 Quill is a simple Micropub client for creating posts on your own website. To use it, your website will need...

    17 March 2019

44. An Interactive Introduction to Fourier Transforms

    🔖 This is one of the most clever and interesting interactive demos I’ve ever seen. Worth setting aside time to go...

    05 March 2019

45. How to Create a Fake 3D Image Effect with WebGL

    🔖 Bookmark

    28 February 2019

46. Color Spaces – Bartosz Ciechanowski

    🔖 Bookmark

    28 February 2019

47. A talk by Dave Letorey … and you thought you had no issues

    🔖 My very good friend, Dave, gave an incredible talk on accessibility at the recent Monki Gras conference in London. Worth...

    21 February 2019

48. NES.css

    🔖 NES.css is a NES-style CSS Framework.

    18 January 2019

49. Uncanny Valley Studio

    🔖 Not your typical portfolio website. Absolutely mind-blowing.

    15 January 2019

50. The Flexbox Holy Albatross Reincarnated

    🔖 Revamped and updated version of the original.

    14 January 2019

51. The Flexbox Holy Albatross

    🔖 Who even needs media queries anymore? Not Heydon Pickering, that’s who.

    13 January 2019

52. Monocle

    🔖 I’ve really enjoyed using this as my Microsub reader for the last few weeks. Combined with X-Ray, it’s been pretty...

    13 January 2019

53. CSS doesn’t suck

    🔖 Front-end communities have been up-in-arms recently about CSS’s shortcomings (and how they compare to JS’s shortcomings, for example). I think...

    11 January 2019

54. Web A Skeb

    🔖 Childhood Picassos, your time has come again.

    09 January 2019

55. Chrono Trigger: Secret of the Forest - Reuben Gingrich

    🔖 I’m clearly cruising on a Chrono Trigger vibe because, again, I need to share some music by some unquestionably-talented musicians...

    03 January 2019

2018

1. Chrono Trigger: Secret of the Forest - Contraband VGM

   🔖 This is seriously amazing. It deserves way more recognition than it has; @ContraReloaded mesh together some incredible talent and synergy...

   13 December 2018

2. Lynn Fisher’s Portfolio

   🔖 I wish I could create animations this beautiful. Lynn Fisher demonstrates her god-like abilities with yet another gorgeous portfolio redesign...

   05 December 2018

3. Piano Genie

   🔖 Piano Genie, an intelligent controller that maps 8-button input to a full 88-key piano in real time, is in some...

   17 October 2018

4. Am I a Real Developer?

   🔖 Ever wonder if you’re a real developer? Maybe you used a tool before or wrote code that wasn’t real code...

   15 October 2018

5. Generative Artistry

   🔖 These are the coolest instructional demos I’ve ever seen. It’s just such a pleasure to watch how Tim Holman steps...

   09 October 2018

6. Mariano Pascual’s Interactive Portfolio

   🔖 I always wanted to create a website UI like this; only, Mariano’s done it 10× better than I ever dreamed...

   09 August 2018

7. Devhints — TL;DR for developer documentation

   🔖 A ridiculous collection of web development cheatsheets

   01 August 2018

8. So You Think You’ve Built a Good Infinite Scroll

   🔖 Adrian hits the nail on the head with this checklist for implementing infinite scroll.

   13 July 2018

2016

1. NYER

   🔖 The classic rap air horn. That’s all.

   14 November 2016

2. Atom Multiline Select

   🔖 An Atom Editor package to support multiline selection which I forked and modified to mimic Sublime Text’s multiline selection technique...

   22 July 2016

3. Theremin

   🔖 Play your own musical synth with delay, feedback, and scuzz.

   06 May 2016

4. IE9 :before font-size bug

   🔖 Seems there’s a bug in Internet Explorer 9 wherein pseudo content (:before and :after content) doesn’t get parsed properly in...

   05 May 2016

5. HTML Rube Goldberg

   🔖 A mesmerising Rube Goldberg machine made with HTML form elements and their form element-specific attributes and states, like checked, :focus...

   29 April 2016

6. Responsive Pixel Art

   🔖 This is an incredible display of creativity and logic on the web. The effort that has gone into this is...

   09 March 2016

7. Editing your last embarrassment

   🔖 In other words Quick editing your last sent texts

   27 February 2016

8. Regex Golf

   🔖 Test your regex skills. So much fun. Brainmelting, but fun.

   23 January 2016

9. Styling SVG use Content with CSS

   🔖 Little late on this one, but gold dust nonetheless. SVG Wizard, Sara Soueidan, discusses in-depth how to style SVG’s element...

   21 January 2016

10. ServiceWorker Cookbook

    🔖 The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web apps.

    08 January 2016

11. Polyfill Service

    🔖 The polyfill service selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of...

    05 January 2016