Chrome “Go Back With Backspace” Extension

go-back-with-backspace

With the release of Chrome 52, the backspace button no longer navigates back when pressing it. Highly annoying, because the navigating back with the backspace button is just very, very handy (it only requires one finger/hand!).

“Go Back With Backspace” is the official Google released Chrome Extension that restores this behavior (other – non-Google developed – extensions have been around before).

This extension re-enables the backspace key as a back navigation button — except if you’re writing text.

Go Back With Backspace →

Elsewhere , , , Leave a comment

react-music — Make beats with React!

The past few days Ken Wheeler has been tweeting some sneak peeks of what he’s been up to, after having heard that Akai was discontinuing its standalone hardware MPC drum machine offering:

I did what any geek that writes React code all day long would do: I wrote a library so that I can make beats with ReactJS.

The result is react-music:

react-music let you make beats using JSX code and hooks into the Web Audio API to turn your code into beautiful music. There is no UI, with the exception of a play/stop button and a spectrum analyzer that renders on your page.

No UI, only code:

<Song tempo={90}>
  <Sequencer resolution={16} bars={1}>
    <Sampler
      sample="/samples/kick.wav"
      steps={[0, 4, 8, 12]}
    />
  </Sequencer>
</Song>

Amazeballs!

Make Dope Beats With ReactJS →
react-music (GitHub) →

Elsewhere , , , Leave a comment

The Apple-Google shift

google-apple

Elliot-Jay Stocks:

Okay, so I’m considering a switch to Android. No big deal. I’m following in the footsteps of many, many, many others. But what I find interesting outside of my own personal decision is that there seems to be a growing discontent with Apple — especially amongst former so-called fanboys/girls — and, at the same time, a growing appreciation of what Google have been doing, especially from a design perspective.

So I thought I’d try and pick this apart. What’s actually changed?

Apple indeed has been dropping the ball a few times lately. This part on Apple Music is spot on:

What a mess. Sure, it’s not a total failure from an interaction design point of view, but it’s a sub-par effort from a company that should really be far, far, far better than any other steaming music competitors. That Apple Music has been so successful is only down to the ecosystem they’ve cultivated — not because it offers a superior experience.

And that is also exactly why I am staying with Apple: the ecosystem has me quite locked in. Having used an Android for a whole month in late 2015 I started missing the fact that I could answer my phone using my MacBook Pro, my music (bought via iTunes) being available on all my devices (MacBook *and* TV *and* iPhone), iMessage, great/good quality apps in the App Store, Airplay, … (and yes, I do know that there are alternatives to each and every service available, but moving will definitely be quite a big hassle)

The Apple-Google shift →

Elsewhere , , Leave a comment

“It’s the future!” — A fictional conversation on web development

information-time-knowledge

A fictional conversation on web development:

I’m building a simple web app at the moment — a normal TODO app using HTML, CSS and JavaScript, and I’m planning to use jQuery. Is that the way to go?

: Oh, no. That’s old school. jQuery is dead — no one uses it anymore. You need to use React now. That’s the future.

Oh. Okay. What’s that?

: React is the new way of building web apps. It uses a Virtual DOM implementation underneath and lets you write JSX code.

Virtual… what ? JSX? What’s that?

: …

(story continued in original post)

It’s the future! →

Elsewhere , , Leave a comment

Google Chrome, Firefox Address Bar Spoofing Vulnerability

CqGfgXGWcAEjG6R

Turns out one single right-to-left character in a URL can make the omnibox (Address Bar) freak out, and render it wrongly:

Placing neutral characters such as “/”, “ا” in filepath causes the URL to be flipped and displayed from Right To Left. In order for the URL to be spoofed the URL must begin with an IP address followed by neutral characters […] what matters is that the first strong character (generally, alphabetic character) in the URL must be an RTL character.

