Categories
Article scrolling

Doom Damage Flash on Scroll

The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom into this tounge-in-cheek JavaScript library called Doom Scroller. Get it? Like, doom scrolling, but like, Doom scrolling. It’s funny, trust me. I extracted bits from Chris’ cool project to focus on the damage animation itself. The red flash is done in HTML and CSS. First, we create a full screen overlay: #doom-damage { background-color: red; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } Note that it’s not display: none. It’s much harder to animate that as we have to wait until the animation is completed to apply it. That’s because display isn’t animatable. It’s doable, just annoying. To flash it, we’ll apply a class that does it, but only temporarily. const damage = document.getElementById(“doom-damage”); function doomTakeDamage() { damage.classList.add(“do-damage”); setTimeout(function () { damage.classList.remove(“do-damage”); }, 400); } When that class activates, we’ll immediately turn the screen red (really giving it that shock appeal) and then fade the red away: .do-damage { background-color: red; animation: 0.4s doom-damage forwards; } @keyframes doom-damage { 0% { opacity: 1; } 100% { opacity: 0; } } The next bit calls the function that does the damage flash. Essentially it tracks the current scroll position, and if it’s past the nextDamagePosition, it will red flash and reset the next nextDamagePostition one full screen height length away. If you want to see all that, I’ve abstracted it into this Pen: CodePen Embed Fallback The post Doom Damage Flash on Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Doom Damage Flash on Scroll

Read at the original Source: css tricks.

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
Article mailto tel

Offering Options for mailto: and tel: Links

I generally like mailto: links. But I feel like I can smell a mailto: link without even inspecting or clicking it, like some kind of incredibly useless superpower. I know that if I’ve got my default mail client set, clicking that link will do what I want it to do, and if I want, I can right-click and the browser will give me a “Copy email address” option to grab it cleanly. That’s cool and all, but Adam Silver and Amy Hupe recently enumerated the problems with how these links behave: Firstly, mailto links make it hard to copy the address, for example if you want to share the email address with someone else.Secondly, some users use more than one mail app, and the link just uses whichever has been setup as the default, without giving them the option to use the other.And finally, many users don’t have an email application set up, which means the link can take them to a dead end or down a rabbit hole. Their UI experimentation ended up using a mailto: link, but putting the entire email address as the link which makes it especially obvious what the link does, while also offering a Copy button for a little UX bonus. tel: links are weirder in the sense that a good many devices looking at them don’t have any phone-calling functionality. If they do, it’s a lot like email links in that multiple apps could do that work (e.g. WhatsApp, FaceTime, or the default phone app). The hard part of the UX of all this is offering users choice on what they want these special link types to do. That’s what mailgo is attempting to solve. It’s a little JavaScript library that offers UI when you click them. Live demo: CodePen Embed Fallback I kinda like it. I wouldn’t mind at all if that popped up when I clicked a link like this, especially since it has that “open default” option if I want that anyway. Seems to check all the boxes for the problems these types of special links can have. The post Offering Options for mailto: and tel: Links appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Offering Options for mailto: and tel: Links

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
Article github github actions

Optimize Images with a GitHub Action

I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and deployments. But it’s just configuration files that can run whatever you need. There is a whole marketplace of Actions wanting to do work for you. What I wanted to do was run code to do image optimization. That way I never have to think about it. Any image in the repo has been optimized. There is an action for this already, Calibre’s image-actions, which we’ll leverage here. You’ll also need to ensure Actions is enabled for the repo. I know in my main organization we only flip on Actions on a per-repo basis, which is one of the options. Then you make a file at ./github/workflows/optimize-images.yml. That’s where you can configure this action. All your actions can have separate files, if you want them to. I made this a separate file because (1) it only works with “pushes to pull requests,” so if you have other actions that run on different triggers, they won’t mix nicely, and (2) That’s what is in their docs and looks like the suggested usage. name: Optimize images on: pull_request jobs: build: name: calibreapp/image-actions runs-on: ubuntu-latest steps: – name: Checkout Repo uses: actions/checkout@master – name: Compress Images uses: calibreapp/image-actions@master with: githubToken: ${{ secrets.GITHUB_TOKEN }} Now if you make a pull request, you’ll see it run: That successful run then leaves a comment on the pull request saying what it was able to optimize: It will literally re-commit those files back to the pull request as well, so if you’re going to stay on the pull request and keep working, you’ll need to push again before you can push to get the optimized images. I can look at that automatic commit and see the difference: The commit preview in Git Tower. How I can merge the PR knowing all is well: Pretty cool. Is optimizing your images locally particularly hard? No. Is never having to think about it again better? Yeah. You’re taking on a smidge of technical debt here, but reducing it elsewhere, which is a very fair trade, at least in my book. The post Optimize Images with a GitHub Action appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Optimize Images with a GitHub Action

