slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

rgthree

NOTE

This has stopped working due to an odd timing issue with a minuscule -webkit-transition-duration value firing a webkitTransitionEnd

Checkout a pure CSS version here: https://github.com/rgthree/google-loader-css

---

Google/Gmail's "Folding Circle"

pete-otaqui

#!/bin/bash

# works with a file called VERSION in the current directory,
# the contents of which should be a semantic version number
# such as "1.2.3"

# this script will display the current version, automatically
# suggest a "minor" version update, and ask for input to use
# the suggestion, or a newly entered value.

larrybotha

// This mixin outputs a property with rem units and a px fallback.
// Values passed without units are used as multipliers for the final
// rem and px values, all other units are output without modification.
// $base-font-size represents the root value of the document font-size
// in pixels.
//
// i.e. html { font-size: 100%;} // -> 16px

// Usage:
// @include px-and-rem([property], [multiplier | explicit value] [, ...]);

mxriverlynn

// Before introducing promises, each of these functions required a callback to be passed in to it.
// This leads to deeply nested structures and the arrow-anti-pattern, creating more visual complexity
// and reducing the maintainability of this code

Tiles.getImagesForTile(function(images){
  Tiles.buildThumnails(images, function(thumbnails){
    Tiles.transmogrify(thumbnails, function(notification){
      updater.update(notification);
    }
  });

jupiterjs

The following is a VERY rough draft of an article I am working on for Alex MacCaw's @maccman's Book. It is very rough, but even now a worthwhile read. Suggestions / comments are very welcome! Please help me :-)

Introduction

JavaScriptMVC (JMVC) is an open-source jQuery-based JavaScript framework. It is nearly a comprehensive (holistic) front-end development framework, packaging utilities for testing, dependency management, documentation, and a host of useful jQuery plugins.

Yet every part of JavaScriptMVC can be used without every other part, making the library lightweight. Its Class, Model, View, and Controller combined are only 7k minified and compressed, yet even they can be used independently. JavaScriptMVC's independence lets you start small and scale to meet the challenges of the most complex applications on the web.

This chapter covers only JavaScriptMVC's $.Class, $.Model, $.View, and $.Controller. The following describes each component:

jed

javascript:with(document)(body.appendChild(createElement('script')).src='https://gist.github.com/raw/946036/8b51f04a6f9dbe15f5c375ac872a9ae56d4b8732/domTrees.js')._

lenary

$ git clone github:lenary/guides.git
Cloning into guides...
remote: Counting objects: 255, done.
remote: Compressing objects: 100% (216/216), done.
remote: Total 255 (delta 111), reused 163 (delta 35)
Receiving objects: 100% (255/255), 1.49 MiB | 564 KiB/s, done.
Resolving deltas: 100% (111/111), done.

$ cd guides
$ git remote -v

voodootikigod

.antiantialias {
  -webkit-transition: all 100000.0s linear;
  -moz-transition: all 100000.0s linear;
  -o-transition: all 100000.0s linear;
  -transition: all 100000.0s linear;
  -webkit-transform: translate(0px, 1px);
  -moz-transform: translate(0px, 1px);
  -o-transform: translate(0px, 1px);
  transform: translate(0px, 1px);
}