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

Text Escaping and Unescaping in JavaScript with strutil

Today the package strutil came in handy, after receiving (*) this UTF-8 Quoted Printable text in my hands:

=?UTF-8?Q?Test_=F0=9F=91=BB?=

Thanks to strutil#unescapeFromMime() I was able to regain the original string:

Test 👻

Upon further investigation of strutil it turns out that this package is really powerful as it can do a truckload of things when it comes to encoding:

Text Escaping and Unescaping in JavaScript (UTF-8, UTF-16, UTF-32, dec, hex, punycode, mime, base64, and more)

strutil
jsescape demo →

(*) The encoding in the first place itself happened automatically by Amazon, whilst storing User-Defined Metadata on an S3 Object:

User-defined metadata is a set of key-value pairs. Amazon S3 stores user-defined metadata keys in lowercase. Each key-value pair must conform to US-ASCII when using REST and UTF-8 when using SOAP or browser-based uploads via POST.

Now you know 😉

Elsewhere , , , Leave a comment

Learn to work the CSS Grid with Griddy

Another handy tool to getting to know the CSS Grid – in addition to the aforementioned CSS Grid Template Builder and Grid Garden – is Griddy:

Griddy →

Elsewhere , , , Leave a comment

Shentong’s Package Sorting Army of Robots

Orange robots at the company’s sorting stations are able to identify the destination of a package through a code-scan, virtually eliminating sorting mistakes. Shentong’s army of robots can sort up to 200,000 packages a day, and are self-charging, meaning they are operational 24/7.

Elsewhere , , Leave a comment

Git Debugging Flowchart

“Enough to form a lynch mob?” 😂

(src)

Elsewhere , , Leave a comment