Monday, June 30
Is Google Tag Manager Preview Mode Not Working? 15 Quick Ways To Fix It.
1Aug By Julius FedoroviciusNo Comments
Google Tag Manager

Is Google Tag Manager Preview Mode Not Working? 15 Quick Ways To Fix It.

Updated: August 1, 2018. Is Google Tag Manager Preview Mode not working? I’m pretty sure we’ve all been there at least once. This issue has caused some serious headache in the very beginning when I started using it. Does this sound familiar to you? – GTM Preview and Debug mode is enabled but does not appear on your website (or appears, but does not function properly). Just don’t rage quit and read the following tips on how to fix Google Tag Manager Preview and Debug mode. I’m sure at least one of them will apply to your issue.   #1. GTM snippet is not added to the website Here’s an example: you asked a developer to follow Tag Manager’s instructions and add container snippet to the website. After some time he completes the task but something’s not right here – Preview and Debug console sti...
Read More
31Jul By Chris CoyierNo Comments
CSS Tricks

Getting to Know a Legacy Codebase

Harry Roberts talks about some methods for getting comfy with a new ("specifically CSS") code base. Harry's done this a lot as someone who parachutes into new code bases regularly as a consultant. But I think this is also quite interesting for people starting a new job. So much web development work is working on existing sites, not green fielding new ones. Direct Link to Article — PermalinkThe post Getting to Know a Legacy Codebase appeared first on CSS-Tricks. Source: CSS-tricks.com
Read More
31Jul By Robin RendleNo Comments
CSS Tricks

Framer X

Framer X is a brand new app that’s about to be released and this quick demo reel takes us on a tour through some of the changes to the previous app—it all looks super exciting. As a designer, I’m most interested in the prototyping tools and being able to quickly explore complex scene transitions between one state and another. But as a developer, I’m interested in how it all ties into React. The website describes it like so: Use actual React in your projects to create interactive components from scratch. Want more control? Create custom UI in the properties panel for your components. I can imagine a wonderful near-future where it’s possible to tie Framer X into a design system so that folks on a team can use all the real life React components without having to worry if they’re up-to-date o...
Read More
The trick to viewport units on mobile
31Jul By Louis HoebregtsNo Comments
CSS Tricks

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we're often concerned with the vertical height, so let's look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling ...
Read More
Sunshine All Day Every Day (August 2018 Wallpapers Edition)
31Jul By No Comments
Web Tricks

Sunshine All Day Every Day (August 2018 Wallpapers Edition)

Sunshine All Day Every Day (August 2018 Wallpapers Edition)Sunshine All Day Every Day (August 2018 Wallpapers Edition) Cosima Mielke 2018-07-31T13:11:56+02:00 2018-07-31T15:32:00+00:00 Everybody loves a beautiful wallpaper to freshen up their desktops. So to cater for new and unique artworks on a regular basis, we embarked on our monthly wallpapers adventure nine years ago, and since then, countless artists and designers from all over the world have accepted the challenge and submitted their designs to it. It wasn’t any different this time around, of course. This post features wallpapers created for August 2018. Each of them comes in versions with and without ...
Read More
abc to SVG
30Jul By Chris CoyierNo Comments
CSS Tricks

abc to SVG

Here's a little example that Jeremy Keith used to use in his talks. It's stuck with me as one of the coolest examples of progressive enhancement and Technology Being CoolTM around. There is this musical notation format called abc. They don't capitalize it. Kinda like npm, which I guess makes sense as it isn't an acronym. But it is the name of something so it's super awkward. Ughakdhk. Anyway. The format itself is really cool. It's super simple and text-based. Here's the example from their homepage: X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| A little like YAML, I suppose. That's the music for that whole song. It's not loade...
Read More
How to Set Up Ecommerce Tracking with Google Tag Manager: Full Guide
30Jul By Julius FedoroviciusNo Comments
Google Tag Manager

How to Set Up Ecommerce Tracking with Google Tag Manager: Full Guide

