Search

Nalezeno "Article": 20

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

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

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

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

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

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:...

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

The Serif Tax


Fonts are vector. Vector art with more points makes for larger files than vector art with fewer points. Custom fonts are downloaded. So, fonts with less points in their vector art are smaller. That's the theory anyway. Shall we see if there is any merit to it? Open Sans (top) and Garamond...

Using a Mixin to Take the Math out of Responsive Font Sizes


Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport. If you’re thinking that sounds familiar, that’s because there is a slew of tools out there that offer various approaches for fluid...

Native Lazy Loading


IntersectionObserver has made lazy loading a lot easier and more efficient than it used to be, but to do it really right you still gotta remove the src and such, which is cumbersome. It's definitely not as easy as: <img src="celebration.jpg" loading="lazy" alt="..." /> Addy Osmani says...

Undefined: The Third Boolean Value


I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a message shows up indicating that the document is saving every time a change is made. Then, once the changes are saved, the message becomes: “All...

Decaying Sites


Websites have a tendency to decay all by themselves. Link rot, they call it. Unpaid domain name registrations. Companies that have gone out of business. Site owners that have lost interest. What's sadder than a 404? Landing on a holding page of a URL that used to exist, but now has fallen into...

Fixed Headers, On-Page Links, and Overlapping Content, Oh My!


Let's take a basic on-page link: <a href="#section-two">Section Two</a> When clicked, the browser will scroll itself to the element with that ID: <section id="section-two"></section>. A browser feature as old as browsers themselves, just about. But as soon as...

What Are Design Tokens?


I’ve been hearing a lot about design tokens lately, and although I’ve never had to work on a project that’s needed them, I think they’re super interesting and worth jotting down a few notes about. As I understand it, the general idea is this: design tokens are an agnostic way to store variables...

Make it hard to screw up driven development


Development is complicated. Our job is an ongoing battle between getting the job done and doing that job in a safe, long-lasting way. Developers say things like, "I'm just going to do this quick and dirty first," because it's taken as fact that if you code anything quickly, it not only will...

Form Validation in Under an Hour with Vuelidate


Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate is personally my favorite option for validations because it doesn't require...

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