DEV Community: Alba Silvente Fuentes

Official deprecation announcement Storyblok Vue 2 & Nuxt 2 SDKs

Alba Silvente Fuentes — Mon, 08 Jul 2024 10:00:00 +0000

Dear community,

We want to announce some changes to the Storyblok Vue 2 SDK & Storyblok Nuxt 2 SDK.

The future of the Vue Ecosystem: Vue 2 & Nuxt 2 Deprecation

Following the official end-of-life (EOL) for Vue 2 on December 31st, 2022, we will end Storyblok Vue 2 SDK support by August 31st, 2024.  During this extended support period, we will be solving bug fixes and supporting customers and community members. After August 2024, we will discontinue all support for this package, and all the efforts will be centered on the repository for the latest version of Vue (3.x): Storyblok Vue SDK.

For Nuxt 2 users, the official EOL is June 30th, 2024. From the Storyblok Nuxt 2 SDK, the support will continue until December 31st, 2024. After 2024, we will stop maintaining it, and the official Nuxt (3.x) SDK will be Storyblok Nuxt SDK.

With these changes, we want to ensure that our open-source SDKs for the Vue ecosystem are in sync with the latest trends.

For detailed insights into the Vue 2 & Nuxt 2 depreciation, the latest changes, and technical recommendations, we recommend exploring the following resources:

Deprecation pages for both frameworks: official Vue 2 deprecation and official Nuxt 2 deprecation.
Migration guides: official Vue 3 migration guide and official Nuxt 3 upgrade guide.

Migrating to Vue 3 & Nuxt 3 Storyblok SDKs

1 - New packages names

For Vue projects, instead of installing the package by npm i -D @storyblok/vue-2, you should now run npm install @storyblok/vue
For Nuxt projects, the old way was npm install @storyblok/nuxt-2. Now you should run npx nuxi@latest module add storyblok

2 - How to register them in your project

For Vue, you should still register the plugin at main.js:

The old way in Vue 2 SDK:

import Vue from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue-2";
import App from "./App.vue";

Vue.use(StoryblokVue, {
  accessToken: "<your-token>",
  use: [apiPlugin],
});

New way at Vue SDK (v3.x):

import { createApp } from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
});

For Nuxt, you should still register the module inside nuxt.config.js:

The old way in Nuxt 2 SDK: (check config options available)

{
  buildModules: [
    // ...
    ["@storyblok/nuxt-2/module", { accessToken: "<your-access-token>" }],
  ],
  // or set the accessToken as publicRuntimeConfig (take priority if both are set) 
  publicRuntimeConfig: {
    storyblok: {
      accessToken: process.env.STORYBLOK_ACCESS_TOKEN;
    }
  }
}

New way at Nuxt SDK (v3.x): (check config options available)

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  modules: ["@storyblok/nuxt"],
  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  }
});

3 - Linking components between Storyblok Block Library and your Nuxt project

In Nuxt 2, the folder used was ~/components/storyblok; for Nuxt 3, by default is ~/storyblok, but you can change it as stated in the Storyblok Nuxt SDK README.

The rest can be used and implemented the same way as in Vue 2 & Nuxt 2 SDKs.

Always consider that the preferred way of using the composables available inside the SDKs is using .

If you have any questions or concerns not addressed in this communication and provided links, please submit a support ticket, and we will be happy to provide additional details.

Looking forward to a future of innovation and collaboration!

Warm regards,

The Storyblok DevRel Team

Storyblok Nuxt 3 news 🗞

Alba Silvente Fuentes — Fri, 24 Feb 2023 17:21:39 +0000

Hi, community 👋

We have some exciting news to share with you about the Storyblok Nuxt 3 ecosystem! 🎉

SDK Updates

Our Nuxt 3 SDK (@storyblok/nuxt) has removed axios and upgraded to the Nuxt 3 stable version 🎉

To take advantage of this update, install the latest version or update the SDK to v5.1.0.

The SDK now uses the Fetch API under the hood. If your environment doesn't support it, install a polyfill like isomorphic-fetch. More information can be found on the storyblok-js-client README.

As @arisa_dev mentioned in our last article, we are looking forward to your feedback about the SDKs and any ideas you may have to keep improving them. 🚀

Thanks to my colleagues @alexjoverm, @robertobutti, and @manuelschroederdev for supporting me during this process.

New article on the Ultimate Tutorial series

Yesterday, we also released part 6 of our Ultimate Tutorial series, which covers managing multiple languages in your Storyblok Nuxt 3 site. Check it out at Manage Multilingual Content in Storyblok and Nuxt.

If you haven't followed the previous articles and want to learn how to integrate Storyblok into your Nuxt 3 project, you can check out our first part of the Ultimate Tutorial series: Add a headless CMS to Nuxt 3 in 5 minutes.

Let's build better websites together! Give us your opinion, and we will grow thanks to you 🫂

Article preview: A Guide To Image Optimization On Jamstack Sites

Alba Silvente Fuentes — Tue, 20 Dec 2022 16:58:12 +0000

This November, I published an article about Image Optimization On Jamstack Sites in Smashing Magazine. In this recap, I want to tell you what it is about, the sections and concepts covered in it, and show you the demo used to demonstrate the theory explained.

Who is this article intended for?

For developers and designers who want to improve the quality and performance of their projects containing images.

Anyone who wants to learn new image optimization techniques, reaffirm their knowledge on the subject, or catch up on the latest trends.

What sections make up this article?

The article comprises 5 sections covering theory, problems in working with images, and their theoretical and practical solutions, ending with a step-by-step case study.

Introduction

It begins with a brief introduction to the importance of web performance today, its relationship to images, and how images impact the health of Jamstack sites.

Fixes to common problems

Then, we present the most common problems when using images in our projects and what would be the optimization technique or theoretical solution for each one of them.

This section talks about the types of compression, the use of next-generation formats such as WebP and AVIF, the mandatory definition of width and height attributes in img and source tags, the optimization of images by device, resolution, and size, the lazy or eager loading technique, and the use of server and client cache.

The benefits of using an Image Service CDN

Next, we show a solution to each of the problems mentioned in the previous section by simply using an image CDN and discovering its simplicity and the advantages, flexibility, and scalability that it provides to our projects.

Case study: Image component in a Jamstack site

And with all the theories presented, it only remained to show an example project of how all these techniques could be carried out using Storyblok as a Headless CMS and image CDN provider. In this part, we present a static site generated by Nuxt 3, a custom image component created with Vue 3 and script setup, although it could be implemented in any other technology.

Resources

Storyblok space (Duplicate): https://app.storyblok.com/#!/build/172320
GitHub repository: https://github.com/Dawntraoz-Storyblok/sb-pokemon-gallery
Live site: https://sb-pokemon-gallery.dawntraoz.com/

Conclusions

Lastly, we raise the importance of constant work on image optimization and maintenance, naming resources that allow you to keep up with the latest trends, testing the status of your images, and providing tips for creating standards in your company.

Official article: If you are interested in the topic and want to know more, read the original article A guide to image optimization on Jamstack sites.

How can this article help you?

This article can help you establish a clear vision of what you need to take your project's images to another level and how to do it in a scalable way. You will learn how to maintain their quality while allowing the user to have the best experience, regardless of device or connection speed.

We would love to hear your feedback on the article. Feel free to contact us through any channel or speak directly to the author at Alba (@dawntraoz).

A content creator using Figma

Alba Silvente Fuentes — Sun, 12 Dec 2021 19:21:07 +0000

In this post, I want to tell you about my experience as a content creator using Figma. How I'm designing images and banners to share on social networks, online courses assets and even a printed business card.

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

A Front-end Developer using Figma

In it, I told about the basic concepts of Figma and my first experience with the tool. How I defined the design system for my website, what resources I used to define it, and how I created my first slides with the components of my design system.

If you are interested in reading it, here is the link: A front end developer using Figma.

Now we can start seeing how I have used Figma to create and share online content. Let's start!

Using Figma for social media

When you create tech content, you don't always start with a marketing background, which isn't necessary either. In my case, and I understand that could be the case of many content creators, I started creating articles because I wanted to have my own summaries of code and techniques that I had struggled with.

The reason for publishing it simply came about when I thought about making it public so that more people could find answers to their problems. And that's how the motivation to create my own blog and to make it evolve, little by little, started 🚀.

1. Social sharing card images.

The first thing I started designing to share online were the social media cards for every major page of my site: Home page, Projects, Talks & podcasts and Technical articles (my blog).

The image below is the card created to share my blog's URL.

To begin, I looked for the recommended frame size for images that are displayed when sharing a website on social networks, also known as Open Graph images, which was 1200×630. Then, I chose the equivalent frame in Figma called Facebook post.

Recommendation: Use images that are at least 1200×630 for the best display on high resolution devices.

With the frame picked, I started to build the base of all the cards and reuse the components of my design system.

First the top part, adding the logo and the URL of my website. Then I added the section with the main content using the heading component, some texts, and the logos of my titles.

And finally, at the bottom of the card, I used the label component to add my nick in any social network and the group of networks' logos I have under that nickname.

The purpose of these cards was to make the content of the page more eye-catching when sharing it online. The image below represents what it would look like if you share it on any social network, or messaging platform such as Telegram, Discord, Slack, …

2. Social banners.

When I started sharing the cards, I realized that they had nothing to do with the way I presented myself on my social media or professional platforms.

For that, I decided to take the same idea and implement it in banners for LinkedIn, Twitter, GitHub and Polywork. To do so, I simply reused the card but in different frame types, using Twitter Header for Twitter & GitHub, LinkedIn cover for LinkedIn & Polywork.

In this way, there is a match between the branding of my website and my socials. As you can see below, the banner on my Twitter profile looks like:

3. Instagram's artworks.

Once I got the hang of social media, I decided to start an Instagram account. A new format, totally different to how I used to share on Twitter, but I wanted to try it out and exploit my Figma design system a bit more.

Post.

My idea was to make small summaries of the articles already written on my blog and link to them. To do this, I decided to create Instagram posts with multiple images, and have the possibility to add up to 10 “slides”.

Each summary consists of a cover page, a brief description of the content with use cases, and a back cover with links to the article on the 3 platforms where it is published.

The image above shows an example summary for the article Alignment with Flexbox.

To keep the images of a single summary grouped together, I have defined an Auto Layout in horizontal mode with 120px of padding and 120px of spacing between items. And to define the size of the images to be posted on Instagram, each of the frames within this Auto Layout uses the Instagram Post frame (1080×1080).

Once the frames were created, to position the content within them optimally, I defined a 90px size grid called Instagram Grid and saved it in the Grid styles to reuse it in future posts.

Then I simply started adding the components that already existed in my design system and let my imagination run wild.

And finally, when I have finished creating the post, I select all the slides and export them in PNG format.

To see the possibilities of exporting, you can follow this guide to exports in Figma.
Grid composition (3 posts in 1 frame).

