|
|
|
|
Issue #26 (matchMedia(), JS Libs, JS Utils, Mobile)01/16/14
Check out this week's Sponsor:
 |
Lunchbox Slab Serif (1,500+ Glyphs)
Lunchbox Slab is just full of total fun and pure quirkiness. This terrific typeface includes over 1,500 different glyphs, 4 contextual alternatives per character, 3 different weights, 200+ ornaments, stylistic alternatives and loads more. Includes a full set of swashes with 4 style variations. It's also on sale now for 72% off - See the previews |
Using CSS media queries, you can design your website to change styles based on device size, orientation, or other media features. You can also do something similar in JavaScript using window.matchMedia.
matchMedia is kind of like an amalgamation of querySelector() and CSS media queries. Here's a simple example, followed by an explanation:
var MM = window.matchMedia("(max-width: 400px)"),
docbody = document.body;
function doMediaCheck () {
if (MM.matches) {
docbody.innerHTML = 'less than 400';
docbody.className = 'orange';
} else {
docbody.innerHTML = 'more than 400';
docbody.className = '';
}
}
window.onresize = function () {
doMediaCheck();
};
doMediaCheck();
|
(Demo) The matchMedia() method accepts a string value that represents the media query you want to test for, and it will return a MediaQueryList object. Properties on the returned object include whether the media query matches (which I'm using above) and the string representing the original query (accessed via "media"; so in the above example it would be MM.media).
If you resize the rightmost frame in the demo, you'll see the background color change and the text on the page tells you whether the width is more or less than 400px. And this is determined based on whether the supplied 'medium' is 'matched'.
So if you need to write some scripts or load resources in response to certain media features (window size, landscape vs. portrait, etc.), matchMedia could come in handy. matchMedia has pretty good support everywhere, but naturally is not available in IE9 or lower. So basically, if IE8 is out of the picture for you, you can use it, as IE9's market share is quite low right now.
Below are some links for further reading along with a polyfill:
Now on to this week's tools!
JavaScript Libraries and Frameworks
OriDomi
An open source library for creating origami-like effects with JavaScript. No dependencies, has touch and mouse handlers, along with some features for implementations on responsive sites.
DOMtastic
"Small, fast, and modular DOM and event library for modern browsers. Having the same familiar API as jQuery (but without the extra "weight" of modules like $.ajax, $.animate, and $.Deferred)."
chrome-boilerplate
"A boilerplate for Chrome app, extension, and theme development. It should be easy enough to get started even if you've never built a Chrome extension before."
Jiko
"A modern and easy to use template engine for JavaScript." IE7+ and it's modelled after Python engines Mako and Jinja.
EndDash
A two-way binding JavaScript templating framework built on top of semantic HTML.
famo.us
Still in Beta. "A JavaScript engine and framework that solves HTML5 performance. 40-60fps on phones, tablets, PCs, and televisions... no plug-ins, no WebGL, no Canvas; 65KB footprint."
Require.js Library Skeleton
Skeleton project for building JavaScript libraries using RequireJS. Bower and Grunt.js as dependencies.
Nunjucks
"A rich and powerful templating language for JavaScript." Fast, extensible, and works in the browser or in node.
RWD and Mobile Tools
Unison.js
"A small plugin (533 bytes minified, 164 bytes gzipped) that allows you to declare named breakpoints in one place and automatically sync them across your javascript and markup."
Breaq
Yet another RWD testing tool. But this one will actually give you predefined sizes based on your existing media query breakpoints. Interesting.
Duo
A Mac app, it's "a dual-paned web browser built for Responsive Web Design that lets you browse the web in two views: your standard ‘desktop’ view as well as a typical ‘mobile’ view."
Responsive Email Template
From the folks at Fog Creek Software: "A super-barebones single-column responsive email template, assuming a max-width of 540px."
Kinetic Scrolling with JavaScript
A small library to implement drag-and-scroll, flick list, snap-to-grid, and horizontal swipe for touch devices. Worked nicely on my iPad.
Strikingly
"Gorgeous, mobile-optimized sites in minutes."
JavaScript Utilities and Mini Libraries
Knwl.js
"Knwl.js scans through text, user data, or just about anything for data of interest, phone numbers, dates, locations, emails, times, and more."
tween.js
A "super simple, fast and easy to use tweening engine" with no dependencies.
Numeral.js
"A javascript library for formatting and manipulating numbers." The format feature lets you format numbers "to look like currency, percentages, times, or even plain old numbers with decimal places, thousands, and abbreviations."
Formbuilder.js
"A small graphical interface for letting users build their own webforms."
Moments-Away
Moment.js durations for those more comfortable with RoR's ActiveSupport syntax.
Validate.js
"A cross framework and cross language way of validating data."
EasyStar.js
An asynchronous pathfinding API written in JavaScript "for use in your HTML5 games and interactive projects. The goal of this project is to make it easy and fast to implement performance conscious pathfinding."
A Tweet For Thought
jQuery founder John Resig provides a quick opinion on writing complex libraries.
Suggest Your Tool / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
If you feel like watching some conference videos, check out Paul Irish's frontend videos Delicious feed. Tons of video pages from lots of different conferences and events.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