Read at the original Source: css tricks.

Categories
Article screencasts

The New CSS-Tricks Video Intro by dina Amin

You know we do video screencasts, right? It’s not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing them. I publish them here, but you can subscribe over on YouTube as well. I’ve had a couple of different custom video intro animations over the years, always done by someone far more handy with that kind of thing than I am. When I asked around in May this year, I got some good leads, but none better than Matthias paging Marc, and then Marc helping me out with an introduction to dina Amin. One look at dina’s work and it’s an obvious: yes! She does stop-motion and a lot of breakin’ stuff: Just one small example, check out the show reel too! We chatted back and forth, scoping out the project. She says: I worked together with Assem Kamal on a new intro for CSS-Tricks YouTube channel. We wanted to make something very short yet interesting so that audiences on YouTube don’t skip the intro or get bored if they watch a couple of CSS-Tricks videos back to back. She researched and asked a bunch of questions. I like how she was very aware of the role an intro like this plays in a video, especially tutorials. Can’t be too long. Can’t be annoying in any way. It has to have enough detail that it’s almost fun to see multiple times. The old video started with a keyboard: This is the old one. Love it the spirit but could use a freshening up. pic.twitter.com/ZfkDHaFZYI— Chris Coyier (@chriscoyier) May 26, 2020 We started with an Apple keyboard, because we wanted to keep something from the original intro that Chris’ audience would relate to, and most importantly because I wanted to take the keyboard apart! View this post on Instagram I worked together with @asssemkamal on a new intro for @chriscoyier CSS Tricks YouTube channel! We cut a keyboard to pieces, moved bits and bobs around and came up with several versions for the intro. Check out @asssemkamal page for the other iteration 👀✨ Sound design by @sherief_samir BTS Music: @andrew_applepie #stopmotion #animation #csstricks #stopmolovers #behindthescenes A post shared by dina A. Amin (@dina.a.amin) on Aug 12, 2020 at 11:04am PDT “Did we cut up that keyboard?!” Yes, we did. It was too easy to find multiple broken Apple keyboards, it’s…

Read the rest The New CSS-Tricks Video Intro by dina Amin

Read at the original Source: css tricks.

Categories
Chronicle

CSS-Tricks Chronicle XXXVIII

Hey gang! I’ve been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those special posts where I round up the random goings-on of things I do off of this site. I joined Ed & Tom over on A Question of Code. We cover a lot of ground in this show. Why does having a personal site gives you a massive advantage? (Having your own website puts you ahead of a surprising number of people; it should be table-stakes, but it’s not!) And what does job hunting (and running a job board) look like in the time of COVID? What will working remotely mean for junior devs in the near future? That reminds me: I gotta update my personal site with these interviews. Drew and I chatted about Serverless over on the Smashing Podcast. We’re talking about Serverless architectures. What does that mean, and how does it differ from how we might build sites currently? Ya know, we have that site all about serverless, and we’ve had a good stream of pull requests on it so it stays decently up to date. This stuff only gets more interesting over time. The technology gets better and cheaper and it really can’t be ignored anymore. Bob and Mendel had me on Do the Woo. WooCommerce also drifted in and out of Chris’s web life, and recently he took it a bit deeper on his site CSS-Tricks. Although he isn’t deep into the WooCommerce community, he is a huge fan and we can gain useful insights and perspectives from his web experience. Indeed, we do use WooCommerce around here — especially lately, what with the memberships and posters. Gerry and I talked about the not-so-great direction that the web and technology is headed in many respects over on the Human-Centered Design podcast. Gerry is a fascinating guy who does a ton of interesting work that always centers around the biggest and more important ideas out there. One of his recent projects is World Wide Waste and we get into that with him over on ShopTalk as well. Here’s me as a guest at the Front-end Development South Africa online meetup: Chris had me on the Self-Made Web Designer podcast (hey, I guess that’s what I am). The front-end development field is constantly changing and advancing in your career…

