Select Page

Category: Article

Draggin’ and Droppin’ in React

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 complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex. This is where react-sortable-hoc comes into play. 💡 This tutorial requires basic knowledge of React library and React hooks. This library has “HOC” in its name for a...

Read More

The Making of an Animated Favicon

It’s the first thing your eyes look for when you’re switching tabs. That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard to represent what’s in or what’s happening on a web page. The CSS-Tricks Favicon Favicons are actually at their most useful when you’re not active on a tab. Here’s an example: Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading,...

Read More

Staggered CSS Transitions

Let’s say you wanted to move an element on :hover for a fun visual effect. @media (hover: hover) { .list--item { transition: 0.1s; transform: translateY(10px); } .list--item:hover, .list--item:focus { transform: translateY(0); } } Cool cool. But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing? The trick lies within transition-delay and applying a slightly different delay to each item. Let’s select each list item individually and apply different delays. In this case, we’ll select an internal span just for fun. @media (hover: hover) { .list li a span { transform: translateY(100px); transition: 0.2s; } .list:hover span { transform: translateY(0); } .list li:nth-child(1) span { transition-delay: 0.0s; } .list li:nth-child(2) span { transition-delay: 0.05s; } .list li:nth-child(3) span { transition-delay: 0.1s; } .list li:nth-child(4) span { transition-delay: 0.15s; } .list li:nth-child(5) span { transition-delay: 0.2s; } .list li:nth-child(6) span { transition-delay: 0.25s; } } See the Pen Staggered Animations by Chris Coyier (@chriscoyier) on CodePen. If you wanted to give yourself a little more programmatic control, you could set the delay as a CSS custom property: @media (hover: hover) { .list { --delay: 0.05s; } .list li a span { transform: translateY(100px); transition: 0.2s; } .list:hover span { transform: translateY(0); } .list li:nth-child(1) span { transition-delay: calc(var(--delay) * 0); } .list li:nth-child(2) span { transition-delay: calc(var(--delay)...

Read More

All the New ES2019 Tips and Tricks

The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari you can also use Babel to compile these features to a different version of JavaScript if you need to support an older browser. Let’s look at what’s new! Object.fromEntries In ES2017, we were introduced to Object.entries. This was a function that translated an object into its array representation. Something like this: let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students) // [ // [ 'amelia', 20 ], // [ 'beatrice', 22 ], // [ 'cece', 20 ], // [ 'deirdre', 19 ], // [ 'eloise', 21 ] // ] This was a wonderful addition because it allowed objects to make use of the numerous functions built into the Array prototype. Things like map, filter, reduce, etc. Unfortunately, it required a somewhat manual process to turn that result back into an object. let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } // convert to array in order to make use of .filter() function let overTwentyOne = Object.entries(students).filter(([name, age]) => { return age >= 21 }) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ] // turn multidimensional array back into an object let DrinkingAgeStudents = {} for (let [name, age]...

Read More

In Search of a Stack That Monitors the Quality and Complexity of CSS

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have excellent linters like StyleLint and CSSLint, but they only help at preventing mistakes at a micro level. Using a wrong color notation, adding a vendor prefix when you’re already using Autoprefixer, writing a selector in an inconsistent way… that kind of thing. We’re constantly looking for ways to improve the way we write CSS: OOCSS, BEM, SMACSS, ITCSS, utility-first and more. But where other development communities seem to have progressed...

Read More

Moving Text on a Curved Path

There was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren. But… the pictures aren’t actually selfies because they are taken by someone else. The article has his hilarious line of text that wiggles by on a curved line as you scroll down the page. Let’s look at how they did it. Movie: The curved line is drawn in SVG as a , and the is set upon it by a : *The pictures are not technically selfies. The movement trick happens by adjusting the startOffset attribute of the textPath element. I’m not 100% sure how they did it, but we can do some quick hacky math by watching the scroll position of the page and setting that attribute in a way that makes it move about as fast and far as we want. const textPath = document.querySelector("#text-path"); const h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; document.addEventListener("scroll", e => { let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100; textPath.setAttribute("startOffset", (-percent * 40) + 1200) }); Here’s a demo: See the Pen Selfie Crawl by Chris Coyier (@chriscoyier) on CodePen. Text on a curved line is a cool design look for any number of reasons! It just isn’t seen that much on the web, so...

Read More

Building a Full-Stack Serverless Application with Cloudflare Workers

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details of deployment and DevOps, it’s refreshing to be given a mode of building web applications that simply abstracts scaling and infrastructure away from me. Serverless has made me better at actually shipping projects! That being said, if you’re new to serverless, it may be unclear how to translate the things that you already know into a new paradigm. If you’re a front-end developer, you may have no experience with what serverless...

Read More

Design Principles for Developers: Processes and CSS Tips for Better Web Design

It is technically true that anyone can cook. But there’s a difference between actually knowing how to prepare a delicious meal and hoping for the best as you throw a few ingredients in a pot. Just like web development, you might know the ingredients—, background-color, .heading-1—but not everyone knows how to turn those ingredients into a beautiful, easy-to-use website. Whenever you use HTML and CSS, you are designing—giving form and structure to content so it can be understood by someone else. People have been designing for centuries and have developed principles along the way that are applicable to digital...

Read More

Using Immer for React State Management

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow. This is where Immer comes in and that’s what we’re going to look at in this post. Using Immer, states can be simplified and much easier to follow. Immer makes use of something called “draft” which you can think of as the copy of your state, but not the state itself. It’s as though Immer hit CMD+C on the state and then cmd+V’d it somewhere else where it can be safely viewed without disturbing the original copy. Any updates you need to make happen on the draft, and the parts of the current state that change on the draft is updated. Let’s say your application’s state looks like this; this.state = { name: 'Kunle', age: 30, city: 'Lagos, country: 'Nigeria' } This user happens to be celebrating his 31st birthday and which means we need to update the age value. With Immer running behind the scenes, a replica of this state will be made. Now...

Read More
www.000webhost.com