🔖Lo-Fi PlayerTo me, this is part of what the web is all about. A fun little interactable room that plays lo-fi music!published 04 June 2021https://magenta.github.io/lofi-player/bookmark
🔖Why I Love CodingI think I need to read *The Mythical Man-Month*!published 10 May 2021https://henrikwarne.com/2012/06/02/why-i-love-coding/bookmark
🔖Hexagonal GridsThis incredible post covers just about everything you'd want to know about implementing a hexagonal grid. Chock-full of useful info!published 08 December 2020https://www.redblobgames.com/grids/hexagons/bookmark
🔖SVG Favicons and Dark ModeMy good friend, Dave, has written this excellent overview of SVG favicons and using prefers-color-scheme to toggle a dark-mode version.published 22 November 2020https://letorey.co.uk/blog/svg-favicons-and-dark-modebookmark
🔖Video ConversionThis is definitely something that I may or may not do often… fantastic little guide to doing it right!published 14 October 2020https://chriscoyier.net/2020/10/14/video-conversion/bookmark
🔖The True Story of Lee Kuan Yew's Singapore“Early Singapore’s authoritarian competency is a model invoked by leaders from China to Rwanda. But its rise was complex, messy, and the result of long factional battles. There are hard limits to how far it can be exported.”published 07 September 2020https://palladiummag.com/2020/08/13/the-true-story-of-lee-kuan-yews-singapore/bookmark
🔖Autonomy Online: A Case For The IndieWebAna Rodrigues perfectly lays out what the IndieWeb is all about, along with the why’s and how’s of getting involved!published 27 August 2020https://www.smashingmagazine.com/2020/08/autonomy-online-indieweb/bookmark
🔖IA BasicsMy great friend, Tom, has written a super-comprehensive article about IA: a topic I’m lacking in serious experience with!published 11 August 2020https://www.thomas-evans-ux.com/iabasicsbookmark
🔖Uncommon CSS PropertiesSome useful gems in here I had no idea about!published 07 July 2020https://ishadeed.com/article/uncommon-css/bookmark
🔖The samsui women of SingaporeAn interesting read about the history of my girlfriend's paternal grandmother, detailing the lives of women who immigrated to Singapore.published 23 May 2020https://lionraw.com/2015/08/18/the-samsui-women-of-singapore/bookmark
🔖Every Noise at OnceA serious rabbit-hole deep-dive into musical genres that's uniquely presented.published 21 May 2020http://everynoise.com/bookmark
🔖The World-Wide WorkThis resonates with me time and time again. Such a powerful talk.published 22 April 2020https://vimeo.com/339383874bookmark
🔖Element.focus vs aria-activedescendantWhen you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage focuspublished 08 April 2020https://zellwk.com/blog/element-focus-vs-aria-activedescendant/bookmark
🔖Why outbreaks like coronavirus spread exponentiallyIncredible visualisations and information from Washington Post.published 17 March 2020https://www.washingtonpost.com/graphics/2020/world/corona-simulator/bookmark
🔖FraidycatThis is so freaking cool. “Fraidycat is a desktop app or browser extension for Firefox or Chrome [you can] use to follow people (hundreds) on whatever platform they choose”. Warm, fuzzy, IndieWeb vibes from this one!published 12 March 2020https://fraidyc.at/bookmark
🔖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.”published 11 March 2020https://piccalil.li/tutorial/build-a-light-and-global-state-system/bookmark
🔖Getting the easy stuff right ･ Robin RendleIt me.published 11 March 2020https://www.robinrendle.com/notes/getting-the-easy-stuff-right.htmlbookmark
🔖HTML: The Inaccessible PartsDave Rupert gives an extremely thorough run-through of numerous gotchas to do with writing HTML you might think is accessible, but isn't quite what it seems.published 28 February 2020https://daverupert.com/2020/02/html-the-inaccessible-parts/bookmark
🔖Desktop Goose“A downloadable goose-sperience for Windows and macOS”published 24 February 2020https://samperson.itch.io/desktop-goosebookmark
🔖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 Kadlec runs through performance linting using feature policies.published 21 February 2020https://timkadlec.com/remembers/2020-02-20-in-browser-performance-linting-with-feature-policies/bookmark
🔖A Complete Guide to Links and ButtonsCSS-Tricks' complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.published 19 February 2020https://css-tricks.com/a-complete-guide-to-links-and-buttons/bookmark
🔖Some Imaginary CSS“The other day I was using CSS grid and custom properties to solve some problems that would have seemed almost impossible only a year or two ago. This made me wonder: What CSS could I be writing in a few…published 19 February 2020https://cloudfour.com/thinks/some-imaginary-css/bookmark
🔖Neumorphism/Soft UI CSS shadow generatorGenerate clever and gorgeous CSS shadows with this simple tool.published 13 February 2020https://neumorphism.io/bookmark
🔖Fluid custom propertiesTrys, once again, taking things to the next level with CSS locks, CSS properties, media queries, and the cascade to create incredibly dynamic and fluid layouts.published 07 February 2020https://utopia.fyi/blog/fluid-custom-properties/bookmark
🔖GT Alpina by Grilli TypeAmazing demo for this variable font.published 29 January 2020https://gt-alpina.com/bookmark
🔖Canadian Stock PhotographyREALLY Canadian. I have a slightly embarrassing feeling I'll be using these.published 23 January 2020https://cira.ca/stock-images/gallerybookmark
🔖The CSS CascadeNot only is this beautiful and a joy to read, it's chock-full of of useful info about how CSS' cascading.published 22 January 2020https://wattenberger.com/blog/css-cascadebookmark
🔖The Accessibility of Styled Form ControlsA repository of styled and styled form control elements and markup patterns, and how they are announced by screen readers.published 10 January 2020https://scottaohara.github.io/a11y_styled_form_controls/bookmark
🔖Simplified Fluid Typography | CSS-TricksWith min(), max(), and clamp() we can greatly simplify how we define fluid property values in CSS—can't wait for for wider browser support!published 06 January 2020https://css-tricks.com/simplified-fluid-typography/bookmark
🔖Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables | Rob Weychert“A rational system for generating thousands of possible color schemes.”published 16 December 2019https://v6.robweychert.com/blog/2019/12/dynamic-color-javascript-hsl/bookmark
🔖Leonardo“Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.”published 16 December 2019https://leonardocolor.io/bookmark
🔖Accessible Color Spaces - Color Contrast ToolThis is such an amazing tool for visualising colour and contrast that'll help you confidently meet your accessibility requirements. It can even provide closest accessible colours, so it really takes away a huge amount of the manual work and difficulty…published 13 December 2019https://kevingutowski.github.io/color.htmlbookmark
🔖JournalBookFrom the venerable Trys Mudford comes JournalBook, a private, offline-first personal journal.published 06 December 2019https://journalbook.co.uk/bookmark
🔖Binary Music PlayerAnother bit of clever fun from Tim Holman—this time building some fun musical melodies by counting in binary, and you can customise the notes too!published 04 December 2019http://tholman.com/binary-music-player/bookmark
🔖Masking GIFs with other GIFsA super-fun technique for using SVG to mask one GIF on top of another.published 03 December 2019https://css-tricks.com/masking-gifs-with-other-gifs/bookmark
🔖Ordered Error Diffusion DitheringI admit that I don’t understand a lot of the math going on here, but I’m very interested in the output.published 02 December 2019https://observablehq.com/@jobleonard/ordered-error-diffusion-ditheringbookmark
🔖giffgaff designThis is a set of standards that define the universal design language and content composition at giffgaff.published 21 November 2019https://www.giffgaff.design/bookmark
🔖The Web AlmanacHTTP Archive's annual state of the web report. This is *super-comprehensive* and is jam-packed with useful information.published 13 November 2019https://almanac.httparchive.org/en/2019/bookmark
🔖Codevember“Codevember is a challenge for developers to sharpen their creativity and improve their skills. The goal is to build a creative piece of code every day of November.”published 29 October 2019http://codevember.xyz/bookmark
🔖Advanced Lesson of the Firefox Font EditorIn this YouTube video, Jen Simmons gives a thorough run-through of Firefox's Font Editor in its Dev Tools.published 09 October 2019https://www.youtube.com/watch?v=RYP7jKMWkVYbookmark
🔖Keep a ChangelogEverything you need to know about changelogs, and presented beautifully as well.published 03 October 2019https://keepachangelog.com/en/1.0.0/bookmark
🔖Compound Grid GeneratorA little tool to generate compound grids by Michelle Barker. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid.published 25 September 2019https://codepen.io/michellebarker/full/zYOMYWvbookmark
🔖3D Ken Burns Effect from a Single ImageSimon Niklaus, Long Mai, Jimei Yang and Feng Liu have made an incredible framework for automatically synthesising a parallax/Ken Burns effect from a single source image. Check out the video!published 18 September 2019http://sniklaus.com/papers/kenburnsbookmark
🔖ASCIICKERIt boggles the mind how much effort went into building this, and how clean it is!published 18 September 2019http://asciicker.com/x13/bookmark
🔖An ode to OpenTypeFall in love with the secret world of fontspublished 10 September 2019https://www.figma.com/blog/opentype-font-features/bookmark
🔖Leon SansThis has to be the coolest typeface demo I've ever seen, hands down.published 02 September 2019https://leon-kim.com/bookmark
🔖vi is a languageUntil reading this, I’ve been stumbling around feeling frustrated that I can't seem to find any efficiency in my use of the language. This is exactly what I needed to read to get into and grok vi.published 20 August 2019https://stackoverflow.com/a/1220118/5019700bookmark
🔖Use snippets in VS CodeArek’s got Part 2 of his Tips & Tricks for VS Code where he shows you how to save time and keystrokes by using snippets!published 20 August 2019https://dev.to/iamarek/use-snippets-in-vs-code-to-boost-your-productivity-and-simplify-your-work-1nimbookmark
🔖Using the aria-current attributeEver used an active or current class to denote/style a navigation element? Léonie demonstrates how to use the aria-current attribute to do the same coupled with the boon to accessibility it brings.published 15 August 2019https://tink.uk/using-the-aria-current-attribute/bookmark
🔖Create a user controlled dark or light modeAndy Bell breaks down implementing robust theme-switching functionality on your own site.published 14 August 2019https://hankchizljaw.com/wrote/create-a-user-controlled-dark-or-light-mode/bookmark
🔖Styling title bars in VS CodeI find this useful when switching between multiple windows. Written by my good friend, Arek.published 13 August 2019https://dev.to/iamarek/working-on-multiple-windows-in-vs-code-style-title-bars-to-increase-your-productivity-2oiibookmark
🔖Foreign RapForeignrap is a platform to discover + enjoy international rap music. Run by enthusiasts, we share sounds from across the world for you to enjoy 🙏published 29 July 2019https://foreignrap.com/bookmark
🔖SVG Calendar showing todays date in Squiz MatrixMy good friend, Dave, has remixed Terence Eden's SVG with JavaScript calendar icon to be powered by keywords in Matrix (a CMS developed by Squiz).published 23 July 2019https://letorey.co.uk/blog/svg-calendar-showing-todays-datebookmark
🔖Making an interactive hoverboard game using JavaScript and web socketsThe internet is full of amazing people building amazing things, including this! I'm so inspired by projects like this.published 10 July 2019https://dev.to/devdevcharlie/making-an-interactive-hoverboard-game-using-javascript-and-web-sockets-379jbookmark
🔖CSS and Network PerformanceInvaluable tips on CSS and Network Performance from Harry Robertspublished 01 July 2019https://csswizardry.com/2018/11/css-and-network-performance/bookmark
🔖Every LayoutEvery Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.published 21 June 2019https://every-layout.dev/bookmark
🔖Drawing Realistic Clouds with SVG and CSSEqually as interesting as the technique on display is Beau Jackson’s explanation of this incredible, photo-realistic combination of SVG and CSS to draw clouds!published 13 June 2019https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/bookmark
🔖Appscope - Progressive Web Apps Examples“Appscope is a directory of Progressive Web Apps, showcasing the best PWA examples. All apps listed run entirely in the web browser and launch instantly without an app download. If you wish, they can be saved to your home screen…published 02 June 2019https://appsco.pebookmark
🔖FornacaliaIf, like me, you’re getting into baking your own bread, there may be no better teacher than Jeremy Cherfas, who’s been baking bread for over 50 years. His website is chock-full of useful information, recipes, and anecdotes to keep your…published 02 May 2019https://www.fornacalia.com/bookmark
🔖Web Design Experiments by Jen SimmonsJen Simmons’ demos and experiments were instrumental in my learning CSS Grid, and even if you already know your way around the spec blindfolded, I guarantee you’ll find something new and interesting here!published 30 April 2019https://labs.jensimmons.com/bookmark
🔖The Farce of Record Store DayMy very good friend, Dave, outlines what Record Store Day is, why movements like these are important, and why this particular once has fallen short. Wise words from seriously big fan of music.published 26 April 2019https://letorey.co.uk/blog/the-farce-of-record-store-daybookmark
🔖The Celebrated New Miscellany of Mr. Simon CollisonThe design Simon presented here in 2010 was and still is as beautiful as it was illuminating, right at the cusp of responsive design on the web.published 09 April 2019https://colly.com/v4/index.htmlbookmark
🔖How Not To Sort By Average Rating – Evan MillerPROBLEM: You are a web programmer. You have users. Your users rate stuff on your site. You want to put the highest-rated stuff at the top and lowest-rated at the bottom. You need some sort of score to sort by.published 03 April 2019 · 1 response to How Not To Sort By Average Rating – Evan Millerhttps://www.evanmiller.org/how-not-to-sort-by-average-rating.htmlbookmark
🔖All you need to know about hyphenation in CSSI tend to write quite verbosely and as a result end up with big, unruly blocks of text in my articles. Thanks to Richard, I've learned a bit more about how hyphens and how they can help!published 29 March 2019http://clagnut.com/blog/2395bookmark
🔖An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array MethodsI've struggled for a little while to wrap my head around these new methods, but this article by Una Kravets couldn't have made them any easier or fun to understand!published 26 March 2019https://css-tricks.com/an-illustrated-and-musical-guide-to-map-reduce-and-filter-array-methods/bookmark
🔖Sophisticated Partitioning with CSS GridEqually as impressive as Rob Weychert's 'Tinnitus Tracker' is the CSS Grid that powers it. This article and accompanying code is so thorough and cleanly-thought through. What a joy to read and see in action.published 26 March 2019https://v6.robweychert.com/blog/2019/03/css-grid-sophisticated-partitioning/bookmark
🔖1% Better • Robin RendleThis really resonates with me—too often I've planned or been part of planning a big project that fizzles out and burns people out after months. Most of my productivity and positive output has been the outcome of quick, iterative improvements.published 22 March 2019https://robinrendle.com/notes/1percent-betterbookmark
🔖Celebrating Johann Sebastian BachCompose a two-measure melody and machine learning will harmonise with your tune! This is basically magic to me.published 21 March 2019https://www.google.com/doodles/celebrating-johann-sebastian-bachbookmark
🔖QuillQuill is a simple Micropub client for creating posts on your own website. To use it, your website will need to have a Micropub endpoint, and this app will send requests to it to create posts.published 17 March 2019https://quill.p3k.iobookmark
🔖An Interactive Introduction to Fourier TransformsThis is one of the most clever and interesting interactive demos I've ever seen. Worth setting aside time to go through the whole thing!published 05 March 2019http://www.jezzamon.com/fourier/index.htmlbookmark
🔖How to Create a Fake 3D Image Effect with WebGL“Learn how to create an interactive "fake" 3D effect for images with depth maps and plain WebGL.”published 28 February 2019https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/bookmark
🔖Color Spaces – Bartosz Ciechanowski“For the longest time we didn’t have to pay a lot of attention to the way we talk about color. The modern display technologies capable of showing more vivid shades have, for better or for worse, changed the rules of…published 28 February 2019https://ciechanow.ski/color-spaces/bookmark
🔖A talk by Dave Letorey … and you thought you had no issuesMy very good friend, Dave, gave an incredible talk on accessibility at the recent Monki Gras conference in London. Worth every second of watching!published 21 February 2019https://www.youtube.com/watch?v=2LuDR5HjqWsbookmark
🔖NES.cssNES.css is a NES-style CSS Framework.published 18 January 2019https://nostalgic-css.github.io/NES.css/bookmark
🔖Uncanny Valley StudioNot your typical portfolio website. Absolutely mind-blowing.published 15 January 2019https://uncannyvalley.studio/bookmark
🔖The Flexbox Holy Albatross ReincarnatedRevamped and updated version of the original.published 14 January 2019http://www.heydonworks.com/article/the-flexbox-holy-albatross-reincarnatedbookmark
🔖The Flexbox Holy AlbatrossWho even needs media queries anymore? Not Heydon Pickering, that's who.published 13 January 2019http://www.heydonworks.com/article/the-flexbox-holy-albatrossbookmark
🔖MonocleI've really enjoyed using this as my Microsub reader for the last few weeks. Combined with X-Ray, it's been pretty trivial to debug my feeds!published 13 January 2019https://monocle.p3k.io/bookmark
🔖CSS doesn’t suckFront-end communities have been up-in-arms recently about CSS's shortcomings (and how they compare to JS's shortcomings, for example). I think CSS has been undeservedly been painted in a poor light, but Andy Bell's article had me nodding enthusiastically throughout.published 11 January 2019https://hankchizljaw.com/wrote/css-doesnt-suck/bookmark
🔖Web A SkebChildhood Picassos, your time has come again.published 09 January 2019https://web-a-skeb.firebaseapp.com/bookmark
🔖Chrono Trigger: Secret of the Forest - Reuben GingrichI'm clearly cruising on a Chrono Trigger vibe because, again, I need to share some music by some unquestionably-talented musicians, @reubengingrich http://reubengingrich.com/) But how can you not love Secret of the Forest?published 03 January 2019 · 2 responses to Chrono Trigger: Secret of the Forest - Reuben Gingrichhttps://www.youtube.com/watch?v=alW3hvc3ViYbookmark
🔖Chrono Trigger: Secret of the Forest - Contraband VGMThis is seriously amazing. It deserves way more recognition than it has; @ContraReloaded mesh together some incredible talent and synergy.published 13 December 2018 · 7 responses to Chrono Trigger: Secret of the Forest - Contraband VGMhttps://www.youtube.com/watch?v=pYgQEjcosP0bookmark
🔖Lynn Fisher’s PortfolioI wish I could create animations this beautiful. Lynn Fisher demonstrates her god-like abilities with yet another gorgeous portfolio redesign. Check out the archive of her previous designs, too. They're remarkable.published 05 December 2018https://lynnandtonic.com/bookmark
🔖Piano GeniePiano Genie, an intelligent controller that maps 8-button input to a full 88-key piano in real time, is in some ways reminiscent of video games such as Rock Band and Guitar Hero that are accessible to novice musicians, with the…published 17 October 2018https://magenta.tensorflow.org/pianogeniebookmark
🔖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. Take the quiz and find out.published 15 October 2018http://amiarealdeveloper.com/bookmark
🔖Generative ArtistryThese are the coolest instructional demos I've ever seen. It's just such a pleasure to watch how Tim Holman steps through each artistic challenge in a beautiful way.published 09 October 2018https://generativeartistry.com/bookmark
🔖Mariano Pascual’s Interactive PortfolioI always wanted to create a website UI like this; only, Mariano's done it 10× better than I ever dreamed of. Such a delightful experience.published 09 August 2018http://marianopascual.mebookmark
🔖Devhints — TL;DR for developer documentationA ridiculous collection of web development cheatsheetspublished 01 August 2018https://devhints.iobookmark
🔖So You Think You’ve Built a Good Infinite ScrollAdrian hits the nail on the head with this checklist for implementing infinite scroll.published 13 July 2018http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.htmlbookmark
🔖Atom Multiline SelectAn Atom Editor package to support multiline selection which I forked and modified to mimic Sublime Text's multiline selection technique.published 22 July 2016https://atom.io/packages/multiline-selectbookmark
🔖ThereminPlay your own musical synth with delay, feedback, and scuzz.published 06 May 2016http://femurdesign.com/thereminbookmark
🔖IE9 :before font-size bugSeems there's a bug in Internet Explorer 9 wherein pseudo content (:before and :after content) doesn't get parsed properly in the DOM, so instead of declarations like font-size being applied only once despite multiple occurrences of the rule, but is…published 05 May 2016https://codepen.io/chrisburnell/pen/vtHwGbookmark
🔖HTML Rube GoldbergA mesmerising Rube Goldberg machine made with HTML form elements and their form element-specific attributes and states, like checked, :focus, and value.published 29 April 2016http://sebastianlyserena.dkbookmark
🔖Responsive Pixel ArtThis is an incredible display of creativity and logic on the web. The effort that has gone into this is unbelievable.published 09 March 2016http://essenmitsosse.de/pixelbookmark
🔖Editing your last embarrassmentIn other words Quick editing your last sent textspublished 27 February 2016https://suganth.cc/editing-your-last-embarrassment-af377f7c123dbookmark
🔖Regex GolfTest your regex skills. So much fun. Brainmelting, but fun.published 23 January 2016http://regex.alf.nubookmark
🔖Styling SVG use Content with CSSLittle late on this one, but gold dust nonetheless. SVG Wizard, Sara Soueidan, discusses in-depth how to style SVG's element and how to overcome the challenges in doing so.published 21 January 2016http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-cssbookmark
🔖ServiceWorker CookbookThe Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web apps.published 08 January 2016https://serviceworke.rsbookmark
🔖Polyfill ServiceThe polyfill service selectively bundles browser polyfills based on the User-Agent header supplied in a request, with the intention of allowing JavaScript and CSS developers to use modern standards in legacy user agents that do not natively support the standard.…published 05 January 2016https://cdn.polyfill.io/v2/docsbookmark