DEV Community: Daniel Zotti

#LearnedToday: Object.groupBy()

Daniel Zotti — Mon, 26 Aug 2024 12:00:56 +0000

🥳 It is finally out! No more need to write ugly code to group an array of objects by a specific value of a field!

Since late 2023, there is an official static method for Object called groupBy() that does it for us!
It accepts an Iterable, such as an Array, and a function, which is executed for each element and must return the "category" of that specific element.
The method returns a new Object where each key is a different category that contains an array of objects belonging to that specific category.

NOTE: The elements in the returned object and the original iterable are the same (not deep copies!). Changing the internal structure of the elements will be reflected in both the original iterable and the returned object.

Example

Let's give a practical example to see how easy it is to group all the Ninja Turtles characters by age.

The initial Array

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];

The good OLD way (with `reduce`)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);

The MODERN way

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);

Tip: use Map.groupBy() if you want to return a Map instead of an Object

The result

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}

Demo

🧑🏻‍💻 As usual, I created a simple Stackblitz prject to play with the code.

🗄 Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ Browser support: https://caniuse.com/mdn-javascript_builtins_object_groupby

Voxxed Days Trieste (May 30, 2024)

Daniel Zotti — Sat, 15 Jun 2024 13:54:54 +0000

Is 2 weeks enough time to recover from an event?

If it's the Voxxed Days Trieste, certainly not, but it's definitely time for a post now!

Having an international event for devs in Trieste (Italy) is not everyday stuff, and I am really proud to have been a part of it!

Although historically Voxxed has always been associated with Java and the backend, this year there was also a frontend track (React) with a very high level of talks:

Maya Shavin (Microsoft) opened the FE track with her talk “Are we React-ing wrongly” explaining how to use React for REAL. A talk that I wanted so much because of its wisdom and also because Maya is an explosive mix of sweetness and expertise.
Katarzyna Dusza (Spotify) brought a talk called “Modern & secure adaptive streaming on the Web”. Her really accurate, clear and in depth presentation will surely simplify the study of these technologies for those who want to use them! As we all know, docs are never that comprehensive and one often has to study from different sources to understand how things really work; Katarzyna did that for us and even added some live coding, so there is no excuse not to give it a try!
Omar Diop (Learnn) brought “A 4-Year Retrospective : Lessons Learned from Building a Video Player from Scratch with ReactNative”. Unfortunately, I wasn't able to attend his talk because I was busy with “staff stuff”, but I got to talk to him during the speakers' dinner the day before, and he is a bubbly, energetic guy! We got to talk about our side projects (which I LOVE doing) and his are all really interesting!
Edoardo Dusi (SparkFabrik) with the talk “ServerComponents are React's superweapon in the Stack Wars: Can PHP strike back?” brought one of the trendiest topics of 2024, telling it like only he can. It was a “historical” talk, from the first version of php to NextJs, through the various FE frameworks we have loved and hated... So many good old memories!!!
Borut Jogan (Honeywell): “Fail your tasks successfully”, a talk that every conference (of any kind) should give space to. He brought attention to the issues of mental health and how to get out of bad situations that any of us might face at work. A talk of a simplicity but disarming power. Really a good time of sharing.

The main track talks were also interesting, but my favorite was the “Cracking the Code: Decoding Anti-Bot Systems!” by Fabien Vauchelles (Scrapoxy) who explained how you can do scraping without getting caught. I love these kinds of talks because they encapsulate the REAL experience of several years in one talk of a few minutes 😍

Let me add just a couple of words about the location: how cool is it to do a conference in one (actually two) cinema?!? WOW.

And last but not least, I can't thank Alessandra Laderchi enough for getting me involved in the program committee and asking me to be part of the staff.
I got the chance to work with a great team and meet fantastic people: Borut Jogan, Enrico Giacomazzi, Federico Morsut, Gabriele Savio, Mariela Nasi, Ornela Kita, Mario Fusco and Daniele Zonca.

#LearnedToday: Slider in pure CSS

Daniel Zotti — Tue, 16 Jan 2024 08:23:13 +0000

🏞️ Do you remember when you had to use heavy JS libraries to create image slideshows?

💪 Those days are gone! You can do it in pure CSS now! (experimental in Chrome, Edge and Opera)

Main concepts

Scroll timeline: define a name and a direction for the scrollable element on which the shorthand CSS scroll-timeline property is applied.
Animation Timeline: The animation-timeline CSS property specifies the timeline (defined by the scroll-timeline property) that is used to control the progress of a CSS animation.
Timeline scope: The timeline-scope CSS property modifies the scope of a named animation timeline.
Animation range: The animation-range CSS shorthand property is used to set the start and end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will start and end.

The idea

