ga-wdi-boston / browser-template-archived Goto Github PK

View Code? Open in Web Editor NEW

19.0 19.0 132.0 383 KB

CLICK HERE BEFORE YOU USE THIS TEMPLATE: http://i.imgur.com/UmjLrOc.gif

License: Other

JavaScript 87.09% HTML 11.71% CSS 1.20%

browser-template-archived's People

Contributors

Stargazers

Watchers

Forkers

knguyen21 resource11 realweeks rchezrutt88 byau edesilets ajordon pvdri wdi-sea susandaiute philschoof v4vince sjf125 louarnos tfavazza roobscoobs computingbets huey1021 mishaherscu mattb5 erinsul jacobhereford acobrelo jcornmanhomonoff michaelb167 andreasantarl shireen-bean sarahhartwick semanticteam esthercordova payne-chris-r jlmitch1989 echoxin dvdpwll natasapeic modularjon rhjones bullhead242 nishkixs viohlet tuckyeah chrxtina julie1013 jenboyd knoddin wmcb91 styletabtech olivia-leach ioncrash akradin ielole naki21 akadane87 sphilippe7 rdelvallej32 alex-braun bowers96 jdaly04 sujkid kiraamaa jbuzzanco kmg1434 matthewgsommers treep78 kfili neugierige kibs86 akgoode samordonez ddobson doremaxime alexkarasik squirtlesquad1988 skylarkj moshiko1988 zchenbonterra newayliu1 soboscott lbreguet ladypinetree gaand fullstacknoob s0phi4 novakw267 mattkwondo rrdaniels85 vanduong28 antleo1995 naributler andyjzhong benjimelito pouk91 eliottenos anddrew914 sstone72389 jlisaw lekova ryaong792 donpowers awoodrum87

browser-template-archived's Issues

Use defer in script tags rather than putting them at the bottom of body?

So this

<head>
  <script src="example.js" defer></script>
</head>

rather than

<body>
  <script src="example.js"></script>
</body>

Add html fixtures for testing jquery interactions

Add css/sass to webpack pipeline

Add GA logo to top of README

Add notes about using CSS "templates".

This recurs frequently enough that we should address it at least to say "don't".

Add jpg and png files to webpack

Where webpack tests for ttf | eot | svg files, it doesn't look for other image files. Add jpg | png after svg to include these file types when grunt serve/build is run.

Remove getFormFields from index.js

@gaand and @jrhorn424 agree it should not be in this template.

Code to remove:

// attach getFormFields globally

require('expose?getFormFields!./lib/get-form-fields.js');

Change to more conventional repository structure

In order to ease deployment, I suggest moving all files into a src or app directory, and then building to a dist directory. Additionally, using a tmp folder for deployment to github pages allows us to copy files to the gh-pages branch without using a .gitignore.

Do not expose `getFormFields` globally

Require developers to use

const getFormFields = require('../../../lib/get-form-fields.js');

in UI related files.

PS - with correct leading '../'.

.gitignore has carriage returns

Please remove those, thanks.

Add testing harness

Jasmine tests work on the node side, but we need browser tests on the client side. We'll need to integrate webpack into the testing pipeline somehow...

Add viewport meta tag to index.html

Add to head of index.html <meta name="viewport" content="width=device-width, initial-scale=1"> for media queries to kick in properly

Remove globally setting `$` and `jQuery`?

Require developers to use

const $ = require('jquery');

This might help with separation of concerns. It will likley help with diagnosing probelms with same.

Add handlebars custom helper loading

I think this requires modifying the loader config in webpack.

See ga-wdi-boston/full-stack-project#454

Add `grunt deploy` task

