nprapps / app-template Goto Github PK

View Code? Open in Web Editor NEW

1.5K 119.0 195.0 2.42 MB

The NPR visuals team's opinionated project template for client-side apps.

Home Page: http://blog.apps.npr.org/2014/07/29/everything-our-app-template-does.html

License: MIT License

Python 13.57% HTML 2.93% CSS 5.14% Shell 0.02% JavaScript 78.34%

app-template's Introduction

nprviz's Project Template

About this template
Assumptions
Copy the template
Configure the project
Bootstrap issues
Develop with the template

About this template

This template provides a a project skeleton suitable for NPR projects that are designed to be served as flat files. Facilities are provided for rendering html from data, compiling LESS into CSS, deploying to S3, installing cron jobs on servers, copy-editing via Google Spreadsheets and a whole bunch of other stuff.

This codebase is licensed under the MIT open source license. See the LICENSE file for the complete license.

Please note: logos, fonts and other media referenced via url from this template are not covered by this license. Do not republish NPR media assets without written permission. Open source libraries in this repository are redistributed for convenience and are each governed by their own license.

Also note: Though open source, This project is not intended to be a generic solution. We strongly encourage those who love the app-template to use it as a basis for their own project template. We have no plans to remove NPR-specific code from this project.

If you want to setup a version of the app template for yourself, read this blog post about how to do so.

Assumptions

The following things are assumed to be true in this documentation.

You are running OSX.
You are using Python 2.7. (Probably the version that came with OSX.)
You have virtualenv and virtualenvwrapper installed and working.
You have NPR's AWS credentials stored as environment variables locally.

For more details on the technology stack used with the app-template, see our development environment blog post.

Copy the template

Create a new repository on Github. Everywhere you see $NEW_PROJECT_NAME in the following script, replace it with the name of the repository you just created.

git clone [email protected]:nprapps/app-template.git $NEW_PROJECT_NAME
cd $NEW_PROJECT_NAME

mkvirtualenv $NEW_PROJECT_NAME
pip install -r requirements.txt
npm install

fab bootstrap

This will setup the new repo and will replace README.md (this file) with PROJECT_README.md. See that file for usage documentation.

By default bootstrap will use nprapps as the Github username, and the current directory name as the repository name. This is a best practice, but you can override these defaults if you need to:

fab bootstrap:$GITHUB_USERNAME,$REPOSITORY_NAME

Problems installing requirements? You may need to run the pip command as ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future pip install -r requirements.txt to work around an issue with OSX.

Bootstrap issues

The app-template can automatically setup your Github repo with our default labels and tickets by running fab issues.bootstrap. You will be prompted for your Github username and password.

app-template's People

Contributors

Stargazers

Watchers

Forkers

rudimk d1on scalp42 johneo acary motoma libin stevepereira bshort jisqyv jayperk tadasmikuckis aeglethemis waigo21 nmistry gijs iiuj-piotrwalaszek iwine zenweasel sarabelsav samvj gitlisted mbijon poderomedia hondoohnaka dunzo rallisonr javamo greco nuknightlab yangjiandong rafeco shivamthapar wtmmac colingourlay bayreporta twocngdagz jeidsath ymirpl newsroomdev aboutaaron pereiram jeanabbiateci web5design bridgers strogo jeredding seanthenderson sirithink questchris beckybowers gildotdev youthradio greg-dubrow lambrechts gr8linux stlpublicradio vikashranjan hughp ilovejs kmcodes joesleung tylerfisher federaa inn danabauer oneillclaire sloanahrens asavagephoto grantblank crowforge siyafrica brentajones qdinhbui2 sprime01 chagan leux9 kirkman dwightgnjohnson javadevvictoria grantbfoto gpbmacon ohmegasquared samlife suymilk mrbao connectlegendary developervox carlvlewis dbilovd ceddef eads lasic shaohua fdaudens artooooo em3021 d13sl0w flippodev nayana487

app-template's Issues

Don't re-render asset packages for every page

init-chat: animate new chat posts

Have to deploy twice to get lasted assets to S3

Backport scribble live library from inauguration

Document folder hierarchy

What is each of these things?