Associate an horizontal (x axis) scroll timeline to the element that contains the slides (.slider__entries) using the scroll-timeline property (it's a sort of event listener of the scroll event for CSS)

.slider__entries {
  scroll-timeline-name: --carousel;
  scroll-timeline-axis: x; // horizontal
}

Raise the scope of the timeline from the child (.slider__entries) to the parent (.slider) using the timeline-scope property

.slider {
  timeline-scope: --carousel;
}

Associate the scroll animation to the single "dot" in order to highlight the correct "dot"

@keyframes color-bullet {
  from,
  to {
    background: var(--dot-color--active);
  }
}
.dot a {
  animation: color-bullet linear;
  animation-timeline: --carousel;
  animation-range: calc((var(--i) - 1) / 5 * 100%) calc(var(--i) / 5 * 100.01%); // NB: 5 is because we have 5 images in the example!
}

Adding a "snap" effect during the scroll and hide the scrollbar

.slider__entries {
  scroll-snap-type: x mandatory; // horizontal
  scrollbar-width: none; // hide scrollbar
  scroll-behavior: smooth; // scroll smoothly
}

Adding the slide switch when clicking on the button

<!-- DOT: --> 
<a href="#slide_01"></a>

<!-- SLIDE: -->
<a name="slide_01"><img src="..." /></a>

Demo

I created as usual a working demo.

How we built an app in less than 5 days with Qwik, Supabase and Vercel

Daniel Zotti — Mon, 20 Nov 2023 13:47:04 +0000

Fortitude Convention Companion App

September 29 was the day of the Fortitude Group's convention. It was a truly memorable day and I can't even describe the joy I felt finally spending time together with all the colleagues who work scattered around Italy (and whom I usually see only through a monitor).

But let's go back a bit, to two weeks earlier to be precise, when the email from HR with the official agenda for the convention arrived.

Thursday 14th September

The desire to see each other and do something together is always huge, and after looking at the schedule, we realized that there was a 3-hour "free time" slot with an asterisk next to it that said "Possibility of using the pools and the volleyball, soccer and table tennis facilities". Within minutes after receiving the email I got a message from Luigi proposing to arrange teams and matches for the respective sports.

The next day, things have already gotten out of hand and together with Gabri we decide to organize something more complex:

the Fortigames! A two-hour challenge between two teams that will compete simultaneously playing soccer, volleyball and table tennis.

To make the event more interesting, we decided to name both teams. After brainstorming, we opted for the symbol of Yin and Yang because of the classic black and white T-shirts. With a little more creativity, we decided on Tigers (Yin) versus Dragons (Yang)!

More info about Yin and Yang / Tigers and Dragons

Tuesday 19th September

We create a form on Google Forms to collect participants data and at the same time, ask the HR team for the full list of convention attendees with their company info and emails.

That being said, you may ask, "isn't Daniel's blog usually filled with technical posts?" You are right! In fact, after this preamble, I'll take you to a week before the event, specifically Friday, September 22.

Friday 22nd September

Out of the blue, Gabri comes up with the idea of developing a convention "companion" app, mostly focusing on the Fortigames and convenient for managing the results and helping attendees figure out where to go, what to do, etc.

Initially we think it's a joke; making an app from scratch in less than a week, especially working in our spare time, is unthinkable. But then Stefano joins in as well, and he proposes to use some technology never tried before, and I couldn't resist.

So we decide to develop a PWA using the following technologies:

Balsamiq: for wireframe
Figma: for the UI
Qwik: as the main framework
Font Awesome for icons
SCSS structure copy-pasted from my website with CSS modules
Supabase: realtime database with Google authentication (since every Fortitude Group employee has their own Google corporate account)
GitHub: to save the open source code
Vercel: for the deployment

Project creation

On Friday night, I already started creating the project on the Supabase website and installing Qwik, with its plugin for Supabase.

npm create qwik@latest

npm install @supabase/supabase-js supabase-auth-helpers-qwik

Supabase integrations for Qwik

Google Authentication setup

Activating authentication via Google from the Fortigames project on the Supabase dashboard

set the return url for the provider

and create the web app on Google Cloud (with the correct return URL)

To log the user in, simply create a button that, when clicked, calls Supabase's createClient function by setting:

Google as the provider
entering as parameters
the project URL
the key we find on the Supabase site

Supabase does the rest (it basically takes care of reading the token data from the URL and saving it to the localStorage)

// /src/components/auth/login/login.tsx

export const Login = component$(() => {
  const location = useLocation();

  const handleGoogleLogin = $(async () => {
    createClient<Database>(
      import.meta.env.PUBLIC_SUPABASE_URL || '',
      import.meta.env.PUBLIC_SUPABASE_ANON_KEY || ''
    ).auth
      .signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: location.url.origin + config.urls.auth
        }
      });
  });

  return <Button onClick$={handleGoogleLogin}> Login with Google </Button>;
});

Saturday 23rd September

We agree to meet Saturday morning at 9 a.m. to start jotting down ideas and talk about graphics and features.

The team

Stefano: Head of UX/UI Engineering
Gabriella: Team Leader UX/UI
Daniel: Team Leader Frontend

App Features

