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…

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

https://twitter.com/Steve8708/status/1615733451684188160

if only there was a better way sauce: reddit.com/r/ProgrammerHu…

the code was written like 3 weeks ago ok 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...

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:

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

MAJOR CORRECTION: Bun is indeed significantly faster at SSRing React than Node in our latest benchmarks

Additional notes and caveats in thread:

https://twitter.com/Steve8708/status/1560723411021676544

First, huge thanks to @jarredsumner for helping show me how to setup a proper Bun React server

Added throughput to the benchmark

Wow, @MarkoDevTeam KILLS at SSR

As always, this is very early, send feedback: github.com/builderio/fram… @MarkoDevTeam This is requests per second ^

Added SSR speed to the benchmarks 👀

Initial results: github.com/builderio/fram… Still more to do, but sharing early for feedback

Very impressed with @MarkoDevTeam and @solid_js 🔥

Bun didn't quite meet expectation, but while I heard a quote of "3x faster SSR" I see the site focuses on throughput specifically, so perhaps will add a bench for throughput

A thread of my favorite frontend performance tips to keep top of mind ⬇ Use nextgen image formats (and how to make that easy)

https://twitter.com/Steve8708/status/1530286144167944192

A thread of my favorite clever CSS tricks 👇 Clever use of position: sticky by Apple -

https://twitter.com/Steve8708/status/1540794691309805569

How to make this awesome text gradient effect found on github.com:

Step by step info in thread 👇 First, we need a background gradient. We can use the linear-gradient() function in CSS to provide an angle and two colors

mix-blend-mode in CSS can produce such cool effects, and is so underutilized

/* eg: galaxy text effect */
.galaxy-text {
mix-blend-mode: lighten;
background-image: url(galaxy.png);
}

More examples & detail 👇 Here's a cool little playground I made for you to play around with it: builder.io/fiddle/71563ce…

How Partytown works thread: 🧵 👇 First, what is Partytown? It's a JS library that lets you offload 3rd party scripts to a web worker to remove the negative performance impact they can have on your site

https://twitter.com/Steve8708/status/1516227273556324354

Perf quiz!

What is the correct attribute for browser-native lazy loading?

Answer in 🧵👇 The answer is 4! Did you get it right?

Learn more: web.dev/browser-level-…

💡 Web performance tip

Optimizing your largest contentful paint (LCP) can be hard

Here are 8 tips, with code snippets and visuals, to help your pages load fast for optimal SEO and UX

🧵👇 First, how is LCP measured?

> The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading

web.dev/lcp/

Performance tip: if you need to set a lot of dynamic keys to an object, a Map can give you better perf

Explanation in 🧵: The answer has to do with monomorphism: mrale.ph/blog/2015/01/1…

In short, JS VMs try to assume a shape of an object using a hidden class. When the shape changes, this can lead to a deopt

It's the same reason why setting a property to null/undefined can be faster than deleting:

Performance tip: did you know that even a simple chat widget can have a negative impact on your site performance?

But there is a solution: you can render a div that *looks* like the widget button, that on click downloads the actual widget JS only when needed

More info in 🧵: We did this on the @builderio site to great success, and wouldn't have the performance score we have without it!

Performance is hard, and there are many things to know

That's why I have compiled many tips for image perf into this one cheat sheet!

More info in 🧵: Great deep dive for much more info here: web.dev/image-componen…

Performance tip: make your page load feel more instant by using priority hints to help the browser prioritize the most critical resources

More you can do with priority hints in 🧵: You can also prioritize iframes, scripts, links, and fetch!

Learn more: web.dev/priority-hints/

Performance tip: did you know you can make a fast function for relative time strings with ~30 lines of code and 0 dependencies?

Code in 🧵: Steal the code, or let me know how to improve it!

Github gist: gist.github.com/steve8708/ada9…