Forem: CoderPad

10 Javascript Data Visualization Libraries Every Front-End Developer Should Know About

Abdulazeez Abdulazeez — Mon, 17 Apr 2023 10:38:02 +0000

Visuals are your best option for presenting data in the modern world. In reality, no one has the time to read through a large amount of information. You must be able to use data to tell your story in a way that is simple and quick for everyone to comprehend.

Data visualization, otherwise known as data viz., refers to the process of presenting data in a visual or graphical format. With data visualization tools, you can quickly present data and make it easier to digest.

As with every technical decision, choosing your tools is important based on their ease of integration, the number of features they provide, and their intuitiveness.

Throughout this article, we'll go over ten of the most commonly used Javascript data visualizations, some of which I've encountered the most frequently as a software engineer, as well as some I believe deserve more attention. We'll look at various libraries that offer data visualization techniques, such as the basic level chart (bar charts, pie charts, and so on), financial charts (candlesticks, trading indicators), map charts, scatter plot charts, and many more. We’ll also cover their capabilities and drawbacks, along with instructions and code samples on how to use them.

ApexChart

ApexChart is an open-source charting library that helps you create beautiful and interactive charts with limited code. ApexChart supports 16 chart types, including line, bar, area, pie chart, candlestick, heatmap, and many more.

In addition to providing beautiful charts, some of ApexChart's added advantages are that its charts are responsive and interactive—they are automatically rendered with customized icons that let you control the zoom of your charts, pan through datasets, and even let you export rendered charts as a PNG, SVG or CSV file. You can also create dynamic charts that allow you to load data on selections. They offer over 10+ different theme palettes for styling charts as well.

However, the Apexchart library is quite large, with its current version (v3.35.4) weighing in at around 496kb. As a result, when working with a large data set, you will begin to notice significant performance issues.

How to use

You can include ApexChart CDN in your project markup with:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Optionally, you can also install the library via npm with the command below:

$ npm install apexcharts

Once installed, you can get started with rendering charts by creating an option object specifying your chart style and dataset. Below is an example of an area chart with a random dataset:

<head>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  </head>
  <body>
    <div id="chart"></div>

    <script>
      var options = {
        chart: {
          height: 280,
          type: "area",
        },
        dataLabels: {
          enabled: false,
        },
        series: [
          {
            name: "Series 1",
            data: [75, 82, 68, 75],
          },
        ],
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.9,
            stops: [0, 90, 100],
          },
        },
        xaxis: {
          categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan"],
        },
      };
      var chart = new ApexCharts(document.querySelector("#chart"), options);
      chart.render();
    </script>

  </body>

Performance-wise, you can also explore this example with 1000 random datasets to see ApexChart performance with a large dataset.

To learn more: ApexChart Documentation

Chart.js

Chart.js is one of the most used JavaScript data visualization libraries and the second most starred on GitHub after D3.js, with over 57k stars as at the time of writing this article.
Chart.js provides simple, clean, and engaging charts that you can quickly incorporate into your application.

Some of its advantages are that it’s fairly easy to integrate this library into your application. It provides out-of-the-box support for nine different chart types, including Scatter Plot, Line, Bar, Pie, Donut, Bubble, Area, Radar, and Mixed Chart, all of which are also responsive and accessible by default. Additionally, its integration includes customizable labels, legends, hover pop-ups, and series toggling.

One of Chart.js' drawbacks is that its charts are rendered with a dull gray color by default, which can make styling different chart parts with different colors difficult when working with large datasets. You'll also need to put in extra effort to support basic chart features like zooming and panning.

How to use

Chart.js can be installed with npm via

$ npm install chart.js

Or include its script CDN link in your markup like below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

Chart.js usage is pretty much similar to that of ApexChart. To create a chart, you need to create a new instance of the Chart object while adding the chart target, its dataset, and additional option as its parameters. Below is an example of a simple Pie Chart created with chart.js:

 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div id="chart">
        <canvas id="myChart" style="height: 60vh"></canvas>
      </div>
    </div>
  </body>

  <script>
    const ctx = document.getElementById("myChart");
    const myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Green"],
        datasets: [
          {
            label: "# Ratings",
            data: [8, 19, 12],
            backgroundColor: ["#f44336", "#3f51b5", "#009688"],
            borderWidth: 2,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
        responsive: false,
      },
    });
  </script>

To learn more: Chart.js documentation

D3.js

D3.js is a javascript data viz library for adding dynamic and interactive visualizations to web applications. It is one of the most used and currently the most starred javascript data viz library on GitHub (with over 102k stars currently). Its first version was released in 2011, which is partly why it is so ubiquitous

D3.js differs from some of the other libraries mentioned in this tutorial. It does not directly provide charting features, such as how ApexCharts and Chart.js allow you to render charts by calling a single function. D3.js is more of a building block for constructing data visualization, i.e., it provides methods that let you gradually build your chart from ground up.

For this reason, it’s much more difficult to quickly create a simple chart with D3.js, as you need to know how its functions and modules work. As we'll see below, it also takes some pretty long code to create a basic chart with the library itself. However, its integration with other JavaScript libraries like react and vue has made it fairly easier to use.

How to use

You can get started with using D3.js by including its CDN link (which export a global d3 object) in your markup:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

You can also install d3 in a node.js project with the command npm install d3. Or using ES6 import:

<script type="module">
   import * as d3 from "https://cdn.skypack.dev/d3@7";
</script>

Let's explore the following example of creating a simple line chart with d3.js:

<script src="https://d3js.org/d3.v4.js"></script>

<div id="my_dataviz"></div>
<script>
  var margin = { top: 10, right: 30, bottom: 30, left: 60 },
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  var svg = d3
    .select("#my_dataviz")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  d3.csv(
    "https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

    function (d) {
      return { date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value };
    },

    function (data) {
      var x = d3
        .scaleTime()
        .domain(
          d3.extent(data, function (d) {
            return d.date;
          })
        )
        .range([0, width]);
      svg
        .append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

      var y = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(data, function (d) {
            return +d.value;
          }),
        ])
        .range([height, 0]);
      svg.append("g").call(d3.axisLeft(y));

      svg
        .append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr(
          "d",
          d3
            .line()
            .x(function (d) {
              return x(d.date);
            })
            .y(function (d) {
              return y(d.value);
            })
        );
    }
  );
</script>

With the code above, you can see how we had to first create an SVG element, load our chart data set from a remote API, and also use d3 to append this data into different paths in our SVG element.

It’s also worth mentioning that there’s a D3.js graph gallery which is a collection of ready-made charts created with d3 like the example.

To learn more: D3.js documentation

Techan.js

Techan.js is a charting library built on top of D3.js for adding interactive financial charts to your application. Techan lets you add stock charts, including candlestick, OHCL, indicators, and further technical analysis, which is particularly useful for financial applications.

While this library is still admirably serving its purpose and actively being used, it has not been updated for over 6 years now. This might be a concern if you’d prefer a library that is being actively reviewed. Another drawback of Techan.js is that you’ll need background knowledge of how d3.js works before you can understand how the library itself works.

How to use

Before you can get started with using Techan.js in your web application, you’ll need to include it’s script CDN, along with d3.js CDN:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>

Explore the following example of creating a simple candlestick chart with techan and d3.js:

<style>
  path.candle {
    stroke: #000000;
  }

  path.candle.body {
    stroke-width: 0;
  }

  path.candle.up {
    fill: #00aa00;
    stroke: #00aa00;
  }

  path.candle.down {
    fill: #ff0000;
    stroke: #ff0000;
  }
</style>
<body>
  <button>Update</button>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="http://techanjs.org/techan.min.js"></script>
  <script>
    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var parseDate = d3.timeParse("%d-%b-%y");

    var x = techan.scale.financetime().range([0, width]);

    var y = d3.scaleLinear().range([height, 0]);

    var candlestick = techan.plot.candlestick().xScale(x).yScale(y);

    var xAxis = d3.axisBottom().scale(x);
    var yAxis = d3.axisLeft().scale(y);

    var svg = d3
      .select("body")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("data.csv", function (error, data) {
      var accessor = candlestick.accessor();

      data = data
        .slice(0, 200)
        .map(function (d) {
          return {
            date: parseDate(d.Date),
            open: +d.Open,
            high: +d.High,
            low: +d.Low,
            close: +d.Close,
            volume: +d.Volume,
          };
        })
        .sort(function (a, b) {
          return d3.ascending(accessor.d(a), accessor.d(b));
        });

      svg.append("g").attr("class", "candlestick");

      svg
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")");

      svg
        .append("g")
        .attr("class", "y axis")
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Price ($)");

      // Data to display initially
      draw(data.slice(0, data.length - 20));
      // Only want this button to be active if the data has loaded
      d3.select("button")
        .on("click", function () {
          draw(data);
        })
        .style("display", "inline");
    });

    function draw(data) {
      x.domain(data.map(candlestick.accessor().d));
      y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());

      svg.selectAll("g.candlestick").datum(data).call(candlestick);
      svg.selectAll("g.x.axis").call(xAxis);
      svg.selectAll("g.y.axis").call(yAxis);
    }
  </script>
</body>

This example was recreated from techan.js gallery, which also includes code examples for the different types of financial charts the library supports.

To learn more: Techan.js documentation

AnyChart

AnyChart is another interesting charting library offering a different suite of chart types, including the basics charts (bar, pie, and others), different stock charts, and even PERT charts.

With AnyChart you can also integrate drawing tools into its stock charts, which is very useful in financial applications. AnyChart also offers chart localizations, with support for over 194 predefined locales, so you can visualize data for your users in different languages.

However, while AnyChart is open-source and free for non-profit use, you’ll need to purchase a license for use in commercial applications.

How to use

AnyChart offers integration with different languages, libraries, and frameworks; however, for this tutorial, we’ll be exploring its react plugin.

We can add AnyChart to our react application by installing with the following command:

$ npm install anychart-react

Once installed, we can then import its component and render a simple bar chart like below:

import AnyChart from "anychart-react/dist/anychart-react";

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <AnyChart type="bar" data={[3, 6, 2, 7, 9]} title="Simple bar chart" />
    </div>
  );
}

export default App;

For integration with other languages and frameworks, you can refer to their documentation page here.

Taucharts

This is another interesting open-source chart library built on top of d3.js and mostly used for data exploration and analysis. However, its integration is independent of prior familiarity with d3.js, unlike Techan.js.

Taucharts has a nice framework and has lots of extensibility options. Its plugin infrastructure is adaptable, allowing you to write plugins quickly.

How to use

For a traditional HTML project, you’ll need to include d3.js, taurichart.js, along with the Tauri CSS file like below:

 <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css"
    />
    <!-- .. -->
    <script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
  </head>

You can also install with npm via:

$ npm install taucharts

And once the installation is completed, you can get started with integrating it in your application by creating a new instance of the Taucharts object, including your dataset/data source, chart type, and other additional options to style your chart as its parameters.

Here’s what creating a simple line chart looks like with Taucharts:

<head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css"
    />
    <!-- .. -->
    <script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
  </head>

  <body>
    <div id="line"></div>
    <script>
      var datasource = [
        {
          type: "us",
          count: 0,
          date: "12-2013",
        },
        {
          type: "us",
          count: 10,
          date: "01-2014",
        },
        {
          type: "us",
          count: 15,
          date: "02-2014",
        },
        {
          type: "us",
          count: 12,
          date: "03-2014",
        },
        {
          type: "us",
          count: 16,
          date: "04-2014",
        },
        {
          type: "us",
          count: 13,
          date: "05-2014",
        },
        {
          type: "bug",
          count: 21,
          date: "01-2014",
        },
        {
          type: "bug",
          count: 19,
          date: "02-2014",
        },
        {
          type: "bug",
          count: 23,
          date: "03-2014",
        },
        {
          type: "bug",
          count: 26,
          date: "04-2014",
        },
        {
          type: "bug",
          count: 23,
          date: "05-2014",
        },
      ];
      var chart = new Taucharts.Chart({
        data: datasource,
        type: "line",
        x: "date",
        y: "count",
        color: "type",
      });

      chart.renderTo(document.getElementById("line"));
    </script>
  </body>
</html>

To learn more: Taucharts documentation

Zoomcharts

Zoomcharts helps you add interactive data visualizations to your application with minimal input and development time by using its ready-to-go charts library. Zoomcharts supports different chart types, notably network charts, matrix charts, facet charts, time charts, geo-map charts, and many more.

Zoomcharts is free for non-production use, however, you’ll also need to purchase a license and obtain an API key once your application is in production. Otherwise the library will start showing an error in your browser console.

How to use

You can add zoomcharts to your web project with its CDN link:

<script src="https://cdn.zoomcharts-cloud.com/1/stable/zoomcharts.js"></script>

And depending on the type of chart you’re trying to render, it's pretty much easy to do with a few lines of code. Below is an example of a time chart from the zoomcharts documentation:

    var t = new TimeChart({
        container: document.getElementById("demo"),
        data:
        {
            units:["h"],
            url: "https://zoomcharts.com/dvsl/data/time-chart/temperature-kuldiga-h.json"
        }
    });

To learn more: Zoomcharts documentation

Canvasjs

Canvasjs offers a lightweight library for creating performant and elegant looking charts, with over 30 different customizable charts to choose from. Canvasjs stock chart, in comparison to some of the other stock chart libraries (Techan.js), tends to be more intuitive and interactive. It also offers integration with the top javascript frameworks including react, vue, and angular, as well as with java, spring, and PHP.

Additionally, like AnyChart, Canvasjs also offers localization of charts, so that you’re able to render your chart elements in different languages.

However, while Canvasjs is free for development use, the development version will add a watermark to all your charts, and you’ll need to obtain a license to use it in production.

How to use

To get started, you first need to download the canvasjs compressed library here. The downloaded file once uncompressed includes a canvasjs.min.js file, which you can link to your website. Optionally, you could include the CDN directly in your markup like below:

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

And it's pretty much easy to start creating any chart. Here’s an example of a bubble chart from the Canvasjs documentation:

