Bookmarks (1460)

Textures.js: SVG Textures for Data Visualization — Built on top of d3.js, this lets you bring together patterns and colors in an elegant and, dare we say, old school manner.

Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify! — It’s great not only to see people transitioning to the Jamstack (we have a newsletter for that), but also to hear about some of the difficulties they faced in making that transition.

Quik: Internet Explorer Support as a Service — Currently in private alpha. This tool runs a modern browser headlessly that then draws your website for anyone visiting on an old version of Internet Explorer. We're linking to this more because it's an interesting idea.

Hyperapp: The Tiny Framework for Building Web Interfaces — Claims to be 2x faster than React and comes in at less than 2KB.

▶  Use the border-radius Property to Define Horizontal and Vertical Radius — A look at how to use CSS border-radius to create not only basic shapes but complex ones too.

Image Extractor: Extract Images From Any Public Website — Works fast. Just enter a URL and all the images will be displayed in a gallery from where you can download all, or choose the ones you want (for personal use only, of course).

Keyframes: A Simple CSS Animation Creator — Has a visual timeline to help create, view, and run animations without having to go back and forth between browser and editor.

Use Speedlify to Continuously Measure Site Performance — A new tool by Zach Leatherman that can run locally or on Netlify for running continuous performance measurements.

USA.css — Released to celebrate Independence Day, here’s an all-American stylesheet. Even if you have no need for US-related symbols and patterns, you might pick up something from how they're implemented.

New in Chrome: A 'CSS Overview' Tab — This new experimental feature in Chrome looks really neat. It provides an overview of the CSS on a site, detailing colors, fonts, media queries and unused declarations.

What's New in CSS – July 2020 Edition — Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now, including Flexbox gap support, the aspect ratio unit, and more.

A Complete Guide to Dark Mode on the Web — Covers different options and approaches (design, technical considerations, etc) for implementing dark mode.

Dark Ages of the Web: A Showcase of The "Old Internet" — A visual trip down memory lane covering many of the old web dev techniques and online trends from the early days of the web. Beware, some flashing animations on this page.

▶  Ten Modern Layouts in One Line of CSS — A snappy and dynamic talk from Una Kravets highlighting how just a single-line of CSS can do “some serious heavy lifting” and build a robust modern layout. You can see them all in action here.

Creating a Menu Image Animation on Hover — How to create a hover effect for a menu where images appear with an animation on each item.

Building the Tailwind Blog with Next.js — The Tailwind team talk about how they set up their blog and some challenges they faced, particularly some complexities around the choice to use MDX for content.

emoji-picker-element: A Lightweight Emoji Picker for the Modern Web — See a live demo here. Some cool performance advantages for this: It’s a web component and it’s built on Svelte and IndexedDB.

▶  Google's web.dev LIVE Event is On Now — It started yesterday but Google is running a three day (June 30-July 2) online event focused on the Web development community covering new tooling and techniques. If you want to watch the talks from yesterday, they’re all here.

When Sass and New CSS Features Collide — CSS has added plenty of cool new features (such as custom properties) of late, but they don’t come without their own problems. Here, Ana Tudor explains why she still finds preprocessors, like Sass, necessary.

Easily Create and Embed Data Visualizations with Logi Composer — Logi Composer is the first out-of-the-box development experience for embedded analytics. Watch this webinar to learn how you can easily create, customize, and embed data visualizations, and maintain complete control over the end-user experience.

What's New In DevTools in Chrome 85 — Style editing for CSS-in-JS frameworks, Lighthouse 6.0, support for new JavaScript features, and more.

▶  What's New for Web Developers in Safari & WebKit — A 40-minute video looking at the latest features and improvements announced at WWDC for Safari and WebKit, including updated web APIs, CSS and media features, JavaScript syntax, and more. This video looking at changes to the Safari Web Inspector is also worth a look.

New in Firefox 78: DevTools Improvements and Abundant Web Platform Updates — Version 78 landed yesterday, bringing with it a new regex engine, updates to the ECMAScript Intl API, new CSS selectors, enhanced support for WebAssembly, and many improvements to the dev tools. These are the highlights, but if you want to dig into the full list of developer-facing changes, that’s here.

