CSS Tricks

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points.You might also call it a “smooth scrolling” library, but it doesn’t leverage native smooth scrolling — it does just the opposite by virtualizing scrolling and ensuring it’s always smooth. You could probably consider this “scrolljacking” so if you hate that generally, you might hate this, but UX research seems rather mixed on whether it’s actually bad or not. The homepage will give you a good sense of how it works and feels.Let’s look at the basics of using Locomotive-Scroll JavaScript and how to leverage it to for delightful user experiences. Wh...
Web Tricks

Search Engine Optimization Checklist (PDF)

Search engine optimization (SEO) is an essential part of a website’s design, and one all too often overlooked. The most beautiful, spectacular site in the world won’t do anyone much good if people can’t find it on Google (or Bing, or DuckDuckGo). Implementing SEO best practice doesn’t just give you the best chance possible of ranking well in search engines; it makes your websites better by scrutinizing quality, design, accessibility, and speed, among other things. It’s a daunting world for those who aren’t familiar with it (and even those who are at times), so this checklist breaks down key factors to consider when undertaking an audit. If you’re ready to get stuck in, read on. Table Of ContentsGet Ready: A Healthy Mindset Setting Realistic Goals Defining The Environment On-page Off-page...
CSS Tricks, Javascript

Let’s Create a Lightweight Native Event Bus in JavaScript

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub.The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs co...
A Guide to Custom Dimensions in Google Analytics 4
Google Tag Manager

A Guide to Custom Dimensions in Google Analytics 4

The thing with Google Analytics (or any other similar tool) is that it won’t help you much if you use it just “out of the box”. I’m talking about the classic “just add one line of JavaScript to your site and start tracking”. If you want to benefit from a platform, you have to customize your data collection.Every business is unique and you might want to track different things in order to understand how different parts are performing.And one of the ways how you can customize it is custom dimensions. Instead of just having some generic data, you can go really deep with your setup. Even though Google Analytics 4 offers better automatic tracking capabilities (compared to Universal Analytics), that’s not enough.In this blog post, I’ll show you how to configure Custom Dimensions in Google A...
CSS Tricks

How to Animate a SVG with border-image

Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create the effect but to make it your own.Here’s what we’re making:Spooky skulls? Retro arcade? What’s not to like?! This is actually part of The Skull, a capture-the-flag riddle I’m working on that’s designed to explore the internals of Arduino and its microcontroller. I searched how to animate a border like this, but couldn’t find any useful examples. Most of the stuff I found was about marching ants, but unfortunately, the stroke-dasharray trick doesn’t work with skulls, let alone more complex shapes.So, in the spirit of learning and sharing, I’m blogging abo...
Web Tricks

Reactive Variables In GraphQL Apollo Client

In this article, we will look at how to set up reactive variables, how the GraphQL cache polices come into place in defining read and writes to the cache, and provide the ability for developers to add types that exist on the client-side alone so that we can structure queries for client-side variables same way we can for remote GraphQL data. After learning more about the fundamentals of reactive variables, we will build a simple app that switches the theme of our application to either dark mode or light mode based on the value of our reactive variable. We will be looking at how to query a reactive variable, how to update the value stored in a reactive variable, and how the change in value triggers updates in components that depend on the reactive variable for certain actions to occur.The ...
CSS Tricks

Understanding flex-grow, flex-shrink, and flex-basis

When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this: <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div> And then we write some CSS… .parent { display: flex; } These are technically not the only styles we’re applying when we write that one line of CSS above. In fact, a whole bunch of properties will be applied to the .child elements here, as if we wrote these styles ourselves: .child { flex: 0 1 auto; /* Default flex value */ } That’s weird! Why do these elements have these extra styles applied to them even though we didn’t write that code? Well, that’s because some properti...
CSS Tricks, Javascript

How to Animate the Details Element Using Web Animations API

Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2006.In this article, we will see how you can animate the native <details> element using the Web Animations API. CodePen Embed Fallback HTML setup First, let’s see how we are gonna structure the markup needed for this animation.The <details> element needs a <summary> element. The summary is the content visible when the accordion is closed. All the other elements within the <details> are part of the inner content of the accordion. To make it easier for us to animate that content, we are wrapping it inside a <div>. <details> <summary>Summary of the accordion</summary&g...
CSS Tricks, Web Tricks

