Steve (Builder.io) Profile picture
Jul 12, 2022 8 tweets 2 min read Read on X
A thread of my favorite clever CSS tricks 👇
Clever use of position: sticky by Apple -
Clever use of scroll-snap by Tesla:
Not the best for a11y, but a clever trick for a JS-free hamburger menu nonetheless:
Clever use of CSS fundamentals by Airbnb:
Apple yet again, this one involves a bit of JS:
A very nice pure CSS product carousel implementation inspired by Nike and Apple:
Frosted glass effect, by you know who:

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve (Builder.io)

Steve (Builder.io) Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Steve8708

Apr 18, 2023
ChatGPT now in your terminal!

Chat mode was just added to AI Shell, and it's shockingly handy
Totally free and open source, just requires an OpenAI API key - github.com/builderio/ai-s…
Hoping to add more backends in the future, such as Alpaca so you can use this completely free with no API keys needed

Looking for contributors! github.com/BuilderIO/ai-s…
Read 4 tweets
Feb 14, 2023
8 modern browser APIs you might not know, but really should:
structuredClone() gives you browser native deep cloning that supports a variety of types like Date, Set, Map, etc
Promise.allSettled helps you await multiple promises concurrently to increase perceived performance, while still handling errors effectively
Read 10 tweets
Jan 15, 2023
the code was written like 3 weeks ago ok Spiderman pointing at himse...
In all seriousness though, I know I post a lot of coding tips and "do this not that" best practices stuff, but I want to use this as a reminder to point out...
I don't write perfect code. No one does. My code has been complained about by fellow engineers as much as anyone, if not probably more.
Read 6 tweets
Jan 7, 2023
One new way you can make fetch() more elegant is to use the new Error.prototype.cause property in JS:

const res = await fetch(...)
if (!res.ok) {
throw new Error('...', { cause: res })
}

...

catch (err) {
if (err.cause.status === ...) {
// Handle each status
}
}
Full code example: Screenshot of the code:  try {   const res = await fetch('/u
You can even write your own tiny wrapper around fetch to make it more intuitive now too: Screenshot of the following code:  async function myFetch(..
Read 7 tweets
Jan 7, 2023
Civet (@civetlang) is a new alternative syntax for TypeScript

Init flame war about syntax preferences:
Regardless of the syntax you prefer, the point of Civet is you can choose

You can write normal TSX opting into just a modern feature or two, or use a completely ruby/python style, or something in between similar to rust
Personally, I like the ability to bring more functional programming patterns to TSX, in an easy to incrementally opt-in way

I love TS, but there are some features of other languages that I miss, and I am intrigued by Civet's ability to potentially strike a balance for modern TS
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(