Dashboard page: with realtime results and schedule, countdown start/end games and location map (+ cup with winner at the end)
Teams page: list of team members + filters by team and sport type
Games page: results of the 3 sports + section only for referees, facilitators and admin to score and start/stop games
Boardgames page (yes, those who don't want to play sports can have fun playing with boardgames!) with list of available games and some additional info
Info page: rules, agenda, location, etc..
Profile page: with custom icon based on team membership and links to dedicated chats on Slack for team, facilitators, boardgamers, etc...
Admin section: to manage convention registrants and Fortigames participants.

Wireframe

The very first app wireframe:

Database

After reasoning about the features, we begin from the creation of the DB directly on the Supabase website. Having little time, we try to simplify the structure a bit so as to speed up the work.

Users

List of users who can access the app.

Personal information (first name, last name, company)
Info about roles (admin, facilitator, referee)
Info about games (team affiliation, game participation)
Email: we use this field to associate the person's info with the user authenticated through Google

Agenda

The day's agenda information. Each row corresponds to a task and has a beginning and an ending time.

Games Results

The information about the results of the various games. Each row corresponds to the result of a specific sport (soccer, volleyball, and table_tennis)

Config

The information about the status of the games: planned start/end time, actual start/end time, a flag to manage the paused game (e.g., bad weather or not plannable problems) and, of course, the name of the winner!

Layout

We didn't think about a desktop version (or at least totally responsive) so as to speed up the work. From the usual "mobile first" approach, you could say that we switched to a more simple approach that I would call "mobile only" 😀 (basically we put a max-width and handled responsive only for smartphones and tablets, without revising the page structure).

This is how the very first working version of the app looked like.

SCSS file structure

To speed up the work, we used the SCSS files from the danielzotti.it website.

The reasons are as follows:

No UI frameworks are used
It is modular
It already has reset styles included
It works with CSS variables
It supports dark/light theme
It already contains some basic styles

The structure is as follows and each file has its own purpose:

base: styles of basic html tags such as h1,..., h6, p, a, ul, code
common: common styles used in different contexts but which are not base tags. (e.g. .table-container to handle overflow of tables)
fonts: @import of the various fonts used
layout: responsive styles similar to Bootstrap: container, breakpoint, etc...
reset: reset of all basic styles
theme: the variables for dark/light themes
variables-css: the general and theme-independent variables: spacing, html-max-width, ...
variables-scss: the SCSS variables (unfortunately @media() does not support css variables yet, so we had to keep the SCSS variables to use them in that context)
components (folder): styles of reusable components such as buttons, icons, ...
mixins (folder): reusable mixins within the application.

Daniel's website SCSS file structure

Around 3pm we get to the point where:

the layout structure is ready and supports the dark/light theme
we are able to authenticate through Google
we have imported the convention participant data via CSV (directly on the Supabase website)
we are able to read the data from the users table
we have the ability to use icons conveniently thanks to FontAwesome

Monday 25th September

Supabase CLI

The developer experience of Supabase is really nice. In addition to the well-written documentation and useful SDK, there is also a cli to make life easier for developers.

To use it, just install it

npm i supabase --save-dev

generate a personal access token.

Personal Access Token

and login

supabase login

Supabase login

Supabase and TypeScript

And for those who, like me, love working with TypeScript, the cli provides a feature to automatically generate DB types:

supabase gen types typescript --project-id {project_id} > src/types/database.types.ts

Generate Supabase types

User filter

Supabase has the ability to manage policies within the DB, but time is short and there is no ready method for filtering authenticated users by domain, so we decide to go the easy way and filter users client-side only, simply checking to see if they are in the users table.

Authentication session

Supabase handles the authentication through Google easily, but maintaining the session is the responsibility of the app developer.

In fact, reading the user's data from the localStorage every time causing bad performances and, in addition, there is no way (or we didn't find it) to figure out when the JWT token is actually saved in the localStorage and can finally be read and saved in memory. Initially, we used the good old setTimeout of 500ms but of course it became even less performant because we had to wait for the timeout each time we needed to read it.

As a result, we decided to manually handle saving the data in the localStorage.

The flow is as follows:

The user clicks on the Login button.
He/She is sent to the classic Google Login page
Once logged in, he is redirected to the /auth page that will take care of reading the token from the URL parameters
with a call to the DB, data is read from the users table (filtered for the email with which the user has authenticated)
if the user does not exist in the users table, an error page is shown because the user is not in the list of users authorized to use the app
if the user exists, we enrich the information taken from the users table to the session data
save the session data in the localStorage
save the session data in the context (using the useAuth hook) so that we can directly use the context and not the localStorage as the data source (single source of truth)
the user is eventually redirected to the home page (dashboard)

/auth page

What happens if we reload the page (after successfully logging in)?

We added the useCheckSession() hook on the layout that encapsulates all protected pages and returns the session
useCheckSession internally checks if the context exists
If the context exists, it returns it immediately
If the context does not exist:
it goes to check if a token exists in the localStorage
if the token does not exist, the user is redirected to the login
if the token exists, it copies the information into the context and returns the newly updated context

// /src/hooks/useCheckSession.ts

export function useCheckSession() {
  const navigate = useNavigate();
  const { auth } = useAuth();

  const isTokenExpired = $(({ expires_at }: AuthSession) => {
    if (!expires_at) {
      return false;
    }
    return new Date() >= new Date(expires_at * 1000);
  });

  const getSessionFromLocalStorage = $(async () => {
    try {
      const tokenString = localStorage.getItem(config.jwtTokenLocalStorageName);

      if (!tokenString) {
        return null;
      }
      const token: AuthSession = JSON.parse(tokenString);
      if (await isTokenExpired(token)) {
        return null;
      }
      return token;
    } catch (e) {
      return null;
    }
  });

  useVisibleTask$(async () => {
    if (auth.value) {
      return;
    }
    const token = await getSessionFromLocalStorage();
    if (!token) {
      navigate(config.urls.login);
      return;
    }
    auth.value = token;
  });

  return auth;
}

useAuth and useCheckSession

NB: One thing that is not immediate to understand about Qwik at first is that code can be executed either client or server side (based on different logics).. In our specific case, we needed to execute the client-side check (where the JWT token session persists) and thus we used useVisibleTask$ to make sure that the client-side code was executed, after the first rendering of the component.

In fact, the useVisibleTask$() is similar to useTask$() but it only runs on the browser and after initial rendering.

