dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

twokul

Hidden classes in JavaScript and Inline Caching

Knowing how internals work is always a good. Pretty much for everything. Cars, trains, computers, you name it. It gives you an insight on what happens under the hood. You also act/react differently based on this knowledge.

As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.

A little about V8

V8 is a JavaScript engine built by Google. Firefox built SpiderMonkey, Opera built Carakan and Microsoft built Chakra. One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScr

manekinekko

let regex = `import
  (?:
    ["'\s]*
      ([\w*{}\n, ]+)
      from\s*
  )?
  ["'\s]*
    ([@\w/_-]+)
  ["'\s]*
;?

tj

import React from 'react'

const bgStyles = {
  strokeWidth: 3,
  strokeLinejoin: 'round',
  strokeLinecap: 'round',
  fill: 'none',
  stroke: '#c3fdff'
}

bendc

{
  "comment": "This is the settings file for the SVGO Compressor Plugin. For more info, please check <https://github.com/BohemianCoding/svgo-compressor>",
  "pretty": false,
  "indent": 2,
  "plugins": [
    {
      "name": "cleanupAttrs"
    },
    {
      "name": "cleanupEnableBackground"

bendc

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

Rich-Harris

Please include a repro

You probably arrived here because of a curt message in response to an issue you filed on a repo that I contribute to. Sorry about that (particularly if you filed the issue long ago and have been waiting patiently for a response). Let me explain:

I work on a lot of different open source projects. I really do like building software that makes other people's lives easier, but it's crazy time-consuming. One of the most time-consuming parts is responding to issues. A lot of OSS maintainers will bend over backwards to try and understand your specific problem and diagnose it, to the point of setting up new test projects, fussing around with different Node versions, reading the documentation for build tools that we don't use, debugging problems in third party dependencies that appear to be involved in the problem... and so on. I've personally spent hundreds of hours of my free time doing these sorts of things to try and help people out, because I want to be a responsible maintainer and I

developit

An Alias to run Chrome with tracing enabled

For Chrome Canary:

alias hydra='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --no-sandbox --js-flags="--user-data-dir=/tmp/profile --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces"'

For regular ol' Chrome:

developit

Removed: Element Recycling

DOM Element recycling will be removed in Preact 8.

This should have no effect on most applications. In fact, it fixes a number of known issues related to element state not being fully reset on reuse.

💡 Why? Many DOM properties are stateful, and trying to reset them all when recycling is a game of whack-a-mole. Preact's size makes it infeasible to use whitelists to address these issues, so recycling is being dropped. >

developit

const MODULE_DIR = /(.*([\/\\]node_modules|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].*)?$/g;

{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	include(filepath) {
		if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
		let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
		try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
		return !!(pkg.module || pkg['jsnext:main']);