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:
Animations#
g
gwil
@sgwil
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)
https://windups.gwil.co
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)
https://windups.gwil.co
MG
Minko Gechev
@mgechev
Animate.css is a collection of over 70+ CSS animations you can use for your web app! https://github.com/daneden/animate.css …
Design#
JW
Josh W. Comeau
@JoshWComeau
Oooh this is cool — A set of customizable pure-CSS background patterns.Wild to me that background gradients are so powerful
https://www.magicpattern.design/tools/css-backgrounds …
Thanks for creating and sharing, @d__raptis!
t
torcado
@torcado
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 …
#figma
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 …#figma
Favicons#
Are You Using SVG Favicons Yet ? - by Antoine Boulanger
HS
Hos Shams
@hosshams
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#
MN
Mike Nikles
@mikenikles
https://metatags.io/
If you develop websites, I suggest you bookmark that page. It shows previews of your URLs based on different social media platforms.
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#
SN
Simon Nickel
@simonnickel
TIL that DateFormatter has a property to show relative values like ‘Today’ 
I almost started to implement it by myself ... again
I almost started to implement it by myself ... again
SJ
Stefan Judis
@stefanjudis
Little morning devsheet 
– `Intl.NumberFormat`.
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat …
#devsheets
– `Intl.NumberFormat`. MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat …#devsheets
KC
Kent C. Dodds 🌌
@kentcdodds
Will this is a TIL that is totally awesome.
font-variant-numeric: tabular-nums;
~90% browser support
https://blog.usejournal.com/proportional-vs-monospaced-numbers-when-to-use-which-one-in-order-to-avoid-wiggling-labels-e31b1c83e4d0 …
font-variant-numeric: tabular-nums;
~90% browser support
https://blog.usejournal.com/proportional-vs-monospaced-numbers-when-to-use-which-one-in-order-to-avoid-wiggling-labels-e31b1c83e4d0 …
Miscellaneous#
MS
Matt Stauffer
@stauffermatt
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 tells me it should be supported in any parser that supports "Markdown Extended") https://twitter.com/keithdamiani/status/1276137360229613568 …
JB
Joe Bell
@joebell_
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 :
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 :
tc
tierney cyren (parody)
@bitandbang
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:
```suggestion
<your suggested change goes here>
```
you can suggest a change by having a fenced code block and including `suggestion` after the three backticks in a diff, like this:
```suggestion
<your suggested change goes here>
```