rupl

gifify() {
  if [[ -n "$1" ]]; then
    if [[ $2 == '--good' ]]; then
      ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
      time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
      rm out-static*.png
    else
      ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
    fi
  else

scottjehl

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

---

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

hemanth

#!/usr/bin/env bash
# Setup script for hacking chrome devtools
# Source -> https://medium.com/p/8c8896f5cef3

echo "Creating folder and initialize a git repo"
mkdir devtools-frontend && cd devtools-frontend
git init

echo "Adding chromium remote and initialize sparse checkout"
git remote add upstream https://chromium.googlesource.com/chromium/blink

Snugug

server() {
  php -S localhost:"$*";
}

jed

How to set up stress-free SSL on an OS X development machine

One of the best ways to reduce complexity (read: stress) in web development is to minimize the differences between your development and production environments. After being frustrated by attempts to unify the approach to SSL on my local machine and in production, I searched for a workflow that would make the protocol invisible to me between all environments.

Most workflows make the following compromises:

• Use HTTPS in production but HTTP locally. This is annoying because it makes the environments inconsistent, and the protocol choices leak up into the stack. For example, your web application needs to understand the underlying protocol when using the secure flag for cookies. If you don't get this right, your HTTP development server won't be able to read the cookies it writes, or worse, your HTTPS production server could pass sensitive cookies over an insecure connection.

• Use production SSL certificates locally. This is annoying

getify

I've launched a kickstarter for a book series titled "You Don't Know JS", to explore the "tough parts" of JS and help the language make more sense to developers who use it.

You Don't Know JS" is an exploration of the mysterious, confusing, complex, and controversial parts of JavaScript.

If you write JavaScript for your primary job, odds are, you're pretty good at it. But honestly, how well do you really know the language? Most of us, myself included, spend years writing JS and never really going beyond a surface understanding. And then we blame our WTF moments on "the bad parts".

This book series will examine the things that trip up or confound even the most seasoned of JS devs. And I was one of them until (recently) I spent enough time poking at the tough parts to understand them. Now I want to help other devs have those "a-ha!" moments, too!

What if you could really deeply know how JS works? Would that change how you

scottjehl

...
// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
		ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
		fonts = ns.files.css.fontsTTF;
	}

marcusandre

Generate Appcache Manifest (incl. xhr) in Chrome DevTools

1. Open your Chrome Developer Tools
2. Navigate to the Network tab
3. Just right click into the panel and choose Copy ALL as HAR (maybe the page needs a reload)
4. Switch to the console tab and save your HAR data in a variable. (var data = cmd + v)
5. Now let's create the cache manifest:

console.log('CACHE MANIFEST\n\nCACHE:');

SlexAxton

gifify() {
  if [[ -n "$1" ]]; then
    if [[ $2 == '--good' ]]; then
      ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
      time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
      rm out-static*.png
    else
      ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
    fi
  else

desandro

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.

---