|
|
|
|
Issue #175 (createElement() Tricks, JS Libs, Productivity Tools, Uncats)11/24/16
Last year, David Walsh published an article called 7 Essential JavaScript Functions where he shared some JavaScript utility/helper snippets. One of the interesting techniques used in one of the functions is where he gets the absolute URL for a page. He does this using something like the following:
|
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
// Usage
getAbsoluteUrl('/something'); // https ://example.com/something
|
This example reveals a clever little technique. Basically, this function takes advantage of JavaScript's ability to create elements that don't actually exist in the DOM. From there, you can get info from that element as you please. In this case, the desired result is the full URL of the page. The browser automatically fills out full URLs in the href value of links, even if they're written in relative format. So with this we can easily grab the full URL from just a relative page link.
Similarly, someone in the comments posted the following snippet:
|
function isValidEmail(string) {
string = string||'';
var lastseg = (string.split('@')[1]||'').split('.')[1]||'',
input = document.createElement('input');
input.type = 'email';
input.required = true;
input.value = string;
return !!(string && (input.validity &&
input.validity.valid) &&
lastseg.length);
}
console.log(isValidEmail('')); // -> false
console.log(isValidEmail('asda')); // -> false
console.log(isValidEmail('asda@gmail')); // -> false
console.log(isValidEmail('asda@gmail.com')); // -> true
|
There's a lot going on there, but the principle is the same. The script creates an email input field, without actually inserting it into the page, and then information is gleaned from the input. The acquired info falls in line with what the browser would do if the email input actually existed and was interacted with on the page. This is along the same lines as what happens with feature detection using a library like Modernizr.
You can see both of the above examples in use in this JS Bin.
So the basic lesson here is, if you want to find out info on how a browser handles certain HTML elements, remember that those elements don't actually have to be in the DOM. You can create them yourself and then run some tests and respond accordingly.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Libraries and Frameworks
WhitestormJS
"Framework for developing 3D web apps with physics." (Corrected link from issue 171)
HFactory
"Small library to create Virtual DOM elements factories. Reduces boilerplate when using Virtual-DOM libraries without transpilation. It mimics React.DOM behavior but makes it pluggable in any existent Virtual-DOM library."
WoofJS
"A Scratch-inspired JavaScript library for making games."
Plekan
An agile and scaleable content builder for Vue.js 2.x.
Superdom.js
"Better and simpler ES6 DOM manipulation."
RE:DOM
"Tiny turboboosted JavaScript library for creating user interfaces."
kasia
"A React Redux toolset for the WordPress API."
Playground.js
"A game oriented JavaScript framework that gives you access to essentials like mouse, keyboard, sound and well designed architecture."
Productivity Tools
Blazemetrics.io
"The better way to measure project health. Automated project tracking for software teams using GitHub."
Paperworks
"All your receipts, invoices, and payments in one place."
Cloud Commander
"An orthodox web file manager with console and editor. Will help you manage the server and work with files, directories and programs in browser from any computer, mobile or tablet."
Ding
"Lightweight time management CLI tool."
Forgiva
"The new-age password manager. Never saves your passwords but regenerates them."
HyperSwitch
"Yet another keyboard window switcher for your Mac."
HyperDock
For Mac. "Adds long awaited features to your Dock: Select individual application windows just by moving the mouse on a dock item, use mouse clicks to quickly open new windows and many more."
Karabiner
"A powerful and stable keyboard customizer for OS X."
The Uncategorizables
TalkTalkTalk
"An easy-installable small chat room, with chat history."
Haash.io
"Smart super-simple help centers. Quickly add a friendly help center to your website."
Keygen
"A simple app and product licensing API, allowing developers to easily add licensing to any online software product."
Theme Juice
"Build WordPress sites better and faster. Theme Juice is a powerful Mac app that creates local WordPress sites with just a click."
Neos
A web content platform for professionals. An extensible application platform for ambitious web projects."
Caniuse Component
"Instant, up-to-date, and theme-able browser statistics for your presentations (so you don't have to update your slides the night before)."
Fireside
"A hosting platform by podcasters, for podcasters."
Open Broadcaster Software
"Free and open source software for video recording and live streaming. Download and start streaming quickly and easily on Windows, Mac or Linux."
A Tweet for Thought
Here's a lengthy tweetstorm by Tiago Forte on productivity.
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...
If you use SemVer for incrementing version numbers in product releases, you might want to read this SemVer counter-argument by Jeremy Ashkenas from a couple of years ago.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
