Web Development Bookmarks

Here I keep a public list of some of the most useful links, tweets and tips for web development.

Jump to a category:




I just published windups, a typewriter effect library for React!

It works with just about *anything* you can stuff in React’s children prop, has APIs for controlling pacing, firing off your own effects, and ahead-of-time line-breaking (lol)

17:2025 May 2020




Josh W. Comeau


🌠 Oooh this is cool — A set of customizable pure-CSS background patterns.

Wild to me that background gradients are so powerful 😮


Thanks for creating and sharing, @d__raptis!
A screen recording of the linked tool, showing a grid of different patterns (stripes, circles, cubes...). A set of controls let the user change the color, opacity, and spacing.


hi i made a plugin for @figmadesign that lets you create oblique projections 😊

it's an effect i use all the time and there's no quick way to do it, so i wrote a plugin to do it for me.
maybe you'll find it useful too!

🔗  http://figma.com/c/plugin/876352455198080607/oblique 



Are You Using SVG Favicons Yet ? - by Antoine Boulanger

Hos Shams


I made a #favicon builder during the weekend to design letter-based favicons (SVG & PNG). Just launched it on @ProductHunt.  https://www.producthunt.com/posts/free-favicon-maker 

SEO & OpenGraph#

Mike Nikles



If you develop websites, I suggest you bookmark that page. It shows previews of your URLs based on different social media platforms.


Working With Date, Time & Numbers#

Simon Nickel


TIL that DateFormatter has a property to show relative values like ‘Today’ 🤯

I almost started to implement it by myself ... again 🙈


Matt Stauffer


Today I learned you can add attributes to links in Markdown using curly braces 😳

(Keith tells me it should be supported in any parser that supports "Markdown Extended")  https://twitter.com/keithdamiani/status/1276137360229613568 
Keith Damiani


25 June 2020
@allotmentandy1 @stauffermatt @TightenCo I believe [link](url){target=_blank} should do it!
Joe Bell


Building a "Card"?

Don't use a button/anchor to wrap content; a semantic and accessibility nightmare.

"Break out" the interaction instead, as explained by @SaraSoueidan¹ and @hankchizljaw²:
1.  http://sarasoueidan.com/blog/nested-links/ 
2.  http://hankchizljaw.com/wrote/create-a-semantic-breakout-button-to-make-an-entire-element-clickable/ 

Seen on  http://bbc.com/news :
The whole 'div' is clickable but the link is nested inside and offset by a pseudo element
Tierney Cyren 🍑


a reminder of the single best enhancement to GitHub PR reviews:

you can suggest a change by having a fenced code block and including `suggestion` after the three backticks in a diff, like this:

<your suggested change goes here>
screenshot of this suggestion: https://github.com/nodejs/examples/pull/32/files#r523142312