Improving HTTP with Structured Header Fields — Highlights the benefits of the new Structured Fields library — a collection of well-defined data types designed to help assure interoperability, remove some HTTP header headaches, and introduce some network level performance gains.

▶  What Is CUBE CSS? (Smashing Podcast Episode 19) — Drew McLellan talks to Andy Bell, the creator of CUBE CSS, to find out how this CSS methodology differs from BEM, SMACSS, and OOCSS.

Using the Chrome UX Report API — Learn how to use the recently released Chrome UX Report API to get easy, RESTful access to real-user experience data across millions of websites (and compare your Core Web Vitals measurements).

A Lightning-Speed Overview of Svelte — A quick way to learn the core parts of JavaScript framework Svelte.

How to Dynamically Get All CSS Custom Properties on a Page — Some fun DOM and stylesheet wrangling on display here.

Bootstrap Icons Alpha 5 — The fifth and final alpha release of Bootstrap Icons, featuring 300 new glyphs (taking the total past 1,000 icons).

Tragopan: A Minimal Dependency-Free Pan/Zoom Library — Try it out here. Claims to work faster due to use of native browser scrolling for panning (left/right/up/down) and transform/scale for zooming.

Stitches: An Atomic CSS-in-JS Library — Another option in the CSS-in-JS world that includes abstractions for React, Vue, and Tailwind UI.

Checkboxland: Render 'Anything' as HTML Checkboxes — This frivolous experiment is equal parts terrifying and impressive. It’s a JS library that displays animations, text, and arbitrary data using nothing but HTML checkboxes and, to be fair, they’ve presented it really well!

How to Target Email Clients — A crowdsourced list of email development techniques for singling out email clients and platforms.

Safari 14 Beta Release Notes — Revealed at this week’s WWDC, Safari 14 will ship alongside iOS 14 & macOS 11 later this year. Here are the headlines:

web-vitals-reporter: A Tiny Utility to Simplify Web Vitals Reporting — Makes it easy to collect data from Google’s new Web Vitals API.

🕰 Tzdb: A Simplified and Grouped List of Time Zones and Offsets — The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.

keen-slider: An Agnostic Touch Slider — Think ‘carousels’ but comfortable and smooth when using touch. They work with the mouse and touchpads as well, of course, and there are no dependencies. Live examples here.

The Return of the 90s Web — Max asks if we’re ready to revisit some of the ideas of the early web (no-code tools, personal sites, etc), adding that certain trends suggest that we might just have come full circle.

Let Them Paste Passwords — Some sites prevent pasted passwords (which can even break some password managers). The UK’s cyber security officials stress that this a security anti-pattern. Today I also learnt that “Sociotechnical Security Researcher” is an actual job title – cool!

After Three Years of Work, Chrome Killed My Extension and Won’t Tell Me Why — This is a story worth checking out if your work ends up on the Chrome Webstore in any way (such as if you’re distributing a browser extension): “Complaining on the internet should not be a support channel. Developers should not have to rely on the internet attention lottery. The Chrome Webstore has been around 10 years and needs to get its act together.”

Using Custom Property 'Stacks' to Tame the Cascade — A look at using CSS Custom Properties to manage/control both cascade and inheritance.

▶  New Features and Improvements for Safari and WebKit — More from Apple! Following the main WWDC 2020 Keynote, Apple are sharing a number of sessions throughout the week covering extensions, privacy, APIs, CSS and JS, web inspector changes and more. Worth bookmarking and coming back to at the weekend once all sessions are live.

An Overview of Scroll Technologies — There are a number of scroll related technologies out there (parallax, scroll snap, etc), so this article’s aim is to provide an overview of them and tools to help choose the one that’s right for you.

Prefetching? At This Age? — An excellent trip down the rabbit hole of caching, CDNs, what issues can occur when both clients and CDNs are caching content, and how the Age HTTP header helps. Plus a Chromium bug, just for good measure.

New Course: React Native — Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native – ship your very own native mobile applications.