romeoh

/*
 * A JavaScript implementation of the Secure Hash Algorithm, SHA-1, as defined
 * in FIPS PUB 180-1
 * Version 2.1a Copyright Paul Johnston 2000 - 2002.
 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 * Distributed under the BSD License
 * See http://pajhome.org.uk/crypt/md5 for details.
 */

/*

alienresident

How to:

Fix pseudo-streaming videos by moving Moov Atom

Relies on some *nix CLI utilities: mediainfo; and qt-faststart (part of ffmpeg). I used homebrew to install them on OS X.

What is pseudo-streaming?

Pseudo streaming is simply a video that can start playing before it's fully dowmloaded. The videos are not streaming but rather progressively downloaded. What's important is that the file metadata (the Moov Atom) is at the start of the file rather than at the end. Usually this is an option set when encoding the file (called quick start or web start). If the files have not been encoded this way you can either re-encode or use a utility to move the Moov Atom. Re-encoding takes much longer than using a utility to move the Moov Atom so here's how to do it.

Steps

First check with mediainfo to see if video 'is streamable':

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

fijiwebdesign

/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,

zchee

--- Actions ---
$Copy                                              <M-C>
$Cut                                               <M-X> <S-Del>
$Delete                                            <Del> <BS> <M-BS>
$LRU                                              
$Paste                                             <M-V>
$Redo                                              <M-S-Z> <A-S-BS>
$SearchWeb                                         <A-S-G>
$SelectAll                                         <M-A>
$Undo                                              <M-Z>

manigandham

Strictly Frameworks

• Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
• ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
• Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

tj

let rows = {}

export default function(props = [], state = []) {
  return function(target) {
    const proto = Object.create(target.prototype)

    proto.shouldComponentUpdate = function(newProps, newState) {
      let id = (this._update_id = this._update_id || Math.random())

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

gaearon

A top-level App component returns <Button /> from its render() method.

1. What is the relationship between <Button /> and this in that Button’s render()?

2. Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?

3. Can the App change anything in the Button output? What and how?

---