Categories
analytics google analytics Link netlify

Comparing Data in Google and Netlify Analytics

Jim Nielsen: the datasets weren’t even close for me. Google Analytics works by putting a client-side bit of JavaScript on your site. Netlify Analytics works by parsing server logs server-side. They are not exactly apples to apples, feature-wise. Google Analytics is, I think it’s fair to say, far more robust. You can do things like track custom events which might be very important analytics data to a site. But they both have the basics. They both want to tell you how many pageviews your homepage got, for instance. There are two huge things that affect these numbers: Client-side JavaScript is blockable and tons of people use content blockers, particularly for third-party scripts from Google. Server-side logs are not blockable.Netlify doesn’t filter things out of that log, meaning bots are counted in addition to regular people visiting. So I’d say: Netlify probably has more accurate numbers, but a bit inflated from the bots. Also worth noting, you can do server-side Google Analytics. I’ve never seen anyone actually do it but it seems like a good idea. One bit of advice from Jim: Never assume too much from a single set of data. In other words, don’t draw all your data-driven insights from one basket. Direct Link to Article — Permalink The post Comparing Data in Google and Netlify Analytics appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Comparing Data in Google and Netlify Analytics

Read at the original Source: css tricks.

Categories
Link

This vs. That

Here’s a nice site from Phuoc Nguyen, who I’ve noted before has quite a knack for clever sites. This vs. That pits different related concepts against each other as a theme for an article. For example, CSS has display: none;, opacity: 0;, and visibility: hidden; and they all, on the surface “hide” something, but they are all markedly different in ways that are important to understand. That’s one of the articles. The content is open source as well, if you feel like adding anything. This reminds me of this Pen from Adam Thompson: CodePen Embed Fallback All that Pen is doing is setting the colors of some pill boxes, but it does it in literally seven different ways — in this case, none of them are “better” than another: Swap a classSwap a class, colors defined in Sass @mixinSwap a class, class swaps value of a custom propertySwap the value of a custom propertySwaps the value of a custom property, colors stored in JavaScript onlySet inline stylesManipulate the CSSOMSet a non-standard color attribute They all ultimately do the same thing. And there could be many more: change class on a higher-up parent. Use data-* attributes. Use some kind of hue-shifting filter. Use color math in JavaScript to manipulate hues. Use the checkbox hack to change styling. Surely there are even dozens more. Direct Link to Article — Permalink The post This vs. That appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest This vs. That

Read at the original Source: css tricks.

Categories
Link links underlines

A CSS-only, animated, wrapping underline

Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead, and fortunately, it works with text that breaks across multiple lines as well. CodePen Embed Fallback Direct Link to Article — Permalink The post A CSS-only, animated, wrapping underline appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest A CSS-only, animated, wrapping underline

Read at the original Source: css tricks.

Categories
leading-trim Link typography

Leading-Trim: The Future of Digital Typesetting

leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec. You’d use it like this: h1 { leading-trim: both; text-edge: cap alphabetic; } This is telling the browser to look at the font file, dig into the OpenType metrics, and effectively do what Ethan demonstrates in this gif: Why do we want to do this? Well, it would let us space text inside a button properly without any strange hacks and we’d be able to set predictable spacing values between different typefaces too. I’m pretty excited about this spec and the CSS property because it gives us yet one more tool to control the use of typography on the web — like taming line height. Direct Link to Article — Permalink The post Leading-Trim: The Future of Digital Typesetting appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Leading-Trim: The Future of Digital Typesetting

Read at the original Source: css tricks.

Categories
Link Sponsored

Register for An Event Apart’s Front-End Focus Online Conference

(This is a sponsored post.) An Event Apart has been doing these single-day online “Online together” conferences. You can check out the last couple, which are available on-demand (buy it, watch it when you want) for a limited time: Online Together (available through December 15, 2020)Human-Centered Design (available through January 20, 2021) The next event is one that anyone reading CSS-Tricks will really want to check out. It’s called “Front-End Focus” which is literally what we write about here all the time. Register today for the event! It takes place August 17 and features a schedule packed with amazing talks from amazing speakers, like design principles from Jeremy Keith, future-proofing CSS from Ire Aderinokun, and modern CSS tricks from Una Kravets, among several others. Direct Link to Article — Permalink The post Register for An Event Apart’s Front-End Focus Online Conference appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Register for An Event Apart’s Front-End Focus Online Conference

