DEV Community: Adrien Zaganelli

Tech gems 👁️ #5: How Far Are We From Automating Front-End?

Adrien Zaganelli — Mon, 25 Mar 2024 10:01:00 +0000

What will front-end developement look like when AI takes over ?

https://frontendatscale.com/issues/18/

Maxi Ferreira shares insights from the Design2Code: How Far Are We From Automating Front-End Engineering? paper.

React + Server components + LLM = AI SDK 3.0

Introducing AI SDK 3.0 with Generative UI support – Vercel

Stream React Components from LLMs to deliver richer user experiences

vercel.com

Vercel is open-sourcing their AI SDK to offer a glimpse into the future, as they can connect LLMs to third-party APIs.

Rumors

Will Hugging Face acquire Stability AI ? (owner of Stable diffusion)

// Detect dark theme var iframe = document.getElementById('tweet-1771395468959813922-517'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1771395468959813922&theme=dark" }

Tech gems 👁️ #4, Astro DB, Rolldown and free authentication guide

Adrien Zaganelli — Fri, 15 Mar 2024 11:30:00 +0000

All you need to know about authentication
Astro DB is out
Rolldown is coming
View transitions tutorial

All you need to know about authentication

The Copenhagen Book

A basic guideline on implementing auth for the web.

thecopenhagenbook.com

Pilcrow, the creator of the popular Lucia package released a free, open-source guide on implementing auth in web applications

Astro DB is out

Astro DB

The SQL database platform for content-driven websites.

astro.build

Astro studio is coming to life with the release of Astro DB. under the hood, it uses a libSQL (fork of sqlite by Turso) as a database with the Drizzle ORM to provide type-safety with Typescript.

Rolldown is coming

The Vite bundler is about to become even faster with rust !

// Detect dark theme var iframe = document.getElementById('tweet-1766115866859446477-736'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1766115866859446477&theme=dark" }

View transitions tutorial

View transitions: Handling aspect ratio changes - JakeArchibald.com

jakearchibald.com

I love view transitions; they're the future, check this out ☝️

Tech gems 👁️ #3: Node.js redesign, Memory-safe languages and Tailwind V4

Adrien Zaganelli — Fri, 08 Mar 2024 12:00:00 +0000

The Node.js documentation gets a refreshed look.
A White House report recommends adoption of memory-safe languages.
The growth of JavaScript payloads.
TailwindCSS v4 announced !

Node.js Strikes Back

beta-node-js-org.vercel.app

With the appearance of new challengers such as Bun, Deno, and Amazon's LLRT. The Node.js organization countered with a new documentation website.

It has a fresh new design and design system.

The website will run on Next.js, the styling is migrating to Tailwind.css.

You can find a summary of the redesign process on Github.

White House and memory-safe programming languages

Press Release: Future Software Should Be Memory Safe | ONCD | The White House

whitehouse.gov

The White House Office of the National Cyber Director released a report urging the adoption of memory-safe programming languages, such as Rust, to prevent classes of vulnerabilities and improve cybersecurity.

Javascript Bloat

JavaScript Bloat in 2024 @ tonsky.me

tonsky.me

Long read about the evolution of web page sizes from 2015 to 2024, focusing on JavaScript's role in modern front-end development. Learn about the impact of web bloat on performance and user experience.

Other

Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS

We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.

tailwindcss.com

Introducing Tech gems series 👁️

Adrien Zaganelli — Fri, 23 Feb 2024 10:24:00 +0000

I'm glad to start a new blog series about web development and technology in general!

In "Tech gems" we will try to uncover insider information in the JavaScript ecosystem and also share the main informations and various discoveries.

I'll try to post weekly or at the very least, monthly.

Before we dive into the recent discoveries, I'd like to add a personal note.

Keeping up with the ecosystem can be hard as things move absurdly fast. I want to warn those entering in the industry that you don't need to know everything nor try every framework out there.

What you need is to build your own path: show up every day, find your speciality, and then broaden your skills and build on top of top them.
You must learn constantly as a developer; these posts will try to help discoveri new opportunities, and avoid tutorial hell.

This job can be stressful when you have clients and/or deadlines. It can also be full of corporate/scrum stuff that will make you bang your head against the wall. Dealing with legacy code is also a special snowflake and will probably give you the hardest challenges.

At the end of the day, code is code. Make sure to enjoy your life, the one outside of your IDE 🤭

Always remember that "The Best Code is No Code At All"

To be fully honest, I still do not apply all of the advice I gave you above... I also began this series to avoid FOMO in my everyday discoveries. Writing them down every now and then will force me to filter the amount of information I read, and make sure to keep here the ones that are worthy.

Let's conclude with the biggest taboo in our industry: Burnout. Since I started back in 2019, I saw a lot of my friends and colleagues falling into it, or approaching close the edge.
It's not worth it, I'll leave you with some good stuff from Austin Gil:

On Work-Life Balance, Depression, & Purpose

Just some thoughts on life

austingil.com

Now that you're warned, let's go to the good stuff !

Tech gems 👁️ #1

Rumors

NuxtHub · GitHub

Build full-stack applications with Nuxt on Cloudflare, with zero configuration and transparent pricing. - NuxtHub

github.com

Sebastien Chopin, aka @atinux, creator of Nuxt.js, posted an enigmatic tweet a few days ago:

Not tweeting a lot lately, cooking something 🍰

We can now guess it's about the new NuxtHub organization on Github. NuxtHub should help developers to "build full-stack application with Nuxt on CloudFlare, with zero configuration and transparent pricing."

Tutorials:

Making CSS View Transitions Easy with Velvette | Codrops

Learn how to effortlessly implement smooth CSS view-transitions with Velvette, a useful library designed to tackle common challenges and enhance user experiences in web applications.

tympanus.net

