Patrick Hughes 3D Paintings

This is an amazing piece of 3D art where the closest part of the picture appears to be the furthest away, an optical illusion known as “Reverspective”. As you move around the painting, the room in the painting appears to move with you.

The mind can easily be fooled.

Here’s another one:

Elsewhere , , , , Leave a comment

Setting up React for ES6 with Webpack and Babel

es6-webpack-react-babel

This resource came in quite handy when setting up React in combination with ES6, Webpack and Babel:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        progress: true
      }
    ]
  },
};

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors
Elsewhere , , , , , Leave a comment

Check for updates on PHP dependencies with `composer outdated`

Just yesterday it came to my attention that you can run composer outdatedto check if newer versions of dependencies you are using exist:

composer-outdated

Composer →

Related: npm-check-updates does the same for Node

Elsewhere , , Leave a comment

Reactotron

reactotron

Control, monitor, and instrument your React and React Native apps from the comfort of your TTY.

Reactotron →

Elsewhere , , , , Leave a comment

ReactiveElements: Convert React.js components into Web Components

ReactiveElements

Create your component as you normally would, and then register it on the document using document.registerReact(…)

/* @jsx React.DOM */
MyComponent = React.createClass({
  render: function() {
    console.log(this.props.items); // passed as HTML tag`s argument
    console.log(this.props.children); // original tag children
    return <ul><li>React content</li></ul>;
  }
});

document.registerReact('my-react-component', MyComponent);

You can then use it as follows:

<body>
    <my-react-component items="{window.someArray}"></my-react-component>
</body>

ReactiveElements →
ReactiveElements Demo →

(via)

Elsewhere , , , , Leave a comment

What does it cost to host Unsplash?

Unsplash

Take a quick guess: What do you think it costs to host one of the largest photography sites in the world for a month?

$1,000?

$10,000?

$50,000?

Before starting Unsplash, I would have had no idea.

No one talks about this stuff and I’m not really sure why.

Let’s change that.

Great, transparent, insight on how much Unsplash spends monthly on App Servers, Services (such as Logentries), Hosting (Imgix), etc.

What does Unsplash cost? →

Elsewhere , , Leave a comment

A Complete Guide to CSS Grid Layout

grid-start-end-a

Great cheat sheet / guide by Chris House, on Grid Layout — a CSS spec that has gotten me really excited ever since it has been announced (over two years ago):

My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. So I won’t be covering the out of date IE syntax, and I’ll do my best to update this guide regularly as the spec matures.

A Complete Guide to CSS Grid Layout →

Elsewhere , , , Leave a comment

ES6 in Depth

es6-feat-1050x360

There’s a good set of articles on ES6 over at Pony Foo: Promises, Arrow Functions, Template Literals, Classes, Modules, Array Extensions, Destructuring, Iterators, Maps, Proxies, … it’s all covered.

The post ES6 Overview in 350 Bullet Points is a nice summary of ‘m all.

Pony Foo: Articles tagged es6-in-depth

Elsewhere , , , Leave a comment

The Practical Developer Book Covers

Here’s a few of the book covers @ThePracticalDev has been tweeting:

ThePracticalDev_2016-Mar-31

CcuYraMXIAE5Yn6

ThePracticalDev_2016-Mar-23

ThePracticalDev_2016-Apr-13

ThePracticalDev_2016-Apr-03

Worth a read if you’d ask me 😂

More covers over at @ThePracticalDev

Elsewhere , , , 1 Comment

CSS: Selecting a range of elements

Say you want to select the 7th up and to the 14th element of a set of elements. It’s possible, using this selector:

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

See the Pen Selecting Ranges of Elements with CSS on CodePen.

(from 12 Little-Known CSS Facts (The Sequel))

Elsewhere , , Leave a comment