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.
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.
The State of CSS 2020 survey 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 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 stylelint-config-rational-order. …
The 2020 State of CSS Survey 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.
Like every library, their usage depends on use cases and there are situations where it doesn’t make sense to use them. …
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.
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. …
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.
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. …
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. …
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?
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: link.
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. …
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 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:
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.