LLMs are pretty cool when they're not being incredibly stupid

In your products, you need more of the smart parts and less of the dumb parts

Steal my tricks for making LLMs as least dumb as possible 🧵 The Achilles heel of LLMs is hallucination, aka giving confidently wrong answers

E.g. if you ask chatgpt "how do I create a user with 's APIs" it'll say "create a POST to /api/v1/users"

Thing is, this API doesn't exist, and never did

So what can you do? Builder.io

Don't be that teammate who blindly refactors code and only makes things worse.

Let's look at some good vs bad refactoring patterns with real examples 🧵 Let's take this code.

I hired a developer once that saw us calling this `functions.runWith(...)` repeatedly with different options and decided to consolidate it all into one createApi function

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…