|
|
|
|
Issue #124 (Prototypal Inheritance, JS Utils, CSS/HTML, Productivity)12/03/15
I just came across a video called "The Definitive Guide to Object-Oriented JavaScript" by James Shore of Let's Code TDJS. In that video, James gives a really nice explanation of prototypal inheritance, which starts here.
Below is the code example he uses to demonstrate how useful inheritance is when trying to keep code DRY and maintainable:
|
var parent = {
get: function fn() {
return this.val;
},
val: 42
};
var child = Object.create(parent);
child.val = 3.14159;
var grandchild = Object.create(child);
console.log(parent.get()); // 42
console.log(child.get()); // 3.14159
console.log(grandchild.get()); // 3.14159
|
Here's a JS Bin demo.
The key point here is that the child and grandchild objects are each able to inherit the get() method without needing to repeat it. I highly recommend you watch the whole video, especially if you're new to object-oriented JavaScript concepts. Although he does cover a ton of material, like he says in the beginning, the pause button on the video will come in handy.
Now on to this week's tools!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Utilities and Mini Libraries
MissPlete
"Misspelling-tolerant autocomplete in less than 220 lines of no-dependencies ECMAScript 2015." Try out the demo, it works really nicely.
React-yearly-calendar
"React calendar component with yearly view."
Jump.js
"A small, modern, dependency-free smooth scrolling library."
Inspire Tree
"A performance-driven JavaScript-based UI tree component, built for the modern web."
wu.js
"Library providing higher order functions (such as map, filter, and reduce) for ECMAScript 6 iterators."
react-treebeard
Another tree view UI component, this time for use with React.
ngclipboard
"AngularJS directive for clipboard.js. A modern approach to copy text to clipboard without using flash."
validate.js
"A simple library for data validation."
LJSON
"A drop-in replacement for JSON which also allows you to parse and stringify pure functions and their contents."
react-date-range
"A React component for choosing dates and date ranges."
XRegExp
"Provides augmented (and extensible) JavaScript regular expressions. You get new modern syntax and flags beyond what browsers support natively."
HashMap.js
Under 500 byte library for HashMaps in JavaScript.
MockTheClock
"A tiny JS library to... spoof timers and other date/time functions. Useful for slowing down 3D animations."
CSS and HTML Tools
jSanity
"A secure-by-default, performant, cross-browser client-side HTML sanitization library."
gridmanager.js
Lets you add a component to a website to create, reorder, update, and delete rows and columns in grid layouts used by frameworks like Bootstrap,
lrStickyHeader
Dependency-free, sticky table header plugin for HTML tables.
Minigrid
Minimal 2kb zero dependency cascading grid (or cards) layout.
Angular Fx
"Angular CSS3 animations and effects for your elements."
Autoprefixer CSS online
An online live version of the prefixing tool. This is handy if you just want to see what your CSS will compile to before building/deploying.
Lost Grid
"A powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems."
Pigeon-js
"An HTML preprocessor / template engine written in JavaScript."
chart.css
A simple CSS chart/graph system.
gBoxShadow.js
"Gravity-sensing box-shadow for Flat UI."
ThemeFinder
A comprehensive Bootstrap theme directory.
Productivity Tools
PhoneExpander
Helps you create more space on your iOS device.
Sideplayer
Chrome extension that lets you watch YouTube in a small side window while you browse or work.
Quick Search Box
Mac app that's an "open source search box that allows you to search data on your computer and across the web."
Veneer
"Chrome extension that allows you to modify the CSS on any website."
Dewey
"Better bookmarks for Google Chrome."
appear.in
"One click video conversations."
A Tweet for Thought
Live coding demos? Yeah, looks about right.
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...
Hugo Giraudel has started a repo called Simplified JavaScript Jargon, "a community-driven attempt at explaining the loads of buzzwords" making up the current JavaScript ecosystem. Still in the early stages, so you can contribute if you wish.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
