Issue #327 (Learning React, Vue Tools, Build Tools, Media)10/24/19
Like many developers who are accustomed to writing vanilla JavaScript, I've struggled to get started in a serious way with React, which has in recent years become the most popular JavaScript library/framework in the world.
Recently on my main website, I put together what is essentially a large link dump going through all the different things in JavaScript that others have discussed are important to learn in order to really get to know React well. The article is called:
The article contains more than 40 different links to articles that have been written specifically to help developers understand JavaScript concepts that underlie React and libraries like it.
If you're in a similar boat where you can more or less use the library but still don't feel like you really know it, then maybe you'll find some of those links useful.
Now on to this week's tools!
|
Vue Tools
Clubhouse is Now Free for Up to 10 Users
Get your hands on the snappy, modern project management tool designed for software teams. Free Plan includes all core features. ad via ThoughtLeaders
Vuetensils
A lightweight toolset to help you build accessible Vue apps with the ability to add custom branding.
vuejs-avataaars
Simple avatar generator Vue component for Avataaars (the library for building avatars in Sketch.
Vue File Agent
High performance Vue file upload component with distinguishable previews for every file type and support for drag and drop, validations, and more.
Vue-Treeselect
A multi-select component with nested options support for Vue.
Zecoda
App to convert Sketch files into front-end code based on Vue.
vue-use-form
A Vue composition API function that allows you to do form validation, powered by vee-validate.
vue-slick-popover
Popover component (kind of like a tooltip on steroids) using popper.js for Vue.js apps.
Vue Plugin Boilerplate
A package for creating Vue plugins easily. Nuxt compatible, TypeScript type definitions, and more.
Vue Moveable
Adds a Vue component that's resizable, scalable, draggable, rotatable, etc.
Vue.plotly
A thin Vue wrapper for Plotly, a JavaScript graphing library.
|
Build Tools, Bundlers, etc.
Tech Productivity Newsletter
A brief weekly newsletter featuring productivity tools, articles, and resources for tech pros. promoted
Webpack Boilerplate
Minimal Webpack 4 boilerplate with Babel, Sass, ESLint, hot module replacement, and development/production optimization.
naw
Your very own containerized build system. Mirrors local vs. CI, includes a test suite, reduces local dependencies, and more.
TeamCity
Powerful continuous integration out of the box. A continuous integration and deployment server from JetBrains.
Scarf
A developer-centric, cross-platform system package manager that enables developers to see how their software is actually used and to get paid for their work.
data-visuals-create
tool for generating the scaffolding needed to create a graphic or feature the "Data Visuals" way.
eslint-plugin-proper-arrows
ESLint rules to ensure proper arrow function definitions.
No-Sweat™ ESLint and Prettier Setup
Wes Bos's config settings for ESLint and Prettier.
babel-plugin-transform-replace-expressions
A Babel plugin for replacing expressions with other expressions.
aud
Use `npx aud` instead of `npm audit`, whether you have a lockfile or not.
Webpack Bundle Size Analyzer
A tool for finding out what contributes to the size of Webpack bundles.
webpack demos
A collection of simple webpack demos, purposely written in a simple and clear style to help learn how to use webpack.
|
Media Tools (SVG, Audio, Video, etc)
Strikefree Music
Music maker for adding to videos, podcasts, etc., without feat of copystrikes. Download for free or sell a unique beat minus a 15% commission.
svg-autocrop
An npm module to autocrop and slim down SVGs.
loading.io
Online tool to build Ajax loading icons with SVG, CSS, GIF, or APNG.
ML Terraform
Neural Network terrain generator trained on handmade 3D models.
Cytoscape.js
Graph theory library for visualisation and analysis.
JustGage
JavaScript plugin for generating and animating nice and clean dashboard gauges, based on the Raphaël library for vector drawing.
Resemble.js
Analyse and compare images with JavaScript and HTML5.
Vimeo Player API
Allows you to interact with and control an embedded Vimeo Player with JavaScript.
Semiotic
A data visualization framework for React that provides three types of frames: XYFrame, OrdinalFrame, NetworkFrame, to deploy a wide variety of charts.
|
A Tweet for Thought
Which type of designer are you. This is like tabs vs. spaces, oh the horror.
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...
Neil Barkhina built Mario HTML, a really neat version of Super Mario in TypeScript, that works smoothly. I don't think it's a complete game, but nice job regardless.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
