#Jason Lydon: Quick Code Exercise using Gulp, Jade, Stylus, REACT, JSON, Twitter and Instagram.
==== FULL STACK Exercise ====
We would like for you to create a basic 3-5 page website to introduce a subject of personal interest, product, game, or business of your own design. This can be a real personal project or completely made-up. Use any and all the tools and libraries you wish – just be prepared to talk about it. The key here is show us your knowledge and give us something to talk about – both technically and interest-wise!
- A .zip or public repo containing the files and directories required to run your site on a local server.
- If you're reading this, you found the repo
- Some instructions on standing it up (What do we need? Node.js? PHP? How do we fire it up?)
- See the "Run This Project Locally" section below
- A link to the site on your own hosting with search engine indexing disabled.
Basic site requirements:
- 3 to 5 pages using templates
- Content should be separated from the presentation – Use a CMS, JSON file, or data store of your own creation, etc to show how content can be managed separately from code.
- Content is pulled via JSON, Instagram API or Twitter API
- Make it responsive for desktop, tablets, and mobile device viewing.
- DONE, but I wouldn't say I pushed the limits.
- REACT, Gulp, Stylus and core js
- Pick your favorite JS-based view layer or MVC and rock it: Angular, React+Redux/Flux/Roll-your-own, Backbone, etc.
- Used Jade Templates for some pages and REACT for a page, just to show some diversity.
- Animated SVG as logo
- Use at least 1 third party service (Think … Twitter API, Google Data, FaceBook OpenGraph, WolframAlpha, etc) on the front- or back-end
- Instagram API with string replace and Twitter API with REACT used in client
##Run this locally Setup
- Do you have nodejs and npm installed?
$ node --versionand
$ npm --versionin the terminal should return a version like "v4.0.0", if not, then run the installed from the link above
- Do you have GulpJS installed globally? This isn't required, but sometimes not having the Gulp CLI installed globally can cause issues
$ gulp --versionin the terminal should return a version like "[09:08:39] CLI version 3.8.11". If you don't have it installed, follow the link above and the install directions
- In the terminal, run
$ cd [PATH TO DIRECTORY]/_src. You are now in the build folder.
- The dependant Node Modules are not included in this repo, you need to run
$ npm installto add them. If you run into premission issues, then run it as the Super User via
$ sudo npm install. If you have the
_srcdirectory open in Viewer, you should see a
node_modulesfolder added and populated. The
npm installcommand read the
package.jsonfile and fetches the necessary dependencies.
- The Task Manager being used is GulpJS. You can run the following tasks via the terminal
$ gulpwill run the default task which calls the markup, styles and js tasks
$ gulp watchstarts the watch task, which watchs for changes in files and runs the corresponding task. You can end the watch task by typing
control + c
$ gulp markupconverts the jade templates and data into the static html files in the root of the project. I tried using Pug since that is the new version of Jade, but it wasn't loading data correctly
$ gulp stylesconverts the Stylus files into CSS files, then the prefixes are cleaned up via AutoPrefixer and the media queries are combined via combineMQ (/public/styles/main.css). A version is exported and then the CSS is compressed via CSSNano and renamed (/public/styles/main.min.css).