While Google Analytics offers a lot of tracking functionality out of the box (pageviews, sessions, traffic sources, etc.), the real magic begins after implementing custom features, like events or ecommerce tracking. Only then you’ll start seeing what really matters, conversions and/or revenue. By tracking important interactions, you’ll be able to combine their data with the default GA functionality and see what really drives sales, which traffic sources are more effective than others, etc. But before you can analyze all of that, a proper tracking must be set up. In this guide, I’ll show you how to implement Google Analytics Standard Ecommerce tracking with Google Tag Manager.   Table of Contents Prerequisites What is Google Analytics Ecommerce Tracking? Which Ecommerce option (in GA) is r...
Read More
On xlink:href being deprecated in SVG
30Jul By Chris CoyierNo Comments
CSS Tricks

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That's pretty strong language, hence the reader's warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So... <!-- This is old --> <svg> <use xlink:href="#whatever" /> </svg> <!-- This is new --> <svg> <use href="#whatever" /> </svg> I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11 ✅ ✅ ?‍♂️ ✅ ✅ ?‍♂️ Better than I thought! But...
Read More
30Jul By No Comments
Web Tricks

What Do You Need To Know When Converting A Flash Game Into HTML5?

What Do You Need To Know When Converting A Flash Game Into HTML5?What Do You Need To Know When Converting A Flash Game Into HTML5? Tomasz Grajewski 2018-07-30T14:00:26+02:00 2018-07-30T17:26:48+00:00 With the rise of HTML5 usage, many companies start redoing their most popular titles to get rid of outdated Flash and match their products to the latest industry standards. This change is especially visible in the Gambling/Casino & Entertainment industries and has been happening for several years now, so a decent selection of titles has already been converted. Unfortunately, when browsing the Internet, you can quite often stumble upon examples of a seemingly h...
Read More
3 Essential Design Trends, August 2018
30Jul By Carrie CousinsNo Comments
Web Tricks

3 Essential Design Trends, August 2018

From light and bright designs to complex data visualizations and a new take on polygons, this month’s design trends are anything but ordinary. And they are so practical you can deploy them on single pages or for a complete design overhaul. Each of these trends shows and evolution of styles that’s been progressing for some time: minimalism to white and light color schemes, data “everything” to data visualization for the web, and a fresh look at poly shapes. Here’s what’s trending in design this month: 1. White and Light Color Schemes White and light color schemes seem to be popping up everywhere. (We could probably have dedicated an entire post to this design trend because there are so many designs featuring this color trend.) The main characteristic of this design trend is an aesthetic th...
Read More
Popular Design News of the Week: July 23, 2018 – July 29, 2018
29Jul By Cameron ChapmanNo Comments
Web Tricks

Popular Design News of the Week: July 23, 2018 – July 29, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week. Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news. The Future of Mobile Web? It’s all About Progressive Web Apps   Finally… Capture your Screen Without all that Mess on your Desktop   Google Video Shows All-white Redesigns for Gmail,...
Read More
27Jul By Robin RendleNo Comments
CSS Tricks

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead. One topic like this (which is an area I’ve sort of always known about but never really understood) is how auto margins and flexbox interact with one another. Take this example for instance: .parent { display: flex } .child { margin: auto; } What does this do again? I seem to recall there’s a bunch of nifty things you can do with it, and earlier this week, I half-remembered them after reading a great po...
Read More
27Jul By Chris CoyierNo Comments
CSS Tricks

Stuff you can do with CSS pointer events

Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within). Here's how I reasoned it out to myself: You know how if you display: hidden; an element, even if you display: block; a child, it doesn't matter — it's hidden because its parent is hidden. The same is not true for visibility: hidden;. Children will be hidden because visibility inherits, but if you visibility: visible; them, they become visible again. That's what is happening here with pointer-events. If you pointer-events: none; on a parent and then pointer-events: auto; on a child, you're re-enabling pointer events. Then a :hover on a parent will be trigge...
Read More
Sometimes `sizes` is quite important.
27Jul By Chris CoyierNo Comments
CSS Tricks

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of "responsive websites," srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: "If you’re just changing resolutions, use srcset." In this case, we're changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we're also going to need to use the sizes attribute to get the most out of res...
Read More
27Jul By No Comments
Web Tricks

Logging Activity With The Web Beacon API

Logging Activity With The Web Beacon APILogging Activity With The Web Beacon API Drew McLellan 2018-07-27T13:40:14+02:00 2018-07-27T14:14:35+00:00 The Beacon API is a JavaScript-based Web API for sending small amounts of data from the browser to the web server without waiting for a response. In this article, we’ll look at what that can be useful for, what makes it different from familiar techniques like XMLHTTPRequest (‘Ajax’), and how you can get started using it. If you know why you want to use Beacon already, feel free to jump directly to the Getting Started section. What Is The Beacon API For? The Beacon API is used for sending small amounts of data to a...
Read More