Issue #190 (Coupling, Mobile, Productivity, Media)03/09/17
It's amazing how things have changed in front-end development best practices in just the last 5 years. In his fantastic book Maintainable JavaScript, published in 2012, Nicholas Zakas discusses tight coupling vs. loose coupling in front-end code. He gives the following suggestions, which I've simplified into a basic list for brevity:
- Keep JavaScript out of CSS (this was in reference to IE-only CSS Expressions, which were awful for maintenance and performance)
- Keep CSS out of JavaScript
- Keep JavaScript out of HTML
- Keep HTML out of JavaScript
Zakas was always somewhat of a purist, and this advice was excellent advice in 2012, and it was consistent with the "separation of concerns" concepts that have been prevalent in the standards community for years.
But things have changed. Probably the only one of those suggestions that's still technically the right advice is the first one. But since CSS Expressions were only supported in IE7 and below, that means we could say that not one thing on that list is categorically good advice today.
With the emergence of UI libraries like React and Vue, the Web Components spec, atomic CSS, and other similar techniques, the above advice is limited in its value and is probably bad for code maintenance in many cases. That being said, I'm sure many developers still write vanilla JavaScript that can benefit from those loose coupling concepts.
Fortunately, that part of the book is only a few short pages. Most of the book (242 printed pages) is still great advice, and I highly recommend it for anyone working on JavaScript on a large team. But it is interesting to see how modern practices and techniques have that small section in the book almost obsolete.
Now on to this week's tools!
|
Mobile and RWD Tools
PWABuilder
All the tools you need to build and deploy your Progressive Web Apps.
Web App Manifest Generator
Web App Manifests are one of the key pieces to making your web app look and feel like a native mobile app.
spacegrid
A no-frills responsive grid layout to help you get started on your next project.
AlloyFinger
A super-tiny multi-touch gestures library for the web.
Responsive font calculator
A simple utility to easily calculate responsive font values for embedding directly into your CSS.
VueCircleMenu
Native app-like circle menu built on Vue. Test on mobile to see how it works.
Nachos UI Kit for React Native
Pick from a bunch of pre-coded UI components ready for your next kick-ass app in JavaScript or React.
React Studio for Mac
Model your React JS web app using high-level components, concepts and precise vector designs. Use our high-fidelity Sketch importer, or design in place.
React Navigation
Start quickly with built-in navigators that deliver a seamless out-of-the box experience.
|
Productivity Tools
Taskade
The easiest way to share your notes, ideas, and daily tasks. Make lists, organize your thoughts, and get stuff done. It's free and instant.
Captain for Mac
Manage Docker containers instantly from the menu bar.
Amazon Chime
Online meetings and video conferencing.
Vimperator
Firefox extension with strong inspiration from the Vim text editor, with a mind towards faster and more efficient browsing.
PDFlower
Reflow PDF papers for small-screen reading.
Tabbie
The missing tab manager for Chrome. Select a few tabs with CMD + click and then save them with Tabbie.
Next Step for Trello
Increase your productivity with this Chrome extension that displays the next To-Do step of each card on your Trello boards.
read.isthe.link
A Readability-style service to read articles in a clean format.
TagSpaces
An open source personal data manager. It helps you collect, organize and browse your files on every platform.
Freeter
Native Windows, Mac, or Linux app. It's an organizer for designers, programmers, project managers, bloggers, etc.
Pastebot
Mac app. Clipboard manager to help you organize frequently used snippets, saves all copied data, with keyboard shortcut functionality.
High Contrast
Chrome extension. Lets you browse the web with your choice of several high-contrast color filters designed to make it easier to read text.
|
Multimedia Tools
opentype.js
An OpenType and TrueType font parser and writer. It allows you to access the letterforms of text from the browser or node.js.
zoom.js
A pure JavaScript version of zoom.js by @fat (i.e. no Bootstrap or jQuery dependency).
Piskel
Remember the good old 2D games and their beautiful sprites ? With Piskel you can create your own in a few clicks.
Rythm.js
A JavaScript library that makes your page dance. Use very cautiously, if at all.
JSMpeg
Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 Video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output.
vizflow
A relatively small library for adding transition effects and interactive visualizations to HTML5 documents with a simpler design compared to other popular interactive visualization libraries like D3js.
Canvas Gauges
Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
|
A Tweet for Thought
I'm pretty sure I've done this numerous times.
Suggestions / Corrections
Made something? Send links via 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...
FreeFrontend is a new site that has posts with extensive examples of UI components (menus, buttons, sliders, etc).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
