Web Developer ALO

Web developer. Interests in #HTML, #CSS, #JavaScript, #Angular, #React, #Vue, #TypeScript #NodeJS and #Deno

[Chrome DevTools @ChromeDevTools]

Understand console errors with #Gemini is now available in US and a few supported regions!

Follow these steps to enable it 👉 https://t.co/ff2S943BXX

#ChromeDevTools

[Chris Heilmann codepo8.bsky.social @codepo8]

This is so, so, cool!
https://t.co/R48uU2HG2U

[Lee Robinson @leerob]

I built a portfolio/blog starter template with:

• React / Next.js
• MDX / Markdown
• Tailwind v4
• Dynamic RSS / Sitemap
• Dynamic OG images
• Syntax highlighting
• Simple design / Geist font

https://t.co/SLkaoWjth7

[Wes Bos @wesbos]

Damn! How did I not know about this VS Code feature earlier?

[Lee Robinson @leerob]

Building the with @nextjs App Router? Here's a few gotchas I've ran into and how to fix them.

https://t.co/o71nwlG6X5

[Wes Bos @wesbos]

Suuuper handy new CSS:

:user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with

Just landed in Chrome + Safari, been in Firefox for years.

[George Moller @_georgemoller]

Just found out there is a method in JavaScript that let's you group by array of objects...quite handy!

[Wes Bos @wesbos]

Here is a neat new API that is starting to hit browsers!

The CSS Custom Highlight API.

Highlight text on the page without having to wrap in a <mark> or <span>

[Alex Sidorenko @asidorenko_]

Authentication in Next.js 13 using Clerk

[Dominik 🔮 @TkDodo]

📢 Yesterday, we released an experimental react-query-nextjs package for the app directory. Wrap your app in the <ReactQueryStreamedHydration> component to enjoy direct useQuery fetches on the server with suspense, which streams to the client 🎉

Example: https://t.co/6OspySSzEY

[Maximiliano Firtman @firt]

Safari 17 for web and PWA devs
🎁<model> for 3D and AR files
🍿popover
🕛HTTP Early Hints
🌆HEIC/HEIF/JPEG XL
🎥Managed Media Source
🔔Web Push per profile
🫙Storage API
💧ReadableStream
🔝Fetch Priority Hints
👩‍💻Web App install on macOS
📦PWA Install from SFViewController

[Matt Pocock @mattpocockuk]

React.ComponentProps is such a lifesaver, and more folks need to know about it.

[Matt Pocock @mattpocockuk]

🔥 TypeScript Tip 🔥

Building your own VSCode extension from scratch is pretty easy to get started with!

Here's a working setup and a few tips in less than 90 seconds.

[Evan You @evanyou]

I have a lot of respect for the work the Astro team has been doing, but I want to share some important caveats that everyone should be aware of when reading, and especially publishing this kind of reports: (0/n)

[Web Developer ALO @WebDeveloperAlo]

https://t.co/nHRaWWCcr8

[Andrew Schmelyun @aschmelyun]

Today I learned that you can remove an element's default styling with a single line in css

[Cory House @housecor]

React tip: Keep state as "low" as possible.

Example: If state is just passed down to one child, it's too high.

Solution: Move the state down to the child.

Benefits:
✅ Avoids needlessly passing props
✅ Protects state from accidental changes
✅ Makes each component easier to understand
✅ Improves performance (avoids parent re-renders)

#react

[Maximiliano Firtman @firt]

🚨Today is Apple's PWA Day!🚨

Safari on iOS and iPadOS 16.4 b1 adds support for:
💌Web Push!－⚠️for installed PWAs only
🔢Badging
🆔Manifest ID with a twist
⬇️PWA installation from Third-Party browsers
👁️Screen Wake Lock
🌄Screen Orientation
🧑‍🦰User Activation
🎥Web Codecs

[Jen Simmons @jensimmons]

Today is the day. Web Push on iOS.

https://t.co/mZDtj112yN

[Minko Gechev @mgechev]

Tip: use fetchpriority to speed up your apps

fetchpriority accepts values low, high and auto and lets you hint the browser with what priority it should load a resource

‣ Set high priority for your LCP image
‣ Low priority for nonessential resources

📚 https://t.co/WIE9i2KCRH