useVisibleTask

Tuesday 26th September

There are still many features to be developed, and
Erik is added to the developer team to help us out with a couple of components.

Time manager

A countdown that follows this logic:

Before the games start, the countdown points to the scheduled start date of the games
When the games have started, the countdown points to the expected end date of the games
When the games are finished, the countdown points to the actual end date of the games

In addition, the current event on the agenda and upcoming events are shown.

GamesTimeManager

Minimal UI kit

In order to speed up the development, we created a couple of reusable components: button, back to top button, company logo, back button, etc.

Button

First deploy on Vercel

Deploying to Vercel is really straightforward with Qwik, in fact there is an adapter that you simply install with

npm run qwik add vercel-edge

Vercel edge

and then just go to the Vercel website and connect the Git repo

In addition, you can configure the project to automatically deploy on "push" on a specific branch (Settings → Git)

After pushing to the deploy-vercel branch just go to https://fortigames.vercel.app and see your app working.

The pattern for the URL is https://{project_name}.vercel.app

Wednesday 27th September

Time for Real Time!

Supabase has the Realtime function and it is really easy to activate: just go to the table details, click on the button and you're done!

"Fun" fact: Stefano was in charge of studying the realtime part and, initially, he had activated that feature only for the users table. When I set out to develop the code for the realtime results, I lost 2 hours to realize that realtime had not been enabled on that table as well. In fact, Supabase does not return an error, but simply empties data so, with no error, it took me a while to figure it out (they could definitely improve this!!).

There is little data in the DB, and from a realtime perspective it makes sense to load the whole list of users (and all the other data) without thinking about pagination and just stay listening for the few data changes and update the data in memory accordingly. For convenience of use, we decided to wrap the logic in hooks.

hooks for realtime

NB: We will take useParticipants() hook as an example, but all the hooks are developed pretty much the same way (following the same pattern).

The idea is to initialize the hook's store data in the protected pages layout (since the application works only after authentication), so data is taken only once and, in any case, after authentication.

The single source of truth is our store, and from there we filter the data we are interested in, such as the list of users who participate in games (those who are associated with a team), or the list of people who play board games. We listen for realtime changes in the DB and update the store accordingly, and all other useComputed$ properties will update automatically.

// /src/hooks/useParticipants.ts

export const useParticipants = () => {

  // Single source of truth
  const store = useContext(ParticipantsContext);

  // List of all people in Fortitue Group who participate to the convention
  const usersList = useComputed$<Participant[]>(() => {
    return Object.values(store);
  });

  // Participants in a team
  const participantsList = useComputed$<Participant[]>(() => {
    return Object.values(store).filter((p) => !!p.team);
  });

  // People who play boardgames
  const boardgamersList = useComputed$<Participant[]>(() => {
    return Object.values(store).filter((u) => u.is_playing_boardgames);
  });

  // Get participant by a specifica email (ID)
  const participantByEmail = $((email: string) => store[email]);

  // It is used in the layout of the protected route
  const initializeContext = $(async () => {
    const { data } = await supabaseClient.from("users").select("*");

    // Save data in key:value structure (email is the key)
    if (data?.length) {
      Object.entries(data).forEach(([key, value]) => {
        store[value.email] = value;
      });
    }

    // Listen to data changes
    supabaseClient
      .channel("custom-update-channel")
      .on(
        "postgres_changes",
        { event: "UPDATE", schema: "public", table: "users" },
        (payload: RealtimePostgresUpdatePayload<Participant>) => {
          store[payload.new.email] = payload.new;
        },
      )
      .subscribe();
  });

  return {
    initializeContext,
    store,
    participantByEmail,
    participantsList,
    usersList,
    boardgamersList,
  };
};

useParticipants, useComputed$ and useSignal

Manage score

Once the realtime feature is ready, we can work on updating the score of the matches. This is a fairly straightforward operation: just do "+1" or "-1" on the data when you click on the appropriate button (kind of like the classic “counter” example). One thing to keep in mind is to immediately disable the button after the user clicked, so as to avoid multiple updates.

// /src/routes/(protected)/games/[id]/index.tsx

const updateScore = $(
  async ({ team, score }: { team: 'dragons' | 'tigers'; score: number }) => {
    if (!result.value) {
      return;
    }
    if (score < 0) {
      return;
    }

    isSubmitting.value = true;
    try {
      const row = {
        ...result.value,
        last_update: new Date().toISOString(),
        [team]: score
      };
    } catch (ex) {
      alert('There was an error :(');
    } finally {
      isSubmitting.value = false;
    }
  }
);

<Button
  variant='selected'
  disabled={isSubmitting.value}
  onClick$={() =>
    updateScore({
      team: 'dragons',
      score: result.value!['dragons'] + 1
    })
  }
>
  +</Button>;

Almost done

It's 1:40am. The app seems usable and (almost) complete. We can go to sleep now, but first let's take a picture to celebrate!

Thursday 28th September

Start/Stop Fortigames

In order to have something up and running on the day of the convention, we left the components for managing the games for last, since this could be handled by editing the DB directly anyway (from the Supabase website).

Fortunately, there was still a day to go, and by taking just a couple of hours off in the afternoon I was able to manage the buttons to start games, pause and restart them.

Each button has the same logic: it reads the status of the games in realtime and, when clicked, handles the specific Start/Stop/Reset operation of the games.

Winner page

