Skip to content

Instantly share code, notes, and snippets.

View naganowl's full-sized avatar

Alan Wong naganowl

14 followers · 9 following
View GitHub Profile
@naganowl
naganowl / multipleChaplinCollections.md
Last active December 22, 2015 23:09
Chaplin collection views depending on multiple collections

Long story short, Chaplin CollectionView is made for a single collection and having it's item views depend on info on other collections is painful.

There are two ways to go about handling this

  1. Blocking display of the item views until all the collections are available.
  2. Progressively enhancing the state of the item views.

While (1) is ideal, executing it is cumbersome because it involves deferring the add of the item views (Via a shadow collection or some other method) and stubbing out the fallbackSelector to prevent the main view from displaying

@naganowl
naganowl / docco.css
Created February 5, 2014 18:43
Quick and dirty way to make 'Jump To' menu scrollable for projects with many files. (See https://github.com/jashkenas/docco/blob/master/resources/parallel/docco.css)
#jump_page {
height: 100%;
overflow: scroll;
}
#jump_wrapper {
height: 100%;
}
@naganowl
naganowl / gruntEvents.coffee
Created February 13, 2014 03:37
How to hook into Grunt events.
['warn', 'fatal'].forEach (level) ->
grunt.util.hooker.hook grunt.fail, level, (opt) ->
require('growl')(opt.name,
title: opt.message
image: 'Console'
)
['warn', 'error'].forEach (level) ->
grunt.util.hooker.hook grunt.log, level, (opt) ->
require('growl')(opt.name,
@naganowl
naganowl / README.md
Last active August 29, 2015 13:56
tl;dr: Don't re-render views that are delegating events as the delegation will be lost (without further action).

Writing down the pains I've rediscovered multiple times with Chaplin item views in a CollectionView (Though they can be applied to regular Chaplin views as well).

Numerous times, I have run into instances where I am calling this.delegate('click',...) on initialize of an item view to obtain the behavior of routing from a generic tabular list to a detailed item view and finding that the click delegation is not working for some reason.

These painful times after ardurous debugging have led to the same conclusion that I am documenting now to avoid repeating again in the future. Essentially, the root cause was somewhere else within the view, I had an event handler to do a render which effectively blows away the delegation since the old nodes are tossed away.

@naganowl
naganowl / trainSystem.md
Last active August 29, 2015 13:56
An interview question I came up with that's practical and tests MVC concepts

How would you go about designing a system to coordinate trains departing from different stations on multiple lines purely clientside?

Starting inputs are:

  1. Total number of trains
  2. Total number of stations and the lines they are on. 3. Assume stations are equally spaced apart.
  3. Schedule of when train needs to start/end and their 'base' 3. Assume trains start and end at the same location.
@naganowl
naganowl / index.html
Last active August 29, 2015 13:56
Playing around with http://purecss.io/
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css">
</head>
<body>
<div class="pure-g-r">
<div class="pure-u-1">
<div class="l-box">
<h2>Foo</h2>
@naganowl
naganowl / animatedHamburgerCSS.md
Last active August 29, 2015 13:57
A technical summary of how http://www.elijahmanor.com/css-animated-hamburger-icon/ and http://dstrunk.com/emulating-facebook-papers-menu-animation/ is accomplished
  • The entire hamburger element is a link with a span, where the span has a before and after pseudo-element.
  • The center bar is the actual span, whereas the top and bottom are the before and after pseudo-elements respectively.
  • The top and bottom bars are positioned to the center and rotated to create the X.
    • For some reason, the top bar rotates seamlessly while the bottom one is a bit jittery, even after specifying a bottom attribute.
    • The bars need to be rotated from the center due to the default transform-origin. The positioning may be removed if we specify a different origin at the expense of lower browser support at the time of writing.
    • The bottom bar rotation can be accomplished by adding a translateY(-10px) and top: 10px to force the transition to kick in and have it visually rotate from the bottom.
      • See this CodePen for an example of it in action.
  • The middle bar could be rotated with the bottom bar faded away, but the top bar rotation would need to
@naganowl
naganowl / check-coverage.coffee
Last active August 29, 2015 13:57
Add a toggle to enable/disable Blanket coverage on Mocha browser test page with cov parameter.
if window.PHANTOMJS or window.location.search.indexOf('cov=true') >= 0
# Synchronously get Blanket.
request = new XMLHttpRequest()
request.open 'GET', '../vendor/bower/blanket/dist/qunit/blanket.js', no
request.send()
script = document.createElement 'script'
script.type = 'text/javascript'
# There is no event fired when HTML report is added to tests.
script.text = request.responseText +
@naganowl
naganowl / redirect.html
Created April 4, 2014 18:40
Simple page that redirects and provides link to do so.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="10;url=//github.com/naganowl">
<script type="text/javascript">
setTimeout(function(){
window.location.href = "//github.com/naganowl";
}, 10000);
</script>
@naganowl
naganowl / dropdown.md
Created April 4, 2014 21:57
Keep Bootstrap 3.0 dropdown from closing on item click