I have been using Dvorak for more than three years and would not recommend it

Keyboard
Keyboard
Photo by on .

The origin of QWERTY has been the subject of a lot of discussions. One theory is that the letters were placed to make its users type slowly because of typewriters’ hardware limitations. And the most common combinations of letters in the English language are separated.


Here is a list of CSS build tools mentioned in the state of CSS 2020 survey

Image for post
Image for post
Photo by on

FrontEnd development is evolving rapidly. And with it, CSS is getting interesting. New features such as logical properties, content-visibility have made their way into CSS recently.

has listed a few tools that developers know about and use regularly. Based on the survey result, let’s take a moment to list a few of those tools that you should probably know about.

Stylelint

Stylelint is a CSS linter and has over 170 built-in rules to catch errors, apply limits, and enforce stylistic conventions. It allows you to code with your team in a consistent and well-maintained style.

One config worth mentioning that demonstrates what stylelint can do is . …


And why you would use a library to do this task

Code
Code
Photo by on .

had a section dedicated to utility libraries. In that section, the question was about the usage of StyleLint, PurgeCSS, and PurifyCSS. Two of those libraries are for removing unused CSS. As the author of PurgeCSS and a contributor to PurifyCSS, I want to take a moment to explain what problems those libraries can solve and compare the three most popular libraries to do this job.

Why Do You Need a Library to Remove Unused CSS?

Like every library, their usage depends on use cases and there are situations where it doesn’t make sense to use them. …


A collection of resources to learn about the new features of CSS

Image for post
Image for post

The State of CSS survey is now over, and with so many new CSS features, you can easily be lost. Below are a compilation of resources to keep up to date with the layout features mentioned in the survey.

Layout

CSS Grid

CSS Grid is relatively new, and you might be unfamiliar with it still. Below are three resources that should help you with it. First is the MDN documentation. MDN is always a great resource to learn anything about the Web. I will start there to get a good base of knowledge about the topic.

The second resource is the excellent guide by CSS Tricks. There’s also a great guide on Flexbox, and the guide for Grid is as good. The separation between parent properties and child properties make it easy to understand CSS Grid. …


<virtual-scroller> is the native solution to create virtual list for the web

Image for post
Image for post
From Chrome Dev Summit 2018 ()

The virtual-list concept has been well documented in mobile development but has not yet come natively to the web. Android developers are using it with RecyclerView, iOS developers with UITableView. Let’s take a look at this concept that was promised to come to the web with a native built-in web component.

What is a virtual list in a nutshell?

First, let’s talk about what problem a normal list has. If you take a look at the repository below, you will find a page creating a list containing 50 000 rows.

Web browsers are capable are rendering that many rows but it takes a long amount of time. You can see in the pie chart below how Rendering is taking over at the performance of your website. …


Reproducing “The Verge” blog posts layout

Image for post
Image for post
Reproduction of “The Verge” blog post layout

CSS Grid is a display property in CSS useful to create layouts. Many developers have not used it because of a lack of browser support and the obligation to support Internet Explorer. Thankfully, the need to support Internet Explorer is going away. This article will show you one way to use CSS Grid to create the layout of blog posts.

The Verge is an information website. Articles are often presented with a visual separator that breaks the flow of the blog post. It makes the text more readable, breathable. Images separate blocks of texts, but sometimes quotes separate them.

Images are either full width, medium-size width, or of the same width as the text. Images and quotes are aligned with the text when you are using a mobile. CSS Grid, with its ability to create a layout with columns, is perfect for this use-case. …


The two sides of the same coin

Image for post
Image for post
Photo by on

I have been told a programming language is a tool, designed to build with. Frameworks exist to make you more productive. You should choose your technology stack and gain experience in it. What if you are curious and passionate about programming? What if you want to know everything?

My web development journey started with HTML, CSS, then PHP, and Javascript. I moved to learn about Jquery, Laravel, then Web component when Polymer was in beta version. Through Laravel, I discovered Vuejs, and that was my first authentic experience in the world of frontend development. I’ve been curious about development at a point where I would consider it being an obsession. …


Safelist and blocklist options. CLI changes

Image for post
Image for post

PurgeCSS is now a stable library, and while the bugs will keep being worked on and fixed, there’s a new major version introducing a few breaking changes.

If you don’t know what PurgeCSS is, the previous release article will explain what problem PurgeCSS is trying to solve and how it works: .

Simplifying whitelist option

Whitelist started as a simple option named `whitelist` but grew up with the different use-cases and needs that appear with time. Another option called `whitelistPatterns` appeared, then `whitelistPatternsChildren`, …
It is now more complex and complicated, and somewhat difficult to remember how to use it with different options.

To summarize the changes, the whitelist options are now grouped in one option called safelist. …


Part 2 of “A website with Strapi 3 — Next.js — Google Cloud Run”

Image for post
Image for post

In the second part of this series, we set up continuous deployment for our Strapi application deployed on Google Cloud Run. Continuous deployment is setup with Github Actions.

Github Actions

Github Actions is one of the most recent solutions for continuous integrations and deployment. It is deeply integrated within Github, which makes it a natural choice. The price is in line with the other solutions used in this series. It is free for open-source projects and has a free tier otherwise.

In your repository, you can have three different branches:

  • Master branch where the production version of your application lives
  • Staging branch that acts as a buffer to make sure what you want to push to live is what you…


Part 3 of “A website with Strapi 3 — Next.js — Google Cloud Run”

Image for post
Image for post

In this part of this series, let’s finally get a glimpse of what we can do with Next.JS. What we are going to do is reproduce a simple restaurant page that you can see on websites like Deliveroo.

To get things started, I created a store that contains the data needed for this page. Creating types is an excellent way to start. You can see it as creating the specifications of your website. It forces you to consider where you have to fetch the data as well. For demonstration purposes, all the data will be created and fetch from Strapi.

About

Floriel

Software Engineer and author of PurgeCSS — Writing articles about web development regularly

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store