After uploading my first three summaries, I felt like giving a different format to the next one. It crossed my mind to define an image that would occupy the 3 squares of the Instagram grid. I had seen many people do this kind of composition before, and I wanted to create one of my own.

For this, I reused the previous Auto Layout and instead of adding 3 frames of 1080×1080, I added a frame of (1080×3)×1080. This way I was able to build it all together from the beginning and then cut it into the parts that compose it.

And after a few summaries and compositions, this is how my account's wall at @dawntraoz looks like:
Highlights.

As a bonus, when promoting the posts via Stories, I decided to store these Stories in Highlights and create icons in Figma to make them catchy.

For icons, I always use the iconic.app library because I find them simple and ideal for any use case. Go and have a look for yourself 🚀

Using Figma for online courses and workshops

In the previous section, I showed you the designs I created for personal use. In this section, however, although there is not much difference in the use of Figma, the designs will be for external projects that have wanted to count on me as a content creator.

1. Focus on Storyblok lessons.

Recently, I taught 3 lessons of the Focus on Storyblok course at Headless Creator. And although they always take care of saving and publishing the videos of the lessons, I took care of the documentation.

To show the documentation to the students I created an open-source project published on a subdomain of my website, focus-on-storyblok.dawntraoz.com, and for each lesson I decided to create an Open Graph image.

Now, whenever I share any of the lessons on social media, you can see what it's all about at a glance!

2. “How to migrate from WP to a Headless CMS” workshop.

I recently gave a workshop based on the article How To Migrate From WordPress To A Headless CMS, which I published in July 2021 at Smashing Magazine. To make the content of the workshop, I came up with the idea of creating slides that represented the two brands, my personal brand and the Smashing Magazine one.

Combining my components with my colors and theirs, my typography with their logo and the inclination of the square shapes with the angle used in their logo, I got the format I wanted!

What do you think, do you think it looks good?

Referring again to my first article on Figma, to export the slides in an interactive format, I made use of the Pitchdeck Presentation Studio plugin.

Using Figma for articles artworks

One of the things that excites me most about Figma is that, one minute you're creating an article about it, and the next minute you're using it to create the artwork for that article.

You know the phrase 'All roads lead to Rome', well in this case 'All creations lead to Figma'.

A proof of this, is the artworks in the article Positioning elements with grid on my personal blog. They were all created in Figma, and one example of this is the image below:

Using Figma for selling a Notion Template

This use case is a bit different from the rest, because it doesn't talk about content creation, but about product design. Just sometimes it goes hand in hand if you want to monetize what you do.

One day, after seeing a couple of friends launch their first products, I decided to create my own, just to try it out. That's how I started to package the pages and templates I created for personal use in my Notion space, and begun the selling process.

Although it was a whole new world for me, I managed to find this video on how to sell Notion templates which gave me some useful tips and platforms, such as Gumroad, where I now sell my product.

Publishing on Gumroad requires creating exemplary cover images of the product's content and a good description of what it includes. To help you with this, Gumroad has a help section where they give you all the tips you need to produce a good product.

And, of course, I decided to use Figma to bring those covers to life. Which, according to Gumroad, had to be in two specific formats: 1280×720 and 600x600.

You can see the specification in this guide: Adding a Cover Image.

And that's what I did, I created 2 frames of those sizes and I tried combinations until I found the definitive covers:

These are the covers of the Notion template DEVniverse.

Using Figma to create a business card (physically printed)

And last, but not least, as the face-to-face events were starting to come alive again, I really wanted to design my own business card, and that's what I did 🙈

The first thing I did was to look for a printing company near me and follow a guide with formatting tips. I found one with a guide on How do you design a business card?, and from it, I extracted the aspect ratio of my business card: ~1.5 (650×428)

Something to keep in mind when selecting our brand colors:
As the color gamut of the RGB system is larger than that of CMYK, some RGB colors cannot be reproduced in CMYK. Therefore, if you send a file in RGB format for printing, it will not come out as expected.

In my case, the printed result was as in the image below, with a glossy finish on the front and a matte paper on the back, so people can write any necessary notes with a pen.

And these are all the fantasies I wanted to tell you, I hope it will be useful for you in the future or that it will inspire you to embark on new personal projects!

Useful plugins

To finish with resources, here are the plugins that I found useful during my adventure:

Code Highlighter

For highlight your code, forget about using an external website as Carbon, you can now make your own code component inside Figma and used it to share your tips online!

👉 Figma Code Highlighter

I used it mostly for Instagram summaries and the design of the articles' page of my website.

TinyImage Compressor

Export compressed JPG, PNG, SVG, WebP, GIF, WebM, AVIF and PDF image files from Figma, or downsize and compress image fills in your file for faster performance.

👉 TinyImage Compressor

I always find it useful, I highly recommend it to have more export options than Figma's default ones.

Figmoji

Simply select the Twitter style emoji you want, and Figmoji will add the SVG of the selected emoji.

👉 Figmoji

It's perfect to spice up Instagram artworks and not have the emojis in text, but in a high quality format like SVG!

Extra: Nails artwork

And well, just for laughs, I created my own technological nails on Figma xD

And this was the result of doing them myself without any previous knowledge of aesthetics:

Now yes, I hope you found it useful or at least that entertained you for a while. Thanks for reading me and if you have any feedback you can reach me on any social network as @dawntraoz 💜

Happy Christmas to you all! 🎄

Positioning elements with Grid

Alba Silvente Fuentes — Tue, 27 Jul 2021 09:37:25 +0000

In this post, I will show you the Grid basics and how I use it to place the content in common situations.

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

What is Grid?

Grid (CSS Grid Layout) is defined as a tool to divide a page into main regions or to define the relationship in terms of size, position and layer.

The Grid layout is compatible with the vast majority of browsers, some like Opera Mini and IE do not support it, in Can I use you can see what properties are supported by which browsers.

It is also known as the two-dimension layout system that provide us with the best alternative to the tables we used in the past, and has taken our user interfaces to the next level.

The grid layout allows us to align the elements in columns and rows, space the elements from the container element, position the child elements by overlapping them or forming layers, among other features.

This facilitates the creation of dynamic and responsive layouts, as we will see throughout the article.

Where to learn more?

Although in this article we will see the initial concepts and a couple of use cases, tips and tricks, I recommend that if you are interested in knowing the ins and outs of Grid, you should take a look at these resources.

In these courses and articles they explain Grid, show you different use cases and the little details they have learned from experience.

Understanding CSS Grid Series by Rachel Andrew at Smashing Magazine.
Learn CSS Grid course by Wes Bos (free).
A Complete Guide to Grid by Chris House at CSS-Tricks.

Grid properties

Now that you know the Grid concept, we are going to see the properties we need to shape our layout, distinguishing between the properties of the parent or child element.

Being the parent element, the one that contains one or more child elements that will be sized, aligned, layered and redistributed by the available space. Let's see an example:

<div class="parent grid">
  <p class="child grid-item"></p>
  <p class="child grid-item"></p>
  <span class="child grid-item"></span>
</div>

The parent will be in charge of defining the grid and the children will be in charge of positioning or aligning themselves in specific places, if necessary.

Parent (grid container) properties:

display - specifies the type of rendering box of an element. With the value grid, every direct child will be in a grid context.

  display: grid;

grid-template - a shorthand property for defining grid columns, rows, and areas at once.

  grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas grid-template-rows / grid-template-columns

But let's take a look at each property individually to see how to define them.

grid-template-rows - specifies the line names (optional) and track size of the grid rows (horizontal tracks).

  grid-template-rows: none|[line-name] track-size [line-name-2];

grid-template-columns - specifies the line names (optional) and track size of the grid columns (vertical tracks).

  grid-template-columns: none|[line-name] track-size [line-name-2];

A grid track is the space between any two lines on the grid. As we can see in the image below, between linename and linename2 we have defined a column track of 1fr in size.

To give value to the size of each row/column track, we must specify the values separating them by spaces and using different units:

By common units: length (px, rem, ...), percentage (%) and fr.

The fr unit represents a fraction of the available space in the grid container.

By grid items content: min-content, minimum size of the content, max-content, maximum size of the content and auto, similar to minmax(min-content, max-content).
By functions:
- minmax(min-size, max-size) - It defines a size range, greater than or equal to min, and less than or equal to max.
- repeat(n-columns, track-size) - It allows defining numerous columns that exhibit a recurring pattern in a more compact form.
- fit-content(track-size) - It uses the space available, but not less than the min-content and not more than the max-content of the children.

/* Common units */
grid-template-columns: [linename] 1fr [linename2] 2fr [linename3] 1fr [linename4];
grid-template-rows: [linename] 1fr [linename2] 1fr [linename3] auto [linename4];

/* Grid items content */
grid-template-columns: 1fr max-content 2fr;
grid-template-rows: 1fr min-content max-content;

/* Functions (& combined) */
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(60px, 1fr) fit-content(75%);

grid-template-areas - specifies named grid areas by setting the grid cells and assigning names to them.

No grid item is associated to these areas, but any child element can reference any area with the grid placement properties (grid-row/grid-column, grid-area), which we will see below.

  grid-template-areas: none|.|area-strings;

The best way to understand this property is to exemplify it, and you will see it clearly.

  grid-template-columns: 300px repeat(3, 1fr);
  grid-template-rows: minmax(60px, 1fr) 4fr minmax(60px, 1fr);
  grid-template-areas:  "sidebar header  header  header"
                "sidebar content content content"
                    "sidebar footer  footer  footer";

The defined strings in grid-template-areas are the row tracks, and the times that a name is repeated is the columns that occupies that area in that row. As you can see in the image below, the header occupies 3 columns and 1 row:

grid-auto-columns - specifies the size of an implicitly created (auto-created) grid column track.

By definition, if we haven't explicitly defined in grid-template-columns the size of a column track where a grid item has been positioned, implicit grid tracks are created to contain it.

  grid-auto-columns: implicit-tracks-size;

The size unit can be any of the ones we have used for grid-template-columns and grid-template-rows.

  grid-template-columns: 300px;
  grid-auto-columns: 1fr;

grid-auto-rows - specifies the size of an implicitly-created grid row track.

  grid-auto-rows: implicit-tracks-size;

As grid-auto-columns, we will use any size unit for the implicit row tracks:

  grid-auto-rows: 6rem;

grid-auto-flow - controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid (we can think of it as the flex-direction of grid).

  grid-auto-flow: row|column|dense|[row|column] dense;

While row and column, we can guess where the children of the grid will be placed:

row placing the items in the available horizontal track, if the current row becomes full then a new row will be started.
column in the available vertical track, once the items have filled all the rows in that particular column, then a new one will be created.

Instead, dense tries to fill in the gaps earlier in the grid. In the image below, you can see how the third element (blue) is placed in the space left between the first and second element.

