A Snippet to See all SVGs in a Sprite
8.10.2019
I think of an SVG sprite as this:
<svg display="none">
<symbol id="icon-one"> ... <symbol>
<symbol id="icon-two"> ... <symbol>
<symbol id="icon-three"> ... <symbol>
</svg>
I was long a fan of that approach for icon systems...
Clipping, Clipping, and More Clipping!
8.10.2019
There are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path...
Wufoo Cracks the Code for Forms So You Don’t Have To
8.10.2019
There was a lot of buzz about forms last week when Jason Grisby pointed to a missing pattern attribute on Chipotle's order form that could have been used to help-through millions of dollars in orders. Adrian Roselli followed that up with the common mistake of forgetting for and id attributes...
How to Detect an Ad Blocker
8.10.2019
One of the unspoken rules of the internet is that most content is “free”… at the cost of webpage being littered with advertisements and trackers. This was’t a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically...
Creating a Water-like Distortion Effect with Three.js
8.10.2019
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Creating a Water-like Distortion Effect with Three.js was written by Daniel Velasquez and published on Codrops
Some Hands-On with the HTML Dialog Element
7.10.2019
This is me looking at the HTML <dialog> element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and compelling features. I can't decide for you if you should use it in production on your sites, but I'd think it's starting...
Collective #555
7.10.2019
Guided by style * Adaptive Photo Layout with Flexbox * Screen Size Map * Raw WebAssembly Demos * Imagededup
Collective #555 was written by Pedro Botelho and published on Codrops
Introducing Sass Modules
7.10.2019
Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable "partials,"...
Interview with a Pornhub Web Developer
7.10.2019
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser’s video limits to pushing ads through WebSocket so ad blockers don’t detect them, you have to be clever...
Breakout Buttons
4.10.2019
Andy covers a technique where a semantic <button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text...
Using GitHub Template Repos to Jump-Start Static Site Projects
4.10.2019
If you’re getting started with static site generators, did you know you can use GitHub template repositories to quickly start new projects and reduce your setup time?
Most static site generators make installation easy, but each project still requires configuration after installation. When...
Why Progressive Web Apps Are The Future of Mobile Web
4.10.2019
Here’s one of the best essays I’ve ever read about why progressive web apps are important, how they work, and what impact they have on a business:
PWAs are powerful, effective, fast and app-like.
It’s hard to imagine a mobile web property that could not be significantly improved via...