Quick LocalStorage Usage in Vue

localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I’ve personally used it in each! In cases where you’re storing something small for the user that doesn’t need to be kept permanently, localStorage is our friend. Let’s pair localStorage with Vue, which I personally find to be a great, and easy-to-read developer experience. Simplified example I recently taught a Frontend Masters course where we built an application from start to finish with Nuxt. I was looking for a way that we might be able to break down the way we were building it into smaller sections and check them off as we go, as we had a lot to cover. localStorage was a gsolition, as everyone was really tracking their own progress personally, ...
Data Visualization With ApexCharts
React, Web Tricks

Data Visualization With ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages with a simple API, while React-ApexCharts is ApexChart’s React integration that allows us to use ApexCharts in our applications. This article will be beneficial to those who need to show complex graphical data to their customers. Getting Started First, install the React-ApexCharts component in your React application and import react-apexcharts. npm i react-apexcharts apexchartsimport ReactApexCharts from 'react-apexcharts' The core components of an ApexChart is its configuration object. In the configuration object, we define the series and options properties for a chart. series is the data we want to visualize on the chart. In the series, we define the data and n...
Web Tricks

Getting Started With Next.js

Lately, Next.js has termed itself The React Framework for Production, and with such bold claim comes a bevy of features that it offers to help you take your React websites from zero to production. These features would matter less if Next.js isn’t relatively easy to learn, and while the numerous features might mean more things and nuances to learn, its attempt at simplicity, power, and perhaps success at it is definitely something to have in your arsenal.As you settle in to learn about Next.js, there are some things you might already be familiar with and you might even be surprised at how it gives you a lot to work with that it might seem almost overwhelming at face value. Next.js is lit for static sites and it has been well-engineered for that purpose. But it also takes it further with i...
CSS Tricks

Comparing Various Ways to Hide Things in CSS

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique.Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s tempting to use it, but especially in cases where something is only meant to be visually hidden, don’t reach for it.The fact is that there are many ways to “hide” things in CSS, each with their pros and cons which greatly depend on how it’s being used. We’re going to review each technique here and cap things off with a summary that helps us decide which to use and when. How to spot differences between the techniques To see a difference between...
Authentication In Vue.js
Web Tricks

Authentication In Vue.js

Authentication is a very necessary feature for applications that store user data. It’s a process of verifying the identity of users, ensuring that unauthorized users cannot access private data — data belonging to other users. This leads to having restricted routes that can only be accessed by authenticated users. These authenticated users are verified by using their login details (i.e. username/email and password) and assigning them with a token to be used in order to access an application’s protected resources. In this article, you’re going to be learning about:Vuex Configuration with Axios Defining Routes Handling Users Handling Expired TokenDependencies We will be working with the following dependencies that help in authentication:AxiosFor sending and retrieving data from our API ...
How To Build A GraphQL Server Using Next.js API Routes
Web Tricks

How To Build A GraphQL Server Using Next.js API Routes

Next.js gives you the best developer experience with all the features you need for production. It provides a straightforward solution to build your API using Next.js API routes.In this guide, we will be first learning what are API Routes, and then create a GraphQL server that retrieves the data from the Github API using the Next.js API Routes.To get the most out of this tutorial, you need at least a basic understanding of GraphQL. Knowledge of Apollo Server would help but is not compulsory. This tutorial would benefit those who want to extend their React or Next.js skills to the server-side and be able to build as well their first full-stack app with Next.js and GraphQL.So, let’s dive in. What Are Next.js API Routes? Next.js is a framework that enables rendering React apps on the cli...
Google Tag Manager

The Magic of Google Tag Manager and Cookies

Cookies are a super important part of the web. Imagine the world without them: you wouldn’t be able to use your Facebook or Twitter. They help retain data throughout a user’s visit on a webpage, so naturally, they’re an important component of web analytics, as well.By default, Google Analytics and other analytics tools use cookies in order to track users’ behavior on your website. Unfortunately, I still see many marketers (working with GTM) suffering over not being able to fire Tags for returning visitors, or after 4 page views, etc.But this shouldn’t be a problem since you can use Google Tag Manager to set and retrieve data from cookies in a fairly easy way. In this blog post, I’ll show you how to easily utilize cookies with Google Tag Manager and take your web tracking to the next le...