Site notes:
This site was constructed with:
- code sharing between this page, and fallback for older browsers here
- html (ejs)
- css (scss)
- javascript modules
- written in es6, compiles to es4-6
- Node JS
- as a static site generating compiler
- compiles
- EJS to html
- app.js (uses includes), compiles to es6 and es5 (using webpack)
- oldBrowser.js (uses includes), compiles to es4 (using browserify
- style.scss using node-sass (c++ module, much faster than the java compiler)
- compiles
-
as a live build server
- compiles any of the above, when a relevant file changes
- serves to web site (over local IP or localhost is an option)
- as a static site generating compiler
-
Sizzle
-
that's the selector engine from jQuery, but JUST that bit.
- (way lighter)
-
that's the selector engine from jQuery, but JUST that bit.
-
SCSS
- variables and for loops are handy.
- mixins are ok...
- most of these animations are CSS3
- unless you're on the fallback page, in which case; it's all javascript
-
post-css
- just for automatic vendor prefixing
Build Process:
![](./assets/img/demo.gif)
This gif shows my build script
- please note the nifty Cylon i've made, which runs in the terminal, whhile tasks are completing or the program is waiting
- building HTML from EJS
- compiling commonJS ES6 javascript (requires) to:
- ES6
- ES5
- ES4 (for a seperare fallback page)
- shares EJS, SCSS, and JS with the main app
- compiling SCSS to CSS
- using node-sass
- written in C++, way faster than the ruby lib
- using node-sass
-
creates an express server for the newsly created "dev" folder
- CSS and JS are both source mapped
-
creates an express server for the newsly created "prod" folder
- source maps cleaned
- files minified
- launches a web page with links to the relevant pages
- watches files for changes, recompiling and/or copying files as needed
Free Stuff:
Desktop Backgrounds:
![](./assets/free/horizonBG/horizonBG.png)
...which can also be used to make things run in sequnce, by setting the size aregument to 1
The "size" argument sets how many functions are allowed to run simultaniously
Mac apps:
![](./assets/free/copyPath/copyPath.png)
(very handy for pasting network paths in emails)
![](./assets/free/macKeys/macKeys.png)
![](./assets/free/openInAtom/openInAtom.png)
use "⌘ + space" or a dock shortcut to open your current focussed finder folder in Atom Editor
![](./assets/free/openInTerminal/openInTerminal.png)
use "⌘ + space" or a dock shortcut to open your current focussed finder folder in the terminal
![](./assets/free/toggleHidden/toggleHidden.png)
use "⌘ + space" or a dock shortcut to toggle the visibility of hidden items in the finder
![](./assets/free/toggleKeys/toggleKeys.png)
use "⌘ + space" or a dock shortcut to toggle the "Use F1, F2, etc. keys as standard function keys" setting in OSX
(very handy for photoshop, pro-tools, Final Cut, and Mya users)
Node Packages:
![](./assets/free/npm.png)
...which can also be used to make things run in sequnce, by setting the size aregument to 1
The "size" argument sets how many functions are allowed to run simultaniously
![](./assets/free/npm.png)
![](./assets/free/npm.png)
![](./assets/free/npm.png)