You will need the following things properly installed on your computer.
$ node -v
v8.0.0 # if you see this or higher, you're good!If not:
$ brew update
$ brew upgrade node$ git clone [email protected]:nypinstripes/todo-app-giant.git
$ cd stash-searchThe app was initialized & built using Yarn, however it has been tested & confirmed to work with npm.
$ yarn installor
$ npm installIndividual build (dev/prod), test & server start commands can be found in the scripts hash in package.json.
$ yarn launchor
$ npm startThere are a few ways to run the MyTodos test suite. Presently, only tests for renderring routes & persistant layout elements.
yarn/npm testto execute the test suite in single run mode & generate Jest snapshots.yarn/npm test:updateto execute the test suite in single run mode & update Jest snapshots that have changed.yarn/npm test:watchto execute the test suite in constant watch mode & update Jest snapshots as they're changed.yarn/npm test:coverageto view code coverage (lcov) & render performance reports using the built-in react tool (formerly Istanbul).
The runtime environment (rte) is NodeJS and was written on v11.2.0, however it should be able to run without issue on any NodeJS version higher than 8.0.0.
The webserver is ExpressJS as it continues to be the more popular of the choices for running web backends on Node, Hapi would be a suitable alternative.
The server-side markup is renderred using the PUG templating engine, which has a high degree of reliability with build tools like Webpack.
As a simple alternative to polyfilling with a library like modernizr, there's also a JS library I used called UAParserJS, which detects & extracts loads of useful info about the client machine upon the first request. With this info we can look at things like the client's user-agent to determine if their browser is among the ones that are supported.
The list of supported browsers can be found in the server helper utils file under agents.
In addition to helper functions, UAParserJS also offers fine-grain access to:
ua,
browser: { name, version },
engine: { name, version },
os: { name, version },
device: { model, type, vendor },
cpu: { architecture }
App Styles
| Folder | Description |
|---|---|
/base/.. |
Styles applicable globally, throughout the app, like browser resets/normalize files. |
/common/.. |
Styles for visual elements with specific classes, but do not have components attached to them (e.g., .overlays, .animations). Files should be separated by their purpose. |
/components/.. |
Styles applicable to individual components (these files are appended near the end and are overridden only by vendor styles). |
/layout/.. |
Styles for standard elements that are persistent throughout the experience & on every page. Files should be separated by elements. |
/vendor/.. |
Styles for elements that are particular to 3rd party plugin libraries and secondary browser type & version support. These styles load last and have the highest precedence. |
Shared Sass Helpers /shared/data /shared/scss
| Folder | Description |
|---|---|
_breakpoints |
Definition of app wide media query breakpoint rules, logic & utility. |
_colors |
All colors should be html named colors which can be found at Color Names or predefined named variables sourced from the sip or swatches OSX apps, or similar interface (based on Chirag Mehta's famous "name that color" tool), or from formal design guides except those inherent to browsers W3 Color Names, which will not appear in this list. Please keep them alpha sorted, use all lower-case dasherized variable names. |
_functions |
Sass helper functions - Things like custom short hand utilities for fonts, colors, borders etc. |
_mixins |
Sass mixins |
Snapshots are generated using the jest testing library, at present there are only basic Route/Layout load & render tests in the suite.
Note: Searches submit as you type, there's a 6 second debounce delay as not to make too many network requests.
- On List/Grid views, remove custom pagination & add Infinite (Fetch &) Scroll, with React-Virtualized.
- Complete adding
< Prev&Next >navigation controls on Article detail (ArticleOverlay) view. - Improve truncation display method for ListItem view descriptions.
- Make navigating between articles in Article detail (ArticleOverlay) views "perma-linkable" & update url on navigating.
- Add sort & page # to results url history.
- Reduce search network requests.
- Add tap, touch & swipe controls for mobile devices.
- Add more tests & increase coverage & reliability.
- Performance (loading, updating & painting) audit, with network optimized media sizes.
- More inline Documentation!!
- Perform more x-browser/device/OS UI/UX sanity/QA checking (currently only verified with Chrome).
- Make use of some of the deeper webpack optimization features like Tree-Shaking, CommonsChunking.
- Attempt lazy component loading with System.import();