Noam Rosenthal, co-editor of the CSS view-transitions spec, gives us a splendid tutorial on Codrops.

He explains how to achieve advanced smooth page transitions with the View Transitions API and the velvette library to handle the missing pieces.

You have to understand it's a game changer to make those with so little JavaScript, it will close the gap between server rendered websites and fully interactive SPAs.

Backend

https://www.uber.com/en-FR/blog/how-uber-serves-over-40-million-reads-per-second-using-an-integrated-cache

A long read where Uber explain how their "Docstore Architecture" allows them to perform numerous database reads thanks to caching.

adonisjs.com

After announcing their new major version (V6), the AdonisJS team brings some details about the roadmap without promising any release dates or timelines.
Overall, they aim to improve type safety and have realeased a few packages outside of the core:

Bento Cache
Edge (templating)
Japa (testing)
VineJS (validation and schema)
Verrou (locks in Node.js)

But the real takeway for me is that Adonis decided to take over the inertia package and maintain it officially.

Erratum (24/02/2024): This is incorrect. Instead, the community package eidellev/inertiajs-adonisjs will become an official first-party integration, known as @adonisjs/inertia.

Inertia is often used as "glue" between your front-end and your back-end and has been popularized by the Laravel community from PHP.

In the post, Adonis mentions SSR supports for Inertia, which could be a game changer for "server components" in nodejs.

Business

(Almost) Every infrastructure decision I endorse or regret after 4 years running infrastructure at a startup · Jack's home on the web

Assortment of technology startup infrastructure recommendations

cep.dev

Jack Lindamood has gone through a lot while building his startup. He kindly details many strategic infrastructure decisions such as picking AWS over Google Cloud or regretting choosing Datatog.

Must read if you plan to build a digital business one day !

Misc

qr.blinry.org

A fun website to learn how to read a QR code, it's as hard as it sounds.

Free Google Analytics Alternative: Quickstart with Umami Analytics

Adrien Zaganelli — Mon, 23 Oct 2023 06:00:00 +0000

I used to love splitbee.io to handle my analytics for a while. But since Vercel bought it, the service no longer works. To avoid this unpleasant situation again, I wanted to find an open-source alternative that I can self-host while being developer friendly and RGPD compliant. Let me tell you a few words about Umami analytics.

Context

As a European, I have witnessed Google Analytics become illegal. That's why in early 2021 I was looking for an alternative, at that time I got fond of splitbee.bio.

// Detect dark theme var iframe = document.getElementById('tweet-1372861060731052035-678'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1372861060731052035&theme=dark" }

...But once it became Vercel Analytics I had to find something else to avoid vendor lock-in.

If you want to avoid what happened to me, here is what you need to look for your analytics tool:

🤑 Self hosted and free (avoid cloud solution)
🍪 RGPD compliant for europeans laws (also avoid the need for cookies banner)
🥷 Bypass ad-blockers
🪽 Performant without too much javascript
🔓 Open-source is a big plus
🧑🏻‍💻 Developer friendly

I chose to go with Umami analytics. It matches all of the above !

Umami tracks page views, custom events, visitor location but you can host it yourself and own your data in your own database.
It also allows you to work in teams, the UI is translated in many languages, you can share your dashboards and many other features... including dark mode 😎.

That's cool but I do get this in my own website ?

Excellent question Timmy ! you have two choices:

use their cloud solution (with a free tier): https://cloud.umami.is
Follow this tutorial to discover the simplest, cost-free path in under 10 minutes (ideal if you're a developer who wants to manage your data and avoid bills)

You will need node v16.13+ and PostgreSQL.

Setup your database

To get started quickly I used PlanetScale. Umami also provides guides for:

But any PostgreSQL database will do the job.

Create an account and create your database in PlanetScale. Choose your region and take the free options (you still need to enter your credit card).

I took the "Others" provider

Set your database password

you should have this file at the end

# your values will be different
DATABASE_HOST="aws.connect.psdb.cloud"
DATABASE_NAME="umami"
DATABASE_USERNAME="zz6qgpsqiq4u932t2axo"
DATABASE_PASSWORD="pscale_pw_zfsPwRz0tW9H2wLDaykeXqZV5SA34l52gqAgA7XoWc0"
# added by me for next step
# mysql://[username]:[password]@[host]/[dbname]?sslaccept=strict
DATABASE_URL="mysql://zz6qgpsqiq4u932t2axo:pscale_pw_zfsPwRz0tW9H2wLDaykeXqZV5SA34l52gqAgA7XoWc0@aws.connect.psdb.cloud/umami?sslaccept=strict"

Self-host your Umami instance

Fork Umami analytics on Github: 🔗 fork here.

Your instance can be hosted on many providers such as:

You may notice that our fork is a Next.js project, so we will host it on Vercel.

When creating you project you have 3 things to do:

Override build command: yarn build.
Override install command: yarn install.
Set DATABASE_URL in environment variables (take a look at the .env file above to see what you should get).

After deployment, you should be able to see your instance's login !

Before continuing, login as username: admin, password umami. Make sure to change your password: see docs

Setup your application

Once you're logged in, go to settings and create your website's project in Umami:

Once created, go to Settings > (your project's row) > Edit > Tracking code. Paste the tracking code in your HTML.

<script async src="https://umami-self-host-example.vercel.app/script.js" data-website-id="a477d142-f3d5-4514-8251-f9f538a2b28f"></script>

track custom events

You can track custom events using window.umami.track or using HTML attributes: data-umami-event, data-umami-event-**** for custom properties.
See docs

Here is a real-world example app with an increment tracker:

Conclusion

And that's how to easily set up Umami Analytics in 10 minutes ! You can publicly access all the trackings of the stackblitz on my Umami instance: https://umami-self-host-example.vercel.app