Skip to content
Just a demo proof of conception.
JavaScript HTML PHP CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_src
public
.gitignore
README.md
hobbies.html
index.html
react.html
robots.txt
social.html

README.md

#Jason Lydon: Quick Code Exercise using Gulp, Jade, Stylus, REACT, JSON, Twitter and Instagram.


##Directions ==== 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!

Deliverables:

  1. 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

Basic site requirements:

  • 3 to 5 pages using templates
    • DONE
  • 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.
  • Use at least one Javascript library
    • 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.
  • Bring in some fun flourish with Javascript, CSS or mode of your choosing. (Think … Processing.js, Epoch.js, D3, Polymaps, etc)
    • 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

  1. Do you have nodejs and npm installed?
    • Running $ node --version and $ npm --version in 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
    • Running $ gulp --version in 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

Run it

  1. In the terminal, run $ cd [PATH TO DIRECTORY]/_src. You are now in the build folder.
  2. The dependant Node Modules are not included in this repo, you need to run $ npm install to add them. If you run into premission issues, then run it as the Super User via $ sudo npm install. If you have the _src directory open in Viewer, you should see a node_modules folder added and populated. The npm install command read the package.json file and fetches the necessary dependencies.
  3. The Task Manager being used is GulpJS. You can run the following tasks via the terminal
    1. $ gulp will run the default task which calls the markup, styles and js tasks
    • $ gulp watch starts 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 markup converts 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 styles converts 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).
    • $ gulp js concatonates all the javascript files and spits out a version (/public/js/main.js), then runs it through Uglify and renames the file (/public/js/main.min.js)
You can’t perform that action at this time.