Graphics aside (an SVG of the cup drawn by Gabri), the component keeps listening to the winner field of the config table and, at the time it is set with the value "dragons" or "tigers", the component displays the trophy with the name of the winner.

Last moments

It's 8pm of the day before the convention. The next day's departure is at 6am (and a 3-hour drive!) and the sleep backlog has to be made up somehow (going to bed every day at 2am was probably not a good idea 😅).

Just time for a few last graphical fixes, ZERO testing, and the last deployment is done hoping for good luck!
Time to pack up and try to rest up for the two-day event!

One last look at the evolution of the UI before concluding our journey:

Final thoughts

Okay, the time was really short but we made it develop this app! Sure, adding ideas and features along the way was not a good idea, but in the end we did it and it was worth it.

I will never stop saying it, if you have fun and put passion into it you can do anything.

Let's take stock of the choices made:

Knowing that the app is used by trusted people and only internally, we did not take large security controls into account
The app was created just for fun, so we didn’t care about performances and chose instead to add more features.
We were so focused on functionality that we did not have time to focus on shared development patterns (ES: DB access mode, folder and file structure, naming conventions, ...)
We did not study Qwik or Supabase in a structured way. We went ahead by trial and error and reading only the part of the documentation that could be useful to us (usually this is not the best way to study)
Qwik is nice but it is definitely different from known frameworks, although JSX, hooks, routes are also used in other frameworks. At first you feel something "strange" and you bang your head on it but then, once you understand its logic, I must say it is a pleasure to develop with it.
Supabase has a nice dev experience and a really well written doc. On the other hand, realtime feature seemed a little slow compared to Firebase.
Overall we are happy with how it went, partly because we used both Qwik and Supabase for the first time and, in a few days, we were able to develop a working app with very little effort. These are two tools that we will keep in mind also for more complex projects, taking advantage of doing a deep dive to study them properly.

Next steps / Improvements

Of course there are certainly improvements that can be made. I don't know if we will do them but I’d like to list them:

Improving DB security configuring Supabase Policies.
Adding a toggle theme button to select the preferred theme (currently, the default OS theme is used)
Improving the UI of the admin section
Managing the config table directly from UI
Code cleanup: revise folder structure a bit, clean up comments and unused code, use shared patterns in various pages/components
…and more that I can't think of now!

The Code

I leave the link to the GitHub repo so you can browse through the code. If you want to try using the app you just need to use the repo code and follow the steps to create your own DB on
Supabase and your own app on Google Cloud console.

The Demo

You'll have to settle for a video, I'm sorry...

Wrap-up

This was a very long post... I would say it took more time to write the article than the actual development work! 😅
I hope the tutorial is clear and useful for someone. And, as usual, if you have questions or you need more information
about a specific part, don't hesitate to leave a comment! 🙃

❤️ Thanks for reading it! ❤️

#LearnedToday: ":empty" pseudo class

Daniel Zotti — Fri, 13 Oct 2023 09:52:57 +0000

I just bumped into this Kevin Powell's video and it blew my mind! 😱

😠 How many times did I have to use JavaScript to hide an HTML element just because it was empty?

😎 With the :empty pseudo class it became as simple as adding :empty to a selector!

#task-list:empty {
  display:none;
}

This code means that the element with ID task-list will be hidden if it has no children. Children can be either element nodes or text (including whitespace!)

Demo

🧑🏻‍💻 As usual, I created a simple stackblitz project (a todo list app) to test this feature!

This is the basic structure:

and thanks to CSS :empty pseudo class, in case there's no tasks, I could easily move from this:

...to this!

How cool is that?! 😍
CSS is getting easier to use every day! In my opinion, studying it and keeping up to date with its new features can definitely make our work easier!

P.S. the funny thing is that :empty pseudo class is supported since Chrome 4 and IE9 😅

#LearnedToday: Web Workers

Daniel Zotti — Thu, 21 Sep 2023 10:22:37 +0000

Web Workers are a powerful feature in modern web development, enabling JavaScript to run concurrently in the background without blocking the main user interface thread.

In the traditional web development model, JavaScript code executes on the same thread as the user interface. This means that computationally intensive tasks, such as complex calculations, data processing, or network requests, can significantly slow down the user experience. Users may encounter unresponsive web pages or even complete freezes when a script monopolizes the CPU.

Web Workers address this problem by introducing a multi-threaded approach to JavaScript execution within the browser. With them, you can create separate threads that run concurrently alongside the main application thread.

Key points to understand Web Workers

File: Web Workers are just JavaScript files loaded by the main thread.
Concurrency: Web Workers provide true concurrency by executing JavaScript code in parallel.
Isolation: Each Web Worker runs in isolation from the main thread and other workers. They have their own global scope, which means they cannot directly access variables or functions defined in the main thread or other workers.
Communication: Communication between workers and the main thread is achieved through message passing (postMessage), ensuring data integrity and safety.
Background Processing: Web Workers are ideal for offloading resource-intensive operations like data parsing, image processing, or lengthy computations to prevent them from affecting the user experience.
No UI Access: Web Workers are unable to access the Document Object Model (DOM) directly, as they run outside the main thread. This limitation ensures that UI operations remain exclusive to the main thread, preventing potential conflicts and race conditions.
Browser Support: Web Workers are widely supported in modern browsers, making them a viable technology for a broad range of web applications. However, it's essential to check browser compatibility when implementing a Worker in your projects.

