PHPInfo

27Feb

By phpInfoNo Comments

CSS Tricks, Web Tricks

An Introduction To CSS Cascade Layers

CSS recently turned 25 years old, and over that time, many techniques and tools have been created to help developers work with the cascade. Within the last year, a new spec to orchestrate the “C” in CSS was drafted and is now an official candidate recommendation: cascade layers. Cascade layers allow controlling the specificity and order of rule sets across stylesheets. We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features like CSS custom properties and :where/:is. Cascade layers will be the ultimate na...

27Feb

By phpInfoNo Comments

CSS Tricks, Javascript, Web Tricks

Getting Started With the File System Access API

The File System Access API is a web API that allows read and write access to a user’s local files. It unlocks new capabilities to build powerful web applications, such as text editors or IDEs, image editing tools, improved import/export, all in the frontend. Let’s look into how to get started using this API. Reading files with the File System Access API Before diving into the code required to read a file from the user’s system, an important detail to keep in mind is that calling the File System Access API needs to be done by a user gesture, in a secure context. In the following example, we’ll use a click event. Reading from a single file Reading data from a file can be done in less than 10 lines of code. Here’s an example code sample: let fileHandle; document.querySelector(".pick-file"...

5Nov

By phpInfoNo Comments

Web Tricks

GraphQL On The Front-End (React And Apollo)

One of the main benefits of GraphQL is the client’s ability to request what they need from the server and receive that data exactly and predictably. Without much effort, one can easily pull nested data by just adding more properties to our queries instead of adding multiple endpoints. This prevents issues like over-fetching that can impact performance. Usually, to handle GraphQL on the client-side, we make use of the Apollo Client. It allows developers to define, handle, and make queries/mutations available within our application. It can also act as a state management tool with your client-side application. In this article, we’re going to learn how to handle real-time updates on the client-side using GraphQL. We’ll be learning how to do this with GraphQL Features like Cache Update, Subsc...

29Aug

By phpInfoNo Comments

Web Tricks

React Children And Iteration Methods

The most obvious and common prop that developers work with within React is the children prop. In the majority of cases, there is no need to understand how the children prop looks like. But in some cases, we want to inspect the children prop to maybe wrap each child in another element/component or to reorder or slice them. In those cases inspecting how the children prop looks like becomes essential. In this article, we’ll look at a React utility React.Children.toArray which lets us prepare the children prop for inspection and iteration, some of its shortcomings and how to overcome them — through a small open-source package, to keep our React code function the way it is deterministically supposed to behave, keeping performance intact. If you know the basics of React and have at least an ide...

29Aug

By phpInfoNo Comments

CSS Tricks

How to Code a Playable Synth Keyboard

With a little knowledge of music theory, we can use regular HTML, CSS and JavaScript — without any libraries or audio samples — to create a simple digital instrument. Let’s put that into practice and explore one method for creating a digital synth that can be played and hosted on the internet. Here’s what we’re making: CodePen Embed Fallback We’ll use the AudioContext API to create our sounds digitally, without resorting to samples. But first, let’s work on the keyboard’s appearance. The HTML structure We’re going to support a standard western keyboard where every letter between A and ; corresponds to a playable natural note (the white keys), while the row above can be used for the sharps and flats (the black keys). This means our keyboard covers just over an octave, starting at C₃ and ...

How to do Path Analysis in Google Analytics 4

6Jun

By phpInfoNo Comments

Google Tag Manager

How to do Path Analysis in Google Analytics 4

Analysis Hub in Google Analytics 4 is a suite of features that allow you to dive deeper into your data. In the past, I have explained how to work with Exploration reports and Funnel Analysis. This time, let’s take a look at another type of report, Path Analysis. In Universal Analytics (GA3) flow reports were quite limited (that’s why I rarely used them). But with GA4, the improvement is obvious. Even though Path Analysis is not perfect and there is more room for enhancements, you can already achieve more with it than with flow reports in GA3. In this blog post, I will show you how to use them and will share several ideas of what can you analyze next. Table of Contents + Show table of contents + What is Path Analysis? #1. Overview of the interface #1.1. Variables #1.1.1. Segme...

Page Path vs Page URL in Google Tag Manager

6Jun

By phpInfoNo Comments

Google Tag Manager

Page Path vs Page URL in Google Tag Manager

Updated: May 7th, 2021 If you’re just starting with web tracking and have absolutely no prior technical knowledge of the web, you might be confused about which Page variables (in Google Tag Manager) to use when. Questions like “what is the difference between Page Path and Page URL?” might be quite common. That’s why I’ve decided to publish a quick guide comparing Page Path vs Page URL so that you would have a better understanding of it. Page Path vs Page URL in GTM Page Path returns way less info compared to the Page URL. Page Path returns only what comes after the hostname (domain) but before: the question mark “?” (a.k.a. query parameters) hashmark “#” (a.k.a. URL fragment) colon “:” (a.k.a. port). It just returns the subdirectory (page) on which you currently are. If you wa...

JavaScript Variable in Google Tag Manager: Quick Guide

6Jun

By phpInfoNo Comments

Google Tag Manager

JavaScript Variable in Google Tag Manager: Quick Guide

Updated: May 7th, 2021 If you have ever tried to find more information about the JavaScript variable in Google Tag Manager, here’s what you’ve probably seen: 1 paragraph in Google’s official documentation, a bit more in Simo Ahava’s guide. But in general, not much. So I decided to dig deeper and give you a bit broader picture of what’s behind that mystical name, JavaScript Variable. This is not a Custom Javascript Variable I noticed that some people confuse JavaScript Variable with Custom JavaScript Variable in Google Tag Manager. Those are two totally different concepts. JavaScript Variable retrieves a value of a global variable, e.g. Page Title, Page URL, etc., while Custom JavaScript is a function that might be much more complex, e.g. return a clicked text but in lower case, or get a ...

5Jun

By phpInfoNo Comments

Web Tricks

Making GraphQL Work In WordPress

Headless WordPress seems to be in vogue lately, with many new developments taking place in just the last few weeks. One of the reasons for the explosion in activity is the release of version 1.0 of WPGraphQL, a GraphQL server for WordPress. WPGraphQL provides a GraphQL API: a way to fetch data from, and post data to, a WordPress website. It enables us to decouple the experience of managing our content, which is done via WordPress, from rendering the website, for which we can use the library of the framework of our choice (React, Vue.js, Gatsby, Next.js, or any other). Until recently, WPGraphQL was the only GraphQL server for WordPress. But now another such plugin is available: GraphQL API for WordPress, authored by me. These two plugins serve the same purpose: to provide a GraphQL API...

31Mar

By phpInfoNo Comments

Web Tricks

Reactivity In Vue

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions. This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3. We’re going to build a simple application to better understand this topic. The code for this app can be found on GitHub. By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy. let framework = 'Vue'; let sentence = `${framework} is awesome`; console.log(sentence) // logs "Vue is awesome" framework = 'React'; console.log(sentence) //...

How to Exclude Internal Traffic in Google Analytics 4

31Mar

By phpInfoNo Comments

Google Tag Manager

How to Exclude Internal Traffic in Google Analytics 4

When you implement Google Analytics 4, you are tracking your own interactions/events as well. That’s the default. That becomes even a larger problem when you’re working with a larger business (having more employees). Every visit/event made by an employee skews your data. Luckily, this can be fixed because you can exclude internal traffic in Google Analytics 4. But there are several catches here. If you exclude yourself, you won’t be able to see your events in the DebugView (while testing with GTM). At least that’s what I noticed while debugging. This is inconvenient. And if you have to exclude multiple people, relying on the IP address might not be the best option. In this blog post, I wanted to show you how to exclude internal traffic in Google Analytics 4 and also tackle the aforementi...

Cross-domain tracking in Google Analytics 4

21Mar

By phpInfoNo Comments

Google Tag Manager

Cross-domain tracking in Google Analytics 4

Note: If you are looking for a Cross-domain tracking guide for Universal Analytics, read this guide instead. If you are familiar with cross-domain tracking in UA, you probably know that most of the configuration is done either on the code level (e.g. in gtag.js) or in GTM (GA tags). Because of that, many marketers and web analysts were confused about what to do where. Luckily, in Google Analytics 4, things have been greatly simplified. In this guide, I will show how to configure cross-domain tracking in Google Analytics 4. First, we’ll start with the problem that cross-domain tracking solves and then we will go to the actual configuration. Table of contents The problem of multiple domains What is cross-domain tracking in Google Analytics 4? How does cross-domain tracking work in G...

21Mar

By phpInfoNo Comments

Google Tag Manager

Custom metrics in Google Analytics 4

If you have tried to configure Google Analytics 4, you should already be familiar with custom dimensions. Basically, any custom text parameter that you send to GA4 (and that you want to use in the reports), should be registered as a custom dimension. But you can also customize your setup by sending custom metrics. What are they and how can you configure them? In this blog post, I’ll share the steps on how to configure custom metrics in Google Analytics 4. First, let’s start with some theory, and then we’ll dive into the practical stuff. Table of contents What are dimensions in Google Analytics? What are metrics in Google Analytics? A number can also be a dimension Examples of Custom Metrics How to configure custom metrics in GA4? #1. Update the GA4 event tag #2. Test the...

Scroll tracking with Google Analytics 4 and Google Tag Manager

7Mar

By phpInfoNo Comments

Google Tag Manager

Scroll tracking with Google Analytics 4 and Google Tag Manager

Compared to Universal Analytics, Google Analytics 4 offers more built-in tracking capabilities. This includes file downloads, outbound clicks, scroll tracking, and more. But did you know that the built-in scroll tracking in Google Analytics 4 tracks only when someone scrolls below the 90% percent mark of the page height? What if you want to track other thresholds as well (e.g. 25%, 50%, 75%)? Maybe in the future, that will also become built-in, but as of the moment of writing this blog post, it’s either 90% or nothing. In this blog post, I wanted to show you how to implement scroll tracking with Google Analytics 4 and Google Tag Manager. There are two possible approaches here and I’ll explain them both. Also, I’ll show several examples of the Analysis Hub report where you can see your scro...

6Mar

By phpInfoNo Comments

Google Tag Manager

“Pages per Session” Conversion in Google Analytics 4

In Universal Analytics, conversions were called “goals” and there were several types of them that you could create: destination-based goal, event-based goal, session-duration-based, and a goal that counted based on the number of pages per session. When Google Analytics 4 was introduced, it was still pretty simple to recreate destination-based and event-based goals/conversions. But about the other two types? Currently, conversions based on session duration (e.g. if a session is longer than 5 minutes, that’s a conversion) would still require some additional code (or input from developers), thus it’s quite challenging (I’ve added this idea to my backlog of ideas for blog posts). But if you want to track conversion if a visitor views 3 or more pages per session, that is completely possible ...