Breaking the CSS Grid (and how to fix it)

Dave Rupert lists two scenarios in which the CSS Grid can be broken, and how to fix it: Overflow-x Elements break the Grid Form Controls break the Grid To easily fix these, Dave has whipped up a small CSS snippet he calls “Fit Grid”, containing a CSS class you can apply to prevent these issues …

Optimize React Performance

Good advice every React dev should be aware of: React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary culprit for poor performance is generating too many renders and reconciliations. We’ll cover 4 techniques …

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 …

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 …

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 …

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 …

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. …

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 …

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 …