Chromeless Playground: Chrome Automation Made Simple

With Chrome 59 came the ability to run a Headless Chrome. Controlling it via code isn’t that easy nor elegant. Enter Chromeless (not be confused with Mozilla’s Chromeless):

With Chromeless you can control Chrome (open website, click elements, fill out forms…) using an elegant API. This is useful for integration tests or any other scenario where you’d need to script a real browser.

Runs locally or headless on AWS Lambda. The API to control it is really elegant, as the code is very easy to understand:

const { Chromeless } = require('chromeless');

async function run() {
  const chromeless = new Chromeless();

  const screenshot = await chromeless
    .goto('https://www.google.com')
    .type('chromeless', 'input[name="q"]')
    .press(13)
    .wait('#resultStats')
    .screenshot();

  console.log(screenshot); // prints local file path or S3 url

  await chromeless.end();
}

run().catch(console.error.bind(console));

Chromeless Playground →
graphcool/chromeless GitHub →

Elsewhere , , , Leave a comment

Interacting with the iOS Simulator from the Command Line using simctl

Wasn’t aware of this, but turns out one can control (and interact with) the iOS Simulator straight from the command line.

There’s no need to install anything new though. The tool we’re going to be using is already on our Mac, hiding inside the xcrun command, which gets installed with Xcode.

It’s called simctl.

Here’s a few examples:

# open a URL
xcrun simctl openurl booted "https://littlebitesofcocoa.com"

# upload an image to the iOS Simulator
xcrun simctl addmedia booted ~/images/image1.png ~/images/image2.jpg

# Take a screenshot
xcrun simctl io booted screenshot ~/Desktop/screenshot.png

# Record a video
xcrun simctl io booted recordVideo --type=mp4 ~/Desktop/movie.mp4

Other commands include booting/stopping a device, clipboard operations, launching/terminating processes, installing/uninstalling apps, etc. — No touch events though, that would’ve been real fun.

Little bits of Cocoa: Interacting with the iOS Simulator using simctl

Elsewhere , , , Leave a comment

Better Error Handling in React 16 with Error Boundaries

The first beta React 16 has been released just yesterday. Next to it running on Fiber (speeeed!), and allowing one to return Arrays in the render() method (bye bye unnecessary wrapper divs!), it also introduces the concept of Error Boundaries:

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info)

With Error Boundaries a JavaScript error will no longer break your whole app. An example Error Boundary would be:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Just wrap this around your own component, and it will catch any JavaScript errors inside ‘m

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Here’s a demo pen:

Error Handling in React 16 →

Elsewhere , , Leave a comment

Dunkirk and the “Shepard Tone“

Nice piece by Vox – in a true Nerdwriter1 style by the way – on the sound design of Dunkirk – and by extension all of Christoper Nolan’s films – which makes the movie so intense.

Just like with visual illusions, the brain can also be tricked with sound illusions.

Sidenote: Ever since I saw its trailer in full IMAX glory I’ve been really excited about this one. This Saturday I’ll be watching an IMAX screening of it in Brussels 🙂

Elsewhere , , , Leave a comment

gpu.js – GPU Accelerated JavaScript

Amazing:

gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript.

Only a subset of legal JavaScript syntax – mainly calcuations stuff – will run on the GPU.

const gpu = new GPU();

// Create the GPU accelerated function from a kernel
// function that computes a single element in the
// 512 x 512 matrix (2D array). The kernel function
// is run in a parallel manner in the GPU resulting
// in very fast computations! (...sometimes)
const matMult = gpu.createKernel(function(a, b) {
    var sum = 0;
    for (var i = 0; i < 512; i++) {
        sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
}).setDimensions([512, 512]);

// Perform matrix multiplication on 2 matrices of size 512 x 512
const c = matMult(a, b);

When running the benchmark, my GPU runs things about 4.5 times faster.

gpu.js – GPU Accelerated JavaScript →

Elsewhere , , , Leave a comment

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time.

Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see image above. One can tweak ‘m via the upcoming font-variation-settings CSS Property:

p {
  font-variation-settings: 
    'cntr' 99.9998, 
    'grad' 176, 
    'opsz' 13.999, 
    'srfr' 34.998, 
    'wdth' 803.999, 
    'wght' 175.98, 
    'xhgt' 999.988;
}

As mentioned in the post, variable fonts in CSS will land in production no earlier than mid-2018. Nonetheless it’s worth following already.

What do Variable Fonts mean for Web Developers? →

Elsewhere , , Leave a comment

Behind the front-end experience of Stripe’s ”Connect”

Great writeup by Benjamin De Cock on the work he and his colleagues did to creating unique landing pages that tell a story for our major products

For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.

In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.

Covered technologies are CSS Grid Layout, 3D with CSS, prefers-reduced-motion, Web Animations API, and the Intersection Observer.

Stripe Engineering Blog – Connect: behind the front-end experience →

Elsewhere , , Leave a comment

Hive’s best practices for JavaScript projects

Hive, a UK based technology design studio, have shared their set of best practices for developing JavaScript-based projects.

While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here’s a list of guidelines we’ve found, written and gathered that (we think) works really well with most JavaScript projects here at hive.

Always interesting to take a peek at other companies their internals. Not only do they cover things such as code style; their list goes further: API Design and a Git usage strategy for example are also covered.

wearehive/project-guidelines

Elsewhere , , Leave a comment

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

Elsewhere , , , , Leave a comment

CSS Variables and Reduced Motion

Great usage of CSS Variables CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce:

By setting --duration to 0 it basically behaves like a binary condition for a CSS calculation. Simple and effective 🙂

(Personally I’d set it to either 0 or 1 – and not 0.5. That way the math is kept easy and it becomes a true binary toggle)

⁉️ Not sure what prefers-reduced-motion is? Check out CSS-Tricks’ Introduction to the Reduced Motion Media Query to get up to speed.

Elsewhere , Leave a comment