Ok, too much chat... Let's dive into the code as usual!

Web Worker support

First of all. We need to make sure that the browser supports Web Workers. We do this by checking if the Worker instance is present in the window object:

// index.js
if (!window.Worker) {
  console.log(`Your browser doesn't support Web Workers!`);
  return;
}

Web Worker creation

To use a Web Worker, simply create a new instance of a Worker, passing the URL of the associated file as an argument:

// index.js
const worker = new Worker('./worker.js');

Prepare the communication with the Web Worker

To "connect" main thread with the Web Worker we need to listen to the messages the Web Worker might send using its exposed methods:

// index.js
worker.onerror = (error) => {
  // when an error occurs in the worker
};

worker.onmessage = (event) => { 
  // everytime a worker use `postMessage` to send a message
}

worker.onmessageerror = (event) => { 
  // e.g. the message from the worker can't be serialized
}

Communication

In order to communicate with the web worker from the main thread, we just push a message using the postMessage method of the Worker:

// index.js
worker.postMessage({ message: 'Do something'});

...and inside the worker we listen to the message and read the data property:

// worker.js
addEventListener('message', function (event) {
  console.log(event.data); // { message: 'Do something'}
})

We can do the other way round by calling the postMessage inside the worker:

// worker.js
postMessage({ message: 'A message from the worker!'});

...and react to the message event in the main thread using the onmessage method of the worker instance:

// index.js
worker.onmessage = (event) => { 
  console.log(event.data); // { message: 'A message from the worker!'}
}

The whole code

Let's recap the basic code for the two files.

Main thread

// index.js
if (!window.Worker) {
  console.log(`Your browser doesn't support Web Workers!`);
  return;
}

const worker = new Worker('./worker.js');

worker.onerror = (error) => { ... };

worker.onmessage = (event) => { ... }

worker.onmessageerror = (event) => { ... }

worker.postMessage({ message: 'Do something'});

Web Worker

// worker.js
addEventListener('message', function (event) {
  if(event.data === 'Do something') {
    postMessage({message: `Ok, I'll do!`});
  } else {
    console.log(`I won't do anything...`);
  }
})

NB: postMessage is the only way the Web Worker can comunicate with the main thread and viceversa!

Demo

And as always, can't miss the demo and open source project on GitHub!

The project guides the user through a series of steps to follow, and the idea is to show the difference between a long-running task performed by the main thread (which blocks the UI) and one performed by a web worker.

NB: Performances are the same but with the Web Worker the UI is still usable.

To simulate a long-running task I used this simple code:

function longTask(max) {
    let sum = 0;
    for (let i = 0; i < 5_000_000_000; i++) {
        sum += i;
    }
    return sum;
}

#LearnedToday: Notifications in Browsers

Daniel Zotti — Fri, 15 Sep 2023 10:34:09 +0000

How nice would it be to have notifications in browsers like a regular mobile application?

Well, we already have it!

There are just a couple of concepts we need to master before start:

Browser support
Notifications permissions
Service Workers

Does the browser support it?

First of all, we need to check if the browser supports the Notification and the serviceworker features. Without these services we cannot manage notifications!

It is as easy as typing:

if (!('serviceWorker' in navigator)) {
  throw new Error('No Service Worker support')
}
if (!("Notification" in window)) {
  throw new Error('No Notification support')
}

NB: This applies to any browser feature.

Notifications permissions

In order to activate notifications on a specific device, the user must be asked if they want to receive notifications.

Notification.requestPermission()

An alert will pop up in the browser asking the user to respond...

...and our application must handle the user's choice in this way:

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    // The user clicked on "Allow" button
    // Browser CAN send notifications
  }
  else if (permission === "denied") {
    // The user clicked on "Block" button
    // Browser CANNOT send notifications
  }
  else if(permission === "default") {
    // The user closed the popup
    // we can ask for permissions again if we want!
  }
});

Okay, now we may be ready to send our first notification to the user, but first let's talk about ServiceWorker!

ServiceWorker

According to MDN Service Workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available).

Practically speaking, a ServiceWorker is a JavaScript file that runs in the background in a separate thread. It must be registered (installed) first, and then it can talk with the application (NB: https is mandatory!)

Why do we need a ServiceWorker to send notification? Because it runs in the background even if our application page is not open in the browser! And, above all, because the SerciveWorkerRegistration has a method called showNotification which is used to displays the notification on the device.

Send a notification

We just have to wait until the service worker is ready and call the method by passing the notification title as the first parameter.

navigator.serviceWorker.ready.then((swRegistration) => {
  swRegistration.showNotification("My First notification!");
})

These few lines of code will show the notification:

Notification properties

The showNotification method has a second argument that accepts an object of options which allows us to customize the notification:

icon: an URL representing an image that will be displayed next to the notification title
image: an URL representing an image that will be displayed as a content of the notification
actions: an array of actions that will result in a list of clickable buttons below the notification content
- action: a unique string representing the ID of the action
- title: a human readable string to be displayed
- icon: an URL representing the image next to the title
body: A string representing an extra content to display within the notification.
badge: a string containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar.
data: Arbitrary data that you want to be associated with the notification
tag: An ID for a given notification that allows you to find, replace, or remove the notification using a script if necessary.
silent: if true, no vibration or alert sound
vibrate: an array of numbers representing the vibration patter
...and many more!

"Come back" notification

