Issue #308 (DOM Dimensions, JS Utils, Build Tools, Media)06/13/19
I've discussed getting element dimensions via JavaScript a few times in this newsletter in the past, and I've expanded on that subject in a recent post on my main blog:
The idea here is focused on what happens to an element's on-page dimensions when its shape is changed using CSS transforms (including 3D transforms), and how do you access the new dimensions vs. the original dimensions using DOM scripting.
This is the first post on my main website since a recent redesign, so it will look new if you've visited my site before but haven't been on there lately. I hope you like the redesign – it was done by a designer friend of mine who's also the same person that redesigned this newsletter.
Now on to this week's tools!
|
JavaScript Utilities and Modules
From Spreadsheet Woes to Powerful Prose
Take the stress out of content marketing with Airtable. It’s your one-stop shop for all things content. Store assets, plan out your content pipeline and automatically see deadlines on a calendar. sponsored via ThoughtLeaders
secure-require
A secure require implementation for ECMAScript.
Tornis
A minimal JavaScript library that watches the state of your browser's viewport, allowing you to respond whenever something changes.
Overlay Scrollbars
A JavaScript scrollbar plugin that hides native scrollbars, provides
custom stylable overlay scrollbars and keeps the native functionality and feeling.
Ken Burns Carousel
A bare and light web component that displays a set of images with a Ken Burns effect (transition similar to the style in the popular Ken Burns documentaries).
Choices
Now at version 7+. A lightweight, configurable select box/text input plugin. Similar to other solutions but without the jQuery dependency.
CodeX Editor
A block-styled WYSIWYG editor with clean JSON output. Try the on-page demo, very easy to use and intuitive.
Qoa
Lightweight module that enables you to receive various types of user input through a set of intuitive, interactive, and verbose command-line prompts.
cryptozoa
Dead simple isomorphic encryption wrapper around window.crypto and Node crypto.
HTM
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
interact.js
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+).
facon
Tiny utility that makes it easy to create nested DOM elements using template literals.
domready
An old project, but you might find it useful. Similar to jQuery's $() wrapper, a shortcut for checking when the DOM is ready.
|
Build Tools, Bundlers, etc.
JavaScript & DOM Scripting E-Books Bundle - $12
350+ pages of JavaScript and DOM tips explained via 240+ interactive demos, all recently updated with ES6 syntax. promoted
Comfygure
Encrypted and versioned configuration storage built with collaboration in mind. great to manage application configurations for multiple environments, toggle feature flags quickly, and manage A/B testing.
Entropic
A package registry for anything, but mostly JavaScript, with a new CLI, designed to be easy to stand up inside your network.
Packem
A precompiled JavaScript module bundler, claiming to be 2x faster than Parcel.js.
tris-webpack-boilerplate
Webpack boilerplate for beginner to advanced developers, to create static websites with perfect scores on Page Speed Insights and Lighthouse.
MetaTemplate
A web template/component generator that can take a single template definition and output multiple templates/components in React, TypeScript, Vue, SCSS, etc.
Webpack Nomodule Plugin
Assigns the `nomodule` attribute to script tags injected by HTML Webpack Plugin (another tool I've featured before).
ipfs-deploy
Zero-Config CLI to Deploy Static Websites to InterPlanetary File System (IPFS).
Create React App
Now at version 3+ (details). Helps you set up a React app by running one command.
Glicky
An in-browser task runner for modern web development.
Open-Registry
A JavaScript Package Registry funded, developed, and maintained by the community, for the community.
TSdx
Zero-config CLI for TypeScript package development.
|
Media Tools
Mixkit
High quality free stock footage, HD video clips, and illustrations.
Feather
A beautiful and simply-designed set of open source icons.
Vector Logo Zone
3,000+ SVG logos for known brands, perfect for your README or credits page.
OpenMoji
Open-source emojis for designers and developers.
ngx-charts
Declarative D3-based chart framework for Angular.
html2canvas
Script that allows you to take "screenshots" of webpages or parts of it, directly in the user's browser. The screenshot is based on the DOM, rather than what's visible on the page.
Zdog
Round, flat, designer-friendly pseudo-3D engine for Canvas and SVG.
imgsquash
Simple image compression written in node, React and Next.js. Easy to deploy as a microservice.
Shotstack
Build dynamic video applications at scale. Provides a cloud-based video editing API used to power applications that create, automate, and personalize millions of data driven videos.
Px
A tiny 2D Canvas framework for turn-based puzzle games.
|
A Tweet for Thought
Is there a lack of discussion on component-based design? Jonathan Snook thinks so. It's odd to hear this sort of thing nowadays, though he did tweet that back in December.
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 into diverse office designs, you'll love Spaces. It's a showcase gallery of various work spaces from around the world, which you can filter by company size, industry, location and more.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
