Thursday, March 28
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 apexcharts import 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 Token Dependencies 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...
CSS Tricks

Animating Number Counters

Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful when designing something like a dashboard, to bring a little pizazz to the numbers. Amazingly, this can now be done in CSS without much trickery. You can jump right to the new solution if you like, but first let’s look at how we used to do it. One fairly logical way to do number animation is by changing the number in JavaScript. We could do a rather simple setInterval, but here’s a fancier answer with a function that accepts a start, end, and duration, so you can treat it more like an animation: CodePen Embed Fallback Keeping it to CSS, we...
Google Tag Manager

How to check if Google Tag Manager is Working?

Google Tag Manager. The thing that makes the lives of marketers and web analysts easier. But the purpose of this blog post is not to convince you to start using it. Today, I assume that you have already decided to give Tag Manager a chance (or maybe even used it once or twice). In this blog post, I’ll show you how to check if Google Tag Manager is working properly. There are several ways to do so but keep in mind that these tips are not alternatives to each other. If possible, you should use them all or at least half of them. To check if Google Tag Manager is working, you need to complete the following steps: Check website’s source code (and use the “Search” feature) Enable the Preview and Debug mode. Did it appear? Is everything working? Check Google Tag Assistant Leverage S...
Google Tag Manager

Use Enhanced Ecommerce Data in Pinterest Tag with GTM

One of the reasons why I just love working with Google Tag Manager is the possibility to reuse data and send them to multiple marketing/analytics tools at once. In 2019, Simo Ahava posted an article that explains how to adapt Google Analytics Enhanced Ecommerce data and send it to Facebook Pixel. Later, I used his solution as a foundation for my guide, where I do the same thing with Google Analytics Standard Ecommerce. Today, I’ll use a similar principle to use Enhanced Ecommerce data in Pinterest Tag with Google Tag Manager. Table of contents + Show table of contents + A guide on how to implement Pinterest Pixel with GTM #1. Requirements #2. The process #3. Check the data in the Data Layer #4. Custom JavaScript variable that transforms EE product data #5. Data Layer...
Google Tag Manager

Implement Pinterest Tag with Google Tag Manager

When it comes to selecting tracking pixels, Pinterest (in most cases) will probably not reach the top 3. However, if you’re working in a business that’s related to fashion, style, Pinterest Tag might definitely be an option. I recently had my first serious encounter with the Pinterest Tag (because usually, people ask me to help with GA or Facebook Pixel), and … that was something. While it wasn’t terrible, it wasn’t great and streamlined either. Mainly, due to lacking documentation and other resources available online. After playing around with it, here are my findings on how to implement Pinterest Tag with Google Tag Manager. Note: if you notice any mistake, please let me know and I’ll fix it asap. There still might be some parts that I just missed. Table of contents + Show table...
Track Logins and Signups with Google Tag Manager and Google Analytics
Google Tag Manager

Track Logins and Signups with Google Tag Manager and Google Analytics

If your website or ecommerce store has a login feature (for your visitors/customers), you should definitely measure that. Since the tool of choice on my blog is Google Analytics, I’ll show you several options on how to track logins with Google Tag Manager and send it to Google Analytics. Oh, and let’s not forget signups too! Instead of trying to write some compelling introduction that should get you hooked, let’s get down the business and learn how to implement a login tracking setup. Table of contents + Show table of contents + A quick word about the User ID feature in Google Analytics Why should you track logins and signups? There is no silver bullet: the login/signup tracking method depends on your site Method #1. Using popular CMS? Check for GTM plugins Method #2. Track w...
Google Tag Manager

Track Many Forms with One Thank You Page with Google Tag Manager

Here’s a situation: you want to track form submissions on a website. There are multiple forms and they all redirect the visitor to the same “Thank you” page. The built-in Form Submission trigger in GTM is not working, thus you could try implementing the Thank you page tracking method. But how can you distinguish which form was submitted? In this guide, I’ll show several options on how to track many forms with one Thank you Page (in other words, that redirect the same ‘Thank you” page). Table of contents + Show table of contents + Option #1. Using the referrer variable Option #2. Working with a single page application? Use Trigger Groups Option #3. Another option for Single Page Applications Option #4. Store the info of the last submitted form in a cookie Option #5. Can you ...