Let's try creating together a "come back" notification that shows up when the application lose focus and hides automatically when it is on focus again. It also takes the user directly back to the application if the notification is clicked.

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.serviceWorker.ready.then(async registration => {
      await registration.showNotification("Come baaaaack!", {
        body: `Click here and come back to the website!`,
        silent: true,
        tag: "come-back", // required if silent is set to "true"
      });
      registration.addEventListener('click', (e) => {
        e.preventDefault();
        window.parent.focus();
      });
    });
    } else {
      navigator.serviceWorker.ready.then(registration => {
        registration.getNotifications({
          tag: 'come-back'
        }).then((notifications) => {
          notifications.forEach(n => {
            n.close();
          })
        });
      })
    }
});

Notifications without ServiceWorker

"What?! You just said that ServiceWorker are required to send notification!!"
I know... There is an alternative method which doesn't involve ServiceWorker actually, but it relies on a deprecated feature! The window.Notification constructor is not marked as deprecated, however, it’s marked as deprecated in Chrome on Android, thus it won't work on mobile devices! This is why I preferred to use the ServiceWorker method directly!

I'm going to write an example because it might be interesting for those who don't deal with mobile browsers!

"OLD" way: Notification constructor

Let's re-create the "come back" notification using the Notification constructor.

let comeBackNotification;
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    comeBackNotification = new Notification("Come baaaaack!");

    comeBackNotification.addEventListener('close', (e) => {
      console.log("Notification CLOSED!", e.target.data)
    });

    comeBackNotification.addEventListener('click', (e) => {
      console.log("Notification CLICKED!", e.target.data)
      e.preventDefault();
      window.parent.focus();
    });
  } else { 
    comeBackNotification.close();
  }
})

Good to know

Starting in Chrome 49, notifications don't work in incognito mode.
notification.vibrate doesn't work in Android > 8.0
sw.js, if we don't need it, it could be just an empty file!
Chrome for Android requires the call to be made with a service worker registration
iOS requires website to first be added to the Home Screen

Wait Until

One of the things to understand about service workers is that you have little control over when the service worker code is going to run. The browser decides when to wake it up and when to terminate it. The only way you can tell the browser to wait, is to pass a promise into the event.waitUntil() method. With this, the browser will keep the service worker running until the promise you passed in has settled.

// file: `sw,js`
self.addEventListener('push', function (event) {
  const promiseChain = self.registration.showNotification("Push Notification");
  event.waitUntil(promiseChain);
})

Push Notifications (from remote server)

The essential difference between local notifications and push notifications is simple:

Local notifications are scheduled by an app locally and are delivered by the same device.
Push notifications are sent by a remote server which sends these notifications to devices on which the app is installed.

I won't talk about the server side part, thus I'm going to explain how to simulate a Push Notification using Chrome DevTools.

Simulate a Push Notification with Chrome DevTools:

Open Chrome DevTools
Go to Application tab
Select Service Workers on the left
Write a custom message on the right anche click Push

Demo

As usual, I created a demo and a GitHub project

While running the demo, check the console for more information.

#LearnedToday: Drag&Drop API

Daniel Zotti — Fri, 08 Sep 2023 17:58:04 +0000

👀 I have never used drag&drop functionality with vanilla JavaScript.

In the enterprise applications I work on every day, I usually rely on frameworks such as Angular, React, or Vue that provide easier ways to handle it and, in addition, solve the classic problems that I would have to handle by hand.

💡 That's why I wanted to give it a try, developing a very basic project in HTML and JS.

Here, briefly, is what I figured out:

In order to activate the dragging functionality on a element, it must be set the draggable attribute on it.

<div class="item" draggable="true">Drag me</div>

