Issue #415 (Transforms, JS Libs, JSON/DB, React)07/01/21
When you write CSS transforms, no doubt you use the transform property along with one of the transform functions including rotate(), scale(), translate(), skew(), along with a slew of others.
In case you missed it, however, the W3C's CSS Transforms Module Level 2 has added three individual transform properties:
These are intended to replace three of the function values, simplifying the use of transforms. Previously when declaring multiple transforms on a single element, it was a pain to do an override. For example:
|
.transforms {
transform: scale(.8) translate(10px, 30px) rotate(45deg);
}
.override {
transform: scale(1);
}
|
In the code above, my intention is to only override the scale() setting in the second declaration block, but because I've omitted the translate() and rotate() values, those get reset as if they weren't originally applied. Not ideal and usually not what you want.
Using individual properties for these transforms makes this much easier to deal with. So far there are three of such properties and I don't know if more will be added (for example, there's none for skew or for the axis-based functions like rotateX or translateY).
The only major problem with these three new properties right now is the fact that Firefox and Safari are the only browsers that support them. So they're clearly not ready for production yet. Nonetheless, these are good to keep in mind since they will greatly simplify the process of transform overrides (at least for the three that are supported).
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
TLDR Newsletter - Byte Sized News for Busy Techies
TLDR is a free daily newsletter with links and TLDRs of the most interesting stories in tech 📱, science 🚀, and coding 💻! sponsored
Gute
A simple web games library that includes a game loop, input, sounds, music, and tile sets.
MapLibre
A community-governed collection of open source mapping libraries for web and mobile applications (iOS/Android).
Lowdefy
An open-source low-code framework to build web apps, admin panels, business intelligence dashboards, workflows, and CRUD apps with ease.
Million
A ~1kb virtual DOM alternative that aims to fix many of the problems inherent in other similar solutions.
web3.js
A JavaScript API that allows you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket.
skruv
A small, no-dependency, no-build, JavaScript framework with support for async components and generators and CSS scoping via shadow DOM.
Fastify
Fast and low overhead web framework for Node.js with a powerful plugin architecture, inspired by hapi and Express.
Farrow
A type-friendly web framework for Node.js apps, written in TypeScript.
Simulacra.js
A data-binding function for the DOM (an older project).
Grafar
Another older one, a JavaScript library for reactive, 3D mathematical visualizations, built on top of WebGL.
|
JSON Tools, Databases, etc.
Master Gatsby: Learn Gatsby, React & Friends
A Premium JavaScript + CSS Training Course from Wes Bos. Covers technologies like GraphQL, Headless CMS, Progressive Images, Scoped CSS, Serverless Functions, and more. promoted
Dataset Search
A search engine for datasets. Using a simple keyword search, discover datasets hosted in thousands of repositories across the web.
usql
A universal CLI written in Go, for PostgreSQL, MySQL, Oracle, SQLite3, Microsoft SQL Server, as well as NoSQL and non-relational databases.
nice-color-palettes
A collection of color palettes in JSON format, taken from a popular website that lets you browse, create, and share color palettes.
GraphCDN
A CDN for GraphQL APIs (not free) that allows you to reduce your origin traffic by up to 95%.
zap-db
An easy to use JSON database written with ease of setup and effective memory management.
jsonmatic
Converts CSV to JSON or vice-versa. Just upload a CSV file or input some JSON, then copy or download the resulting JSON or CSV file.
GQless
A GraphQL client built for rapid iteration that makes using your API enjoyable by generating queries at runtime based on the data your app consumes.
JsonLogic
A set of libraries for building complex rules, serializing them as JSON, then sharing them between front-end and back-end.
QuestDB
A high-performance, open-source SQL database for applications in financial services, IoT, machine learning, DevOps, and observability.
JSON-LD
A lightweight Linked Data format that provides a way to help JSON data interoperate at web-scale, ideal for REST Web services, and unstructured databases such as Apache CouchDB and MongoDB.
ClickHouse
A fast, open-source Online analytical processing (OLAP) database management system that allows you to generate analytical reports using SQL queries in real-time.
|
React Tools
Master Gatsby: Learn Gatsby, React & Friends
A Premium JavaScript + CSS Training Course from Wes Bos. Covers technologies like GraphQL, Headless CMS, Progressive Images, Scoped CSS, Serverless Functions, and more. promoted
React Tags
A simple tagging component, inspired by Gmail's "To" field in the compose window.
react-awesome-query-builder
A user-friendly React component to build queries, inspired by jQuery QueryBuilder.
React Multiselect Dropdown
React component that provides multi-select functionality with various features like selection limit, CSS customization, checkbox, disable preselected values, flat array, keyboard navigation, and grouping features.
React Cool Virtual
A tiny React hook for easily rendering large datasets, overcoming some of the problems common in other solutions.
vitro
A Storybook alternative that builds 20x faster and helps you develop React UI components in isolation while staying organized and productive.
Draftail
A configurable embeddable rich text editor built with Draft.js that aims for a mouse-free experience during editing.
react-zoom-pan-pinch
Super fast and lightweight React package that easily implements zooming, panning, and pinching for HTML elements.
react-spring-lightbox
A flexible image gallery lightbox with native-feeling touch gestures and smooth animations.
React Easy Emoji
A super minimal emoji rendering utility for React.
react-nice-avatar
A React library that displays a component for generating a customized avatar.
React Grid System
A powerful Bootstrap-like responsive grid system for React.
React Slider
An accessible, CSS-agnostic range slider component for React.
React Time Ago
International relative time formatting for React.
Want the latest in productivity tools and articles? Try my other newsletter, Tech Productivity. Includes tools, articles, and tips on productivity and remote work.
|
A Tweet for Thought
Here's one comic artist's explanation on how to write ALT text for comic book panels.
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If you're a designer and a Trekkie, you'll love Star Trek + Design, a showcase of the aesthetics and set designs from Star Trek episodes, which you can view by categories (e.g. Glassware, Tableware, Lighting, etc).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
