jQuery.aim

jquery-aim

jQuery plugin which anticipates on which element the user is going to hover/click

Cool idea! Experimental/buggy though.

A UX Idea: I know where you are aiming! →
jQuery.aim source (GitHub) →
jQuery.aim examples →

Elsewhere , , Leave a comment

Google Chrome DevTools Device Mode

chrome-devtools-devicemode2

Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top.

You might have to enable Devtools Experiments in Canary via chrome://flags/#enable-devtools-experiments to see all this.

Google Chrome: Device Mode & Mobile Emulation →

Elsewhere , , , Leave a comment

How to do Hyperlapse Photography

Elsewhere , Leave a comment

A Spacecraft for All

aspacecraftforall

The ISEE-3 was launched to study the Sun in 1978, but ended up redefining space flight. Now it’s on a new mission to become citizen science’s first spacecraft, with data accessible by everyone.

Very cool mission, with a very neat website. A must watch.

A Spacecraft for All: The Journey of the ISEE-3 →

Elsewhere , , Leave a comment

Hyperlapse

We present a method for converting first-person videos, for example, captured with a helmet camera during activities such as rock climbing or bicycling, into hyperlapse videos: time-lapse videos with a smoothly moving camera.

Microsoft Research: First Person Hyperlapse Videos →

(via @pjaspers)

Elsewhere , , Leave a comment

Waves – Click effect inspired by Google’s Material Design

waves

When clicking an item, Waves injects a <div> on top of the clicked item, yet at scale(0). Using a transition, the growing effect is achieved after – via JavaScript – setting a new scale value.

Waves →

Elsewhere , , , , Leave a comment

CriticalCSS

lab-perf-fgcritical

Critical CSS opens a page in a browser from the command line, sets the window width to a specified width and height (default is 1200 x 900), and analyzes which styles are applied to elements that fall within the visible portion of that viewport. It then writes those styles to a file that you can include inline in any page.

CriticalCSS →
Critical CSS Grunt Task →

Elsewhere , , , Leave a comment

Breach – A browser for the HTML5 era

breach

Entirely written in Javascript. Free. Modular. Hackable.

From a technological point of view I find this very impressive. Interesting first use experience, explaining how it works. Uses Chromium as its rendering engine. Tagline should be A browser from the HTML5 era though, I think.

Breach →

Elsewhere , Leave a comment

InVision LiveShare PS

With LiveShare PS you can now broadcast any Photoshop document to as many people as you want through an instant LiveShare meeting. If you make a change to your Photoshop document, they’ll instantly see your changes in the LiveShare meeting—you don’t even have to hit the save button!

Neat.

InVision LiveShare PS →

Want to do this kind of stuff on a website? Use the aforementioned TogetherJS

Elsewhere , , Leave a comment

In love with Ionic Framework

ionic

Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.

Whilst Sass is just an extra (you don’t really need it), the true power is the fact that Ionic’s logic is built on top of AngularJS within a Cordova environment:

Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.

It really does tie in perfectly. Most of the Ionic JavaScript UI Components either ship with a delegate or provide a controller which you inject as a dependency, AngularJS style:

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

~

Having fiddled with Cordova and having built an AngularJS app before (with ngRoute, ngResource, etc.), the transition to Ionic went absolutely smooth. In under 24hrs time – excluding some preliminary research in which I converted my previously built AngularJS app to an Ionic flavored version – I went from no app to having an Ad Hoc distribution of the EV-Point.be iPhone app.

evpoint-app-001evpoint-app-002evpoint-app-003evpoint-app-004
EV-Point 0.0.4 screenshots

The app, in its current state, allows one to:

  • View a list of chargepoints
  • Filter the list of chargepoints
  • Get a detailed view of a chargepoint
  • Log in via OAuth
  • View your account and list of EV-Passes (login required)
  • Get a detailed view of an EV-Pass (login required, incomplete)
  • Perform an action – remoteStart / remoteStop – on a chargepoint, after selecting a connector and EV-Pass (login required)

You can see the app actually perform such a remoteStart/remoteStop in this video I made last night:

Here’s how it works, in case you’re interested: The app sends an XHR request to the EV-Point API. After validation of all data and tokens, the API instructs the Central System to send a RemoteStart OCPP-J request to the Charge Point. After acknowledgement of that request by the Charge Point, the Charge Point will actually start the transaction and notify the Central System that it has started. Concurrently, the app will long poll the Central System to detect the change in connectorstatus (from available to occupied), and update the UI accordingly. I also wrote the mentioned API and Central System for this (still ongoing) project.

Please note that action in the video was performed using a testplug, just imagine an electric vehicle being connected to the other side of that small cable.

~

If you’re a frontend web developer wanting to dive into app development, I’d really recommend Ionic. It smoothly allows one to create a native-like app, in a very short period of time, without the need to learn a whole pack of new stuff. If you know AngularJS, you already know Ionic. Next to the ease of use, a big plus of Ionic is that it ships with excellent documentation and a lot of interactive examples for one to learn from. Above that the community (Forums, GitHub, etc.) are thriving.

Ionic Framework →
Ionic Framework Docs →
Ionic on CodePen →
Learn Ionic →

Elsewhere , , , , Leave a comment