はてなブックマーク

You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element. Let me explain. I recently worked on a project with a lot of API calls and user feedback gathered with JavaScript dialogs. While I was waiting for another developer to code the <Modal /> component, I used alert(), confirm() and

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I was doing my Advent of UI Components, and I stumbled upon the from-font value for the text-decoration-thickness CSS property. I was curious about it, so I did a little research and I think what I found (and learned) is both interesting and worth sharing. About the from-font value Here’s ho

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! “CSS3” was a massive success for CSS. A whole bunch of stuff dropped essentially at once that was all very terrific to get our hands on in CSS. Gradients, animation/transition, border-radius, box-shadow, transform… woot! And better, the banner name CSS3 (and the spiritual umbrella “HTML5”) t

2021 → 2022 We asked web builders that we admire the same question... Thanks to our major sponsors in 2021. They are a big part of making this site possible. Automattic Makers of Jetpack, WooCommerce, WordPress.com, and many other great software products we use. Frontend Masters The best front-end engineering courses out there to advance your skills. When Chris first sent me this prompt, I was thi

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should: You conditionally load it when you detect the browser doesn’t support Container Queries.You write CSS as you normally would, including current-spec-compliant Container Queries syntax code.It just wo

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article. Table of Contents Default underlines are inconsistent Luckily, we can override the browsers’ defaults Chrome b

2021 → 2022 We asked web builders that we admire the same question... Thanks to our major sponsors in 2021. They are a big part of making this site possible. Automattic Makers of Jetpack, WooCommerce, WordPress.com, and many other great software products we use. Frontend Masters The best front-end engineering courses out there to advance your skills. Take two minutes right now and visit your curre

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element. That’s not quite what I’m talking about here. “Sticky footers” were a UI concept b

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you scroll up and down a scroll container, a linked animation also advances or rewinds accordingly. We covered some use cases in a previous pie

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Chrome developer advocate Jake Archibald called 2016 “the year of web streams.” Clearly, his prediction was somewhat premature. The Streams Standard was announced back in 2014. It’s taken a while, but there’s now a consistent streaming API implemented in modern browsers (still waiting on Fir

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract isn’t a prescriptive CSS framework, but a flexible piece of developer tooling. CSS tooling has been a relatively stable space over the la

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is on a tear lately. Again, I’ve heard of a brand new thing I’ve never seen before, and again it’s via Miriam: CSS Conditionals. 🎉 CSSWG just resolved to adopt @tabatkins when/else proposal into the next level of CSS Conditionals. Here's the proposal:https://t.co/IXEOK7xKcL — Mia, on Ba

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is a new thing coming in CSS: @layer. This comes from Miriam Suzanne, who is really on a tear with influencing important new CSS stuff. I’ve been hearing about all this, but then all a sudden it just dropped in experimental browsers. Leave it to Bramus to really dig into all this with

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers’ affinity for texture, noise is rarely used in web d

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But now that the powerful Paint API is available, using CSS is not only possible,

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when state updates, only the related code runs. This way, the compiler can optimize initial render

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Over at the JS Party podcast: [Kend C. Dodds]: […] ask anybody who’s done regular, old CSS and they’ll tell you that “I don’t know if it’s okay for me to change this, so I’m gonna duplicate it.” And now we’ve got – at PayPal (this is not made up) we had 90% unused CSS on the project I was us

How to Build a Full-Stack Mobile Application With Flutter, Fauna, and GraphQL Flutter is Google’s UI framework used to create flexible, expressive cross-platform mobile applications. It is one of the fastest-growing frameworks for mobile app development. On the other hand, Fauna is a transactional, developer-friendly serverless database that supports native GraphQL. Flutter + Fauna is a match made

How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust At Cloudflare, we have a great product called Workers KV which is a key-value storage layer that replicates globally. It can handle millions of keys, each of which is accessible from within a Worker script at exceptionally low latencies, no matter where in the world a request is received. Workers KV is amazing — and so i

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you’re using a JavaScript framework (and you are), but the output is a zero-JavaScript static site. You can opt-in to client-side JavaScript as needed, and there are clever options

The CSS image-set() function has been supported in Chromium-based browsers since 2012 and in Safari since version 6. Support recently landed in Firefox 88. Let’s dive in and see what we can and can’t do today with image-set(). Multiple resolutions of the same image Here’s what the CSS spec has to say about image-set(): Delivering the most appropriate image resolution for a user’s device can be a d

Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts. Recently, I have been experimenting with CSS Grid and alignment properties to create component layouts that contain multiple overlapping elements. These layouts could be styled using absolute positioning and a mix of offset values (top, right, bottom, le

Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not like all of them. Maybe some of them don’t appeal to you, solve a problem you don’t have, or feel like more clutter than you need. That’s OK. These are just a handful that I’ve tried and liked to some degree. I’d start with Emmet here, even thou

Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of use cases where a disabled button makes a lot of sense, and we’ll get to those reasons in just a moment. But throughout this article, we’ll be looking at a form that allows

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell you that front-end testing is for everyone. In fact, there are many types of tests and perhaps that is where some of the initial fear

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. We tested 10 different libraries, which are listed here in no p

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d share some tips on how to do it! In this article, we’re going to take a look at how to add glowing effects to text. We’ll also take a loo