WARNING - grid-auto-flow: dense; can cause items to appear visually out of order, causing accessibility problems.

gap - sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.

  gap: row-col-gap|row-gap column-gap;

(row-col-gap) As in padding, if we specify a single value it will be set for both row and column.

row-gap - sets the size of the gap in y-axis, between row tracks.

  row-gap: 20px;

column-gap - sets the size of the gap in x-axis, between column tracks.

  column-gap: 5%;

Child (grid item) properties:

grid-row - specifies where a child is placed within the grid row tracks and how much it occupies.

It can be a line (placed in 1 row), a span (placed in more than 1 row), or auto (original placement), thereby specifying the inline-start and inline-end edge of the grid area it occupies.

  grid-row: grid-line|grid-row-start / grid-row-end;

Let's see what possibilities we have to define the start or end of the child item with the *-start and *-end properties.

grid-row-start - specifies a grid item’s start position within the grid row.

  grid-row-start: [number|name]|span [number|name]|auto;

line: number to refer to a numbered grid line, or name to refer to a named grid line.

span [number|name]: the child item will occupy the number of grid rows provided, or until it reaches the line with the specified name.

auto: automatic placement on the original position, with a span of 1.

  grid-row-start: span 2; /* The item occupies 2 rows */

grid-row-end: specifies a grid item’s end position within the grid row. The values that can be specified are the same as for grid-row-start.

  grid-row-end: number|name|span [number|name]|auto;

Combining both would look like:

  grid-row: span 2 / 5; /* Fit 2 rows and end in the numbered line 5 */

grid-column - specifies where a child is placed within the grid column tracks and how much it occupies. Same as grid-row but this time with the vertical tracks.

  grid-column: grid-line|grid-column-start / grid-column-end;

A shorthand for the CSS properties:

grid-column-start - specifies a grid item’s start position within the grid column by specifying a line, a span, or auto.

  grid-column-start: [number|name]|span [number|name]|auto;

grid-column-end - specifies a grid item’s end position within the grid column, also by specifying a line, a span, or auto.

  grid-column-end: [number|name]|span [number|name]|auto;

grid-area - specifies where a child is placed within the grid and its size.

Its value can be expressed as a shorthand of grid-row-start / grid-row-end / grid-column-start / grid-column-end or with the name of the area created in grid-template-areas.

  grid-area: named-area|grid-row-start / grid-row-end / grid-column-start / grid-column-end;

Let's see a simple example for each case:

  /* Given grid-template-areas: "content content sidebar"; */
  grid-area: content;

  /* Specifying line numbers:
  grid-row-start: 1
  grid-column-start: 1
  grid-row-end: auto
  grid-column-end: 3
  */
  grid-area: 1 / 1 / auto / 3; /* OR grid-area: 1 / span 2; */

And these would be the properties that will help us to define the structure of our grid and position its elements individually. Now let's see how to align the elements in the same way, globally or from themselves.

Alignment properties

Whenever we want to align our layout elements, which are located in cells, we will have to use different properties from the parent but sometimes also from the children, depending on their behavior.

A grid cell is the smallest unit on a grid. Once a grid is defined as a parent, the child items will lay themselves out in one cell each of the defined grid.

Let's see the possibilities we have to align our content by the container or child item.

Parent (grid container) properties:

place-items - allows you to align child items along the block (y-axis/column) and inline (x-axis/row) directions at once. A shorthand for align-items and justify-items.

  place-items: align-items justify-items;

To see the values that can be defined, let's take a look at each one of the properties:

align-items - specifies the alignment of grid items on the block direction (y-axis). It sets the align-self value on all child items as a group (we will see this property in the child properties section).

  align-items: normal|center|start|end|stretch;

center causes the elements to be aligned to the center of themselves (grid item cell).
start & end causes the elements to be aligned at the beginning of themselves (cell top) or end (cell bottom).
stretch causes the grid items to have the same height as their cell, filling the whole space vertically. The value by default (normal).

justify-items - specifies the alignment of grid items on the inline direction (x-axis). It sets the justify-self value on all child items as a group.

  justify-items: normal|center|start|end|stretch;

center causes the elements to be aligned to the center of themselves horizontally.
start & end causes the elements to be aligned at the beginning or the end of themselves in the x-axis.
stretch causes the grid items to have the same height as their cell, filling the whole space horizontally. The value by default (normal).

place-content - allows you to align the content along the block (y-axis/column) and inline (x-axis/row) directions at once. A shorthand for align-content and justify-content.

  place-content: align-content justify-content;

Let's take a closer look at the possible values:

align-content - specifies the distribution of space between and around content items in the block direction (y-axis).

  align-content: normal|center|start|end|space-around|space-between|space-evenly|stretch;

center causes the elements to be aligned at the center of the grid with respect to the y-axis.
start & end causes the elements to be aligned at the beginning (top) or end (bottom) of the grid with respect to the y-axis.
space-between causes the grid items to be distributed evenly, being the first item at the start of the grid, and the last at the end.
space-around causes the grid items to be distributed evenly, having half-size space on top/bottom.
space-evenly causes the grid items to be distributed evenly, having equal space around them.
stretch causes the grid auto-sized items to have their size increased equally so that the combined size exactly fills the alignment container.

justify-content - specifies the distribution of space between and around content items in the inline direction (x-axis).

  justify-content: normal|center|start|end|space-around|space-between|space-evenly|stretch;

center causes the elements to be aligned at the center of the grid with respect to the x-axis.
start & end causes the elements to be aligned at the beginning (left) or end (right) of the grid with respect to the x-axis.
space-between causes the grid items to be distributed evenly, being the first item at the left of the grid, and the last at the right.
space-around causes the grid items to be distributed evenly, having half-size space on left/right.
space-evenly causes the grid items to be distributed evenly, having equal space around them.
stretch causes the grid auto-sized items to have their size increased equally so that the combined size exactly fills the alignment container.

Child (grid item) properties:

place-self - allows you to align an individual child item along the block (y-axis/column) and inline (x-axis/row) directions at once. A shorthand for align-self and justify-self.

  place-self: align-self justify-self;

align-self - overrides the align-items value and aligns the item inside the grid area or cell along the block direction (y-axis).

  align-self: center|start|end|stretch;

center aligns the content to the center of the grid cell in the y-axis.
start & end aligns the content to the start/end of the grid cell in the y-axis.
stretch fills the grid cell in the y-axis (normal value).

justify-self - overrides the justify-items value and aligns the item inside the grid area or cell along the inline direction (x-axis).

  justify-self: center|start|end|stretch;

center aligns the content to the center of the grid cell in the x-axis.
start & end aligns the content to the start/end of the grid cell in the x-axis.
stretch fills the grid cell in the x-axis (normal value).

