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! 馃檭
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.
David Atanda: Creating an Editable Site with Google Sheets and Eleventy (CSS Tricks)
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.
Travis Almand: A Guide to Console Commands (CSS Tricks)
This guide covers what鈥檚 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
Stephanie Stimac: Location, Privilege and Performant Websites
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鈥檙e excluding some of them and not providing the same level of service the rest get. It鈥檚 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鈥檛 considered before my experience on a subpar network due to where I live.
[鈥
Testing on a
Chris Coyier: CSS Animation Libraries (CSS-Tricks)
There are an awful lot of libraries that want to help you animate things on the web. These aren't really libraries that help you with the syntax or the technology of animations, but rather are grab-and-use as-is libraries. Want to apply a class like "animate-flip-up" and watch an element, uhhh, flip up? These are the kind of libraries to look at.
I wholeheartedly think you should both 1) learn how to animate things in CSS by learning the syntax yourself and 2) customize animations to tailor the feel to your site. Still, poking around libraries like this helps foster ideas, gets you started with code examples, and might form a foundation for your own projects.
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.
1stwebdesigner: 20 snippets you should be using from HTML5 Boilerplate
Sounds stupid and listy but it's actually a good introduction to some of the more useful and practical pieces of the huge insane HTML5 Boilerplate (html5boilerplate.com).
"Rapha毛l is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library."