Angular ES6 Webpack app
• ES6, Babel, Node, Webpack, AngularJS, UI-Router, ESLint, UglifyJS, Atom (ESLint, bootstrap boot-lint, css-lint), git, nginx, Photoshop.
• Style guides / guidelines: Airbnb, Pete Hunt
A custom app for Sam Ford, an illustrator and artist.
Design + Code: Amanda Falke, Portland Oregon
A "performance-first, mobile-first" responsive design, hosted on nginx.
I've written and delivered a performant AngularJS app for a visual artist, where both image quality and fast speeds (particularly on mobile) were a primary concern. For this reason, detail-oriented image compression techniques were used (UglifyJS, Google pagespeed, Photoshop), nginx was chosen for the server over Apache, and gzip techniques were also used.
- Minification: UglifyJS (and Webpack's Angular Inject plugin) used
- FOUC: Extract Text Webpack Plugin used, but did not make discernible benchmarked performance difference
- gzip: Used whenever possible on nginx VPS
- Images (format): JPG chosen over PNG for smaller file sizes and photographic image quality; SVG and vectors not appropriate for design.
- Images (size): Bootstrap breakpoints and responsive image classes used; Photoshop compression techniques used
- Generated pages Using regexp, URL segment pattern matching, and JSON in SPA architecture rather than individual pages for each portfolio piece
SPA with generated portfolio pages: Portfolio pages are generated from JSON using nested views with UI-Router and regular expression pattern matching via URL segments and
Custom next logic: The Carousel in this project is an Angular-UI Bootstrap Carousel and tpls template, so I used custom logic with pattern matching URLs of generated portfolio pages for the
next/prevlogic for portfolio pages.
Using existing technologies and best practices such as Angular-UI Bootstrap carousel, typography, bootstrap classes, the ngMagnify directive, UI-Router, and other open source software too,
Everything else in this project is open source.
- Clone the repo
$ nvm usewill use Node 6.9.2
$ npm install
$ npm run installdevdeps// will install all dev dependencies
$ npm run clean
$ npm run build// Webpack compilation will verbosely warn re: UglifyJS
$ npm run dev// runs Webpack dev server in --inline hot mode
- App will now run, albeit without (client-owned, copyrighted) images; populate JSON objects with appropriate images in model logic.
Responsive design (mobile first):
Noted bug: Chrome on Windows: opening up a new tab stops navigation with Angular-UI Bootstrap Carousel (something I didn't build! ha)