WDRL — Edition 264: Establish Principles, Long Work, Simple Living


Hey, This week, right before the long Easter weekend here, I stumbled upon “The beauty of being satisfied enough”. In times of advertising everywhere, discount days like ‘Black Friday’, and everyone telling you “you need this” or “save here” we’re constantly tempted to buy things we don’t...

How to Create and Animate Rotated Overlays


A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects. How to Create and Animate Rotated Overlays was written by Mary Lou and published on Codrops

Clever code


This week, Chris Ferdinandi examined a clever JavaScript snippet, one that's written creatively with new syntax features, but is perhaps less readable and performant. It's a quick read, but his callout of our industry's fixation on cleverness is worth... calling out: ...we’ve become obsessed as...

The Power of Named Transitions in Vue


Vue offers several ways to control how an element or component visually appears when inserted into the DOM. Examples can be fading in, sliding in, or other visual effects. Almost all of this functionality is based around a single component: the transition component. A simple example of this is with...

7 Useful JavaScript Tricks


Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let’s have a look at {x} JavaScript tricks you can start using today! Get Unique Values of an Array...

A Website is a Car and Not a Book


I’ve been wondering for a good long while why it feels like web design and development isn’t respected as much as native app development= and why the front-end role in many organizations is seen as a nice-to-have rather than a vital part of the business. Why is it so hard to see that this gig...

Collective #508


Three.js Boilerplater * Pixel borders * Domain-Oriented Observability * Typora * Accessibility Events Collective #508 was written by Pedro Botelho and published on Codrops

Simulating Mouse Movement


If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides and while talking. This happened to me when I needed to show this particles demo to my students. I didn't want to have to stay next to...

Quickly Build Product Galleries for eCommerce Sites


When making online purchases, most shoppers make their purchasing decisions based on the use of rich-media. Being able to view the product from different angles is known to increase conversions. In

Awesome Demos Roundup #3


The third collection of beautiful, creative experiments that we've found around the web. Awesome Demos Roundup #3 was written by Mary Lou and published on Codrops

Using the Web Speech API for Multilingual Translations


Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making websites talk is still pretty new. We can make our pages on the web talk using the SpeechSynthesis part of the Web Speech API. This is still...

Inline SVG… Cached


I wrote that using inline <svg> icons makes for the best icon system. I still think that's true. It's the easiest possible way to drop an icon onto a page. No network request, perfectly styleable. But inlining code has some drawbacks, one of which is that it doesn't take advantage...

Accessibility Events


“There isn't some way to know when—…?” There is always a pause here. The client knows what they're asking, and I know what they're asking, but putting it into words—saying it out loud—turns unexpectedly difficult. In the moments before the asking, it was a purely technical question—no different...

Collective #507


Developer Survey Results 2019 * Well-aimed? * Perflink * UX Agenda * Spider * Color accessibility tools * Citybound Collective #507 was written by Pedro Botelho and published on Codrops

Edge Goes Chromium: What Does it Mean for Front-End Developers?


In December 2018, Microsoft announced that Edge would adopt Chromium, the open source project that powers Google Chrome. Many within the industry reacted with sadness at the loss of browser diversity. Personally, I was jubilant. An official release date has yet to be announced, but it will be...

Get a CSS Custom Property Value with JavaScript


Here’s a neat trick from Andy Bell where he uses CSS Custom Properties to check if a particular CSS feature is supported by using JavaScript. Basically, he's using the ability CSS has to check for browser support on a particular property, setting a custom property that returns a value of either...

Open FaceTime Call from Command Line


Communication tools are always associated with UIs, and for good reason — if you want communication to be easy and intuitive, you need easy and intuitive interfaces. We need communication tools to provide the lowest barrier of entry, since not all users will be tech savvy. For tech experts...

Using “box shadows” and clip-path together


Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it'll be applying a shadow to a shape. You make a box .tag { background: #FB8C00; color: #222; font: bold 32px system-ui; padding:...

Under-Engineered Toggles


Toggles. Switches. Whatever you want to call them, they've been with us for some time and have been a dominant a staple for many form interfaces. They're even baked right into many CSS frameworks, including Bootstrap and Foundation. It's easy to think of them in binary terms: on and off. Off...

In Defense of the Ternary Statement


Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I was), you’re in a for a real treat. Just search for "if statements" on Hacker News. You'll get articles proposing that you might not need...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace