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:
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:
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.
Before we can jump into styling, we first need to write our HTML. CSS art is all about breaking down an image into its most basic shapes, so that’s how we’ll organize our markdown. …
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 approach is better than another? How can we strive to improve our own code? How do we judge the quality of algorithms? …
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 of transforms, we’re going to go over transitions. Without transitions, transforms can look harsh, and we want our animations to be smooth and gradual. …
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:
Before we can get to work on the lightbox itself, we need to store our image data and display our images on the page. …
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.
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 personal failure and a reflection of my abilities. Of course, such a standard gives unnecessary weight to mistakes, setbacks, and lapses in knowledge. …
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 (1 - 12)
# │ │ │ │ ┌───────────── day of the week (0 - 6)
# │ │ │ │ │
# │ │ │ │ │
# │ │ │ │ │
# * * * * * <command to…
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 change the colors of individual buttons on click. …
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.
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 once. …