|
|
|
|
Issue #164 (Storage Events, JS Utils, Jamstack, Productivity)09/08/16
| Support this week's primary sponsor: |
When using the Local Storage API, you can listen for a storage event that's triggered when a Local Storage item is modified. If you're new to the storage event, then there are a few things to take note of.
First, a storage event will fire only on other same-origin windows where the item was modified. So the following code will not trigger a storage event if there is only one window/tab open running the script:
|
localStorage.setItem('one','one-value');
console.log(localStorage.getItem('one'));
window.addEventListener('storage', function () {
console.log('Storage item was updated.');
}, false);
|
Notice I'm listening for the storage event but if I run this code I won't see the logged message "Storage item was updated." You can try it on this JS Bin. The message won't log. Again, this is because the storage event is specifically designed for use in apps that use multiple windows.
To see the message get logged, I have to have two versions of the same window open and then run the script on one of those windows. The other window will display the log message.
Another interesting thing to note is that the storage event will fire if the user manually deletes the storage item (or clears their Local Storage). This too apparently qualifies as modifying the item, even though it doesn't happen in a script.
Finally, if you set a storage item to the same value that it already has, this will not trigger a storage event. So the message would not log inside the listener function in the code above. In such a case, the browser does not consider the storage item "modified", even though technically you have accessed it and overwritten what was there.
You can try out this storage event demo by Remy Sharp to see this work, which, of course, you'll have to open in two separate windows.
Now on to this week's tools!
| Support this week's primary sponsor: |
JavaScript Utilities and Modules
dom-minimap
Adds a "mini map" navigation feature to a long web page, kind of like what you see in Sublime Text.
Granim.js
"Create fluid and interactive gradients animations with this small (< 10kB) .js library."
lightgallery.js
"Full featured JavaScript lightbox gallery. No dependencies."
dommy.js
"Easily create large static DOM Trees without using innerHTML."
JavaScript String Replace
"A simple, lightweight, functional JavaScript API for replacing a String like a boss."
in-view.js
"Get notified when a DOM element enters or exits the viewport."
twitz.js
"Overcomes most of the hassle and constraints of the twitter API and lets you load and manage many different twitter user timeline widgets effortlessly with a relatively good level of customizability."
xterm.js
"A terminal front-end component written in JavaScript that works in the browser. It enables applications to provide fully featured terminals to their users and create great development experiences."
Postmate
"A promise-based API built on postMessage. It allows a parent page to speak with a child iFrame across origins with minimal effort."
react-dates
"An accessible, easily internationalizable, mobile-friendly datepicker library for the web."
bluebird
"A full featured promise library with unmatched performance."
Grade
"Produces complementary gradients generated from the top 2 dominant colours in supplied images."
LogicJS
Adds logic programming to JavaScript, typically used when programming in Prolog.
Static Sites, Web Builders, CMS's, etc.
KeystoneJS
"Node.js CMS & Web Application Platform. The open source framework for developing database-driven websites, applications and APIs in Node.js. Built on Express and MongoDB."
Staticman
"Handles user-generated content for you and transforms it into data files that sit in your GitHub repository, along with the rest of your content."
Bi Sheng
"Designed to transform Markdown into static websites and blogs using React."
Jekyll Boilerplate
"A lightweight and cleaned up version of the initial Jekyll setup."
Hexo
"A fast, simple & powerful blog framework."
Hugo
"A fast and flexible static site generator built with love in GoLang."
Pulse CMS
"A simple flat-file CMS (without a database) designed for designers and their clients."
Blot
"Turns a Dropbox folder into a blog. Write with your favorite app then drag-and-drop to publish. Blot converts images, text, Markdown and more into blog posts."
Productivity Tools
save-as-ebook
"Save a web page/selection as an eBook (.epub format) - a Chrome/Firefox/Opera Web Extension."
Billdogg
"Beautifully simple invoicing for freelancers."
Amium
"Turns any file into a real-time activity feed and conversation. So you can work better, together."
dext
A JavaScript-powered smart launcher for Mac.
Ulterius
"Complete control of your desktop — from your browser."
Firefox Autocomplete Prioritize URL
Makes URLs more prominent when autocompleting them in the address bar in Firefox. Good for scanning/searching.
Dropbox Paper
"A clean, smart surface that lets you and your team work together the way you want."
Phoenix
"A lightweight macOS window and app manager scriptable with JavaScript."
A Tweet for Thought
Which one of the two possible websites are you currently designing?
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...
Lea Verou has put together a small directory of JavaScript plugins/libraries that can be used without writing any JavaScript. Submit yours for inclusion, if it qualifies.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