If we need to add some actions (e.g. save element's data for future purpose) once the element is "grabbed", a listener to the dragStart event must be added to it.

<div 
  id="my-item"
  class="item"
  draggable="true" 
  ondragstart=handleDragStart(event)
>Drag me</div>

<script>
handleDragStart(e) {
  console.log('You are dragging ', e.target.id)
}
</script>

If we want to drop the selected element somewhere, we need to create one or more drop zones in the HTML. In order to create them, we need to make the target element listen to dragOver and drop events.

<div 
  class="dropzone"
  ondrop="handleDrop(event)"
  ondragover="handleDragOver(event)"
>
  Drop the dragging element here!
</p>

<script>
handleDrop(e) {
  e.preventDefault(); // prevent default action (e.g. open as link for some elements)
  // CODE HERE (e.g. append element to the drop zone)
}
handleDragOver(e) {
  e.preventDefault(); // Required to allow Drop event
}
</script>

That's pretty much it!

Demo

As usual, I created a stackblitz project where you can use drag&drop to switch placements in a podium and choose which is the best 🏆 framework/library among Angular🥇, Vue🥈, and React🥉! (Try to guess what my ranking is 😁)

And here is the link to the demo if you just want to play with it!

P.S. I did not use the dataTransfer property, but I will create a more "data-driven" demo to explain this function as well in the future.

#LearnedToday: FileSystemAccess API

Daniel Zotti — Tue, 29 Aug 2023 08:52:00 +0000

🤔 What if you could manage the device's files with a web app frontend?

😱 Well, YOU CAN ALREADY DO IT!!!

📚 The FileSystemAPI allows you to read, write and manage the device files and folders.

😍 This is what we needed to finally get rid of desktop apps once and for all! Combined with PWA, Push Notification, ServiceWorker and WebWorker functionalities, we are now able to create an "installable desktop web app".

😢 Unfortunately, not all that glitters is gold... It’s currently supported only by Chromium browsers, but I'm sure it will be supported by the other browsers in a short time 💪

Demo project

👨‍💻 I created a vanilla JavaScript opensource project to test FileSystemAPI features like:

reading file properties
reading a directory with its children recursively (with a little help of AsyncGenerators and AbortController for huge directories)
media preview (with the help of createObjectURL to create the URL for src attribute of <img> and <video>, from the ArrayBuffer)
create/edit/delete a text file.

🔗 Demo (remember to use Chrome!)

❓ Did you know about FileSystemAPI? In my opinion it is one of the most revolutionary APIs of recent years!

#LearnedToday: EyeDropper Browser API

Daniel Zotti — Mon, 21 Aug 2023 12:02:32 +0000

How to open a color picker natively in the Browser

const eyeDropper = new EyeDropper();

try {
  const colorSelectionResult = await eyeDropper.open(); // It will wait until the user selects a color

  // This part is executed once the user has selected the color
  console.log(colorSelectionResult)
}
catch(ex) {
  // User has canceled the selection
}

The result is an object and this will be the result:

> { sRGBHex: "#433633" }

Docs

If you want to explore other features of EyeDropper API you can browse
the MDN Doc.

Browser support

Note: this API is marked as "experimental" as of 20th August 2023 and it seems to work on last versions of Chrome
and Edge only.

If you want to check whether your browser supports this feature, you can
browse caniuse.com to have more details.

Demo

Theory is useless without practice, thus I created
a stackblitz project to show how it works!

#LearnedToday: Pushable 3D button

Daniel Zotti — Fri, 18 Aug 2023 10:31:22 +0000

🏖 I've been on vacation for almost 2 weeks and I think I only turned on my PC to write last week's post.... And so I will do this week!

😎 I focused on something "lighter" like CSS and I created a configurable & responsive 3D button using a mixture of box-shadows, isolation: isolate, :before and :after pseudo elements and a bit of math, without using additional elements but a button tag!

💪 Actually, I used SCSS harnessing the power of mixins to make it reusable and configurable. At the moment, you can decide the min/max/viewport based size and you can change the aspect ratio, depth, color and font size.

⚠️ This is a very first version and I'm sure the calculations can be simplified, but I'd say it's working decently 😎

⏱ You can see it in action in the Doomsday project demo which is a sort of countdown to the doomsday.

📰 I'll add the link to a Codepen project where you can find the SCSS code to play with it.

#LearnedToday: Ambigrams

Daniel Zotti — Thu, 10 Aug 2023 14:08:28 +0000

Vacation mode: on!

As of this Monday, I am on vacation 🏖 and will return to work as soon as early September.... I don't think I've ever taken a full month off in my entire life, not even for my honeymoon!!

Anyway, I'm trying to get away from the 💻 PC for a while and these first few days of vacation I went to the beach in Trieste on skates ⛸ (yes, just like in the 90's! 🕺), started reading a book 📖 that has nothing to do with programming, and played a game of Pickleball 🏓 with a friend of mine (if you don't know what Pickleball is don't worry, I didn't know what it was until yesterday either!).

Anyway, while immersed in my vacation, I would like to share a graphic design project of mine and talk about something that may not be so well known to many: AMBIGRAMS.

To make it short and easy, they are graphically symmetrical words; in this case, I created an ambigram of my name! 🤓

You can see a demo and find additional information about ambigrams on my website. 🙃

And if you want to know how I developed the animation on scroll 👨‍💻, I'll share a link to the open source code.

And you? Did you know about ambigrams? Have you created or simply seen one with your name?

DEV Community: Daniel Zotti

#LearnedToday: Object.groupBy()

Example

The initial Array

The good OLD way (with reduce)

The MODERN way

The result

Demo

Voxxed Days Trieste (May 30, 2024)

Is 2 weeks enough time to recover from an event?

#LearnedToday: Slider in pure CSS

Main concepts

The idea

Demo

How we built an app in less than 5 days with Qwik, Supabase and Vercel

Fortitude Convention Companion App

Thursday 14th September

Tuesday 19th September

Friday 22nd September

Project creation

Google Authentication setup

Saturday 23rd September

The team

App Features

Wireframe

Database

Users

Agenda

Games Results

Config

Layout

SCSS file structure

Monday 25th September

Supabase CLI

Supabase and TypeScript

User filter

Authentication session

Tuesday 26th September

Time manager

Minimal UI kit

First deploy on Vercel

Wednesday 27th September

Time for Real Time!

hooks for realtime

Manage score

Almost done

Thursday 28th September

Start/Stop Fortigames

Winner page

Last moments

Final thoughts

Next steps / Improvements

The Code

The Demo

Wrap-up

#LearnedToday: ":empty" pseudo class

Demo

#LearnedToday: Web Workers

Key points to understand Web Workers

Web Worker support

Web Worker creation

Prepare the communication with the Web Worker

Communication

The whole code

Main thread

Web Worker

Demo

#LearnedToday: Notifications in Browsers

Does the browser support it?

Notifications permissions

ServiceWorker

Send a notification

Notification properties

"Come back" notification

Notifications without ServiceWorker

"OLD" way: Notification constructor

Good to know

Wait Until

Push Notifications (from remote server)

Simulate a Push Notification with Chrome DevTools:

The good OLD way (with `reduce`)