What you’re getting into: 17 min read. A detailed explanation of how to creating pure CSS images. We will start with an overview and work our way to create a Koala in pure CSS.

What I assume you know: My teaching method is to not assume you know basic principles. Unless you are a complete novice with HTML and CSS, I don’t make any assumptions.

If you’re not a beginner: I will be repeating basic principles often. …


What Are We Testing?

Jest snapshot testing is primarily used for testing the rendered output of React components.

The rendered output is ultimately the element(s) that render in the DOM:


Kent C. Dodd’s AHA Programming Talk at React Summit Remote Edition

Often when writing or reviewing code, developers have a natural tendency to create an abstraction that avoids duplication upfront but evolves into a hairy situation as new use cases come. Kent C. Dodds in his recent talk at React Summit summarizes, demystifies, and visualizes this problem as well as a solution.

Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear by the Don’t Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces…


In the previous article, I walked through creating a basic SVG. In this article, I will pick up where we left off and explore SVG animations.

Whereas bitmap/raster graphics are composed of individual pixels, vector graphics are composed of individual shapes.

This provides for the ability for vector graphics to scale without loss of quality as they can render clearly at any resolution.

There is another benefit, however, to SVGs being composed of individual shapes. Each shape can be styled as we desire.

Since each shape in a SVG can be styled, this gives us the ability to create animated…


In this article, I explain what is a scalable vector graphic (SVG) and how it differs from other graphics. I will also walk you through coding your very first graphic!

A Primer on Computer Graphics


Table of Contents

Chapter 1 | Why Bother?
Chapter 2 | Learning the Basics of Elixir
Chapter 3 | Introduction to Phoenix
Chapter 4 | Implementing React
Chapter 5 | Working With PostgreSQL
Chapter 6 | Creating a PostgreSQL API Service
Chapter 7 | CRUD Operations

Scope of This Chapter

In the previous chapter, we were able to create an API service with Phoenix. This is at the heart of full-stack development. However, we didn’t cover the critical use case of doing user authentication. We will be doing another mini-project so cover how to do this.

Getting Started

While I could just provide a template, let’s walk through the…


Table of Contents

Chapter 1 | Why Bother?
Chapter 2 | Learning the Basics of Elixir
Chapter 3 | Introduction to Phoenix
Chapter 4 | Implementing React
Chapter 5 | Working With PostgreSQL
Chapter 6 | Creating a PostgreSQL API Service

Scope of This Chapter

In the previous chapter, we were able to start the process of programmatically creating a PostgreSQL API service.

So far, we have things working so a GET request on /users returns a JSON object containing all the rows in our blogs table in our database. …


Table of Contents

Chapter 1 | Why Bother?
Chapter 2 | Learning the Basics of Elixir
Chapter 3 | Introduction to Phoenix
Chapter 4 | Implementing React
Chapter 5 | Working With PostgreSQL

Before We Begin

Make sure to install pgAdmin if you have not already.

Also, install Postman which will be used to test out our API service.

Scope of This Chapter

You can think of the previous chapter as a bootstrapped way to get a sneak preview of what we are doing in this chapter. …

Michael Mangialardi

UI Developer in Southwest Virginia. Soli Deo Gloria. https://coding-artist.teachable.com

Get the Medium app

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