Animation performance on the Beercamp case study is inconsistent across browsers.

By browser:

• Chrome 31: general laggy animations when using a large screen resolution. I'm on a 27" monitor or something and using a smaller screen helps the issue significantly. The issue seems mostly contained to the portion using reel.js. The timeline while scrolling shows a framerate well under 30fps for the majority of the animation.
• Firefox 27 is fairly choppy while scrolling even on 15" monitor. Pain points are the header and the reel.js portion.
• Safari 7: the drawing animation platform and the hovering layers jump during scroll. Issue is not resolved by using a smaller screen.

This may be partially due to my older hardware but I think we can probably work on some specific pain-points to smooth out these animations.

This is two issues:

1. On http://sketchbook.nclud.com/created/beercamp/, I'm seeing errors with reel.js more often than not. I'm wondering if this might be related to images not being loaded all the way since we're in a production environment that's a bit slower than localhost. If I soft refresh a few times, I can sometimes get it working. In my mind, this is because page assets are cached in the browser and loading faster.
2. When the scripts load as expected, it seems that scrolling past the header area causes jumpy behavior. I haven't been able to tell if this is a timing issue (related to a setTimeout, a scrolling issue, or something else.

Thought I added this but it didn't take. Should probably have margin-bottom: 2em;

The entire feature area should be clickable. Right now, most of it is but the CTA of "See how ..." is not.

Let's get rid of the double linking there and make the whole container clickable by putting it in a data-link attr (or similar) on the container. We can capture a click on the container as it propagates up and then use window.location to move the user from page one to the feature's page.

Is there a way to pull an excerpt (or manually enter one) for posts? On the static design (http://www.browserspring.com/sketchbook/) the goal was to have the first two or three sentences as an excerpt showing up on the front/archive pages beneath the post title for some context.

The grunt serve command depends on a ruby gem - csscss, which gives an error:

ERROR:  Error installing csscss:
csscss requires Ruby version >= 1.9

How can we find out which tool is using this ruby gem?

Rosetta cart does not seem to be triggering or activating the slideshow.

Can we download the fonts from myfonts.com and include them in the project rather than pinging their server for them?

In beercamp.js, instead of repeatedly running navigator.userAgent.match(/mobile/i), we should just cache the results of that test. Something like

var isMobile = navigator.userAgent.match(/mobile/i);
var isLandscape = windowWidth > 768;

should do the trick. This will allow us to be more concise elsewhere.

if (navigator.userAgent.match(/mobile/i) && windowWidth > 768) { ... }

becomes

if ( isMobile && isPortrait ) {...}

#post-footer {
  padding-left: 18%;
  border-top: 1px solid rgba($dark-blue,0.35);
  @include rem(margin,4rem 0);
  @include rem(padding-top,2rem);
  ...
}

compiles to

#post-footer {
  padding-left: 18%;
  border-top: 1px solid rgba(15, 39, 51, 0.35);
  margin: 4rem 0;
  margin:  4rem 0;
  padding-top: 2rem;
  padding-top:  2rem; }

wut

Maybe we need a higher res video? Looks pretty rough in firefox on larger screens (see full)

On case studies, the story should show up next to the top left logo on the dark blue slide down nav. On regular posts, the post title should show up there.

On index/archive pages, nothing should be there (and top left logo should not have right border).

The current static beercamp.html has this for the top nav:

<div class="logo-nav">
        <div class="logo-wrapper">
            <a href="index.html"><img src="IMG/nclud-logo.svg"></a>
        </div>
        <h1>Beercamp 2013</h1>
        <a href="#" class="menu-btn right"></a>
    </div>

Current static post has this:

<div class="logo-nav">
        <div class="logo-wrapper">
            <a href="index.html"><img src="IMG/nclud-logo.svg"></a>
        </div>
        <h1>Decorating the New Office Space</h1>
        <a href="#" class="menu-btn right"></a>
    </div>

Current static index page has this:

<div class="logo-nav">
        <div class="logo-wrapper">
            <a href="index.html"><img src="IMG/nclud-logo.svg"></a>
        </div>
        <a href="#" class="menu-btn right"></a>
    </div>

The #scroll-nav should only have class "front-page" on index & archive pages, not all pages.

the comments module appears to exist in some live posts, but not staging posts.

here it is: http://sketchbook.nclud.com/joe-corbett/

here it is not: http://staging.sketchbook.nclud.com/joe-corbett/