Read at the original Source: css tricks.

Categories
dependencies Link

On dependency

Rob Weychert: But I can’t host your site or even my own site. I didn’t build the CMS. Other people made the hardware and software I use to generate and optimize images. Other people made the fonts. Other people standardized the digital formats for those images and fonts. I didn’t write the HTML and CSS specifications, nor the browsers that interpret them, nor the operating systems that run the browsers. I didn’t solder the circuit boards. And so on. There is so much hardware and software behind a website to the extent that there is certainly no one person who understands it all. We build everything on each other’s shoulders. (Related: I, Website) But we can exert some influence about what technology we choose to use. Rob has three major considerations: Complexity: How complex is it, who absorbs the cost of that complexity, and is that acceptable?Comprehensibility: Do I understand how it works, and if not, does that matter?Reliability: How consistently and for how long can I expect it to work? I like that system. But even more, I like that he has a system at all. I bet most people don’t. That’s why “just npm install the problem away” is such a reliable conference joke. Direct Link to Article — Permalink The post On dependency appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest On dependency

Read at the original Source: css tricks.

Categories
backdrop-filter Link

Backdrop Filter effect with CSS

I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is backdrop-filter. The approach? Easy peasy: .container { backdrop-filter: blur(10px); } The comments in the post are worth looking into because they address cross-browser support. Coverage is actually pretty good. Caniuse shows 83% global coverage with Firefox (and, predictably, Internet Explorer) lacking support. One commenter offered a nice fallback, along with a small tweak that desaturates the effect: .container { background: rgba(0,0,0,0.8); backdrop-filter: saturate(180%) blur(10px); } Nice. But we can take it a little further by sprinkling @supports in there, as demonstrated in our background-filter Almanac entry: .container { background: rgba(0,0,0,0.8); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .container { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } Notice the -webkit prefix in there. It’s still worth using it in production, though that’s not a big deal assuming you’re wired up with Autoprefixer. Here’s the demo from the Almanac: CodePen Embed Fallback OK, so maybe not the one-line solution it appeared to be. But hey, it’s cool that this sort of thing is relatively trivial in CSS. Direct Link to Article — Permalink The post Backdrop Filter effect with CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Backdrop Filter effect with CSS

Read at the original Source: css tricks.

Categories
Link subgrid

Irregular-shaped Links with Subgrid

Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That rules out using some parent element and making the whole larger encompassing rectangle clickable, which is a common (but equally tricky) pattern. Kicking one rectangle outside the bounds of the linked one with absolute positioning could work, but Michelle takes a path here that lays everything out on a grid, then uses pointer-events to get the click areas just right. Feels more robust to me. CodePen Embed Fallback Yet another good example of why we need subgrid everywhere, stat. Direct Link to Article — Permalink The post Irregular-shaped Links with Subgrid appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Irregular-shaped Links with Subgrid

Read at the original Source: css tricks.

Categories
bem css-in-js Link

Tradeoffs and Shifting Complexity

This is a masterclass from Dave: After you hit the wall of unremovable complexity, any “advances” are a shell game, making tradeoffs that get passed down to the user … you get “advances” by shifting where the complexity lives. You don’t get free reductions in complexity. In CSS land, you don’t get to pick some styling strategy and have all your troubles go away. This is plenty of nuance here, but largely whatever technologies you pick, you’re just placing the complexity in different buckets. CodePen Embed Fallback The best we can hope for is picking buckets that feel the most comfortable and productive for us and our teams. Direct Link to Article — Permalink The post Tradeoffs and Shifting Complexity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Tradeoffs and Shifting Complexity

Read at the original Source: css tricks.

Categories
animations Link SVG animation

Making lil’ me

Cassie Evans made a lovely illustration of herself and then used Greensock to add a flourish of animations to polish it off. Cassie wrote a series of posts about how she did it: In this post we’ll cover how to get values from the mouse movement and plug them into an animation. This is my favourite thing about SVG animation. Not mouse movement in particular, but interactivity. Exporting animation as an mp4 is cool and all. But you can’t play with it. Animating on the web opens up so many cool possibilities! Speaking of combining great illustrations with impressive animations, Jhey Tompkins recently shared a bunch of tips he’s learned from building complex CSS illustrations. This first piece of advice? It takes time and have patience. I’m sure he needed all the patience in the world to pull off his animated Matryoshka dolls. Direct Link to Article — Permalink The post Making lil’ me appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Making lil’ me

Read at the original Source: css tricks.

Categories
contributions Link open source

Open Prioritization

Like Kickstarter, but for Web Platform Features. That’s about the quickest way to sum up Open Prioritization from Igalia. Igalia is an independent company that works on browsers. They literally commit to all the different open source browsers to implement (and fix) features that we all use. Now they are asking: what browser features are important to you? Are they important enough for you to pledge some money to get it implemented? I think it’s a clever idea and I’d love for it to get enough legs that it actually starts working and that enough money comes in that Igalia is able to throw resources behind the features that people have voted are the most important with their money. For example, I pledged $20 to get d: path(); support in Firefox. Heck yeah, that would be awesome! If it starts edging closer to that goal, I know I’d be tempted to up that to get it over the line, but some momentum needs to start building first. Is this all sunshine and roses? Perhaps not. Some of the pushback I’ve heard so far is about the message this sends to the massive companies behind these browsers. Rather than the message being “please fix these features of your incredibly important piece of software, it will make things better for everyone including you,” the message becomes, “I guess we’ll spend our own money and band together to try to get a third-party to fix your software for you.” A bit like when school teachers need to buy their own classroom supplies. Rachel Andrew talked to Brian Kardell about some of this nuance in her coverage on Smashing Magazine. And, oh hey, in related news, I recently came across this Web Platform Contribution Guide. What a nice resource for people looking to get into helping the web literally and directly. Direct Link to Article — Permalink The post Open Prioritization appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Open Prioritization

Read at the original Source: css tricks.

Categories
Link

Refreshing Sidebar for 2020

The new design for Sidebar is lovely. I like how it goes even deeper with the sticky elements than the last design.

But even more notably, Sacha Greif has been posting five links per day to Sidebar since 2012. That’s a remarkable achievement.

Direct Link to ArticlePermalink

The post Refreshing Sidebar for 2020 appeared first on CSS-Tricks.

Source: css tricks

Categories
gradients Link

How-to guide for creating edge-to-edge color bars that work with a grid

Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want that background color to stretch to the right edge of the browser window even though the grid itself is width-constrained. Tricker.

CodePen Embed Fallback

Direct Link to ArticlePermalink

The post How-to guide for creating edge-to-edge color bars that work with a grid appeared first on CSS-Tricks.

Source: css tricks

Categories
Article custom properties global scope Link themes

Global and Component Style Settings with CSS Variables

The title of this Sara Soueidan article speaks to me. I’m a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I’m less interested in how that is done and more interested in just seeing that conceptual approach used in some fashion.

Sara details an approach where components don’t have too much styling by default, but have CSS custom properties applied to them that are ready to take values should you choose to set them.

For each pattern, I’ve found myself modifying the same properties whenever I needed to use it — like the font, colors (text, background, border), box shadow, spacing, etc. So I figured it would be useful and time-saving if I created variables for those properties, define those variables in the ‘root’ of the component, and ‘pass in’ the values for these variables when I use the pattern as I need. This way I can customize or theme the component by changing the property values in one rule set, instead of having to jump between multiple ones to do so.

Direct Link to ArticlePermalink

The post Global and Component Style Settings with CSS Variables appeared first on CSS-Tricks.

Source: css tricks