Faking node_modules in CodePen Projects

With CodePen Projects you have a web IDE right in your browser, with preprocessing built-in. But what about installing dependencies via the npm ecosystem? With some minimal effort it’s possible:

All you need to do is make a folder called node_modules, and then inside of that make a file named after the module (e.g. react.js) with the module’s code.

Like so:

├── my-project.js
└── node_modules
    └── react.js
    └── react-dom.js

From then on you can just import the libraries as you would normally do:

// my-project.js
import React from 'react';

…

Faking node_modules in CodePen Projects →
Example →

Elsewhere , , Leave a comment

Apple Live Photos for JavaScript Developers

In a rather surprising move Apple has released a JavaScript library to play Live Photos on the web on NPM:

Use the LivePhotosKit JS library to play Live Photos on your web pages.

The JavaScript API presents the player in the form of a DOM element, much like an image or video tag, which can be configured with photo and video resources and other options, and have its playback controlled either programmatically by the consuming developer, or via pre-provided controls by the browsing end-user.

Installation is possible per npm i:

npm install --save livephotoskit
import * as LivePhotosKit from 'livephotoskit';

Alternatively you can also use an Apple CDN hosted version, which exposes window.LivePhotosKit:

<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>

The script automatically seeks out elements with the data-live-photo attribute and tries to augment them, based on the data-photo-src and data-video-src attributes:

<div data-live-photo data-photo-src="https://developer.apple.com/live-photos/assets/boy.jpg", data-video-src="https://developer.apple.com/live-photos/assets/boy.mov"></div>

One can also manually create instances of LivePhotosKit.Player:

// Create the player using a pre-existing DOM element.
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
player.photoSrc = 'https://...';
player.videoSrc = 'https://...';

// Listen to events the player emits.
player.addEventListener('canplay', evt => console.log('player ready', evt));
player.addEventListener('error', evt => console.log('player load error', evt));
player.addEventListener('ended', evt => console.log('player finished playing through', evt));

// Use the playback controls.
player.playbackStyle = LivePhotosKit.PlaybackStyle.HINT;
player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL;
player.play();
player.pause();
player.toggle();
player.stop();

// Seek the animation to one quarter through.
player.currentTime = 0.25 * player.duration;

// Seek the animation to 0.1 seconds into the Live Photo.
player.currentTime = 0.1;

LivePhotosKit JS Documentation →
LivePhotosKit JS on npm →

Elsewhere , , , Leave a comment

Cassius ft. Cat Power Pharell Williams – Go Up

Really cool video where one half of the video is juxtaposed with the other half:

Elsewhere , Leave a comment

Why Rappers love Grey Poupon

When listening closely to HUMBLE. by Kendrick Lamar you can overhear him rap about “Grey Poupon”, a brand of whole-grain mustard.

This reminded me of this gem by Vox unearthing the history of Grey Poupon in rap:

HUMBLE. appears on the magnificent album DAMN.. If you haven’t listend to it yet, you should.

Elsewhere , , , Leave a comment

React VR – Build VR websites and interactive 360 experiences with React

React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify the construction of 360 experiences and democratize the creation of VR content.

Rendering the scene pictured above can be done using this code snippet:

import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

If you’re familiar with React, you can now build in VR 🙂

React VR →
React VR on GitHub →

Elsewhere , , , Leave a comment

Phishing with Unicode Domains

When visiting a domain name containing a Unicode character that visually resembles an ASCII character, your browser will transform the Unicode characters to Punycode in the address bar to prevent homograph attacks.

For example: the Cyrillic а (codepoint U+0430) totally looks like the Latin a (codepoint U+0061). When visting brаm.us (with the Cyrillic а in place of the Latin a), your browser will transform the URL to xn--brm-7cd.us

Turns out this is not always the case though:

Chrome’s (and Firefox’s) homograph protection mechanism unfortunately fails if every characters is replaced with a similar character from a single foreign language. The domain “аррӏе.com”, registered as “xn--80ak6aa92e.com”, bypasses the filter by only using Cyrillic characters.

TIP: Whenever you’re in doubt when receiving a mail from a “well known party” containing a link, I recommend manually typing the URL into the address bar.

Phishing with Unicode Domains →

(via Jeremy)

Sidenote: Worth digging up is this tweet from 2010 by my pal Manuel:

Elsewhere , , Leave a comment

Forest Swords – Arms Out

Whilst I’m unfamiliar with their previous work, I’m really looking forward to the next Forest Swords album named “Compassion”. Release is due May 5th on Ninja Tune.

Elsewhere , Leave a comment

Styling React Components with “Glamorous 💄”

Glamorous 💄 is a styled-components 💅 and jsxstyle inspired solution for styling ⚛ React Components. It allows you to do stuff like this:

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = glamorous.h1({
  fontSize: '1.5em',
  textAlign: 'center',
  color: 'palevioletred',
})

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = glamorous.section({
  padding: '4em',
  background: 'papayawhip',
})

function App() {
  return (
    <Wrapper>
      <Title>
        Hello World, this is my first glamorous component!
      </Title>
    </Wrapper>
  )
}

Whilst I still swear by using an ITCSS structure + BEM-based approach (with the help of the classnames package to reflect the component state in the applied CSS classes) this might please many devs who – unlike me – don’t come from a CSS background.

Introducing Glamorous 💄 →
Glamorous 💄 →

Elsewhere , , Leave a comment

Tilt.js – A tiny parallax tilt effect for jQuery

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.

Might come in handy for a quick project.

Also love the fact that it’s highly customizable:

maxTilt:        20,
perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
scale:          1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          300,    // Speed of the enter/exit transition.
transition:     true,   // Set a transition on enter/exit.
axis:           null,   // What axis should be disabled. Can be X or Y.
reset:          true,   // If the tilt effect has to be reset on exit.
glare:          false,  // Enables glare effect
maxGlare:       1       // From 0 - 1.

Tilt.js →
Tilt.js Source (GitHub) →

Elsewhere , , , Leave a comment

AutoDraw: Fast Drawing for Everyone

After Quickdraw a few months ago – in which A.I. guesses what you are doodling – now comes AutoDraw from Google.

AutoDraw is a new kind of drawing tool. It pairs machine learning with drawings from talented artists to help everyone create anything visual, fast.

AutoDraw’s suggestion tool uses the same technology used in QuickDraw, to guess what you’re trying to draw. Right now, it can guess hundreds of drawings and we look forward to adding more over time.

AutoDraw →

Elsewhere , , , Leave a comment