Moving forward, we probably want to split the JS files - right now beercamp.js contains all the Beercamp specific stuff as well as the skrollr initiation. As we move on to other case studies, probably want to pull out the skrollr and anything initiated by imagesloaded into a third JS file, just so that way we'll be able keep adding case study javascript without moving things around every time.

The footer for the index and the archive should be the plain "designed by nclud" footer. On specific case studies and posts, we should have the social footer that pulls in post metadata.

So we don't lose visibility, need to add some sort of author management system. nclud is the base author right now, but need to be able to add new authors and assign them to posts (i.e. the latest post should be attributed to Kerry Gunther, not nclud).

Social meta tags on single case study seem to be reflecting overall tags of site - need to revisit to make sure the tags/structure is right per the individual case study as opposed to the overall site.

Recently, "Sketchbook" shows up in the top dropdown menu under "Beercamp 2013" - should only be case studies here.

city-bkg mobile image location needs to be changed from /pages/beercamp/city.jpg to img/pages/beercamp/city.jpg (just adding img to beginning)

the black footer for rosetta is super long, doesn't seem to end.

Somehow the entire site doesn't work right now on mobile/tablet - I'm assuming it's related to one of the recent changes made along the way but no idea what (not getting any errors in console or what not).

It looks like Skrollr works on the header section - logo scales, all that good stuff.

As soon as you get past the header, skrollr stops working entirely - no menu drop down, no firing of other scroll events at any other point.

The iphone's blank screen never changes

You may want to test this against your local but I think this is untouched from the initial repo.

When viewing on my laptop and using the trackpad to scroll, I can scroll to the right to reveal black space. We should track down why this is happening and fix the behavior so users can only scroll vertically.

Let me know if this is something I broke and I'll figure out a fix.

Need to remove the secondary from the head - seems to be overwriting the initial viewport meta tag (at the top: ), causing tablet devices to be zoomed in on the site, loading improperly.

We should organize scripts into components. If it's going to be used globally (think nav functionality, UA sniffing, etc.) we should put it in index.js.

Let's put all libs (for now) into /js/libs and page-specific stuff into /js/pages/[pagename]/*.js

I think we'll eventually want to go down the route of having page-specific folders. I imagine the dir structure would be something like this:

├── index.js
├── lib
│   ├── jQuery.1.10.2.js
│   └── skrollr.js
└── page
    ├── beercamp
    │   ├── lib
    │   └── source
    └── rosetta
        ├── lib
        └── source

So it's running fine, it just seems to be in the wrong position and not fixed. This was definitely an issue I introduced but I'm having trouble figuring out what happened between 937a05a and 3533513 to cause this issue.

I'm almost certain it's CSS related.

update: can see on #design that the top property is not updating. not sure where that's happening in beercamp.js or if that's part of skrollr.

Lots of globals in beercamp.js and we probably don't want to do this. Create a namespace for the page and attach the variables to that.

Maybe we can scrap all ruby in this project so anyone can work on it without going through dependency hell. This would be a bit of a task but it could be fun.

Whether running grunt serve or using grunt build, CSS and JS throughout the site doesn't combine and minify. This means we are live with production code - unminified and full of comments. Need to fix this ASAP within the grunt process so that this stuff is sorting out automatically.

This seems more reproducible than not but it looks like the border is separated from the Mario container.

Since the dist file is cleaned on each build,

user has to manually:

cp -r app/uploads dist/img/uploads

should be added automatically to gruntfile

if you start scrolling before the document.ready event fires, the yellow area at the top continues on forever (I think).

http://quick.as/5reefmzd

Not sure where the position is being changed https://github.com/nclud/sketchbook/blob/master/app/beercamp/index.html#L94-108

Currently don't have analytics on site - need to get proper UA code from Max to add to site for tracking/etc.

Footer on mobile phone devices is huge and keeps scrolling, also doesn't show sharing/scroll to top/footer nclud info. Need to check code and test to see what's changing to make it not show up there.

Mario animation isn't being triggered on mobile phones - need to check the data attributes being injected to make sure the classes are being applied correctly to trigger animation

We should look for a way to DRY up the Sass a bit. Instead of requiring style.scss in multiple files, can we create a common.scss (or similar) module that would hold the site's main styles like the type, grid, etc. This would have front.scss, post.scss, and syntax.scss baked into it.

We can then, on a per-page basis create beercamp.scss or page.scss as-needed as an addendum to common.scss. We can either test or just do whatever is easier between

• per-page download a [pagename].scss that is a result of concatenating and minifying common.scss + page.scss.
• on individual pages just insert [pagename].scss minified, not concatenated with common.scss. This is an extra http request but smaller file size than if we went with the other option.

open to other suggestions too