<html>
  <head>
    <script>
      window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
          title: {
            text: "Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009",
          },
          axisX: {
            title: "Life Expectancy",
            maximum: 85,
          },
          axisY: {
            title: "Fertility Rate",
          },

          legend: {
            verticalAlign: "bottom",
            horizontalAlign: "left",
          },
          data: [
            {
              type: "bubble",
              legendText: "Size of Bubble Represents Population",
              showInLegend: true,
              legendMarkerType: "circle",
              toolTipContent:
                "<strong>{name}</strong> <br/> Fertility Rate: {y}<br/> Life Expectancy: {x} yrs<br/> Population: {z} mn",
              dataPoints: [
                { x: 78.1, y: 2.0, z: 306.77, name: "US" },
                { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
                { x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
                { x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
                { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
                { x: 68.6, y: 1.54, z: 141.91, name: "Russia" },

                { x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
                { x: 79.8, y: 1.36, z: 81.9, name: "Australia" },
                { x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
                { x: 80.1, y: 1.94, z: 61.81, name: "UK" },
                { x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
                { x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
                { x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
                { x: 47.9, y: 6.42, z: 33.42, name: "Afghanistan" },
                { x: 50.3, y: 5.58, z: 18.55, name: "Angola" },
              ],
            },
          ],
        });

        chart.render();
      };
    </script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  </head>
  <body>
    <div id="chartContainer" style="height: 300px; width: 100%"></div>
  </body>
</html>

For more information, and integrating with other javascript frameworks, refer to their official documentation.

Highcharts

Highcharts is another great data visualization solution offering interactive charting capability. Compared to the other libraries in this article, Highcharts charts seem to offer more ready-made chart types.

Highcharts charts offer a lot of unique features, you can integrate your chart with different theme options, you can even create 3D charts, export charts in different formats, and convert your rendered charts to data tables on the fly. Another awesome feature is that you can create charts that are accessible to screen readers by adding descriptions to chart elements.

However, while highcharts is also free for non-commercial and personal use, you’ll need to purchase a license to integrate its libraries into commercial applications.

How to use

It's easy to get started with using highchart by adding its script CDN to your application:

<script src="https://code.highcharts.com/highcharts.js"></script>

And depending on the additional plugin you want to use, you’ll also need to import them independently.

It also requires less code to create high-level charts with this library. With this map projection example from their documentation, we can see how easy it is to visualize the world population density on a map.

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container"></div>

<script>
  (async () => {
    const mapData = await fetch(
      "https://code.highcharts.com/mapdata/custom/world.topo.json"
    ).then((response) => response.json());

    const data = await fetch(
      "https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json"
    ).then((response) => response.json());

    // Initialize the chart
    Highcharts.mapChart("container", {
      title: {
        text: "Predefined zoomed area",
      },

      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: "bottom",
        },
      },

      mapView: {
        projection: {
          name: "WebMercator",
        },
        center: [10, 58],
        zoom: 2.8,
      },

      colorAxis: {
        min: 1,
        max: 1000,
        type: "logarithmic",
      },

      legend: {
        title: {
          text: "Population density per km²",
        },
      },

      series: [
        {
          data,
          mapData,
          joinBy: ["iso-a2", "code"],
          name: "Population density",
          states: {
            hover: {
              color: "#a4edba",
            },
          },
          tooltip: {
            valueSuffix: "/km²",
          },
        },
      ],
    });
  })();
</script>

To learn more: Highcharts documentation

Toast UI Chart

Toast UI chart is another open-source chart solution. Toast UI isn’t a complete charting library per se; it’s more of a JavaScript library providing UI components similar to bootstrap. However, it has been included in this article since this type of thing is uncommon - UI libraries with support for charts.

Some of Toasts UI chart’s best features are that it’s lightweight, offers a wide range of chart types, and easily integrates charts via JavaScript components.

How to use

You can install Toast UI charts in your project with

$ npm install --save @toast-ui/chart

Or load its CDN via:

<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>

Here's an interactive example of a live updating chart created with Toast UI chart:

<link
  rel="stylesheet"
  href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css"
/>
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
<div id="chart-area"></div>

<script>
  const el = document.getElementById("chart-area");
  const data = {
    categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    series: [
      {
        name: "A",
        data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
      },
      {
        name: "B",
        data: [60, 40, 10, 33, 70, 90, 100, 17, 40, 80],
      },
    ],
  };
  const options = {
    chart: { title: "LiveUpdate", width: 900, height: 400 },
    xAxis: { pointOnColumn: false, title: { text: "X Title" } },
    yAxis: { title: "Y Title" },
    series: { shift: true },
  };

  const chart = toastui.Chart.areaChart({ el, data, options });
  let index = 11;
  const intervalId = setInterval(() => {
    const random = Math.round(Math.random() * 100);
    const random2 = Math.round(Math.random() * 100);
    chart.addData([random, random2], index.toString());
    index += 1;
    if (index === 30) {
      clearInterval(intervalId);
    }
  }, 1500);
</script>

To learn more: Toast UI documentation

Conclusion

And it’s a wrap! Throughout this article, we’ve explored ten different JavaScript data visualization libraries, the type of visualization tools they provide, additional features, their drawbacks, and how to get started with using them with interactive code samples.

We can’t definitively say which library is the best–that depends on how easily it integrates with your particular application and your intended use case–but hopefully, by now, you have some ideas on where to start.

This post was written by Elijah Asaolu, and I’m a software engineer and technical writer, actively sharing all I've learned through writing. You can also follow me on Twitter if you appreciate programming memes and tips.

A Guide To Svelte Stores

Abdulazeez Abdulazeez — Mon, 13 Mar 2023 16:36:42 +0000

State management is an important aspect of programming that helps to control the flow and behaviour of data within an application. By effectively managing the state of an application, it becomes easier to maintain and scale the application, resulting in improved efficiency and performance.

State management also makes it easier for developers to share data between different components of an application and to organize code in a way that is more efficient and effective. This can help to improve the overall functionality of the application.

In this article, we’ll discuss the svelte store, which is one of the ways we can manage our states in svelte. It is also regarded as the most efficient way to manage complex data.

Prerequisites

To follow through with this article, the following prerequisites are required:

Familiarity with the svelte framework
Understanding svelte components: Svelte components are reusable, self-contained UI elements that can be easily shared, imported, and composed to build complex user interfaces.
Reactivity: State management in svelte is based on the concept of reactive programming. It means that all the variables used by the application are tracked and can be modified by the user. When a variable is changed, the application will update its state accordingly. This makes it easier to track changes and keep the application running smoothly, as svelte stores are reactive.

Getting started

Let’s first create a basic application using the CoderPad Svelte sandbox to show how we can pass data between components.

In the sandbox, create a new file Child.svelte:

<!--- Child.svelte-->
<script>
  export let greeting
</script>
<span>{greeting}</span>

Replace the content of App.svelte with the code below:

<!--- App.svelte-->
<script>
import Child from "./Child.svelte"
</script>
<h1><Child  greeting ="hello world"/></h1>
<h1><Child  greeting ="hello john"/></h1>
<h1><Child  greeting ="hello micheal"/></h1>
<h1><Child  greeting ="hello doe"/></h1>
<h1><Child /></h1>

Here, we are defining the values of our variable greeting and passing them as props in our parent component, our App.svelte, to the child component, Child.svelte. Our child components then access these props and render them into the browser.

Component props are limited in how much data they can hold. Because of this, complex data sets would need to be broken down into multiple props, which can get messy and complicated.

We might also face a scenario whereby components do not need the props. We still have to send the props through them to be able to pass it further down in the component tree just for a particular component to access the data, which might not be a good thing if we are working with complex data in an application.

It would be nice to directly make the data available to the required component without manually drilling the props through every level of the component tree. One of the things we can use is the Context API. We then have the option of using a context.

The context API

The Svelte Context API is a feature that allows components to share states and functions with their children, grandchildren, and descendants. It provides a way of passing values and functions down the component tree without having to pass them at each level explicitly. This makes it easier to maintain and reason about the data flow in an application.

Svelte's context API is ideal for cross-component communication without complicating your codebase with props. The context API is made possible by two Svelte functions: getContext and setContext. Setting an object or value in the context and associating it with a key enables you to make it available anywhere within your app, as shown in the code below:

<script>
  import { setContext } from "svelte";
  const thisObject = {};
  setContext("thisKey", thisObject);
</script>

We want thisKey to be available inside a different component within our app, so we import it using the getContext function.

<script>
  import { getContext } from "svelte";
  const thisObject = getContext("thisKey");
</script>

For example, passing an array of todos between components:

<!-- App.svelte-->
<script>
  import { setContext } from "svelte";
  import Child from "./Child.svelte";
  let todo = ["do chores", "clean", "code", "play football"];
  setContext("key", todo);
</script>
<Child />

In the code above, we set the context key as key and pass todo object as the second argument.

We can now access the todo context from any other components like below:

<!-- TodoCard.svelte-->
<script>
  import { getContext } from "svelte";
  let todo = getContext("key");
</script>
<p>{todo}</p>

Although the Svelte context API is great for small applications, it becomes increasingly more work to manage the state simply and concisely as applications scale up.

Additionally, the context API does not provide any built-in methods for tracking changes to the data, making it difficult to track which pieces of data are outdated and need to be updated. For these reasons, it is better to use a store for managing and passing complex data between components.

Introducing svelte stores

A Svelte store is a JavaScript object that holds data similar to a variable. However, unlike a variable, Svelte stores can be observed, meaning that any part of the application can monitor changes to the store and respond accordingly.

It also makes it easier to keep track of changes to the data and makes it easier to modify the data when needed. The store is also the main way of sharing data between different parts of an application, making it easier to keep the code organized and maintainable.

The svelte store offers a solution that helps developers overcome these challenges by helping us manage our state. It detaches and manages it in an entirely different place so components can’t become bloated with unnecessary data. This makes Svelte Stores ideal for managing state in Svelte applications, as we can use them to store application data and allow components to reflect changes in the store.

Svelte has two primary types of stores, writable and readable stores. Svelte also offers a special type of store called a derived store.

Writable Stores

Writable stores are basically objects that hold values or attributes that various app components may access. They are the sources of information storage. Let's use the writable store to store a value we can later change or pass around in our application. We'll create our store as a JavaScript file, add some values and then export it:

<!-- weather.js -->
<script>
  import writable from 'svelte/store'
  export const weather = writable('sunny')
</script>

We can then import inside any other component where we'll need the data:

<script>
  import { weather } from './weather.js'
</script>

We can alter the value in a writable store, and when we need to change the value of weather in any component where we imported it, we can use the unset() method. The unset() method is used to remove a value that has been previously set in a component's state:

<!-- Newweather.svelte -->
<script>
  import { Weather } from './Weather.js'
  city.set('Rainy')
</script>

We can also use the update() method. This will help us invoke a callback in which the current value is passed as an argument:

<!-- Newweather.svelte -->
<script>
  import { Weather } from './Weather.js'
  const newWeather = 'Rainy'
  function changeWeather() {
    Weather.update(existing => newWeather)
  }
</script>

Alternatively, we could have components use Svelte's subscribe() function to monitor changes to the value we put in our store. The subscribe method in Svelte is used to add a reactive effect to a component:

<script>
  import { Weather } from './Weather.js'
  const watch = Weather.subscribe(value => {
    console.log(value);
  });
</script>

Readable stores

Readable stores, like writable stores, hold objects but cannot be modified by external components. You must set the value of a readable store when you create it. We use Readable stores to handle data that must be immutable. Below is an example of fetching the current date:

<!-- date.js -->
import { readable } from 'svelte/store'

export const date = readable(new Date())

<!-- app.svelte -->
<script>
import {date} from "./date.js"
</script>

<h1>Today's date is{$date}</h1>

Derived Stores

Derived stores, as the name implies, are derived from another store. The value of a derived store is updated when the store from which it was derived is updated. Derived stores are simply readable stores, but their values come from somewhere else, at least partially:

import { derived } from "svelte/store";
import { date } from "./store.js";
export const test = derived(date, ($date) => {
  return (
    $counter.getHours() +
    ":" +
    $counter.getMinutes() +
    ":" +
    $counter.getSeconds()
  );
});

Our derived store can then be imported into another component as follows:

<!-- App.svelte -->
<script>
  import { test } from "./derived.js";
</script>
<h1>
  {$test}
</h1>

Svelte store example: Building a student data list

To showcase how Svelte store could be used in real-time, we will be building an app where we’ll be able to manage state in svelte.

We can set up a new project folder and install svelte for this project example by following the steps mentioned earlier, or we can use the one created previously.

Project scope

For this project, we’ll be building a student data list that will display some student data, and we’ll do that with the help of a store.

Creating a store

We’ll be creating a store that will contain some student data. Inside the src folder, create a folder called stores and create a file called students.js. This file will define the methods for updating our store's values and resetting them to their default values when needed. Our students.js will contain the following:

import { writable } from "svelte/store";
const STUDENTS = [
  { name: "john", surname: "doe", age: 17 },
  { name: "micheal", surname: "angelo", age: 21 },
];

const { subscribe, set, update } = writable(STUDENTS);
const addStudent = (student) =>
  update((students) => {
    return [...students, student];
  });

const reset = () => {
  set(STUDENTS);
};

export default {
  subscribe,
  addStudent,
  reset,
};

Now we’ll import the exported methods, which are the subscribe, addStudent, and reset, into the component we’ll create shortly and use them to subscribe, add new values and reset our student list.

Creating our components

Next, we will create components that accept the methods exported from our store. We'll be creating two components: StudentPage.svelte, which will be used to add new student data, and StudentList, which will display the list of students that have been added.

In StudentPage.svelte, add the following:

<script>
  import students from "./stores/students";
</script>
<div class="studentPage">
  {#each $students as student}
    <p>{student.name} {student.surname}</p>
    <p>{student.age}</p>
    <hr />
  {/each}
</div>

We’ll make our StudentList a form so we can add new student data as well as reset them:

<script>
  import students from "./stores/students";
  // binding values
  let name = "";
  let surname = "";
  let age = "";
  // submit student
  const submitStudent = () => {
    students.addStudent({ name, surname, age });
    // reset values
    name = surname = age = "";
  };
</script>

<div class="studentList">
  <input type="text" bind:value={name} placeholder="Enter student make" />
  <input type="text" bind:value={surname} placeholder="Enter student surname" />
  <input type="year" bind:value={age} placeholder="Enter student age" />
  <input type="submit" on:click={submitStudent} value="Include Student" />
  <input type="submit" on:click={students.reset} value="Reset Student list" />
</div>

Let’s add some basic styling to our components. In our app.css, paste this in:

.studentList {
  margin: 0 auto;
  box-shadow: 0 0 30px 0;
  height: auto;
  max-width: 410px;
  background-color: rgb(231, 231, 231);
  padding: 20px;
}

input {
  margin: 30px 0 0;
  height: 30px;
  width: 100%;
  padding: 0 10px;
  outline: none;
  border: none;
  background-color: rgb(231, 231, 231);
  border-bottom: 1px solid #000;
  font-size: 1.1rem;
  transition: .3s;
}

button {
  border-radius: 6px;
  margin: 20px 0 0;
  height: 40px;
  width: 100%;
  color: #fff;
  padding: 0;
  outline: none;
  cursor: pointer;
  transition: .3s;
  border: none;
}

.button {
  background-color: rgba(26, 26, 204, 0.582);
}

.button:hover {
  background-color: rgb(26, 26, 204);
}

.reset {
  background-color: rgb(189, 42, 42);
}

.reset:hover {
  background-color: rgb(255, 0, 0);
}

/* studentpage styling */
.studentPage {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-bordered {
  border-width: 1px 1px 1px 0px;
  border-style: solid solid solid none;
  border-color: #fff #fff #fff -moz-use-text-color;
  border-collapse: collapse;
  border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 100%;
  overflow-x: auto;
}

.table-bordered th,
.table-bordered td {
  min-width: 150px;
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #fff;
}

.table-bordered th {
  background-color: rgb(88, 83, 83);
  color: #fff;
}

We’ll then import into each of our components using:

import "./app.css";

The last thing we’ll do is import both our components into our app.svelte:

<script>
  import StudentList from "./StudentList.svelte";
  import StudentPage from "./StudentPage.svelte";
</script>
<div>
  <StudentList />
  <StudentPage />
</div>

We just created an app and managed it using svelte stores! Play with the application in this sandbox.

Conclusion

Svelte stores are an effective way to manage and access data in your Svelte applications. They provide a centralized way to store data, making it easier to keep track of changes and make modifications when needed. Using a Svelte store is straightforward and can make your code cleaner and more maintainable.

Top 10 CSS Animation Libraries

Abdulazeez Abdulazeez — Wed, 22 Feb 2023 15:54:29 +0000

For the longest time, developers were limited to Flash players and gifs when they wanted to display animations on a web page.

However, the introduction of the keyframes, transition, and animation properties in CSS3 made it much easier to create and display abstract animations that were appealing to the eye. The CSS3 update not only allows for the creation of animations but also to conditionally render them for various pseudo states (i.e., hover, focus, etc.).

Creating animations with these properties is pretty straightforward. First, you define a keyframes rule containing the preferred animation sequence:

@keyframes float {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

You can see that we define a keyframe named float, which at 0% of the animation flow, sets the element transform property to translate by 0%, at 50% to translate by 15px on the y axis, and at 100% translate back to 0%.

We can then apply this keyframe flow to an element via the animation property:

.element {
  animation: floating 3s ease-in-out infinite;
}

/* OR */

.element:hover {
  animation: floating 3s ease-in-out infinite;
}

You'll notice that it takes a lot of code to create a simple float animation, and the code gets even longer when working on more complex ones. Animation libraries essentially solve this problem by making the process of adding animations to webpages as simple as adding class names to the appropriate elements.

This post will look at ten common CSS animation libraries and platforms for various types of animations, such as simple motion, elements/page transitions, lightbox animations, loaders, animating pages on scroll, and many more. We'll look at their benefits, limitations, and code examples to get you started quickly. Here’s the full list of libraries that we’ll cover:

Animate.css
Animista
Animation Library
Magic CSS
lightGallery
Loading.io
Skeleton Element
Micron
AnimXYZ
AOS

Animate.css

Animate.css is one of the most popular CSS animation libraries, having over 76k stars on GitHub at the time of this writing. Animate.css allows you to effortlessly add several ranges of animation to your web application by just including their class names in the element you wish to animate. Animate.css is very handy for displaying on-page animations, animation on sliders, and overall attention-grabbing animations.

This library also includes extra utility classes that allow you to adjust animation duration, speed, and repeat animation directly from your markup. You can also integrate animations provided by this library with the native CSS keyframe property, and call them directly from your CSS code.

How to use

Animate.css is available as a npm/yarn package, as well as via CDN:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

After including its CDN URL in your markup head section, you may start calling from its list of available animations, as shown below:

<div class="animate__animated animate__pulse">A pulse animated element</div>
<!-- using utility class  -->
<div class="animate__animated animate__pulse animate__infinite">A pulse animated element</div>

In the first example, we created a div with a pulse animation that will animate for 1 second by default, and in the second example, we configured the pulse animation to run endlessly using the animate__infinite utility class (which is an equivalent of CSS animation-iteration-count: infinite;). You can learn more about Animate.css via the links below.

Documentation | Github

Animista

Animista is more of a CSS animation platform than a library in that they provide animation on demand, i.e., you go to the platform, select the type of animation you want, and the animation CSS keyframe code is instantaneously generated for you.

On the surface, the types of animations available on Animista are very similar to those offered on animate.css, but, when you delve deeper, Animista offers a lot more useful animation categories, particularly for animating words and background elements. And, when you're ready to export your animation code, you can optionally choose to download standard or minified code.

How to use

As mentioned previously, you do not need to download any packages or include any CDN in your website to begin utilizing Animista; simply visit their homepage, select your favorite animation, customize the animation sequence as desired, and the code will be generated for you instantly.

Here’s a GIF showing this process:

Documentation | Github

Animation library

Animation library could be considered an Animate.css alternative, as they offer similar animation categories. However, unlike the former, animation library does not provide the additional customization options that allow you to set a preferred animation duration, speed, or timing.

Furthermore, animation library source files are divided into distinct classes — for example, all variants of the fade animation are in a single source file, as are other animation classes.

How to use

After downloading the ZIP file containing all available animation categories, you can choose to link to any of them and begin calling their associated class names in your markup. Here's an example of linking rotate.css and using the rotateUpRight style:

<head>
  <link rel="stylesheet" href="path/to/rotate.css">
</head>

<body>
  <div class="rotateUpRight">
    This div will rotate up right.
  </div>
</body>

Documentation | https://github.com/kaustubhmenon/animation-library[Github](url)

Magic CSS

Magic CSS is another interesting animation library that offers even more engaging animations compared to the ones we’ve covered so far. The animations provided by this package are very handy for page transitions. However, one disadvantage of magic CSS is that it does not support the Opera mini-browser.

How to use

Magic CSS usage is also pretty straightforward. You can get started by downloading the library from npm/yarn or simply download its CSS source file, and include it in your webpage markup. You can then begin calling from its list of animations:

<head>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/miniMAC/magic/master/dist/magic.min.css">
</head>

<body>
  <div class="magictime puffIn">
  </div>
</body>

Documentation | Github

lightGallery

lightGallery is unique from the other animation libraries we’ve mentioned so far, in that it is specifically designed for making lightbox images. Lightbox images, such as the one seen above, are images that, when clicked, overlay the current website in a modal form.

lightGallery is a versatile library in that it supports video files, allows you to render media assets in a carousel format, and lets you create custom plugins to extend or modify its functionality. It's also worth noting that lightGallery isn't entirely a pure CSS animation library because it relies on JavaScript to function.

How to use

lightGallery is available via npm/yarn, bower, and also served via a CDN. To get started on a traditional web page, you’ll first include its CSS and JavaScript CDN link in your web page like below:

<head>
  <link rel="stylesheet" href="/path/to/lightgallery-bundle.css" />
</head>

<body>
  <!-- . . .  -->
  <script src="/path/to/lightgallery.min.js"></script>
</body>

Following that, you create an element that will act as a container for all of the images you want to convert to lightbox:

<div id="lightbox-container">
  <a data-lg-size="1600-2400">
    <img src="path/to/img" />
  </a>
  <a data-lg-size="1024-800">
    <img src="path/to/img" />
  </a>
</div>

Finally, you initialize lightGallery via the previously created container, with the script below:

lightGallery(document.getElementById("lightbox-container"), {
  speed: 500
  //   ...
});

lightGallery also integrates with other JavaScript frameworks such as React, Angular, and Vue, making it even easier to use the library via components and props.

Documentation | Github

Loading.io

Loading.io is a platform that allows you to customize from a collection of rich loading animations and export your creation as a CSS keyframe animation, GIF, SVG, or PNG file. These animations are especially handy for building preloaders or depicting asynchronous activities’ loading states.

Loading.io offers more than just preloaders; the platform allows you to animate text and even background patterns. They also offer an additional loadingBar.js library for directly and interactively including its preloaders on a web page.

How to use

Loading.io usage is similar to Animista's in that no additional package is required to get started. You'd simply go to their website, choose a preferred loader, customize as desired, and then export.

Documentation | GitHub

Skeleton Elements

Skeleton loaders can also be categorized as preloaders. However, they differ from typical loaders in that skeleton loaders simulate the structure and appearance of loading content into gray blocks. It indicates what type of content is loading in each block, such as an image, text, and so on.

Skeleton elements is a popular library that provides this type of functionality, and it is also available as a component for several JavaScript frameworks.

How to use

The skeleton elements library is available via npm and is also served on a CDN. For a simple webpage, you can include its CDN in your markup head section like below:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/skeleton-elements@3.4.0/skeleton-elements.css" />
</head>

You can then start creating skeleton loaders via the skeleton-text and skeleton-block class:

<body>
  <h3 class="skeleton-text">Placeholder Header</h3>
  <p class="skeleton-text">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block" style="width:30%; height:50px"></div>
</body>

You can also add loading effects via the skeleton-effect-EFFECT_NAME class. Here’s our previous example modified with a wave effect:

<body>
  <h3 class="skeleton-text skeleton-effect-wave">Placeholder Header</h3>
  <p class="skeleton-text skeleton-effect-wave">
    Lorem ipsum dolor sit amet consectetur adipiscing elit.
  </p>
  <div class="skeleton-block skeleton-effect-wave" style="width:30%; height:50px"></div>
</body>

Documentation | Github

Micron

Micron is a JavaScript-controlled microinteraction library created with CSS animations. Simply put, micron allows you to easily attach multiple animations to elements when they are clicked. There are also other setup options to help you regulate the animation flow.

Furthermore, you can bind and simply trigger animation from other elements - for example, you might have a button element activate an animation you'd attach to another div.

How to use

You get started with micron by including its CSS and Javascript source file CDN in your markup, as shown below:

<link href="htps://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>

The library can then be used by adding a data-micron attribute to your elements. Here's an example of how to include the bounce interaction:

<div data-micron="bounce">Click to bounce</div>

Documentation | Github

Animxyz

Animxyz is another easy to use CSS interaction animation library that allows for customization via attributes. You can choose from a variety of animation options and easily integrate with other JavaScript frameworks including React and Vue.

This library was also created with SCSS, which allows for variable usage, so that you can easily customize the library source to your liking.

How to use

You can install this library using npm, import its core SASS mixins, and customize as desired. Or you can simply include its CDN link in the head section of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">

And you can start adding animations from its list by using the xyz attribute:

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

Documentation | GitHub

AOS

Animate on scroll (AOS) is another fascinating library that allows you to animate your markup elements while they are scrolling. The library offers predefined animations such as fade, flip, zoom, and so on, and allows you to attach them to custom elements while users scroll through them. It also includes additional configuration options that allow you to set a preferred animation duration, delay, and number of times it should run.

Furthermore, you are not limited to using only the animations provided by the library; you may also attach your own native animations created with the keyframe property.

How to use

To get started you first include the AOS CSS and JavaScript CDN link in your web page and then initialize the library as shown below:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

You can now start animating markup elements on scroll using the data-aos attribute:

<div data-aos="fade-up">
  This div will fade up when scrolled to
</div>

Documentation | Github

Conclusion

While creating basic animations on the web is fairly simple, it becomes tiresome when working on complex ones. In this article, we've explored ten CSS libraries offering various ranges of animation to help save you the stress of reinventing the wheel.

This post was written by Elijah, a technical writer, and software developer, actively sharing all he has learned through writing. Follow me on Twitter if you enjoy programming tips and memes.

A Guide To Database Unit Testing with Pytest and SQLAlchemy

Abdulazeez Abdulazeez — Wed, 15 Feb 2023 11:56:03 +0000

Testing is a decisive phase in your systems development lifecycle. This is an important step to make your software reliable and maintainable in the future. In this tutorial, you will have a practical guide to unit testing, one type of software testing by which individual units of your code are tested to determine if they are fit for use.

We will discuss how to do unit testing using pytest, which is a Python testing tool. This tool has useful features to help write better programs. We will test a database created by SQLAlchemy ORM.

At the end of this tutorial, you will learn how to test SQLAlchemy ORM using fixtures and the classic way to implement fixtures (setup and teardown methods).

As always, to grasp the ideas introduced in this tutorial, you need to experiment with your code by yourself, whether in your local machine or here in the CoderPad sandbox. The Pad sandbox has a ready environment to try out your experiments.

You can select Python 3, click on the three dots in the top left corner, and then select SQLAlchemy (Postgres) from the adapters. You're free to choose a MySQL adapter, but in this tutorial, we will use the Postgres engine in SQLAlchemy.
Before you start, you need to know more about how to interact with databases using SQLAlchemy with Postgres and revise transactions in SQLAlchemy.

Creating the database models

We will use the simple database models introduced in this SQLAlchemy tutorial.

For this tutorial, we will dump all the code in the Pad on the left window. But for a production use case, you need to structure your files into two files, for example:

models.py to have the database models
test_blog.py to have the testing suite So the database models would have the following:

from sqlalchemy import create_engine, Column, Integer, String, DateTime, Text, ForeignKey
from sqlalchemy.engine import URL
from sqlalchemy.orm import declarative_base, relationship, sessionmaker
from datetime import datetime

Base = declarative_base()


class Author(Base):
    __tablename__ = 'authors'

    id = Column(Integer(), primary_key=True)
    firstname = Column(String(100))
    lastname = Column(String(100))
    email = Column(String(255), nullable=False)
    joined = Column(DateTime(), default=datetime.now)

    articles = relationship('Article', backref='author')


class Article(Base):
    __tablename__ = 'articles'

    id = Column(Integer(), primary_key=True)
    slug = Column(String(100), nullable=False)
    title = Column(String(100), nullable=False)
    created_on = Column(DateTime(), default=datetime.now)
    updated_on = Column(DateTime(), default=datetime.now, onupdate=datetime.now)
    content = Column(Text)
    author_id = Column(Integer(), ForeignKey('authors.id'))

url = URL.create(
    drivername="postgresql",
    username="coderpad",
    host="/tmp/postgresql/socket",
    database="coderpad"
    )

engine = create_engine(url)
Session = sessionmaker(bind=engine)

So we have two tables, authors and articles, and we want to test a few units of a transactional database in SQLAlchemy.

Testing SQLAlchemy with Pytest

In the previous section, we defined the Session class, which we will use in the testing class. You can define a class called TestBlog, which contains the test functions. Each test function should start with test_ so that Pytest can understand it's a function that contains test cases.

Fixtures classic way

Fixtures is a powerful feature in Pytest. While testing a database created in an SQLAlchemy ORM, you need to ensure that the session is open at each test function call with just one setup. You don't need to instantiate it at every test function. You'd also need to close the session after all unit tests are done.

The classic way of using Python database fixtures in Pytest is to use setup and teardown functions. These functions are useful to avoid repeating code at every test function. This is useful because hitting the database multiple times would be discouraged, especially if you're testing a large application.

Here is how to write these methods:

class TestBlog:
    def setup_class(self):
        Base.metadata.create_all(engine)
        self.session = Session()
        self.valid_author = Author(
            firstname="Ezzeddin",
            lastname="Aybak",
            email="aybak_email@gmail.com"
        )

    def teardown_class(self):
        self.session.rollback()
        self.session.close()

The setup_class is called before all test methods in the TestBlog, while the teardown_class is called after all test methods. Both are called at the class level.

The setup method creates all your tables; authors and articles tables. It then defines the session, which is the Session object in SQLAlchemy in which the conversation with the database occurs. It also has the valid_author object, which we would frequently use in the following test functions.

However, the teardown method is the clean-up phase after all test methods. It rolls back the changes to the database and then closes the session, so there wouldn't be any conversation channel between the SQLAlchemy and your database anymore.

Testing a success test case

Let's start with testing the content retrieved by the database of the valid author:

class TestBlog:
    # ...
    def test_author_valid(self):   
        self.session.add(self.valid_author)
        self.session.commit()
        aybak = self.session.query(Author).filter_by(lastname="Aybak").first()
        assert aybak.firstname == "Ezzeddin"
        assert aybak.lastname != "Abdullah"
        assert aybak.email == "aybak_email@gmail.com"

Here, we use the session to add the valid author object (defined in the setup function). We then commit that change to the database and query that author. At the end of the test function, we typically use an assert statement to verify test expectations.

Testing a failure test case

Let's add another test method under the TestBlog class to test an integrity error, which is an exception raised when there is relational data integrity is affected:

from sqlalchemy.exc import IntegrityError

# ...
class TestBlog:
    # ...
    @pytest.mark.xfail(raises=IntegrityError)
    def test_author_no_email(self):
        author = Author(
            firstname="James",
            lastname="Clear"
        )
        self.session.add(author)
        try:
            self.session.commit()
        except IntegrityError:
            self.session.rollback()

In this test function, we use a pytest.mark.xfail decorator to mark this test_author_no_email test function that can fail for some reason. The reason to fail here is to have an IntegrityError while committing an author object with no email. That's because when we defined the authors table, we made a restriction on the email attribute to not have a NULL record.

In this test function, we use a try/except statement to be able to roll back the transaction where the IntegrityError exception occurs while committing to the DB.

Testing a referenced table

To reference a foreign key, you need to have the referenced object defined in the same test function, or you can define that object in the setup phase, where you can import it to other test functions. In our case, we defined the valid_author object, in the setup function, which we referenced in the articles table:

class TestBlog:
    # ...
    def test_article_valid(self):
        valid_article = Article(
            slug="sample-slug",
            title="Title of the Valid Article",
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            author=self.valid_author
            )
        self.session.add(valid_article)
        self.session.commit()
        sample_article = self.session.query(Article).filter_by(slug="sample-slug").first()
        assert sample_article.title == "Title of the Valid Article"
        assert len(sample_article.content.split(" ")) > 50

Here, we define an object for a valid article with the referenced valid author defined in the setup method. We then add and commit it to the database.
Finally, we verify our tests. For example, we verify the title and then verify the article's length to be greater than 50 words.

Running pytest

To invoke Pytest, you have some options mentioned in the Pytest documentation. In this tutorial, you can use the following line:

pytest.main(['-v'])

Place this line after the TestBlog class and outside of it to invoke Pytest in the same Python script.
We use the -v option here to increase verbosity and show each test function result.

Using fixtures

Instead of the classic way to use a fixture, let's look at how to define a fixture itself. But why do we need fixtures anyway?

In addition to the benefits of the classic way of defining fixtures, fixtures themselves are useful because they lead to dependency inversion. Dependency inversion is a design pattern useful when a test function receives other objects it depends on. It aims to separate the concerns which lead to loosely coupled programs.

Let's see fixtures in action and get rid of the setup_class and teardown_class methods. Now, define the following before the TestBlog class:

@pytest.fixture(scope="module")
def db_session():
    Base.metadata.create_all(engine)
    session = Session()
    yield session
    session.rollback()
    session.close()

@pytest.fixture(scope="module")
def valid_author():
    valid_author = Author(
        firstname="Ezzeddin",
        lastname="Aybak",
        email="aybak_email@gmail.com"
    )
    return valid_author

These fixtures are defined at the module level. That's why there is a scope option inside the pytest.fixture decorator. A fixture is called based on the scope.

ℹ️ A scope option is what you can use to share fixtures across classes, modules, packages, or sessions. In our case, the db_session and valid_author fixtures can only be called across this module.

The first fixture function creates all the tables metadata and then yields the session object whenever it's called. Each test function calling the session will receive the same session instance, thus saving time. So that fixture function is invoked once per the test module.

Using the yield statement is recommended. After the yield line, the session is rolled back and then closed, equivalent to the teardown code.

The second fixture function returns the valid author object whenever a test function calls it.

Note: The separation of concerns here is clear. Instead of the classic setup function, which contained both the session and the valid author objects, we now have two separate fixture functions for each.

Calling fixtures

To call a fixture inside a test function, you need to pass it as an argument to that function. Here is the new TestBlog class with the associated test functions:

class TestBlog:
    def test_author_valid(self, db_session, valid_author):
        db_session.add(valid_author)
        db_session.commit()
        aybak = db_session.query(Author).filter_by(lastname="Aybak").first()
        assert aybak.firstname == "Ezzeddin"
        assert aybak.lastname != "Abdullah"
        assert aybak.email == "aybak_email@gmail.com"

    @pytest.mark.xfail(raises=IntegrityError)
    def test_author_no_email(self, db_session):
        author = Author(
            firstname="James",
            lastname="Clear"
        )
        db_session.add(author)
        try:
            db_session.commit()
        except IntegrityError:
            db_session.rollback()

    def test_article_valid(self, db_session, valid_author):
        valid_article = Article(
            slug="sample-slug",
            title="Title of the Valid Article",
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
            author=valid_author
            )
        db_session.add(valid_article)
        db_session.commit()
        sample_article = db_session.query(Article).filter_by(slug="sample-slug").first()
        assert sample_article.title == "Title of the Valid Article"
        assert len(sample_article.content.split(" ")) > 50

As you can see, db_session and valid_author are passed into each test function as arguments. The db_session fixture replaces each self.session, and each self.valid_author is now replaced by the valid_author fixture.

Wrapping up

This tutorial has covered how to do unit testing for a transactional database in SQLAlchemy using Pytest. You started with creating the database models and then went through the classic way of using Pytest fixtures.
Finally, you learned how to use fixtures and why they are useful for writing efficient tests.

This post was written by Ezz. Ezz is an AWS Certified Machine Learning Specialist and a Data Platform Engineer. I help SaaS companies rank on Google. Check out his website for more.

A Guide to CSS Flexbox

Abdulazeez Abdulazeez — Thu, 19 Jan 2023 21:12:05 +0000

This article was originally published on the CoderPad blog

When you add HTML content to your web page, it stacks on top of itself, leaving a lot of space on the edges or making your content look odd. The float CSS property, along with position, was then used to define layouts and position elements, but it was complicated to use, especially when dealing with responsiveness.

You no longer need to use the float and position properties to organize your page's layout and style containers or content side by side. With the advancement of the web and technology, you now have two CSS layout systems: flexbox and CSS Grid. This guide focuses on CSS Flexbox, but you can bookmark our detailed guide on CSS Grid.

This guide will teach you everything you need to know about the CSS Flexbox layout system, including the Flexbox layout axis and all of its properties, justifying and aligning flex items, adding gaps and ordering these elements, and much more. You'll also learn when to use flexbox and when to use CSS grid by the end of this guide.

What is Flexbox?

CSS Flexbox is a one-dimensional layout system that you can use to create a row or column axis layout. It is a module rather than a single property because it includes several properties, some of which are for the flex container (parent element) and others for the flex items (children elements). This layout module allows the container to change its items' width/height (and order) to fit the available space best and support all display devices and screen sizes.

CSS Flexbox was introduced in 2009 as a new layout system to make it easier to build responsive web pages and organize your elements, and it has grown in popularity since then. Flex is designed to provide a more efficient way of laying out all items, aligning, and distributing space among each item in a container, even when each flex item's sizes are unknown and/or dynamic.

It simplifies designing and building responsive web pages by eliminating the need for tricky hacks and a plethora of float and position properties in your CSS code. Flexbox allows you to automatically scale elements (change their height or width) to fill the available space, shrink or grow elements to fit into the container, and prevent overflow. It can change the order of the items, create columns of the same height, design navigation panels, and much more.

Understand the Flexbox Layout Axis

The way items are laid out when you use flexbox is based on the flex directions. If the flex-direction is row which is the default value, your main axis is along the row, and your cross-axis is along the column. If the flex-direction is column, your main axis is along the column while your cross-axis is along the row.

The primary axis in which flex items are laid out in a flex container is usually referred to as the main axis. It is not necessarily horizontal because it depends on the flex-direction property. The cross-axis is perpendicular to the main axis. Its direction depends on the main-axis direction.

Flexbox properties

Flexbox is a module, meaning it comprises many properties that are either applied to the flexbox container or the flex items. Here is a table to show the list of elements that you can apply to either the flex container or items:

Flex container	Flex items
display	order
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex-basis
justify-content	flex
align-items	align-self
align-content
gap, row-gap, column-gap

How to make a flex container

The flex container is a container that holds all the flex items. For example, if you have a div that holds three other divs:

<div class="flex-container">
    <div class="flex-item">
        <p>Item One</p>
    </div>
    <div class="flex-item">
        <p>Item Two</p>
    </div>
    <div class="flex-item">
        <p>Item Three</p>
    </div>
</div>

To make the parent div a flex container, you would apply the display property and give it a value flex. This turns the container into a block element, allowing a flex layout for all of its direct children.

.flex-container {
    display: flex; 
}

You can also set the value to inline-flex, which works similarly. The only difference is that it creates a container as an inline element.

.flex-container {
    display: inline-flex; 
}

Note: An absolutely-positioned flex item does not participate in flex layout.

How to set flex-direction

You can set the direction of your flex items using the flex-direction property. You can set the items to flex vertically (column), horizontally (row), or even reverse the items in the specified direction using values like row-reverse and column-reverse.

.flex-container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

The flex-direction property will only work on a flex container, meaning you must have used the display property and set the value to flex or inline-flex.

The default value of flex-direction is row which sets the flex items from left to right. In contrast, row-reverse does the opposite and sets flex items right to left. column will set flex items from top to bottom with items order similar to row, while column-reverse will reverse the flex items from bottom to top.

Wrapping Flex Items

When you create a flex container, all its items (flex items) will try to fit onto one line by default. When these items reach the max-width, they shrink to fit onto that single line.

You can change that and let the items wrap as needed with the flex-wrap property. This property has three values, but the wrapped value will help avoid your flex items from shrinking onto one line.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

There are two other values, nowrap and wrap-reverse. wrap will help you wrap your items onto multiple lines, from top to bottom, rather than compressing all flex items to one line. While the default value of nowrap causes all flex items to shrink onto one line, wrap-reverse causes the flex items to wrap across multiple lines from bottom to top.

So far, you have learned two significant properties: flex-direction and flex-wrap. If you need to use both properties, then you can use the flex-flow shorthand property.

.flex-container {
    display: flex;
    flex-flow: column wrap;
}

How to align items along the main axis

The justify-content property defines the horizontal alignment of flex items. This property has six major values that perform individual functions, all aimed at exerting some control over the alignment of flex items.

.flex-container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start: This is the default value in which flex items are packed toward the start of the main axis or flex-direction.
flex-end: This is the opposite of flex-start, as flex items are packed toward the end of the main axis or flex-direction.
center: This perfectly fits the flex items within the flex container. Other options, such as start, end, left, and right, do what the value indicates. For example, when you set a value to right, the flex items will be packed toward the container's right edge.
space-between: This option evenly distributes flex items in the line starting and ending on the flex container border, except for padding or margin.
space-around: This option will evenly distribute flex items in line with equal space around them (left, right, bottom and top). It is important to know that between each element, the gap won't be the same as the top and bottom because this is the sum of the gap on the right and left of both elements.
space-evenly: This creates an exact space between each flex item, ensuring that the space between any two items and the edges is equal.

How to align items along the cross-axis

Asides from aligning items along the main axis, you can also do for the cross-axis using the align-items property. Just like the justify-content property, align-items also has about five values that can be used to align flex items.

.flex-container {
    display: flex;
    align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch: By default, flex items are stretched to fill the flex container, still respecting min-width and max-width properties.
flex-start: This places all flex items at the start of the cross-axis based on the flex-direction. Other values similar to this are start and self-start.
flex-end: This is the opposite of flex-start, as flex items are placed at the end of the cross-axis. Other values similar to this are end and self-end.
center: This places flex items in the center along the cross-axis.
baseline: All flex items are aligned in the sense that their baselines are aligned.

align-items works with the one-line flex items, while you can use the align-content property to define the vertical alignment of multiple lines of items. This property has no effect when only one line of flex items exists.

Note: In multiple line flexible containers, the align-content property will not work unless flex-wrap is set to wrap or wrap-reverse.

.flex-container {
    display: flex;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

The justify-content property is used to align individual items on the main axis, but you can also use align-content for the cross-axis when you want to space the items, move them to the start or end of the cross-axis, or stretch them.

flex-start: This can be used to move all your flex items to the start of the flex container based on the flex-direction. This is also similar to using start.
flex-end / end: This is the opposite of flex-start or start. The flex items are moved to the end of the flex container. This is also similar to using end.
center: All flex items are placed at the center of the flex container.
space-between: This will space all flex items evenly, starting and ending on the edge of the flex container.
space-around: This helps you evenly distribute equal space around each flex item. You can also make use of space-evenly for perfect spacing.
stretch: flex items are stretched to take up the entire space.

So far, you have learned how to align all flex items through the container element. But it is important to know that you can also align each item individually using the align-self property. The align-items property allows you to override the alignment specified for the flex container.

.flex-item {
    align-self: stretch | flex-start | flex-end | center | baseline;
}

The align-self property has the same values and meaning as align-items. Here's an example of what happens when you give each flex item its own align-self value.

This property is used when you need to add specific alignment to an individual flex item different from other flex items.

Gapping Flex items horizontally and vertically

At this point, one major aspect left for your flex container styling is adding gaps to your flex items. You will want to be able to add equal gaps between flex items either horizontally, vertically, or on both sides.

You can do this with the gap property. The gap property controls the amount of space between each flex item. The gap or spacing is only applied between the flex items and not on the outer edges. This property is for more than just flexbox, as it works in Grid and multi-column layouts.

.flex-container {
    display: flex;
    gap: 20px;
}

The gap property is a shorthand that you can use to specify one value for both the column and rows. When you want different values, you can use two values. The first is the row, while the second is for the column. Finally, you can use two properties: row-gap and column-gap.

.flex-container {
    display: flex;
    // ...
    gap: 20px;
    gap: 20px 30px; /* row-gap column gap */
    row-gap: 20px;
    column-gap: 30px;
}

Ordering Elements

You can use the order property to assign how flex items are ordered. You will use integer values to lay out these items from lowest to highest. When flex items have the same order, it will revert to the source order.

.flex-item {
    order: 5;
}

For example, if you have four items, you can specify how you want them to be ordered by giving them an order value:

flex item 1: order: 3
flex item 2: order: 1
flex item 3: order: 1
flex item 4: order: 2

The items above would be displayed in the following order, based on the value you set:

flex item 2: order: 1
flex item 3: order: 1
flex item 4: order: 2
flex item 1: order: 3

.item1 {
    order: 3;
}
.item2 {
    order: 1;
}
.item3 {
    order: 1;
}
.item4 {
    order: 2;
}

Sizing flex items - Grow or Shrink

Sizing flex items and making them flexible depends on three flex item properties: flex-basis, flex-grow, and flex-shrink.

flex-basis

This property specifies the length of flex items or individual flex items. This overrides any previously defined width for that element. This accepts length values (e.g., 10%, 4rem, etc.) and can also use auto, which uses the declared width value.

.flex-item {
    flex-basis: <length> | auto ; 
}

💡The flex-basis property has no effect if the element or item is not a flex item. This means that if it is not contained within a flex container.

The flex container in the image above is wrapped, which means that when it reaches the edge, the items will fall to the new line. The flex-basis property is then applied to the flex items and set to 30%, meaning each item will take up 30% of the total width, leaving 10%. You can use the flex-grow property to help the elements grow and cover up small spaces that cannot accept new flex items.

flex-grow

You can apply the flex-grow property to individual flex items or all flex items simultaneously. It defines a flex item's ability to grow. It ensures that flex items fill the available space inside the flex container by causing each item to grow following the supplied value. It has a default value of 0 and accepts a unitless value (e.g., 1, 2, 3 ...) as a proportion.

ℹ️ Negative numbers are invalid.

.flex-item {
    flex-grow: 1; 
}

If all of your flex items (perhaps with the same class name) have their flex-grow set to 1, the container's remaining space will be distributed evenly to all flex items.

If an item's flex-grow value is set to 2, it will gain twice the width of other items with flex-grow values of 1.

.item1 {
    flex-grow: 2;
}
.item2 {
    flex-grow: 1;
}
.item3 {
    flex-grow: 1;
}

This will work when the flex-basis is not set to any specific value.

flex-shrink

The flex-shrink property applies to flex items and specifies how much it will shrink each element if insufficient space exists. It has a default value of 1 and accepts a unitless value (e.g., 1, 2, 3) as a proportion.

Note: When set to 0, the flex item retains its original size. Negative numbers are invalid.

.flex-item {
    flex-shrink: 2;
}

When you set a specific width for each flex item, and the sum of the width plus the gap surpasses the flex container width, you can use flex-shrink to indicate how much each element will be reduced.

.item1 {
    flex-basis: 150px;
    flex-shrink: 1;
}
.item2 {
    flex-basis: 250px;
    flex-shrink: 2;
}
.item3 {
    flex-basis: 350px;
    flex-shrink: 3;
}

Note: flex-shrink won't work if the flex container has the flex-wrap property set to wrap.

The Flex shorthand for better syntax

Finally, you have learned that you can use these three properties to size your flex items. Instead of using three properties, you can combine its value using the flex property. It is a shorthand for flex-grow, flex-shrink, and flex-basis combined.

Note: flex-shrink, and flex-basis are optional.

.flex-item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

The default value for flex property is 0 1 auto, but if you use a single number value:

.flex-item {
    flex: 2;
}

This changes the flex-basis to 0%, so it's like setting:

.flex-item {
    flex-grow: 2;
    flex-shrink: 1; 
    flex-basis: 0%;
}

It is always recommended that you use this shorthand property because it intelligently sets the other values.

When to use Flexbox over CSS Grid

So far, you've learned what flexbox is, what it does, how it works, and that it's a CSS layout system similar to Grid. Then you wonder, do I choose one, or is there a situation where you must use flexbox over Grid?

It would be best to use CSS flexbox when you have a small design to implement with a few rows or columns. Also, when you need to align elements, flexbox comes in handy.

You can certainly build your entire website or application using only flexbox and achieve the same results as if you were using CSS grid, which is perfectly fine. However, for a better CSS approach, you must write codes that are clean, maintainable, and easy for others to manage over time. CSS grid is the best way to create and fit your layout perfectly.

Note: The Flexbox layout is best suited for application components and small-scale layouts, whereas the Grid layout is best suited for larger scale layouts.

In this very in-depth guide can learn more about CSS Grid.

Wrapping up!

In this guide, you have learned what the CSS Flexbox is all about, how it works and the various elements that you can use to help you create an awesome layout for your small projects.

There are so many instances when you’d need to make use of the CSS Flexbox such as centering items, on your Navbar, basic horizontal layouts and lots more. Having a proper understanding of each CSS property and their values will help you.

Have fun coding!

Everything You Need to Know about All 11 CSS Filters

Abdulazeez Abdulazeez — Thu, 12 Jan 2023 19:06:35 +0000

CSS, the language for visually styling elements on the web, has evolved to include features that can change an element’s visual effects in a website’s source code – freeing you from the need for graphical and photo editing software. Enter CSS filters.

CSS filters allow developers to alter an HTML element (usually an image) appearance before it gets displayed in the browser. It provides various operations that can be performed on an element to change its visual properties — for example, increasing the brightness of an image, enhancing an element's color intensity, adding a blur effect, and much more.

There are 11 filters in CSS, which are:

blur
brightness
contrast
grayscale
hue-rotate
invert
opacity
saturate
sepia
drop-shadow
url

This guide will walk you through each CSS filter, what they are, how they work, and how you can use them in your code.

How Do CSS Filters Work?

We can apply CSS filters to an element by declaring the CSS filter property within the element's style block, passing one or more of the 11 CSS filters as its value.

Syntax:

element {
    filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

Notice that each filter has an opening and closing parenthesis after its name. That is because each filter is a CSS function that accepts either a length, percentage, or degree value, signifying how much of the filter should be applied to an element.

Now, let's look at how each CSS filter works in detail.

blur

.blurry {
    filter: blur( <length>);
}

The CSS blur filter applies a Gaussian blur visual effect to an element. It accepts a CSS length unit (px, rem, em, etc.) to determine how many pixels on the screen need to blend into each other to generate a blurred result. The larger the value of the CSS length unit passed to the filter, the more blur is applied to the element. If we do not provide a value, a default value of 0 is used.

For the blur filter (and all CSS filters covered in this article) we'll use the image below to demonstrate each filter's effect on an element.

The code below adds a blur effect of 3px to the image:

img {
    filter: blur(3px);
}

Here is the result:

brightness

.exposed {
    filter: brightness( <decimal> | <percentage>);
}

The brightness filter adjusts the brightness level of an image. The filter applies a linear multiplier to the input image, making it appear brighter or darker.

It accepts a decimal value between 0 and 1, or a percentage value. A value of 0 results in a completely black image. A value of 100% or 1 leaves the image as is with its original brightness level. Values greater or less than 100% or 1 determine how dark or bright the image will be.

Note that all filter functions that accept decimal values do not work with negative integers (-10, for example) but only accept positive numbers.

The brightness filter has a default percentage and numerical value of 100% and 1. Passing a percentage or numerical value lower than these numbers reduces the image brightness level, giving it the appearance of having a shadow cast over it. The lower the value the higher the intensity of the shadow cast over it is.

The code below applies the brightness filter with a percentage value of 35% to an image:

img {
    filter: brightness(35%);
}

The result:

The opposite effect occurs when you pass a percentage or numerical value greater than 100% and 1 to the filter function. It increases the image's brightness level to make it appear like a photo that has been over-exposed to too much light.

The code below applies the brightness filter with a value of 135% to an image.

img {
    filter: brightness(135%);
}

The result:

contrast

.sharpen {
    filter: contrast(<decimal> | <percentage>);
}

The contrast filter adjusts the brightness difference between the darkest and lightest parts of an image, giving the image a more or less enhanced look.

It accepts a percentage or decimal value to determine the contrast level of an image — a value of 0 results in a completely gray image. Values above 100% and 1 increase the contrast, and parameters below decrease the contrast of the image.

The code below adds a contrast level of 180% to an image:

img {
    filter: contrast(180%);       
}

The result:

grayscale

.black-and-white {
    filter: grayscale( <decimal> | <percentage>)
}

In digital photography, an image contains both color information and luminance (brightness) information. The grayscale filter removes all color information (a representation of the three light sources — red, green, and blue (RGB) used to produce colors on a computer screen) from an image. It leaves only the luminance information — a range of monochromic (gray) shades, with pure white as the lightest shade, pure black as the darkest shade, and every other shade in between being a shade of gray — known as the grayscale.

The grayscale filter removes all color information from an image and sets its color to a tone in the grayscale.

It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 100% or 1 results in a completely gray image. The image would remain unchanged with a value of 0% or 0, and values between 0% and 100% give it a tone between its original color and complete gray, making the image have a desaturated look.

The code below uses the grayscale filter to make an image completely gray:

img {
    filter: grayscale(100%);
}

The result:

Typical applications where the grayscale filter could come into use would
be applying it to images when dark mode is enabled to slightly reduce the overall vibrancy of colors, putting less eye strain on the user. You might also use it to make client logos gray when listing them on a website.

hue-rotate

.change-color { 
    filter: hue-rotate(<angle> | <zero>); 
}

Digital photography uses a concept known as the color wheel, an organization of colors around a circle, showing the relationships between the primary, secondary, and tertiary colors to produce colors on a computer screen.

Each color in the color wheel has a property called hue, the position of the color (in angle degrees) on the wheel.

The hue-rotate filter accepts a CSS angle value (deg, grad, rad, or turn) and shifts the hue value of each color present on an element relative to the amount you specify, updating all colors relative to their hue's starting point.

For example, red is at 0 degrees on the color wheel, and blue is at 240 degrees. If a portion of an image contains red, passing a value of 240deg to the hue-rotate filter will shift the hues of all the colors on the image by 240 degrees, turning that part of the image from red to blue.

The code below adds a hue rotation of 180 degrees to an image:

img {
    filter: hue-rotate(180deg)
}

The result:

Note, the unit identifier for the hue-rotate filter is optional for zero angles. For example, both rotate(0deg) and rotate(0) are valid, but hue-rotate(45) is not.

invert

.turn-color-negative { 
    filter: invert(<decimal> | <percentage>); 
}

Remember the color wheel mentioned in the section above? When applied to an element or image, the CSS invert filter flips the hue of every color present by 180 degrees, converting each color to the color directly opposite it on the color wheel.

Bright areas become dark, red becomes cyan, magenta turns green, blue becomes yellow, and vice-versa, giving the image a color-negative effect.

The invert filter accepts a decimal value between 0 and 1, or a percentage value up to 100% that controls the extent of the color-negative effect. A value of 0.5 or 50% turns an image completely gray.

The code below inverts the colors on an image by 80%:

img {
    filter: invert(80%);
}

The result:

opacity

.transparent {
    filter: opacity( <decimal> | <percentage>)
}

The opacity filter applies a transparency effect to an element's colors. It accepts a percentage or decimal value to decide how much transparency to apply to an image. An opacity of 0% or 0 will result in a completely transparent element. 100% opacity will show no transparency. Setting the opacity between 0% and 100% will give the element or image partial transparency.

The code below adds an opacity of 35% to an image:

img {
    filter: opacity(35%);
}

The result:

You might notice that the opacity filter works just like the CSS opacity property because both control how transparent an element should be. The difference and why you should prefer the opacity filter over the CSS opacity property is that CSS filters are hardware-accelerated.

When you use the opacity filter to add opacity to an element, the browser will offload the computing task onto the Graphics Processing Unit (GPU) — a specialized processor designed to accelerate graphics rendering within the system. This increases the browser's efficiency and frees up the CPU to perform other tasks.

saturate

.enhance {
    filter: saturate(<decimal> | <percentage>);
}

The CSS saturate filter enhances or decreases the intensity of a color, known as its saturation, making it appear more or less vivid.

It accepts a decimal value between 0 and 1, or a percentage value. A value of 100% or 1 keeps the color as is. A value above 100% or 1 amplifies the color's intensity, making it more vibrant (saturated), while values below that reduce the color's intensity, making the color grayed and dull (desaturated).

The code below applies a 172% saturation to an image:

img {
    filter: saturate(172%);
}

The result:

sepia

.nineties-effect {
    filter: sepia(<decimal> | <percentage>);
}

The sepia filter adds a soft brownish color tone to an image, giving it a warmer and vintage appearance that is calming to the eye. It is similar to using the grayscale filter but with a brownish color tone.

It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 0 leaves the image unchanged. A value of 100% or 1 changes the image entirely to sepia, and values between 0% and 100% give the image a tone between its original color and completely sepia.

The code below calls the sepia filter with a percentage value of 100%, converting the image to be completely sepia:

img {
    filter: sepia(100%);
}

The result:

drop-shadow

.shadow {
    filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
}

The CSS drop-shadow filter applies an (often blurry) background shadow to an element, giving it a more three-dimensional look.

The drop-shadow filter accepts four parameters when applying a drop shadow to an element:

: A CSS length value that specifies the horizontal distance between the element and the drop shadow. Positive values place the shadow to the element's right, and negative values place the shadow to the left.
: A CSS length value that specifies the vertical distance between the element and the drop shadow. Positive values place the shadow below the element, and negative values place the shadow above it.
: The blur radius of the shadow is specified as a CSS length unit. The larger the value, the more blurred the shadow becomes. If left unspecified, it defaults to 0, producing a sharp and unblurred shadow. No negative values are permitted.
: The color of the shadow, specified as a CSS color. If left unspecified, it defaults to the color black.

Here's an example of setting a drop shadow to an element:

img {
    filter: drop-shadow(30px 30px 50px #000);
}

The code above adds a black shadow with a 50px blur to the image, setting it 30px to the right of the image and 30px below it.

Here's the result:

The drop-shadow filter looks much like the CSS box-shadow property at first glance. However, there's a difference between the two, and it's worth comparing those differences to know when to prefer one over the other.

One difference between the drop-shadow filter and the box-shadow property is the drop-shadow filter does not accept the inset keyword, which, when set, rather than aligning the shadow behind the element, inserts the shadow within the element, giving it a framed appearance.

For example:

div {
    height: 200px;
    width: 200px;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    box-shadow: inset 15px 12px 30px #000;
}

The result:

The result of using the insert keyword that's only available to the box-shadow property to insert the shadow into the div.

Another difference between the drop-shadow filter and the box-shadow property is the drop-shadow filter does not accept the parameter — a CSS length value that specifies how wide the shadow will span. Positive values cause the shadow to enlarge, and negative values cause the shadow to shrink. If not specified, it will default to a value of 0 (the shadow will be the same size as the element).

Example:

img {
    box-shadow: 30px 40px 50px 70px gray;
}

The code above adds a gray shadow with a 50px blur to an image, passing an additional length value of 70px that signifies the shadow will span 50px more than the image in width.

The result:

Lastly, to explain the significant difference between the drop-shadow filter and the box-shadow property, we'll be using the CoderPad logo below.

If the box-shadow property is used to add a shadow to the CoderPad logo above:

.coderpad {
    box-shadow: 10px 10px 30px #000; 
}

It results to the image below:

Notice that the shadow is applied to a rectangular box around the logo? This is because CSS uses a box model, where the edges of an element are bound in a rectangular box containing its padding, border, and margin properties. Even in cases where the element does not appear to have a rectangular shape, the box is still there, which is where the shadow will be applied.

CSS filters are not bound to the box model. That means that the drop-shadow filter will only consider the outline of the CoderPad logo, ignoring its box model so that only the contents of the logo receive the shadow.

For example:

.coderpad {
    filter: drop-shadow(15px 10px 28px #000);
}

The result:

Deciding which method to use between drop-shadow and box-shadow is totally up to you based on the effect you want to achieve.

url

.svg-filter { 
filter: url('#selector-of-your-svg-filter-here'); 

/* you can also load filters from external SVGs this way: */ 
filter: url('filters.svg#name-of-your-other-filter-here'); 
}

The url filter takes a string value pointing to an SVG filter element and applies its effects to an HTML element.

The SVG filter element <filter></filter> is used to add special visual effects to SVG graphics.

Syntax:

<svg> 
    <defs> 
        <filter id="name-your-filter-here">
             ... <!-- insert filters here --> ... 
        </filter> ... 
    </defs> 
</svg>

The <filter> tag takes a required id attribute to identify the filter. We can then use the url filter to apply the SVG filters to HTML elements using either the id selector of the filter or a link to it.

For example, the code below defines a blur filter using the
<feGaussianBlur> filter tag:

 <svg>
    <defs>
        <filter id="blur-filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
      </defs>
</svg>

Now, you can apply the SVG filter to an element by passing its id to the url filter:

img {
  filter: url("#blur-filter");
}

Here's the result.

Other Usage Notes

Here are a few more points to note when using CSS filters.

Using Multiple CSS Filters

Throughout this article, we have only looked at using a single CSS filter per section. However, you may combine two or more CSS filters to manipulate the rendering of an element.

Syntax:

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |          hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

We can pass two or more of the 11 CSS filters to the filter property, and CSS applies them to the element according to the order they appear.

For example:

img {
    filter: opacity(50%) drop-shadow(20px 10px 0px black);
}

The opacity filter comes first in the filter property in the code above before the drop-shadow. When rendering the image in the browser, CSS will apply an opacity of 50% to the image, making it partially transparent, before adding a drop-shadow.

Here's the result:

Reversing the order of the filter properties changes the result:

img {
    filter: drop-shadow(20px 10px 0px black) opacity(50%);
}

Usage with the initial and inherit keywords

In addition to the 11 CSS filters, the filter property accepts two extra values.
initial: The default value of the filter property — resolves to "none".
inherit: The computed value of the filter property from an element's direct parent.

Try using CSS filters yourself!

Hopefully, you now have a thorough understanding of all 11 CSS filters, how they work, and how you can use them to apply different visual effects to the elements on your websites.

CSS filters give you more independence from photo editing software when creating production assets and visual effects for your websites—helping save on both time and money. They enable you to apply these visual effects directly in the browser.

If you'd like to read more informative articles from our blog, check out the related posts below:

Victor is a frontend developer and technical writer interested in the JAMStack. and has a knack for breaking down developer concepts to understandable bits for others.

A Very, Very In-Depth Guide on CSS Grid

Victor Ikechukwu — Wed, 14 Dec 2022 06:42:59 +0000

As websites progressed from simple documents into complex, interactive applications, web developers have utilized multiple approaches to organize and control the layout of UI elements on a webpage:

From floating elements around the webpage with the CSS float property to
Inserting elements into an HTML table element to create a table-based layout
Positioning elements using the position property
And, more recently, using the Flexible box layout (Flexbox) to align content on the page.

While these techniques enable us to organize and control the layout of elements on a webpage, they are not always sustainable, as some lead to performance bottlenecks. For example:

Floats affect a web page's SEO.
Table-based layouts lead to non-semantic markup on our sites, compromising accessibility.
Positioning elements require using CSS hacks.

Enter CSS Grid.

CSS Grid is a layout system—a method of organizing elements on a webpage—used for building two-dimensional layouts. It is a structure made up of intersecting horizontal and vertical lines known as grid lines that divide the layout of an HTML element into rows and columns.

CSS Grid is a powerful tool that enables web developers to define the position of HTML elements and control how the elements would span horizontally and vertically across the page—a feat that cannot be achieved using other layout systems.

This article is a comprehensive guide for everything you need to know about the CSS Grid layout system.

In this article, we'll go over:

The CSS Grid vocabulary
How to make a basic grid
Inserting gutters between grid elements
What CSS Grid and Flexbox have in common
Aligning grid items horizontally
Aligning grid items vertically
Measurement units introduced with the CSS Grid layout
Useful CSS functions you should utilize when working with CSS Grid
Expanding grid items across multiple grid lines
Syntax to shorten the amount of CSS you need to type

The CSS Grid vocabulary

CSS Grid introduces a few new concepts you should familiarize yourself with before diving into its usage.

Grid container: The HTML element on which the grid layout is applied.

A grid container is what holds the grid itself. If the grid constructs a box, then the container makes up the corners of the box.

Grid item(s): All direct child elements of the grid container.

Grid line: These are the horizontal and vertical dividing lines that make up the structure of the grid. These lines reside on either side of a column (column grid lines) or row (row grid lines). Hence, a grid with four columns will have five column lines, with one after the last column.

Grid lines are the horizontal and vertical dividers (lines) that seperate grid items into a grid

Grid cell: The space between two column grid lines and two adjacent row grid lines, also known as grid tracks. It is a single unit of a grid and the smallest unit possible. By default, all grid items are laid out one item per grid cell.

A grid cell is the space between adjacent grid lines. Think of them as smaller boxes that construct the larger grid system.

Grid track: The area between two adjacent grid lines. The gap between two grid row lines is a row track, and the gap between two grid column lines is a column track. The size of a grid track determines the width and height of our grid items.

A grid track is the area between two adjacent grid lines. Horizontal grid tracks are known as rows, and vertical grid tracks are known as columns.

Grid area: A rectangular area on the grid made up of one or more grid cells. Grid areas are created when a grid item spans over one-to-many grid tracks. They must be rectangular; creating a T- or L-shaped grid area is impossible.

A grid area is a rectangular area on the grid and can consist of something as small as one cell, or as big as the entire grid

Now, without further ado, let's dive in!

How to make a basic grid

To create a CSS Grid layout, you'll first need to define a grid container. The grid container can be any individual parent element (for example, a div).

To define a grid container, pass the display property with either a value of grid or inline-grid to an element's style block. Doing this will implicitly convert all direct child elements of the grid container into grid items.

.block-level-grid-container {
display: grid;
}

.inline-level-grid-container {
display: inline-grid;
}

The value grid makes the parent grid element act a bit like an unstyled div, making it span the full width of a page by default due to them being block-level elements. In contrast, the value inline-grid behaves much like an unstyled span, making it act like an inline element to its siblings.

Let's look at an example.

<div class="container">
        <div class="box a">1</div>
        <div class="box b">2</div>
        <div class="box c">3</div>
        <div class="box d">4</div>
 </div>

In the code block above, we define a div with a class of "container". Within the div are four child elements.

We can now set the div as a grid container.

.container {
display: grid;
}

The result:

The four elements are stacked on top of one-another vertically

Setting an element to a grid container alone will not immediately affect how the child elements are displayed, as we still haven't specified how the layout should look. Hence, CSS lays out the grid items in a single-column grid.

To change the layout of the grid items within a grid, we must explicitly define the rows and columns we want our grid to have. To do that, we'll use the CSS properties grid-template-columns and grid-template-rows.

Grid Template Columns

The grid-template-columns property lets us specify the number of columns we want in a grid container and how wide each column should be.

The grid-template-columns property accepts one or more non-negative CSS length unit values. The number of CSS-length values passed to the property specifies how many columns our grid container will have, and each value represents how wide each column (i.e., each grid track) would be.

For example:

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
}

The result:

Because there are three columns, with four items, there will be two rows. The top row will have 1, 2, and 3 split into thirds, each 400px wide. The bottom row will have a 400px wide 4 element.

In the example above, we use the grid-template-columns property to change the layout of our grid container to be divided into three columns, each 400px wide.

Notice that the last grid item starts on a new row below the first three columns. That is because we only specified three columns that are each 400px wide. Consequently, when the number of grid items in the grid container exceeds three, CSS will wrap other grid items into new rows to maintain the container's layout.

Note that we can't assign negative values to the CSS properties associated with the grid layout. Passing a value such as-400px to the grid-template-columns property will not affect the structure of a grid.

Grid Template Rows

The grid-template-rows property lets us specify the height of each row in a grid container.

Unlike the grid-template-columns property, it doesn't specify the number of rows our grid container should have. It only sets the height of each row. Such behavior occurs because a grid container will implicitly create a new row whenever grid items wrap into new lines. Hence, we can't control the number of rows that should be present in a grid using the grid-template-rows property.

The grid-template-rows property accepts one or more non-negative CSS length values where each value represents the height of each row in a grid container, from the first to the last.

For example:

.container {
  display: grid;
  grid-template-columns: 400px 400px 400px;
  grid-template-rows: 100px 200px;
}

In the code above, values of 100px and 200px are passed to the grid-template-rows property. This gives the first row in the grid container a height of 100px and the second row a height of 200px.

The result:

Four elements with numbers inside of them are divided into a grid. There are two rows in this grid; the first is 100px tall, while the second is 200px high.

In the code above, the grid-template-rows property sets only the heights of the first two rows in the grid container. If we are to add more grid items to the grid container and it creates new rows to wrap them onto, the heights of these implicitly created rows will not be determined by the grid-template-rows property but by the size of their content.

A grid that contains twelve items and is split into three columns will create four rows. The first row is 100px high, the second is 200px, and the third and fourth are only as tall as the element's contents.

Adding a gap between rows and columns

Adding more rows and columns to a grid container without properly spacing them apart would make the grid look too jam-packed and not helpful as a layout system. We can add gutters (spacing) between columns and rows to space them apart by adjusting the size of our grid lines. Let's explore how we can do that.

column-gap

The column-gap property adds some spacing between columns by adjusting the width of the vertical grid lines in a grid container. It accepts a non-negative CSS length value which defines how broad the grid line between each column will be.

For example:

.container { 
display: grid; 
column-gap: 28px;
}

The code above sets the width of every vertical (column) grid line in the grid container to 28px. This adds a space of 28px between every column in the grid.

The result:

With three columns inside of a grid, there is now a 28 pixels gap to separate each column within the grid. The rows do not have a gap, as one has not yet been specified.

row-gap

Just like column-gap, the row-gap property adds some spacing between rows in a grid container by adjusting the height of all horizontal grid lines in a grid container. It accepts a non-negative CSS length value which defines how large the grid line between each row will be.

For example:

.container { 
display: grid; 
column-row: 40px;
}

The code above sets the height of every horizontal (row) grid line in the grid container to 40px. This adds a distance of 40px between every row in the grid.

The result:

There are two rows in this column, with a 40px gap between them

We can combine the column-gap and row-gap properties to space our columns and rows.

.container { 
display: grid; 
column-gap: 20px;
   row-gap: 20px;
}

The result:

A grid with rows and columns and a 20px of spacing between cells specified with the aforementioned CSS

Using just a few lines of CSS, we have created a grid layout with all the basic CSS Grid properties such as columns, rows, and gutters.

What does CSS Grid have in common with Flexbox?

The Flexible box layout, commonly referred to as Flexbox, is a one-dimensional layout system that excels in allocating space between elements and aligning content on a webpage. It shares some similar features and characteristics with the CSS Grid layout, such as implementing the Box Alignment Level 3 specification for aligning flex items, the same standard CSS Grid uses for aligning grid items in a grid container. You can learn more about the Flexbox layout here.

How to align content horizontally

CSS Grid exposes six properties that let us control the alignment of grid items along the rows (inline axis) or columns (block axis) of a grid container. In this section, we'll go over each property that aligns grid items horizontally along the columns of the grid container.

justify-items

The justify-items property controls the alignment of all grid items along a grid container's inline (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.

start — aligns grid items to the beginning of all columns, which is the left edge of their cell.

For example:

.container {
justify-items: start;
}

Items in the container are aligned to the left of the cell

end — aligns grid items to the end of all columns, which is the right edge of their cell.

For example:

.container {
justify-items: end;
}

Items in the container are aligned to the right of the cell

center — places all grid items at the center of their cells.

For example:

.container {
justify-items: center;
}

Items in the container are aligned to the center of the cell, with space on both sides

stretch — will stretch out the grid items to fill the whole width of their cells: this is the default value of the justify-items property.

For example:

.container {
justify-items: stretch;
}

Items in the container take up the entire space of the cell

justify-content

The justify-content property lets you set the horizontal alignment of the entire grid within the inline (row) axis of the grid container. It accepts seven possible values.

start — aligns the entire grid to the left edge of the grid container.

For example:

.container {
justify-content: start; 
}

end — aligns the entire grid to the right edge of the grid container.

For example:

.container { 
justify-content: end; 
}

center — places the entire grid horizontally at the center of the grid container.

For example:

.container { 
justify-content: center; 
}

stretch — resizes the grid items to allow the grid to fill the entire width of the grid container: this is the default value of the justify-content property.

For example:

.container { 
justify-content: stretch; 
}

space-around — adds an even amount of space between each grid item, with half-sized spaces on both ends of the grid.

For example:

.container { 
justify-content: space-around; 
}

space-between — creates an even amount of space between each grid item, with no space at the ends of the grid.

For example:

.container { 
justify-content: space-between; 
}

space-evenly — puts an even amount of space between each grid item and on both ends of the grid.

For example:

.container { 
justify-content: space-evenly; 
}

justify-self

This behavior of the justify-items property that controls the alignment of grid items along the inline (row) axis of a grid container can also be set on individual grid items via the justify-self property. This property is passed to the grid items. It accepts four possible values.

start — aligns a grid item to the beginning of a column, which is the left edge of its cell.

For example:

.box-1 {
justify-self: start;
}

The first item in the grid is aligned to the left of the cell space, while all of the other items stretch to fill the cell area.

end — aligns the grid item to the end of a column, which is the right edge of its cell.

For example:

.box-2 {
justify-self: end;
}

The second item in the grid is aligned to the right of the cell space, while all of the other items stretch to fill the cell area.

center — places the grid item at the center of its cell.

For example:

.box-3 {
justify-self: center;
}

The third item in the grid is aligned to the center of the cell space, while all of the other items stretch to fill the cell area.

stretch — will stretch out the grid item to fill the entire cell width; this is the default value of the justify-self property.

For example:

.box-1 {
justify-self: stretch;
}

The first grid item, like all grid items in the grid, is stretched to take up the full horizontal space of the grid cell.

How to align content vertically

Now let's look at the properties that align grid items vertically along the rows of the grid container.

align-items

The align-items property controls the alignment of all grid items along a grid container's block (column) axis. It is passed to the grid container, and its value applies to all grid items within the grid. It accepts four possible values.

start — places all grid items at the top of all rows.

For example:

.container {
align-items: start;
}

The items in the grid are aligned to the top of the cell space.

end — places all grid items at the bottom of all rows.

For example:

.container {
align-items: end;
}

The items in the grid are aligned to the bottom of the cell space.

center — places all grid items at the center of their cells.

For example:

.container {
align-items: center;
}

The items in the grid are aligned to the vertical center of the cell space.

stretch — will stretch out all grid items to fill the entire height of their cells; this is the default value.

For example:

.container {
align-items: stretch;
}

The items in the grid are stretched to take up the full vertical space of the cell space.

align-content

The align-content property lets you set the vertical alignment of the entire grid within the block (column) axis of the grid container. It accepts seven possible values.

start — aligns the entire grid to the top of the grid container.

For example:

.container {
align-content: start; 
}

Captured with the help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

end — aligns the entire grid to the bottom of the grid container.

For example:

.container { 
align-content: end; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

center — places the entire grid vertically at the center of the grid container.

For example:

.container { 
align-content: center; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

stretch — The grid items stretch to fill the full height of the container grid; this is the default value.

For example:

.container { 
align-content: stretch; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-around — creates an even amount of space between each grid item, with half-sized spaces on both ends of the grid.

For example:

.container { 
align-content: space-around; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-between — adds an even amount of space between each grid item, with no space at the ends of the grid.

For example:

.container { 
align-content: space-between; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

space-evenly — places an even amount of space between each grid item and on both ends of the grid.

For example:

.container { 
align-content: space-evenly; 
}

Captured with help of: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_align-content_center

align-self

This behavior of the align-items property that controls the alignment of grid items along the block (column) axis of a grid container can also be set on individual grid items via the align-self property. This property is passed to the grid items. It accepts four possible values.

start — places a grid item at the top of its cell.

For example:

.box-4 {
align-self: start;
}

The fourth item in the grid is aligned to the top of the cell space, while all of the other items stretch to fill the cell area.

end — places a grid item at the bottom of its cell.

For example:

.box-5 {
align-self: end;
}

The fifth item in the grid is aligned to the bottom of the cell space, while all of the other items stretch to fill the cell area.

center — places a grid item at the center of its cells.

For example:

.box-6 {
align-self: center;
}

The sixth item in the grid is aligned to the vertical center of the cell space, while all of the other items stretch to fill the cell area.

stretch — will stretch out the grid item to fill the entire height of its cell; this is the default value.

For example:

.box-1 {
align-self: stretch;
}

The first grid item, like all grid items in the grid, is stretched to take up the full vertical space of the grid cell.

Introducing new measurement units

Aside from non-negative CSS length values such as px, rem, vw, and percentages (%), you can also use special sizing units and keywords to control the size of grid items in a grid.

The fractional (fr) unit

The fr unit, short for "fractional," is a length unit introduced with the CSS Grid layout. It represents a fraction of the free space available in a grid container. This makes it the ideal unit for defining responsive columns and rows that will scale as the browser's viewport shrinks and grows.

Let's look at an example to explain how helpful the fr unit is and why it's a better alternative to other CSS length units.

Say we are to create a grid layout made up of three columns where the first column takes up 1/6 of the grid's width, the second column takes up twice the width of the first column, and the third column takes up three times the width of the first column.

If we weren't using the fr unit in the example above, we'd have to perform some math on our end. We had to figure out the total width of the grid (100%), divide that by 6, then multiply whatever the result is by how wide each column should span, which would be.

width of first column = 100% / 6 * 1 ---> 15%
width of second column = 100% / 6 * 2 ---> 30%
width of third column = 100% / 6 * 3 ---> 45%

As the layout becomes more complex, using percentages or any CSS math function becomes unsustainable. This is when the fr unit comes in handy.

The fr unit tidies all this by letting us specify how the available space in a grid container should be distributed among its rows and columns. Then it spreads the space available in that order.

.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}

In the code above, we assign a fraction of the available space in a grid container to the first column, then twice to the second column, and thrice to the third column.

The result:

A grid that consists of three columns and two rows. The first column is one-third the size of the last column and half the size of the second column.

min-content

The min-content is a sizing keyword that sets the width of a grid track to its intrinsic minimum width, which is usually the size of the smallest content or text within its grid items. It works similarly to the CSS function min, but is used as a spacing unit instead of a function.

When applied to a column or row, they become as narrow as the longest word in their track. This lets you get the shortest measurement of the content inside the grid items.

For example:

.container {
display: grid;
grid-template-columns: 1fr min-content 1fr;
}

In the code above, we set the first and third columns to be as wide as a fraction of the grid container while passing the min-content to the second column, making it shrink to the size of the words in its grid items.

The result:

A grid with three columns. The middle column only takes up the smallest amount of space needed to display a single character, while the first and last columns take up all remaining space.

max-content

The max-content sizing keyword has the opposite effect of min-content;max-content behaves similarly to a CSS function: max(). When applied to either a column or row, the track becomes as wide as possible for all the content within the grid items to display in one long unbroken line.

The most significant benefit of using max-content is that you can let the content within our grid items breathe and spread out rather than wrapping them into new lines, which causes vertical text overflows.

For example:

.container {
display: grid;
grid-template-columns: 1fr max-content 1fr;
}

The code above defines three columns and sets the width of the second column to the max-content keyword. If we add a lot of words to the grid items in the second column, the text in these grid items won't overflow. Instead, the width of the second column will grow, and the first and third columns will shrink to accommodate it.

The result:

A grid with three columns. The middle column has a sentence that's not broken into newlines, but rather stretches to fill as much space as it needs and no more. The first and last columns take up all remaining space.

Useful CSS functions to combine with CSS Grid

When working with the CSS Grid layout, there are a few handy functions you should familiarize yourself with to help increase the efficiency of your CSS.

repeat()

The repeat() function lets us define recurring unit declarations for our grid container's rows or columns in a more compact form.

For example, suppose you repeat unit declarations when defining columns or rows using the grid-template-rows and grid-template-column properties. You can use the repeat() function to declare these recurring patterns more concisely.

The function takes two arguments:

repeat count: this is an integer value of 1 or higher, or the keyword values auto-fill or auto-fit. It specifies the number of times the recurring pattern of the rows or columns should repeat.
track(s) definition: this is where we specify the recurring pattern of rows or columns to repeat. We can pass one or more non-negative length values to it, where each value represents the size of a row or column.

Essentially, its syntax is this:

repeat(<number of columns/rows>, <the height or width of each column /row>);

Say we want to create a grid with six equal columns. Without the repeat() function, we'd have to explicitly define each column using the grid-template-columns property.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

However, as the number of columns increases, this approach becomes unsustainable and verbose. We can rewrite this into a more compact form using the repeat() function.

.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}

Here we use the repeat() function to create a column that spans over a fraction of our grid container, repeating the process six times. This drastically reduces the number of repetitive unit declarations in our CSS.

The result:

Six evenly spaced items in a row

minmax()

When defining a responsive grid layout, you likely want to give each grid track a minimum and maximum size to ensure that they scale up and down to fit their content as the viewport resizes. This is where the minmax() property comes in handy.

The minmax() function lets us specify a minimum and maximum size for a grid track. As the grid is resized across viewports, the grid track will grow and shrink across that range. On smaller screens, it will shrink until it reaches the minimum size. And on larger screens, it will stretch until it reaches the maximum size.

The minmax() function takes two parameters, min and max, where:

min is the minimum size of the track.
max is the maximum size of the track.

Syntax:

minmax(<minimum allowed value>, <maximum value>);

The minmax() function also accepts CSS Grid sizing units, keywords, length and percentage values.

Let's look at an example using the minmax() function.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, minmax(100px, max-content));
}

In the code above, we use the minmax() function to set the minimum height of the two rows in our grid container to 100px and the maximum height to max-content, which ensures each row stretches and becomes as wide as possible to contain its contents if it gets taller than 100px.

The result:

Two rows and three columns. The three columns have equidistant widths. The first row has 100px height, and the second has the height of a paragraph inside one of the cells.

A significant benefit of the minmax() function is that it reduces the need for media queries. Rather than relying mainly on media queries to control the size of grid tracks (columns and rows) across viewports, it lets you set up, to a degree, a responsive transition of values for a grid track.

fit-content()

The fit-content() function operates similarly to the minmax() function. The difference is that with fit-content(), the minimum value is the size of the content within the grid item, and the maximum value would be the value we pass to it. This lets you clamp your content to the smallest value and scale it up to a certain value as needed.

When applied to a grid track, it sets the size of the grid track to its intrinsic minimum width, which is the size of the smallest piece of content or text in its grid items. The caveat is that the smallest piece of content or text size is not larger than the value specified in the function.

However, if the value of the intrinsic minimum width exceeds the value supplied to the function, the size of the grid track is set to the value passed to the fit-content() function, and the content of the grid items will begin to wrap.

For example:

.container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(300px) fit-content(400px);
}

The code above creates three columns with widths of 200px, 300px, and 400px, respectively, using the fit-content() function. This means that the size of each column will be equal to the size of the smallest piece of content or text in its grid items, but if that becomes greater than the value supplied to the fit-content() function, then the size of the columns will be set to the value passed to the fit-content() function.

The result:

A grid with three columns. The first and third columns are only as wide as a single character, since that's what they contain. The middle column is 300px wide because there's a paragraph in the middle of it

Expanding grid items across multiple grid lines

Remember, when talking about grid lines, the horizontal lines reside on either side of a row (known as row grid lines), and the vertical lines reside on either side of a column (known as column grid lines) within the grid container.

In the grid container, each grid line is given a number based on its position on the grid. The first grid line (row or column) is given the number 1, the second 2, and so on.

For example, the image below displays the number of grid lines present on a grid container with three columns and two rows, where the column lines are the numbers inside the orange circle from 1 - 4, while the row lines are the ones inside the blue circle from 1 - 3.

A grid system with the lines numbered as described previously

The browser uses these grid lines to control the layout and position of items within the grid. For instance, in the image above, the first column spans from column line 1 to column line 2, and the first grid item will be placed between those lines and span that wide. However, a handful of CSS Grid properties let us control the position of grid items along these grid lines and how wide they would span horizontally and vertically across them.

The properties you can use to control the position of grid items and how they span across these lines are:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Let's go over each in detail.

grid-column-start

The grid-column-start CSS property lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container. This start position defines the start of the left edge of the grid item.

Using the grid layout below, let's target the first grid item and set its horizontal starting position to column line 2.

A grid with two rows and three columns with each cell area numbered. The first row is "1, 2, 3," and the second row is "4, 5, 6"

We can target the div using CSS pseudo-selectors, or you can apply classes to the element and target it with that.

.container div:nth-of-type(1) {
  grid-column-start: 2;
}

Doing this, the horizontal starting position of the selected grid item will be on the second vertical grid line (column line 2).

A grid with three rows and three columns, and six items. The first item in the grid starts on the second column, which shifts every numbered cell item to the right by 1, overflowing to the left.

From the image above, the first grid item now begins at column line 2, while the other grid items are pushed over, wrapping onto new rows or creating empty spaces on the grid.

grid-column-end

Along with specifying the horizontal starting position of a grid item with grid-column-start, we can set where the grid item should end using the grid-column-end property.

For example:

.container div:nth-of-type(1) {
  grid-column-start: 2;
  grid-column-end: 4;
}

This makes the first grid item start on column line 2, span across two grid lines, and end on line 4. Using the grid-column-start and grid-column-end properties, we can effectively control the horizontal starting position of a grid item and how wide it spans across the grid.

The result:

A grid with three rows and three columns, and six items. The first item in the grid starts on the second column and spans into the third column, which shifts every numbered cell item to the right by 2, overflowing to the left.

grid-row-start

The grid-row-start property lets us specify the vertical starting position of a grid item along the horizontal (row) grid lines within the grid container. This sets the line where the grid item begins.

For example:

.container div:nth-of-type(2) {
  grid-row-start: 1;
}

In the code above, we set the vertical starting position of the second div element to row line 1 using the grid-row-start property.

The result:

A grid with three rows and three columns and six items. The order of the items is: "2, 1", "3, 4, 5", then "6" on each row, respectively

grid-row-end

The CSS grid-row-end property lets us specify the vertical ending position of a grid item along the horizontal (row) grid lines within the grid container.

For example:

.container div:nth-of-type(2) {
    grid-row-start: 1;
    grid-row-start: 4;
}

This makes the second grid item start on the first-row line and span down three grid lines, ending on line 4. Using the grid-row-start and grid-row-end properties, we can effectively control the vertical starting position of a grid item and its height down the grid.

The result:

A grid with three rows and columns. The first item starts on the second column and stretches to the third column on the first row. The second item starts on the first row and stretches to the third row on the first column. The last four items make up a two-by-two square in the bottom left corner.

CSS Grid shorthands

Like most CSS properties, CSS Grid offers a handful of shorthand properties that provide a shorter and more forward way to set the values of multiple CSS Grid properties simultaneously. Using these shorthand properties, we can write more concise (and often, more readable) style sheets, saving time and energy.

Let's take a look at these properties.

Using a single CSS rule to set all gutters in a grid

In this guide, we have seen how we can add gutters (spacing) between columns and rows to space them apart using the column-gap and row-gap grid properties. Using a single property — gap, we can set the values for both the column-gap and row-gap properties.

The gap property is a shorthand for the row-gap and column-gap properties. It lets us add gutters (spacing) between columns and rows.

Syntax:

gap: <row-gap> <column-gap>

The gap property accepts two values where:
:
<row-gap> is the first value passed to the gap property. It sets the value of the row-gap property.
<column-gap> is the second value passed to the gap property and sets the value of the column-gap property. It is an optional value, and if omitted, it's set to the same value as <row-gap>.

For example:

.container {
    display: grid;
    gap: 20px;
}

This adds a space of 20px between all columns and rows in a grid container and is the same as the code below.

.container { 
    display: grid; 
    column-row: 20px;
    row-gap: 20px;
}

Combining horizontal and vertical alignments into single CSS rules

We talked about the six CSS Grid properties that let us control the alignment of grid items along the rows (incline axis) and columns (block axis) of a grid container. In this section, we'll go over the shorthand properties that let us set the alignment of grid items much better.

place-items

place-items is a shorthand property that lets us set the values for the align-items and justify-items properties in a single declaration. It allows us to control the alignment of all grid items horizontally and vertically at once.

It accepts two values: the first value sets the value of the align-items property, and the second sets that of the justify-items property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.container { 
    display: grid; 
    place-items: center; 
}

This sets the value of both the align-items and justify-items properties to center, placing all grid items at the center of their grid areas.

place-content

place-content is a shorthand property that lets us set the values for the grid properties align-content and justify-content in a single declaration—enabling us to control the horizontal and vertical alignment of the entire grid within the grid container at once.

It accepts two values: the first value sets the value of the align-content property, and the second sets that of the justify-content property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.container { 
    display: grid; 
    place-content: center; 
}

This sets the value of both the align-content and justify-content properties to center, centering the entire grid within the grid container horizontally and vertically.

place-self

place-items is a shorthand property that lets us set the values for the align-self and justify-self properties in a single declaration. It enables you to control an individual grid item's horizontal and vertical alignment within its grid area.

It accepts two values: the first value sets the value of the align-self property, and the second sets that of the justify-self property. If the second value is not specified, the first value will be assigned as the value of both properties.

For example:

.item { 
place-self: end center;
}

In the code above, the value of the align-self property is set to 'end,' which pushes the grid item vertically down to the bottom of its grid cell. And the justify-self property is set to 'center,' which places the grid item horizontally at the center of its cell.

The result:

The first grid item in the grid is aligned to the vertical end of the cell space and horizontally at the center, while all of the other items stretch to fill the cell area

Shortening the CSS for spanning grid items across columns and rows

Declaring the 'grid-column-start,' 'grid-column-end,' 'grid-row-start,' and 'grid-row-end' attributes anytime you want to span a grid item across some columns and rows can be somewhat redundant. Let's look at some shorthand properties that can help us declare the CSS to span grid items more concisely.

grid-column

The grid-column is a shorthand property for the grid-column-start and grid-column-end properties. It lets us specify the horizontal starting position of a grid item along the column grid lines within the grid container and where the grid item should end.

Syntax:

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

The grid-column property accepts two grid line values separated by a slash (/) where:

The first value, column-start, is the value of the grid-column-start property.
The second value after the slash, column-end, is the value of the grid-column-end property.
And the slash (/) serves as a demarcator between these two values as both can contain one or more whitespaces. As a result, passing the slash is required to eliminate errors and ambiguity. Also, as a best practice, adding some whitespace at both sides of the slash (/) is recommended to make our CSS more readable.

For example:

.gird-item {
  grid-column: 1 / 4;
}

The code above tells the grid item to span horizontally from column line 1 to column line 4 in the grid.

grid-row

The grid-row property works just like the grid-column property. It is a shorthand property for the grid-row-start and grid-row-end properties. It lets us specify the vertical starting position of a grid item along the row grid lines in the grid container and where the grid item should end, spanning down the grid.

For example:

.gird-item {
  grid-row: 2 / 5;
}

This causes the height of the grid item to span down from row line 2 to row line 5 in the grid.

Bringing it all to a single property: grid

Lastly, we come to the last of the CSS Grid shorthand properties — grid.

The CSS property grid is a shorthand property that lets us set a value for each of the explicit grid container properties such as 'grid-template-rows,' 'grid-template-columns,' and 'grid-template-areas,' and for each implicit grid container properties such as 'grid-auto-rows,' 'grid-auto-columns,' and 'grid-auto-flow,' in a single declaration.

Syntax:

<grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

You can read more about it here.

Try out CSS Grid yourself!

Creating the perfect layout for your website has never been easier. With CSS Grid, you can create complex layouts with as few lines of CSS, minimal development time, and less dependence on external libraries and frameworks.

You should now have a solid grasp of the CSS Grid layout, how it works, and how you can use it to lay out content on your websites. We'd love you to give it a try.

This article was written by Victor Ikechukwu. Victor is a front-end developer and technical writer interested in the JAMStack. He has a knack for breaking down developer concepts into clear, understandable bits for others.

The Environmental Impact of Digital Technology and How Software Eco-Design Can Help

Abdulazeez Abdulazeez — Fri, 04 Nov 2022 11:26:00 +0000

NOTE: This article was originally published on the CoderPad blog.

We often have the impression that digital technology does not pollute.

This is usually because software pollution is mainly invisible to the general public thanks to dematerialization (the use of the cloud or online word processing services, for example), which is ultimately only the decentralized materialization of digital services.

However, when we use these digital services, we utilize the 3-tier hardware architecture composed of:

Devices or terminals: computers, screens, smartphones, smartwatches, etc.
Networks: all the cables that allow the circulation of data, routers, relay antennas, etc.
Servers: including data centers.
Of all the sectors – transportation, textile industry, agriculture, etc.– the environmental footprint of the digital industry is the one that is growing the fastest on a global scale, notably linked to :
4% of greenhouse gases (GHG) in 2020 1.
10% of the world’s electricity usage 2
A 9% annual increase in electricity consumption 2.
The increasing flow of electronic waste – growing at 4% per year and per person 3
Increasing data traffic (25% growth per year), leading to growing development of network and server infrastructures 5
An economic sector that is expected to double its GHG emissions by 2025 compared to 2020 2.

To further show the environmental impact of technology, it’s been shown that a 2G electronic chip found in your phone, printer, laptop, tablet, etc., requires 32kg of natural resources to produce. More and more of these chips (and others) are needed to power our electronic devices each year 4.

According to a study conducted by ARCEP and ADEME in January 2022 6, the carbon footprint of the digital sector in France would be 17 Mt CO2eq (mega tonne CO2 equivalent), i.e., 2.5% of the national footprint, distributed as follows:

79% for terminals
16% for data centers
5% for networks

Understanding the magnitude of the problem is essential to realizing the necessity of levers to reduce the environmental impact of digital technology.

Apart from environmental issues, digital technology poses other problems, particularly social ones. The disparity in access to digital tools is known as the “digital divide.”

To put numbers on the digital divide: 3.7 billion people do not have access to a broadband network, and 87% of people in developed countries have access to the Internet (compared to 19% in developing countries) [7][https://www.itu.int/dms_pub/itu-s/opb/pol/S-POL-BROADBAND.23-2021-PDF-E.pdf].

This is generally due to lacking infrastructure, which implies a lack of access to information, education, communication, etc.

These social problems are also exacerbated by the mineral resource requirements that feed our digital economy.

The mining for these minerals tends to be in countries where geopolitical tensions exploit local populations in disastrous conditions.

For example, 60% of cobalt mining is carried out by children in the Democratic Republic of the Congo 8. It also pollutes the clean surrounding water, rendering it undrinkable for anyone living near the mine 9.

The need to reduce digital technologies’ impact on the environment and humanity cannot be understated. This article will explore ways we can do just that through intelligent eco-design. We’ll also explore the benefits that it can bring to a business and its customers.

Fundamentals of software eco-design

Before we discuss implementing measures to reduce the impact of digital technology, we first need to go over some basic eco-design concepts.

Digital services

A digital service meets a specific need, has one or more functionalities, and a set of users. It is considered a combination of the following:

Equipment that enables data to be stored, manipulated, and displayed: servers, terminals, boxes, etc.
Infrastructures that host and connect the equipment: networks, data centers, etc.
Several software packages stacked on top of each other that run on the different devices.
Other possible third-party digital services.

Eco-design

The principle of eco-design is to consider the system’s environmental impact from the design phase, with the aim of reducing this impact throughout the product’s lifecycle.

The eco-design of a digital service necessarily takes into account the following points:

The definition of the functional scope: which features add value, avoid useless widgets, which data and processing are beneficial, etc.
All stages of the lifecycle and associated equipment: manufacturing, installation, distribution, use, and end-of-life (recycling, reuse, dismantling, etc.)
Several environmental indicators: resource depletion, pollutant emissions, water consumption, waste production, emission of substances contributing to climate change, etc.
The three tiers of the architecture: terminals, networks, and data centers
The implementation of a dialogue with stakeholders Progressive and continuous environmental improvement without transferring pollution or impact

In the digital domain, as we have seen previously, the primary source of impact is located at the terminal level – essentially in the manufacturing phase–representing about 80% of the impact.

It is therefore essential to optimize and size digital services as much as possible to increase the longevity of terminals. This is to avoid their renewal and to make infrastructures more profitable in terms of space, power, and consumption of resources in general (the weight of software has been multiplied by 171 in 20 years, according to the Green IT collective 10).

Levers of optimization

Optimization levers are those aspects of a digital service that we can change to reduce or contain the service’s environmental footprint. They include:

The definition of the functional scope: which features add value, avoid useless widgets, which data and processing are beneficial, etc.
The usage, sizing, and solicitation of the associated physical equipment.
The necessary equipment and infrastructure and their sizing.
The software layer and its optimization.
The use of software best practices and the use of measurement tools (which we will explore later).
Communication with stakeholders to better define functionalities and needs via the UX approach (for example).

ℹ️ No product is completely “green” or “clean.” We can reduce the impact of our products and activities, but that doesn’t make them suitable for the planet. It is mainly a question of making our tools more efficient (less consumption for the same use) and questioning our services to keep only the essential and remove the nonessential. The notion of eliminating the unnecessary is not a substitute for efficiency and vice versa.

Of course, the objective is not necessarily to deprive ourselves or to cut back on certain uses, which is up to each individual. The aim is to adapt our consumption to our actual needs.

Impact transfer

Impact transfer is when impact improvements are made at one stage of the life cycle, implying adverse effects at another phase of the life cycle.

For example, 5G has a lower carbon footprint (between 7 and 35 kWh/user/year) on paper than 4G (50 kWh/user/year) 11, but requires the installation of more antennas than 4G and allows more devices to be connected, thus leading to a rebound effect (Jevons paradox) by indirectly increasing the number of connected devices.

As humans, we have a cognitive bias that pushes us to use the resources offered by a system to the maximum. In this case, that puts additional pressure on data networks by increasing the data flows, which in turn requires more infrastructure to manage these flows, and so on, in a vicious cycle.

In an eco-design approach, it is necessary to conduct a life cycle analysis to consider the notions of impact transfer and rebound effect to make the best possible design choices.

Reasons to choose eco-design

There are many different reasons to start an eco-design approach:

It eliminates nonessential elements, making services more efficient
Simplifies the UX and makes it more fluid, improving accessibility
Saves time and money by reducing costs (energy, consumables, cost to society, etc.)
Encourages companies to develop a CSR (Corporate Social Responsibility) strategy
Improves brand image
Brings more meaning to an employee’s work, therefore reducing burn-out and improving well-being at work
Develops a longer-term vision for the products
Attracts new clientele, thus increasing sales
Creates a network of partners with the same desire to reduce their environmental impact and thus influence others to adopt a CSR strategy
Attracts potential investors (especially related to the establishment of a CSR strategy)

These reasons aren’t just musings of a philosopher – real numbers back them. According to the 2014 study presented by France’s Agence de la Transition Écologique (ADEME) 12, an eco-design approach:

Increased margins of eco-designed products by an average of 12%
Improved at least two functional aspects of the studied products (ease of use, cheaper, more sustainable, etc.)
May improve profitability. Some indicators of the intensity of the eco-design approach are associated with higher profits. Thus, the more the company takes into account a large number of stages of the product life cycle in its eco-design approach, the more monetary gain it may see
Increased employee motivation (58% in the EU)
Easier to recruit employees
Improved innovation capacity

According to the 2020 GreenConcept study 13, it would be possible to drastically reduce the environmental impact of digital services: 85% less energy consumption, 63% less water needed, 40% fewer material resources, and 58% less greenhouse gas emissions.

Case-in-point: LinkedIn and IBM have managed to reduce server processing time by a factor of 100 by eco-designing their digital services 14.

Finally, eco-design allows you to identify new axes of value creation for your products and offers a triple benefit to your company:

Increased assets by increasing the value of the company through improved brand image and product design
Enhanced customer relations by responding better to their expectations and offering more innovative products
Improved ethical standing by adding social responsibility as a company value (i.e., CSR)

Reminder: CSR is not based on “good deeds” or “philanthropy” but aims to transform companies’ core business models and processes.

Putting software eco-design into practice

You will see that from a technical point of view, eco-design only requires the common sense of the developer. The advantage is that we already have all the tools.

Hosting

The choice of your web host can be important in reducing your environmental footprint. Indeed, behind each hosting option, many servers need to be powered 24/7/365.

According to Science magazine 15, web hosting servers alone represent 1% of the world’s electricity consumption. This may not seem like much, but also consider the following:

10% of the world’s electricity is used for ICT (Information and Communication Technologies) 2.
Electricity usage for digital technology is increasing by 9% every year 2.
The digital services industry is expected to double its greenhouse gas emissions between 2020 and 2025! 2

A significant portion of this energy expenditure is the cooling needed to ensure that servers function optimally, protect them from failure, and thus ensure their longevity. Cooling consumes up to 40% of the total energy required to run a data center 16.

Calculating the exact environmental footprint of a server is very difficult, given the variety of criteria to be taken into account, the diversity of methodologies used to calculate it, and the lack of publicly available data 17.

We can nevertheless estimate that manufacturing a server emits about 1 t CO2eq. This doesn’t account for abiotic resources (non-living resources: air, water, minerals, etc.) and any environmental destruction that results from obtaining those resources.

What can be done about it?

There is a lot you can do to ensure your hosting service has minimal impact on the environment:

Use a “local” hosting company for your end users to limit the distance traveled by the data (15,000 km on average, according to ADEME).
Choose a hosting company that communicates its environmental impact and makes commitments like OVH (France) or Infomaniak (Switzerland).
Check the PUE* of your host. The closer it is to 1, the better (the European average is 1.46). OVH has a PUE between 1.1 and 1.3 (variable according to the sites); Infomaniak’s is slightly lower than 1.1. These two hosts have an excellent PUE.
Prefer hosting providers with passive cooling systems to limit energy usage.
Prefer hosting companies that use low-carbon electricity, but beware of “green” energy certificates (you can buy a “green” energy certificate).
Find out about your host’s hardware renewal practices (ex: Do they use reconditioned equipment, components, etc.?).
Utilize shared server offerings to avoid having a dedicated server. This way, you reduce the environmental footprint of your hosting, which is divided among the different users of this shared offer.
Eco-design your applications. This allows you to take up less space and resources on the servers. *PUE: for Power Usage Effectiveness, used to measure the energy efficiency of a data center, it is calculated by dividing the energy consumed by the data center by the energy consumed by the equipment (servers, air conditioning, network, etc.)

Use benchmarks

An excellent way to get started in software eco-design is using best practice frameworks, which save you time in finding ways to optimize your code or the choice of hosting.

In France, for example, we have many frameworks that have emerged:

The GR491 by the Institute of Responsible Digital (also exists in English): https://gr491.isit-europe.org/en/
The guide to eco-design of digital services by the Association of Ethical Designers (also in English): https://eco-conception.designersethiques.org/guide/en/
Ecometer, co-financed by ADEME (in English): http://www.ecometer.org/rules/
The French government’s Référentiel Général d’Écoconception de Services Numériques (RGESN) also has a general reference framework available (only available in French): https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/

Some of these best practice frameworks will only address the code aspect; others will also discuss hosting management and UX. Still, overall they present many of the same eco-design principles.

Measurement tools

As the saying goes: you can’t improve what you don’t measure. Indeed, how can we know the critical optimization levers when we have no metrics?

Fortunately for us, many measurement tools already exist. The list I’m going to give you is not exhaustive, but are the ones I use most often:

Bundlephobia to check the size of the NPM dependencies you want to add to your project, and their download time
PageSpeed Insight for the performance of your sites. It also lists the points to correct to improve the performance of your site
GTmetrix, like PageSpeed Insight, uses Google LightHouse metrics for performance indices but uses a non-emulated browser, unlike PageSpeed
Website Carbon Calculator to measure the carbon footprint of your site
GreenIT-Analysis (currently available only for Chromium browsers) works with an “EcoIndex” calculated from different parameters such as the number of HTTP requests launched, the resource compression rate, image optimization, etc. (this topic will be discussed in the next section)

All these tools are free, don’t hesitate to use them!

Some technical recommendations for software eco-design

Eco-design requires taking into account physical environmental constraints. This is primarily done in the project’s design phase by considering the user experience (UX).

UX and eco-design also require optimizing interfaces and taking into account accessibility (which also takes into account the loading time of your application on a 2G mobile phone, for example) and requesting as little data as possible. It is also necessary to eliminate superficial functionalities to avoid unnecessary processing.

Technologies are also chosen during the design phase. The 2017 study Energy Efficiency across Programming Languages (R. Pereira et al. 18) studies energy, time, and memory consumption according to the languages. Here is a summary table:

![table]https://d2h1bfu6zrdxog.cloudfront.net/wp-content/uploads/2022/10/table.png

The 2017 study Energy Efficiency across Programming Languages (R. Pereira et al. [18]) studies energy, time, and memory consumption according to the languages.

We can note that some languages are much less greedy than others in terms of resources, but this does not mean we should systematically turn to them.

Indeed, the choice of a language is not only based on its raw performance but requires the study of other parameters such as :

Maintainability: will someone be able to take over the project after it’s complete? Does the job market have competent developers in this language? What is the technical environment in which this project will run? Etc.
Language competencies of the project team: let’s say that Node.js is more adapted to an upcoming API project. If the rest of the team is only competent in PHP, it might be better to stay with PHP or opt for a PHP framework (Symfony with API Platform, for example) even though Node may be the “better” language.
Appropriateness to the project: Some languages are better than others at dealing with a particular task. For example, Python is more adapted than PHP for a Machine Learning project. More importantly, how technology is implemented can impact the environment more than how it is used in isolation.

There are a lot of simple tips you can use – many of them found in the references I’ve sprinkled throughout this article – to help you minimize the impact of your digital service implementations:

Reduce the size of the images, and avoid using them when they are unnecessary.
Avoid videos as much as possible or reduce their quality, and do not activate automatic playback when possible.
Think mobile-first. This approach avoids loading content for desktop browsers when unnecessary (because we tend to put more elements on desktop than mobile).

Moreover, a smartphone (which accounts for 60% of web browsing 12) has a power consumption of between 2 and 15W for charging, while a laptop has a power consumption of between 20 and 75W, and a desktop is between 70 and 250W 13.

Utilize for loops (with ++i) rather than forEach loops. While it ultimately depends on the context and readability constraints, it is better to opt for a for each loop if the code becomes too complicated to read or understand. Code that is difficult to understand is code that is difficult to maintain and evolve, which can contribute to technical debt, contrary to the principles of eco-design.

ℹ️ You can learn more about for and forEach loops in these blog posts about the JavaScript some() method and JavaScript array methods.

Reduce the size of the DOM as much as possible since it is cumbersome to handle. In web applications, avoid using JavaScript as much as possible, especially for animations – use CSS instead if you can.

ℹ️ Read more about CSS filters, CSS grid, CSS math functions, and CSS pseudo-classes.

Limit the number of HTTP requests and optimize/group them as much as possible
Limit the number of SQL JOIN operations and sub-queries. These are very greedy in terms of server resources and response time. Of course, this is often dependent on the architecture of your database.

ℹ️ How to Optimizie Query Performance in MySQL Databases.
Serve static pages rather than dynamic ones.
Use caching as much as possible, especially for assets (images, CSS, JS), and define a long enough caching time according to usage.
Enable server-side file compression (Gzip, minification).
Use tree shaking, available, for example, with Gulp or Webpack.
Avoid using non-standard fonts, or if you must use them, try to choose the lightest fonts possible, and use readable fonts for people with reading disorders (accessibility).
Use lazy loading.
Avoid SELECT * in a database. Specify the names of the columns to return instead.
Ask for as little data as possible to make the program work. Not only is this an eco-design concept, but it’s a privacy/data protection one as well. For example: do we need the user’s first AND last name?
For Content Management Systems (CMS), deactivate and uninstall useless modules.
Optimize your application’s algorithms as much as possible by evaluating their complexity to reduce them.

✅ If you couldn’t tell, eco-design is also compatible with the Agile methodology! By really focusing on what brings value to the customer and evaluating useful enhancements, agile development can help reduce the energy overhead associated with developing unnecessary product features.

Eco-design is the future of software development

Eco-design is nothing more and nothing less than the global application of good programming and design practices that allow you to improve the performance of your web applications, all the while keeping in mind that our world obeys physical laws with limited resources that are not necessarily renewable on a human life scale.

By applying these good practices, your company will see its image enhanced with your customers, potential investors, and – more importantly – your employees. The more your employees are trained in eco-design principles, the higher the intensity of implementing eco-design in products, the more quality will be present, the more your customers will be satisfied, and the higher your profits will be.

In addition, by eco-designing digital services, we can reduce the amount of processing required and extend devices’ lifespan, thus reducing our impact on the planet’s resources and the energy needed to operate them.

Nevertheless, it is essential to keep in mind that despite the positive indicators that emerge from various studies on eco-design, they may be biased, especially due to the relatively small study samples. For example, the 2014 study 14 is based on a sample of about 100 companies across the EU and Canada. Moreover, the concept of eco-design is relatively recent.

Adopting eco-design at scale cannot be done in a snap of the fingers. Even if it is not a magic formula to boost your business, it is of undeniable interest in your digital services’ environmental impact, user experience, and performance.

Here I’m going to risk paraphrasing Jean-Marc Jancovici 15, but a world of service jobs is not a world without hardware – quite the contrary. Digital service jobs depend on the presence of machines because there are a lot of flows to manage (notably of information and people), and the more the flows increase, the more people are needed to deal with them (thus more machines, and so on).

Thanks for reading!

This article was written by Thomas Laure, a French junior IT engineer who loves solving problems regardless of the technology used, not only in tech, and passionate about many scientific topics and philosophy.

What You Never Learned about JavaScript Functions

Corbin Crutchley — Thu, 21 Jul 2022 19:11:08 +0000

Functions are weird. Consider the following code:

function sayHello() {
  console.log("Hello");
}

sayHello();

Seems straightforward enough, right? We're creating a function sayHello, then immediately calling it.

Now, what about the following code:

function sayHello() {
  console.log("Hello");
}
const greeting = sayHello;
greeting();

This “intuitive” code comes loaded with assumptions and processes that we regularly take for granted:

Why are we able to assign a function to a variable?
What is this doing under the hood?
Are we able to utilize functions in potentially unexpected ways?

While you could get away with never knowing the answers to these questions, being a great developer often involves understanding how the tools we use actually work – and JavaScript functions are no exception.

For example, do you know what “function currying” is and why it’s useful? Or do you know how [].map() and [].filter are implemented?

Fret not, dear reader, as we will now take a look at all these questions.

Why are we able to assign a function to a variable?

To understand why we're able to assign a function to a variable, let's analyze what happens when anything is assigned to a variable.

How memory works

Inside of your computer, there's something called "memory," AKA RAM,which allows your computer to store short-term memory that it can quickly reference later.

When we create a variable, what we're doing is storing values inside of this memory.

For example, take the following code:

const helloMessage = "HELLO";
const byeMessage = "SEEYA";

This will create two sections of memory that your compiler will keep around for reference when you use those variables. Each of these sections of memory will be just big enough to store 5 characters of the string.

This might be visually represented like so:

A big block called "memory" with two items in it. One of them has a name of "helloMessage" and is address 0x7de35306 and the other is "byeMessage" with an address of 0x7de35306.

It's important to remember that the memory address itself doesn't store the name, your compiler does. When you create blocks of memory via variables, the compiler gets back a number that it can use to look up the variable's value inside of a "stack" of memory.

You can loosely think of this memory stack as an array that the compiler looks through in order to get the data based on an index. This number can be huge because your computer likely has multiple gigabytes of RAM. Even 16GB is equivalent to 1.28e+11 bytes. Because of this, memory addresses are often colloquially shortened to hexadecimal representations.

This means that our 0x7de35306 memory address is associated with bit number 2112049926, or just over the 0.2GB mark.

This explanation of memory is a very generalized explanation of how memory allocation works. You can read more about memory stacks here.

When your browser compiles the following code:

const helloMessage = "HELLO";
const byeMessage = "SEEYA";

console.log(helloMessage);
console.log(byeMessage);

The browser's compiler will replace the variable names with memory addresses:

memoryBlocks[0x7de35306] = "HELLO";
memoryBlocks[0x7de35307] = "SEEYA";

console.log(memoryBlocks[0x7de35306]);
console.log(memoryBlocks[0x7de35307]);

This code is simply pseudocode and will not actually run. Instead, your computer will compile down to "machine code" or "assembly code", which will in turn run on "bare metal". What's more, this is a drastic oversimplification of how your browser's JIT compiler and your system's memory management*actually* works under-the-hood.

How does this relate to function storage?

Remember that functions in JavaScript have two different syntaxes:

function sayHello() {
  console.log("Hello");
}

sayHello();

Is roughly equivalent to:

const sayHello = () => {
  console.log("Hello");
}

sayHello();

As you might correctly assume, this means that both of these syntaxes allow a function to be stored in memory.

Using our pseudocode again, this might look like:

memoryBlocks[0x9de12807] = () => {
    console.log("Hello");
}

memoryBlocks[0x9de12807]();

Why does it matter that functions are stored as memory addresses?

The reason I've gone on to show you that functions are stored as memory addresses is to help reinforce the idea that functions are values and can be treated like such. For example, you can do the following with numbers in JavaScript:

console.log(1 + 2);

Without having to assign each number to a variable:

const one = 1;
const two = 2;
console.log(one + two);

Likewise, you can use functions without assigning them to a variable.

This means the the following sayHello function:

const sayHello = () => {
    console.log("Hello");
}
sayHello();

Can be used without a variable to assign the function:

(() => console.log("Hello"))();

This is just the start of what's possible with functions. Think of all the interactions you can have with a non-function variable like integers and strings. You can have those same interactions with functions as well.

Can you pass a function to another function?

One very popular use of functions is passing in values as properties. For example:

function sayThis(message) {
    console.log(message);
}

sayThis("Hello");

Here, we're passing a string as a property to the sayThis function.

Just like you can pass in integers, strings, or arrays to a function, you might be surprised to know you can also pass in functions into a function:

function doThis(callback) {
    callback();
}

function sayHello() {
    console.log("Hello");
}

doThis(sayHello);

This will output the same "Hello" as our previoussayThis usage.

Not only can you call these functions that are passed as parameters, but you can pass parameters to those functions as well.

function callThisFn(callback) {
    // Remember, `callback` is a function we're padding
    // `console.log` specifically
    return callback('Hello, world');
}

callThisFn(console.log);

To walk through this step-by-step, we:

Pass console.log to callThisFn through an argument
callThisFn assigns that property as callback, which remains a function
We then call callback with a parameter of it's own: 'Hello, world'

In case this isn't clear, let's do our previous trick of calling a function without assigning it to a variable.

(callback => callback('Hello, world!'))(console.log);

What about returning a function from another function?

As a function’s input, parameters are only half of the story of any function's capabilities – just as any function can output a regular variable, they can also output another function:

function getMessage() {
  return "Hello";
}

const message = getMessage();
console.log(message);
// Equivalent to
console.log(getMessage());

If you've done much coding in JavaScript, this will look familiar. We're "calling"getMessage and storing the return value to message variable. We can then do anything else we might expect with this message variable - including passing it to other functions as a parameter.

This too, is possible with a function as a return value:

function getMessageFn() {
    return () => {
        console.log("Hello");
    }
}

const messageFn = getMessageFn();
messageFn();
// This can be simplified to
getMessageFn()();

This code block is an extension on the "returned value" idea. Here, we're returning*another* function from getMessageFn. This function is then assigned to messageFn which we can then in turn call itself.

Meta, right?

Funnily enough, you can even combine this with the ability to return within the inner function.

function getMessageFn() {
    return () => {
        return "Hello";
    }
}

const messageFn = getMessageFn();
const message = messageFn();
console.log(message);
// This can be simplified to
console.log(getMessageFn()());

Let's combine concepts by accepting and returning a function from another function

Knowing that we can both accept a function as a property and return a different function as a value, we can combine these both to create the following logic:

function passFunctionAndReturnFunction(callback) {
    return () => {
        callback("Hello, world");
    }
}

const sayHello = passFunctionAndReturnFunction(console.log);
sayHello(); // Will log "Hello, world"

How do you pass data from one function to another? A pipe function!

The concepts we've spoken about today are commonly utilized when programming in a style called "functional programming." Functional programming is a style of programming - similar to"Object Oriented Programming" (OOP) - that utilizes functions as a method to pass, change, and structure data.

Functional programming relies heavily on the properties of functions that we've looked at today: passing functions to other functions, returning functions from functions, and more.

If you spend much time looking at functional programming libraries, such as Ramda, you might run into a function called a "Pipe".

Traditionally, a pipe function takes a list of other functions to call them and return a final value.

For example, you might run:

const finalVal = pipe([
  () => 1,
  // Pass `1` to `v`
  v => v + 1
]);

console.log(finalVal); // 2

This is useful when you need to chain a list of actions together and get the final output.

Luckily, pipe is an easy function to implement:

function pipe(fns) {
    let val = undefined;
    for (let fn of fns) {
        val = fn(val)
    }
    return val;
}

So when is this useful? Let's assume that we want to clamp the values between two numbers.

clamp({min: 0, max: 10, val: 5}); // 5
clamp({min: 0, max: 10, val: 15}); // 10
clamp({min: 0, max: 10, val: -10}); // 0

Thinking about this problem, we can break up our logic into three different parts:

Check if smaller than minimum
Check if larger than maximum
Return final value

We can implement this using distinct functions and our new pipe method:

function pipe(fns) {
    let val = undefined;
    for (let fn of fns) {
        val = fn(val)
    }
    return val;
}

const min = (val, min) => val < min ? min : val;
const max = (val, max) => val > max ? max : val;

function clamp(props) {
    return pipe([
        // Step 1: Check if smaller than minimum
        () => min(props.val, props.min),
        // Step 2: Check if larger than maximum
        val => max(val, props.max)
    ])
}

clamp({min: 0, max: 10, val: 5}); // 5
clamp({min: 0, max: 10, val: 15}); // 10
clamp({min: 0, max: 10, val: -10}); // 0

While this might seem a bit confusing at first, the benefits are that we now are able to use the min and max method independently of clamp.

min(10, 0); // 10
min(0, 10); // 10
max(10, 0); // 0
max(0, 10); // 0

What are built-in functional paradigms in JavaScript?

While we've touched on how to build many of our own functional ideals using JavaScript, many of the core concepts are built into JavaScript itself through usage of Array methods.

For example, want to run a function over each item of an array? Array.forEach to the rescue!

[1, 2, 3].forEach(val => console.log(val));

// Will output
1
2
3

Array.forEach doesn't just pass a single value to the inner mapping function, it also passes the index of the item and the original array:

[1,2,3].forEach((val, i, arr) => console.log({val, i, length: arr.length}));

// Will output
{val: 1, i: 0, length: 3}
{val: 2, i: 1, length: 3}
{val: 3, i: 2, length: 3}

Mapping items in an array to a new value

Don't have a use for "forEach"? No matter! There's also Array.map that enables you to have a list and want to change each item in the list in some way.

const listAddedByOne = [1, 2, 3].map(val => val + 1);

Array.map accepts a function that, when you return a new value, will update that item of the list.

Just like Array.forEach, Array.map passes the index of the item and the original array to the inner function as well:

const newList = ["Eat", "Sleep", "Play Elden Ring"].map((val, i, arr) => {
    return `${i + 1} / ${arr.length} - ${val}`;
});

// This will return:
"1 / 3 - Eat"
"2 / 3 - Sleep"
"3 / 3 - Play Elden Ring"

Filter a list down based on a function's return value

Say that you have a list of numbers:

const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90];

And want to filter down this list to only include "small" numbers - aka when a number is smaller than 50. This is where we can useArray.fiter:

const smallNumbers = numbers.filter(val => val < 50);

Once again, you're also given the option to get the index and original array in the filter method.

Reduce an array down to a single value

While there are other array methods, the last one we'll be taking a look at today enables you to reduce a list down to a single value. Let's take a list of numbers and sum them together to a final output.

const numbers = [1, 2, 3];
// This will return "6"
const sum = numbers.reduce((acc, curr) => acc + prev, 0);

Reduce is passed two items:

The function that provides a reduced value when returned
The initial value to set to acc

How can we re-write built-in JavaScript functional programming methods?

While forEach, map, filter, and reduce are all built into JavaScript, the foundations of functional programming means that we can implement them ourselves. This doesn't have any practical usecases, but allows us to understand how JavaScript works under the hood a bit better.

For example, a forEach can be implemented using a basic for loop:

const forEach = (arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i], i, arr);
    }
};

const cars = ["Ford", "Volvo", "BMW"];
forEach(cars, car => console.log(car));

Similarly, you can write your own implementation of map with an intermediary array alongside a for loop.

const map = (arr, callback) {
    const returnedVal = [];
    for (let i = 0; i < arr.length; i++) {
        const newVal = callback(arr[i], i, arr);
        returnedVal.push(newVal);
    }

    return returnedVal;
};

const cars = ["Ford", "Volvo", "BMW"];
const carNameLengths = map(cars, car => car.length);
console.log(carNameLengths); // [4, 5, 3]

To implement filter is as easy as adding a single if statement to our map implementation.

const filter = (arr, callback) {
    const returnedVal = [];
    for (let i = 0; i < arr.length; i++) {
        const exist = callback(arr[i], i, arr);
        if (exist) {
            returnedVal.push(arr[i]);
        }
    }

    return returnedVal;
};
const cars = ["Ford", "Volvo", "BMW"];
const onlyBMW = filter(cars, car => car === "BMW");
console.log(onlyBMW); // ["BMW"]

Finally, implementing reduce is similar to our map implementation, but instead of pushing new values to an array, we simply replace the old value between loop iterations.

const reduce = (arr, callback, init) => {
    let returnedVal = init;
    for (let i = 0; i < arr.length; i++) {
            returnedVal = callback(returnedVal, arr[i], i, arr);
    }

    return returnedVal;
};

const numbers = [1,2,3];
const sum = reduce(numbers, (acc, curr) => acc + curr, 0);
console.log(sum); // 6

Functional programming methods can be applied everywhere

Now that you've mastered the fundamentals of JavaScript functions, you can build more kinds of APIs for your applications. These APIs can help you make debugging easier, consolidate your application logic, and more.

The functional programming paradigms we've touched on today are immensely popular in ecosystems like React applications and library development. In particular, React uses these concepts alongside its useEffect API.

These concepts aren't unique to JavaScript, either! Python utilizes similar ideas in its "list comprehension" functionality.

If you find any of these techniques useful (or even confusing, we know that functional programming can be a world of its own) let us know on Twitter!

Everything You Need to Know about All 11 CSS Filters

Victor Ikechukwu — Tue, 19 Jul 2022 13:03:56 +0000

CSS filters allow developers to alter an HTML element (usually an image) appearance before it gets displayed in the browser. It provides various operations that can be performed on an element to change its visual properties—for example, increasing the brightness of an image, enhancing an element's color intensity, adding a blur effect, and much more.

There are 11 filters in CSS, which are:

blur
brightness
contrast
grayscale
hue-rotate
invert
opacity
saturate
sepia
drop-shadow
url

This guide will walk you through each CSS filter, what they are, how they work, and how you can use them in your code.

How Do CSS Filters Work?

We can apply CSS filters to an element by declaring the CSS filter property within the element's style block, passing one or more of the 11 CSS filters as its value.

Syntax:

element {
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

Now, let's look at how each CSS filter works in detail.

blur

.blurry {
    filter: blur( <length>);
}

For the blur filter (and all CSS filters covered in this article) we'll use the image below to demonstrate each filter's effect on an element.

Photo by Fox from Pexels

The code below adds a blur effect of 3px to the image:

img {
    filter: blur(3px);
}

Here is the result:

brightness

.exposed {
    filter: brightness( <decimal> | <percentage>);
}

The brightness filter adjusts the brightness level of an image. The filter applies a linear multiplier to the input image, making it appear brighter or darker.

Note that all filter functions that accept decimal values do not work with negative integers (-10, for example) but only accept positive numbers.

The code below applies the brightness filter with a percentage value of 35% to an image:

img {
    filter: brightness(35%);
}

The result:

The code below applies the brightness filter with a value of 135% to an image.

img {
    filter: brightness(135%);
}

The result:

contrast

.sharpen {
    filter: contrast(<decimal> | <percentage>);
}

The contrast filter adjusts the brightness difference between the darkest and lightest parts of an image, giving the image a more or less enhanced look.

The code below adds a contrast level of 180% to an image:

img {
    filter: contrast(180%);       
}

The result:

grayscale

.black-and-white {
    filter: grayscale( <decimal> | <percentage>)
}

An illustration of the grayscale color range

The grayscale filter removes all color information from an image and sets its color to a tone in the grayscale.

The code below uses the grayscale filter to make an image completely gray:

img {
    filter: grayscale(100%);
}

The result:

Typical applications where the grayscale filter could come into use would be applying it to images when dark mode is enabled to slightly reduce the overall vibrancy of colors, putting less eye strain on the user. You might also use it to make client logos gray when listing them on a website.

hue-rotate

.change-color { 
    filter: hue-rotate(<angle> | <zero>); 
}

An illustration of the color wheel

Each color in the color wheel has a property called hue, the position of the color (in angle degrees) on the wheel.

The code below adds a hue rotation of 180 degrees to an image:

img {
    filter: hue-rotate(180deg)
}

The result:

Note, the unit identifier for the hue-rotate filter is optional for zero angles. For example, both rotate(0deg) and rotate(0) are valid, but hue-rotate(45) is not.

invert

.turn-color-negative { 
    filter: invert(<decimal> | <percentage>); 
}

An illustration of the color wheel

Bright areas become dark, red becomes cyan, magenta turns green, blue becomes yellow, and vice-versa, giving the image a color-negative effect.

The code below inverts the colors on an image by 80%:

img {
    filter: invert(80%);
}

The result:

opacity

.transparent {
    filter: opacity( <decimal> | <percentage>)
}

The code below adds an opacity of 35% to an image:

img {
    filter: opacity(35%);
}

The result:

saturate

.enhance {
    filter: saturate(<decimal> | <percentage>);
}

The CSS saturate filter enhances or decreases the intensity of a color, known as its saturation, making it appear more or less vivid.

The code below applies a 172% saturation to an image:

img {
    filter: saturate(172%);
}

The result:

sepia

.nineties-effect {
    filter: sepia(<decimal> | <percentage>);
}

The code below calls the sepia filter with a percentage value of 100%, converting the image to be completely sepia:

img {
    filter: sepia(100%);
}

The result:

drop-shadow

.shadow {
    filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
}

The CSS drop-shadow filter applies an (often blurry) background shadow to an element, giving it a more three-dimensional look.

The drop-shadow filter accepts four parameters when applying a drop shadow to an element:

<offset-x>: A CSS length value that specifies the horizontal distance between the element and the drop shadow. Positive values place the shadow to the element's right, and negative values place the shadow to the left.
<offset-y>: A CSS length value that specifies the vertical distance between the element and the drop shadow. Positive values place the shadow below the element, and negative values place the shadow above it.
<blur-radius>: The blur radius of the shadow is specified as a CSS length unit. The larger the value, the more blurred the shadow becomes. If left unspecified, it defaults to 0, producing a sharp and unblurred shadow. No negative values are permitted.
<color>: The color of the shadow, specified as a CSS color. If left unspecified, it defaults to the color black.

Here's an example of setting a drop shadow to an element:

img {
    filter: drop-shadow(30px 30px 50px #000);
}

The code above adds a black shadow with a 50px blur to the image, setting it 30px to the right of the image and 30px below it.

Here's the result:

The drop-shadow filter looks much like the CSS box-shadow property at first glance. However, there's a difference between the two, and it's worth comparing those differences to know when to prefer one over the other.

For example:

div {
    height: 200px;
    width: 200px;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    box-shadow: inset 15px 12px 30px #000;
}

The result:

The result of using the insert keyword that's only available to the box-shadow property to insert the shadow into the div.

Example:

img {
    box-shadow: 30px 40px 50px 70px gray;
}

The code above adds a gray shadow with a 50px blur to an image, passing an additional length value of 70px that signifies the shadow will span 50px more than the image in width.

The result:

Lastly, to explain the significant difference between the drop-shadow filter and the box-shadow property, we'll be using the CoderPad logo below.

The CoderPad logo

If the box-shadow property is used to add a shadow to the CoderPad logo above:

.coderpad {
    box-shadow: 10px 10px 30px #000; 
}

It results to the image below:

For example:

.coderpad {
    filter: drop-shadow(15px 10px 28px #000);
}

The result:

Deciding which method to use between drop-shadow and box-shadow is totally up to you based on the effect you want to achieve.

url

.svg-filter { 
filter: url('#selector-of-your-svg-filter-here'); 

/* you can also load filters from external SVGs this way: */ 
filter: url('filters.svg#name-of-your-other-filter-here'); 
}

The url filter takes a string value pointing to an SVG filter element and applies its effects to an HTML element.

The SVG filter element <filter></filter> is used to add special visual effects to SVG graphics.

Syntax:

<svg> 
    <defs> 
        <filter id="name-your-filter-here">
             ... <!-- insert filters here --> ... 
        </filter> ... 
    </defs> 
</svg>

For example, the code below defines a blur filter using the
<feGaussianBlur> filter tag:

 <svg>
    <defs>
        <filter id="blur-filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
      </defs>
</svg>

Now, you can apply the SVG filter to an element by passing its id to the url filter:

img {
  filter: url("#blur-filter");
}

Here's the result.

Other Usage Notes

Here are a few more points to note when using CSS filters.

Using Multiple CSS Filters

Throughout this article, we have only looked at using a single CSS filter per section. However, you may combine two or more CSS filters to manipulate the rendering of an element.

Syntax:

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |          hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

We can pass two or more of the 11 CSS filters to the filter property, and CSS applies them to the element according to the order they appear.

For example:

img {
    filter: opacity(50%) drop-shadow(20px 10px 0px black);
}

Here's the result:

Reversing the order of the filter properties changes the result:

img {
    filter: drop-shadow(20px 10px 0px black) opacity(50%);
}

The result:

Usage with the initial and inherit keywords

In addition to the 11 CSS filters, the filter property accepts two extra values.

initial: The default value of the filter property — resolves to "none".
inherit: The computed value of the filter property from an element's direct parent.

Try using CSS filters yourself!

Hopefully, you now have a thorough understanding of all 11 CSS filters, how they work, and how you can use them to apply different visual effects to the elements on your websites.

If you'd like to read more informative articles from CoderPad's blog, check out the related posts below:

Dev Discussions: How to Reduce your Angular Bundle Size with Google Developers Expert Santosh Yadav

Ken Swearengen — Mon, 18 Jul 2022 11:24:40 +0000

If you ever have questions about Angular, Santosh Yadav is the person to ask.

Not only is he an Auth0 ambassador and a GitHub Star, but he’s currently certified as a Google Developers Expert for Angular.

Santosh jumped into the deep end with Angular early in his career—building apps, teaching others, and attending conferences in his spare time. That dedication to Angular worked out, as he’s now a leading MEAN stack trainer and developer, with his own popular Angular-focused YouTube channel to boot.

Santosh recently sat down with CoderPad Developer Advocate Corbin Crutchley to discuss one Angular topic that’s particularly popular these days – reducing the bundle size of angular apps.

Bundle sizes impact the performance of a website. If you have a bundle of greater than 1MB, then your user has to wait longer for the browser to:

Download that bundle
Parse the bundle
Display contents of the bundle

While this might not seem like a big deal, each MB can take an extra second, which can easily cause a user to lose interest and navigate away from the site – not exactly a good business practice.

Santosh loves using Angular to reduce bundle size and points out four ways Angular can help you do this:

Tree shaking via Angular Ivy
Lazy loading
Source map analyzers
Standalone components

Bundle reduction tip #1: Use tree shaking

A typical library will ship with hundreds of functions, but rarely will your application need to use all of them.

This presents a problem in that importing the entire library can drastically increase your bundle size.

Tree shaking is a way to only import the functions of a module your application will use.

via Aaditya Sharma on StackOverflow

Depending on the size of the library you’re utilizing, you can drastically cut down on your bundle size. As a bonus, you don’t need to do anything to do tree shaking in your Angular application – it’s been a part of Angular Ivy since Angular 8.

If you’re not familiar with it, Ivy is – at its simplest – an ultra-efficient rendering pipeline.

The steps Angular Ivy takes to render updates to the DOM. Via AngularMinds

In addition to reducing the bundle size, you’ll also get the following benefits with Ivy:

Faster testing
Better debugging
Improved CSS class and style binding
Improved type checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalization

Bundle reduction tip #2: Lazy loading

While tree shaking will prevent completely unused pieces of code from making it into your bundle, you’ll often have functions that are not used when a user first logs into your application but will be used later.

Lazy loading creates multiple chunks of code that are only loaded when that particular code is used in the application.

This can really reduce the size of the application, especially if you split libraries into different feature modules that are only used when needed by the application.

Example component structure with lazy loading. Via 9lessons.info

While lazy loading isn’t just limited to Angular (you can use it in React via React.lazy as well), when paired with the other bundle-reducing technology it makes Angular quite an attractive framework for creating smaller applications.

Bundle reduction tip #3: Source map analyzers

A source map analyzer is precisely what it sounds like – it analyzes the different files, components, and modules of your application to show you how big they are.

You can then use this information to see where you can improve your code base’s efficiency to reduce its size. Santosh found source map analyzers particularly useful to reduce the size of a component with a large bundle size due to a CSS issue.

Example results of a source map analysis. Via DigitalOcean.

As demonstrated in the example above, you can see which dependencies take up the most space. If they’re configured wrong, you’ll be able to tell immediately.

Alternatively, it may help you decide to migrate away to different dependencies to reduce the bundle size further.

Bundle reduction tip #4: Standalone components

One of the newest Angular features to help you reduce bundle size are standalone components:

“Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules,” according to the Angular developer documentation.

Angular is unique in frontend frameworks because you must register your components.

Standalone components force you to have more explicit imports, which enables you to side-step the need for tree-shaking in some places because you’re just not manually including what you don’t need.

How to avoid Angular overdose

As much as Santosh loves working with Angular, he’s also a big advocate of work-life balance. He has advice for would-be workaholics and how managers can help prevent employee burnout – and you can watch him talk about those in the Twitch playback video here.

Interested in more conversations with developers about their tech stacks? Check out these other Dev Discussions:

Dev Discussions: Everything You Need to Know about Monorepos with Juri Strumpflohner of Nrwl

Ken Swearengen — Wed, 13 Jul 2022 13:29:26 +0000

As the Director of Developer Experience for Nrwl (pronounced “narwhal,” like the sea creature), Juri Strumpflohner knows a thing or two about monorepos.

Nrwl is the company behind Nx, perhaps the most popular monorepo management tool. Juri’s job is to ensure developers like you have the best possible experience using Nx.

If you’ve never heard the term monorepo, you’ll want to pay close attention to this post. Monorepos have become increasingly popular as organizations look for more efficient ways to manage and collaborate with their code bases.

At its simplest, a monorepo is a repository that contains all aspects of an organization’s code base – different projects, applications, and libraries all live together in the same repo. This is in contrast to a polyrepo, where everything lives in its own separate repository:

Via monorepo.tools

Pioneered by tech giants like Google and Meta with tools like Bazel and Buck, monorepos are seeing widespread adoption across companies of all sizes and industries.

CoderPad Developer Advocate Corbin Crutchley recently sat down with Juri to discuss what it is about monorepos that are making them so popular – and possibly heading to a code base near you.

Monorepos – more than just a single repo

While the word monorepo comes from mono-repository, the term itself can be misleading.

Yes, one of the defining features of a monorepo is that two or more applications or libraries reside within the same repository or workspace.

But that alone doesn’t make a monorepo – it makes it a messy monolithic repository that generates more problems than it solves.

A good monorepo is defined by the relationships and connections between the components of the repository.

This means that the relationships the development teams would build outside their repository – between applications, libraries, configuration files, etc. – are instead built inside a single repository. Each component has ready access to the other members within the repository.

Compare this to the more traditional polyrepo, where each application and library has its own repository. To connect, they have to pull packages from the outside using something like node package manager (npm) registries.

ℹ️ Despite the name, most companies don’t have just one repository for the entire company. Many large enterprises will have a few monorepos, each dedicated to a particular domain or department. The key is that within these monorepos, the barrier to collaboration is lower than it would be in a polyrepo.

You can now start to see some of the benefits of monorepos:

Since everything is accessible to everything else, all applications have access to the same libraries. That means you’re drastically reducing the amount of redundant code.
You only need one Continuous Integration/Continuous Delivery process, as opposed to one for every repository.
It’s easier to catch dependency errors. Since everything is integrated into the same build, the monorepo build tool will catch any downstream errors resulting from the change during compilation rather than when the dependent application or library consumes the change.

Often, companies will start building out their monorepo management process themselves. After all, it’s simple enough to throw a couple of applications and libraries into a repository and write the scripts to link them.

But scaling them can be a whole other issue. As the monorepo grows, builds take longer. Testing slows down as you wait 20, 30, or 40 minutes for the build to finish. So developers start throwing changes into every build, so they don’t have to wait for the next one, which adds more code to the build, which slows it down even more – you get the picture.

That’s where tools like Nrwl’s Nx come in.

How a monorepo management tool boosts your performance

While you could spend significant development effort creating scripts for managing your monorepo builds, it may be easier to stick with a monorepo tool like Nx or Lerna.

Nrwl, in collaboration with other major monorepo management tools, has put together a great website documenting the features of these tools. Among the more notable features that monorepo tools have to offer:

Detecting downstream changes

Many management tools will automatically detect what changes were made and any downstream dependencies on those changes.

Not only is this a much more efficient way to process your builds, but you also don’t have to worry about breaking any dependencies because you forgot to update it when you pushed your changes.

Restricting access

In many monorepo management tools, you can utilize code owner files to restrict access to different projects within your monorepo.

If you’re using a folder structure to reflect the different domains and libraries within your project, you can easily apply permissions to the various folders to control project access. These folder restrictions are usually enforced by CI/CD using a runner like GitHub actions.

Task scheduling

Perhaps the most ubiquitous feature of monorepo management tools is their ability to schedule build tasks. This allows you to control what gets built and when (i.e., sequentially, in parallel, etc.) to ensure your application and libraries are built efficiently and error-free.

Code generation

Some monorepo tools, like Nx, contain plugins and integrations that make code generation much more effortless.

You can use these plugins to create a basic app structure (like what you’d get with the npx create-react-app command) or set up testing. With these plugins, you can customize the code generation to create the code for your particular use case.

Consistent tooling

One of the most significant benefits of utilizing a monorepo management tool is that the same tools are used across all projects in the repository. So instead of balancing three different contracts and hiring a DevOps specialist for each tool, you just have to worry about paying for and managing one toolset.

You also keep redundant utilities and tools to a minimum. Since the different parts of your repo are connected, you can easily share things like types or libraries between your front and back end.

What’s next for monorepos

If you’re interested in following the development of a specific monorepo management tool, monorepo.tools is an excellent place to start. There you can find a list of seven of the most popular monorepo tools, along with the contact information for developers for each of those tools.

As for Nrwl, Juri mentioned that they recently just took over stewardship of Lerna.js, a popular open-source monorepo management tool. He hopes to have Lerna supplement a lot of Nx’s functionality.

For example, Nx helps ensure different components in your repository link together nicely and that the tool creates a great developer experience for managing your monorepos. When you combine this with Lerna’s great versioning features, you have a powerful management tool.

Interested in more conversations with developers about their tech stacks? Checkout these other Dev Discussions: