Dev Roundup, Feb 2023 Part 1

This edition includes AI, scrolling animations, Lighthouse updates, Typescript tips, and more!

Around the Web 🕷

Building a GPT-3 app with Next.js and Vercel Edge Functions

If you're looking to build your first AI driven app, Next.js/Vercel provides a really quick and straightforward solution.

Learn how to build GPT-3 AI apps with OpenAI, Next.js, and Vercel Edge Functions.

Simple React Scroll Animations With Zero Dependencies

A guide for building scroll animations with nothing more than React and the Intersection Observer API.

React Hooks, CSS, and the Intersection Observer API

September 13, 2022

What's new in Lighthouse 10

The latest version of Lighthouse brings scoring changes and new audits (including penalizing paste-preventing inputs!!). Worth a look if you are into page performance.

Lighthouse 10 is here with a new scoring and audits.

Scroll driven gallery 👀

Some Fave Tweets 🐦

Cron jobs are coming to vercel next week. I'm excited to give them a whirl.

Lee Robinson @leeerob

Vercel Cron Jobs. Next week.

4895244425

1:42 p.m. – February 13, 2023 - View Tweet

Animate card borders with Wes' cool little CSS border gradient solution.

Wes Bos @wesbos

Really cool CSS gradient border effect I recreated after seeing it on the warp website.

Demo: GitHub & BitBucket HTML Preview

Code: hot-tips/warp-card.html at main · wesbos/hot-tips

190525229

8:25 a.m. – February 10, 2023 - View Tweet

A tiny little quality of life improvement. Pasting entire .env files was always available for existing projects. Now you can do it at project creation time.

Vercel Changelog @vercel_changes

You can now ⌘+V to add Environment Variables when deploying a new project.

6043

6:16 a.m. – February 9, 2023 - View Tweet

Not sure about as const? This thread goes deep.

Matt Pocock @mattpocockuk

A brief thread.

'as const' has more uses than you might think.

317450350

2:06 a.m. – February 8, 2023 - View Tweet

A nice little TS helper to make your intersection types much more readable.

Matt Pocock @mattpocockuk

Here's a quick thread on a super useful type helper you've probably never heard of (nope, not even advanced folks).

4257124550

2:53 p.m. – February 6, 2023 - View Tweet

I love a good animation tool. Tweak parameters and get visual feedback.

Morse @__morse

I made a website to visualize @framer motion animations

You can change animation parameters and see how they affect values over time

245714

3:36 a.m. – February 5, 2023 - View Tweet

A beautiful CSS demo that leverages :has() and :hovered.

jhey 🔨🐻✨ @jh3yy

Lil CSS Tip for this one 🤏

You could use :has() to detect when a galaxy is being :hovered and set the custom cursor coordinates 🤔

:root:has(.galaxy:hover) .cursor { --x: var(--gravity-x); --y: var(--gravity-y); }

@CodePen link below! 👇

10139132

12:14 p.m. – February 2, 2023 - View Tweet