BONUS - Masonry Layout is an experimental feature, a layout method where 1 axis uses common values (usually columns), and the other the masonry value. In the axis of the masonry (usually the row), instead of leaving gaps after the small elements, the elements of the next row move up to fill the gaps. (AWESOME, isn't it?)

Real use cases

Now, I am going to show you how I usually solve, with CSS Grid layout, different situations that I found in website I've developed:

Situation 1 - Grid sidebar layout

Imagine you are developing a layout that includes a sidebar on the left, which follows you as you scroll, and the rest of the website, header, content and footer, on the right.

Here I show you an example of what I mean and how it could be distributed:

To do this, we will first define the grid container and the cells or areas we will need to place our elements, and then the position of the child items in the grid:

<div class="grid grid-cols-[300px,minmax(0,1fr)] grid-rows-[60px,1fr] min-h-screen">
  <aside id="sidebar" class="sticky top-0 h-screen">Sidebar</aside>
  <header class="row-span-1 col-start-2">Header</header>
  <section role="main" class="col-start-2">Content</section>
  <footer class="col-start-2">Footer</footer>
</div>

CSS Parent

  .grid {
    display: grid;
  }
  .grid-cols-[300px,minmax(0,1fr)] {
    /* 2 column tracks, 1st 300px, 2nd max the space available */
    grid-template-columns: 300px minmax(0, 1fr); 
  }
  .grid-rows-[60px,1fr] {
    /* 2 row tracks, 1st 60px, 2nd the space available */
    grid-template-rows: 60px 1fr;
  }
  .min-h-screen {
    min-height: 100vh; /* Fill the full screen */
  }

Why is it important to define minmax(0, 1fr) instead of 1fr? Because by defining minmax and adding the possibility to have a smaller size than 1fr, the content does not overflow. This way, elements like a slider can be added to that responsive column without any problem.

CSS Children

  /**
  * Aside - Sidebar
  */
  .sticky {
    position: sticky; /* Follow you when scrolling */
  }
  .top-0 {
    top: 0px;
  }
  .h-screen {
    height: 100vh; /* Fill the screen vertically */
  }

  /**
  * Header
  */
  .row-span-1 {
    grid-row: span 1 / span 1; /* Position: first row track */
  }
  .col-start-2 {
    grid-column-start: 2; /* Position: second column track */
  }

  /**
  * Content & Footer
  */
  .col-start-2 {
    grid-column-start: 2; /* Position: second column track (original position for the row) */
  }

Note: The examples will be styled with TailwindCSS using JIT mode, but I'm still going to add the generated CSS for those who don't use it.

Situation 2 - Grid post thumbnail layout

In this situation, our goal is to represent the thumbnail of our article, showing the image, the title, the description, the date and a like button to save it in our list of interests.

Let's imagine that the image below is the outline of how we want to represent it:

The first thing will be to define our elements in semantic HTML and start defining the grid in the parent, in this case the children will not need to specify their position because they will occupy the space that corresponds to them by location in the HTML.

<article class="grid grid-cols-[120px,minmax(0,1fr),64px] grid-rows-1 gap-4">

  <!-- Figure: By default will be added in the first column of 120px -->
  <figure>
    <img src="image_url" alt="image_alt" width="120" height="120" />
  </figure>

  <!-- Header (Title, excerpt and date): By default will be added in the second (available space) column -->
  <header class="py-4">
    <h2>Heading</h2>
    <p class="pb-8">Description or excerpt</p>
    <p>Date</p>
  </header>

  <!-- Like button: By default will be added in the last column of 64px -->
  <button class="w-8 h-8 p-4">
    <svg width="32" height="32">Like Icon</svg>
  </button>

</article>

As before, let's differentiate between the style applied to the parent and the one applied to the children:

CSS Parent

  .grid {
    display: grid;
  }
  .grid-cols-[120px,minmax(0,1fr),64px] {
    /* 3 column tracks, 1st fixed of 120px, 2nd responsive from 0 to 1fr, and 3rd fixed of 64px */
    grid-template-columns: 120px minmax(0, 1fr) 64px;
  }
  .grid-rows-1 {
        /* 1 row track responsive from 0 to 1fr */
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .gap-4 {
    gap: 1rem; /* gap between row and column tracks of 1rem (16px) */
  }

CSS Children

  /**
  * Header: Internal padding
  */
  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /**
  * Button: Size and internal padding
  */
  .w-8 {
    width: 2rem; /* (32px) */
  }
  .h-8 {
    height: 2rem; /* (32px) */
  }
  .p-4 {
    padding: 1rem;
  }

Situation 3 - Grid responsive layout

Another quite common situation that I usually find is the grid responsive by nature, that as the screen grows more elements are added to the previous rows, automatically defining the columns.

In this way, when the element of x pixels fits in the previous row it moves up and the next one moves to the position of this one.

If the width of the grid in the image below were larger, item 5 would be part of the first row.

In this situation it is even easier to define the grid container, with just grid-template-columns we will be able to get that result, but in order to have space between the items we will add the gap property as well:

HTML

  <div class="grid grid-cols-[repeat(auto-fit, 150px)] gap-8">
    <article>Item 1</article>
    <article>Item 2</article>
    <article>Item 3</article>
    <article>Item 4</article>
    <article>Item 5</article>
  </div>

CSS

  .grid {
    display: grid;
  }
  .grid-cols-[repeat(auto-fit, 150px)] {
    grid-template-columns: repeat(auto-fit, 150px);
  }
  .gap-8 {
    gap: 2rem; /* (32px) */
  }

Basically, in this article I intended to have listed what I will need to review in the future when defining a new grid. And a couple of use cases to keep it fresh.

I hope you find it as useful as I did and have a wonderful week full of grids and layout!

My web performance journey with Nuxt, Storyblok & Netlify

Alba Silvente Fuentes — Sat, 17 Apr 2021 19:51:23 +0000

In this post I will show you the main web performance concerns I had while building my website and how a Jamstack architecture will help us solve them.

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

To build my website I have used technologies such as: Nuxt, my static site generator, Storyblok, as my headlessCMS with an image service provider, and Netlify to host my full static site.

I'm using Lighthouse as the tool that will show us all the opportunities we have to improve or fix the performance of our project.

Resources treatment

1. Preload key requests

We will always consider using link rel=preload to prioritize fetching resources that are currently requested later in page load.

Solution (uses rel preload) → Preload critical assets to improve loading speed.

Declare preload links in your HTML to instruct the browser to download key resources as soon as possible.

<head>
  <link rel="preload" href="critical.css" as="style">
  <link rel="preload" href="critical.js" as="script">
</head>

What I use → As I use Nuxt as my static site generator, it is already leveraging my performance with this technique, check crazy fast static applications to learn more about how it's doing it for us.

2. Preconnect to required origins

Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.

Solution (uses rel preconnect) → Informing the browser of your intention is as simple as adding a link preconnect tag to your page:

<link rel="preconnect" href="https://example.com">

This lets the browser know that the page intends to connect to example com and retrieve content from there.

In general, it's better to use link rel="preload", as it's a more comprehensive performance tweak, but we can keep link rel="preconnect" for the edge cases like:

Link dns-prefetch is another type related to connections. This handles the DNS lookup only, but it's got wider browser support, so it may serve as a nice fallback. You use it the exact same way:

<link rel="dns-prefetch" href="https://example.com">.

What I use → A good example of this could be a link to google fonts, in my case, as I have the font files inside my project itself I didn't need to have this into account.

But Nuxt already took this into account for you and they created a module to improve your font load performance: @nuxtjs/google-fonts.

3. Lazy load third-party resources with facades

Some third-party embeds can be lazy loaded. Consider replacing them with a facade until they are required.

Solution (third party facades) → Instead of adding a third-party embed directly to your HTML, load the page with a static element that looks similar to the embedded third-party. The interaction pattern should look:

On load: Add facade to the page (as the cover of a video).
On mouseover: The facade preconnects to third-party resources.
On click: The facade replaces itself with the third-party product.

What I use → For Youtube videos I started using lite-youtube-embed package, following the advice of Debbie O'brien and web.dev!

The difference in the loading time of your page is brutal, not to mention that initially you don't have a lot of iframes lengthening the interaction time.

4. Reduce the impact of third-party code / Minimize third-party usage

Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.

Solution (loading third party javascript) → If a third-party script is slowing down your page load, you have several options to improve performance:

Load the script using the async or defer attribute to avoid blocking document parsing.
Self-hosting the script if the third-party server is slow.
Consider removing the script if it doesn't add clear value to your site.
Resource Hints like link rel=preconnect or link rel=dns-prefetch to perform a DNS lookup for domains hosting third-party scripts.

What I use → I'm using Google Analytics, a third party, but a package called vue-gtag helps me to load only with user consent and, once active, it preconnects to googletagmanager and loads analytics asynchronously:

<link href="https://www.googletagmanager.com" rel="preconnect">

<script type="text/javascript" async src="https://www.google-analytics.com/analytics.js"></script>

As I'm using the Storyblok image service provider, I preconnected to it, so it can improve the images load time:

<link rel="preconnect" href="//img2.storyblok.com">

// Nuxt config
head: {
    link: [
      { rel: 'preconnect', href: '//img2.storyblok.com' },
   ],
}

5. Eliminate render-blocking resources

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.

You can reduce the size of your pages by only shipping the code and styles that you need. Click on a URL to inspect that file in the Sources panel. Styles in CSS files and code in JavaScript files are marked in two colors:

Green (critical): Styles that are required for first paint; code that's critical to the page's core functionality.
Red (non-critical): Styles that apply to content not immediately visible; code not being used in page's core functionality.

Solution (render blocking resources) → Let's see in depth how to eliminate scripts or stylesheets render-blocking our page load.

How to eliminate render-blocking scripts

Once you've identified critical code, move that code from the render-blocking URL to an inline script tag in your HTML page.

If there's code in a render-blocking URL that's not critical, you can keep it in the URL, and then mark the URL with async or defer attributes.

Code that isn't being used at all should be removed.
How to eliminate render-blocking stylesheets

Inline critical styles required for the first paint inside a style block at the head of the HTML page. Then load the rest of the styles asynchronously using the preload link.

Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.

What I use → In Netlify we have a plugin for critical css called netlify-plugin-inline-critical-css.

Another cool technique is to split the style into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device.

Keep CSS /JS files smaller

1. Minify CSS /JavaScript

Minification is the process of removing whitespace and any code that is not necessary to create a smaller but perfectly valid code file.

Minifying CSS files → reduce network payload sizes (read more about minifying CSS)

Solution CSS → Minify with tools like webpack https://web.dev/minify-css/#css-minification-with-webpack.

Minifying JavaScript files → reduce payload sizes and script parse time (read more about minifying JS)

Solution JS → The new uglify-js: https://github.com/terser/terser or continue using webpack, Teser is already included in the prod.js file.

What I use → Nuxt is already using Terser webpack plugin in its build configuration, taking care of the minification by itself.

2. Remove unused CSS /JavaScript

Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.

Solution (unused css rules) → Take into account Critical/Non-Critical CSS technique as per render-blocking stylesheets section, but combined with a tool that deletes the CSS not used in your page, as the famous PurgeCSS.

Remove unused JavaScript to reduce bytes consumed by network activity. (unused JS)

Solution (detailed info and tool comparatives) → Let's see which techniques we can use if our frameworks doesn't do it for us:

Record code coverage to start analyzing the unused code in specific files:

Coverage tab in DEV Tools:

Click Start Instrumenting Coverage And Reload Page if you want to see what code is needed to load the page.
Click Instrument Coverage if you want to see what code is used after interacting with the page.

Build tool for support for removing unused code

Webpack make easier avoid or remove unused code with the following techniques:

Code Splitting - Extract common dependencies into shared bundles.

The process of breaking up bundled code into multiple smaller bundles that can be loaded and executed independently as needed.

Nuxt takes care with webpack of code-splitting the application!
Unused Code Elimination - Dead Code Elimination is the process of removing code that is not used by the current application.

There are a number of tools available with the most popular being Terser and Closure Compiler. Webpack's Dead Code Elimination is implemented by removing unused module exports, then relying on Terser.
Unused Imported Code - tricky optimization cases where a module's exports are used in a way that is difficult to statically analyze.

Dynamic imports are one of these cases. Webpack doesn't understand the special destructuring syntax to elimitate dead code:

    const { transformImage } = await import('./image.utils.js');

But it allows to manually list the exports that are used via magic comment:

    const { transformImage } = await import(/* webpackExports: "transformImage" */ './image.utils.js');

What I use → Nuxt already does this for me, it's using webpack under the hood. It's splitting my code by pages, so I can forget about this magic webpackChunkName comment that you need to add on every route with dynamic import.

3. Enable text compression

Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes.

Solution (uses text compression) → Enable text compression on your server.

When a browser requests a resource, it will use the Accept-Encoding HTTP request header to indicate what compression algorithms it supports.

Accept-Encoding: gzip, compress, br

If the browser supports Brotli (br) you should use Brotli because it can reduce the file size of the resources more than the other compression algorithms.

What I use → My hosting, Netlify, is already using Brotli compression by default.

Brotli compression has gained widespread browser support and is particularly effective for text-based files such as HTML, JavaScript and CSS assets.

Netlify Edge is already encoding and caching suitable assets with Brotli, and delivering correctly compressed assets depending on the requesting browser.

Median Brotli / gzip comparisons, according to Akamai’s testing:

JavaScript files compressed with Brotli are 14% smaller than gzip.
HTML files are 21% smaller than gzip.
CSS files are 17% smaller than gzip.

4. Remove duplicate modules in JavaScript bundles

Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.

Solution → With webpack you have https://www.npmjs.com/package/webpack-bundle-analyzer to check JS bundles and start cleaning up your project.

What I use → In Nuxt I already have that package, I just need to add a flag --analyze to my build command and voilà!

Reduce execution time

1. JavaScript execution time

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.

Solution (bootup time) → The combination of code splitting, minification and compression, removal of unused code and caching techniques will greatly improve execution time.

What I use → As always Nuxt is one step ahead, in this video you can check the technique they use with your own eyes: https://www.youtube.com/watch?v=J6airiY8e84

2. Minimizes main-thread work

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

Solution (mainthread work breakdown) → In the end, it's the compendium of many of the things we've already seen in this article or that we will see later on.

In summary, the idea is to optimize both our JS and CSS code, minimizing it and removing unused code, as well as the third-party libraries we are using. Always serving the CSS and JS critical to the page being viewed first and deferring the rest.

3. User Timing marks and measures (a cool tool, not an issue)

Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. Read more about user timings.

4. Initial server response time was short

Keep the server response time for the main document short because all other requests depend on it.

Solution (time to first byte) → When choosing a hosting you have to take this into account, if it is a static hosting, everything will already be configured correctly and the CDN will have many advantages.

What I use → In my case Netlify gives me a response of 33ms. You can check this speed test tool, to see my results and test with your site: testmysite.io/dawntraoz.com

The DOM troubles

1. Avoid large layout shifts

These DOM elements contribute most to the CLS of the page.

Cumulative Layout Shift (CLS) is a Core Web Vitals metric calculated by summing all layout shifts that aren’t caused by user interaction.

What I use → This https://webvitals.dev/cls site give you detailed information on how your website CLS is performing.

2. Avoids an excessive DOM size

A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows.

Solutions (dom size) → In general, look for ways to create DOM nodes only when needed, and destroy nodes when they're no longer needed.

We can make use of lazy loading components in Nuxt.

But also keep your HTML smaller or load more on scroll technique could help.

Images, our bigger headache

1. Properly size images

Serve images that are appropriately-sized to save cellular data and improve load time.

Solutions (uses responsive images) → Let's take a look at the different techniques recommended by Google:

Srcset: The main strategy for serving appropriately sized images is called "responsive images". With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.

    <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

Image CDNs: are another main strategy for serving appropriately sized images. You can think of image CDNs like web service APIs for transforming images.

What I use → I'm using the one available in Storyblok: storyblok image service, always requesting the proper sizes.
SVG: another strategy is to use vector-based image formats. With a finite amount of code, an SVG image can scale to any size. See Replace complex icons with SVG to learn more.

2. Defer offscreen images

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

Solution (offscreen images) → Lazy load your images. You can use the loading property set to lazy as per MDN recommendation: Lazy loading.

What I use → In my case I'm using Vue Lazyload to lazy-load my images and background images: https://github.com/hilongjw/vue-lazyload#demo

3. Efficiently encode images

Optimized images load faster and consume less cellular data.

Solution (uses optimized images) → This should be fixed if you are using all the different techniques we see in this article. Using your image CDN service or the compression of your image should be enough.

If you don't use any image CDN, you can use this online tool: https://squoosh.app/

4. Serve images in next-gen formats

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Solution (uses webp images) → If you use an image service, as I do, they also have a format filter to get the webp/jpeg format. So you can upload any kind of image, but you will always download the optimized one!

What I use → I use img2.storyblok service adding a filters:format(webp). But only when the browser support this format.

Problem I found → I needed to filter by canvas rendering on the client side to avoid displaying webp images in browsers that don't support it like Safari (webp will work in future versions):

format = this.canUseWebP() ? '/filters:format(webp)' : '/filters:format(/*jpeg OR png*/)'

// In methods
canUseWebP() {
  if (window.canUseWebP) {
     return window.canUseWebP
  }
  const el = document.createElement('canvas')
  if (el.getContext && el.getContext('2d')) {
     window.canUseWebP =
       el.toDataURL('image/webp').indexOf('data:image/webp') === 0
     return window.canUseWebP
    }
  window.canUseWebP = false
  return window.canUseWebP
},

Thanks to my colleagues in @passionPeopleNL, for shedding light on this matter!

5. Image elements have explicit width and height

Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

Solution (optimize CLS) → Always include width and height size attributes on your images and video elements.

Alternatively, reserve the required space with CSS aspect ratio boxes.

What I use → I have created a generic component for images.

This way every time I define an image I will call this component, which will not only optimize my image using v-lazy and filtering the format, but the properties will not allow you not to pass the width and height.

This way we will always make sure that we comply with the standard.

6. Use video formats for animated content

Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

Solution (efficient animated content) → Many image CDNs support GIF to HTML5 video conversion. You upload a GIF to the image CDN, and the image CDN returns an HTML5 video.

I recommend you the article Improve Animated GIF Performance With HTML5 Video if you need to do this yourself.

7. Preload Largest Contentful Paint image

Preload the image used by the LCP element in order to improve your LCP time.

Solution (optimize LCP) → If you know that a particular resource should be prioritized, use link rel="preload" to fetch it sooner.

Many types of resources can be preloaded, but you should first focus on preloading critical assets, such as fonts, above-the-fold images or videos, and critical-path CSS or JavaScript.

What I use → In the article page I've placed the featured image of the article as a preload link at the head tag using the head method that nuxt provide us.

head() {
    return {
    link: [
      {
        rel: 'preload',
        as: 'image',
        href: transformImage(this.story.content.featured_image, '672x0'),
      },
    ],
  }
}

Fonts

1. All text remains visible during webfont loads

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Solution (font display) → The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font.

For Google fonts, for example, is as simple as adding the &display=swap parameter to the end to the Google Fonts URL:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&**display=swap**" rel="stylesheet">

What I use → The @font-face swap technique, is the one I'm using at the moment, with the font files included in my project directly.

What to avoid?

1. Avoid multiple page redirects

Redirects introduce additional delays before the page can be loaded (avoid multiple redirects).

I avoid → I'm not doing any redirects.

2. Avoid serving legacy JavaScript to modern browsers

Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers.

Solution (detailed info) → For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers.

What I use → In Nuxt we have --modern with some options in the build command. In my case for generate --modern is sufficient.

Check this awesome tutorial https://dev.to/debs_obrien/modern-build-in-nuxt-js-17lc to learn more about it.

3. Avoids enormous network payloads

Large network payloads cost users real money and are highly correlated with long load times.

Solution (total byte weight) → There're some ways to minimize our payload size:

Defer requests until they're needed. Nuxt is taking care of it.
Optimize requests to be as small as possible, minimizing and compressing, try to use WebP for the images when it's possible. An image CDN will be always there to keep our performance up!
Cache requests so the page doesn't re-download the resources on repeat visits.

Web.dev recommend us to check Network reliability landing page to learn more about caching works and implement it.

4. Avoids document.write()

For users on slow connections, external scripts dynamically injected via document.write() can delay page load by tens of seconds.

Solution (no document write) → In your own code you have absolute control to not add it, but I recommend that whenever you are going to use a third-party check that it is not using document.write() for something.

5. Avoid non-composited animations

Animations which are not composited can be janky and increase CLS.

Solution (non composited animations) → Right now I don't have so many animations, but the few I have I apply with the properties that are cheap to run for the browser: translate and scale.

Reading this tutorial https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ will clarify you why.

Interesting articles on this topic

https://wildbit.com/blog/2020/09/30/getting-postmark-lighthouse-performance-score-to-100

https://medium.com/weekly-webtips/web-vitals-google-search-the-state-vue-nuxt-performance-optimization-in-july-2020-71441eefc51

Create custom emails with your Netlify domain and Zoho

Alba Silvente Fuentes — Fri, 26 Mar 2021 22:20:33 +0000

In this post I want to show you how I setted up an email account with my own domain using Netlify as my domain provider and Zoho as my email service.

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

What is Netlify

For those of you who don't know Netlify yet, although if you've come to this post you probably already know about it, Netlify offers hosting and serverless backend services for web applications and static websites.

Also, when you host your static site with them they offer you the possibility to buy your own domain there.

And when you have your domain on Netlify you wonder if you will be able to create your own email. Of course you can, the DNS system of your domain is still available to you on Netlify.

There are many services that allow you to have messaging with your own domain. But, in this case, we're going to look at a free service called Zoho, in a few minutes it allows us to have our custom email active 🎉

Create your own email

Go to Zoho and follow the steps below:

Sign Up for a plan (could be a Forever free plan)

Add your domain at https://mail.zoho.eu/orgsignup.do, choose your main email name and fill the data required.
Verify your domain: select Others in hosting providers and then copy the TXT register.

Now, on Netlify:

Go to the Domain settings
Click on your domain Options and select Go to DNS Panel

Add the TXT register that Zoho provides you

Then go back to Zoho, click verify and voilà your new email is setted up!!

Just a few steps left to start receiving emails:

Add 3 MX register in your DNS Netlify's panel with the values that Zoho provides you.

Name: yourdomain.io

Type: MX

Priority: 10 (the same with 20 and 30)

Value: mx.zoho.eu
Register security DNS as per lastest steps in the Zoho sign up process.
Download Zoho Mail App or log in in the browser: https://accounts.zoho.eu/

What is next?

Now in Zoho you can create more user emails or email groups, i.e support.yourdomain.io or marketing.yourdomain.io.

In addition, by default it comes with a nice separation of folders, separating the notification & newsletter emails from the important ones, among others.

You have a lot of possibilities there and, obviously, you can increase your plan to have so many other features ready for you 😍

Just explore Zoho and let me know what cool things you found that I can also use in mine 💜

Nevertheless, Alba Silvente 💃🏼 Coded in 2021!

Alba Silvente Fuentes — Sun, 07 Mar 2021 21:34:20 +0000

After seeing the initiative that DEV is proposing for such a special day as 8 March, I didn't want to miss it, so I'm joining in!

My biggest achievement this year

This year, after the best professional year of my life, I decided to try my luck and try to join the company I loved, Passionate People.

We are not going to deny that I still have insecurities after 5 years in this sector, but what I see as important is that they do not stop me from pursuing my goals or my dreams.

Many times you have to do things that you don't feel capable of, like trying to get into the company of your dreams, but if you try, you will get there, so don't give up!

And here I am... 😱

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

Women in tech who have appeared in my life

As I said, last year was completely crazy for me, for all the goals I achieved, for everything I accomplished in my working life.

I owe it all to many women in this sector, for their support, for their help, for their strength and for making a place for us in places we were not part of!

If I have to name someone first, it has to be Debbie O'brien, we can say that Debbie is my shadow manager 🤣 She has been a crucial person in my life this last year, she has helped me to grow, to make an effort, to value what I do and above all to believe in myself, in my knowledge.

If someone told me a year and a half ago that Debbie would talk to me in a video call I would faint (she was like a divine being for me hahahaha)

Another person who inspires me the most is Gift Egwuenu how she manages to do everything she sets out to do, being everywhere and having time to cook, dance and go for a run, she is a superheroine.

And my partner in crime Miriam Gonzalez could not be missing in this article.

One of the things that the tech community has brought me is the opportunity to meet other people in online events during this year of confinement. One of them is Miriam, who is now a very important pillar, with whom I am setting up projects that make me live again a little and remember what it was like to have a laugh with friends.

I look forward to meeting more women in tech and joining forces 🤗

My biggest goal for this year

Contribute more to open source, encourage more women in the sector to participate, increase the female open source community, like Frontend Foxes has done for years.

And to be able to mentor a woman who wants to enter in the Frontend world would also be awesome 🤩

My advice for allies to support underrepresented folks who code

Don't turn a blind eye when a colleague is undervalued by their superiors.
Be human, if someone makes a mistake, don't whip them, remind them that we all make mistakes, that we are improving and learning thanks to having made them.
Respect the speed of others, many people cannot keep up with the pace of another person, you have to try to give space and work adapting to the other person. That will make you both perform much better as a team!

And thanks to all the women who have opened this path for others, who don't stop growing and surpassing themselves, we are warriors!

I read you on DEV She Coded 🧐

A Front-end developer using Figma

Alba Silvente Fuentes — Sun, 28 Feb 2021 00:19:35 +0000

In this post I want to tell you my first experience with Figma, how I am defining my design system, what resources I have found and how to create slides with your own brand.

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

How a design system is helping me

Creating my own design system has helped me:

To be consistent between the products I create. For example, my website uses the same components, style and typography as my slides. It helps to be aligned and create a brand.
To reuse elements, creating components and use them in new pages, products or sections. Allowing me to save a lot of time both adding new content and modifying existing one.

Although a design system is time-consuming, the good thing is that you can do it little by little and define and improve it over time.

The next steps will be to create guidelines, in case one day I work with more people, and to unify the designs of my side projects with Dawntraoz's brand, but little by little.

For now, I leave you with this design system made in Figma, which is amazing, 🦄 Pegasus Design System

If you want to know more about this topic, I recommend you to take a look at Míriam González's talk, where she shares super useful resources 👉 Design Systems 101

First steps learning Figma

I started reading the Figma Basics tutorial, where the concepts behind Figma are explained. I'll summarize what I found very useful in my journey:

Frames: the Artboards of Figma where you have preset sizes as standard Desktop, Tablet and Phone sizes.

Constrains: to fix elements to the sides of their parent, this is useful to resize the elements when you resize the screen.

For example, the header element is fixed top-left-right to its parent -Homepage Frame-, when the homepage width increase the header will grow with it.

You can also check the chekbox -Fix position when scrolling- to simulate position: sticky.

Components: to reuse elements of the design, creating new instances of them.

To create a component you just need to right click the element already created and select the option Create Component.

Once it's ready, to create a new instance: go to the Assets panel and drag & drop the component.

Styles: to define a set of properties like colors, texts, shadows... which could be reused across the design.

For example, to create a generic text: define the properties of your text, i.e. font family, size, decoration, ...; then, click on the Styles icon (the icon with 4 dots) and click on the + icon to save it.

If you want to know all the properties you can add to your custom text styles, check Typography systems in Figma.

To reuse it, just click on the Styles icon again and select the one you want. You will see something like this:

Smart selection: selecting multiple elements using Ctrl+Shift+Click allows you to adjust spacing between elements (click & drag - pink lines) and change the position (drag & drop - pink circles).

Exporting, commenting & sharing: you can export in PNG, JPG, SVG and PDF formats all your elements and designs, more people will be able to give you feedback on your design by commenting on it and you will be able to share your designs via a link with anyone.

To get to know these points in detail and practice them with a use case, just register at Figma ✨ It's free for your first 3 projects 🎉

Organising my content

When I got to know the basics of Figma, I started to organise my project and to turn my website into a design, which was already designed (not ideal, but that's how I started).

Next, I will tell you how I have set up the project by sections.

Style guide: Colors, typography and iconography

Two of Figma's most powerful features are components and styles. They let you reuse UI objects and attributes so you can maintain designs systematically at scale. - by Figma

As I went through the main page of my website, I saved the styles, both colours and fonts, that I defined.

Once I had defined all of them, I created a page called Style guide where I represented the colours, their name and their hexadecimal value, as well as the typographies for each type of heading or text.

And the same thing happened with the iconography, as I added the SVG icons to my design I created components in the Style guide page. This way I can control from one place how they are displayed and export them in isolation.

Components

For those parts that make up my design and that I'm going to reuse, it could be none other than the components section. This is where the variants and properties that Figma offers us come into the picture, let's see what it's about.

I will tell you how I've used them in my project, but as I'm not an expert, it's better to look at the recommendations Figma gives us at https://www.figma.com/best-practices/creating-and-organizing-variants/

Well, the first thing I had to do was to create the content of what was going to be my first component, a custom heading with a gradient by colour. This component had a different size in desktop & mobile and a different gradient in light & dark mode, a total of 4 variants.

To define the variants I had to take into account 2 properties: the screen, which corresponds to the desktop or mobile version, and the mode, being light or dark.

In the image above the first heading on the top left would be the desktop version in light mode, and on the bottom right the mobile version in dark mode.

This grouping could have been done differently, we will see this in the next section with the Header layout component.

Layout

Although our layout elements, the header and footer, are components in Figma, it made more sense to me to have a special section for them and that's why I created the Layout page.

As I mentioned before, when I had to create 4 variants of each component to cover both desktop and mobile in light and dark mode, I wondered if I had done it correctly and when I asked on Twitter my doubt was solved.

That's how I discovered the base components (the master piece). Basically, when you create a variant you are making a copy of the content, not an instance, and when I wanted to modify something on desktop, for example, I would have to do it for light and dark mode and that's not ideal. That's why the base component has saved me!

Header

In the Header/Base component I design the desktop and mobile version of the header, I only take into account the screen property. Then I create the Header component that uses the Header/Base instances and there I design the light and dark mode variants. This way, the day I want to change something in the mobile/desktop design I will only have to apply it in Header/Base and Header will be updated automatically!
Footer

For the footer it was easier because it doesn't vary depending on the mode, so a Footer component was more than enough. But one thing I discovered when trying to add a border bottom to the footer titles is that I needed a plugin to help me apply the border I wanted: Border

Once the header and footer were already created, I was adding them to the page layouts, until I decided to create a template to reuse the structure and add the container spacing in the body section. As you can see below:

Grids

To avoid having to redefine the size and fit the components to the columns every time I wanted to modify one of the grids, I decided to create a section where I could isolate them and instantiate them in the design of my pages.

For example, for the blog listing I created a two column grid on desktop with a full width version for mobile (using variants with a screen property):

Pages

And now, having put all the pieces of the design together, it's time to define our pages!

Making use of the template we created on the layout page and choosing the corresponding heading component for desktop or mobile in light mode, as well as the listing grid, we are ready to go 🎉

Article cards

And as I wanted to have a space for the feature images of the articles, I created a page called Article cards, where I design the images and export them.

To export the frame with the feature image, I added one export option and set the type of file I wanted to export to JPG. Then I clicked the preview tab to see the result and the export button to get the picture.

Everything you need to know about export by Figma

Using plugins

After defining my project I decided to do some research and look for cool stuff. Let's see what I have found 🔍

Custom Slides

I'm quite proud of this part, to be honest 🙈.

I recently started giving talks but, doing it on my own, I didn't have a company template to make the slides. So, I decided to use free templates that I found on the internet. But, as you can imagine, it had nothing to do with my web design.

Searching on Google how to make my own slides with Figma, I found this video Export slide deck presentations from Figma to Google Slides, which explains the use of a plugin to convert frames made in Figma into Google Slides or, even, interactive slides generated in an url.

The plugin is Pitchdeck Presentation Studio, which I highly recommend. This is how it looks like:

There you can add animations to the elements (not compatible with Google Slides), add speaker notes, change the slides order, ...

The wonderful thing is to be able to use the components of your web design for your slides, what a fantasy 🦄

Illustrations

As I created new slides, I wanted to put in some cool geometric shapes and I thought, why not illustrations?

When I think of illustrations I always think of Humaaans by Pablo Stanley, so I went straight to his website and found a wonderful plugin for figma so I could add my illustrations without leaving here, that's amazing 😍.

The plugin is called Blush and you can find it in the community or by going directly to its page 👉 https://www.figma.com/community/plugin/838959511417581040/Blush

For TailwindCSS lovers

It is possible to export all our styles, colors and typography, as a preset for tailwind.config.js by using the plugin: https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss

Side note: If the plugin doesn't have a description on how to use it, it's because you need to go to Files tab (or right click) > Plugins > Click on the plugin you want to use and voilà!

This is the result by using it in my project:

{
 "colors": {
  "white": "#ffffff",
  "gray-light": "#e5e7eb",
  "gray-dark": "#111827",
  "fuchsia": "#a21caf",
  "black": "#000000"
 },
 "fontSize": {
  "sm": "0.75rem",
  "base": "1rem",
  "lg": "1.125rem",
  "xl": "1.5rem",
  "2xl": "1.875rem",
  "3xl": "2.25rem",
  "4xl": "3.75rem"
 },
 "fontFamily": {
  "gilroy-bold": "Gilroy-Bold",
  "segoe-ui": "Segoe UI"
 }
}

Adding RSS feed to my Nuxt & Storyblok blog

Alba Silvente Fuentes — Tue, 09 Feb 2021 07:59:14 +0000

In this post I would like to show you how I generated the RSS feed.xml for my blog, using Nuxt and Storyblok.

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

What is RSS feed?

RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format. - Wikipedia

The RSS feeds allow a user to keep track of the new content of many different websites, e.g. get the latest articles from your favourite newspapers.

In our website, the RSS feed is an xml file in which you will have the highlighted information of the content that you publish, for example, the articles of your blog.

Why is it useful?

Imagine that you want to create a newsletter with the latest content you publish, or that you want to automate the promotion of your posts.

Since your feed.xml is updated with details about every piece of content your site publishes, you can use RSS feeds for generating email newsletters and automated social media posts.

Do you like the idea? Let's see how to implement it in our blog made with Nuxt and using Storyblok as headlessCMS.

We're going to see an example with this tech stack, but this code could be also used with any HeadlessCMS/Rest API.

How to add the feed to our Nuxt blog

With the amazing ecosystem of modules we have in Nuxt, I'm quite sure we can find a module that already does the job for us. Let's look for an RSS or feed related module in the nuxt modules explorer.

And, of course, here it is https://www.npmjs.com/package/@nuxtjs/feed!!

Following the README.md, the first thing we have to do is to install/add the package in our project:

yarn add @nuxtjs/feed # npm install @nuxtjs/feed

Then, add the module @nuxtjs/feed in the modules section in nuxt.config.js:

modules: [
  '@nuxtjs/feed'
],
feed: [
  {} // Here you place the options needed to generate the xml file
]

Once it's ready, let's take a look at the options we need to fill in:

path: the route to our xml RSS feed file (feed.xml).
create: a method in which we will populate the feed object and make API calls to get the articles data.
cacheTime: how long should the feed be cached.
type: type of feed as rss2, atom1 or json1 (rss2 in our case).

feed: [
  {
    path: '/feed.xml',
    async create(feed) {
            feed.options = {
        title: "Your name's blog",
        link: 'https://blog-domain.com/feed.xml',
        description: "Your name's blog feed!",
      }

            // await API call with our posts data
        },
    cacheTime: 1000 * 60 * 15,
    type: 'rss2',
  },
],

This module is based on feed package. You can check it out for modifying the feed object passed to the create method.

It's time to customize the feed object with our Storyblok data (or your API data) using axios:

First, we need to import axios in the nuxt.config.js file.
Next, we wait for the API get call to finish. The call will retrieve the pages stored in the blog folder, our articles, by specifying '?starts_with=blog' and giving the token needed to identify ourselves:

  const posts = await axios.get(
    `https://api.storyblok.com/v1/cdn/stories?starts_with=blog&token=${process.env.storyblokToken}`
  )

Once the call has returned a response, we go to posts.data.stories and go through the array using forEach. For each of the posts, we will run feed.addItem({}) with the data of each one, as you can see below:

  import axios from 'axios'

  export default {
    feed: [
      // ...
      {
        async create(feed) {
          // ... Feed options

          // Wait the response
          const posts = await axios.get(
            `https://api.storyblok.com/v1/cdn/stories?starts_with=blog&token=${process.env.storyblokToken}`
          )

          /* START - Go through the array of stories */
          posts.data.stories.forEach((post) => {
            const url = `https://blog-domain.com/${post.full_slug}`
            feed.addItem({
              title: post.title,
              id: url,
              link: url,
              description: post.content.excerpt,
              published: new Date(post.first_published_at),
              author: [
                {
                  name: 'Your name',
                  email: 'your-email@gmail.com',
                },
              ],
            })
          })
          /* END */
        },
      },
    ],
  }

Once you have it ready, the next time you build your project (yarn build) or run the yarn generate command, the result will be similar to the one generated at https://www.dawntraoz.com/feed.xml.

If you want to take it a step further, you can see more info on how to set up pagination and categories at how to generate an RSS feed with a headlessCMS.

Making use of our feed file

Not long ago, Github added the possibility to create a README as your profile description.

If you add a README file to the root of a public repository with the same name as your username, that README will automatically appear on your profile page.

I created a pretty basic one for myself. But this weekend, @Natterstefan made me discover the possibility of creating a workflow, using Github Actions, which reads my RSS feed automatically to display my latest published articles in a section of my Github profile.

At the post How to present your latest blog posts on your GitHub profile he explains how to do it in detail!

In my case, I only needed to create the workflow at .github/workflows/articles.yml and change the url of the workflow to my feed.xml:

name: Articles

on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [master]
  # Run workflow automatically
  schedule:
    # Runs every hour
    - cron: "0 * * * *"

jobs:
  update-readme-with-blog:
    name: Update this repo's README with the list of articles
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # comma-separated list of RSS feed urls
          feed_list: "https://www.dawntraoz.com/feed.xml"

And, to see the latest articles, I added these lines in the README.md file:

### ✍ Latest Blog Posts

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

And here is the result 😍

I hope you found this post useful 🤩 See you in the next article 👋

How to format dates without Moment.js

Alba Silvente Fuentes — Mon, 01 Feb 2021 10:33:07 +0000

In this post I want to tell you how I got rid of the moment library when I found new alternatives with smaller, even non-existent, size.

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

The moment of Moment.js has passed 😥

Five years ago, even before I knew the frameworks I work with today, Moment.js was the library that saved us from headaches trying to handle Date and its methods in its own way.

We are not going to deny, that when you start using a library and it solves your problem, you end up loving it and adding it to all the projects where you need to do some maths between dates or change your time zone. So you can imagine how many old projects use it.

If you would like to know more about why it is necessary to upgrade to a new library, I invite you to read Why you shouldn't use Moment.js...

But now, everything has changed and we have a lot of alternatives with which we can improve our performance. In my case, since in my website I only have a difference between dates and a few formatting, using only Date and Intl.DateTimeFormat I get what I need easily.

Intl.DateTimeFormat is an object that enable language-sensitive date and time formatting.

But for those projects that need to deal with more complex functionalities, here are a few libraries for different use cases that may be useful for you.

What alternatives do we have

Depending on how we use dates, there will be libraries that do better than others. Let's look at a few use cases and the top-rated libraries available.

Older browsers

Let's start with support for older versions of IE explorer, although that will no longer be necessary from August 2021.

Microsoft officially announced that it will stop support for IE11 and we will have to do the same, for our own health 😂

As Date.parse only handles ISO 8601 properly since ES5, to support IE9 we need libraries that use their own regex solution:

Luxon - A powerful, modern, and friendly wrapper for Javascript dates and times (from the creators of moment).

It also has a guide to help moment users to understand the new way of working: https://moment.github.io/luxon/docs/manual/moment.html
JS-Joda - An immutable date and time library for JavaScript. It provides a simple, domain-driven and clean API based on the ISO calendar system.

It comes with built-in parsers for ISO 8601 and supports ECMAScript 5 browsers down to IE9.

Parsing

When it comes to EPOCH Time Parsing, most libraries do it properly, but that doesn't mean that there're some libraries that manage to do it faster:

An epoch is a date and time from which a computer measures system time. The Unix epoch is the number of seconds that have elapsed since January 1, 1970.

Date fns - Provides the most comprehensive, simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. Date-fns is fast so users will have the best user experience.

Format

If we are concerned about formatting dates, Intl.DateTimeFormat or the methods provided by Date should be enough, but in case we need a library for other functionalities and we want to remain consistent throughout the project:

Day.js - Fast 2kB alternative, is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.

If you use Moment.js, you already know how to use Day.js.
Format.js is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.

A set of core libraries built on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.

Date time maths

But when our project requires to do maths with dates, we need a more powerful library to facilitate the operations and make it easier, without losing performance:

JS-Joda is still the one that gives the best performance results. But taking into account that it is not modular, we must be sure about whether it is necessary. Although it must be said that its roadmap includes a plan for reducing its size.

Support for the domain models LocalDate, LocalDateTime, ZonedDateTime, Instant, Duration and Period. Also, supports IANA timezone, adding the plugin @js-joda/timezone you'll have access to the IANA timezone database with all the timezones available.

Package size

If, on the other hand, size is the most important factor, and Date and Intl are not enough, a modular library with tree-shaking or a light-weight library may be the best choice:

Day.js - 2kB, less JavaScript to download, parse and execute, leaving more time for your code.
Date fns - In this library, you can pick what you need and stop bloating your project with useless functionality. It works well with modern module bundlers such as webpack, Browserify, or Rollup and supports tree-shaking.

Immutable

One thing that is important to know is that we left behind a library that mutated the objects we created, which could only lead to errors. From now on we will work with immutable objects!!

An immutable object is an object whose state cannot be modified after it is created. This is in contrast to a mutable object, which can be modified after it is created.

How I got rid of moment in my old projects

As I told you before, in my website I only had a couple of uses, so it was very easy to change. But in another project, I had a few problems with daylight savings and timezones.

In order not to forget, I'll explain the problems and the solutions I found without using any library:

Formatting

Format I wanted: Jan 2021 (Short month and year)

  // How it comes from my headlessCMS Storyblok
  const finishDate = '2021-01-31'

  // -- Before
  moment(finishDate).format('MMM YYYY')

  // -- After
  new Date(finishDate).toLocaleDateString('en-GB', {
    month: 'short',
    year: 'numeric',
  })
  // or (equivalent with Intl)
  new Intl.DateTimeFormat('en-GB', {
    month: 'short',
    year: 'numeric',
  }).format(new Date(finishDate))

Format I wanted: Sunday, 31 January 2021 (Name of the day, day number, long month and year)

  // How it comes from my headlessCMS Storyblok
  const finishDate = '2021-01-31'

  // -- Before
  moment(finishDate).format('dddd, D MMMM YYYY');

  // -- After
  new Date(finishDate).toLocaleDateString('en-GB', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
  // or (equivalent with Intl)
  new Intl.DateTimeFormat('en-GB', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(new Date(finishDate))

When it comes to learn the options of Intl.DateTimeFormat, this cheatsheet has been a great help 😍

Difference (Period of time)

On my website, I've represented the period of time I have been in each company. For that, I've calculated the difference between the entrance and leaving date:

// -- Before
const start = moment(this.start_date, 'YYYYMMDD')
const finish = moment(this.finish_date, 'YYYYMMDD')
const diff = moment.duration(finish.diff(start))

let formatDiff = ''
const year = diff.years()
const month = diff.months()

if (year > 0 && month > 0) {
  formatDiff += `${year} years & ${month} months` 
} else if (year > 0) {
  formatDiff += `${year} years`
} else if (month > 0) {
  formatDiff += `${month} months`
}
console.log(formatDiff)

// -- After
const start = new Date(this.start_date)
const finish = new Date(this.finish_date)
const diff = new Date(finish.getTime() - start.getTime())

let formatDiff = ''
const year = diff.getFullYear() - new Date(0).getFullYear() // 1970
const month = diff.getMonth()

if (year > 0 && month > 0) {
  formatDiff += `${year} years & ${month} months` 
} else if (year > 0) {
  formatDiff += `${year} years`
} else if (month > 0) {
  formatDiff += `${month} months`
}
console.log(formatDiff)

Once I got what I wanted, I set out to measure the times, to see if the change was also worthwhile in terms of performance. To my surprise, the change was much more than noticeable, going from ~0.10ms in moment to ~0.045ms using Date 😱

I measured it using performance.now() as follow:

const startTime = performance.now()

// -- Code calculating difference between dates

const endTime = performance.now()
console.log(endTime - startTime) // Result in milliseconds

If you've calculated time periods in a different way, I would love to see your solution 😍, you can send me a DM at @dawntraoz.

Working with Timezones

In backend, the common way to store a date in a database is in UTC format, so far so good.

But, when I created an instance of Date with the string coming from the DB, the result was set up to the browser's time zone.

The problem was related to the string coming from the DB, it didn't have any of the formats detected as UTC by Date. Adding 'Z' at the end of the string solved the issue.

const dbDate = '2021-01-25 00:10:16.2451106';

// Problem: UTC 0, it's not the hour we set up
const incorrectUTC = new Date(dbDate);
console.log(incorrectUTC.toUTCString()); // "Sun, 24 Jan 2021 23:10:16 GMT"

// Solution: Z added
const correctUTC = new Date(`${dbDate}Z`);
console.log(correctUTC.toUTCString()); // "Mon, 25 Jan 2021 00:10:16 GMT"

// -- Date from my TimeZone (CET)
console.log(correctUTC.toString()); // "Mon Jan 25 2021 01:10:16 GMT+0100 (Central European Standard Time)"

// -- Date from a chosen TimeZone (America/New_York)
const americaDate = correctUTC.toLocaleString('en-GB', {
  weekday: 'short',
  month: 'short',
  year: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZone: 'America/New_York',
  timeZoneName: 'short'
})
console.log(americaDate); // "Sun, 24 Jan 2021, 19:10:16 GMT-5"

While researching what was going on, I found in the documentation of Date.parse in MDN the root of the problem:

The first string, according to ES5, will imply UTC time, and the others are specifying UTC timezone via the ISO date specification ('Z' and '+00:00')

Date.parse("2019-01-01")
Date.parse("2019-01-01T00:00:00.000Z")
Date.parse("2019-01-01T00:00:00.000+00:00")

The following call, which does not specify a time zone will be set to 2019-01-01 at 00:00:00 in the local timezone of the system.

Date.parse("2019-01-01T00:00:00")

Timezones + Daylight saving rules

Another issue I came up while working with native Date.

Using an offset to calculate Timezone is a wrong approach, and you will always encounter problems while using it. Time zones and daylight saving rules may change on several occasions during a year, and it's difficult to keep up with changes.

To get the system's IANA timezone in JavaScript, you should use Intl TimeZone instead of Date offset:

// Not what we need - Doesn't take into account daylight saving rules
const offset = (new Date()).getTimezoneOffset() * 60000;

// Solution
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)

But even though I have decided to use Date and Intl in my projects, I still have the itch to try out the library Spacetime.

Spacetime is a solution without Intl that calculate time in remote timezones, support daylight savings, leap years, and hemispheres. I have to take a look at it and put it into practice 👀 Share with me your thoughts if you already tried it!!

Bye Bye moment 👋

And, well, we've come to the end, we've to leave moment behind. But, thanks to this library, many others have made their way to make our community a better place.

It only remains for me to say, thanks moment for everything you solved for us in its day and goodbye!!

2020 in review

Alba Silvente Fuentes — Thu, 31 Dec 2020 10:46:45 +0000

Well, the 2020 is coming to an end, and I would like to tell you how my year has been.

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

Since it's been a crazy year, I'm going to start at the beginning to bring order and clear my head.

This year began in Alicante (Spain), the city where I had lived all my life.

At that time, I was working remotely as a Senior Frontend developer for an Irish company called Square1 Software. In the evenings, once I finished work, I used to go to Hip Hop and Afrohouse classes at Sual Dance 💃

But that January something happened that changed my life completely: my boyfriend got a job offer from a company in Amsterdam. So the first thing I did was to ask my company if it was possible for me to go with him and work remotely from The Netherlands. Guess what the answer was? 🤩

Moving

January and February were the months of moves, goodbyes and headaches. Looking for a house, paying exorbitant deposits, looking for transport for the things we had accumulated living together, saying goodbye to friends, dance partners, family, notifying the landlady of our departure, ... It was chaos and stress... but we were going to Amsterdam!

Once we had arranged everything, it was time to get on a plane and come to Amsterdam. Yes, a week before the COVID came into our lives, perfect 😪

We will not deny that the global pandemic complicated things quite a bit. I had planned to continue working for Spain until I had adapted, but of course, with that situation I had to register ASAP. So I looked for a job and Blue Harvest, the company where I currently work as a Senior Consultant, gave me the opportunity.

I got the contract and finally, after three months of agony and uncertainty, I got an appointment at the city hall and became an official citizen of the Netherlands.

In June I finished at Square1 and started working at BH. And you will say, but between March and June, in the middle of quarantine in a new country, what did you do?

Creating my blog

Well, after the pandemic all my plans: attending tech events, seeing my favorite artists in concert, attending Hip Hop lessons at some cool school, were cancelled.

So I decided to spend my time on something I had always been looking forward to, but always procastinating: my own website with a blog and a portfolio.

I decided not to make my life too complicated, use the technologies I was familiar with and look for a simple CMS that would allow me to dynamize my blog without much effort. So TailwindCSS, as my faithful assistant in design, Nuxt, as the engine of my website, and Storyblok, my dynamizer, were my choices.

As I was clear that my website would be invisible to many people, and my goal was to create content that would be useful to me, but also to others who were struggling with the same things I was. I decided to duplicate my content in DEV using canonical URLs (advice given by Emma Bostian).

And, as if that wasn't enough, I decided to try a third one: Hashnode.

Obviously, it was becoming untenable and I needed a single place to start writing, and then already copy/paste on each platform with a CTRL+A. Here came into play our beloved Notion, where I created a custom blog with the necessary fields for each platform.

Throughout this time I have created more posts than I could have imagined. It has been necessary to list them in this post and it has been difficult to remember them 😂 But, obviously, as an expert in stalking people I have stalked myself to show you below.

Articles

In March I started writing, I set out to create one post every week, so that month I wrote two trying to explain concepts that cost me at the time, with case studies:

In April, I came up with the idea of contacting one of my best friends (Rocío Pascual), who was starting her practice in web design, so she could create a small design in Sketch that I could pass to code. In the articles I explain how to go from a design to TailwindCSS and VUE:

The same month Dany Paredes, a twitter follower who was very supportive of my work (he still doing it 🤗), suggested me to make an npm package with a component I had created for my blog. I thought it was a great idea and I decided to explain the process I needed to follow in this post:

5 Steps to publish my first npm package

In May, I needed fresh and new ideas. So, I went on twitter to ask what they would like to see in my content and many came to the same conclusion: A dashboard made with TailwindCSS.

I thought it was a great idea to exploit a bit more the Tailwind features. By the meantime, I added Nuxt and Storyblok to the tutorials to create a more complete project. These are the resultant posts:

In June, I had the opportunity to collaborate on two projects that I admire. One that I've already told you about is Storyblok, and the other is VueDose.tips, which for those of you who don't know it, is a blog/newsletter with articles on good practices at VUE. As I was able to choose my proposal, I talked about two topics that I was very interested in showing:

Storyblok article: How to use TailwindCSS, Express.js and Storyblok for AMP powered websites
VueDose article: How to structure a Vue.js app using Atomic Design and TailwindCSS

From the middle of June to the end of July I was doing my new job as a Senior Consultant and improving my English, that there are so many accents that one never quite learns 😅.

But in order not to lose the habit and to give a little content to my followers, I told them about a project I have in hand with my boyfriend (backender in .NET):

Presenting our new project Is!MyBug

And, as I went along, I told what I had achieved and wrote down what I was doing, so that I could have it as a guide for tomorrow and help more people. To my surprise the best posts and the best results so far:

How to deploy a Nuxt full static site in DigitalOcean
How to add CI with GitHub Actions - Nuxt case study (Runner up award at the GitHub Actions Hackathon)

At the end of October I decided to add a component on my website, to show the GitHub repositories that I had been creating throughout the year. And, while we were at it, I created a small component in VUE 3 and wrote an article about it:

How to show your GitHub repos VUE 3 with TailwindCSS dark mode

If more things couldn't happen in a single year, they did, believe me, they did.

Ambassador

An ambassador is simply someone who speaks positively about your company. Ambassadors on social media shout-out your business, show off their latest purchases and recommend you to their followers.

In the case of a technology it is more about sharing knowledge and making the product (framework, healdessCMS,...) known.

Although I was not aware at that time that this could happen to me, it was clear that I had invested my time and energy in creating technology content that I was passionate about. Well, it had its reward, my goodness, it did!

SamuelSnopko proposed me to join the Storyblok Ambassadors program, hence the collaboration I told you about earlier 😍. I agreed head on, I couldn't be happier or so I thought.

After a month or so, time has passed so quickly that I can't tell you 🤣 Debbie O'brien, my idol, my goddess (the woman I admire most after my mother and sister), proposed me to join Nuxt's newly opened Ambassador Program. I still haven't assimilated it.

Nuxt Ambassador Coffee in Youtube

Hackathons

In case there was a lack of work outside office hours, I decided to participate in several Hackathons that took place during the year.

First, I decided to present the workflow I had done for the Is!MyBug project at the GitHub Actions Hackathon, which took place in Dev.to. To my surprise, the day they created the post to say the winners my face was among the runners-up, what a blast 😱.

If that happened at the end of September, in October the Hacktoberfest appeared and I couldn't miss the opportunity to collaborate on open source projects. Thanks to DigitalOcean and DEV for making these cool initiatives a reality, and allowing me to plant a tree in the middle of a global pandemic.

Until that moment I had only collaborated in uses.tech and nuxtjs.org docs translations.

To narrate my adventures in the Hackathon, I wrote a post mentioning the projects where I collaborated: My contributions in this year 2020 Hacktoberfest.

In December, AdventOfCode 2020 started and many people came together in a group to do it. I decided to join in and start solving the puzzles in javascript, but creating a little showcase in VUE to make it more fun.

As that same month more things happened, I could only do 9 days, but here they are: https://github.com/Dawntraoz/advent-of-code-2020

One of the things that happened was DigitalOcean App Platform Hackathon in DEV.
I came very up and participated in the RandomRulette category, creating a Potatizer - Random Potato Mood generator.

They have been very cool experiences and that I recommend to everyone! 🎉

Talks & Podcasts

As if that wasn't enough, November was the month for podcasts and interviews.

Nacho Anaya proposed me to participate in his livestream channel VueVear as an interviewee, and since it was in my native language (Spanish), I didn't even think about it, I said yes. Here it is: VueVear S01E12 - Interview with Alba Silvente 💃

I appeared in the podcast of CafeConTech, in Spanish, talking a little about my life as a woman web developer and how I became an ambassador, after arriving here you already know 😅. You can take a look at Especial junto a Alba Silvente - Ambassador at NuxtJS and Storyblok.

To my surprise a super cool, unicorn-filled community 🦄, called Open Source Weekends (OSW) proposed me to participate in one of their live events, along with 3 other speakers who gave some incredible talks:

Miriam Gonzalez (my top unicorn) talking about her love story with Design & Development.
Javier Abadia (a js jedi) talking about evocative names better than flimsy names.
Jonathan OVH talking about the OVH's Startups program.

You can check it out at OSW Online Sessions #6 - Noviembre 2020, also in Spanish.

And to end November, one of the podcasts that scared me the most, but of which I am most proud, came out. My first podcast in English on #viewsonvue: VUE 130: Nuxt and Storyblok with Alba Silvente Fuentes. Amazing 🚀

And to end the year with joy, I got my first tech talk in Spanish at WTM Barcelona. In which I talked about Let's go back to Full Static using NuxtJS and Storyblok.

Certifications

When working as a consultant, I had the obligation to obtain the necessary certifications to qualify. Starting by ITIL V4 Foundation and following with Azure Fundamentals AZ-900.

It was not easy at all for me, I had no experience in Azure or knowledge of IT practices, so I am very proud to have taken them out 💜

Meetups

To finish this long post of 2020, here is the meetup that I will co-organize with Joost van der Schee, here in Amsterdam, for Jamstack lovers: Jamstack Amsterdam.

Conclusion

Well, we are done! It's been a crazy year, and I'm sure I'm forgetting something xD

But I have to say that apart from the few times that I have been able to breathe fresh air, the little that I have seen my family and friends and the parties that we have missed, it has been the best professional year of my life. That's for sure.

And I don't just owe it to my hard work and dedication, I owe it to the Vue, Nuxt, Storyblok community. To people who support the work of others, to people who give constructive feedback, to people who do not allow you to stay in your comfort zone and drive you. If I have come this far it is thanks to the people I surround myself with, a thousand thanks and I hope to support others as much as you have supported me 💜

✨Happy New Year 2021✨, will it go better or we will make it go better together!

I 💗 YOU