├── .gitattributes ├── .gitignore ├── CNAME ├── CONTRIBUTING.md ├── Gemfile ├── Gemfile.lock ├── README.md ├── _alphabet ├── a.html ├── b.html ├── c.html ├── d.html ├── e.html ├── f.html ├── g.html ├── h.html ├── i.html ├── j.html ├── k.html ├── l.html ├── m.html ├── n.html ├── o.html ├── p.html ├── q.html ├── r.html ├── s.html ├── t.html ├── u.html ├── v.html ├── w.html ├── x.html ├── y.html └── z.html ├── _config.yml ├── _data └── abbr.yml ├── _glossary ├── AJAX.md ├── AMD.md ├── ANGULARJS.md ├── APACHECORDOVA.md ├── ARITY.md ├── BABEL.md ├── BACKBONE.md ├── BEM.md ├── BLUEBIRD.md ├── BOWER.md ├── BROCCOLI.md ├── BROWSERIFY.md ├── BRUNCH.md ├── CANVAS.md ├── CHAI.md ├── CHAKRA.md ├── CLOSURE.md ├── CLOSURE_COMPILER.md ├── COFFEESCRIPT.md ├── COMMONJS.md ├── CORS.md ├── COUCHDB.md ├── CURRYING.md ├── D3JS.md ├── DATE_FNS.md ├── DESIGN_PATTERNS.md ├── DOM.md ├── ECMASCRIPT.md ├── ELECTRON.md ├── EMBER.md ├── ENZYME.md ├── ESLINT.md ├── EXPRESS.md ├── EXTJS.md ├── FACADE_PATTERN.md ├── FACTORY_PATTERN.md ├── FALCOR.md ├── FLOW.md ├── FLUX.md ├── FOUR.md ├── GRAPHQL.md ├── GRUNT.md ├── GULP.md ├── HAPI.md ├── HOISTING.md ├── IIFE.md ├── IONIC.md ├── ISOMORPHIC.md ├── JASMINE.md ├── JEST.md ├── JQUERY.md ├── JSCS.md ├── JSHINT.md ├── JSLINT.md ├── JSON-LD.md ├── JSON.md ├── JSPM.md ├── JSX.md ├── KNOCKOUT.md ├── LOCALFORAGE.md ├── LODASH.md ├── MEAN.md ├── MEDIATOR_PATTERN.md ├── MEMOIZE.md ├── METALSMITH.md ├── METEOR.md ├── MOCHA.md ├── MODERNIZR.md ├── MODULE_PATTERN.md ├── MOMENTJS.md ├── MONGODB.md ├── MOOTOOLS.md ├── NIGHTMARE.md ├── NIGHTWATCHJS.md ├── NODEJS.md ├── NPM.md ├── NVM.md ├── OBSERVER_PATTERN.md ├── PASSPORTJS.md ├── PHANTOMJS.md ├── POLYMER.md ├── POSTCSS.md ├── PROMISE.md ├── PROTOTYPEJS.md ├── PROTOTYPE_PATTERN.md ├── PUPPETEER.md ├── PURE_FUNCTION.md ├── Q.md ├── QUNIT.md ├── RAMDA.md ├── REACT.md ├── REDUX.md ├── REQUIREJS.md ├── REVEALING_MODULE_PATTERN.md ├── RNPM.md ├── RXJS.md ├── SAILS.md ├── SINGLETON_PATTERN.md ├── THREEJS.md ├── TYPESCRIPT.md ├── UMD.md ├── UNDERSCORE.md ├── UNIVERSAL.md ├── V8.md ├── VANILLA.md ├── VIRTUAL_DOM.md ├── VUEJS.md ├── WEBGL.md ├── WEBPACK.md ├── XHR.md ├── YEOMAN.md └── ZEPTO.md ├── _includes ├── abbr.html ├── alphabet.html ├── footer.html ├── head.html ├── header.html ├── letter.html ├── particles_toggle.html ├── scripts.html ├── search.html ├── sprite.svg └── styles.css ├── _layouts └── default.html ├── assets ├── images │ ├── favicon.ico │ ├── favicon.png │ └── logo.png └── js │ ├── main.js │ └── main.min.js ├── bin └── export ├── index.html ├── package.json └── related └── index.md /.gitattributes: -------------------------------------------------------------------------------- 1 | *.md text eol=lf 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | data.json 3 | node_modules 4 | _site 5 | .sass-cache 6 | .jekyll-metadata 7 | .DS_Store 8 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | jargon.js.org 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Adding a new entry 4 | 5 | 1. Create a Markdown file (`.md`) in `_glossary` folder, named after the entry in uppercase (e.g. `REACT.md`). 6 | 2. Start this file with a [YAML Front Matter](https://jekyllrb.com/docs/frontmatter/) containing: 7 | - `title`: the name of the entry; 8 | - `excerpt`: a short description of the entry (between 60 and 180 characters). 9 | 3. Start the content with the title of the entry (e.g. `# React`). 10 | 4. And finally the content written in Markdown. See below for [content guidelines](#content-guidelines). 11 | 5. Add the entry in `README.md` using the title and the description you provided in the YAML Front Matter of your file. 12 | 13 | For example, here is what `_glossary/REACT.md` could look like: 14 | 15 | ```markdown 16 | --- 17 | title: React 18 | excerpt: a library developed and used at Facebook for building user interfaces 19 | --- 20 | 21 | # React 22 | 23 | Content for the React entry… 24 | ``` 25 | 26 | ## Content guidelines 27 | 28 | The goal of the project is to explain technical jargon to new-comers, so content should be written with simplicity in mind. Avoid buzzwords and explanations assuming too much technical knowledge from the users. 29 | 30 | An entry should live somewhere between 200 and 800 words. Too little, and it is unlikely to provide any additional value to the description. Too long and it’s getting too deep and complex to provide real and quick value. Get to the point, provide some details if needed but avoid deep examples and explanations. An entry should not replace an existing documentation or a Wikipedia page: it should be concise and helpful. 31 | 32 | Feel free to include images (hotlinked, or placed in `assets/images/`) and code snippets to expand around the main idea, as well as further readings at the end, if you would like to provide extra resources on the topic. Some people might be interested in digging deeper. 33 | 34 | ## Abbreviations 35 | 36 | There are a lot of abbreviations repeated throughout the list of entries. To avoid cluttering the content with repeated acronym definitions, you can define them in [`_data/abbr.yml`](https://github.com/KittyGiraudel/SJSJ/blob/gh-pages/_data/abbr.yml). Jekyll will automatically convert them all in the content. 37 | 38 | For instance, adding the `CLI` abbreviations would look like this: 39 | 40 | ```yaml 41 | CLI: Command Line Interface 42 | ``` 43 | 44 | *Note: abbreviations are in alphabetical order. Please try to keep it this way.* 45 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | require 'json' 4 | require 'open-uri' 5 | versions = JSON.parse(open('https://pages.github.com/versions.json').read) 6 | 7 | gem 'github-pages', versions['github-pages'] 8 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (6.0.6) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 0.7, < 2) 7 | minitest (~> 5.1) 8 | tzinfo (~> 1.1) 9 | zeitwerk (~> 2.2, >= 2.2.2) 10 | addressable (2.8.1) 11 | public_suffix (>= 2.0.2, < 6.0) 12 | coffee-script (2.4.1) 13 | coffee-script-source 14 | execjs 15 | coffee-script-source (1.11.1) 16 | colorator (1.1.0) 17 | commonmarker (0.23.6) 18 | concurrent-ruby (1.1.10) 19 | dnsruby (1.61.9) 20 | simpleidn (~> 0.1) 21 | em-websocket (0.5.3) 22 | eventmachine (>= 0.12.9) 23 | http_parser.rb (~> 0) 24 | ethon (0.15.0) 25 | ffi (>= 1.15.0) 26 | eventmachine (1.2.7) 27 | execjs (2.8.1) 28 | faraday (2.5.2) 29 | faraday-net_http (>= 2.0, < 3.1) 30 | ruby2_keywords (>= 0.0.4) 31 | faraday-net_http (3.0.0) 32 | ffi (1.15.5) 33 | forwardable-extended (2.6.0) 34 | gemoji (3.0.1) 35 | github-pages (227) 36 | github-pages-health-check (= 1.17.9) 37 | jekyll (= 3.9.2) 38 | jekyll-avatar (= 0.7.0) 39 | jekyll-coffeescript (= 1.1.1) 40 | jekyll-commonmark-ghpages (= 0.2.0) 41 | jekyll-default-layout (= 0.1.4) 42 | jekyll-feed (= 0.15.1) 43 | jekyll-gist (= 1.5.0) 44 | jekyll-github-metadata (= 2.13.0) 45 | jekyll-include-cache (= 0.2.1) 46 | jekyll-mentions (= 1.6.0) 47 | jekyll-optional-front-matter (= 0.3.2) 48 | jekyll-paginate (= 1.1.0) 49 | jekyll-readme-index (= 0.3.0) 50 | jekyll-redirect-from (= 0.16.0) 51 | jekyll-relative-links (= 0.6.1) 52 | jekyll-remote-theme (= 0.4.3) 53 | jekyll-sass-converter (= 1.5.2) 54 | jekyll-seo-tag (= 2.8.0) 55 | jekyll-sitemap (= 1.4.0) 56 | jekyll-swiss (= 1.0.0) 57 | jekyll-theme-architect (= 0.2.0) 58 | jekyll-theme-cayman (= 0.2.0) 59 | jekyll-theme-dinky (= 0.2.0) 60 | jekyll-theme-hacker (= 0.2.0) 61 | jekyll-theme-leap-day (= 0.2.0) 62 | jekyll-theme-merlot (= 0.2.0) 63 | jekyll-theme-midnight (= 0.2.0) 64 | jekyll-theme-minimal (= 0.2.0) 65 | jekyll-theme-modernist (= 0.2.0) 66 | jekyll-theme-primer (= 0.6.0) 67 | jekyll-theme-slate (= 0.2.0) 68 | jekyll-theme-tactile (= 0.2.0) 69 | jekyll-theme-time-machine (= 0.2.0) 70 | jekyll-titles-from-headings (= 0.5.3) 71 | jemoji (= 0.12.0) 72 | kramdown (= 2.3.2) 73 | kramdown-parser-gfm (= 1.1.0) 74 | liquid (= 4.0.3) 75 | mercenary (~> 0.3) 76 | minima (= 2.5.1) 77 | nokogiri (>= 1.13.6, < 2.0) 78 | rouge (= 3.26.0) 79 | terminal-table (~> 1.4) 80 | github-pages-health-check (1.17.9) 81 | addressable (~> 2.3) 82 | dnsruby (~> 1.60) 83 | octokit (~> 4.0) 84 | public_suffix (>= 3.0, < 5.0) 85 | typhoeus (~> 1.3) 86 | html-pipeline (2.14.2) 87 | activesupport (>= 2) 88 | nokogiri (>= 1.4) 89 | http_parser.rb (0.8.0) 90 | i18n (0.9.5) 91 | concurrent-ruby (~> 1.0) 92 | jekyll (3.9.2) 93 | addressable (~> 2.4) 94 | colorator (~> 1.0) 95 | em-websocket (~> 0.5) 96 | i18n (~> 0.7) 97 | jekyll-sass-converter (~> 1.0) 98 | jekyll-watch (~> 2.0) 99 | kramdown (>= 1.17, < 3) 100 | liquid (~> 4.0) 101 | mercenary (~> 0.3.3) 102 | pathutil (~> 0.9) 103 | rouge (>= 1.7, < 4) 104 | safe_yaml (~> 1.0) 105 | jekyll-avatar (0.7.0) 106 | jekyll (>= 3.0, < 5.0) 107 | jekyll-coffeescript (1.1.1) 108 | coffee-script (~> 2.2) 109 | coffee-script-source (~> 1.11.1) 110 | jekyll-commonmark (1.4.0) 111 | commonmarker (~> 0.22) 112 | jekyll-commonmark-ghpages (0.2.0) 113 | commonmarker (~> 0.23.4) 114 | jekyll (~> 3.9.0) 115 | jekyll-commonmark (~> 1.4.0) 116 | rouge (>= 2.0, < 4.0) 117 | jekyll-default-layout (0.1.4) 118 | jekyll (~> 3.0) 119 | jekyll-feed (0.15.1) 120 | jekyll (>= 3.7, < 5.0) 121 | jekyll-gist (1.5.0) 122 | octokit (~> 4.2) 123 | jekyll-github-metadata (2.13.0) 124 | jekyll (>= 3.4, < 5.0) 125 | octokit (~> 4.0, != 4.4.0) 126 | jekyll-include-cache (0.2.1) 127 | jekyll (>= 3.7, < 5.0) 128 | jekyll-mentions (1.6.0) 129 | html-pipeline (~> 2.3) 130 | jekyll (>= 3.7, < 5.0) 131 | jekyll-optional-front-matter (0.3.2) 132 | jekyll (>= 3.0, < 5.0) 133 | jekyll-paginate (1.1.0) 134 | jekyll-readme-index (0.3.0) 135 | jekyll (>= 3.0, < 5.0) 136 | jekyll-redirect-from (0.16.0) 137 | jekyll (>= 3.3, < 5.0) 138 | jekyll-relative-links (0.6.1) 139 | jekyll (>= 3.3, < 5.0) 140 | jekyll-remote-theme (0.4.3) 141 | addressable (~> 2.0) 142 | jekyll (>= 3.5, < 5.0) 143 | jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0) 144 | rubyzip (>= 1.3.0, < 3.0) 145 | jekyll-sass-converter (1.5.2) 146 | sass (~> 3.4) 147 | jekyll-seo-tag (2.8.0) 148 | jekyll (>= 3.8, < 5.0) 149 | jekyll-sitemap (1.4.0) 150 | jekyll (>= 3.7, < 5.0) 151 | jekyll-swiss (1.0.0) 152 | jekyll-theme-architect (0.2.0) 153 | jekyll (> 3.5, < 5.0) 154 | jekyll-seo-tag (~> 2.0) 155 | jekyll-theme-cayman (0.2.0) 156 | jekyll (> 3.5, < 5.0) 157 | jekyll-seo-tag (~> 2.0) 158 | jekyll-theme-dinky (0.2.0) 159 | jekyll (> 3.5, < 5.0) 160 | jekyll-seo-tag (~> 2.0) 161 | jekyll-theme-hacker (0.2.0) 162 | jekyll (> 3.5, < 5.0) 163 | jekyll-seo-tag (~> 2.0) 164 | jekyll-theme-leap-day (0.2.0) 165 | jekyll (> 3.5, < 5.0) 166 | jekyll-seo-tag (~> 2.0) 167 | jekyll-theme-merlot (0.2.0) 168 | jekyll (> 3.5, < 5.0) 169 | jekyll-seo-tag (~> 2.0) 170 | jekyll-theme-midnight (0.2.0) 171 | jekyll (> 3.5, < 5.0) 172 | jekyll-seo-tag (~> 2.0) 173 | jekyll-theme-minimal (0.2.0) 174 | jekyll (> 3.5, < 5.0) 175 | jekyll-seo-tag (~> 2.0) 176 | jekyll-theme-modernist (0.2.0) 177 | jekyll (> 3.5, < 5.0) 178 | jekyll-seo-tag (~> 2.0) 179 | jekyll-theme-primer (0.6.0) 180 | jekyll (> 3.5, < 5.0) 181 | jekyll-github-metadata (~> 2.9) 182 | jekyll-seo-tag (~> 2.0) 183 | jekyll-theme-slate (0.2.0) 184 | jekyll (> 3.5, < 5.0) 185 | jekyll-seo-tag (~> 2.0) 186 | jekyll-theme-tactile (0.2.0) 187 | jekyll (> 3.5, < 5.0) 188 | jekyll-seo-tag (~> 2.0) 189 | jekyll-theme-time-machine (0.2.0) 190 | jekyll (> 3.5, < 5.0) 191 | jekyll-seo-tag (~> 2.0) 192 | jekyll-titles-from-headings (0.5.3) 193 | jekyll (>= 3.3, < 5.0) 194 | jekyll-watch (2.2.1) 195 | listen (~> 3.0) 196 | jemoji (0.12.0) 197 | gemoji (~> 3.0) 198 | html-pipeline (~> 2.2) 199 | jekyll (>= 3.0, < 5.0) 200 | kramdown (2.3.2) 201 | rexml 202 | kramdown-parser-gfm (1.1.0) 203 | kramdown (~> 2.0) 204 | liquid (4.0.3) 205 | listen (3.7.1) 206 | rb-fsevent (~> 0.10, >= 0.10.3) 207 | rb-inotify (~> 0.9, >= 0.9.10) 208 | mercenary (0.3.6) 209 | mini_portile2 (2.8.0) 210 | minima (2.5.1) 211 | jekyll (>= 3.5, < 5.0) 212 | jekyll-feed (~> 0.9) 213 | jekyll-seo-tag (~> 2.1) 214 | minitest (5.16.3) 215 | nokogiri (1.13.8) 216 | mini_portile2 (~> 2.8.0) 217 | racc (~> 1.4) 218 | octokit (4.25.1) 219 | faraday (>= 1, < 3) 220 | sawyer (~> 0.9) 221 | pathutil (0.16.2) 222 | forwardable-extended (~> 2.6) 223 | public_suffix (4.0.7) 224 | racc (1.6.0) 225 | rb-fsevent (0.11.2) 226 | rb-inotify (0.10.1) 227 | ffi (~> 1.0) 228 | rexml (3.2.5) 229 | rouge (3.26.0) 230 | ruby2_keywords (0.0.5) 231 | rubyzip (2.3.2) 232 | safe_yaml (1.0.5) 233 | sass (3.7.4) 234 | sass-listen (~> 4.0.0) 235 | sass-listen (4.0.0) 236 | rb-fsevent (~> 0.9, >= 0.9.4) 237 | rb-inotify (~> 0.9, >= 0.9.7) 238 | sawyer (0.9.2) 239 | addressable (>= 2.3.5) 240 | faraday (>= 0.17.3, < 3) 241 | simpleidn (0.2.1) 242 | unf (~> 0.1.4) 243 | terminal-table (1.8.0) 244 | unicode-display_width (~> 1.1, >= 1.1.1) 245 | thread_safe (0.3.6) 246 | typhoeus (1.4.0) 247 | ethon (>= 0.9.0) 248 | tzinfo (1.2.10) 249 | thread_safe (~> 0.1) 250 | unf (0.1.4) 251 | unf_ext 252 | unf_ext (0.0.8.2) 253 | unicode-display_width (1.8.0) 254 | zeitwerk (2.6.0) 255 | 256 | PLATFORMS 257 | ruby 258 | 259 | DEPENDENCIES 260 | github-pages (= 227) 261 | 262 | BUNDLED WITH 263 | 1.17.2 264 | -------------------------------------------------------------------------------- /_alphabet/a.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: a 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/b.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: b 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/c.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: c 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/d.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: d 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/e.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: e 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/f.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: f 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/g.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: g 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/h.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: h 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/i.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: i 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/j.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: j 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/k.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: k 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/l.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: l 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/m.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: m 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/n.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: n 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/o.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: o 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/p.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: p 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/q.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: q 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/r.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: r 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/s.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: s 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/t.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: t 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/u.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: u 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/v.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: v 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/w.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: w 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/x.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: x 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/y.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: y 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_alphabet/z.html: -------------------------------------------------------------------------------- 1 | --- 2 | letter: z 3 | --- 4 | 5 | {% include letter.html %} 6 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Simplified JavaScript Jargon 10 | description: > # this means to ignore newlines until "baseurl:" 11 | [Simplified JavaScript Jargon](https://github.com/KittyGiraudel/SJSJ) (short SJSJ) is a community-driven attempt 12 | at explaining the loads of buzzwords making the current JavaScript ecosystem 13 | in a few simple words. The idea is not to replace individual documentations, 14 | but to act as some kind of glossary that can be easily referenced. 15 | baseurl: "" # the subpath of your site, e.g. /blog 16 | url: "http://jargon.js.org" # the base hostname & protocol for your site 17 | 18 | # Build settings 19 | markdown: kramdown 20 | kramdown: 21 | input: GFM 22 | syntax_highlighter: rouge 23 | 24 | collections: 25 | glossary: 26 | output: true 27 | permalink: /_glossary/:path.md 28 | output_ext: md 29 | alphabet: 30 | output: true 31 | permalink: /_glossary/:path/ 32 | 33 | sass: 34 | sass_dir: assets/sass 35 | style: compressed 36 | 37 | exclude: 38 | - bin 39 | - Gemfile 40 | - Gemfile.lock 41 | - package.json 42 | - README.md 43 | - CNAME 44 | 45 | defaults: 46 | - 47 | scope: 48 | path: "" 49 | values: 50 | layout: default 51 | -------------------------------------------------------------------------------- /_data/abbr.yml: -------------------------------------------------------------------------------- 1 | Ajax: Asynchronous JavaScript and XML 2 | AMD: Asynchronous Module Definition 3 | API: Application Program Interface 4 | BDD: Behaviour Driven Development 5 | BEM: Block Element Modifier 6 | BSON: Binary Simple Object Model 7 | CSS: Cascading StyleSheets 8 | CSS3: Cascading StyleSheets 9 | CLI: Command Line Interface 10 | CORS: Cross Origin Resource sharing 11 | CPU: Central Processor Unit 12 | DOM: Document Object Model 13 | ES: ECMAScript 14 | ES5: ECMAScript 5 15 | ES6: ECMAScript 6 16 | HTML: HyperText Markup Language 17 | HTML5: HyperText Markup Language 18 | HTTP: Hypertext Transfer Protocol 19 | HTTP2: Hypertext Transfer Protocol 2 20 | IIFE: Immediately Invoked Function Expression 21 | JS: JavaScript 22 | JSON: JavaScript Object Notation 23 | JSON-LD: JSON for Linked Data 24 | MVC: Model View Controller 25 | MVVM: Model View ViewModel 26 | OO: Object Oriented 27 | REST: Representational State Transfer 28 | RESTful: Representational State Transfer 29 | rnpm: React Native Package Manager 30 | SVG: Scalable Vector Graphics 31 | TDD: Test Driven Development 32 | UI: User Interface 33 | UMD: Universal Module Definition 34 | URL: Uniform Resource Locator 35 | WebGL: Web Graphics Library 36 | XHR: XMLHttpRequest 37 | XML: Extensible Markup Language 38 | -------------------------------------------------------------------------------- /_glossary/AJAX.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ajax 3 | excerpt: a technology for asynchronous HTTP requests 4 | --- 5 | 6 | # Ajax 7 | 8 | [Ajax](https://developer.mozilla.org/en-US/docs/AJAX) is a technique for creating seamless interactive websites via asynchronous data exchange between client and server. Ajax facilitates communication with the server via partial page updates instead of the traditional full-page refresh. 9 | -------------------------------------------------------------------------------- /_glossary/AMD.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: AMD 3 | excerpt: a standard defining how to load JavaScript libraries or modules asynchronously 4 | --- 5 | 6 | # AMD 7 | 8 | [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) stands for Asynchronous Module Definition. It is an alternative to [CommonJS (CJS)](/_glossary/COMMONJS.md) specification. 9 | 10 | The API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems. 11 | 12 | AMD libraries expose a global `define` function whose footprint is 13 | 14 | ```js 15 | define(modulename?,[dependencyA?, dependencyB?, …], function (objectA, objectB, …) { 16 | ... 17 | var myExportedObj = function() { … } 18 | return myExportedObj; 19 | 20 | }); 21 | ``` 22 | 23 | Where 24 | 25 | - `modulename` is an optional string parameter to explicitly declare the id of the current module 26 | - `dependencyA`, `dependencyB` and so on, are the dependencies for the current module 27 | - `function(objectA, objectB) {...}` is a factory whose arguments are the exported objects of each dependency. 28 | - `myExportedObj` an optional return value (since a module might be just adding methods to an existing object) but, if declared, it would be this module’s exported object, which other modules would get if they list `modulename` among their dependencies. 29 | 30 | Aside from the global `define` function, an AMD compliant library must have a `define.amd` property whose value is an object. Checking for the existence of both `define` and `define.amd` in the global scope allows any script to verify it is being called from an AMD loader. 31 | 32 | Examples of libraries providing AMD loading capabilities are: 33 | 34 | - [RequireJS](/_glossary/REQUIREJS.md) written by Mozilla’s [James Burke](https://github.com/jrburke/). One of the first ones to become widely used and still the most popular. It provides a limited interoperability with [CommonJS](/_glossary/COMMONJS.md) modules too. 35 | - [CurlJS](https://github.com/cujojs/curl) part of the [CujoJS Framework](http://cujojs.com/). CurlJS is less popular than RequireJS and is receiving only maintenance updates, no new features since 2014. 36 | - [Alameda](https://github.com/requirejs/alameda) also made by James Burke, it’s like RequireJS but using promises to manage the completion events. 37 | - [Cajon](https://github.com/requirejs/cajon) also made by James Burke, it’s like a decorator for RequireJS that replaces the `load` method to fetch dependencies through [AJAX](/_glossary/AJAX.md) calls. 38 | - [SystemJS](https://github.com/systemjs/systemjs) by [Guy Bedford](https://github.com/guybedford) who, until a couple of years ago, was one of the most active plugin developers for RequireJS. SystemJS can load AMD, CommonJS and [ES6](/_glossary/ECMASCRIPT.md) modules seamlessly and is mostly used in combination with [jspm](http://jspm.io/), which acts as a dependency manager (not unlike [Bower](/_glossary/BOWER.md)) leveraging in Github and [npm](/_glossary/NPM.md). 39 | 40 | All these libraries allow for the developer to preview a project without any build step, requesting the dependencies asynchronously. There’s usually an optional (but reccomended) build or bundling step for production deploys, in order to minify the code and minimize the number of requests in order to enhance load times. Allegedly, the coming of [HTTP2](https://http2.github.io/) support in browsers and webservers should eliminate the need for extra requests when loading dependencies asynchronously, thus eliminating the need of a build step. 41 | 42 | Other libraries that can’t load dependencies asynchronously but can include AMD modules in their build workflow, are, for example: 43 | 44 | - [Webpack](/_glossary/WEBPACK.md) 45 | - [Rollup](http://rollupjs.org/) 46 | - [StealJS](http://stealjs.com/) 47 | -------------------------------------------------------------------------------- /_glossary/ANGULARJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: AngularJS 3 | excerpt: a structural framework for dynamic web apps 4 | --- 5 | 6 | # AngularJS 7 | 8 | [AngularJS](https://angularjs.org/) is a structural framework for dynamic web apps. It lets developers use HTML as their template language and lets them extend HTML’s syntax to express their application’s components clearly and succinctly. 9 | 10 | Angular’s data binding and dependency injection eliminate much of the code developers would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. 11 | -------------------------------------------------------------------------------- /_glossary/APACHECORDOVA.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Apache Cordova 3 | excerpt: a popular mobile application development framework originally created by Nitobi 4 | --- 5 | 6 | # PhoneGap 7 | 8 | [Apache Cordova](http://phonegap.com/) (formerly **PhoneGap**) is a popular mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open source version of the software called Apache Cordova. Apache Cordova enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via Web views instead of the platform’s native UI framework) nor purely Web-based (because they are not just Web apps, but are packaged as apps for distribution and have access to native device APIs). Mixing native and hybrid code snippets has been possible since version 1.9. 9 | 10 | The software was previously called just “PhoneGap”, then “Apache Callback”. As open-source software, Apache Cordova allows wrappers around it, such as Intel XDK or Appery.io. 11 | 12 | PhoneGap is Adobe’s productized version and ecosystem on top of Cordova. Like PhoneGap, many other tools and frameworks are also built on top of Cordova, including Ionic, the Intel XDK, Monaca, TACO, and the Telerik Platform. These tools use Cordova, and not PhoneGap for their core tools. 13 | 14 | Contributors to the Apache Cordova project include Adobe, IBM, Google, Microsoft, Intel, BlackBerry, Mozilla, and others. 15 | 16 | ## History 17 | 18 | First developed at an iPhoneDevCamp event in San Francisco, PhoneGap went on to win the People’s Choice Award at O’Reilly Media’s 2009 Web 2.0 Conference, and the framework has been used to develop many apps. Apple Inc. has confirmed that the framework has its approval, even with the new 4.0 developer license agreement changes. The PhoneGap framework is used by several mobile application platforms such as Asial’s Monaca, ViziApps, Worklight, Convertigo, and appMobi as the backbone of their mobile client development engine. 19 | 20 | Adobe officially announced the acquisition of Nitobi Software (the original developer) on October 4, 2011. Coincident with that, the PhoneGap code was contributed to the Apache Software Foundation to start a new project called Apache Cordova. The project’s original name, Apache Callback, was viewed as too generic. Then it also appears in Adobe Systems as Adobe PhoneGap and also as Adobe Phonegap Build. 21 | 22 | Early versions of PhoneGap required an Apple computer to create iOS apps and a Windows computer to create Windows Mobile apps. After September 2012, Adobe’s PhoneGap Build service allows programmers to upload HTML, CSS, and JavaScript source code to a “cloud compiler” that generates apps for every supported platform. 23 | 24 | ## Design and rationale 25 | 26 | The core of Apache Cordova applications use HTML5 and CSS3 for their rendering and JavaScript for their logic. HTML5 now provides access to underlying hardware such as the accelerometer, camera, and GPS. However, browser support for HTML5-based device access is not consistent across mobile browsers, particularly older versions of Android. To overcome these limitations, Apache Cordova embeds HTML5 code inside a native WebView on the device, using a foreign function interface to access the native resources of the device. 27 | 28 | Apache Cordova can be extended with native plug-ins that allow for developers to add functionality that can be called from JavaScript, allowing for direct communication between the native layer and the HTML5 page. Apache Cordova includes basic plugins that allow access to the device’s accelerometer, camera, microphone, compass, file system, and more. 29 | 30 | However, the use of Web-based technologies leads some Apache Cordova applications to run slower than native applications with similar functionality. Adobe Systems warns that applications may be rejected by Apple for being too slow or not feeling “native” enough (having appearance and functionality consistent with what users have come to expect on the platform). This can be an issue for some Apache Cordova applications. 31 | 32 | ## Supported platforms 33 | 34 | As of January 2016, Apache Cordova currently supports development for the operating systems Apple iOS, BlackBerry, Google Android, LG webOS, Microsoft Windows Phone (7 and 8), Nokia Symbian OS, Tizen (SDK 2.x), Bada, Firefox OS, and Ubuntu Touch. The table below is a list of supported features for each operating system. 35 | 36 | | Feature | iPhone | Android | Windows Phone | BlackBerry OS | Bada | Symbian | Tizen | 37 | | --- | --- | --- | --- | --- | --- | --- | --- | 38 | | Accelerometer | Yes | Yes | Yes | 5.0+ | Yes | Yes | Yes | 39 | | Camera | Yes | Yes | Yes | 5.0+ | Yes | Yes | Yes | 40 | | Compass | 3GS+ | Yes | Yes | 10+ | Yes | **N/A** | Yes | 41 | | Contacts | Yes | Yes | Yes | 5.0+ | Yes | Yes | Yes | 42 | | File | Yes | Yes | Yes | 5.0+ | Yes | **N/A** | Yes | 43 | | Geolocation | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 44 | | Media | Yes | Yes | Yes | 10+ | **N/A** | **N/A** | Yes | 45 | | Network | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 46 | | Notification | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 47 | | Storage | Yes | Yes | Yes | 5.0+ | **N/A** | Yes | Yes | 48 | 49 | ---------- 50 | 51 | *Source:* 52 | 53 | - [Apache Cordova](https://en.wikipedia.org/wiki/Apache_Cordova)*. From Wikipedia, the free encyclopedia* 54 | -------------------------------------------------------------------------------- /_glossary/ARITY.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Arity 3 | excerpt: the number of arguments of a function 4 | --- 5 | 6 | # Arity 7 | 8 | Arity (from Latin) is the term used to refer to the number of arguments or operands in a function or operation, respectively. You're most likely to come across this word in the realm of JavaScript when it’s used to mention the number of arguments expected by a JavaScript function. 9 | 10 | There’s even a property named [arity](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arity), of the `Function` object that returns the number of expected arguments in a function. It’s now obsolete though and replaced by `length`. 11 | 12 | As an example, the following function has an arity of 3. 13 | 14 | ```js 15 | function getName(first, middle, last) { 16 | return first + ' ' + middle + ' ' + last; 17 | } 18 | ``` 19 | 20 | Source: https://gist.github.com/nucliweb/8de961282f64095b1a57. 21 | -------------------------------------------------------------------------------- /_glossary/BABEL.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Babel 3 | excerpt: a JavaScript transformation toolkit which started as an ECMAScript 2015 / ES6 code translator (transpiler) 4 | --- 5 | 6 | # Babel 7 | 8 | [Babel](https://babeljs.io/) (formerly *6to5*) is essentially an [ECMAScript](/_glossary/ECMASCRIPT.md) 2015 (ES6) and beyond transpiler. It means that it is a program that translates future’s JavaScript into today’s widely understood (by browsers) JavaScript. The idea behind such a tool is to allow developers to write their code using ECMAScript’s new features while still making it work in current (and past) environments. 9 | 10 | As of [version 6](https://babeljs.io/blog/2015/10/29/6.0.0), Babel also intends to be a platform, a suite of tools designed to create the next generation of JavaScript tooling. This means Babel is also supposed to power minifiers, linters, formatters, syntax highlighters, code completion tools, type checkers, codemod tools, and every other tool to be using the same foundation to do their job better than ever before. 11 | -------------------------------------------------------------------------------- /_glossary/BACKBONE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Backbone 3 | excerpt: a structural framework for dynamic web apps 4 | --- 5 | 6 | # Backbone 7 | 8 | [Backbone.js](http://backbonejs.org/) is a framework giving structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to existing APIs over a RESTful [JSON](/_glossary/JSON.md) interface. 9 | -------------------------------------------------------------------------------- /_glossary/BEM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: BEM 3 | excerpt: a methodology and libraries developed and used at Yandex for building user interfaces 4 | --- 5 | 6 | # BEM 7 | 8 | [BEM](https://en.bem.info/) is a methodology and libraries developed and used at Yandex for building user interfaces. 9 | 10 | Key concepts of methodology 11 | 12 | * Block: logically and functionally independent page component, encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies 13 | * Element: a constituent part of a block that can’t be used outside of it (For example, a menu item) 14 | * Modifier: defines the appearance and behavior of a block or an element 15 | 16 | BEM methodology solves common frontend problems: 17 | 18 | 1. Component approach (splitting interface into blocks). 19 | 2. How to name things (in [code](https://en.bem.info/method/naming-convention/) and on [filesystem](https://en.bem.info/method/filesystem/)). 20 | 3. How to reuse components (for JS / CSS and all other techs) — for example you can take [bem-core](https://github.com/bem/bem-core) library (a collection of common blocks and solutions). 21 | 4. How to describe components behaviour — [i-bem.js](https://en.bem.info/technology/i-bem/) library that allows you describe a block logic in declarative style and keep it loosely coupled with others. 22 | 5. How to generate HTML — declarative template engine [bem-xjst](https://github.com/bem/bem-xjst) for server and browsers. 23 | 6. How to manage components dependencies and build project — [ENB](https://github.com/enb/enb) builder. 24 | -------------------------------------------------------------------------------- /_glossary/BLUEBIRD.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bluebird 3 | excerpt: a fully featured Promise library with focus on innovative features and performance 4 | --- 5 | 6 | # Bluebird 7 | 8 | [Bluebird](http://bluebirdjs.com/docs/getting-started.html) is a fully featured [promise](/_glossary/PROMISE.md) library with focus on innovative features and performance. It means that it is a tool that completes and reinforces the behavior of JavaScript promises. 9 | -------------------------------------------------------------------------------- /_glossary/BOWER.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bower 3 | excerpt: a package manager for front-end dependencies 4 | --- 5 | 6 | # Bower 7 | 8 | [Bower](http://bower.io/) is a package manager for front-end dependencies. It takes care of hunting, finding, downloading, saving these dependencies and keeping track of them in a manifest file called `bower.json`. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum. 9 | -------------------------------------------------------------------------------- /_glossary/BROCCOLI.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Broccoli 3 | excerpt: a fast and reliable asset pipeline 4 | --- 5 | 6 | # Broccoli 7 | 8 | [Broccoli](https://github.com/broccolijs/broccoli) is a fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions. Comparable to the [Rails](http://rubyonrails.org/) asset pipeline in scope, though it runs on [Node.js](/_glossary/NODEJS.md) and is backend-agnostic. 9 | -------------------------------------------------------------------------------- /_glossary/BROWSERIFY.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Browserify 3 | excerpt: a tool making possible to use the `require` function from Node.js within the browser 4 | --- 5 | 6 | # Browserify 7 | 8 | [Browserify](http://browserify.org/) is a tool that allows you to use the [require](https://nodejs.org/api/modules.html) [Node.js](/_glossary/NODEJS.md) function while working for the browser by bundling up all the required dependencies. 9 | 10 | The idea behind Browserify is to make it possible to use existing libraries from [npm](/_glossary/NPM.md) even when writing code for the client side. To allow this, it goes through the code, request the required dependencies, then create a single file containing everything: both the dependencies and the code using them. 11 | -------------------------------------------------------------------------------- /_glossary/BRUNCH.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Brunch 3 | excerpt: a tool focusing on the production of deployment-ready files from development files 4 | --- 5 | 6 | # Brunch 7 | 8 | [Brunch](http://brunch.io/) is a builder. Not a generic task runner, but a specialized tool focusing on the production of a small number of deployment-ready files from a large number of heterogenous development files or trees. 9 | 10 | Brunch is fundamentally specialized and geared towards building assets, these files that get used in the end by the runtime platform, usually a web browser. It thus comes pre-equipped with a number of behaviors and features such as concatenation, minification and watching of source files. 11 | -------------------------------------------------------------------------------- /_glossary/CANVAS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Canvas 3 | excerpt: an HTML element for graphic applications in 2D or 3D 4 | --- 5 | 6 | # Canvas 7 | 8 | The [Canvas HTML-Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) allows access to individual pixels to enable fast drawing applications. 9 | 10 | Its API gives access to [WebGL](/_glossary/WEBGL.md) for 3D graphics and to the [2D drawing API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D). 11 | -------------------------------------------------------------------------------- /_glossary/CHAI.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chai 3 | excerpt: an assertion library used with a JavaScript testing framework 4 | --- 5 | 6 | # Chai 7 | 8 | [Chai](http://chaijs.com/) is a Behavior Driven Development (BDD) / Test Driven Development (TDD) assertion library for [Node.js](/_glossary/NODEJS.md) and the browser. It can be paired with any JavaScript testing framework, such as [Mocha](/_glossary/MOCHA.md). 9 | 10 | The Chai assertion library allows you to write assertions in the classical form: `assert.typeOf(foo, 'string')`, but where Chai shines is its chain-capable style which makes writing assertions very readable: `expect(foo).to.be.a('string')`. 11 | -------------------------------------------------------------------------------- /_glossary/CHAKRA.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chakra 3 | excerpt: a JavaScript engine developed by Microsoft for its Edge browser which could also be used with Node.js instead of V8. 4 | --- 5 | 6 | # Chakra 7 | 8 | Chakra is a JavaScript engine that powers Microsoft Edge and Windows applications written in HTML/CSS/JS. 9 | 10 | Chakra is open-sourced as [ChakraCore](https://github.com/Microsoft/ChakraCore) and can [optionally be used with Node.js](https://github.com/nodejs/node-chakracore) instead of [V8](/_glossary/V8.md). 11 | -------------------------------------------------------------------------------- /_glossary/CLOSURE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Closure 3 | excerpt: a way of referencing variables from a child function while retaining their value even if it changes in the parent function 4 | --- 5 | 6 | # Closure 7 | 8 | A closure is function that closes over its environment. It has access to the state of the environment, but the variables inside the closure are private. 9 | 10 | Example: 11 | 12 | ```js 13 | (function (){ 14 | var scopeVar = 'Hello'; 15 | 16 | (function closure(){ 17 | var closureVar = ' World'; 18 | console.log(scopeVar + closureVar); 19 | })(); 20 | })(); 21 | ``` 22 | 23 | `scopeVar` is accessible inside the outer and the inner function, but `closureVar` is only accessible inside the inner function. 24 | -------------------------------------------------------------------------------- /_glossary/CLOSURE_COMPILER.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Closure Compiler 3 | excerpt: a JavaScript checker and optimizer 4 | --- 5 | 6 | # Closure Compiler 7 | 8 | The [Closure Compiler](https://developers.google.com/closure/compiler/) is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. 9 | 10 | ## Usage 11 | 12 | *Closure-compiler requires java to be installed and in the path.* 13 | 14 | The compiler package now includes build tool plugins for [Grunt](/_glossary/GRUNT.md) and [Gulp](/_glossary/GULP.md). 15 | 16 | ### Installation 17 | 18 | ```sh 19 | npm install --save google-closure-compiler 20 | ``` 21 | 22 | ### Configuration 23 | 24 | The compiler has a large number of flags. The best documentation for the flags can be found by running the `--help` command of the `compiler.jar` found inside the `node_modules/google-closure-compiler` folder: 25 | 26 | ```sh 27 | java -jar compiler.jar --help 28 | ``` 29 | 30 | ### Specifying Options 31 | 32 | Both the grunt and gulp tasks take options objects. The option parameters map directly to the compiler flags without the leading `--` characters. 33 | 34 | Values are either strings or booleans. Options which have multiple values can be arrays. 35 | 36 | ```js 37 | { 38 | js: ['/file-one.js', '/file-two.js'], 39 | compilation_level: 'ADVANCED', 40 | js_output_file: 'out.js', 41 | debug: true 42 | } 43 | ``` 44 | 45 | For advanced usages, the options may be specified as an array of strings. These values include the `--` characters and are directly passed to the compiler in the order specified: 46 | 47 | ```js 48 | [ 49 | '--js', '/file-one.js', 50 | '--js', '/file-two.js', 51 | '--compilation_level', 'ADVANCED', 52 | '--js_output_file', 'out.js', 53 | '--debug' 54 | ] 55 | ``` 56 | 57 | When an array of flags is passed, the input files should not be specified via the build tools, but rather as compilation flags directly. 58 | 59 | Some shells (particularly windows) try to do expansion on globs rather than passing the string on to the compiler. To prevent this it is necessary to quote certain arguments: 60 | 61 | ```js 62 | { 63 | js: '"my/quoted/glob/**.js"', 64 | compilation_level: 'ADVANCED', 65 | js_output_file: 'out.js', 66 | debug: true 67 | } 68 | ``` 69 | 70 | ## Using the Grunt Task 71 | 72 | Include the plugin in your `Gruntfile.js`: 73 | 74 | ```js 75 | require('google-closure-compiler').grunt(grunt); 76 | // The load-grunt-tasks plugin won’t automatically load closure-compiler 77 | ``` 78 | 79 | Task targets, files and options may be specified according to the grunt [Configuring tasks](http://gruntjs.com/configuring-tasks) guide. 80 | 81 | ### Basic Configuration Example: 82 | 83 | ```js 84 | require('google-closure-compiler').grunt(grunt); 85 | 86 | // Project configuration. 87 | grunt.initConfig({ 88 | 'closure-compiler': { 89 | my_target: { 90 | files: { 91 | 'dest/output.min.js': ['src/js/**/*.js'] 92 | }, 93 | options: { 94 | compilation_level: 'SIMPLE', 95 | language_in: 'ECMASCRIPT5_STRICT', 96 | create_source_map: 'dest/output.min.js.map', 97 | output_wrapper: '(function(){\n%output%\n}).call(this)\n//# sourceMappingURL=output.min.js.map' 98 | } 99 | } 100 | } 101 | }); 102 | ``` 103 | 104 | ## Using the Gulp Plugin 105 | 106 | The gulp plugin supports piping multiple files through the compiler. 107 | 108 | Options are a direct match to the compiler flags without the leading `--`. 109 | 110 | ### Basic Configuration Example: 111 | 112 | ```js 113 | var closureCompiler = require('google-closure-compiler').gulp(); 114 | 115 | gulp.task('js-compile', function () { 116 | return gulp.src('./src/js/**/*.js', { base: './' }) 117 | .pipe(closureCompiler({ 118 | compilation_level: 'SIMPLE', 119 | warning_level: 'VERBOSE', 120 | language_in: 'ECMASCRIPT6_STRICT', 121 | language_out: 'ECMASCRIPT5_STRICT', 122 | output_wrapper: '(function(){\n%output%\n}).call(this)', 123 | js_output_file: 'output.min.js' 124 | })) 125 | .pipe(gulp.dest('./dist/js')); 126 | }); 127 | ``` 128 | 129 | ---------- 130 | 131 | *Source:* 132 | 133 | - [Google Closure Compiler](https://github.com/google/closure-compiler)*. GitHub repo.* 134 | -------------------------------------------------------------------------------- /_glossary/COFFEESCRIPT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Coffeescript 3 | excerpt: a language that compiles into JavaScript 4 | --- 5 | 6 | # CoffeeScript 7 | 8 | [CoffeeScript](http://coffeescript.org/) is a little language that compiles into JavaScript. It is an attempt to expose the good parts of JavaScript in a simple way and friendly syntax, the golden rule being: “It’s just JavaScript”. 9 | 10 | The code compiles one-to-one into the equivalent JavaScript, and there is no interpretation at runtime. The compiled output is readable and pretty-printed, will work in every JavaScript runtime, and tends to run as fast or faster than the equivalent handwritten JavaScript. 11 | -------------------------------------------------------------------------------- /_glossary/COMMONJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CommonJS 3 | excerpt: a project with the goal of specifying an ecosystem for JavaScript outside the browser (for example, on the server or for native desktop applications) 4 | --- 5 | 6 | # CommonJS 7 | 8 | **CommonJS** is a project with the goal of specifying an ecosystem for JavaScript outside the browser (for example, on the server or for native desktop applications). 9 | 10 | Server side JavaScript has been around for a long time, and potentially offers some unique and interesting advantages over other languages because the same language is spoken by both client and server. 11 | 12 | Unfortunately, though, server side JavaScript is very fragmented. A script that accesses files can’t be used without modification on both rhino and [V8](/_glossary/V8.md). Spidermonkey and JavaScriptCore can’t both load in additional modules in the same way. A JavaScript web framework is very much tied to its interpreter and is often forced to create a bunch of APIs that Python, Ruby and Java programmers take for granted. 13 | 14 | The goal for this project is to create a standard library that will ultimately allow web developers to choose among any number of web frameworks and tools and run that code on the platform that makes the most sense for their application. 15 | 16 | ## History 17 | 18 | The project was started by Mozilla engineer Kevin Dangoor in January 2009 and initially named **ServerJS**. 19 | 20 | > What I’m describing here is not a technical problem. It’s a matter of people getting together and making a decision to step forward and start building up something bigger and cooler together. 21 | > — Kevin Dangoor 22 | 23 | In August 2009, the project was renamed **CommonJS** to show the broader applicability of the APIs. Specifications are created and approved in an open process. A specification is only considered final after it has been finished by multiple implementations. **CommonJS** is not affiliated with the [ECMA](/_glossary/ECMASCRIPT.md) International group TC39 working on ECMAScript, but some members of TC39 participate in the project. 24 | 25 | In May 2013, Isaac Z. Schlueter, the author of [npm](/_glossary/NPM.md), the package manager for [Node.js](/_glossary/NODEJS.md), said **CommonJS** is being made obsolete by Node.js, and is avoided by the core Node.js developers. 26 | 27 | ## Example usage 28 | 29 | As an example, `foo.js` loads the module `circle.js` in the same directory. 30 | 31 | The contents of `foo.js`: 32 | 33 | ```js 34 | const circle = require('./circle.js'); 35 | console.log(`The area of a circle of radius 4 is ${circle.area(4)}`); 36 | ``` 37 | 38 | The contents of `circle.js`: 39 | 40 | ```js 41 | const PI = Math.PI; 42 | 43 | exports.area = function (r) { 44 | return PI * r * r; 45 | }; 46 | 47 | exports.circumference = function (r) { 48 | return 2 * PI * r; 49 | }; 50 | ``` 51 | 52 | The module `circle.js` has exported the functions `area(..)` and `circumference(..)`. To add functions and objects to the root of your module, you can add them to the special `exports` object. 53 | 54 | Variables local to the module will be private, as though the module was wrapped in a function. In this example the variable `PI` is private to `circle.js`. 55 | 56 | If you want the root of your module’s export to be a function (such as a constructor) or if you want to export a complete object in one assignment instead of building it one property at a time, assign it to `module.exports` instead of `exports`. 57 | 58 | Below, `bar.js` makes use of the square module, which exports a constructor: 59 | 60 | ```js 61 | const square = require('./square.js'); 62 | var mySquare = square(2); 63 | console.log(`The area of my square is ${mySquare.area()}`); 64 | ``` 65 | 66 | The `square` module is defined in `square.js`: 67 | 68 | ```js 69 | // Assigning to exports will not modify module, must use module.exports 70 | module.exports = function (width) { 71 | return { 72 | area: function () { 73 | return (width * width); 74 | } 75 | }; 76 | } 77 | ``` 78 | 79 | The module system is implemented in the `require('module')` module. 80 | 81 | *This section was taken from [Node.js documentation site](https://nodejs.org/docs/latest/api/modules.html).* 82 | -------------------------------------------------------------------------------- /_glossary/CORS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CORS 3 | excerpt: a way for a server to make things accessible to pages hosted on other domains 4 | --- 5 | 6 | # CORS 7 | 8 | [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) stands for Cross Origin Resource sharing. It’s a way for a server to allow pages hosted on other domains (technically other origins) to make http requests to it. 9 | 10 | A web page can usually embed images, scripts, video, audio, etc. from any location it wants. However, web fonts and [AJAX](/_glossary/AJAX.md) requests can usually only make requests to the same origin the web page is served from, because of the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). CORS allows a server to mark [resources](https://en.wikipedia.org/wiki/Web_resource) as shared with other origins, by sending an `Access-Control-Allow-Origin` [header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) in response to an [OPTIONS](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.2) request from the browser. 11 | 12 | For information on how to set this up on your server, refer to [this document](http://enable-cors.org/server.html). 13 | -------------------------------------------------------------------------------- /_glossary/COUCHDB.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CouchDB 3 | excerpt: a NoSQL database with JavaScript as query language and HTTP as API 4 | --- 5 | 6 | # CouchDB 7 | 8 | [Apache CouchDB](http://couchdb.apache.org/), commonly referred to as CouchDB, is an open source database that focuses on ease of use and on being “a database that completely embraces the web”. 9 | 10 | It is a document-oriented NoSQL database that uses [JSON](/_glossary/JSON.md) to store data, JavaScript as its query language using MapReduce, and HTTP for an API. 11 | 12 | CouchDB was first released in 2005 and later became an Apache project in 2008. 13 | -------------------------------------------------------------------------------- /_glossary/CURRYING.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Currying 3 | excerpt: the process to transform a function with multiple parameters into a chain of functions of one parameter each 4 | --- 5 | 6 | # Currying 7 | 8 | Currying is the technique of translating the evaluation of a function that takes N arguments into evaluating a sequence of N functions, each with a single argument. 9 | 10 | This process is done by calling the function with one parameter, and return a new function with the parameter already bound inside a [closure](/_glossary/CLOSURE.md). 11 | 12 | For example, let’s say we have an `add` function that takes two parameters `a` and `b`: 13 | 14 | ```js 15 | // The native function definition would be to have a and b as parameters: 16 | add(3, 5) 17 | 18 | // After currying the function, we can then apply it like so: 19 | curryAdd(3)(5) 20 | ``` 21 | 22 | This is an interesting technique allowing to *partially call* a function, leaving the rest of the call for later. 23 | 24 | For instance, with our previous `curryAdd` function: 25 | 26 | ```js 27 | var add3 = curryAdd(3); 28 | var add10 = curryAdd(10); 29 | 30 | // Then we can call 31 | add3(5) // => 8 32 | add10(5) // => 15 33 | ``` 34 | 35 | [Lodash](/_glossary/LODASH.md), [Wu](https://fitzgen.github.io/wu.js/#curryable) and [Ramda](/_glossary/RAMDA.md) are 3 of the many libraries that provide currying. 36 | 37 | ## Currying with Javascript Libraries 38 | 39 | Most Javascript libraries don't stick to this pure definition of currying, and instead mix in a bit of partial application. What this means is that they allow you to call the curried functions with more than one argument at a time. As you give it arguments, it will continue returning new curried functions until you've given it all the arguments it expects, at which point it will apply them to the function. It's really auto-curried partial application. 40 | 41 | Thus, the following are equivalent: 42 | 43 | ```js 44 | foo(1)(2)(3)(4)(5); 45 | foo(1, 2, 3, 4, 5); 46 | foo(1)(2, 3, 4, 5); 47 | foo(1, 2)(3)(4, 5); 48 | ``` 49 | 50 | It's "syntactic sugar" that most libraries use, and for them the end result is the same as when you call `foo(1)(2)(3)(4)(5)`. 51 | -------------------------------------------------------------------------------- /_glossary/D3JS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: D3.js 3 | excerpt: a library for manipulating documents based on data 4 | --- 5 | 6 | # D3.js 7 | 8 | [D3.js](http://d3js.org/) is a library for manipulating documents based on data. D3 helps bringing data to life using HTML, SVG, and CSS. Its emphasis on web standards gives the full capabilities of modern browsers without tying to a proprietary framework, combining powerful visualization components and a data-driven approach to [DOM](/_glossary/DOM.md) manipulation. 9 | -------------------------------------------------------------------------------- /_glossary/DATE_FNS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: date-fns 3 | excerpt: a JavaScript date utility library. 4 | --- 5 | 6 | # date-fns 7 | 8 | [date-fns](https://date-fns.org/) is a JavaScript date utility library. It supports the manipulation, formatting and calculation of dates. 9 | 10 | The project currently supports more than 30 languages (https://date-fns.org/v1.29.0/docs/I18n). 11 | 12 | date-fns is also designed to be lightweight due to its function-per-file style, which allow developers to pick only the functions they require. This prevents the project from being bloated with redundant functions. 13 | -------------------------------------------------------------------------------- /_glossary/DOM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM 3 | excerpt: a platform- and language-neutral interface that allow programs and scripts to dynamically access and update the content, structure and style of documents 4 | --- 5 | 6 | # DOM 7 | 8 | [DOM](http://www.w3.org/DOM/) (for Document Object Model) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. 9 | -------------------------------------------------------------------------------- /_glossary/ECMASCRIPT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ECMAScript (ES) 3 | excerpt: the standardized specification of the scripting language used by JavaScript 4 | --- 5 | 6 | # ECMAScript (ES) 7 | 8 | [ECMAScript](http://www.ecmascript.org/) (shortened as *ES*) is the standardized specification of the scripting language used by JavaScript, as well as less known languages JScript and ActionScript. 9 | 10 | The versioning convention of ECMAScript has been the subject of hot debates. We often refer to ES5 (understood by most browsers), ES6 (the future of JavaScript) and even ES7 (the far future of JavaScript), but the official appellation for ES6 would actually be ES2015. The intention is to publish a version of the specification every year, making the language evolve quicker than ever. Still, most developers use ES5 and ES6 terms. 11 | -------------------------------------------------------------------------------- /_glossary/ELECTRON.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Electron 3 | excerpt: a framework based on Node.js lets you write cross-platform desktop applications using JS, HTML and CSS 4 | --- 5 | 6 | # Electron 7 | 8 | [Electron](https://github.com/atom/electron) is a framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium and is used in the Atom editor. 9 | -------------------------------------------------------------------------------- /_glossary/EMBER.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ember 3 | excerpt: an application framework based on the model-view-controller pattern 4 | --- 5 | 6 | # Ember 7 | 8 | [Ember](http://emberjs.com/) is an application framework based on the model-view-controller pattern. By incorporating common patterns and idioms into the framework it aims to allow developers to create ambitious web applications quickly and easily. A side-effect of these abilities (either negative or positive depending upon the readers point of view) is that a certain conformity of naming and structure within those applications is expected. 9 | 10 | A key aim of the Ember project is that backward compatibility is an important feature of the framework so that applications may be built with Ember in the knowledge that future releases of the framework will not break those applications. 11 | 12 | Ember relies upon the following [core concepts](https://guides.emberjs.com/v2.1.0/getting-started/core-concepts/): 13 | 14 | - **Templates**: Ember.js templates use [handlebars](http://handlebarsjs.com/) style syntax and are used to integrate data with pre-written HTML. 15 | - **Models**: In Ember.js models allow the objects which the web application makes use of to be persisted. 16 | - **Components**: Components are used to define the behavior of the user interface in Ember.js. By combining a template and some javascript a component works to produce a representation which is useful to the web application user. 17 | - **Routes**: A route loads a component, a template and, optionally, some models. The resulting HTML is then rendered to the user agent. 18 | - **The Router**: Maps a URL to a given route. 19 | -------------------------------------------------------------------------------- /_glossary/ENZYME.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Enzyme 3 | excerpt: a JavaScript Testing utility for React developed by AirBnB that makes it easier to assert, manipulate, and traverse React components’ output. 4 | --- 5 | 6 | # Enzyme 7 | 8 | [Enzyme](https://github.com/airbnb/enzyme) is a JavaScript Testing utility for React developed by AirBnB that makes it easier to assert, manipulate, and traverse React components’ output. 9 | -------------------------------------------------------------------------------- /_glossary/ESLINT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ESLint 3 | excerpt: a JavaScript code linter 4 | --- 5 | 6 | # ESLint 7 | 8 | [ESLint](http://eslint.org/) is the most recent out of the JavaScript linters out there. It was designed to be easily extensible, comes with a large number of custom rules, and is easy to install more in the form of plugins. It gives concise output, but includes the rule name by default so you always know which rules are causing the error messages. 9 | 10 | There are two very popular ready to use configuration for ESLint: [standard](https://github.com/feross/standard) (no semicolons) and [semistandard](https://github.com/Flet/semistandard). 11 | -------------------------------------------------------------------------------- /_glossary/EXPRESS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Express 3 | excerpt: a fast, un-opinionated, minimalist web framework for Node.js 4 | --- 5 | 6 | # Express 7 | 8 | [Express](http://expressjs.com/en/index.html) is a fast, un-opinionated, minimalist web framework for [Node.js](/_glossary/NODEJS.md). Express provides a thin layer of fundamental web application features, without obscuring Node.js features that developers already know and like. The myriad of HTTP utility methods and middleware provided by Express makes creating a robust API quick and easy. 9 | -------------------------------------------------------------------------------- /_glossary/EXTJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ext JS 3 | excerpt: a pure JavaScript application framework for building interactive cross platform web applications 4 | --- 5 | 6 | # Ext JS 7 | 8 | The most comprehensive JavaScript framework for building feature-rich cross-platform web applications targeting desktop, tablets, and smartphones. **Ext JS** leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers. 9 | 10 | ## Create feature-rich HTML5 applications using JavaScript 11 | 12 | [Sencha Ext JS](https://www.sencha.com/products/extjs/) is the most comprehensive MVC/MVVM JavaScript framework for building feature-rich cross-platform web applications targeting desktops, tablets, and smartphones. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers. 13 | 14 | Ext JS features hundreds of high-performance UI widgets that are meticulously designed to fit the needs of the simplest as well as the most complex web applications. Ext JS templates and layout manager give you full control over your display irrespective of devices and screen sizes. An advanced charting package allows you to visualize large quantities of data. The framework includes a robust data package that can consume data from any backend data source. Ext JS also offers several out-of-the-box themes, and complete theming support that lets you build applications that reflect your brand. It also includes an accessibility package (ARIA) to help with Section 508 compliance. 15 | 16 | ### High-Performance Customizable UI Widgets 17 | 18 | Sencha Ext JS provides the industry’s most comprehensive collection of high-performance, customizable UI widgets. These widgets include HTML5 grids, trees, lists, forms, menus, toolbars, panels, windows, and much more. If you don’t find a widget you are looking for, hundreds of user extensions are available from the Sencha community. 19 | 20 | ### Backend Agnostic Data Package 21 | 22 | The robust data package included in Sencha Ext JS decouples the UI widgets from the data layer. The data package allows client-side collections of data using highly functional models that offer features such as sorting and filtering. The data package is protocol agnostic, and can consume data from any backend source. It comes with session management capabilities that allow several client-side operations, minimizing round-trips to the server. 23 | 24 | ### Layout Manager and Responsive Configs 25 | 26 | Sencha Ext JS includes a flexible layout manager to help organize the display of data and content across multiple browsers, devices, and screen sizes. It helps you to control the display of components, even for the most complex user interfaces. Ext JS also provides a responsive config system that allows application components to adapt to specific device orientation (landscape or portrait) or available browser window size. 27 | 28 | ### Advanced Charting Package 29 | 30 | The Sencha Ext JS charting package allows you to visually represent data with a broad range of chart types — including line, bar, and pie charts. The charts use surfaces and sprites developed with a drawing package implemented using SVG, VML, and Canvas technologies. Browser variations are handled automatically so that the charts always display correctly. Ext JS charts also support touch gestures on mobile devices, thereby providing enhanced interactive features to the charts such as pan, zoom, and pinch. 31 | 32 | ### Easily Customizable Themes 33 | 34 | Sencha Ext JS widgets are available in multiple out-of-the-box themes such as Classic, Neptune, and Crisp. The themes are customizable to reflect a specific brand identity. Sencha Cmd exposes hundreds of variables used by Ext JS themes, which can be altered to design custom themes. A visual theme builder is also available in Sencha Architect that lets you customize the themes via a WYSIWYG editor. 35 | 36 | ### Accessibility Package (ARIA) for Section 508 compliance 37 | 38 | Sencha Ext JS ARIA Package makes it possible to add accessibility support to your applications by providing tools that developers need to achieve Section 508 Compliance. Using the ARIA package, developers can create apps that are usable for people who need assistive technologies such as screen readers to navigate the web. 39 | 40 | ### App Templates 41 | 42 | A variety of application templates come pre-installed to kickstart your app, instead of starting from a blank canvas. Templates are editable and completely customizable, and you can even create your own templates and reuse them for future projects. 43 | -------------------------------------------------------------------------------- /_glossary/FACADE_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Facade Pattern 3 | excerpt: a software design pattern commonly used with object-oriented programming. The name is by analogy to an architectural facade 4 | --- 5 | 6 | # Facade Pattern 7 | 8 | The [Facade Pattern](https://en.wikipedia.org/wiki/Facade_pattern) (**or façade pattern**) is a software design pattern commonly used with *object-oriented programming*. The name is by analogy to an architectural facade. 9 | 10 | A facade is an object that provides a simplified interface to a larger body of code, such as a class library. A facade can: 11 | 12 | - make a software library easier to use, understand and test, since the facade has convenient methods for common tasks; 13 | - make the library more readable, for the same reason; 14 | - reduce dependencies of outside code on the inner workings of a library, since most code uses the facade, thus allowing more flexibility in developing the system; 15 | - wrap a poorly designed collection of APIs with a single well-designed API. 16 | 17 | The Facade design pattern is often used when a system is very complex or difficult to understand because the system has a large number of interdependent classes or its source code is unavailable. This pattern hides the complexities of the larger system and provides a simpler interface to the client. It typically involves a single wrapper class which contains a set of members required by client. These members access the system on behalf of the facade client and hide the implementation details. 18 | 19 | ## Usage 20 | 21 | A Facade is used when an easier or simpler interface to an underlying object is desired. Alternatively, an [adapter](https://en.wikipedia.org/wiki/Adapter_pattern) can be used when the wrapper must respect a particular interface and must support polymorphic behavior. A [decorator](https://en.wikipedia.org/wiki/Decorator_pattern) makes it possible to add or alter behavior of an interface at run-time. 22 | 23 | | Pattern | Intent | 24 | |---|---| 25 | | Adapter | Converts one interface to another so that it matches what the client is expecting | 26 | | Decorator | Dynamically adds responsibility to the interface by wrapping the original code | 27 | | Facade | Provides a simplified interface | 28 | 29 | The facade pattern is typically used when: 30 | 31 | - a simple interface is required to access a complex system; 32 | - the abstractions and implementations of a subsystem are tightly coupled; 33 | - need an entry point to each level of layered software; or 34 | - a system is very complex or difficult to understand. 35 | 36 | ## Structure 37 | 38 | ![Example of Facade design pattern in UML](https://upload.wikimedia.org/wikipedia/en/5/57/Example_of_Facade_design_pattern_in_UML.png) 39 | 40 | **Facade**: The facade class abstracts Packages 1, 2, and 3 from the rest of the application. 41 | **Clients**: The objects are using the Facade Pattern to access resources from the Packages. 42 | 43 | ## Example 44 | 45 | This is an abstract example of how a client (“you”) interacts with a facade (the “computer”) to a complex system (internal computer parts, like CPU and HardDrive). 46 | 47 | ```js 48 | /* Complex parts */ 49 | 50 | class CPU { 51 | freeze() { /* code here */ } 52 | jump(position) { /* code here */ } 53 | execute() { /* code here */ } 54 | } 55 | 56 | class Memory { 57 | load(position, data) { /* code here */ } 58 | } 59 | 60 | class HardDrive { 61 | read(lba, size) { /* code here */ } 62 | } 63 | 64 | /* Facade */ 65 | 66 | class ComputerFacade { 67 | constructor() { 68 | this.processor = new CPU(); 69 | this.ram = new Memory(); 70 | this.hd = new HardDrive(); 71 | } 72 | 73 | start() { 74 | this.processor.freeze(); 75 | this.ram.load(this.BOOT_ADDRESS, this.hd.read(this.BOOT_SECTOR, this.SECTOR_SIZE)); 76 | this.processor.jump(this.BOOT_ADDRESS); 77 | this.processor.execute(); 78 | } 79 | } 80 | 81 | /* Client */ 82 | 83 | let computer = new ComputerFacade(); 84 | computer.start(); 85 | ``` 86 | 87 | *Source: [Facade pattern](https://en.wikipedia.org/wiki/Facade_pattern). Wikipedia®* 88 | -------------------------------------------------------------------------------- /_glossary/FACTORY_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Factory Pattern 3 | excerpt: a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created 4 | --- 5 | 6 | # Factory Pattern 7 | 8 | In class-based programming, the **factory method pattern** is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by creating objects by calling a factory method—either specified in an interface and implemented by child classes, or implemented in a base class and optionally overridden by derived classes—rather than by calling a constructor. 9 | 10 | ## Definition 11 | 12 | > Define an interface for creating an object, but let subclasses decide which class to instantiate. The Factory method lets a class defer instantiation it uses to subclasses. 13 | > — [Gang Of Four](https://en.wikipedia.org/wiki/Gang_of_Four_(software)) 14 | 15 | Creating an object often requires complex processes not appropriate to include within a composing object. The object’s creation may lead to a significant duplication of code, may require information not accessible to the composing object, may not provide a sufficient level of abstraction, or may otherwise not be part of the composing object’s concerns. The factory method design pattern handles these problems by defining a separate method for creating the objects, which subclasses can then override to specify the derived type of product that will be created. 16 | 17 | The factory method pattern may rely on inheritance, as object creation is delegated to subclasses that implement the factory method to create objects. 18 | 19 | ## Structure 20 | 21 | ![Factory Method Pattern](https://upload.wikimedia.org/wikipedia/ru/f/f0/FactoryMethodPattern.png) 22 | 23 | - **Product** 24 | - it defines the interface of objects created by the abstract; 25 | - **ConcreteProduct** 26 | - implements the `Product`; 27 | - **Creator** 28 | - Ii declares the factory method that returns an object of type `Product`. It may also include the implementation of this method as “*default*”; 29 | - it can cause a factory method to create an object of type `Product`; 30 | - **ConcreteCreator** 31 | - it overrides the factory method so that he created and returns an object of class `ConcreteProduct`. 32 | 33 | ## Example 34 | 35 | ```js 36 | class Product() { 37 | getName() { 38 | return null; 39 | } 40 | } 41 | 42 | class ConcreteProductA extends Product { 43 | getName() { 44 | return 'ConcreteProductA'; 45 | } 46 | } 47 | 48 | class ConcreteProductB extends Product { 49 | getName() { 50 | return 'ConcreteProductB'; 51 | } 52 | } 53 | 54 | class Creator() { 55 | factoryMethod() { 56 | return null; 57 | } 58 | } 59 | 60 | class ConcreteCreatorA extends Creator { 61 | factoryMethod() { 62 | return new ConcreteProductA(); 63 | } 64 | } 65 | 66 | class ConcreteCreatorB extends Creator { 67 | factoryMethod() { 68 | return new ConcreteProductB(); 69 | } 70 | } 71 | 72 | // An array of creators 73 | let creators = [new ConcreteCreatorA(), new ConcreteCreatorB()]; 74 | 75 | // Iterate over creators and create products 76 | for (let i = 0; i < creators.length; i++) { 77 | let product = creators[i].factoryMethod(); 78 | console.log(product.getName()); 79 | } 80 | ``` 81 | 82 | *Source: [Factory method pattern](https://en.wikipedia.org/wiki/Factory_method_pattern). Wikipedia®* 83 | -------------------------------------------------------------------------------- /_glossary/FALCOR.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Falcor 3 | excerpt: a JavaScript library for efficient data fetching 4 | --- 5 | 6 | # Falcor 7 | 8 | [Falcor](https://netflix.github.io/falcor/) is a JavaScript library for efficient data fetching. 9 | 10 | ### One Model Everywhere 11 | 12 | Falcor lets you represent all your remote data sources as a single domain model via a virtual [JSON](/_glossary/JSON.md) graph. You code the same way no matter where the data is, whether in memory on the client or over the network on the server. 13 | 14 | ### The Data is the API 15 | 16 | A JavaScript-like path syntax makes it easy to access as much or as little data as you want, when you want it. You retrieve your data using familiar JavaScript operations like get, set, and call. If you know your data, you know your API. 17 | 18 | ### Bind to the Cloud 19 | 20 | Falcor automatically traverses references in your graph and makes requests as needed. Falcor transparently handles all network communications, opportunistically batching and de-duping requests. 21 | 22 | ## Getting Started 23 | 24 | You can check out a working example server for a Netflix-like application [here](http://github.com/netflix/falcor-express-demo) right now. Alternately you can go through this barebones tutorial in which we use the Falcor Router to create a Virtual JSON resource. In this tutorial we will use Falcor’s express middleware to serve the Virtual JSON resource on an application server at the URL /model.json. We will also host a static web page on the same server which retrieves data from the Virtual JSON resource. 25 | 26 | ### Creating a Virtual JSON Resource 27 | 28 | In this example we will use the Falcor Router to build a Virtual JSON resource on an app server and host it at `/model.json`. The JSON resource will contain the following contents: 29 | 30 | ```json 31 | { 32 | "greeting": "Hello World" 33 | } 34 | ``` 35 | 36 | Normally Routers retrieve the data for their Virtual JSON resource from backend datastores or other web services on-demand. However in this simple tutorial the Router will simply return static data for a single key. 37 | 38 | First we create a folder for our application server. 39 | 40 | ```sh 41 | mkdir falcor-app-server 42 | cd falcor-app-server 43 | npm init 44 | ``` 45 | 46 | Now we install the falcor Router. 47 | 48 | ```sh 49 | npm install falcor-router --save 50 | ``` 51 | 52 | Then install express and falcor-express. Support for [restify](https://github.com/netflix/falcor-restify), and [Hapi](https://github.com/netflix/falcor-hapi) is also available. 53 | 54 | ```sh 55 | npm install express --save 56 | npm install falcor-express --save 57 | ``` 58 | 59 | Now we create an `index.js` file with the following contents: 60 | 61 | ```js 62 | // index.js 63 | var falcorExpress = require('falcor-express'); 64 | var Router = require('falcor-router'); 65 | var express = require('express'); 66 | var app = express(); 67 | 68 | app.use('/model.json', falcorExpress.dataSourceRoute(function (req, res) { 69 | // create a Virtual JSON resource with single key (“greeting”) 70 | return new Router([ 71 | { 72 | // match a request for the key “greeting” 73 | route: 'greeting', 74 | // respond with a PathValue with the value of “Hello World” 75 | get: function () { 76 | return { 77 | path: ['greeting'], 78 | value: 'Hello World' 79 | }; 80 | } 81 | } 82 | ]); 83 | })); 84 | 85 | // serve static files from current directory 86 | app.use(express.static(__dirname + '/')); 87 | 88 | var server = app.listen(3000); 89 | ``` 90 | 91 | Now we run the server, which will listen on port 3000 for requests for `/model.json`. 92 | 93 | ```sh 94 | node index.js 95 | ``` 96 | 97 | ### Retrieving Data from the Virtual JSON resource 98 | 99 | Now that we’ve built a simple virtual JSON document with a single read-only key “greeting”, we will create a test web page and retrieve this key from the server. 100 | 101 | Now create an index.html file with the following contents: 102 | 103 | ```html 104 | 105 | 106 | 107 | 108 | 109 | 121 | 122 | 123 | 124 | 125 | ``` 126 | 127 | Now visit http://localhost:3000/index.html and you should see the message retrieved from the server: 128 | 129 | ![“Hello world” demo from Falcor rendering in a browser](http://netflix.github.io/falcor/starter/helloworld.png) 130 | 131 | *This section was taken from [Falcor documentation site](http://netflix.github.io/falcor/).* 132 | -------------------------------------------------------------------------------- /_glossary/FLOW.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flow 3 | excerpt: a static type checker, designed to find type errors in JavaScript programs 4 | --- 5 | 6 | # Flow 7 | 8 | [Flow](http://flowtype.org/) is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs - such as silent type conversions, null dereferences and so on - often without requiring any changes to your code. It also adds type syntax to JavaScript, so that developers can express invariants about their code and have them maintained automatically. 9 | 10 | Flow’s type checking is **opt-in**: files are not type checked unless you ask it to. This means that you can gradually convert your JavaScript codebase to Flow while reaping incremental benefits. When you do opt-in a file, Flow tries to type check the code automatically by performing type inference, reporting errors without further manual guidance. This simple workflow is usually sufficient when your codebase is broken down into small files, each defining a module that exports a well-defined interface. However, for some files (e.g., monolithic libraries), the analysis Flow performs might turn out to be too imprecise, causing lots of spurious errors to be reported. In such cases, the developer can either try to manually guide Flow with type annotations, or switch to a [weaker mode](http://flowtype.org/docs/existing.html#weak-mode) with limited type inference to reduce noise. 11 | 12 | Flow’s type checking is **online**: it performs an initial analysis of all files in a code base, and then monitors those files for subsequent changes, type checking them and other dependencies piecemeal and proactively in the background. For the developer, this means that there are no perceptible compile-time delays; saving a bunch of files in an editor or rebasing a set of files in a repository automatically triggers type checking, storing the results in a persistent server, so that they are available instantaneously when queried. 13 | 14 | ## How does it work? 15 | 16 | Flow designed to find type errors in JavaScript programs: 17 | 18 | ```js 19 | /* @flow */ 20 | function foo(x) { 21 | return x * 10; 22 | } 23 | 24 | foo('Hello, world!'); 25 | ``` 26 | 27 | ```sh 28 | $> flow 29 | 30 | hello.js:5:5,19: string 31 | This type is incompatible with 32 | hello.js:3:10,15: number 33 | ``` 34 | 35 | Flow also lets you gradually evolve JavaScript code into typed code: 36 | 37 | ```js 38 | /* @flow */ 39 | function foo(x: string, y: number): string { 40 | return x.length * y; 41 | } 42 | 43 | foo('Hello', 42); 44 | ``` 45 | 46 | ```sh 47 | $> flow 48 | 49 | hello.js:3:10,21: number 50 | This type is incompatible with 51 | hello.js:2:37,42: string 52 | ``` 53 | 54 | Typed Flow code easily transforms down to regular JavaScript, so it runs anywhere. 55 | 56 | ## Why Flow? 57 | 58 | The goal of Flow is to find errors in JavaScript code with little programmer effort. Flow relies heavily on **type inference** to find type errors even when the program has not been annotated - it precisely tracks the types of variables as they flow through the program. 59 | 60 | At the same time, Flow is a **gradual** type system. Any parts of your program that are dynamic in nature can easily bypass the type checker, so you can mix statically typed code with dynamic code. 61 | 62 | Flow also supports a highly **expressive** type language. Flow types can express much more fine-grained distinctions than traditional type systems. For example, Flow helps you catch errors involving null, unlike most type systems. 63 | 64 | ## Using Flow 65 | 66 | Start with [Getting Started](http://flowtype.org/docs/getting-started.html) guide to download and try Flow yourself. Flow is open-source, so you can also start with the code on the [GitHub repo](https://github.com/facebook/flow). 67 | 68 | ---------- 69 | 70 | *Source:* 71 | 72 | - [Flow | A static type checker for JavaScript](http://flowtype.org/)*.* 73 | -------------------------------------------------------------------------------- /_glossary/FLUX.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flux 3 | excerpt: an application structure focusing on improved data flow 4 | --- 5 | 6 | # Flux 7 | 8 | [Flux](https://facebook.github.io/flux/) is an application structure that is developed and used at Facebook to complement [React](/_glossary/REACT.md)’s one-way data flow. With Flux, application state and logic are contained in stores. 9 | -------------------------------------------------------------------------------- /_glossary/FOUR.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Four 3 | excerpt: a framework to develop 3D content for the web 4 | --- 5 | 6 | # Four 7 | 8 | [Four](https://github.com/allotrop3/four) is a high level graphics API based on WebGL 1.0 for developing 3D content for the web. It lets you avoid the burden of repetition and complexity to speed up and simplify the development while exposing the flexibility of the [WebGL](/_glossary/WEBGL.md) API. 9 | 10 | Here are an [introduction](http://www.sitepoint.com/introducing-four-webgl-easier/) and a [demo](http://allotrop3.github.io/four/). 11 | -------------------------------------------------------------------------------- /_glossary/GRAPHQL.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GraphQL 3 | excerpt: a query language for APIs and a runtime for fulfilling those queries with your existing data. 4 | --- 5 | 6 | # GraphQL 7 | 8 | [GraphQL](https://graphql.org/) is a query language for APIs and a runtime for fulfilling those queries with your existing data. 9 | 10 | ## History 11 | 12 | GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015. 13 | 14 | ## Advantages 15 | 16 | 1. Ask for exactly what you need - no redundant data will be sent over. 17 | 2. Get multiple resources in a single HTTP Request - GraphQL queries are able to identify references between multiple resources. This optimizes the network performance of applications using GraphQL. 18 | 19 | ## Popular GraphQL Tools 20 | 21 | 1. [Apollo Client](https://www.apollographql.com/) 22 | -------------------------------------------------------------------------------- /_glossary/GRUNT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grunt 3 | excerpt: a task runner aiming at automating tedious and possibly complex tasks 4 | --- 5 | 6 | # Grunt 7 | 8 | [Grunt](http://gruntjs.com/) is a task runner aiming at automating tedious and possibly complex tasks. The idea behind Grunt (and its peer [Gulp](/_glossary/GULP.md)) is to define tasks that perform (usually file-based) actions. These tasks can then be run through the command line or as part of another build step. 9 | -------------------------------------------------------------------------------- /_glossary/GULP.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gulp 3 | excerpt: a task runner aiming at automating tedious and possibly complex tasks 4 | --- 5 | 6 | # Gulp 7 | 8 | [Gulp](http://gulpjs.com/) is a task runner aiming at automating tedious and possibly complex tasks. The idea behind Gulp (and its peer [Grunt](/_glossary/GRUNT.md)) is to define tasks that perform (usually file-based) actions. These tasks can then be run through the command line or as part of another build step. 9 | 10 | Gulp also owes its success to its very large ecosystem of plugins, making it easy to perform everyday’s tasks without having to write much code. 11 | -------------------------------------------------------------------------------- /_glossary/HAPI.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hapi 3 | excerpt: a Node JS framework for writing services and more 4 | --- 5 | 6 | # Hapi 7 | 8 | [Hapi](http://hapijs.com/) is a simple to use configuration-centric framework with built-in support for input validation, caching, authentication, and other essential facilities for building web and services applications. Hapi enables developers to focus on writing reusable application logic in a highly modular and prescriptive approach. 9 | -------------------------------------------------------------------------------- /_glossary/HOISTING.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hoisting 3 | excerpt: an action performed by the JavaScript interpreter that moves function and variable declarations to the top of their containing scope 4 | --- 5 | 6 | # Hoisting 7 | 8 | [“Hoisting”](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) is an action performed by the JavaScript interpreter that moves function declarations of the form `function foo() {}`, and variable declarations of the form `var foo;` to the top of their containing scope. During this process, only the actual declarations are moved; any value assignments are left in the place where they were written. 9 | -------------------------------------------------------------------------------- /_glossary/IIFE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: IIFE 3 | excerpt: a function that gets called immediately after declaration 4 | --- 5 | 6 | # IIFE 7 | 8 | IIFE (for *Immediately Invoked Function Expression*) is a function that gets called immediately after declaration. It is most often used to create a scoping context (a context in which all variables and function definitions are scoped). 9 | 10 | An IIFE can be written with the calling brackets (`()`) inside of the wrapping brackets: 11 | 12 | ```js 13 | (function foo () { 14 | // [body] 15 | }()); 16 | ``` 17 | 18 | Or with the calling brackets on the outside: 19 | 20 | ```js 21 | (function foo () { 22 | // [body] 23 | })(); 24 | ``` 25 | 26 | The examples above are both named IIFE’s (`foo`) but it is also quite common to write them anonymously (without a function name). 27 | -------------------------------------------------------------------------------- /_glossary/IONIC.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ionic 3 | excerpt: a HTML5 mobile framework to build beautiful hybrid native mobile applications using AngularJS and Cordova 4 | --- 5 | 6 | # Ionic 7 | 8 | [Ionic](http://ionicframework.com/) is a HTML5 mobile framework to build beautiful hybrid native mobile applications using AngularJS and Cordova. It comes accompanied with a powerful CLI to create, build, test and deploy your applications into any platform. The framework also offers live reloading features to apply live changes to the application. 9 | 10 | With the advent of Angular 2, the Ionic team have started working on [Ionic 2](http://ionic.io/2), which is a complete rewrite of Ionic. 11 | -------------------------------------------------------------------------------- /_glossary/ISOMORPHIC.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Isomorphic 3 | excerpt: an application is said to be isomorphic (universal) when its code can run both in the client and the server 4 | --- 5 | 6 | # Isomorphic 7 | 8 | An isomorphic (or [preferably](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) [universal](/_glossary/UNIVERSAL.md)) application is one whose code (in this case, JavaScript) can run both in the server and the client. 9 | 10 | The underlying idea is to allow the server to render and handle routing of an application for non-JavaScript users, while also making it fully working in the browser for fast interactions without involving traditional page reloads. 11 | 12 | In an isomorphic application, the initial request made by the web browser is processed by the server while subsequent requests are processed by the client. 13 | -------------------------------------------------------------------------------- /_glossary/JASMINE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jasmine 3 | excerpt: a testing framework for BDD (Behaviour-Driven Development) 4 | --- 5 | 6 | # Jasmine 7 | 8 | [Jasmine](http://jasmine.github.io/) is a BDD framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. 9 | 10 | Jasmine is developed by [Pivotal Labs](http://pivotal.io/labs), and has many features like [Spies](http://jasmine.github.io/2.0/introduction.html#section-Spies) built in. 11 | 12 | It also has support for mocking [AJAX](http://jasmine.github.io/2.0/ajax.html). 13 | -------------------------------------------------------------------------------- /_glossary/JEST.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Jest 3 | excerpt: A unit testing framework 4 | --- 5 | 6 | # Jest 7 | 8 | [Jest](https://facebook.github.io/jest/) is a unit testing framework. 9 | 10 | * **Easy setup**: Complete and easy to set-up JavaScript testing solution. Works out of the box for any React project. 11 | * **Instant feedback**: Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly. 12 | * **Snapshot testing**: Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time. 13 | 14 | ## Philosophies 15 | 16 | One of Jest’s philosophies is to provide an integrated “zero-configuration” experience. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in more stable and healthy codebases. 17 | -------------------------------------------------------------------------------- /_glossary/JQUERY.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: jQuery 3 | excerpt: a fast, small, and feature-rich client-side library 4 | --- 5 | 6 | # jQuery 7 | 8 | [jQuery](https://jquery.com/) is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and [AJAX](/_glossary/AJAX.md) much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 9 | -------------------------------------------------------------------------------- /_glossary/JSCS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSCS 3 | excerpt: a JavaScript code linter 4 | --- 5 | 6 | # JSCS 7 | 8 | [JSCS — JavaScript Code Style](http://jscs.info/) is different from the others in that it doesn’t do anything unless you give it a configuration file or tell it to use a preset. You can download configurations from their website, so it’s not a big problem, and it has a number of presets, such as the [jQuery](/_glossary/JQUERY.md) coding style preset and the Google preset. JSCS is a code style checker. This means it only catches issues related to code formatting, and not potential bugs or errors. 9 | -------------------------------------------------------------------------------- /_glossary/JSHINT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSHint 3 | excerpt: a JavaScript code linter 4 | --- 5 | 6 | # JSHint 7 | 8 | [JSHint](http://jshint.com/) was created as a more configurable version of [JSLint](/_glossary/JSLINT.md) (of which it is a fork). You can configure every rule, and put them into a configuration file, which makes JSHint easy to use in bigger projects. JSHint also has good documentation for each of the rules, so you know exactly what they do. 9 | -------------------------------------------------------------------------------- /_glossary/JSLINT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSLint 3 | excerpt: a JavaScript code linter 4 | --- 5 | 6 | # JSLint 7 | 8 | [JSLint](http://www.jslint.com/) is a static analysis “code quality” tool for JavaScript.The downsides are that JSLint is not configurable or extensible. You can’t disable many features at all, and some of them lack documentation. 9 | -------------------------------------------------------------------------------- /_glossary/JSON-LD.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSON-LD 3 | excerpt: JSON for Linked Data 4 | --- 5 | 6 | # JSON-LD 7 | 8 | [JSON-LD (JSON for Linked Data)](http://json-ld.org/) is a lightweight Linked Data format. It is easy for humans to read and write. It is based on the already successful JSON format and provides a way to help [JSON](/_glossary/JSON.md) data interoperate at Web-scale. JSON-LD is an ideal data format for programming environments, REST Web services, and unstructured databases such as [CouchDB](/_glossary/COUCHDB.md) and [MongoDB](/_glossary/MONGODB.md). 9 | -------------------------------------------------------------------------------- /_glossary/JSON.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSON 3 | excerpt: a lightweight data-interchange format 4 | --- 5 | 6 | # JSON 7 | 8 | [JSON (JavaScript Object Notation)](http://www.json.org/) is a lightweight data-interchange format. It is widely used in [RESTful](https://en.wikipedia.org/wiki/Representational_state_transfer) web services. It is both easy for humans to read and write and for machines to parse and generate. 9 | -------------------------------------------------------------------------------- /_glossary/JSPM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSPM 3 | excerpt: like npm with its own build system and multiple resources management 4 | --- 5 | 6 | # JSPM 7 | 8 | [JSPM](http://jspm.io/) is a package manager coupled with its own build system. Thus, any kind of module can be loaded (e.g ES6, AMD, CommonJS) within the current installed modules. Those modules can be loaded from [npm](/_glossary/npm.md), as well as Github, Bitbucket or Bower. JSPM creates its own dependencies folder in the project directory, called `jspm_packages`, instead of the regular `node_modules` folder. 9 | 10 | ## Usage 11 | 12 | - `npm install -g jspm`: Install the JSPM CLI. 13 | - `jspm init`: Initialize the current project with JSPM. 14 | - `jspm install lodash`: Install packages, just like NPM. 15 | - `jspm install github:lodash/lodash@4.6.1`: Install the specified. version from Github. 16 | - `jspm bundle app/main --inject`: Bundle the app, just like [Browserify](http://browserify.org/). 17 | 18 | See the [JSPM documentation](http://jspm.io/docs/) for further details. 19 | -------------------------------------------------------------------------------- /_glossary/JSX.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JSX 3 | excerpt: an XML-like syntax extension to JavaScript 4 | --- 5 | 6 | # JSX 7 | 8 | [JSX](https://facebook.github.io/jsx/) is an XML-like syntax extension to JavaScript. It allows developers to write HTML directly in JS but needs to be transpiled before it can be used in the browser. JSX is developed at Facebook and mostly used to complement [React](/_glossary/REACT.md). 9 | -------------------------------------------------------------------------------- /_glossary/KNOCKOUT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Knockout 3 | excerpt: a library that helps developers creating user interfaces with a clean underlying data model 4 | --- 5 | 6 | # Knockout 7 | 8 | [Knockout](http://knockoutjs.com/) (shortened as *KO*) is a JavaScript library that helps developers creating rich, responsive display and editor user interfaces with a clean underlying data model. Knockout helps implementing sections of UI that update dynamically (e.g. changes depending on user’s actions or when external data source gets updated) more simply and maintainably. 9 | -------------------------------------------------------------------------------- /_glossary/LOCALFORAGE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: LocalForage 3 | excerpt: a fast and simple storage library for JavaScript 4 | --- 5 | 6 | # localForage 7 | 8 | **Offline storage, improved.** 9 | 10 | [localForage](https://mozilla.github.io/localForage/#localforage) is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, `localStorage`-like API. It allows developers to store many types of data instead of just strings. 11 | 12 | localForage includes a localStorage-backed fallback store for browsers with no IndexedDB or WebSQL support. Asynchronous storage is available in the current versions of all major browsers: Chrome, Firefox, Internet Explorer, and Safari (including Safari Mobile). 13 | 14 | **localForage offers a callback API as well as support for the** [ES6 Promises API](/_glossary/PROMISE.md), so you can use whichever you prefer. 15 | 16 | ## Installation 17 | 18 | To use localForage, [download the latest release](https://github.com/mozilla/localForage/releases) or install with npm: 19 | 20 | ```sh 21 | npm install localforage 22 | ``` 23 | 24 | or bower: 25 | 26 | ```sh 27 | bower install localforage 28 | ``` 29 | 30 | Then simply include the JS file and start using localForage: 31 | 32 | ```html 33 | . 34 | ``` 35 | 36 | You don’t need to run any init method or wait for any `onready` events. 37 | 38 | ## How to use localForage 39 | 40 | ### Callbacks 41 | 42 | Because localForage uses async storage, it has an async API. It’s otherwise exactly the same as the [localStorage API](https://hacks.mozilla.org/2009/06/localstorage/). 43 | 44 | ```js 45 | // In localStorage, we would do: 46 | var obj = { value: 'hello world' }; 47 | localStorage.setItem('key', JSON.stringify(obj)); 48 | alert(obj.value); 49 | 50 | // With localForage, we use callbacks: 51 | localforage.setItem('key', obj, function(err, result) { 52 | alert(result.value); 53 | }); 54 | ``` 55 | 56 | Similarly, please don’t expect a return value from calls to `localforage.getItem()`. Instead, use a callback: 57 | 58 | ```js 59 | // Synchronous; slower! 60 | var value = JSON.parse(localStorage.getItem('key')); 61 | alert(value); 62 | 63 | // Async, fast, and non-blocking! 64 | localforage.getItem('key', function(err, value) { alert(value) }); 65 | ``` 66 | 67 | Callbacks in localForage are Node-style (error argument first) since version `0.9.3`. This means if you’re using callbacks, your code should look like this: 68 | 69 | ```js 70 | // Use err as your first argument. 71 | localforage.getItem('key', function(err, value) { 72 | if (err) { 73 | console.error('Oh noes!'); 74 | } else { 75 | alert(value); 76 | } 77 | }); 78 | ``` 79 | 80 | You can store any type in localForage; you aren’t limited to strings like in localStorage. Even if localStorage is your storage backend, localForage automatically does `JSON.parse()` and `JSON.stringify()` when getting/setting values. 81 | 82 | ### Promises 83 | 84 | Promises are pretty cool! If you’d rather use promises than callbacks, localForage supports that too: 85 | 86 | ```js 87 | function doSomethingElse(value) { 88 | console.log(value); 89 | } 90 | 91 | // With localForage, we allow promises: 92 | localforage.setItem('key', 'value').then(doSomethingElse); 93 | ``` 94 | 95 | When using Promises, `err` is **not** the first argument passed to a function. Instead, you handle an error with the rejection part of the Promise: 96 | 97 | ```js 98 | // A full setItem() call with Promises. 99 | localforage.setItem('key', 'value').then(function(value) { 100 | alert(value + ' was set!'); 101 | }, function(error) { 102 | console.error(error); 103 | }); 104 | ``` 105 | 106 | localForage relies on native [ES6 Promises](/_glossary/PROMISE.md), but [ships with an awesome polyfill](https://github.com/jakearchibald/es6-promise) for browsers that don’t support ES6 Promises yet. 107 | 108 | ### Storing Blobs, TypedArrays, and other JS objects 109 | 110 | localForage supports storing all native JS objects that can be serialized to JSON, as well as ArrayBuffers, Blobs, and TypedArrays. Check the [API docs](https://mozilla.github.io/localForage/#setitem) for a full list of types supported by localForage. 111 | 112 | All types are supported in every storage backend, though storage limits in localStorage make storing many large Blobs impossible. 113 | 114 | ### Configuration 115 | 116 | You can set database information with the `config()` method. Available options are `driver`, `name`, `storeName`, `version`, `size`, and `description`. 117 | 118 | Example: 119 | 120 | ```js 121 | localforage.config({ 122 | driver : localforage.WEBSQL, // Force WebSQL; same as using setDriver() 123 | name : 'myApp', 124 | version : 1.0, 125 | size : 4980736, // Size of database, in bytes. WebSQL-only for now. 126 | storeName : 'keyvaluepairs', // Should be alphanumeric, with underscores. 127 | description : 'some description' 128 | }); 129 | ``` 130 | 131 | **Note**: you must call `config()` before you interact with your data. This means calling `config()` before using `getItem()`, `setItem()`, `removeItem()`, `clear()`, `key()`, `keys()` or `length()`. 132 | 133 | ### Multiple instances 134 | 135 | You can create multiple instances of localForage that point to different stores using `createInstance`. All the configuration options used by [`config`](https://github.com/mozilla/localForage#configuration) are supported. 136 | 137 | ```js 138 | var store = localforage.createInstance({ 139 | name: 'nameHere' 140 | }); 141 | 142 | var otherStore = localforage.createInstance({ 143 | name: 'otherName' 144 | }); 145 | 146 | // Setting the key on one of these doesn’t affect the other. 147 | store.setItem('key', 'value'); 148 | otherStore.setItem('key', 'value2'); 149 | ``` 150 | 151 | ### RequireJS 152 | 153 | You can use localForage with [RequireJS](/_glossary/REQUIREJS.md): 154 | 155 | ```js 156 | define(['localforage'], function(localforage) { 157 | // As a callback: 158 | localforage.setItem('mykey', 'myvalue', console.log); 159 | 160 | // With a Promise: 161 | localforage.setItem('mykey', 'myvalue').then(console.log); 162 | }); 163 | ``` 164 | 165 | ### Browserify and Webpack 166 | 167 | localForage 1.3+ works with both Browserify and Webpack. If you’re using an earlier version of localForage and are having issues with Browserify or Webpack, please upgrade to 1.3.0 or above. 168 | 169 | If you’re using localForage in your own build system (e.g. browserify or webpack) make sure you have the [required plugins and transformers](https://github.com/mozilla/localForage/blob/master/package.json#L24) installed (e.g. `$ npm install --save-dev babel-plugin-system-import-transformer`). 170 | 171 | ### Framework Support 172 | 173 | If you use a framework listed, there’s a localForage storage driver for the models in your framework so you can store data offline with localForage. We have drivers for the following frameworks: 174 | 175 | - [AngularJS](https://github.com/ocombe/angular-localForage) 176 | - [Backbone](https://github.com/mozilla/localForage-backbone) 177 | - [Ember](https://github.com/genkgo/ember-localforage-adapter) 178 | 179 | ### Custom Drivers 180 | 181 | You can create your own driver if you want; see the [`defineDriver`](https://mozilla.github.io/localForage/#definedriver) API docs. 182 | 183 | There is a [list of custom drivers on the wiki](https://github.com/mozilla/localForage/wiki/Custom-Drivers). 184 | 185 | ---------- 186 | 187 | *Source:* 188 | 189 | - [mozilla/localForage](https://github.com/mozilla/localForage)*. Official GitHub repo.* 190 | - [localForage API Reference](https://mozilla.github.io/localForage/)*.* 191 | -------------------------------------------------------------------------------- /_glossary/LODASH.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lodash 3 | excerpt: an utility toolkit to extend JavaScript primitive types 4 | --- 5 | 6 | # Lodash 7 | 8 | [Lodash](https://lodash.com) is a small [modularized](https://www.npmjs.com/browse/keyword/lodash-modularized) library which provides a bunch of helpers to work with Javascript data types (string, object, etc.) in a much more simpler way. Every single helper can be required and used itself without requiring the whole library. Additionally, it makes Javascript code look elegant and more efficient by offering functional style, method chaining and [more](https://lodash.com/#features). 9 | 10 | Think of Lodash as an utility library to simplify Javascript development by providing functions for Javascript basic types, such as: 11 | 12 | - Array manipulations: `map`, `reduce`, `filter`, `merge`, `difference`… 13 | - String transformations: `capitalize`, `camelCase`, `truncate`, `template`… 14 | - Collection querying: `find`, `where`, `contains`, `any`, `all`… 15 | - Object manipulations: `pick`, `omit`, `forIn`, `pluck`… 16 | - Property getters and setters: `property`, `method`, `get`, `set`… 17 | - Functional programing utilities: `partial`, `curry`, `compose`, `debounce`… 18 | 19 | It also provides an API for chaining function calls in a “pipe-like” flavor: 20 | 21 | ```js 22 | _.chain(myArray) 23 | .map(x => x * 3) 24 | .filter(x => x % 2) 25 | .sum() 26 | .value() 27 | // returns the sum of myArray after multiplying all elements by 3 and rejecting the odd numbers 28 | ``` 29 | 30 | It may be seen as alternative of [Underscore](/_glossary/UNDERSCORE.md). 31 | -------------------------------------------------------------------------------- /_glossary/MEAN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MEAN 3 | excerpt: the technology stack MongoDB, ExpressJS, AngularJS, and Node.js (MEAN) 4 | --- 5 | 6 | # MEAN 7 | 8 | [MEAN](https://en.wikipedia.org/wiki/MEAN_(software_bundle)) is a software technology stack based on JavaScript for building web sites and web applications, and comprised of the following components: [MongoDB](/_glossary/MONGODB.md), [ExpressJS](/_glossary/EXPRESS.md), [Node.js](/_glossary/NODEJS.md), and [AngularJS](/_glossary/ANGULARJS.md). 9 | 10 | ## Notable MEAN frameworks 11 | 12 | * [MEAN.JS](http://meanjs.org) MEAN.JS - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js From Creators of MEAN.IO. 13 | * [MEAN.io](http://mean.io/) MEAN is an opinionated full-stack javascript framework - which simplifies and accelerates web application development. 14 | -------------------------------------------------------------------------------- /_glossary/MEDIATOR_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mediator Pattern 3 | excerpt: an object that encapsulates how a set of objects interact 4 | --- 5 | 6 | # Mediator Pattern 7 | 8 | In software engineering, the [mediator pattern](https://en.wikipedia.org/wiki/Mediator_pattern) defines an object that encapsulates how a set of objects interact. This pattern is considered to be a behavioral pattern due to the way it can alter the program’s running behavior. 9 | 10 | Usually a program is made up of a large number of classes. So the logic and computation is distributed among these classes. However, as more classes are developed in a program, especially during maintenance and/or refactoring, the problem of communication between these classes may become more complex. This makes the program harder to read and maintain. Furthermore, it can become difficult to change the program, since any change may affect code in several other classes. 11 | 12 | With the **mediator pattern**, communication between objects is encapsulated with a **mediator** object. Objects no longer communicate directly with each other, but instead communicate through the mediator. This reduces the dependencies between communicating objects, thereby lowering the coupling. 13 | 14 | ## Definition 15 | 16 | The essence of the Mediator Pattern is to “define an object that encapsulates how a set of objects interact.” It promotes loose coupling by keeping objects from referring to each other explicitly, and it allows their interaction to be varied independently. Client classes can use the mediator to send messages to other clients, and can receive messages from other clients via an event on the mediator class. 17 | 18 | ## Structure 19 | 20 | ![Mediator Pattern structure](http://www.dofactory.com/images/diagrams/javascript/javascript-mediator.jpg) 21 | 22 | The objects participating in this pattern are: 23 | 24 | - **Mediator** - In sample code: `Chatroom` 25 | - defines an interface for communicating with `Colleague` objects 26 | - maintains references to `Colleague` objects 27 | - manages central control over operations 28 | - **Colleagues** - In sample code: `Participants` 29 | - objects that are being mediated by the `Mediator` 30 | - each instance maintains a reference to the `Mediator` 31 | 32 | ## Example 33 | 34 | In the example code we have four participants that are joining in a chat session by registering with a Chatroom (the Mediator). Each participant is represented by a Participant object. Participants send messages to each other and the Chatroom handles the routing. 35 | 36 | This example is simple, but other complex rules could have been added, such as a “junk filter” to protect participants from receiving junk messages. 37 | 38 | The log function is a helper which collects and displays results. 39 | 40 | ```js 41 | class Participant { 42 | constructor(name) { 43 | this.name = name; 44 | this.chatroom = null; 45 | } 46 | 47 | send(message, to) { 48 | this.chatroom.send(message, this, to); 49 | } 50 | 51 | receive(message, from) { 52 | log.add(from.name + " to " + this.name + ": " + message); 53 | } 54 | } 55 | 56 | let Chatroom = function() { 57 | let participants = {}; 58 | 59 | return { 60 | register: function(participant) { 61 | participants[participant.name] = participant; 62 | participant.chatroom = this; 63 | }, 64 | 65 | send: function(message, from, to) { 66 | if (to) { // single message 67 | to.receive(message, from); 68 | } else { // broadcast message 69 | for (let key in participants) { 70 | if (participants[key] !== from) { 71 | participants[key].receive(message, from); 72 | } 73 | } 74 | } 75 | } 76 | }; 77 | }; 78 | 79 | // log helper 80 | log = (function() { 81 | let log = ''; 82 | 83 | return { 84 | add: msg => { log += msg + '\n'; }, 85 | show: () => { alert(log); log = ''; } 86 | } 87 | })(); 88 | 89 | function run() { 90 | let yoko = new Participant('Yoko'), 91 | john = new Participant('John'), 92 | paul = new Participant('Paul'), 93 | ringo = new Participant('Ringo'), 94 | chatroom = new Chatroom(), 95 | 96 | chatroom.register(yoko); 97 | chatroom.register(john); 98 | chatroom.register(paul); 99 | chatroom.register(ringo); 100 | 101 | yoko.send('All you need is love.'); 102 | yoko.send('I love you John.'); 103 | john.send('Hey, no need to broadcast', yoko); 104 | paul.send('Ha, I heard that!'); 105 | ringo.send('Paul, what do you think?', paul); 106 | 107 | log.show(); 108 | } 109 | 110 | run(); 111 | ``` 112 | 113 | ---------- 114 | 115 | *Source:* 116 | 117 | - [Mediator pattern](https://en.wikipedia.org/wiki/Mediator_pattern)*. From Wikipedia, the free encyclopedia.* 118 | - [Mediator](http://www.dofactory.com/javascript/mediator-design-pattern)*. Mediator JavaScript Design Pattern with examples.* 119 | -------------------------------------------------------------------------------- /_glossary/MEMOIZE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Memoize 3 | excerpt: an optimization used to speed up consecutive function calls by caching the result of calls with identical input 4 | --- 5 | 6 | # Memoize 7 | 8 | An optimization used to speed up consecutive function calls by caching the result of calls with identical input. 9 | 10 | Here is an example of a memoizer function, taken from the book **JavaScript The Good Parts** by Douglas Crockford, 11 | that caches the results from a fibonacci number generator function: 12 | 13 | ```js 14 | var memoizer = function (memo, formula) { 15 | var recur = function (n) { 16 | var result = memo[n]; 17 | if (typeof result !== 'number') { 18 | result = formula(recur, n); 19 | memo[n] = result; 20 | } 21 | return result; 22 | }; 23 | return recur; 24 | }; 25 | 26 | var fibonacci = memoizer([0, 1], function (recur, n) { 27 | return recur(n − 1) + recur(n − 2); 28 | }); 29 | ``` 30 | 31 | ## References 32 | 33 | * [Faster JavaScript Memoization For Improved Application Performance](https://addyosmani.com/blog/faster-javascript-memoization/), by Addy Osmani. 34 | * [Implementing Memoization in JavaScript](http://www.sitepoint.com/implementing-memoization-in-javascript/) 35 | * [Wikipedia article](https://en.wikipedia.org/wiki/Memoization) on Memoization. 36 | 37 | 38 | ## NPM Memoize Modules 39 | 40 | * [mem](https://github.com/sindresorhus/mem) 41 | * [Memoizee](https://github.com/medikoo/memoizee) 42 | -------------------------------------------------------------------------------- /_glossary/METALSMITH.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Metalsmith 3 | excerpt: a simple, pluggable static site generator 4 | --- 5 | 6 | # Metalsmith 7 | 8 | [Metalsmith](http://metalsmith.io/) is an abstraction for manipulating a directory of files. To put it simply, it is a static site generator. 9 | 10 | Metalsmith, at its core, takes files in a source directory, perform operations on them via plugins, and writes those files into a destination directory. Plugins can do virtually anything: create new files, filter out files, modify files based on some logic, etc (note this means that plugin order does matter; transformations done by one plugin can be seen and used by following plugins, making the process a modular build pipeline). The entire ecosystem of plugins is what makes Metalsmith so flexible. 11 | 12 | -------------------------------------------------------------------------------- /_glossary/METEOR.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Meteor 3 | excerpt: a JavaScript web framework that allows rapid prototypic web development 4 | --- 5 | 6 | # Meteor 7 | 8 | [Meteor](https://www.meteor.com/) Meteor is JavaScript framework written using [Node.js](/_glossary/NODEJS.md). It integrates with [MongoDB](/_glossary/MONGODB.md) and uses the Distributed Data Protocol and a publish–subscribe pattern to enable automatic synching of data changes to clients without requiring the developer to write any synchronization code. 9 | -------------------------------------------------------------------------------- /_glossary/MOCHA.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocha 3 | excerpt: an extensible testing framework for TDD (Test-Driven Development) or BDD (Behaviour-Driven Development) 4 | --- 5 | 6 | # Mocha 7 | 8 | [Mocha](https://mochajs.org/) is an extensible, open-source JavaScript testing framework that runs in [Node.js](/_glossary/NODEJS.md) or the browser. It supports both TDD and BDD by allowing you to use any assertion library, such as [expect.js](https://github.com/Automattic/expect.js), [should.js](https://github.com/shouldjs/should.js), and [Chai](/_glossary/CHAI.md). 9 | 10 | Mocha supports spies, stubs and mocks through libraries, such as [Sinon](https://github.com/sinonjs/sinon). 11 | 12 | Mocha supports testing both synchronous and asynchronous code, including [promises](http://www.sitepoint.com/promises-in-javascript-unit-tests-the-definitive-guide/). 13 | -------------------------------------------------------------------------------- /_glossary/MODERNIZR.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Modernizr 3 | excerpt: a browser feature detection library, useful to modify page styles when a feature is not available in the browser 4 | --- 5 | 6 | # Modernizr 7 | 8 | [Modernizr](https://modernizr.com/) is a feature detection library to determine which HTML/CSS features are available in the user’s browser. 9 | 10 | It is done by injecting specific classes on the document’s root element, so that the designer or the developer can treat the page differently should a feature not be available in the browser. 11 | 12 | For instance, if the browser does not support *CSS gradients*, Modernizr will add the class `no-cssgradients` to the document’s root element. That way, it is possible to create a rule that will set a regular background for non-supported browsers, like so: 13 | 14 | ```css 15 | .no-cssgradients .my-element { 16 | background-color: red; 17 | } 18 | ``` 19 | 20 | Another example is if the user has disabled JavaScript on the page, then Modernizr will inject a `no-js` style on the page. The design of the page can then be adapted based on the lack of JavaScript given how certain features are likely to be unavailable. 21 | -------------------------------------------------------------------------------- /_glossary/MODULE_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Module Pattern 3 | excerpt: a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language with incomplete direct support for the concept 4 | --- 5 | 6 | # Module Pattern 7 | 8 | In software engineering, the [module pattern](https://en.wikipedia.org/wiki/Module_pattern) is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language with incomplete direct support for the concept. 9 | 10 | This pattern can be implemented in several ways depending on the host programming language, such as the singleton design pattern, object-oriented static members in a class and procedural global functions. 11 | 12 | ## Structure 13 | 14 | The module software design pattern provides the features and syntactic structure defined by the modular programming paradigm to programming languages that have incomplete support for the concept. 15 | 16 | ![Module Pattern structure](https://upload.wikimedia.org/wikipedia/commons/7/73/Module-software-design-pattern.png) 17 | 18 | ## Concept 19 | 20 | In software development, source code can be organized into components that accomplish a particular function or contain everything necessary to accomplish a particular task. Modular programming is one of those approaches. 21 | 22 | The concept of a “module” is not fully supported in many common programming languages. 23 | 24 | ## Features 25 | 26 | In order to consider that a Singleton or any group of related code implements this pattern, the following features must be supplied: 27 | 28 | - A portion of the code must have global or public access and be designed for use as global/public code. Additional private or protected code can be executed by the main public code. 29 | - A module must have an initializer function that is equivalent to, or complementary to an object constructor method. This feature is not supported by regular namespaces. 30 | - A module must have a finalizer function that is equivalent to, or complementary to an object destructor method. This feature is not supported by regular namespaces. 31 | - Supporting members may require initialization/finalization code that is executed by the module’s initializer/finalizer function. 32 | - Most members are functions that perform operations on elements external to the class, provided as arguments by calling functions. Such functions are “utilities”, “tools” or “libraries”. 33 | 34 | ## Example 35 | 36 | JavaScript does not have built-in support for modules, but the community has created impressive work-arounds. The two most popular standards are: 37 | 38 | - [CommonJS Modules](/_glossary/COMMONJS.md): The dominant implementation of this standard is in Node.js ([Node.js](/_glossary/NODEJS.md) modules have a few features that go beyond CommonJS). Characteristics: 39 | - Compact syntax 40 | - Designed for synchronous loading 41 | - Main use: server 42 | - [AMD](/_glossary/AMD.md): The most popular implementation of this standard is [RequireJS](/_glossary/REQUIREJS.md). Characteristics: 43 | - Slightly more complicated syntax, enabling AMD to work without eval() (or a compilation step) 44 | - Designed for asynchronous loading 45 | - Main use: browsers 46 | 47 | In the middle of 2015, [TC39](https://github.com/tc39) have accepted the new standard **ECMAScript 2015** (ES6) which supports built-in modules through the new syntax. 48 | 49 | #### CommonJS example 50 | 51 | ##### Definition 52 | 53 | ```js 54 | // helper/MathHelper.js 55 | module.exports = { 56 | add: function(left, right) { 57 | return left + right; 58 | }, 59 | 60 | times: function(left, right) { 61 | return left * right; 62 | } 63 | } 64 | ``` 65 | 66 | ##### Implementation 67 | 68 | ```js 69 | // program.js 70 | var mathHelper = require('./helper/MathHelper'); 71 | 72 | console.log(mathHelper.add(5, 8)); // 13 73 | console.log(mathHelper.times(3, 4)); // 12 74 | ``` 75 | 76 | #### AMD example 77 | 78 | ##### Definition 79 | 80 | ```js 81 | // helper/MathHelper.js 82 | define(function() { 83 | return { 84 | add: function(left, right) { 85 | return left + right; 86 | }, 87 | 88 | times: function(left, right) { 89 | return left * right; 90 | } 91 | } 92 | }); 93 | ``` 94 | 95 | ##### Implementation 96 | 97 | ```js 98 | // program.js 99 | requirejs(['helper/MathHelper'], function(matHelper) { 100 | console.log(mathHelper.add(5, 8)); // 13 101 | console.log(mathHelper.times(3, 4)); // 12 102 | }); 103 | ``` 104 | 105 | #### ES6 example 106 | 107 | ##### Definition 108 | 109 | ```js 110 | // helper/MathHelper.js 111 | export function add(left, right) { 112 | return left + right; 113 | } 114 | 115 | export function times(left, right) { 116 | return left * right; 117 | } 118 | ``` 119 | 120 | ##### Implementation 121 | 122 | ```js 123 | // program.js 124 | import { add, times } from './helper/MathHelper'; 125 | 126 | console.log(add(5, 8)); // 13 127 | console.log(times(3, 4)); // 12 128 | ``` 129 | 130 | ## Module as a design pattern 131 | 132 | The Module pattern can be considered a creational pattern and a structural pattern. It manages the creation and organization of other elements, and groups them as the structural pattern does. 133 | 134 | An object that applies this pattern can provide the equivalent of a namespace, providing the initialization and finalization process of a static class or a class with static members with cleaner, more concise syntax and semantics. 135 | 136 | It supports specific cases where a class or object can be considered structured, procedural data. And, vice versa, migrate structured, procedural data, and considered as object-oriented. 137 | 138 | ---------- 139 | 140 | *Source:* 141 | 142 | - [Module pattern](https://en.wikipedia.org/wiki/Module_pattern)*. From Wikipedia, the free encyclopedia* 143 | - [ECMAScript 6 modules: the final syntax](http://www.2ality.com/2014/09/es6-modules-final.html)*. ②ality – JavaScript and more* 144 | -------------------------------------------------------------------------------- /_glossary/MOMENTJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Moment.js 3 | excerpt: a library to parse, validate, manipulate and display dates 4 | --- 5 | 6 | # Moment.js 7 | 8 | [Moment.js](http://momentjs.com/) is a library that helps developing with dates. It supports manipulation of dates, parsing or validate dates, for example based on user inputs, and display dates in certain formats. The localization allows you to display or parse user friendly dates based on a locale and will also translated months etc. 9 | Moment.js can also handle durations, queries (like checking if a date is before another date) or custom extensions. 10 | 11 | [Moment Timezone](http://momentjs.com/timezone/) is a extension of Moment.js which supports to work with different timezones on dates. It can show a specific time in different timezones. 12 | -------------------------------------------------------------------------------- /_glossary/MONGODB.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MongoDB 3 | excerpt: a Javascript NoSQL database 4 | --- 5 | 6 | # MongoDB 7 | 8 | [MongoDB](https://www.mongodb.org/) is a fast, reliable and performant Javascript-powered **NoSQL** database. It uses the concept of **Documents** which is a sort of [JSON](/_glossary/JSON.md)-like data model (called **BSON** for Binary Simple Object Model), making querying faster and easier. 9 | 10 | The main advantage over traditional MySQL databases is the flexibility offered by the Document Model to achieve simpler and faster integration. 11 | -------------------------------------------------------------------------------- /_glossary/MOOTOOLS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: MooTools 3 | excerpt: a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer. It allows you to write powerful and flexible code with its elegant, well documented, and coherent APIs 4 | --- 5 | 6 | # MooTools 7 | 8 | [MooTools](http://mootools.net/) (My Object-Oriented Tools) is a lightweight, object-oriented JavaScript framework. It is released under the free, open-source MIT License. It is used on more than 4% of all websites, and is one of the most popular JavaScript libraries. 9 | 10 | > **MooTools** is a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer. It allows you to write powerful and flexible code with its elegant, well documented, and coherent APIs. 11 | > 12 | > **MooTools** code is extensively documented and easy to read, enabling you to extend the functionality to match your requirements. 13 | > 14 | > — Official MooTools site. 15 | 16 | ## History 17 | 18 | Valerio Proietti first authored the framework and released it in September 2006 taking as his inspiration [Prototype](/_glossary/PROTOTYPE.md) and Dean Edward’s [base2](http://code.google.com/p/base2/). MooTools originated from [Moo.fx](https://en.wikipedia.org/wiki/Moo.fx), a popular plug-in Proietti produced for Prototype in October 2005, which is still maintained and used. 19 | 20 | Whereas Prototype extended—prototyped—many of JavaScript’s native String, Array, and Function objects with additional methods, Proietti desired a framework that (at the time) further extended the native Element object as well to offer greater control of the [DOM](/_glossary/DOM.md). 21 | 22 | ## Components 23 | 24 | MooTools includes a number of components, but not all need to be loaded for each application. Some of the component categories are: 25 | 26 | - **Core**: A collection of utility functions that all the other components require. 27 | - **More**: An official collection of add-ons that extend the Core and provide enhanced functionality. 28 | - **Class**: The base library for Class object instantiation. 29 | - **Natives**: A collection of JavaScript Native Object enhancements. The Natives add functionality, compatibility, and new methods that simplify coding. 30 | - **Element**: Contains a large number of enhancements and compatibility standardization to the HTML Element object. 31 | - **Fx**: An advanced effects-API to animate page elements. 32 | - **Request**: Includes [XHR](/_glossary/XHR.md) interface, Cookie, [JSON](/_glossary/JSON.md), and HTML retrieval-specific tools for developers to exploit. 33 | - **Window**: Provides a cross-browser interface to client-specific information, such as the dimensions of the window. 34 | 35 | ## Browser compatibility 36 | 37 | MooTools is compatible and tested with: 38 | 39 | - Safari 3+ 40 | - Internet Explorer 6+ 41 | - Mozilla Firefox 2+ 42 | - Opera 9+ 43 | - Chrome 4+ 44 | 45 | ## Benefits 46 | 47 | MooTools provides the user with a number of advantages over native JavaScript. These include: 48 | 49 | - An extensible and modular framework allowing developers to choose their own customized combination of components. 50 | - MooTools follows object-oriented practices and the DRY principle. 51 | - An advanced effects component, with optimized transitions such as easing equations used by many Flash developers. 52 | - Enhancements to the DOM, enabling developers to easily add, modify, select, and delete DOM elements. Storing and retrieving information with Element storage is also supported. 53 | 54 | The framework includes built-in functions for manipulation of CSS, DOM elements, native JavaScript objects, Ajax requests, DOM effects, and more. MooTools also provides a detailed, coherent API as well as a custom downloads module allowing developers to download only the modules and dependencies they need for a particular app. 55 | 56 | ## Emphasis on modularity and reusability 57 | 58 | Every JavaScript framework has its philosophy, and MooTools is interested in taking full advantage of the flexibility and power of JavaScript in a way that emphasizes greater modularity and code reuse. MooTools accomplishes these goals in a way that is intuitive to a developer coming from a class-based inheritance language like Java with the MooTools **Class** object. 59 | 60 | **Class** is an object of key/value pairs that can contain either properties or methods (functions). **Class** is effortlessly mixed and extended with other Class instantiations allowing for the greatest focus of MooTools: Code reuse achieved through maximizing the power of JavaScript’s prototypical inheritance, but in a **Class** object syntax more familiar to classical inheritance models. 61 | 62 | ## Object-oriented programming 63 | 64 | MooTools contains a robust Class creation and inheritance system that resembles most classically based Object-oriented programming languages. For example, the following is MooTools’ equivalent of the examples in Wikipedia’s polymorphism page: 65 | 66 | ```js 67 | var Animal = new Class({ 68 | initialize: function(name) { 69 | this.name = name; 70 | } 71 | }); 72 | 73 | var Cat = new Class({ 74 | Extends: Animal, 75 | 76 | talk: function() { 77 | return 'Meow!'; 78 | } 79 | }); 80 | 81 | var Dog = new Class({ 82 | Extends: Animal, 83 | 84 | talk: function() { 85 | return 'Arf! Arf'; 86 | } 87 | }); 88 | 89 | var animals = { 90 | a: new Cat('Missy'), 91 | b: new Cat('Mr. Bojangles'), 92 | c: new Dog('Lassie') 93 | }; 94 | 95 | Object.each(animals, function(animal) { 96 | alert(animal.name + ': ' + animal.talk()); 97 | }); 98 | 99 | // alerts the following: 100 | // 101 | // Missy: Meow! 102 | // Mr. Bojangles: Meow! 103 | // Lassie: Arf! Arf! 104 | ``` 105 | 106 | ---------- 107 | 108 | *Source:* 109 | 110 | - [MooTools](https://en.wikipedia.org/wiki/MooTools)*. From Wikipedia, the free encyclopedia* 111 | - [MooTools](http://mootools.net/)*. MooTools official site.* 112 | -------------------------------------------------------------------------------- /_glossary/NIGHTMARE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nightmare 3 | excerpt: a high-level browser automation library 4 | --- 5 | 6 | # Nightmare 7 | 8 | [Nightmare](http://nightmarejs.org/) is a high-level browser automation library. 9 | 10 | The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It is designed for automating tasks across sites that do not have APIs. 11 | 12 | Under the cover, it uses [Electron](http://electron.atom.io/), which is similar to [PhantomJS](/_glossary/PHANTOMJS.md) but faster and more modern. 13 | -------------------------------------------------------------------------------- /_glossary/NIGHTWATCHJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: NightwatchJS 3 | excerpt: a framework for browser automated testing 4 | --- 5 | 6 | # NightwatchJS 7 | 8 | [NightwatchJS](http://nightwatchjs.org/) is an extensible, open-source JavaScript testing framework that runs in [Node.js](/_glossary/NODEJS.md). It has clean syntax, a built-in test runner, support for Cloud providers such as SauceLabs or BrowserStack, continuous integration such as Teamcity, Jenkins etc. NightwatchJS also supports CSS and XPath selectors. 9 | -------------------------------------------------------------------------------- /_glossary/NODEJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Node.js 3 | excerpt: a cross-platform runtime environment for developing server-side applications built on V8 engine 4 | --- 5 | 6 | # Node.js 7 | 8 | [Node.js](https://nodejs.org/en/) is an open-source, cross-platform runtime environment for developing server-side web applications built on Chrome’s [V8](/_glossary/V8.md) JavaScript engine. These applications are written in JavaScript and can be run within the Node.js runtime. 9 | 10 | Node.js uses an event-driven, non-blocking I/O (input/output) model that makes it lightweight and efficient as well as optimized for real-time web applications’ throughput and scalability. 11 | 12 | Its work is hosted and supported by the [Node.js Foundation](https://nodejs.org/en/foundation/), a collaborative project at Linux Foundation. 13 | -------------------------------------------------------------------------------- /_glossary/NPM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: npm 3 | excerpt: a utility to help publishing packages to, and installing from, an npm repository 4 | --- 5 | 6 | # npm 7 | 8 | [npm](https://www.npmjs.com/) is a utility to help publishing packages to, and installing from, an npm repository. The repository npmjs.com is the best known, and contains many useful community written and tested packages. 9 | -------------------------------------------------------------------------------- /_glossary/NVM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: nvm 3 | excerpt: a utility to help run multiple versions of Node.js on the same machine 4 | --- 5 | 6 | # nvm 7 | 8 | [nvm](https://github.com/creationix/nvm/blob/master/README.markdown) is a utility to help run multiple versions of [Node.js](/_glossary/NODEJS.md) (and its branches) on the same machine. It can install, list, and choose versions. It is analogous to [RVM](https://rvm.io/) (Ruby Version Manager). 9 | -------------------------------------------------------------------------------- /_glossary/OBSERVER_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Observer Pattern 3 | excerpt: a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods 4 | --- 5 | 6 | # Observer Pattern 7 | 8 | The [observer pattern](https://en.wikipedia.org/wiki/Observer_pattern) is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems. The Observer pattern is also a key part in the familiar MVC architectural pattern. The observer pattern is implemented in numerous programming libraries and systems, including almost all GUI toolkits. 9 | 10 | The observer pattern can cause memory leaks, known as the [lapsed listener problem](https://en.wikipedia.org/wiki/Lapsed_listener_problem), because in basic implementation it requires both explicit registration and explicit deregistration, as in the dispose pattern, because the subject holds strong references to the observers, keeping them alive. This can be prevented by the subject holding weak references to the observers. 11 | 12 | ## Definition 13 | 14 | Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. 15 | 16 | ## Summary 17 | 18 | The Observer pattern offers a subscription model in which objects subscribe to an event and get notified when the event occurs. This pattern is the cornerstone of event driven programming, including JavaScript. The Observer pattern facilitates good object-oriented design and promotes loose coupling. 19 | 20 | When building web apps you end up writing many event handlers. Event handlers are functions that will be notified when a certain event fires. These notifications optionally receive an event argument with details about the event (for example the x and y position of the mouse at a click event). 21 | 22 | The event and event-handler paradigm in JavaScript is the manifestation of the Observer design pattern. Another name for the Observer pattern is Pub/Sub, short for Publication/Subscription. 23 | 24 | ## Diagram 25 | 26 | ![Observer Pattern diagram](http://www.dofactory.com/images/diagrams/javascript/javascript-observer.jpg) 27 | 28 | The objects participating in this pattern are: 29 | 30 | - **Subject** - In sample code: `Click` 31 | - maintains list of observers. Any number of Observer objects may observe a Subject 32 | - implements an interface that lets observer objects subscribe or unsubscribe 33 | - sends a notification to its observers when its state changes 34 | - **Observers** - In sample code: `clickHandler` 35 | - has a function signature that can be invoked when Subject changes (i.e. event occurs) 36 | 37 | ## Example 38 | 39 | The `Click` object represents the *Subject*. The `clickHandler` function is the subscribing *Observer*. This handler subscribes, unsubscribes, and then subscribes itself while events are firing. It gets notified only of events #1 and #3. 40 | 41 | Notice that the fire method accepts two arguments. The first one has details about the event and the second one is the context, that is, the this value for when the eventhandlers are called. If no context is provided this will be bound to the global object (`window`). 42 | 43 | The `log` function is a helper which collects and displays results. 44 | 45 | ```js 46 | class Click { 47 | constructor() { 48 | this.handlers = []; // observers 49 | } 50 | 51 | subscribe(fn) { 52 | this.handlers.push(fn); 53 | } 54 | 55 | unsubscribe(fn) { 56 | this.handlers = this.handlers.filter(item => { 57 | return item !== fn ? item : null; 58 | }); 59 | } 60 | 61 | fire(o, thisObj) { 62 | let scope = thisObj || window; 63 | 64 | this.handlers.forEach(item => { item.call(scope, o) }); 65 | } 66 | } 67 | 68 | // log helper 69 | let log = (function() { 70 | let log = ''; 71 | 72 | return { 73 | add: msg => { log += msg + '\n'; }, 74 | show: () => { alert(log); log = ''; } 75 | } 76 | })(); 77 | 78 | function run() { 79 | var click = new Click(), 80 | clickHandler = item => { log.add('fired: ' + item); }; 81 | 82 | click.subscribe(clickHandler); 83 | click.fire('event #1'); 84 | click.unsubscribe(clickHandler); 85 | click.fire('event #2'); 86 | click.subscribe(clickHandler); 87 | click.fire('event #3'); 88 | 89 | log.show(); 90 | } 91 | 92 | run(); 93 | ``` 94 | 95 | ---------- 96 | 97 | *Source:* 98 | 99 | - [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern)*. From Wikipedia, the free encyclopedia.* 100 | - [Observer](http://www.dofactory.com/javascript/observer-design-pattern)*. Observer JavaScript Design Pattern with examples.* 101 | -------------------------------------------------------------------------------- /_glossary/PASSPORTJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Passport.js 3 | excerpt: a simple authentication middleware 4 | --- 5 | 6 | # Passport.js 7 | 8 | [Passport.js](http://passportjs.org/) is a simple authentication middleware for Node.js that is express compatible. 9 | 10 | It focuses primarily on authentication requests through a comprehensive list of strategies including username and password credentials, OAuth (Facebook, Twitter, Google+) and SAML. These strategies are packaged as individual modules to prevent unnecessary dependencies. 11 | 12 | Passport is also designed to be flexible as it does not mount route and database independent. The API is simple: you provide Passport a request to authenticate, and it provides hooks to control what occurs when authentication succeeds or fails. -------------------------------------------------------------------------------- /_glossary/PHANTOMJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PhantomJS 3 | excerpt: a scripted, headless browser used for automating web page interaction 4 | --- 5 | 6 | # PhantomJS 7 | 8 | [PhantomJS](http://phantomjs.org/) is a headless WebKit scriptable with a JavaScript API. It has **fast** and **native** support for various web standards: DOM handling, CSS selectors, JSON, Canvas, and SVG. 9 | 10 | ## Use Cases 11 | 12 | - **Headless web testing**. Lightning-fast testing without the browser is now possible! Various [test frameworks](http://phantomjs.org/headless-testing.html) such as [Jasmine](/_glossary/JASMINE.md), Capybara, [QUnit](/_glossary/QUNIT.md), [Mocha](/_glossary/MOCHA.md), WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework, and many others are supported. 13 | - **Page automation.** [Access and manipulate](http://phantomjs.org/page-automation.html) web pages with the standard DOM API, or with usual libraries like [jQuery](/_glossary/JQUERY.md). 14 | - **Screen capture.** Programmatically [capture web contents](http://phantomjs.org/screen-capture.html), including CSS, SVG and Canvas. Build server-side web graphics apps, from a screenshot service to a vector chart rasterizer. 15 | - **Network monitoring.** Automate performance analysis, track [page loading](http://phantomjs.org/network-monitoring.html) and export as standard HAR format. 16 | 17 | ## Features 18 | 19 | - **Multiplatform**, available on major operating systems: Windows, Mac OS X, Linux, and other Unices. 20 | - **Fast and native implementation** of web standards: DOM, CSS, JavaScript, Canvas, and SVG. No emulation! 21 | - **Pure headless (no X11) on Linux**, ideal for continuous integration systems. Also runs on Amazon EC2, Heroku, and Iron.io. 22 | - **Easy to install**: [Download](http://phantomjs.org/download.html), unpack, and start having fun in just 5 minutes. 23 | 24 | ## PhantomJS usage 25 | 26 | The PhantomJS JavaScript API can be used to open web pages, take screenshots, execute user actions, and run injected JavaScript in the page context. For example, the following code will open Wikipedia and, upon loading, will save a screenshot to a file and exit. 27 | 28 | ```js 29 | console.log('Loading a web page'); 30 | var page = require('webpage').create(); 31 | var url = 'http://en.wikipedia.org/'; 32 | 33 | page.open(url, function (status) { 34 | console.log('Page loaded'); 35 | page.render('wikipedia.org.png'); 36 | phantom.exit(); 37 | }); 38 | ``` 39 | 40 | --- 41 | 42 | **PhantomJS** is created and maintained by [Ariya Hidayat](http://ariya.ofilabs.com/about) (Twitter: [@ariyahidayat](http://twitter.com/ariyahidayat)), with the help of [many contributors](https://github.com/ariya/phantomjs/contributors). Follow the official Twitter stream [@PhantomJS](http://twitter.com/PhantomJS) to get the frequent development updates. 43 | -------------------------------------------------------------------------------- /_glossary/POLYMER.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Polymer 3 | excerpt: Google’s library for creating Web Components 4 | --- 5 | 6 | # Polymer 7 | 8 | With Google’s [Polymer](https://www.polymer-project.org) library you can extend the vocabulary of HTML with your own custom elements (also known as Web Components) that can carry their own CSS styling and JavaScript code. Once created, these elements can be reused and composed together with other native or custom HTML elements. 9 | -------------------------------------------------------------------------------- /_glossary/POSTCSS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PostCSS 3 | excerpt: a tool to transform CSS styles using JavaScript plugins; plugins include autoprefixer, future CSS transpiling, CSS linting and media queries 4 | --- 5 | 6 | # PostCSS 7 | 8 | [PostCSS](http://postcss.org/) is a tool to transform CSS styles using JavaScript plugins. Popular plugins include autoprefixer, future CSS transpiling, CSS linting and media queries. 9 | 10 | [Autoprefixer](https://github.com/postcss/autoprefixer) helps developer to automatically generate vendor specific prefixes. Take a look at the [interactive demo](http://autoprefixer.github.io/) of Autoprefixer in action 11 | 12 | [POSTCSS-cssnext](http://cssnext.io/) is a PostCSS transpiler plugin that transforms new CSS specs into CSS that is more compatible with browsers. This includes CSS nesting, custom selectors and media queries. 13 | -------------------------------------------------------------------------------- /_glossary/PROMISE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Promise 3 | excerpt: a proxy for a value not necessarily known immediately but that will eventually be resolved 4 | --- 5 | 6 | # Promise 7 | 8 | A *Promise* represents a value that may not be available yet but will eventually be resolved at some point in the future. The point is to allow developers to write asynchronous code in a more synchronous fashion, escaping from the popular [callback hell](http://callbackhell.com/). 9 | 10 | Promises are not fully supported in all browsers yet (see [support](http://caniuse.com/#feat=promises)), however a lot of libraries mimick their behavior to make them usable right away; [Bluebird](/_glossary/BLUEBIRD.md) is one of them. 11 | 12 | For more information about how promises work and when to use them, there is [complete overview](http://robotlolita.me/2015/11/15/how-do-promises-work.html). 13 | -------------------------------------------------------------------------------- /_glossary/PROTOTYPEJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Prototype 3 | excerpt: a JavaScript framework that aims to ease development of dynamic web applications. It offers a familiar class-style OO framework, extensive Ajax support, higher-order programming constructs, and easy DOM manipulation 4 | --- 5 | 6 | # Prototype 7 | 8 | The [Prototype](http://prototypejs.org/) JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of the foundation for [AJAX](/_glossary/AJAX.md) support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico. 9 | 10 | ## Features 11 | 12 | Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with [XHR](/_glossary/XHR.md). 13 | 14 | Prototype also provides library functions to support classes and class-based objects, something the JavaScript language lacks. In JavaScript, object creation is prototype-based instead: an object creating function can have a prototype property, and any object assigned to that property will be used as a prototype for the objects created with that function. The Prototype framework is not to be confused with this language feature. 15 | 16 | ## Sample utility functions 17 | 18 | #### The `$()` function 19 | 20 | The **dollar function**, `$()`, can be used as shorthand for the `getElementById` function. To refer to an element in the [DOM](/_glossary/DOM.md) of an HTML page, the usual function identifying an element is: 21 | 22 | ```js 23 | document.getElementById('id_of_element').style.color = '#ffffff'; 24 | ``` 25 | 26 | The `$()` function reduces the code to: 27 | 28 | ```js 29 | $('id_of_element').setStyle({ color: '#ffffff' }); 30 | ``` 31 | 32 | The `$()` function can also receive an element as parameter and will return, as in the previous example, a prototype extended object. 33 | 34 | ```js 35 | var domElement = document.getElementById('id_of_element'); // Usual object reference returned 36 | var prototypeEnhancedDomElement = $(domElement); // Prototype extended object reference 37 | ``` 38 | 39 | #### The `$F()` function 40 | 41 | Building on the `$()` function: the `$F()` function returns the value of the requested form element. For a ‘text’ input, the function will return the data contained in the element. For a ‘select’ input element, the function will return the currently selected value. 42 | 43 | ```js 44 | $F('id_of_input_element') 45 | ``` 46 | 47 | #### The `$$()` function 48 | 49 | The dollar dollar function is Prototype’s *CSS Selector Engine*. It returns all matching elements, following the same rules as a selector in a CSS stylesheet. For example, if you want to get all `` elements with the class “pulsate”, you would use the following: 50 | 51 | ```js 52 | $$('a.pulsate') 53 | ``` 54 | 55 | This returns a collection of elements. If you are using the script.aculo.us extension of the core Prototype library, you can apply the “pulsate” (blink) effect as follows: 56 | 57 | ```js 58 | $$('a.pulsate').each(Effect.Pulsate); 59 | ``` 60 | 61 | #### The Ajax object 62 | 63 | In an effort to reduce the amount of code needed to run a cross-browser `XMLHttpRequest` function, Prototype provides the `Ajax` object to abstract the different browsers. It has two main methods: `Ajax.Request()` and `Ajax.Updater()`. There are two forms of the `Ajax` object. `Ajax.Request` returns the raw XML output from an AJAX call, while the `Ajax.Updater` will inject the return inside a specified DOM object. The `Ajax.Request` below finds the current values of two HTML form input elements, issues an HTTP POST request to the server with those element name/value pairs, and runs a custom function (called `showResponse` below) when the HTTP response is received from the server: 64 | 65 | ```js 66 | new Ajax.Request('http://localhost/server_script', { 67 | parameters: { 68 | value1: $F('form_element_id_1'), 69 | value2: $F('form_element_id_2') 70 | }, 71 | onSuccess: showResponse, 72 | onFailure: showError 73 | }); 74 | ``` 75 | 76 | ## Object-oriented programming 77 | 78 | Prototype also adds support for more traditional object-oriented programming. The `Class.create()` method is used to create a new class. A class is then assigned a `prototype` which acts as a blueprint for instances of the class. 79 | 80 | ```js 81 | var FirstClass = Class.create( { 82 | // The initialize method serves as a constructor 83 | initialize: function () { 84 | this.data = 'Hello World'; 85 | } 86 | }); 87 | ``` 88 | 89 | Extending another class: 90 | 91 | ```js 92 | Ajax.Request = Class.create( Ajax.Base, { 93 | // Override the initialize method 94 | initialize: function(url, options) { 95 | this.transport = Ajax.getTransport(); 96 | this.setOptions(options); 97 | this.request(url); 98 | }, 99 | // ...more methods add ... 100 | }); 101 | ``` 102 | 103 | The framework function `Object.extend(dest, src)` takes two objects as parameters and copies the properties of the second object to the first one simulating inheritance. The combined object is also returned as a result from the function. As in the example above, the first parameter usually creates the base object, while the second is an anonymous object used solely for defining additional properties. The entire sub-class declaration happens within the parentheses of the function call. 104 | 105 | ---------- 106 | 107 | *Source:* 108 | 109 | - [Prototype JavaScript Framework](https://en.wikipedia.org/wiki/Prototype_JavaScript_Framework)*. From Wikipedia, the free encyclopedia.* 110 | - [Prototype JavaScript framework: a foundation for ambitious web applications](http://prototypejs.org/)*. Official site.* 111 | - [Prototype JavaScript framework](https://github.com/sstephenson/prototype)*. Github.* 112 | -------------------------------------------------------------------------------- /_glossary/PROTOTYPE_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Prototype Pattern 3 | excerpt: a creational design pattern in software development. It is used when the type of objects to create is determined by a prototypical instance, which is cloned to produce new objects 4 | --- 5 | 6 | # Prototype Pattern 7 | 8 | The [prototype pattern](https://en.wikipedia.org/wiki/Prototype_pattern) is a creational design pattern in software development. It is used when the type of objects to create is determined by a [prototypical](/_glossary/PROTOTYPE.md) instance, which is cloned to produce new objects. This pattern is used to: 9 | 10 | - avoid subclasses of an object creator in the client application, like the abstract factory pattern does. 11 | - avoid the inherent cost of creating a new object in the standard way (e.g., using the `new` keyword) when it is prohibitively expensive for a given application. 12 | 13 | To implement the pattern, declare an abstract base class that specifies a pure virtual `clone()` method. Any class that needs a “polymorphic constructor” capability derives itself from the abstract base class, and implements the `clone()` operation. 14 | 15 | The client, instead of writing code that invokes the `new` operator on a hard-coded class name, calls the `clone()` method on the prototype, calls a [factory method](/_glossary/FACTORY_PATTERN.md) with a parameter designating the particular concrete derived class desired, or invokes the `clone()` method through some mechanism provided by another design pattern. 16 | 17 | ## Structure 18 | 19 | ![Prototype Pattern diagram](http://www.dofactory.com/images/diagrams/javascript/javascript-prototype.jpg) 20 | 21 | The objects participating in this pattern are: 22 | 23 | - **Client** - In sample code: the `run()` function. 24 | - creates a new object by asking a prototype to clone itself 25 | - **Prototype** - In sample code: `CustomerPrototype` 26 | - creates an interfaces to clone itself 27 | - **Clones** - In sample code: `Customer` 28 | - the cloned objects that are being created 29 | 30 | ## Example 31 | 32 | In the sample code we have a `CustomerPrototype` object that clones objects given a prototype object. Its constructor function accepts a prototype of type `Customer`. Calling the clone method will generate a new `Customer` object with its property values initialized with the prototype values. 33 | 34 | This is the classical implementation of the Prototype pattern, but JavaScript can do this far more effectively using its built-in [prototype facility](/_glossary/PROTOTYPE.md). 35 | 36 | ```js 37 | function CustomerPrototype(proto) { 38 | this.proto = proto; 39 | 40 | this.clone = function () { 41 | var customer = new Customer(); 42 | 43 | customer.first = proto.first; 44 | customer.last = proto.last; 45 | customer.status = proto.status; 46 | 47 | return customer; 48 | }; 49 | } 50 | 51 | function Customer(first, last, status) { 52 | this.first = first; 53 | this.last = last; 54 | this.status = status; 55 | 56 | this.say = function () { 57 | alert('name: ' 58 | + this.first 59 | + ' ' 60 | + this.last 61 | + ', status: ' 62 | + this.status 63 | ); 64 | }; 65 | } 66 | 67 | function run() { 68 | var proto = new Customer('n/a', 'n/a', 'pending'); 69 | var prototype = new CustomerPrototype(proto); 70 | var customer = prototype.clone(); 71 | customer.say(); 72 | } 73 | 74 | run(); 75 | ``` 76 | 77 | ---------- 78 | 79 | *Source:* 80 | - [Prototype pattern](https://en.wikipedia.org/wiki/Prototype_pattern)*. From Wikipedia, the free encyclopedia.* 81 | - [Prototype](http://www.dofactory.com/javascript/prototype-design-pattern)*. Prototype JavaScript Design Pattern with examples.* 82 | -------------------------------------------------------------------------------- /_glossary/PUPPETEER.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Puppeteer 3 | excerpt: a scripted, headless browser used for automating web page interaction 4 | --- 5 | 6 | # Puppeteer 7 | 8 | [Puppeteer](https://github.com/GoogleChrome/puppeteer) is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium. 9 | 10 | ## Use Cases 11 | 12 | - Generate screenshots and PDFs of pages. 13 | - Crawl a SPA and generate pre-rendered content (i.e. "SSR"). 14 | - Automate form submission, UI testing, keyboard input, etc. 15 | - Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features. 16 | 17 | 18 | ## Usage 19 | 20 | Caution: Puppeteer requires at least Node v6.4.0, but the examples below use async/await which is only supported in Node v7.6.0 or greater. 21 | 22 | Puppeteer will be familiar to people using other browser testing frameworks. You create an instance 23 | of `Browser`, open pages, and then manipulate them with [Puppeteer's API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#). 24 | 25 | **Example** - navigating to https://example.com and saving a screenshot as *example.png*: 26 | 27 | Save file as **example.js** 28 | 29 | ```js 30 | const puppeteer = require('puppeteer'); 31 | 32 | (async () => { 33 | const browser = await puppeteer.launch(); 34 | const page = await browser.newPage(); 35 | await page.goto('https://example.com'); 36 | await page.screenshot({path: 'example.png'}); 37 | 38 | await browser.close(); 39 | })(); 40 | ``` 41 | 42 | ## Why is the Chrome team building Puppeteer? 43 | 44 | - Provide a slim, canonical library that highlights the capabilities of the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). 45 | - Provide a reference implementation for similar testing libraries. Eventually, these other frameworks could adopt Puppeteer as their foundational layer. 46 | - Grow the adoption of headless/automated browser testing. 47 | - Help dogfood new DevTools Protocol features...and catch bugs! 48 | - Learn more about the pain points of automated browser testing and help fill those gaps. 49 | -------------------------------------------------------------------------------- /_glossary/PURE_FUNCTION.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pure Function 3 | excerpt: a functional programming paradigm that ensures that a function has some strict properties. 4 | --- 5 | 6 | # Pure Function 7 | 8 | A *pure function* is a paradigm from the Functional Programming world. 9 | 10 | The main idea is that a pure function respects the following properties: 11 | 12 | 1. For a given input, it will always produce the same output. 13 | 2. It doesn’t produce any side-effect. 14 | 3. It doesn’t rely on any external state. 15 | 16 | ## For a given input, always the same output 17 | 18 | ```js 19 | // The following function is not Pure because different calls with same argument will not produce the same output : 20 | function impureAdd (input) { 21 | return input + Math.Random(); 22 | } 23 | 24 | // A way to make a pure function of it is to extract the impredictable part and give this responsibility to the caller : 25 | function pureAdd (input, randomValue) { 26 | return input + randomValue; 27 | } 28 | 29 | var randomAdd = pureAdd(5, Math.Random()); 30 | ``` 31 | 32 | ## It doesn’t produce any side-effect 33 | 34 | ```js 35 | // The following function is not Pure because it has a side effect : it writes in the environnement’s console 36 | function impureFunction (input) { 37 | var output = computeHashValue(input); 38 | console.log('computed output:', output); 39 | return output; 40 | } 41 | 42 | // To make it pure, again, the caller has the responsibility to pass the desired side effects. 43 | function pureFunction (input, traceCallback) { 44 | var output = computeHashValue(input); 45 | 46 | if (traceCallback) { 47 | traceCallback('computed output:', output); 48 | } 49 | 50 | return output; 51 | } 52 | 53 | var output = pureFunction('some input', (s) => console.log(s)); 54 | ``` 55 | 56 | 57 | ## It doesn’t rely on any external state 58 | 59 | ```js 60 | var applicationState = { 61 | businessTreshold = 92; 62 | } 63 | 64 | // The following function is not Pure because it relies on a global variable, an external state from the point of view of the function 65 | function impureValidation (inputScore) { 66 | return input < applicationState.businessTreshold; 67 | } 68 | 69 | // To make it pure, again, the caller has the responsibility to pass the needed state for the function to run 70 | function pureValidation (inputScore, threshold) { 71 | return input < threshold; 72 | } 73 | 74 | var output = pureFunction(70, applicationState.businessTreshold); 75 | ``` 76 | 77 | --- 78 | 79 | *Sources:* 80 | 81 | * [Wikipedia Article](https://en.wikipedia.org/wiki/Pure_function) 82 | * [Eric Elliot on Pure Function](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976#.knhvq7k0z) 83 | -------------------------------------------------------------------------------- /_glossary/Q.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Q 3 | excerpt: a library to create and manage promises 4 | --- 5 | 6 | # Q 7 | 8 | [Q](http://documentup.com/kriskowal/q/) is a [promise](/_glossary/PROMISE.md) library providing many more utilities than the native Promise implementation. 9 | 10 | List of features: 11 | 12 | - Deferred values (old school): `Q.defer` 13 | - Multiple promises handling: `Q.all, Q.any, Q.spread` 14 | - Promise creation, resolve and reject: `Q(value), Q.when(value), Q.reject(value)` 15 | - Convert properties to promises: `Q.get, Q.set` 16 | - Convert functions to promises: `Q.fcall, Q.invoke` 17 | - Convert node-based callbacks to promises: `Q.nfcall, Q.ninvoke` 18 | - Convert timeout functions: `Q.timeout` 19 | - Support notify functions 20 | - Support chaining and tapping 21 | 22 | Real world example from a [Node.js](/_glossary/NODEJS.md) application: 23 | 24 | ```js 25 | // Traditional implementation 26 | function authenticate (req, res, next) { 27 | User.findOne({ id: req.id }, function (err, user) { 28 | if (err) { 29 | return next('not found'); 30 | } 31 | 32 | user.save(function (err, response) { 33 | // ... 34 | }); 35 | }); 36 | } 37 | 38 | // Q Based 39 | function authenticate(req, res, next) { 40 | return Q(req.id) 41 | .then(function (id) { 42 | return Q.nfcall(User, 'findOne', id); 43 | }) 44 | .then(function (user) { 45 | return Q.ninvoke(user, 'save'); 46 | }) 47 | .then(function (saved) { 48 | return res.send(201); 49 | }) 50 | .catch(function (err) { 51 | return next(err); 52 | }); 53 | } 54 | ``` 55 | -------------------------------------------------------------------------------- /_glossary/QUNIT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: QUnit 3 | excerpt: a powerful, easy-to-use JavaScript unit testing framework 4 | --- 5 | 6 | # QUnit 7 | 8 | [QUnit](https://qunitjs.com/) is a JavaScript unit testing framework. While heavily used by the jQuery Project for testing [jQuery](/_glossary/JQUERY.md), [jQuery UI](http://jqueryui.com/) and [jQuery Mobile](http://jquerymobile.com/), it is a generic framework to test any JavaScript code. It supports server-side (e.g. [node.js](/_glossary/NODEJS.md)) and client-side environments. 9 | 10 | QUnit’s assertion methods follow the [CommonJS](/_glossary/COMMONJS.md) unit testing specification, which itself was influenced to some degree by QUnit. 11 | 12 | ## History 13 | 14 | QUnit was originally developed by John Resig as part of jQuery. In 2008 it was extracted from the jQuery unit test source code to form its own project and became known as “QUnit”. This allowed others to start using it for writing their unit tests. While the initial version of QUnit used jQuery for interaction with the DOM, a rewrite in 2009 made QUnit completely standalone. 15 | 16 | ## Usage 17 | 18 | - `QUnit.module(string)` - Defines a module, a grouping of one or more tests. 19 | - `QUnit.test(string, function)` - Defines a test. 20 | 21 | QUnit uses a set of assertion method to provide semantic meaning in unit tests: 22 | 23 | - `assert.ok(boolean, string)` - Asserts that the provided value casts to boolean true. 24 | - `assert.equal(value1, value2, message)` - Compares two values, using the double-equal operator. 25 | - `assert.deepEqual(value1, value2, message)` - Compares two values based on their content, not just their identity. 26 | - `assert.strictEqual(value1, value2, message)` - Strictly compares two values, using the triple-equal operator. 27 | 28 | ## Example 29 | 30 | A basic example would be as follows: 31 | 32 | ```js 33 | QUnit.test('a basic test example', function (assert) { 34 | var obj = {}; 35 | 36 | assert.ok(true, 'Boolean true'); // passes 37 | assert.ok(1, 'Number one'); // passes 38 | assert.ok(false, 'Boolean false'); // fails 39 | 40 | obj.start = 'Hello'; 41 | obj.end = 'Ciao'; 42 | assert.equal(obj.start, 'Hello', 'Opening greet'); // passes 43 | assert.equal(obj.end, 'Goodbye', 'Closing greet'); // fails 44 | }); 45 | ``` 46 | 47 | ---------- 48 | 49 | *Source:* 50 | 51 | - [QUnit](https://en.wikipedia.org/wiki/QUnit)*. From Wikipedia, the free encyclopedia.* 52 | - [QUnit: A JavaScript Unit Testing framework.](https://qunitjs.com/) 53 | -------------------------------------------------------------------------------- /_glossary/RAMDA.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ramda 3 | excerpt: a practical functional library for JavaScript programmers 4 | --- 5 | 6 | # Ramda 7 | 8 | [Ramda](http://ramdajs.com) is a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data. 9 | 10 | * Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple, elegant code. 11 | * Ramda functions are automatically [curried](/_glossary/CURRYING.md). This allows you to easily build up new functions from old ones simply by not supplying the final parameters. 12 | * The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is generally supplied last. 13 | 14 | Ramda makes it very easy to build functions as sequences of simpler functions, each of which transforms the data and passes it along to the next. 15 | -------------------------------------------------------------------------------- /_glossary/REACT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 3 | excerpt: a library developed and used at Facebook for building user interfaces 4 | --- 5 | 6 | # React 7 | 8 | [React](https://facebook.github.io/react/) is a library developed and used at Facebook for building user interfaces. It can be seen as the V in MVC as it makes no assumptions about the rest of the technology stack. Using [React Native](#react-native) it can even be used to power native apps. 9 | 10 | In React you can write HTML directly in JS using an XML-like syntax called [JSX](/_glossary/JSX.md). JSX compiles to JS and is optional, but does make the code more expressive. 11 | 12 | Data flow in React is one-way which makes it easier to reason about and avoid mistakes. This quality can be enhanced using [Flux](/_glossary/FLUX.md), Facebook’s complementary application architecture, or [Redux](/_glossary/REDUX.md) which many people see as a “better Flux”. 13 | 14 | # React Native 15 | 16 | [React Native](https://facebook.github.io/react-native/) section to be completed. 17 | -------------------------------------------------------------------------------- /_glossary/REDUX.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Redux 3 | excerpt: a predictable state container for apps 4 | --- 5 | 6 | # Redux 7 | 8 | [Redux](http://redux.js.org/) is a predictable state container for JavaScript apps, which is a fancy way of saying it controls application state and state mutations. It does so by keeping state in a store, which is the single source of truth. 9 | 10 | Redux is an alternative to [Flux](/_glossary/FLUX.md) and used a lot together with [React](/_glossary/REACT.md), but you can use it with any other view library. 11 | -------------------------------------------------------------------------------- /_glossary/REQUIREJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: RequireJS 3 | excerpt: a browser based module loader using AMD 4 | --- 5 | 6 | # RequireJS 7 | 8 | [RequireJS](http://requirejs.org/) section to be completed. 9 | -------------------------------------------------------------------------------- /_glossary/REVEALING_MODULE_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Revealing Module Pattern 3 | excerpt: a design pattern conceptually based on the Module Pattern. The only difference is that the *revealing module pattern* was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed 4 | --- 5 | 6 | # Revealing Module Pattern 7 | 8 | This pattern is the same concept as the [module pattern](/_glossary/MODULE_PATTERN.md) in that it focuses on public & private methods. The only difference is that the revealing module pattern was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed; usually through an object literal returned by the closure from which it’s defined. Personally, I like this approach for vanilla JavaScript as it puts a clear emphasis on both the intent of the developer and the module itself. 9 | 10 | ## Advantages 11 | 12 | - Cleaner approach for developers 13 | - Supports private data 14 | - Less clutter in the global namespace 15 | - Localization of functions and variables through closures 16 | - The syntax of our scripts are even more consistent 17 | - Explicitly defined public methods and variables which lead to increased readability 18 | 19 | ## Disadvantages 20 | 21 | - Private methods are unaccessible. 22 | - Private methods and functions lose extendability since they are unaccessible (see my comment in the previous bullet point). 23 | - It’s harder to patch public methods and variables that are referred to by something private. 24 | 25 | ## Example 26 | 27 | ```js 28 | var MyModule = (function(window, undefined) { 29 | function myMethod() { 30 | console.log('my method'); 31 | } 32 | 33 | function myOtherMethod() { 34 | console.log('my other method'); 35 | } 36 | 37 | // explicitly return public methods when this object is instantiated 38 | return { 39 | someMethod: myMethod, 40 | someOtherMethod: myOtherMethod 41 | }; 42 | })(window); 43 | 44 | // example usage 45 | MyModule.myMethod(); // undefined 46 | MyModule.myOtherMethod(); // undefined 47 | MyModule.someMethod(); // prints 'my method' 48 | MyModule.someOtherMethod(); // prints 'my other method' 49 | ``` 50 | 51 | This pattern can also be implemented using a privately shared cache: 52 | 53 | ```js 54 | var MyModule = (function(window,undefined) { 55 | // this object is used to store private variables and methods across multiple instantiations 56 | var privates = {}; 57 | 58 | function MyModule() { 59 | this.myMethod = function myMethod() { 60 | console.log('my method'); 61 | }; 62 | 63 | this.myOtherMethod = function myOtherMethod() { 64 | console.log('my other method'); 65 | }; 66 | } 67 | 68 | return MyModule; 69 | })(window); 70 | 71 | // example usage 72 | var myMod = new MyModule(); 73 | myMod.myMethod(); // prints 'my method' 74 | myMod.myOtherMethod(); // prints 'my other method' 75 | ``` 76 | 77 | ---------- 78 | 79 | *Source:* 80 | 81 | - [The Revealing Module Pattern](https://carldanley.com/js-revealing-module-pattern/) 82 | - [The Module Pattern](https://carldanley.com/js-module-pattern/#file-module-pattern-example-2-js-L1) 83 | -------------------------------------------------------------------------------- /_glossary/RNPM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: rnpm 3 | excerpt: a package manager to ease React Native development 4 | --- 5 | 6 | # rnpm 7 | 8 | [rnpm](https://github.com/rnpm/rnpm) is built to ease [React Native](/_glossary/REACT.md#react-native) development by automatically linking native dependencies to your iOS/Android project. -------------------------------------------------------------------------------- /_glossary/RXJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: RxJS 3 | excerpt: a library for asynchronous programming using observable streams 4 | --- 5 | 6 | # RxJS 7 | 8 | [RxJS](https://github.com/Reactive-Extensions/RxJS) is a library in the [ReactiveX](http://reactivex.io/) family of functional reactive programming libraries. It allows you to develop programs that respond to asynchronous events by composing sequences of observable streams. 9 | 10 | Observable streams can send zero or more “data” notifications and terminate with either an “completed” or an “error” notification. Subsequent streams can combine and remix these notifications into new observable patterns, making it possible to compose rich sequences of asynchronous events that clean up resources appropriately when done. 11 | 12 | RxJS is available under an Apache license. It is developed by Microsoft Open Source and numerous third-party contributors. 13 | -------------------------------------------------------------------------------- /_glossary/SAILS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sails 3 | excerpt: a realtime MVC Framework for Node.js 4 | --- 5 | 6 | # Sails 7 | 8 | [Sails](http://sailsjs.org/) is a web framework that makes it easy to build custom, enterprise-grade [Node.js](/_glossary/NODEJS.md) apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat. 9 | -------------------------------------------------------------------------------- /_glossary/SINGLETON_PATTERN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Singleton Pattern 3 | excerpt: a design pattern that restricts the instantiation of a class to one object 4 | --- 5 | 6 | # Singleton Pattern 7 | 8 | In software engineering, the [singleton pattern](https://en.wikipedia.org/wiki/Singleton_pattern) is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects. The term comes from the [mathematical concept of a singleton](https://en.wikipedia.org/wiki/Singleton_(mathematics)). 9 | 10 | The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called the singleton. 11 | 12 | Singletons are useful in situations where system-wide actions need to be coordinated from a single central place. An example is a database connection pool. The pool manages the creation, destruction, and lifetime of all database connections for the entire application ensuring that no connections are ‘lost’. 13 | 14 | Singletons reduce the need for global variables which is particularly important in JavaScript because it limits namespace pollution and associated risk of name collisions. The [Module pattern](MODULE_PATTERN.md) is JavaScript’s manifestation of the Singleton pattern. 15 | 16 | ## Common uses 17 | 18 | - The [Abstract Factory](https://en.wikipedia.org/wiki/Abstract_factory_pattern), [Builder](https://en.wikipedia.org/wiki/Builder_pattern), and [Prototype](/_glossary/PROTOTYPE_PATTERN.md) patterns can use Singletons in their implementation. 19 | - [Facade](/_glossary/FACADE_PATTERN.md) objects are often singletons because only one Facade object is required. 20 | - [State](https://en.wikipedia.org/wiki/State_pattern) objects are often singletons. 21 | Singletons are often preferred to global variables because: 22 | - They do not pollute the global namespace (or, in languages with namespaces, their containing namespace) with unnecessary variables. 23 | - They permit lazy allocation and initialization, whereas global variables in many languages will always consume resources. 24 | 25 | ## Structure 26 | 27 | ![Singleton Pattern structure](http://www.dofactory.com/images/diagrams/javascript/javascript-singleton.jpg) 28 | 29 | The objects participating in this pattern are: 30 | 31 | - `Singleton` - In sample code: `Singleton` 32 | - defines `getInstance()` which returns the unique instance. 33 | - responsible for creating and managing the instance object. 34 | 35 | ## Example 36 | 37 | The Singleton object is implemented as an [IIFE](/_glossary/IIFE.md). The function executes immediately by wrapping it in brackets followed by two additional brackets. It is called anonymous because it doesn’t have a name. 38 | 39 | #### Example 1 40 | 41 | ```js 42 | var Singleton = (function() { 43 | var instance; 44 | 45 | // Private methods and fields 46 | // ... 47 | 48 | // Constructor 49 | function Singleton() { 50 | if (!instance) { 51 | instance = this; 52 | } 53 | 54 | return instance; 55 | 56 | // Public fields 57 | } 58 | 59 | // Public methods 60 | Singleton.prototype.test = function() {}; 61 | 62 | return Singleton; 63 | })(); 64 | 65 | function run() { 66 | var instance1 = new Singleton() 67 | var instance2 = new Singleton() 68 | 69 | console.assert(instance1 === instance2); 70 | } 71 | 72 | run(); 73 | ``` 74 | 75 | #### Example 2 76 | 77 | The `getInstance` method is Singleton’s gatekeeper. It returns the one and only instance of the object while maintaining a private reference to it which is not accessible to the outside world. 78 | 79 | The `getInstance` method demonstates another design pattern called **Lazy Load**. **Lazy Load** checks if an instance has already been created; if not, it creates one and stores it for future reference. All subsequent calls will receive the stored instance. Lazy loading is a CPU and memory saving technique by creating objects only when absolutely necessary. 80 | 81 | ```js 82 | var Singleton = (function () { 83 | var instance; 84 | 85 | function createInstance() { 86 | var object = new Object('I am the instance'); 87 | return object; 88 | } 89 | 90 | return { 91 | getInstance: function () { 92 | if (!instance) { 93 | instance = createInstance(); 94 | } 95 | 96 | return instance; 97 | } 98 | }; 99 | })(); 100 | 101 | function run() { 102 | var instance1 = Singleton.getInstance(); 103 | var instance2 = Singleton.getInstance(); 104 | 105 | console.assert(instance1 === instance2); 106 | } 107 | 108 | run(); 109 | ``` 110 | 111 | ---------- 112 | 113 | *Source:* 114 | - [Singleton pattern](https://en.wikipedia.org/wiki/Singleton_pattern)*. From Wikipedia, the free encyclopedia.* 115 | - [Singleton](http://www.dofactory.com/javascript/singleton-design-pattern)*. Singleton JavaScript Design Pattern with examples.* 116 | -------------------------------------------------------------------------------- /_glossary/THREEJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Three.js 3 | excerpt: a lightweight 3D library to create and display animated 3D computer graphics on a Web browser 4 | --- 5 | 6 | # Three.js 7 | 8 | [Three.js](http://threejs.org/) the aim of the project is to create a lightweight 3D library with a very low level of complexity. The library can be used in conjunction with the HTML5 [``](/_glossary/CANVAS.md), ``, CSS3D and [WebGL](/_glossary/WEBGL.md) renderers. 9 | 10 | It has been popularized as one of the most important for creating animations WebGL. 11 | -------------------------------------------------------------------------------- /_glossary/TYPESCRIPT.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TypeScript 3 | excerpt: a super-set of the JavaScript language that introduces types 4 | --- 5 | 6 | # TypeScript 7 | 8 | [TypeScript](http://www.typescriptlang.org/) is a super-set of the JavaScript language that introduces types (plus interfaces and new JavaScript features). It allows type-checking during development time with supported editors such as [Visual Studio](https://code.visualstudio.com/). The compiler requires information about the “shape” of a module in a *type-definition-file*. 9 | -------------------------------------------------------------------------------- /_glossary/UMD.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UMD 3 | excerpt: a pattern of universal module definition for JavaScript modules 4 | --- 5 | 6 | # UMD 7 | 8 | [UMD](https://github.com/umdjs/umd) is a pattern of universal module definition for JavaScript modules. These modules are capable of working everywhere, be it in the client, on the server or elsewhere. 9 | 10 | The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g [RequireJS](/_glossary/REQUIREJS.md) amongst others). In many cases it uses [AMD](/_glossary/AMD.md) as a base, with special-casing added to handle [CommonJS](/_glossary/COMMONJS.md) compatibility. 11 | -------------------------------------------------------------------------------- /_glossary/UNDERSCORE.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Underscore 3 | excerpt: a swiss army knife, focusing on helper methods for most built-in objects 4 | --- 5 | 6 | # Underscore 7 | 8 | [Underscore](http://underscorejs.org/) is a small library which provides many helpers to write JavaScript in a more functional way without extending built-in prototypes. It may be seen as the swiss army knife of JavaScript development, as it provides a helper for most API shortcomings of built-in objects. 9 | -------------------------------------------------------------------------------- /_glossary/UNIVERSAL.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Universal 3 | excerpt: an application is said to be universal (isomorphic) when its code can run both in the client and the server 4 | --- 5 | 6 | # Universal 7 | 8 | A universal (or [isomorphic](/_glossary/ISOMORPHIC.md)) application is one whose code (in this case, JavaScript) can run both in the server and the client. 9 | 10 | The underlying idea is to allow the server to render and handle routing of an application for non-JavaScript users, while also making it fully working in the browser for fast interactions without involving traditional page reloads. 11 | 12 | In a universal application, the initial request made by the web browser is processed by the server while subsequent requests are processed by the client. 13 | -------------------------------------------------------------------------------- /_glossary/V8.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: V8 3 | excerpt: Google’s open source JavaScript engine. It’s what Chrome is running, but it’s also used for other projects like Node.js and MongoDB 4 | --- 5 | 6 | # V8 7 | 8 | [V8](https://code.google.com/p/v8/) is Google’s open source, high performance JavaScript engine. It is written in C++ and is used in Google Chrome and other projects. 9 | 10 | V8 compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects objects it no longer needs. 11 | 12 | Check out the [Github repository](https://github.com/v8/v8/wiki) for more information. 13 | -------------------------------------------------------------------------------- /_glossary/VANILLA.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vanilla 3 | excerpt: a term for library/framework free JavaScript 4 | --- 5 | 6 | # Vanilla 7 | 8 | [Vanilla](http://vanilla-js.com/) (aka VanillaJS) is a name to refer to using plain JavaScript without any additional libraries like jQuery. Other names are *Plain Old Javascript* or *Core Javascript*. 9 | 10 | It is sometimes ironically referred to as a library, as a joke for people who could be seen as mindlessly using different frameworks. 11 | 12 | Some people have gone so far to release this library, usually with an empty or comment-only JS file. 13 | -------------------------------------------------------------------------------- /_glossary/VIRTUAL_DOM.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Virtual DOM 3 | excerpt: a pattern in which a JavaScript representation of the desired DOM is created and the framework sorts out the details of how to make it happen 4 | --- 5 | 6 | # Virtual DOM 7 | 8 | The Virtual DOM is a concept pioneered by [React](/_glossary/REACT.md) but since duplicated in other places including in [its own library](https://github.com/Matt-Esch/virtual-dom). With Virtual DOM, rather than modifying the [DOM](/_glossary/DOM.md) directly (or through some library), you create a set of JavaScript objects that represent the DOM that you would like. A simplistic example might be something like this 9 | 10 | ```js 11 | { 12 | nodeType: "DIV", 13 | className: "container hero", 14 | children: [ 15 | { 16 | nodeType: "H1", 17 | chidren: [ 18 | { 19 | nodeType: "TEXT", 20 | textContents: "Welcome!!!", 21 | ], 22 | ], 23 | } 24 | ``` 25 | 26 | When rendering, this model gets modified (and is often regenerated fully) by application code and passed to a diffing algorithm to identify what needs to change. These changes are then passed to the library which applies them to the DOM. 27 | 28 | The Virtual DOM is therefore: 29 | 30 | * Method(s) for creating this JavaScript representation of the visual tree 31 | * A diffing algorithm 32 | * A set of handlers which can apply patches generated by the diffing algorithm 33 | 34 | This approach can have significant peformance benefits as the library can optimize rendering in ways that browsers would have difficulty with; for example by batching changes together or chosing to not apply a change if it is undone by one further along in the batch. 35 | 36 | Virtual DOM is also known for granting code-maintainability benefits. Typically the Virtual DOM is immutable and regenerated fully every time any change is made. Therefore, at its heart, all of rendering is a single function that transforms an input of application state to a Virtual DOM tree. This statelessness can make debugging and testing of rendering code very straightforward as you only need to consider the input and output, not any previously rendered states. 37 | 38 | A final benefit, is that since the Virtual DOM representation is just JavaScript, it can be output in formats other than a sequence of DOM manipulations. For example isomorphic JavaScript will render it as an HTML string which can be returned from a web request with the client-side app effectively "running" on the server (useful for loading the first page as rapidly as possible or for clients with JavaScript disabled). 39 | -------------------------------------------------------------------------------- /_glossary/VUEJS.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: VueJS 3 | excerpt: a library for creating user interfaces based on data models 4 | --- 5 | 6 | # VueJS 7 | 8 | [VueJS](http://vuejs.org/) is a JavaScript library for creating user interfaces (views) based on underlying data-models. Instead of only updating user data in the DOM, a data-model will be in sync to reflect the changes. Vue works through reactive data-binding. It means when you update for example a form-field, the underlying data-model is updated automatically. When other parts of the website are also bound to the same data-model, its content will update immediately. 9 | -------------------------------------------------------------------------------- /_glossary/WEBGL.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: WebGL 3 | excerpt: a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins 4 | --- 5 | 6 | # WebGL 7 | 8 | [WebGL](https://www.khronos.org/webgl/) (for Web Graphics Library) is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript. 9 | 10 | WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 [``](/_glossary/CANVAS.md) elements. 11 | -------------------------------------------------------------------------------- /_glossary/WEBPACK.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Webpack 3 | excerpt: a dependency manager with a friendly and fast development environment, simplifying a lot of common tasks 4 | --- 5 | 6 | # Webpack 7 | 8 | [Webpack](https://github.com/webpack/webpack) helps you manage dependencies in your project, and also offers a friendly and fast development environment, simplifying a lot of common tasks behind a simple configuration file. It also allows you to bundle your modules into static assets for browsers. Its killer feature is known as [hot module replacement](https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack), which lets your live code in the browser update automatically as you change files in your preferred editor without a page reload. 9 | -------------------------------------------------------------------------------- /_glossary/XHR.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: XHR 3 | excerpt: XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server without page refresh 4 | --- 5 | 6 | # XHR 7 | 8 | XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing. 9 | -------------------------------------------------------------------------------- /_glossary/YEOMAN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Yeoman 3 | excerpt: a generator builder to speed up the setup and installation process of a project or part of a project 4 | --- 5 | 6 | # Yeoman 7 | 8 | [Yeoman](http://yeoman.io/) is both a generator builder and an ecosystem. A generator is basically a plugin which will generate files based on user input. Plugins can be run with the `yo` command to scaffold complete projects or useful parts. 9 | 10 | Therefore, the goal of a Yeoman generator is usually (but not necessarily) to speed up the setup and installation process of a project or part of a project by packaging it inside a module that can be configured through a question/reply workflow from the command line. 11 | -------------------------------------------------------------------------------- /_glossary/ZEPTO.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Zepto 3 | excerpt: a lightweight jQuery clone, without all the browser-compatibility specific code 4 | --- 5 | 6 | # Zepto 7 | 8 | [Zepto](http://zeptojs.com/) is a lightweight DOM library in the same flavor of [jQuery](/_glossary/JQUERY.md) but much lighter. Its main purpose is to provide a faster implementation for people that do not intend to support all browsers and do not 9 | need to have all of jQuery’s features. 10 | -------------------------------------------------------------------------------- /_includes/abbr.html: -------------------------------------------------------------------------------- 1 | {% for abbr in site.data.abbr %} 2 | *[{{ abbr[0] }}]: {{ abbr[1] }} 3 | {% endfor %} 4 | -------------------------------------------------------------------------------- /_includes/alphabet.html: -------------------------------------------------------------------------------- 1 |
2 | 7 |
8 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | {% capture styles %}{% include styles.css %}{% endcapture %} 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /_includes/letter.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /_includes/particles_toggle.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 6 |
7 | -------------------------------------------------------------------------------- /_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /_includes/search.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /_includes/sprite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | search 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_includes/styles.css: -------------------------------------------------------------------------------- 1 | /* -------------------------------------------------------------------------- *\ 2 | * Base 3 | * -------------------------------------------------------------------------- */ 4 | 5 | html { font-size: 100%; } 6 | 7 | * { 8 | box-sizing: inherit; 9 | } 10 | 11 | html { 12 | box-sizing: border-box; 13 | } 14 | 15 | body { 16 | margin: 0; 17 | font: 125% / 1.4 'Helvetica', 'Arial', sans-serif; 18 | background-color: #ebe7df; 19 | } 20 | 21 | a { 22 | color: #337ab7; 23 | text-decoration: none; 24 | } 25 | 26 | a[href^="http"]::after { 27 | content: ' ↗'; 28 | border-bottom: 0; 29 | display: inline-block; 30 | font-weight: bold; 31 | transform: scale(0.6); 32 | } 33 | 34 | a:not([class]):hover, 35 | a:not([class]):active { 36 | border-bottom: 1px solid; 37 | } 38 | 39 | abbr[title] { 40 | border-bottom: 1px dotted; 41 | cursor: help; 42 | text-decoration: none; 43 | } 44 | 45 | section:not(:last-of-type) { 46 | margin-bottom: 2em; 47 | } 48 | 49 | img { 50 | display: block; 51 | height: auto; 52 | max-width: 100%; 53 | } 54 | 55 | h1, .as-h1 { 56 | font-size: 2em; 57 | margin: 0 0 20px; 58 | } 59 | 60 | pre { 61 | background-color: #f8f8f8; 62 | border: 3px solid rgba(0, 0, 0, 0.1); 63 | padding: 20px; 64 | overflow: auto; 65 | } 66 | 67 | /* -------------------------------------------------------------------------- *\ 68 | * Helpers 69 | * -------------------------------------------------------------------------- */ 70 | 71 | .container { 72 | max-width: 100%; 73 | width: 750px; 74 | padding: 0 20px; 75 | margin: 0 auto; 76 | } 77 | 78 | .visually-hidden { 79 | border: 0; 80 | clip: rect(0 0 0 0); 81 | height: 1px; 82 | margin: -1px; 83 | overflow: hidden; 84 | padding: 0; 85 | position: absolute; 86 | width: 1px; 87 | } 88 | 89 | .box { 90 | padding: 20px; 91 | border: 3px solid black; 92 | background-color: white; 93 | margin: 20px 0; 94 | } 95 | 96 | .box--transparent { 97 | background-color: transparent; 98 | } 99 | 100 | .box--accent { 101 | border-color: #eb5424; 102 | } 103 | 104 | .box--collapse { 105 | padding: 0; 106 | } 107 | 108 | .intro { 109 | font-size: 80%; 110 | color: #999; 111 | font-style: italic; 112 | margin-top: 0; 113 | text-align: center; 114 | } 115 | 116 | /* -------------------------------------------------------------------------- *\ 117 | * Index list 118 | * -------------------------------------------------------------------------- */ 119 | 120 | .index-list { 121 | margin: 10px; 122 | list-style: none; 123 | padding-left: 0; 124 | } 125 | 126 | .index-list li { 127 | color: #666; 128 | margin-bottom: 10px; 129 | } 130 | 131 | .index-list li::before { 132 | color: #000; 133 | content: '→ '; 134 | display: inline-block; 135 | margin-right: 0.25em; 136 | margin-right: 1ch; 137 | font-family: monospace; 138 | transform: translateY(-3px) scale(1.2); 139 | } 140 | 141 | /* -------------------------------------------------------------------------- *\ 142 | * Alphabet 143 | * -------------------------------------------------------------------------- */ 144 | 145 | .alphabet { 146 | list-style: none; 147 | text-align: center; 148 | margin: 0; 149 | padding: 0; 150 | font-size: 80%; 151 | } 152 | 153 | .alphabet li { 154 | display: inline-block; 155 | padding: 0 4px; 156 | } 157 | 158 | @media (max-width: 700px) { 159 | .alphabet li { 160 | line-height: 2; 161 | padding: 0 8px; 162 | } 163 | } 164 | 165 | .alphabet a { 166 | color: inherit; 167 | } 168 | 169 | /* -------------------------------------------------------------------------- *\ 170 | * Search form 171 | * -------------------------------------------------------------------------- */ 172 | 173 | .search { 174 | display: -webkit-box; 175 | display: -webkit-flex; 176 | display: -ms-flexbox; 177 | display: flex; 178 | } 179 | 180 | .search__input { 181 | display: inline-block; 182 | padding: 10px; 183 | font: inherit; 184 | border-radius: 0; 185 | width: 100%; 186 | border: 0; 187 | } 188 | 189 | @media screen and (prefers-reduced-motion: no-preference) { 190 | .search__input:focus + .search__button span { 191 | animation: pulse 1s infinite alternate; 192 | } 193 | } 194 | 195 | .search__button { 196 | font: inherit; 197 | background-color: #eb5424; 198 | color: white; 199 | display: flex; 200 | align-items: center; 201 | border: 0; 202 | padding: 0 15px; 203 | cursor: pointer; 204 | border-radius: 0; 205 | } 206 | 207 | .search__button span { 208 | display: inline-block; 209 | transition: 0.15s; 210 | } 211 | 212 | .search__button:hover span, 213 | .search__button:active span { 214 | -webkit-transform: scale(1.3); 215 | transform: scale(1.3); 216 | } 217 | 218 | @keyframes pulse { 219 | from { transform: scale(1); } 220 | to { transform: scale(1.15); } 221 | } 222 | 223 | /* -------------------------------------------------------------------------- *\ 224 | * Icon 225 | * -------------------------------------------------------------------------- */ 226 | 227 | .icon { 228 | display: inline-block; 229 | width: 1em; 230 | height: 1em; 231 | color: inherit; 232 | fill: currentColor; 233 | vertical-align: middle; 234 | } 235 | 236 | /* -------------------------------------------------------------------------- *\ 237 | * Particles 238 | * -------------------------------------------------------------------------- */ 239 | 240 | .particles { 241 | position: fixed; 242 | top: 0; 243 | right: 0; 244 | bottom: 0; 245 | left: 0; 246 | z-index: -1; 247 | } 248 | 249 | /* -------------------------------------------------------------------------- *\ 250 | * Header 251 | * -------------------------------------------------------------------------- */ 252 | 253 | .header { 254 | margin-top: 40px; 255 | } 256 | 257 | .header__link { 258 | display: block; 259 | } 260 | 261 | .header__link img { 262 | border: 0; 263 | } 264 | 265 | @media screen and (prefers-reduced-motion: no-preference) { 266 | .header__link img { 267 | animation: subtle-move 3s; 268 | animation-iteration-count: infinite; 269 | animation-direction: alternate; 270 | } 271 | } 272 | 273 | @keyframes subtle-move { 274 | from { transform: translateY(0px); } 275 | to { transform: translateY(-6px); } 276 | } 277 | 278 | /* -------------------------------------------------------------------------- *\ 279 | * Main 280 | * -------------------------------------------------------------------------- */ 281 | 282 | .main { 283 | margin-bottom: 30px; 284 | } 285 | 286 | /* -------------------------------------------------------------------------- *\ 287 | * Footer 288 | * -------------------------------------------------------------------------- */ 289 | 290 | .footer { 291 | font-size: 80%; 292 | opacity: 0.5; 293 | transition: 0.6s; 294 | } 295 | 296 | .footer:hover, 297 | .footer:active { 298 | opacity: 1; 299 | } 300 | 301 | /* -------------------------------------------------------------------------- *\ 302 | * Particles toggle 303 | * -------------------------------------------------------------------------- */ 304 | .particles-toggle__label { 305 | text-transform: uppercase; 306 | font-size: 70%; 307 | opacity: 0.7; 308 | } 309 | 310 | /* -------------------------------------------------------------------------- *\ 311 | * Code highlighting 312 | * -------------------------------------------------------------------------- */ 313 | 314 | .highlight table td { padding: 5px; } 315 | .highlight table pre { margin: 0; } 316 | .highlight .cm { 317 | color: #999988; 318 | font-style: italic; 319 | } 320 | .highlight .cp { 321 | color: #999999; 322 | font-weight: bold; 323 | } 324 | .highlight .c1 { 325 | color: #999988; 326 | font-style: italic; 327 | } 328 | .highlight .cs { 329 | color: #999999; 330 | font-weight: bold; 331 | font-style: italic; 332 | } 333 | .highlight .c, .highlight .cd { 334 | color: #999988; 335 | font-style: italic; 336 | } 337 | .highlight .err { 338 | color: #a61717; 339 | background-color: #e3d2d2; 340 | } 341 | .highlight .gd { 342 | color: #000000; 343 | background-color: #ffdddd; 344 | } 345 | .highlight .ge { 346 | color: #000000; 347 | font-style: italic; 348 | } 349 | .highlight .gr { 350 | color: #aa0000; 351 | } 352 | .highlight .gh { 353 | color: #999999; 354 | } 355 | .highlight .gi { 356 | color: #000000; 357 | background-color: #ddffdd; 358 | } 359 | .highlight .go { 360 | color: #888888; 361 | } 362 | .highlight .gp { 363 | color: #555555; 364 | } 365 | .highlight .gs { 366 | font-weight: bold; 367 | } 368 | .highlight .gu { 369 | color: #aaaaaa; 370 | } 371 | .highlight .gt { 372 | color: #aa0000; 373 | } 374 | .highlight .kc { 375 | color: #000000; 376 | font-weight: bold; 377 | } 378 | .highlight .kd { 379 | color: #000000; 380 | font-weight: bold; 381 | } 382 | .highlight .kn { 383 | color: #000000; 384 | font-weight: bold; 385 | } 386 | .highlight .kp { 387 | color: #000000; 388 | font-weight: bold; 389 | } 390 | .highlight .kr { 391 | color: #000000; 392 | font-weight: bold; 393 | } 394 | .highlight .kt { 395 | color: #445588; 396 | font-weight: bold; 397 | } 398 | .highlight .k, .highlight .kv { 399 | color: #000000; 400 | font-weight: bold; 401 | } 402 | .highlight .mf { 403 | color: #009999; 404 | } 405 | .highlight .mh { 406 | color: #009999; 407 | } 408 | .highlight .il { 409 | color: #009999; 410 | } 411 | .highlight .mi { 412 | color: #009999; 413 | } 414 | .highlight .mo { 415 | color: #009999; 416 | } 417 | .highlight .m, .highlight .mb, .highlight .mx { 418 | color: #009999; 419 | } 420 | .highlight .sb { 421 | color: #d14; 422 | } 423 | .highlight .sc { 424 | color: #d14; 425 | } 426 | .highlight .sd { 427 | color: #d14; 428 | } 429 | .highlight .s2 { 430 | color: #d14; 431 | } 432 | .highlight .se { 433 | color: #d14; 434 | } 435 | .highlight .sh { 436 | color: #d14; 437 | } 438 | .highlight .si { 439 | color: #d14; 440 | } 441 | .highlight .sx { 442 | color: #d14; 443 | } 444 | .highlight .sr { 445 | color: #009926; 446 | } 447 | .highlight .s1 { 448 | color: #d14; 449 | } 450 | .highlight .ss { 451 | color: #990073; 452 | } 453 | .highlight .s { 454 | color: #d14; 455 | } 456 | .highlight .na { 457 | color: #008080; 458 | } 459 | .highlight .bp { 460 | color: #999999; 461 | } 462 | .highlight .nb { 463 | color: #0086B3; 464 | } 465 | .highlight .nc { 466 | color: #445588; 467 | font-weight: bold; 468 | } 469 | .highlight .no { 470 | color: #008080; 471 | } 472 | .highlight .nd { 473 | color: #3c5d5d; 474 | font-weight: bold; 475 | } 476 | .highlight .ni { 477 | color: #800080; 478 | } 479 | .highlight .ne { 480 | color: #990000; 481 | font-weight: bold; 482 | } 483 | .highlight .nf { 484 | color: #990000; 485 | font-weight: bold; 486 | } 487 | .highlight .nl { 488 | color: #990000; 489 | font-weight: bold; 490 | } 491 | .highlight .nn { 492 | color: #555555; 493 | } 494 | .highlight .nt { 495 | color: #000080; 496 | } 497 | .highlight .vc { 498 | color: #008080; 499 | } 500 | .highlight .vg { 501 | color: #008080; 502 | } 503 | .highlight .vi { 504 | color: #008080; 505 | } 506 | .highlight .nv { 507 | color: #008080; 508 | } 509 | .highlight .ow { 510 | color: #000000; 511 | font-weight: bold; 512 | } 513 | .highlight .o { 514 | color: #000000; 515 | font-weight: bold; 516 | } 517 | .highlight .w { 518 | color: #bbbbbb; 519 | } 520 | .highlight { 521 | background-color: #f8f8f8; 522 | } 523 | 524 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | 6 | {% include sprite.svg %} 7 | 8 | 9 | 10 | {% include header.html %} 11 | {% include particles_toggle.html %} 12 | 13 |
14 | {% include search.html %} 15 | {% include alphabet.html %} 16 | 17 |
18 | {% capture content %} 19 | {% include abbr.html %} 20 | {{ content }} 21 | {% endcapture %} 22 | 23 | {{ content | strip | markdownify }} 24 |
25 |
26 | 27 | {% include footer.html %} 28 | {% include scripts.html %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KittyGiraudel/SJSJ/afa7d78118ab5a5256da177b958befdc817b8f4d/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KittyGiraudel/SJSJ/afa7d78118ab5a5256da177b958befdc817b8f4d/assets/images/favicon.png -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KittyGiraudel/SJSJ/afa7d78118ab5a5256da177b958befdc817b8f4d/assets/images/logo.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var particlesOptions = { 3 | 'particles': { 4 | 'number': { 5 | 'value': 80, 6 | 'density': { 7 | 'enable': true, 8 | 'value_area': 800 9 | } 10 | }, 11 | 'color': { 12 | 'value': '#8C867B' 13 | }, 14 | 'shape': { 15 | 'type': 'circle', 16 | 'stroke': { 17 | 'width': 0, 18 | 'color': '#000000' 19 | }, 20 | 'polygon': { 21 | 'nb_sides': 5 22 | }, 23 | 'image': { 24 | 'src': 'img/github.svg', 25 | 'width': 100, 26 | 'height': 100 27 | } 28 | }, 29 | 'opacity': { 30 | 'value': 0.5, 31 | 'random': false, 32 | 'anim': { 33 | 'enable': false, 34 | 'speed': 1, 35 | 'opacity_min': 0.1, 36 | 'sync': false 37 | } 38 | }, 39 | 'size': { 40 | 'value': 3, 41 | 'random': true, 42 | 'anim': { 43 | 'enable': false, 44 | 'speed': 40, 45 | 'size_min': 0.1, 46 | 'sync': false 47 | } 48 | }, 49 | 'line_linked': { 50 | 'enable': true, 51 | 'distance': 150, 52 | 'color': '#8C867B', 53 | 'opacity': 0.4, 54 | 'width': 1 55 | }, 56 | 'move': { 57 | 'enable': !prefersReducedMotion(), 58 | 'speed': 2, 59 | 'direction': 'none', 60 | 'random': false, 61 | 'straight': false, 62 | 'out_mode': 'out', 63 | 'bounce': false, 64 | 'attract': { 65 | 'enable': false, 66 | 'rotateX': 600, 67 | 'rotateY': 1200 68 | } 69 | } 70 | }, 71 | 'interactivity': { 72 | 'detect_on': 'canvas', 73 | 'events': { 74 | 'onhover': { 75 | 'enable': true, 76 | 'mode': 'grab' 77 | }, 78 | 'onclick': { 79 | 'enable': true, 80 | 'mode': 'push' 81 | }, 82 | 'resize': true 83 | }, 84 | 'modes': { 85 | 'grab': { 86 | 'distance': 140, 87 | 'line_linked': { 88 | 'opacity': 1 89 | } 90 | }, 91 | 'bubble': { 92 | 'distance': 400, 93 | 'size': 40, 94 | 'duration': 2, 95 | 'opacity': 8, 96 | 'speed': 3 97 | }, 98 | 'repulse': { 99 | 'distance': 200, 100 | 'duration': 0.4 101 | }, 102 | 'push': { 103 | 'particles_nb': 4 104 | }, 105 | 'remove': { 106 | 'particles_nb': 2 107 | } 108 | } 109 | }, 110 | 'retina_detect': true 111 | } 112 | 113 | function async(u, c) { 114 | var d = document, t = 'script', 115 | o = d.createElement(t), 116 | s = d.getElementsByTagName(t)[0]; 117 | o.src = '//' + u; 118 | if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); } 119 | s.parentNode.insertBefore(o, s); 120 | } 121 | 122 | function prefersReducedMotion () { 123 | return window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches 124 | } 125 | 126 | function toggleParticlesAnimation (running) { 127 | if (window.pJSDom) { 128 | window.pJSDom[0].pJS.particles.move.enable = running 129 | window.pJSDom[0].pJS.fn.particlesRefresh() 130 | } 131 | } 132 | 133 | function init () { 134 | var container = document.getElementById('search-container') 135 | var form = document.getElementById('search-form') 136 | var field = document.getElementById('search-field') 137 | var particlesToggle = document.getElementById('particles-toggle') 138 | 139 | container.style.display = 'block' 140 | 141 | form.addEventListener('submit', function search (event) { 142 | event.preventDefault() 143 | var route = window.router[field.value] 144 | if (route) window.location.href = route 145 | }) 146 | 147 | async('cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js', function () { 148 | window.particlesJS('particles-js', particlesOptions) 149 | }) 150 | 151 | particlesToggle.addEventListener('change', function (event) { 152 | toggleParticlesAnimation(event.target.checked) 153 | }) 154 | 155 | particlesToggle.checked = particlesOptions.particles.move.enable 156 | } 157 | 158 | init() 159 | }()) 160 | -------------------------------------------------------------------------------- /assets/js/main.min.js: -------------------------------------------------------------------------------- 1 | (function(){var particlesOptions={particles:{number:{value:80,density:{enable:true,value_area:800}},color:{value:"#8C867B"},shape:{type:"circle",stroke:{width:0,color:"#000000"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:.5,random:false,anim:{enable:false,speed:1,opacity_min:.1,sync:false}},size:{value:3,random:true,anim:{enable:false,speed:40,size_min:.1,sync:false}},line_linked:{enable:true,distance:150,color:"#8C867B",opacity:.4,width:1},move:{enable:!prefersReducedMotion(),speed:2,direction:"none",random:false,straight:false,out_mode:"out",bounce:false,attract:{enable:false,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:true,mode:"grab"},onclick:{enable:true,mode:"push"},resize:true},modes:{grab:{distance:140,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:true};function async(u,c){var d=document,t="script",o=d.createElement(t),s=d.getElementsByTagName(t)[0];o.src="//"+u;if(c){o.addEventListener("load",function(e){c(null,e)},false)}s.parentNode.insertBefore(o,s)}function prefersReducedMotion(){return window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches}function toggleParticlesAnimation(running){if(window.pJSDom){window.pJSDom[0].pJS.particles.move.enable=running;window.pJSDom[0].pJS.fn.particlesRefresh()}}function init(){var container=document.getElementById("search-container");var form=document.getElementById("search-form");var field=document.getElementById("search-field");var particlesToggle=document.getElementById("particles-toggle");container.style.display="block";form.addEventListener("submit",function search(event){event.preventDefault();var route=window.router[field.value];if(route)window.location.href=route});async("cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js",function(){window.particlesJS("particles-js",particlesOptions)});particlesToggle.addEventListener("change",function(event){toggleParticlesAnimation(event.target.checked)});particlesToggle.checked=particlesOptions.particles.move.enable}init()})(); 2 | -------------------------------------------------------------------------------- /bin/export: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | 'use strict'; 4 | 5 | const fs = require('fs-promise') 6 | const path = require('path') 7 | const marked = require('marked') 8 | 9 | const GLOSSARY_FOLDER = path.join(process.cwd(), '_glossary') 10 | const DESTINATION_FILE = process.argv[2] || 'data.json' 11 | 12 | const getMarkdown = (content) => 13 | content.match(/^.*?(?:---)(?:[\s\S]*?)(?:---)([\s\S]*)$/)[1] || '' 14 | 15 | const parseFile = (file, content) => ({ 16 | name: content.match(/^title:\s*(.+)$/m)[1], 17 | description: content.match(/^excerpt:\s*(.+)$/m)[1], 18 | markdown: getMarkdown(content), 19 | html: marked(getMarkdown(content)), 20 | url: `https://github.com/KittyGiraudel/SJSJ/blob/master/_glossary/${file}` 21 | }) 22 | 23 | const readFile = (file) => 24 | fs.readFile(path.join(GLOSSARY_FOLDER, file), 'utf8') 25 | 26 | const collect = (file) => 27 | readFile(file).then(parseFile.bind(null, file)) 28 | 29 | const readEntries = () => 30 | fs.readdir(GLOSSARY_FOLDER) 31 | 32 | const processFiles = (files) => 33 | Promise.all(files.map(collect)) 34 | 35 | const buildJSON = (entries) => 36 | JSON.stringify(entries, null, 2) 37 | 38 | const writeJSON = (data) => 39 | fs.writeFile(DESTINATION_FILE, data) 40 | 41 | const logEnd = () => 42 | console.log(`${DESTINATION_FILE} successfully generated.`) 43 | 44 | readEntries() 45 | .then(processFiles) 46 | .then(buildJSON) 47 | .then(writeJSON) 48 | .then(logEnd) 49 | .catch(console.log) 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 |

If you enjoy Simplified JavaScript Jargon, be sure to check the related projects!

5 | 6 | {% for letter in site.alphabet %} 7 |
8 | {{ letter.letter | upcase }} 9 | 10 | 18 |
19 | {% endfor %} 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "fs-promise": "^0.4.1", 4 | "marked": "^0.3.5", 5 | "uglify-js": "^2.6.2" 6 | }, 7 | "scripts": { 8 | "js": "cat assets/js/main.js | uglifyjs > assets/js/main.min.js", 9 | "export": "node bin/export" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /related/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | # Related projects 6 | 7 | A bunch of smart people have built projects around Simplified JavaScript Jargon. If you too built something revolving around SJSJ, be sure to add it to this list! 8 | 9 | ## SJSJ in Russian 10 | 11 | [Andrew Romanov](https://github.com/andrew) maintains [a Russian version of SJSJ](https://github.com/andrew--r/SJSJ). 12 | 13 | ## SJSJ command line tool 14 | 15 | [Hank Wang](https://github.com/hanksudo) has created [a CLI utility](https://github.com/hanksudo/SJSJ-cli) to access entries from SJSJ from your terminal. 16 | 17 | ![Screenshot of SJSJ-cli](https://github.com/hanksudo/SJSJ-cli/raw/master/screenshot.png) 18 | 19 | ## SJSJ Chrome extension 20 | 21 | [Hamza](https://github.com/ismnoiet) built [a Chrome extension](https://github.com/ismnoiet/JSJargon) to access entries from SJSJ from your browser. 22 | 23 | ![Screenshot of the SJSJ Chrome extension](https://github.com/ismnoiet/JSJargon/raw/master/assets/img/screenshot1.png) 24 | 25 | ## SJSJ Alfred workflow 26 | 27 | [Youmoo](https://github.com/Youmoo) built [an Alfred workflow](https://github.com/Youmoo/alfred-javascript-jargon) to access entries from SJSJ from your desktop. 28 | 29 | ![Screenshot of the SJSJ Alfred workflow](https://github.com/Youmoo/alfred-javascript-jargon/raw/master/sjsj.gif) 30 | 31 | ## SJSJ data crawler 32 | 33 | The [GitHub repository](https://github.com/KittyGiraudel/SJSJ) contains a tiny Node.js script to export all entries as a JSON file. 34 | 35 | To use it, clone the repository and run: 36 | 37 | ``` 38 | npm install 39 | npm run export -- data.json 40 | ``` 41 | --------------------------------------------------------------------------------