Issue #349  (HTML DOM, Frameworks, Media, Uncats)03/26/20

Have Happier, More Productive Video Meetings Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use. Try Team.video for FREE!

Although I often include quick DOM scripting tips in the intro of this newsletter, for this week, I'm just going to point you to a great little resource that was sent to me by reader Phuoc Nguyen:

• HTML DOM

It's more or less a repository of basic, intermediate, and advanced native DOM scripting snippets.
 

HTML DOM: A resource of native DOM snippets

Here are some of the advanced and intermediate examples:

• Make a draggable element
• Resize columns of a table
• Sort a table by clicking its headers
• Calculate the size of the scrollbar
• Communicate between an iframe and parent window

So check out HTML DOM, I'm sure you'll have lots to investigate!
 

Now on to this week's tools!
 

Front-end Frameworks

Have Happier, More Productive Video Meetings
Team.video makes it easier and faster for remote teams to work together by offering user friendly video meetings with agendas, collaborative notes, and emoji responses. No download required and it’s free to use.   via Syndicate

chakra-ui-vue
A set of accessible and composable Vue components that you can use to build your favourite applications and sites.

Pixel Lite
A beautifully crafted, responsive UI kit based on Bootstrap 4 that includes 100 components, 3 plugins, and 3 example pages.

next-typescript-materialui-jest-starter
Very opinionated starter boilerplate for projects based on Next.js, setup with Typescript, Material-UI, and Jest.

React SaaS Template
Template for building a SaaS app or admin website using React + Material-UI.

web3-react
A simple, extensible, dependency-minimized framework for building modern Ethereum decentralized apps.

Tailwind UI
A UI components library, crafted by the creators of Tailwind CSS.

neo.mjs
A Web Workers-driven UI framework.

LitElement
A simple base class for creating fast, lightweight web components. Makes it easy to define web components – ideal for building a UI design system.

Ionic React
React version of Ionic Framework. 100+ mobile optimized React UI components. Standard React tooling with react-dom.

Accessible Components
Scott O'Hara's repo that lists all the accessible widgets and components he's built.

StarAdmin
A free responsive admin template built with Bootstrap 4.

Media Tools

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

Croppola
Upload a photo and this tool will use AI to crop the photo for you automatically, or you can crop it manually and download the result.

Image to Colors
Online tool that extracts colors from any photo on upload.

Nuxt Optimized Images
Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

Twilio Video React App
Demonstrates a multi-party video application built with twilio-video.js and Create React App.

react-particle-image
React component to render images as interactive particles. There's an interactive demo using the React logo that's pretty cool.

CoreUI Icons
Premium designed free icon for web and mobile, available in SVG, webfont, and raster formats.

DotMatrix.js
A small, performant class-based, dot matrix library with animated movements that respond to mouse/touch events.

react-calendar-heatmap
A calendar heatmap component built on SVG, inspired by GitHub’s commit calendar graph.

Chessboard Image
Modify chess pieces on a virtual chess board, to create chess positions, then download the image for use wherever you want. Might be cool for a chess tutorial website or blog.

Video Language
A language for making movies. Combines the power of a traditional video editor with the capabilities of a full programming language.

The Uncategorizables

Tech Productivity Newsletter
A brief newsletter featuring tools and articles for remote work, work culture, learning science, and more – all to help you be more productive.   promoted 

Mailcoach
A self-hosted email list manager. It integrates with services like Amazon SES, Mailgun, Postmark, or Sendgrid to send out mailings affordably.

Backstage
Open-source developer portal that puts the developer experience first by means of a a unified front end for all your infrastructure tooling.

dstack.ai
Collaborative data exploration. Enables individual data scientists and their teams to publish, share, and track data visualizations.

TAGX
Allows you to create video highlights and annotate the interesting parts of a video. Enter a YouTube, Vimeo, or direct video link to start annotating.

cs.opensource.google
A search engine to search Google's open source projects (Angular, Dart, Flutter, Go, etc).

Cotter
One-click secure phone number login for your apps.

Phrase
Automate localization processes. Edit language files online with your team of translators or order translations into more than 60 languages.

It's a Live
Lets you mimic a live coding presentation by prerecording the presentation, which gets triggered by random keystrokes as if you were really coding.

EasyCSV
Import spreadsheets into your App, Zapier, Google Sheets, Salesforce, or any public API in minutes.

Pico
Platform to create paywalled content, subscriptions, newsletters, etc.

A Tweet for Thought

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've got a lot of extra time at home (and you should!) you might like Codepip. There you'll find a number of different interactive online games that teach you various aspects of front-end development.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris