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 
17:2025 May 2020

47

320


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

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.

TypeScript#


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 🙈

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 
KD
Keith Damiani

@keithdamiani

25 June 2020
@allotmentandy1 @stauffermatt @TightenCo I believe [link](url){target=_blank} should do it!
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 :
The whole 'div' is clickable but the link is nested inside and offset by a pseudo element
TC
Tierney Cyren 🍑

@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>
```
screenshot of this suggestion: https://github.com/nodejs/examples/pull/32/files#r523142312