Read the rest CSS-Tricks Chronicle XXXVIII

Read at the original Source: css tricks.

Categories
Article scrollbars scrolling ux

That’s Just How I Scroll

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates. But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;. Why does this matter? If you don’t know an area is scrollable, you might miss out on important content or functionality. I regularly think about the Perfectly Cropped story from Tyler Hall. There is a screen on iOS that has important functionality you need to scroll down to, but there is no indicator whatsoever that you can scroll there. The result of that was Tyler’s mom literally not being able to find functionality she was used to. Not great. There is an elaborate way to detect visible scrollbars and force them to be visible, but something about that rubs me the wrong way. It doesn’t honor a user’s preference (assuming it is the user’s preference), requires DOM manipulation tests, and uses vendor-prefixed CSS (which will probably live a long time, but has been standardized now, so maybe not forever). I enjoy these approaches and by Chris Smith and his thinking: CodePen Embed Fallback My favorite are the shadow-based techniques. To me an inset shadow is a really clear indicator, as it makes it appear that content is flowing underneath and the shadow follows an edge that as a hint that you can scroll in that direction. Plus, you’ve got CSS control there so I’d think it could match whatever UI situation you’re in fairly easily. It should be known though that it can be done entirely in CSS though, no JavaScript, and is one of the great CSS tricks. The post That’s Just How I Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest That’s Just How I Scroll

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
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
Article

Netlify Does Cache Invalidation For You

This is one of my favorite Netlify features. Say you’re working on a site and you change as asset like a CSS, JavaScript, or image file. Ya know, like do our job. On Netlify, you don’t have to think about how that’s going to play out with deployment, browsers, and cache. Netlify just handles it for you. Netlify calls this Instant Cache Invalidation, part of the “rocketjuice” of Netlify. On all the sites I work on that aren’t on Netlify, I do have to think about it (ugh). If you look at this very websites source, you’ll see a link to a stylesheet something like this: <link href=”https://css-tricks.com/wp-content/themes/CSS-Tricks-17/style.css?cache_bust=1594590986788″ rel=”stylesheet”> See that ?cache_bust= stuff at the end of the stylesheet URL? Those are just gibberish characters I put into that URL manually (based on a Date() call) so that when I push a change to the file, it breaks both the CDN and people’s own browser cache and they get the new file. If I didn’t do that, the changes I push won’t be seen until all the cache expires or is manually removed by users, which is… bad. I might be fixing a bug! Or releasing a new feature! It’s extra bad because that CSS might go along with some HTML which doesn’t cache as aggressively and could lead to a mismatch of HTML and expected CSS. I work on some sites where I change that cache-busting string by hand because I’m too lazy to automate it. Usually, I do automate it though. I recently shared my Gulpfile which I hand-wrote, and part of which deals with this cache-busting. It is work to write, work to maintain, and work to use during development. You can even read the comments on that post and see other people’s strategies for doing the same thing that are different than how I do it. Errrrrrybody be cache-busting. Not on Netlify. Again, you change an asset, push it up, Netlify knows it’s changed and does all the cache busting for you. So your stylesheet can be linked up like: <link href=”dont-even-worry-about-it.css” rel=”stylesheet” /> The post Netlify Does Cache Invalidation For You appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Netlify Does Cache Invalidation For You

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.