CSS can be surprisingly expressive, and not everyone is aware of the possibilities that the box-model provides. Despite its name, the box-model allows us to create a variety of geometric shapes. Whether you use this guide to improve your CSS art, or to spruce up the UI of a web app, is up to you.

You can follow along by taking a look at this CodePen:

Tools

Generators

There are a variety of generators that can be used to assist in creating shapes with CSS, here are a few that I think are helpful:


The tree we’ll be making 🎄

Recently, I’ve gotten into making CSS art, or using CSS to create drawings and images — you can check out more of my stuff here. It’s fun, creative, and offers valuable practice for CSS positioning. Given this strange, never-ending year, I thought it’d be fun to create something festive and celebratory. Today, I’ll be walking you through how to create a Christmas Tree with CSS — feel free to tweak it and make it your own!

Above is the completed drawing and code — in case you just want to take a look at the code yourself.

HTML Structure

Before we…


If you’ve been learning to code for a while, you’ve probably heard ‘Big O’ thrown around quite a bit. It’s defined on Wikipedia as:

“A mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity.”

What does that mean for our code, and why should we care?

As you may have noticed, any single problem can have many solutions. If you’ve ever explored LeetCode, HackerRank or the like, you’ve probably seen the plethora of solutions to any one problem. Implicitly, this raises a question: How can we say which…


Transforms are a sometimes underutilized feature of CSS, especially given that they can add so much to the interactivity and user experience of a web page, without relying on an outside library. Transforms offer a way to manipulate or distort elements and make them look animated. There are a few different transforms, and they allow you to do things like move, scale, and skew an element. I’ll be using the following CodePen to walk through transforms, so feel free to follow along — or just skim over the CodePen itself.

Before we can jump in to the different kinds…


A lightbox gallery is a popular approach to displaying a set of images on the web. A quick google search for ‘React lightbox’ will yield a ton of pre-built components. Depending on your needs and time-frame, those might be a great resource, but a simple lightbox is pretty easy to build yourself.

The following is my approach to building your own React lightbox from scratch. Also, for the purpose of this blog I will be using React Hooks, but the same logic can be applied to a class component.

Here’s what we will be building:

Live CodePen of React lightbox

Import and display your images


The journey of programming is seemingly a never-ending one. The more you learn, the more you somehow have left to learn, especially given that technology is always evolving. This reality can lead to a cycle of frustration and self-doubt. While I’m still new to programming, the following are my observations for learning to better manage these side-effects.

Accept that you will always be learning.

When learning a new skill, it’s natural to aim for ‘mastery.’ In my own experience, this has manifested into perfectionism. The idea that, if I’ve learned something once, I should be able to fully understand and apply it. Not grasping something is therefore…


A walkthrough of cron job implementation using the whenever gem

What is Cron?

Before we can jump in to using the whenever gem, we need to learn about Cron. Cron is a utility that is used to schedule commands at specified intervals, and is most likely already on your machine. It’s ideal for automating recurring tasks, called cron jobs. Cron jobs can be written directly in a config file called a crontab, however the syntax can be a little confusing (it’s a lot of asterisks):

# ┌───────────── minute (0 - 59)
# │ ┌───────────── hour (0 - 23)
# │ │ ┌───────────── day of the month (1 - 31)
# │ │ │ ┌───────────── month…


JavaScript events are the catalysts behind most web functionality. Interacting with literally any website means firing away a ton of events. Have you ever thought about how these events get assigned? Are developers just tirelessly adding event functionality to every single element? What about dynamically created content, how do events get added to that? Well, there are a few different approaches to address these questions.

Nested Event Listeners

One approach is to assign an event listener every single time an element is created.

For our example code we will be creating buttons and adding event listeners to them. Our goal is to…


Bring in the gems!

Command Line Applications aren’t exactly known for their visual design. After all, there’s no CSS, and the interface itself is quite limited. This guide is for those of us still intent on making our CLI applications as appealing and ~cute~ as possible despite the limitations.

Add color with Colorize

Colorize is a Ruby Gem that allows you to add formatting like color, underlining, and a background-fill to your text. Check it out:

It really makes a huge difference in the design and readability of your app… provided that you don’t just throw every single color option on the screen at…

Alexandra Radevich

Software Engineering Student

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