Using requestAnimationFrame with React Hooks


Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter...

Other Ways to SPAs


That rhymed lolz. I mentioned on a podcast the other day that I sorta think WordPress should ship with Turbolinks. It's a rather simple premise: Build a server-rendered site. Turbolinks intercepts clicks on same-origin links. It uses AJAX for the HTML of the new page and replaces the current page...

Let’s Build a JAMstack E-Commerce Store with Netlify Functions


A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn’t have to include all three. What defines JAMstack is that it’s served without web servers. If you consider the history of computing, this type of abstraction isn’t...

Lazy load embedded YouTube videos


This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed. It still...

Electric Geek Transportation Systems


I've never thought of myself as a "car person". The last new car I bought (and in fact, now that I think about it, the first new car I ever bought) was the quirky 1998 Ford Contour SVT. Since then we bought a VW station wagon in 2011

React Slider with Parallax Hover Effects


Walk through the build of a React slider and learn how to implement a parallax hover effect. React Slider with Parallax Hover Effects was written by Ryan Mulligan and published on Codrops

Collective #541


Get Waves * StoryTime * MC.JS * Input delay * Variable Font Animation * Divjoy * HeadBanger Collective #541 was written by Pedro Botelho and published on Codrops

Bounce Element Around Viewport in CSS


Let's say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something. You'd probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value —...

Can you view print stylesheets applied directly in the browser?


Yep. Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it. In Firefox... It's a little button in DevTools. So easy! Open DevTools...

Mercurial Tips


While most of the world seems to be using git for version control, Mozilla continues to use Mercurial (hg) to manage the Firefox source code. As a git and GitHub lover, it took me a while to get used to Mercurial. I don’t consider myself a hg expert but I know enough to complete...

Data URIs


We’re all familiar with traditional URI protocols like https, http, ftp, and file, but data URIs have become a large part of our online strategy. We can use them to display images, the Mac camera and webcams, and more. But what if we simply want to use a data URI to convey basic data? Typing...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace