Issue #295 (JS Web Apps, JS Utils, Frameworks, Vue Tools)03/14/19
If you're somewhat new to the JavaScript scene, your first foray into building apps might have been going straight into using solutions like React, ES6, module bundlers, and similar flavor-of-the-month tools.
But how exactly did we get to this point? Why did the JavaScript scene take so long to incorporate so many obviously effective tools?
If you'd like a little bit of background on this, I highly recommend you pick up a copy of a 2011 O'Reilly book by Alex MacCaw called JavaScript Web Applications. Although the book's sub title implies it's a book for jQuery devs, that's not necessarily the case. Much of the code examples do use jQuery, but the underlying concepts are much more valuable beyond jQuery.
Note some of the chapters:
- MVC and Classes
- Events and Observing
- Models and Data
- Controllers and State
- Views and Templating
- Dependency Management
- Testing and Debugging
- Deploying
Not many 8-year old JavaScript books have such a comprehensive and still-relevant topic list!
The tools discussed in the book are woefully out of date, of course. But as you can see above, the concepts it covers give the reader a nice overview of the bridge from copy/paste script-kiddie-type JavaScript to full blown, maintainable web apps. I'd put this one not far behind Crockford's The Good Parts, as far as an important book for the JavaScript community.
The book might not help you solve any immediate problems, but it will probably help you immensely to understand the concepts and history behind the modern solutions you use today.
Now on to this week's tools!
|
JavaScript Utilities
DeepScan: How to Ensure JavaScript Code Quality
Make your JavaScript better with advanced static analysis. DeepScan targets the detection of possible runtime errors and quality issues for your JavaScript, TypeScript, React and Vue.js code. sponsored via Paved
iro.js
An HSV color picker widget for JavaScript, with a modern SVG-based user interface.
FrenchKiss.js
A blazing fast lightweight internationalization (i18n) library written in JavaScript.
ms
A tiny millisecond conversion utility. For example: ms('1d') returns 86400000.
NSFW JS
Client-side indecent content checking.
Readability.js
A standalone version of the readability library used for Firefox Reader View.
Finance.js
Dependency-free library that makes it easy to incorporate common financial calculations into your application.
Functional TypeScript
TypeScript standard for rock solid serverless functions.
jsdiff
A JavaScript text differencing implementation based on the algorithm proposed in 1986 by Eugene W. Myers.
ZingGrid
Build responsive, interactive JavaScript data grids and tables with minimal set-up.
fetch
A polyfill for a subset of the Fetch API spec, at version 3+ since September (details).
music-fns
A JavaScript music utility library that contains small music notation related functions.
details-menu-element
Similar to the modal from last week, this time the `details` element opens a menu.
|
Front-end Frameworks
Storybook
Now at version 5+ (details). An open source tool for developing UI components in isolation for React, Vue, and Angular.
Ionic
The popular cross-platform mobile app framework is now at version 4+ (details).
Material Kit
Open source UI Kit for Bootstrap 4, React, Vue, React Native, and Sketch based on Google's Material Design.
CSS Remedy
Start your project with a remedy for the technical debt of CSS. Kind of a different take on CSS resets.
screen.css
A starter stylesheet for desktops, tablets, and phones.
Simple Node Server
A simple enough node server scaffolding to get you started on your project immediately.
Immutable Web Apps
A framework-agnostic methodology for building and deploying static single-page applications.
MH Portfolio Vue.js and GSAP Template
A free responsive Vue template for a portfolio site that incorporates GSAP animations.
Primer Components
React components for the Primer Design System (still in early development, but lots of stuff here to check out).
|
|
Recommended Reading for Developers
|
Vue Tools
vue-declarative-animation
An experiment at a fully declarative animation library in Vue.js. Implemented as a template-based wrapper around Velocity.js.
Vue Glide
Glide.js (the carousel module) as a view component.
Buefy
Lightweight UI components for Vue.js based on Bulma.
FormVuelar
Vue form components with server side validation in mind.
vue-virtual-scroller
A high-performance scrolling content component that scrolls smoothly even with large amounts of data.
styled-vue
Use dynamic styles in Vue single-file components.
Vue Offline
Enhance offline capabilities of your Vue.js application. Useful for PWAs or if you just want to inform your users they've lost internet connection.
Vue Lazy Image Loading
Vue progressive image and background loading plugin.
Cool Emoji Picker
A fast plug-n-play [Tw]emoji Picker for Vue, similar to what you'd find on a smart phone or similar app.
Vue Dark Mode
A minimalist dark design system for Vue.js.
|
A Tweet for Thought
How important is commenting your code? Here's an interesting comparison.
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...
Programming Digest is a brief newsletter you might want to check out. Each issue includes five links covering software dev-related news.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
