*10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it. Checkboxland is dependency-free, framework-agnostic, and fun! 🙃

Pinegrow is a Mac, Windows and Linux web editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and smart components for Bootstrap, Foundation and WordPress.

Tumult Whisk is the lightweight HTML and PHP editor with a live preview pane that displays the updated page as you type. It is an essential app for your web dev toolkit.

WebGL particle webcam experiment.

Yay, there we go! We have a performant static site that takes its data from Google Sheets and deploys automatically when updates are made to the sheet.

Use these instructions to get up and running with helping your community! Kick off your city's relief efforts as we all learn to cope with COVID-19 with this starter powered by Gatsby, Airtable, and community efforts. This project is aims to make it as easy as possible to launch and manage an index of resources in your city during the COVID-19 pandemic.

In cases of emergency, many organizations need a quick way to publish critical information. But existing (CMS) websites are often unable to handle sudden spikes in traffic. Like so many others, I’m currently in voluntary quarantine at home - and I used some time this weekend to put a small boilerplate together for this exact usecase. Here’s the main idea: • generate a static site with Eleventy • minimal markup, inlined CSS • aim to transmit everything in the first connection roundtrip (~14KB) • progressively enable offline-support w/ Service Worker • set up Netlify CMS for easy content editing • one-click deployment via Netlify The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage. The end result is just a set of static files that can be easily hosted on cloud infrastructure and put on a CDN. Netlify does this out of the box, but other providers or privately owned servers are possible as well.

Mix & match avatar illustrations in Sketch App with this free library.

Mix-&-match illustrations of people with a design library for InVIsion Studio and Sketch.

Open Peeps is a hand-drawn illustration library to create scenes of people. You can use them in product illustration, marketing, comics, product states, user flows, personas, storyboarding, quinceañera invitations, or whatever you want! ⠀

Perhaps the worst thing you can do for a block link is to wrap everything in the . If you fail to make the link to display: block, it will have dead areas around words or chunks of text, which can make them feel like distinct links for a mouse user. If you use an underline on the entire block of text, it can be hard to read, while no underline at all can remove that visual affordance. Worse, for a screen reader user the entire string is read when tabbing through controls. In the following example, the first link contains the heading, image (without declaring it as an image), and block of text, taking about 25 seconds to read before announcing it as a link. When tabbing, you do not always know the control type until the accessible name is complete.

Create light-weight, mobile-friendly sharing buttons for Facebook, Twitter, Google+, and other social networks -- it's all completely free!

This guide covers what’s available in the console object of Firefox and Chrome as they are often the most popular browsers for development and they do have a few differences in various aspects of the console. The new Chromium-based Edge is essentially the same as Chrome in many ways so, in most cases, the console commands will operate much the same.

beluga is open-source software for creating your own ecommerce site Built with React + Node.js, and using Stripe for payment processing. - Design your own Store - Create Products and Collections - Cart and Checkout Pages - Order Admin View - Email Confirmation and Shipping Updates

If anyone has to add a quick hack, they add it to shame.css, this means that they’re putting their hacks out there in the open; it means that they are aware that what they’re doing is hacky, it forces them to document what the problem was, how the hack fixes it, and how they might fix it for real given more time. It means that other developers can see what hacks are being introduced, and why; it means that all the hacky bits of CSS are self contained, and it creates a self-fulfilling todo list.

Here's the CSS: ``` .full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); } ``` And then added an internal wrapper to keep the content aligned with the content max-width: ``` .full-bleed .wrapper { max-width: 50rem; margin-left: auto; margin-right: auto; } ```

Darius Kazemi linked to this, and notes: "The only change I had to make was installing `babel-loader@7` and `webpack-cli` as dev dependencies."

A free, open-source analytics tool. Use this instead of Google Analytics. GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser. It provides fast and valuable HTTP statistics for system administrators that require a visual server report on the fly.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

A fast, privacy-focused commenting platform. Commento has not, does not, and will not gather your personal information to sell to advertisers, third-party trackers, or other organisations. Pay what you want. Regardless of how much you pay for Commento, you'll get access to all the features. It's that simple.

You can't build anything with five hex codes. To build something real, you need a much more comprehensive set of colors to choose from.

How to use production images in a development environment with Local by Flywheel.

A tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look.

Unconscious privilege hides in delivering so much unused code to customers. In not taking the time to understand what the implications are of using the code you choose to use and how large those files are, we assume that all of our customers are in the same situation with the same access to resources. NPR smartly chose to build a text-only website so that people with limited internet connectivity during Hurricane Irma could receive up-to-date news. If you do assess your code and for whatever reasons find that you cannot reduce the size of your website, be it time or staffing propose adding a text-only website, especially if you provide a service that is essential to most of the population in your area. […] Assuming all of your customers are living the same life, with the same privilege, with the same access to fast internet and data is the quickest way to ensure you’re excluding some of them and not providing the same level of service the rest get. It’s most likely not even happening intentionally, bias is inherent in us all in some way or another. Bias based on location is something I hadn’t considered before my experience on a subpar network due to where I live. […] Testing on a

Prefixing is one form of “namespacing,” which is just a fancy way of saying that names in this space belong to a specific project. However, prefixing (and suffixing, which is less common) is a hack from a time when no solution existed for the PHP language. PHP 5.3 introduced an official method of namespacing, so the standard has existed for years. Because WordPress 5.2 bumped the minimum PHP requirement to 5.6, it is time for developers to shed their old habits and catch up to the rest of the PHP world.

Blazing fast, zero configuration web application bundler.

The trick is to apply a class that universally shuts off all the transitions and animations. Now we have a resize-animation-stopper class on the that can force disable any transition or animation while the window is being resized, and goes away after the timeout clears.

In today’s typical scenario, where the average website ships 500KB of gzipped JavaScript and 1.5MB of images, running on a midrange Android device via 3G with a 400ms round trip time, CSS selector performance is the least of our problems. […] To sum it up, you shouldn’t worry about selector performance, unless you really go overboard. While the topic was all the rage in 2012, browsers have gotten a lot faster and smarter since. Even Google doesn’t worry about it anymore. If you check out Google’s Page Speed Insights page, you won’t see the rule “Use efficient CSS selectors” which was removed in 2013. Instead, focus on making your CSS maintainable and readable. Your colleagues and your future self will thank you for it. Try to optimize the CSS delivery by including only the used styles. And after that, get to know the rendering pipeline. Unlike selectors, styles themselves can be expensive, and the difference between a janky site and a smooth one can often be found in how the CSS is implemented.

Support tables for HTML and CSS in emails.