Glacial Indifference font face
Glacial Indifference is a free and open source sans serif typeface.
Available under the Open Font License.
Snippets
Bebas Neue font face
Bebas Neue is a sans serif font family based on the original Bebas Neue free font by Ryoichi Tsunekawa. It has grown in popularity and become something like the “Helvetica of the free fonts”.
Now the family has four new members – Thin, Light, Book, and Regular – added by Fontfabric Type Foundry.The new weights stay true to the style and grace of Bebas with the familiar clean lines, elegant shapes, a blend of technical straightforwardness and simple warmth which make it uniformly proper for web, print, commerce and art.
Originally designed by Ryoichi Tsunekawa, Flat-It Type Foundry.
Available under the Open Font License.
Using jQuery's queue functions
I needed a simple queue system for a project I’m working on and realized that jQuery already exposed its own:
Queues in jQuery are used for animations. You can use them for any purpose you like. They are an array of functions stored on a per element basis, using
jQuery.data(). They are First-In-First-Out (FIFO). You can add a function to the queue by calling.queue(), and you remove (by calling) the functions using.dequeue().To understand the internal jQuery queue functions, reading the source and looking at examples helps me out tremendously. One of the best examples of a queue function I’ve seen is
.delay():
Code language: JavaScript
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};
The default queue -
fxThe default queue in jQuery is
fx. The default queue has some special properties that are not shared with other queues.
- Auto Start: When calling
$(elem).queue(function(){});thefxqueue will automaticallydequeuethe next function and run it if the queue hasn’t started.- ‘inprogress’ sentinel: Whenever you
dequeue()a function from thefxqueue, it willunshift()(push into the first location of the array) the string"inprogress"- which flags that the queue is currently being run.- It’s the default! The
fxqueue is used by.animate()and all functions that call it by default.NOTE: If you are using a custom queue, you must manually
.dequeue()the functions, they will not auto start!Retrieving/Setting the queue
You can retrieve a reference to a jQuery queue by calling
.queue()without a function argument. You can use the method if you want to see how many items are in the queue. You can usepush,pop,unshift,shiftto manipulate the queue in place. You can replace the entire queue by passing an array to the.queue()function.Quick Examples:
Code language: JavaScript
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3));
[…]
[C]ustom queue example
Code language: JavaScript
var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue('alerts', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: 'Run Queue',
click: function() {
theQueue.dequeue('alerts');
}
}).appendTo('body');
// create a button to show the length:
$("<button>", {
text: 'Show Length',
click: function() {
alert(theQueue.queue('alerts').length);
}
}).appendTo('body');
Container-Adapting Tabs With "More" Button
This looks like an excellent, accessible starting point for the priority navigation pattern:
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website…
We agreed it should be a one-liner because the amount of tab items is unknown and narrowed our options down to two: horizontal scroll and adaptive with “more” button. Firstly, the problem with the former one is that horizontal scroll as a feature is not always visually obvious for users (especially for narrow elements like tabs) whereas what else can be more obvious than a button (“more”), right? Secondly, scrolling horizontally using a mouse-controlled device isn’t a very comfortable thing to do, so we might need to make our UI more complex with additional arrow buttons. All considered, we ended up choosing the later option[.]
Cutting the mustard with only CSS
JavaScript can be pretty brittle, so having a way to exclude browsers that don’t cut the mustard via CSS can be really useful, especially if you don’t want to serve them large amounts of CSS that they won’t properly understand. Since we can’t prevent loading a stylesheet via feature queries, the media attribute on a <link> element seems the next best thing. Andy Kirk has come up with a few combinations:
Code language: HTML
<!--
Print (Edge doesn't apply to print otherwise)
IE 10, 11
Edge
Chrome 29+, Opera 16+, Safari 6.1+, iOS 7+, Android ~4.4+
FF 29+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
only print,
only all and (-ms-high-contrast: none), only all and (-ms-high-contrast: active),
only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
only all and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0),
only all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm)
">
<!--
Print (Edge doesn't apply to print otherwise)
Edge, Chrome 39+, Opera 26+, Safari 9+, iOS 9+, Android ~5+, Android UCBrowser ~11.8+
FF 47+
-->
<link rel="stylesheet" href="your-stylesheet.css" media="
only print,
only all and (pointer: fine), only all and (pointer: coarse), only all and (pointer: none),
only all and (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen)
">
Serving old browsers limited JavaScript and CSS
Since we’re still stuck with a small percentage of users still on various versions of Internet Explorer and other older browsers, a good way to deal with those seems to be to only serve most or all of our JavaScript and CSS to browsers that cut the mustard, leaving the older set with a basic but functional experience, without risk that our newer, shiny stuff will inevitably break, or the need for polyfills that may or may not work.
See also: Cutting the mustard with only CSS
1% or 13 million JavaScript requests per month to BuzzFeed time out
More evidence that we don’t fully control our web pages and that a non-zero number of page views don’t execute JavaScript fully or correctly, despite it being enabled.
Says @ianfeather at #AllDayHey — “our monitoring tells us that around 1% of requests for JavaScript on BuzzFeed timeout. That’s around 13 million requests per month.” A reminder if one were needed that we should design for resilience