CSS Grid Playground

CSS Grid Playground is a ten part tutorial by Mozilla. With resources like this (amongst others) – and proper browser support – there’s no reason not to use Grid Layout.

CSS Grid Playground →

💁‍♂️ CSS Grid Gotchas And Stumbling Blocks is also worth a read once you’re familiar with CSS Grid.

Elsewhere , , , Leave a comment

Essential Image Optimization

Essential Image Optimization is an free and online eBook by Addy Osmani:

Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. As of July 2017, images accounted for 1.7MB of the content loaded for the 3.0MB average site.

Per Tammy Everts, adding images to a page or making existing images larger have been proven to increase conversion rates. It’s unlikely that images will go away and so investing in an efficient compression strategy to minimize bloat becomes important.

Essentially Addy pushes forward two key factors:

  1. We should all be automating our image compression
  2. Everyone should be compressing their images efficiently

Essential Image Optimization →

Elsewhere , , , Leave a comment

The Academic – Bear Claws (Live Looper Version)

Yesterday I’ve tweeted about this one, but it’s too great to not mention here too. It’s the video clip for “Bear Claws” by “The Academic”.

For this video the band has used the lag of a Facebook Live video to their advantage. By doing so, they’ve created a loop sampler. Also note the clever use of the lighting which changes color per “section“, creating a nice visual effect too.

Elsewhere , , Leave a comment

Asynchronous stack traces: why await beats .then()

Insightful post by Mathias Bynens:

The fundamental difference between await and vanilla promises is that await X() suspends execution of the current function, while promise.then(X) continues execution of the current function after adding the X call to the callback chain. In the context of stack traces, this difference is pretty significant.

The gist is that when using .then(), the JS engine needs to capture the stack trace for future use in case things go awry.

Capturing the stack trace takes time (i.e. degrades performance); storing these stack traces requires memory. 🐌👎

Asynchronous stack traces: why await beats .then()

Sidenote: Need extra arguments to prefer async/await over promises? Read 6 Reasons Why JavaScript’s Async/Await Blows Promises Away.

Elsewhere , , Leave a comment

Never Write Another HOC, use a render Prop

Michael Jackson on stepping away from HOCs, and using a render Prop instead.

instead of “mixing in” or decorating a component to share behavior, just render a regular component with a function prop that it can use to share some state with you.

He start with this HOC:

import React from 'react'
import ReactDOM from 'react-dom'

const withMouse = (Component) => {
  return class extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
          <Component {...this.props} mouse={this.state}/>
        </div>
      )
    }
  }
}

const App = React.createClass({
  render() {
    // Instead of maintaining our own state,
    // we get the mouse position as a prop!
    const { x, y } = this.props.mouse

    return (
      <div style={{ height: '100%' }}>
        <h1>The mouse position is ({x}, {y})</h1>
      </div>
    )
  }
})

// Just wrap your component in withMouse and
// it'll get the mouse prop!
const AppWithMouse = withMouse(App)

ReactDOM.render(<AppWithMouse/>, document.getElementById('app'))

… which can be rewritten like this:

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

// Instead of using a HOC, we can share code using a
// regular component with a render prop!
class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired
  }

  state = { x: 0, y: 0 }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

const App = React.createClass({
  render() {
    return (
      <div style={{ height: '100%' }}>
        <Mouse render={({ x, y }) => (
          // The render prop gives us the state we need
          // to render whatever we want here.
          <h1>The mouse position is ({x}, {y})</h1>
        )}/>
      </div>
    )
  }
})

ReactDOM.render(<App/>, document.getElementById('app'))

Interesting approach I’d say 🙂

You can watch the video (embedded above) or read the post.

Use a Render Prop! →

Sidenote: Talking about React Props: Validating Props easily with React PropTypes is worth a read if you’re not using them (yet).

Elsewhere , , Leave a comment

Macroable – A Trait to Dynamically add Methods to a PHP Class

New package by the folks from Spatie:

We recently released our newest package called macroable. It contains a trait that, when applied to class, can dynamically add methods to that class. This trait is basically a stand alone version of the macroable trait in Laravel.

It works by leveraging the __call() magic function, and checking if any macro has been registered via the static macro method.

A trait to dynamically add methods to a class →
spatie/macroable (GitHub) →

Elsewhere , Leave a comment

Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX

and then generates standards-based Web Components with these features baked in.

Stencil will be used in Ionic 4, making its component usable within Vue or React.

The magical, reusable web component generator →

Elsewhere , , , Leave a comment

Leveraging New Features of React 16

Earlier this week React 16 got released … yay! 🎉

To explain all the new features, Nik Graf has posted a short series on React 16 over at Egghead. The videos are free to watch and only take up 17 minutes of your time.

Next to things like Fiber, Error Boundaries, and Returning arrays from render() that get me excited, the video series also covers how to render components into DOM elements other than the React root (using ReactDOM.createPortal();), and explains that it’s possible to return null from setState(() => { … }) to prevent updates being triggered.

Leverage New Features of React 16 →

Elsewhere , , Leave a comment

MapSCII – ASCII Map Renderer for the Console

Color me impressed:

MapSCII is a Braille & ASCII map renderer for your console.

There’s a live version accessible via telnet on mapscii.me:

$ telnet mapscii.me

Panning and zooming using the mouse is supported.

At the base is a vector tileset (from OpenMapTiles), with a Node app on top (written in CoffeeScript) sporting an ASCII renderer. The source of it all is available on GitHub.

MapSCII (GitHub) →

Elsewhere , , Leave a comment

Ticket Trick: Hacking companies through their helpdesk

Clever way, unearthed by Inti de Ceukelaire, to getting access to private communications channels (such as Slack) by leveraging the create-by-email feature of issue trackers/the helpdesk of a company.

First target of Init was Gitlab’s Slack channel:

Anyone with a valid @gitlab.com e-mail address can join their Slack team. At the same time, GitLab offers a feature to create issues by e-mail by sending them to a unique @gitlab.com e-mail address.

I tried to join their Slack team using this issue creating email address, just to see what would happen. I then refreshed my issue list and saw the verification e-mails added as an issue to my project:

The freshly added issue contained the magic link needed to join their internal Slack team. I clicked the link to see if it’d actually work — and it did. I was greeted by the list of channels I was able to join.

From there one it’s only a minor thing to dig through the chat history and discover links/usernames/passwords/etc.

The fix is to provide your app users with e-mail addresses using a domain different from your main one (*). Additionally verify all e-mail addresses used to sign up.

How I hacked hundreds of companies through their helpdesk →

(*) The same goes for user hosted content, hence by Github switched from username.github.com to username.github.io domains a few years ago.

Elsewhere , , , Leave a comment