init-chat: ugly as hell – styles are wonked since backporting

Create Python testing rig

init-chat: 'enter' key in login form should submit

Refactor so that testing can be done with uncompiled CSS/JS

Would require running some sort of server that would write the correct HTML.

Use branches instead of files for different template/js examples?

@brianboyer @jeremyjbowers Let's not forget to talk about this. I'm feeling like it's the right way to go.

Backport Google Analytics custom variables from disability

From Lauren:

Here is the current list of custom variables that we use. I've copied Joanne because she might be able to provide the code we developed for a number of the tech-side variables we track.

http://confluence.npr.org/display/AIR/Google+Analytics+Custom+Variables

For anything built outside of Seamus, custom variables 1-4 can be set by hand.

Notes
Var 2: Editorial counterparts should know their ID numbers. Comma-delineated list of topics, primary topic listed first and designated P.

Var 3: Declare the Program ID variable if the app is associated with a story for a particular program. Integer.

Localization: Probably can't get to this one right now because this variable is set based on a cookie in a widget that's not used on app pages.

Var 4: Organization: Value is 1 for NPR.

Var 5: Do not declare.

Var 6: Joanne!

Var 7: Joanne!

Var 8 and 9: Reserved; currently not in use. Will let you know when we get there.

Var 10: Joanne!

Var 11: Joanne!

We also fire an event on page load that tracks all of the various series, byline IDs, program IDs, etc. in a single string.

Event Category: IDs
Event Action: IDs
Event Label: Comma delineated list of all Seamus ID numbers that should get credit for the app/story, including programs, topics, blogs, series, bylines, and anything thing else with a Seamus ID number. Editorial contacts should be able to provide the correct list. Add the non-interaction parameter "true."

Raise 404 instead of 500 when trying to serve a file that doesn't exist

override 'x' for closing bootstrap modals

nprapps/inauguration#256

Factor out webassets in favor of grunt

Grunt does everything we need. webassets is now redundant.

Add embedded widget example (like inauguration)

init-chat: chat login disappears / reappears when you toggle chat live

Replace minified js/css libs with unminified versions

Refactor app.less to use LESS abilities

It compiles, but isn currently just CSS...

Write meta-watcher command

Start/stop all the various watchers demons

Apple touch icons

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="img/touch-icon-57x57-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch-icon-72x72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch-icon-114x114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch-icon-144x144-precomposed.png" />

Update Bootstrap to 2.2.2

http://blog.getbootstrap.com/2012/12/08/bootstrap-2-2-2-released/

Script to bootstrap repo tickets and labels

Parse .git/config for the repo url. Base on:

https://gist.github.com/4268283

Investigate mime-type issues breaking bootstrap when testing in safari

nprapps/inauguration#255

Update w/ responsive ad units and new config

Aggregation ID for all news apps
Story ID, unique to each piece (currently, use the id of the magic redirect page, in the future we'd hope to use the id of the item that links to us from seamus)
Topic parameter (business/music/news/etc)

Need to be able to handle 300x250 most of the time, but hope to have room to scale up to 300x600. On touch devices, the adhesion unit will show across the bottom. We can but Erica about setting up demo ads for testing.

*** also, we need to put the 88-wide unit up top somewhere. maybe the top bar?

bootstrap_issues error

Deleting 1 labels
Traceback (most recent call last):
File "/Users/bboyer/.virtualenvs/dashboard/lib/python2.7/site-packages/fabric/main.py", line 717, in main
_args, *_kwargs
File "/Users/bboyer/.virtualenvs/dashboard/lib/python2.7/site-packages/fabric/tasks.py", line 332, in execute
results[''] = task.run(_args, *_new_kwargs)
File "/Users/bboyer/.virtualenvs/dashboard/lib/python2.7/site-packages/fabric/tasks.py", line 112, in run
return self.wrapped(_args, *_kwargs)
File "/Users/bboyer/src/dashboard/fabfile.py", line 204, in bootstrap_issues
github.delete_existing_labels(auth)
File "/Users/bboyer/src/dashboard/etc/github.py", line 45, in delete_existing_labels
print 'Deleting label %s' % label['name']
TypeError: string indices must be integers