Full Human

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 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…


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

Image for post
Image for post
From Chrome Dev Summit 2018 (https://youtu.be/UtD41bn6kJ0)

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…


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…


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: link.

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.


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 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…


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.


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

Image for post
Image for post

First part of this series, we are getting started with Strapi 3.0. As mentioned in the introduction, we are going to install it on Google Cloud Platform. The databases will be using Google Cloud SQL while the application will be containerized and run with Google Cloud Run.

Databases

One aspect missing from articles and tutorials I come across most of the time is how to prepare for multiple environments. When building a website for a client, or a company, building a development, staging, and production environment is often a necessity.

Fortunately, Strapi has thought about this fact, and you have a…


Series — Introduction

Image for post
Image for post

When building a professional website, for marketing or just a blog, we are submerged with different choices of technologies. I am entering a state of mind that is close to the ‘tool fatigue’ era. That era was about how many tools were available and how complicated the configuration was. Some would say things have not changed a lot since. Now, let’s look at how to create a professional website with technologies that are easy to use and without any complicated tools. We are going to focus on productivity.

Content Management System

Strapi is a headless Content Management System. If you are building any…


Removing unused CSS

Image for post
Image for post

When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc… But you will only use a small set of the framework, and a lot of unused CSS styles will be included.

One optimization would be to remove the CSS that is not used. You can inspect the unused bytes of CSS via Chrome developer tools. Trimming your CSS will make your website load faster because the browser will request less code, and less CSS will be parsed.

PurgeCSS works simplistically. First, we look at the content of our website; it…


Source set, WebP, lazy-loading

Image for post
Image for post

Optimizing images is a crucial step toward high-quality websites. But it is often a process that is not taking into account by many software developers. Let’s review the common ways we can use to optimize images easily at this point in time.

Full Human

Learn about web development, Full Human software engineering, product developments and more.

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