The JavaScript blog.


layout responsive angularjs react

React-Grid-Layout, Angular Debug Bar and Reading Position

Posted on .


Samuel Reed sent in React-Grid-Layout (GitHub: strml/react-grid-layout, License: MIT), a grid system that is responsive. It requires React but doesn't require any other library (including jQuery).

You can use the ReactGridLayout custom element in templates which allows you to cleanly specify how many rows and columns you'd like. It also supports props for columns, rows, responsive breakpoints, and layout change events.

Although the author states it has fewer features than Packery or Gridster, it supports some cool stuff like vertical auto-packing and dragging and resizing.

Angular Debug Bar and Reading Position Indicator

Maciej RzepiƄski sent in two useful Angular projects:

angular-debug-bar allows you to including a new element, angular-debug-bar, to show some statistics about the current page. This includes a count of $watch and $listener items, DOM objects, and page load time. Each metric is defined with a registerPlugin method, so you might be able to add new metrics although I haven't tried that myself.

angular-rpi is based on the Reading Position Indicator post from CSS-Tricks. It shows a bar at the top of the page as you scroll the document:


You can use it with the rpi directive. Both projects have a demo that you can run locally. If you want to edit the progress bar styles, then you can use the .scss file and run npm install ; bower install ; gulp.


libraries mobile modules responsive

RWDPerf, respimage

Posted on .


RWDPerf report

RWDPerf (GitHub: lafikl / RWDPerf, License: MIT, npm: rwdperf) by Khalid Lafi is a tool for analysing responsive pages. It calculates the page weight, so you can see what the download bloat is like.

It works using Chrome's remote debugging API, so it should be more accurate than a DOM simulation. It accepts arguments on the command-line for configuring things like device scale factor, width, height, and user agent.

It also has an API, which is ideal for dropping it into a build script.


If RWDPerf indicates that your page has a lot of unused images, then you might want a better responsive image replacement library. Respimage (GitHub: aFarkas / respimage, License: MIT) by Alexander Farkas is a responsive image polyfill for picture and srcset.

Respimage works using the picture element or the srcset image attribute. The srcset implementation supports descriptors for width and density.

There's also a JavaScript API, so you can also support dynamically generated content.


libraries jquery data node modules responsive

BiMap, jQuery breakpoint

Posted on .


BiMap (GitHub: alethes / bimap, License: MIT, npm: bimap) by James Daab is a bidirectional map implementation. This is a data structure that allows you to query for values by keys and keys by values:

  a: {
    b: 1,
    c: {
      d: 2
bimap.key('a.b'); // => 1  
bimap.val(2); // => "a.c.d"  

jQuery breakpoint

jQuery breakpoint (GitHub: joshbambrick / breakpoint, License: MIT) by Joshua Bambrick is a plugin for tracking page resizes, and is ideal for when you need JavaScript to trigger in a responsive design.

You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There's also $.breakpoint.off for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.


responsive vlex

Responsive SVG with VLEX

Posted on .


VLEX (GitHub: indus / VLEX, License: MIT) by Stefan Keim is a library for defining the logic necessary to resize SVG images. It works using a vlex attribute that controls how things are resized, and there's also a VLEX function for initialising and updating elements.

A "vlexpression" contains property descriptions separated by semi-colons. Using a $ allows predefined values to be referenced: $x is element.clientWidth, and $cX is $x / 2 -- the horizontal centre. Using a colon allows a value to be set: key:value.

Given those rules, you can centre a circle with cx:{$cX};cy:{$cY}.

Internally it splits the expression with String.prototype.split(';'), and then splits on : to get the keys and values. It's a fairly simple parser, but it seems small and flexible enough to do get some clever effects using SVG. Take a look at the examples in the readme to see what's possible.


jquery design responsive ES6

ResponsiveComments, jQuery Evergreen

Posted on .


ResponsiveComments (GitHub: chambaz / ResponsiveComments, License: MIT) by Adam Chambers is designed to support conditional loading using HTML comments:

Through the use of HTML comments, markup can be introduced to progressively enhance an experience as various media queries or feature detections evaluate to true.

Data attributes are used with valid media queries to conditionally display HTML. For example:

<div data-responsive-comment-media="(min-width: 769px)">  
  <!-- <div><p>Any content can go in here</p></div> -->

IE 9 and below support requires the matchMedia.js polyfill, but otherwise browser support is pretty good.

jQuery Evergreen

What would jQuery look like if it was written for modern browsers with ES6 modules? jQuery Evergreen (GitHub: webpro / jquery-evergreen, License: MIT, Bower: jquery-evergreen) by Lars Kappert is an attempt at answering that question.

jQuery Evergreen works with modern browsers. It has the same familiar API as jQuery, and is lean and mean with the following, optional modules: selector, class, DOM, event, attr and html. The source is written in the ES6 Modules format, and transpiled to an AMD version, and a "browser global" version using the ES6 Module Transpiler.

It'll work with current versions of most browsers thanks to transpilation and an IE9 polyfill for classList.

You can even create custom builds with Grunt, like this:

grunt --exclude=attr,class,dom,event,html,mode,selector