XerxesNoble

/**
* @desc Basic linear value animation that can accept simple easing functions and provides update & complete callbacks
* @param  {Object} values - Object with numerical values. eg. { value1: 0, value2: 20, someKey: 55 }
* @param  {Number} duration - How long (in milliseconds) the animation will be
* @param  {Object} options - target values, update callback & complete callback
* @param  {Function} [options.onComplete=(values) => values] - Callback that fires once animation is complete
* @param  {Function} [options.onUpdate=(values) => values] - Callback that fires when animation frame updates
* @param  {Function} [options.ease=(t) => t] - easing method eg. https://gist.github.com/gre/1650294
* @example
*

rondy

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

---

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

xjamundx

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

1. Common JS support
2. NPM support
3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

lygaret

define(function(require) {
    var React = require('react');

    var paramRegex  = /__(\d)+/;
    var parser      = new DOMParser();
    var errorDoc    = parser.parseFromString('INVALID', 'text/xml');
    var errorNs     = errorDoc.getElementsByTagName("parsererror")[0].namespaceURI;

    // turns the array of string parts into a DOM
    // throws if the result is an invalid XML document.

hayeah

暖身周 （可选）

• 写一个简单的 NPM package
• 用 mocha 写测试
• 用 CoffeeScript 写 NPM package
• 实现 JS 类 （练习原型链）

第一周 - Connect Middleware

dexteryy

Flux + React:

Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+
Ʌ                                                                                   |
|                                                                                   V
+-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+

NervJS + DarkDOM + Templating or Virtual-DOM (React-like):

niksumeiko

#!/bin/bash
# Sometimes you need to move your existing git repository
# to a new remote repository (/new remote origin).
# Here are a simple and quick steps that does exactly this.
#
# Let's assume we call "old repo" the repository you wish
# to move, and "new repo" the one you wish to move to.
#
### Step 1. Make sure you have a local copy of all "old repo"
### branches and tags.

morlay

Writing Modular JavaScript With AMD, CommonJS & ES Harmony 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript

本文的技术审阅是通过 Diigo（Google Chrome 版）进行的。Diigo 是一个让你能够在任意在线文档中加入评论与高亮的免费工具，如果你发现什么错误或是想建议什么扩展，请用 Diigo（或在 GitHub 上建个 gist），我会亲自做测试来处理任何你发过来的点子。

• Written by: [Addy Osmani][Addy Osmani];
• Technical Review: Andrée Hansson
• WITH SPECIAL THANKS TO JAMES BURKE,JOHN HANN AND THOMAS DAVIS
• 原文链接 / 中文翻译

Modularity The Importance Of Decoupling Your Application 模块化 解耦应用程序的重要性