When typing in 127.0.0.1/ا/http://google.com into the omnibox, it will be displayed as http://google.com/‭ا/127.0.0.1, which is obviously not google.com … let this be a reminder to check also check for the green padlock being present when visiting well known sites.

Google Chrome, Firefox Address Bar Spoofing Vulnerability →

Elsewhere , , , Leave a comment

Getting Stories from the Instagram API

chrome-ig-story

Alec Garcia:

It took Instagram 2 years to build their first web app, and then another 3 years to implement web search. It will probably be a while, if at all, before Instagram brings Stories to the web, so I thought I’d do it myself.

The result is Chrome IG Story:

Chrome IG Story is a Chrome Extension that injects your friend’s Instagram Stories above your feed on the Instagram.com desktop website just like it appears in the Instagram mobile app.

With some sniffing he found the (unreleased) API Endpoint that Instagram uses. The extension makes a request to said endpoint, injecting the cookies set by Instagram along with that for authentication, and even faking the user-agent to being Instagram itself.

Chrome IG Story Extension →
Chrome IG Story Source →
Chrome IG Story — Bribing the Instagram Story API with cookies 🍪🍪🍪 →

Elsewhere , Leave a comment

References to 70-80s movies in Stranger Things

Great compilation of some shots/events that seemed very familiar indeed.

Elsewhere , Leave a comment

Cordova WKWebView Plugin

wkwebview

Great work by the Ionic folks:

One of our awesome engineers has been working hard to bring WKWebView to Ionic apps and is working to bring the new plugin into Cordova! The new plugin will work with both Ionic V1 and Ionic V2 apps. In fact, it should work with any iOS Cordova build!

That is great news as WKWebView really is a big deal for Hybrid Development.

It’s not included in Ionic by default, but comes as a plugin. Install it with this command:

ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save

And then add this small change to your config.xml:

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

You can use feature detection in your JS to differentiate between UIWebView andWKWebView:

if (window.indexedDB) {
   console.log("I'm in WKWebView!");
} else {
   console.log("I'm in UIWebView");
}

Cordova iOS Performance Improvements: Drop-in Speed with WKWebView →

Elsewhere , , , , , Leave a comment

Monitoring changes in a web application

javascript-logo-banner

Eric Bidelman has bundled lots of code snippets around change events that can get triggered in the browser:

Changes range from simple things like DOM mutations and catching client-side errors to more complex notifications like knowing when the user’s battery is about to run out. The thing that remains constant are the ways to deal with them: callbacks, promises, events.

Below are some of use cases that I came up with. By no means is the list exhaustive. They’re mostly examples for observing the structure of an app, its state, and the properties of the device it’s running on.

Great list imho! Here’s the snippet to listening for changes in network connectivity, for example:

// Online/offline events.
window.addEventListener('online', e => {
  console.assert(navigator.onLine)
});
window.addEventListener('offline', e => {
  console.assert(!navigator.onLine)
});

// Network Information API navigator.connection.addEventListener('change', e => {
  console.log(navigator.connection.type, navigator.connection.downlinkMax);
});

Observing your web app →

Elsewhere , , Leave a comment

React Binding Patterns: 5 Approaches for Handling this

1-YJI4x0i0lJA110oRvjwNBw

Cory House:

There are at least five ways to handle the this context in React. Let’s consider the merits of each approach.

  1. Use React.createClass
  2. Bind in Render
  3. Use Arrow Function in Render
  4. Bind in Constructor
  5. Use Arrow Function in Class Property

Currently I’m mostly using Approach 4 (“Bind in Constructor”), but Approach 5 (“Arrow Function in Class Property”) looks like something to switch to after having read the post.

React Binding Patterns: 5 Approaches for Handling this

On a sidenote, ES2016 will sport the Function Bind Operator (::) which acts a a shorthand for .bind(context).

// ES2015
this.logMessage = this.logMessage.bind(this);

// ES2016
this.logMessage = ::this.logMessage;

JavaScript ES7 Function Bind Syntax →

Elsewhere , , , Leave a comment