Menu

Pac-Man… in CSS!

November 11th, 2019

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) on CodePen. Are you excited?…

Why Parcel Has Become My Go-To Bundler for Development

October 21st, 2019

Today we’re gonna talk about application bundlers — tools that simplify our lives as developers. At their core, bundlers pick your code from multiple files and put everything all together in one or more files in a logical order that is compiled and ready for use in a browser. Moreover, through different plugins and loaders,…

Let’s Make a Fancy, but Uncomplicated Page Loader

October 15th, 2019

It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve “perceived” performance — that is, making it feel as though the site is loading faster than it actually is. There’s no shortage of ways to make…

A Dark Mode Toggle with React and ThemeProvider

September 25th, 2019

I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to see it trickle onto many other sites as well. In this tutorial, we’re going to…

Hamburger Menu with a Side of React Hooks and Styled Components

September 10th, 2019

We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off-screen, particularly on mobile where every pixel of space counts. About double the meat. Love ‘em or hate ‘em, hamburger…

Draggin’ and Droppin’ in React

August 16th, 2019

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more…