grunt build to dist directory (directory tracked in #21; dist is untracked and useful for local testing)
grunt deploy copies dist to tmp (tmp must be untracked)
git checkout gh-pages
grunt clean (git clean everything; not yet written)
copy tmp to current working directory
add all and commit with a release number
git checkout last branch

Include scss in grunt nag

And maybe others!
per @gaand

Developer's JavaScript ends up in `dependencies.js`

Formally vendor.bundle.js

This seems incorrect. If you haven't added any new npm modules, I think that should build once and remain unchanged.

Add handlebars to webpack pipeline

See https://github.com/jlevinger/joelevinger-fe/blob/master/grunt/webpack.js

maps issue

Ethan was attempting to look for a defined variable, he put a debugger in right after and it was show as not defined. Web pack was uglyifying. Console.log work, breakpoint worked, but debugger didn't work. Doesn't work in chrome, works in safari, not in chrome canary.... Chrome bug?

Use `node-noop` to stop processing of SVGs and fonts?

Developers don't seem to be using glyphicons that much. Does it make sense to send SVGs and fonts to the bitbucket instead of building output?

JSCS merged into ESLint.

See ga-wdi-boston/node-template#13

Add debug helper to inject jquery into console

Livereload without script tag

In grunt/webpack-dev-server-.js:

// enable live reload without a script tag
webpackConfig.entry.vendor.unshift("webpack-dev-server/client?http://localhost:8080");

Make lesson the default branch or use master for notes/contributing/etc

Add es6 support

Allow spaces in method shorthand syntax

Currently:

var y = {
-    fn () {    // BAD
+    fn() {     // GOOD
       return 42;
    }
}

I prefer the space (as does Ember), but I don't mind if it is missing. Change to .jscsrc, please add alphabetically by key:

+   "disallowSpaceAfterObjectKeys": {
+    "allExcept": ["method"] 
+  },

Rename to browser-template

Our agreed upon naming scheme.

Webpack dev server and vendor bundle sadness

The fix for #23 caused an issue because I misunderstood how grunt configuration worked. I'm mutating the webpack config from the dev server config, and since all configs are parsed before any task runs, the mutation present in dev server config affects the webpack build process.

The result is that the dev server client code is bundled into vendor.bundle.js. Sadness ensues for deployed apps.

Add svg loaders

To support bootstrap inclusion in some projects.

Ensure loading of minimal js, etc.

So, <library>.min.js or <library>.min.css or in the case of handlebars, handlebars.runtime.min.js (I think).

Others?

Test this to make sure it works before committing.

JSHint configuration should use mocha instead of jasmine

https://github.com/ga-wdi-boston/browser-template/blob/master/.jshintrc#L8

Update to use mocha for testing

Make more parallel with node-template.

Explore options for browser running tests (phantomjs, chrome, safari, firefox, others)

Break git helper scripts out into separate repository

scripts/index.js uses var

use const instead of var?

https://github.com/ga-wdi-boston/browser-template/blob/master/assets/scripts/index.js

Add loaders fonts

To support bootstrap inclusion in some projects.

Consider using brocolli + rollup

This would give us (1) a huge performance increase on builds and livereload, and (2) allow us to use a simpler sourcemapping scheme (we have to use an expensive one due to the infamous chrome bug #17).

Technical details here, but it boils down to how webpack versus rollup manages isolated scope:

Remove duplication from webpack configuration

How do I share setup objects between tasks? Is it any different when the configuration files are js rather than json files?

Add css loader and normalize.css

Load body tag from handlebars template

... in addition to already tracking changes in JS files.

Add loader for html

Then, when html files are changed, livereload will kick in.

License in package.json

Should read: "license": { "software": "GNU GPLv3", "content": "CCBYNCSA 4.0" }

Archive historical repository

https://github.com/ga-wdi-boston/js-repo-template

Add `.nojekyll` file to root of repository.

Re: GitHub Pages seems to be excluding files with "vendor" in the name

Hey Antony,

Thanks for reaching out! We've recently updated to Jekyll v3.3, which ignores vendored files by default. To include your vendored files in your build, you'll have to add this to your _config.yml file:

include:
  - vendor

Alternatively, if you're not using Jekyll, you can add a .nojekyll to the root of your repository to disable Jekyll completely during your site build, so those files won't be ignored.

Could you give that a try and let me know if that works?

Cheers,
Antonio
GitHub Support

Deploying a webpack built app with "vendor.bundle.js" or "vendor.js" stopped working sometime yesterday.

Renaming the file to a name without "vendor", I tried "bob.js" and "dependencies.js", worked fine.

Add comment to head of `index.html`

<!-- Do not add `script` or `link` tags unless you know what you are doing -->

Remove js-beautifier from package.json

jscs and js-beautifier are redundant. Grunt configuration already removed.

Use a more common naming convention for bundles, entries (frontend-templates#6)

For example, prefer bundle.css over app.css. Also, have a manifest called index.css instead of using "multiple entries" in scripts/styles. That way, we can take load order out of the grunt configuration.

Switch to webpack? (frontend-templates#4)

Browserify works just fine when downloading JS via npm. But, we should have a way of bundling stylesheets as well. I'm open to other options aside from webpack.

Ideally, these tools would:

Use manifest files (less important) to manage dependency orders, similar to rails pipeline
Be compatible with a watcher that would seamlessly recompile assets in the background

Actually, duojs is really exciting and very simple alternative to browserify, atomify, and webpack. For future iterations, the templates should utilize duojs.

For now, I'll replace browserify with atomify, since the latter behaves as the former, but also allows for css includes.

Webpack has what we need (for now). 😄