├── book.json ├── images ├── dns.jpg ├── host.jpg ├── things.jpg ├── web-api.png ├── full-stack.jpg ├── making-fd.png ├── browsers-work.png ├── fd-devs-for.jpeg ├── stacks-change.jpg ├── statcounter.png ├── front-end-salary.png ├── front-end-skills.png ├── web-tech-employed.jpg └── what-is-front-end-dev.png ├── styles ├── ebook.css └── website.css ├── practice.md ├── learning ├── direct-learning.md ├── learn-from.md ├── static.md ├── api.md ├── templates.md ├── offline.md ├── security.md ├── module.md ├── dns.md ├── cli.md ├── headless-browsers.md ├── internet.md ├── hosting.md ├── animation.md ├── seo.md ├── self-direct-learning.md ├── package-manager.md ├── front-end-apps.md ├── version-control.md ├── node.md ├── perf.md ├── json.md ├── build.md ├── fonts.md ├── test.md ├── news-podcasts.md ├── http-networks.md ├── ui-design-patterns.md ├── browser-dev-tools.md ├── multi-thing-dev.md ├── accessibility.md ├── web-api.md ├── front-end.md ├── dom.md ├── courses.md ├── html-css.md ├── browsers.md └── javascript.md ├── template.md ├── .gitignore ├── tools ├── testing.md ├── seo.md ├── repo.md ├── offline.md ├── loaders.md ├── security.md ├── diagram.md ├── error.md ├── task.md ├── http.md ├── uptime.md ├── browsedocs.md ├── scaffolding.md ├── project-hosting.md ├── comm.md ├── hosting.md ├── deploy.md ├── static.md ├── db.md ├── animation.md ├── proto.md ├── graphics.md ├── cms.md ├── baas.md ├── perf.md ├── fonts.md ├── svg.md ├── templates.md ├── charting.md ├── ui.md ├── json.md ├── general-tools.md ├── dom.md ├── html.md ├── browser.md ├── css.md ├── js.md ├── code-editor.md └── apps.md ├── tools.md ├── learning.md ├── practice ├── salaries.md ├── interview-q.md ├── jobboards.md ├── myth.md ├── team.md ├── fd-dev-for.md ├── skills.md ├── types-of-front-end-dev.md ├── making-fd.md └── tech-employed-by-fd.md ├── myIntro.md ├── README.md ├── what-is-a-FD.md └── SUMMARY.md /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "structure": { 3 | "readme": "myIntro.md" 4 | } 5 | } -------------------------------------------------------------------------------- /images/dns.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/dns.jpg -------------------------------------------------------------------------------- /images/host.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/host.jpg -------------------------------------------------------------------------------- /images/things.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/things.jpg -------------------------------------------------------------------------------- /images/web-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/web-api.png -------------------------------------------------------------------------------- /images/full-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/full-stack.jpg -------------------------------------------------------------------------------- /images/making-fd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/making-fd.png -------------------------------------------------------------------------------- /images/browsers-work.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/browsers-work.png -------------------------------------------------------------------------------- /images/fd-devs-for.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/fd-devs-for.jpeg -------------------------------------------------------------------------------- /images/stacks-change.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/stacks-change.jpg -------------------------------------------------------------------------------- /images/statcounter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/statcounter.png -------------------------------------------------------------------------------- /images/front-end-salary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/front-end-salary.png -------------------------------------------------------------------------------- /images/front-end-skills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/front-end-skills.png -------------------------------------------------------------------------------- /images/web-tech-employed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/web-tech-employed.jpg -------------------------------------------------------------------------------- /styles/ebook.css: -------------------------------------------------------------------------------- 1 | cite{ 2 | margin-top: -30px; 3 | font-size:10px; 4 | text-align: center; 5 | color: #666; 6 | } -------------------------------------------------------------------------------- /styles/website.css: -------------------------------------------------------------------------------- 1 | cite{ 2 | margin-top: -30px; 3 | font-size:10px; 4 | text-align: center; 5 | color: #666; 6 | } -------------------------------------------------------------------------------- /images/what-is-front-end-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sdras/front-end-handbook/HEAD/images/what-is-front-end-dev.png -------------------------------------------------------------------------------- /practice.md: -------------------------------------------------------------------------------- 1 | # Part I. The front-end practice 2 | 3 | Part one broadly describes the practice of front-end engineering. 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /learning/direct-learning.md: -------------------------------------------------------------------------------- 1 | # Directed learning 2 | 3 | This section focuses on directed learning via schools, courses, programs and bootcamps. -------------------------------------------------------------------------------- /template.md: -------------------------------------------------------------------------------- 1 | # First Chapter 2 | 3 | GitBook allows you to organize your book into chapters, each chapter is stored in a separate file like this one. 4 | -------------------------------------------------------------------------------- /learning/learn-from.md: -------------------------------------------------------------------------------- 1 | # Front-end developers to learn from 2 | 3 | The notion that you should follow an individual to learn about front-end development is slowly becoming pointless. The advanced practitioners of front-end development generate enough content that you can simply follow the community/leaders by paying attention to the front-end "news" outlets (via Newsletters, News outlet, & Podcasts). 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node rules: 2 | ## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 3 | .grunt 4 | 5 | ## Dependency directory 6 | ## Commenting this out is preferred by some people, see 7 | ## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git 8 | node_modules 9 | 10 | # Book build output 11 | _book 12 | 13 | # eBook build output 14 | *.epub 15 | *.mobi 16 | *.pdf -------------------------------------------------------------------------------- /tools/testing.md: -------------------------------------------------------------------------------- 1 | # Testing framework tools 2 | 3 | * [Karma](http://karma-runner.github.io/0.8/index.html) 4 | * [Intern](https://www.contentful.com/) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools/seo.md: -------------------------------------------------------------------------------- 1 | # SEO Tools 2 | 3 | * [Google Webmasters Search Console](https://www.google.com/webmasters/) 4 | * [Varvy SEO tool](https://varvy.com/tools/) 5 | * [Keyword Tool](http://keywordtool.io/) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /tools/repo.md: -------------------------------------------------------------------------------- 1 | # Module/package repository tools 2 | 3 | * [NPM](https://www.npmjs.com/) 4 | * [Bower](http://bower.io/) 5 | * [jspm.io](http://jspm.io/) 6 | * [spmjs](http://spmjs.io/) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools/offline.md: -------------------------------------------------------------------------------- 1 | # Offline tools 2 | 3 | * [upup](https://www.talater.com/upup/) 4 | * [offline.js](http://github.hubspot.com/offline/docs/welcome/) 5 | * [pouchdb](http://pouchdb.com/) 6 | * [hood.ie](http://hood.ie/) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools.md: -------------------------------------------------------------------------------- 1 | # Part III: Tools 2 | 3 | Part three briefly explains and identifies tools of the trade. 4 | 5 | Make sure you understanding the category that a set of tools falls within, before studying the tools themselves. 6 | 7 | Note that just because a tool is listed, or a category of tools is documented, this does not equate to an assertion on my part that a front-end developer should learn it and use it. Choose your own toolbox. I'm just providing the common toolbox options. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /tools/loaders.md: -------------------------------------------------------------------------------- 1 | # Module/package loading tools 2 | 3 | * [SystemJS](https://github.com/systemjs/systemjs) 4 | * [webpack](https://webpack.github.io/) 5 | * [Browserify](http://browserify.org/) 6 | * [rollup.js](http://rollupjs.org/) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools/security.md: -------------------------------------------------------------------------------- 1 | # Security Tools 2 | 3 | ##### Coding tool: 4 | 5 | * [DOMPurify](https://github.com/cure53/DOMPurify) 6 | * [XSS](http://jsxss.com/en/index.html) 7 | 8 | ##### References: 9 | 10 | * [HTML5 Security Cheatsheet](https://html5sec.org/) 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /tools/diagram.md: -------------------------------------------------------------------------------- 1 | # Diagramming tools 2 | 3 | * [Cacoo](https://cacoo.com) [free to $] 4 | * [gliffy](https://www.gliffy.com/products/online/) [free to $] 5 | * [draw.io](https://www.draw.io/) [free to $] 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /tools/error.md: -------------------------------------------------------------------------------- 1 | # JavaScript error reporting/monitoring 2 | 3 | * [Raygun](https://raygun.io) [$] 4 | * [errorception](https://errorception.com/) [$] 5 | * [sentry](https://getsentry.com/welcome/) [$] 6 | * [{track:js}](https://trackjs.com/) [$] 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /learning.md: -------------------------------------------------------------------------------- 1 | # Part II: Learning 2 | 3 | Part two identifies self-directed (i.e. at your own pace when you want) and directed (i.e. formal class room specific times and dates) resources for learning to become a front-end developer. 4 | 5 | Note that just because a learning resource is listed, or a category of learning is documented, I am not suggesting that a front-end developer learn everything. That would be absurd. Choose your own slice of expertise within the profession. I'm providing the possibilities of what could be mastered in the field. -------------------------------------------------------------------------------- /tools/task.md: -------------------------------------------------------------------------------- 1 | # Tasking (aka build) tools 2 | 3 | ##### Tasking/build tools: 4 | 5 | * [Gulp](http://gulpjs.com/) 6 | * [Grunt](http://gruntjs.com/) 7 | 8 | ##### Tasking/build and more tools: 9 | 10 | * [Brunch](http://brunch.io/) 11 | * [Mimosa](http://mimosa.io/) 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tools/http.md: -------------------------------------------------------------------------------- 1 | # HTTP/network tools 2 | 3 | * [Charles](http://www.charlesproxy.com/) [$] 4 | * [Fiddler](http://www.telerik.com/fiddler) 5 | * [Postman](https://www.getpostman.com/) 6 | * [Chrome DevTools Network Panel](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /tools/uptime.md: -------------------------------------------------------------------------------- 1 | # Site/app monitoring tools 2 | 3 | ##### Uptime: 4 | 5 | * [pingdom](https://www.pingdom.com/) [free to $] 6 | * [Uptime Robot](https://uptimerobot.com/) 7 | * [Uptrends](https://www.uptrends.com/) [$] 8 | 9 | ##### General: 10 | 11 | * [New Relic](http://newrelic.com/) 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /tools/browsedocs.md: -------------------------------------------------------------------------------- 1 | # Doc/API browsing tools 2 | 3 | Tools to browser common developer documents and developer API references. 4 | 5 | * [devdocs.io](http://devdocs.io/) 6 | * [Dash](https://kapeli.com/dash) [OSX, iOS][$] 7 | * [Velocity](https://velocity.silverlakesoftware.com/) [windows][$] 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tools/scaffolding.md: -------------------------------------------------------------------------------- 1 | # Scaffolding tools 2 | 3 | Client side Scaffolding is concerned with generating a starter template for the application as a whole, rather than [generating code to access a database](https://en.wikipedia.org/wiki/Scaffold_%28programming%29). 4 | 5 | * [Yeoman](http://yeoman.io/) 6 | * [Slush](http://slushjs.github.io/#/) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools/project-hosting.md: -------------------------------------------------------------------------------- 1 | # Project management & code hosting tools 2 | 3 | * [Github](https://github.com/) [free to $] 4 | * [Codebase](https://www.codebasehq.com/) [$] 5 | * [Bitbucket](https://bitbucket.org) [free to $] 6 | * [Unfuddle](https://unfuddle.com/) [$] 7 | * [Assembla](https://www.assembla.com) [free to $] 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /tools/comm.md: -------------------------------------------------------------------------------- 1 | # Collaboration & communication tools 2 | 3 | * [Slack](http://weightof.it/category/application-frameworks) & [screenhero](https://screenhero.com/) [free to $] 4 | * [Skype](http://www.skype.com/) [free to $] 5 | * [Google Hangouts](https://hangouts.google.com/) 6 | 7 | ##### Code/Github collaboration & communication: 8 | 9 | * [Gitter](https://gitter.im) [free to $] 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /tools/hosting.md: -------------------------------------------------------------------------------- 1 | # Web/cloud/static hosting tools 2 | 3 | * [AWS](https://aws.amazon.com/websites/) [$] 4 | * [Heroku](heroku.com) [free to $] 5 | * [DigitalOcean](digitalocean.com) [$] 6 | * [Modulus](https://modulus.io/) [$] 7 | * [DIVSHOT](divshot.com) [free to $] 8 | * [netlify](https://www.netlify.com) [free to $] 9 | * [surge](https://surge.sh/) [free to $] 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /learning/static.md: -------------------------------------------------------------------------------- 1 | # Learn static site generators 2 | 3 | Static site generators, typically written using server side code (i.e. ruby, php, python, nodeJS etc...), produces static HTML files from static text/data + templates that is indenting to be sent from a server to the client statically without a dynamic nature. 4 | 5 | ##### General learning: 6 | 7 | * [Static Site Generators](http://www.oreilly.com/web-platform/free/static-site-generators.csp) [read] 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tools/deploy.md: -------------------------------------------------------------------------------- 1 | # Deployment tools 2 | 3 | * [FTPLOY](http://ftploy.com/) [free to $] 4 | * [Travis CI](http://docs.travis-ci.com/) [free to $] 5 | * [codeship](https://codeship.com/) [free to $] 6 | * [Bamboo](https://www.atlassian.com/software/bamboo/) [$] 7 | * [Springloops](http://www.springloops.io/) [free to $] 8 | * [surge](https://surge.sh/) 9 | * [sync ninja](http://www.syncninja.com/) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /tools/static.md: -------------------------------------------------------------------------------- 1 | # Static site generators tools 2 | 3 | ##### JS site generators: 4 | 5 | * [Metalsmith](http://www.metalsmith.io/) 6 | * [harp](http://harpjs.com/) 7 | 8 | ##### JS blog site generators: 9 | 10 | * [hubpress.io](http://hubpress.io/) 11 | * [Hexo.io](https://hexo.io/) 12 | 13 | ##### Site generator listings: 14 | 15 | * [staticsitegenerators.net](https://staticsitegenerators.net/) 16 | * [www.staticgen.com](https://www.staticgen.com/) 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tools/db.md: -------------------------------------------------------------------------------- 1 | # Front-end data storage tools 2 | 3 | * [YDN-DB](http://dev.yathit.com/ydn-db/index.html) 4 | * [forerunner](http://forerunnerdb.com/) 5 | * [AlaSQL](http://alasql.org/) 6 | * [LokiJS](http://lokijs.org/#/) 7 | * [lovefield](https://google.github.io/lovefield) 8 | * [Dexie.js](http://www.dexie.org/) 9 | * [localForage](http://mozilla.github.io/localForage/) 10 | * [pouchdb](http://pouchdb.com/) 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /tools/animation.md: -------------------------------------------------------------------------------- 1 | # Animation tools 2 | 3 | * [Velocity.js](http://julian.com/research/velocity/) 4 | * [snabbt.js](http://daniel-lundin.github.io/snabbt.js/) 5 | * [TweenJS](https://github.com/CreateJS/TweenJS) 6 | * [Dynamics.js](https://github.com/michaelvillar/dynamics.js) 7 | * [GreenSock-JS](https://github.com/greensock/GreenSock-JS) 8 | 9 | ##### Polyfills/shims: 10 | 11 | * [web-animations-js](https://github.com/web-animations/web-animations-js) 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /learning/api.md: -------------------------------------------------------------------------------- 1 | # Learn Interface/API design 2 | 3 | ##### Data (most likly JSON) API's 4 | 5 | * [Build APIs You Won't Hate](http://apisyouwonthate.com/) [$][read] 6 | * [JSON API ](http://jsonapi.org/) [read] 7 | 8 | ##### JavaScript API's 9 | 10 | * [Writing JavaScript APIs](http://blog.wolksoftware.com/writing-javascript-apis) [read] 11 | * [Designing Better JavaScript APIs](http://www.smashingmagazine.com/2012/10/designing-javascript-apis-usability/) [read] 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /tools/proto.md: -------------------------------------------------------------------------------- 1 | # Prototyping & wireframing tools 2 | 3 | ##### Creating: 4 | 5 | * [Balsamiq Mockups](https://balsamiq.com) [$] 6 | * [Justinmind](http://www.justinmind.com/) [$] 7 | * [UXPin](http://www.uxpin.com/) [free to $] 8 | 9 | ##### Collaboration / presenting: 10 | 11 | * [InVision](http://www.invisionapp.com/) [free to $] 12 | * [myBalsamiq](https://www.mybalsamiq.com/) [$] 13 | * [conceptboard](https://conceptboard.com/) [free to $] 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /practice/salaries.md: -------------------------------------------------------------------------------- 1 | # Front-end salaries 2 | 3 | The national average in the U.S for a front-end developer is [$75k](http://www.glassdoor.com/Salaries/front-end-web-developer-salary-SRCH_KO0,23.htm). 4 | 5 | An experienced front-end developer potentially can live wherever they want (i.e. work remotely) and make over $150k a year (visit [angel.co](https://angel.co/jobs), sign-up, review front-end jobs over $150k). 6 | 7 | ![](../images/front-end-salary.png "http://intersog.com/blog/chicago-tech-salary-guide-2015/") 8 | 9 | image source: http://intersog.com/blog/chicago-tech-salary-guide-2015/ 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /learning/templates.md: -------------------------------------------------------------------------------- 1 | # Learn JS Templates 2 | 3 | A JavaScript template is typically used, but not always with a [MV*](http://todomvc.com/) solution to separate parts of the view (i.e. the UI) from the logic and model (i.e. the data or JSON). 4 | 5 | Note that JavaScript 2015 (aka ES6) has a native templating mechanism called ["Templates strings"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings). 6 | 7 | * [Instant Handlebars.js](http://www.amazon.com/Instant-Handlebars-js-Gabriel-Manricks/dp/1783282657/ref=sr_1_1) [read][$] 8 | * [Learn Handlebars in 10 Minutes or Less](http://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes/) [read] 9 | * [JavaScript Templating with Handlebars](http://www.pluralsight.com/courses/handlebars-javascript-templating) [watch][$] 10 | -------------------------------------------------------------------------------- /practice/interview-q.md: -------------------------------------------------------------------------------- 1 | # Front-end interviews 2 | 3 | Questions you may get asked: 4 | 5 | * [Front-end Job Interview Questions](http://h5bp.github.io/Front-end-Developer-Interview-Questions/) 6 | * [Interview Questions for front-end-Developer](http://thatjsdude.com/interview/index.html) 7 | * [10 Interview Questions 8 | Every JavaScript Developer Should Know](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95) 9 | *[Front End Quiz](http://davidshariff.com/quiz/) 10 | *[Javascript Quiz](http://davidshariff.com/js-quiz/) 11 | 12 | Questions you ask: 13 | 14 | * [An open source list of developer questions to ask prospective employers](https://github.com/ChiperSoft/InterviewThis) 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /learning/offline.md: -------------------------------------------------------------------------------- 1 | # Learn offline development 2 | 3 | Offline development (aka offline first) is an area of knowledge and discussion around development practices for devices that are not always connected to the Internet or a power source. 4 | 5 | ##### General learning: 6 | 7 | * [offlinefirst.org](http://offlinefirst.org) [read] 8 | * [Creating HTML5 Offline Web Applications](http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html) [read] 9 | * [Offline First](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf) [read] 10 | * [Everything you need to know to create offline-first web apps.](https://github.com/pazguille/offline-first) [read] 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /learning/security.md: -------------------------------------------------------------------------------- 1 | # Learn security 2 | 3 | * [Browser Security Handbook](https://code.google.com/p/browsersec/wiki/Main) [read] 4 | * [HTML5 Security Cheatsheet](https://html5sec.org/#javascript) [read] 5 | * [Frontend Security](https://mikewest.org/2013/09/frontend-security-frontendconf-2013) [watch] 6 | * [Security for Web Developers: Using JavaScript, HTML, and CSS](http://www.amazon.com/Security-Web-Developers-Using-JavaScript/dp/1491928646/ref=sr_1_11) [read][$] 7 | * [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/) [read][$] 8 | * [Web Security Basics](https://github.com/vasanthk/web-security-basics) [read] 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /learning/module.md: -------------------------------------------------------------------------------- 1 | # Learn module loading and dependency management 2 | 3 | ##### General learning: 4 | 5 | * [Creating JavaScript Modules with Browserify](http://www.pluralsight.com/courses/creating-javascript-modules-browserify) [watch][$] 6 | * [Webpack Fundamentals](http://www.pluralsight.com/courses/webpack-fundamentals) [watch][$] 7 | * [browserify-handbook](https://github.com/substack/browserify-handbook) [read] 8 | * [Choose ES6 modules Today!](http://developer.telerik.com/featured/choose-es6-modules-today/) [read] 9 | 10 | ##### References/docs: 11 | 12 | * [browserify](http://browserify.org/) 13 | * [system.js](https://github.com/systemjs/systemjs) 14 | * [webpack](http://webpack.github.io/) 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /tools/graphics.md: -------------------------------------------------------------------------------- 1 | # Graphics (e.g. SVG, canvas, webgl) tools 2 | 3 | ##### General: 4 | 5 | * [Two.js](http://jonobr1.github.io/two.js/#introduction) 6 | * [Fabric.js](http://fabricjs.com/) 7 | 8 | ##### Canvas: 9 | 10 | * [Paper.js](http://paperjs.org/) 11 | * [EaselJS](https://github.com/CreateJS/EaselJS) 12 | 13 | ##### SVG: 14 | 15 | * [svg.js](http://svgjs.com/) 16 | * [Snap.svg](http://snapsvg.io/) 17 | * [Raphaël](http://raphaeljs.com/) 18 | * [d3](http://d3js.org/) 19 | 20 | ##### Webgl: 21 | 22 | * [three.js](http://threejs.org/) 23 | * [pixi.js](https://github.com/pixijs/pixi.js) 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /tools/cms.md: -------------------------------------------------------------------------------- 1 | # Content Management Hosted/API tools 2 | 3 | ##### API CMS (i.e. content delivery CMS) tools: 4 | 5 | * [prismic.io](https://prismic.io/) [free to $] 6 | * [contentful](https://www.contentful.com/) [$] 7 | * [Cosmic JS](https://cosmicjs.com/) [free to $] 8 | 9 | ##### Hosted CMS tools: 10 | 11 | * [LightCMS](https://www.lightcms.com) [$] 12 | * [Surreal CMS](http://www.surrealcms.com/) [$] 13 | * [Page Lime](http://www.pagelime.com/) [$] 14 | * [Cushy CMS](https://www.cushycms.com) [free to $] 15 | 16 | ##### Static CMS tools: 17 | 18 | * [webhook.com](http://www.webhook.com/) 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /tools/baas.md: -------------------------------------------------------------------------------- 1 | # Back-end as a service (aka BAAS) tools for front-end developers 2 | 3 | ##### Data/back-end management as a service: 4 | 5 | * [Firebase](https://www.firebase.com/index.html) [free to $] 6 | * [Parse](https://www.parse.com/) [free to $] 7 | * [kinvey](http://www.kinvey.com/) [free'ish to $] 8 | * [Back&](https://www.backand.com/) [free to $] 9 | * [Pusher](https://pusher.com/) [free to $] 10 | 11 | ##### User management as a service: 12 | 13 | * [UserApp](https://www.userapp.io/) [free to $] 14 | * [hull](http://www.hull.io/) [$] 15 | * [auth0](https://auth0.com) [$] 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /practice/jobboards.md: -------------------------------------------------------------------------------- 1 | # Front-end job boards 2 | 3 | A plethora of technical job listing outlets exist. The narrowed list below are currently the most relevant resources for finding a specific front-end position/career. 4 | 5 | * [frontenddeveloperjob.com](http://frontenddeveloperjob.com/) 6 | * [authenticjobs.com](https://authenticjobs.com/#category=4) 7 | * [weworkremotely.com](https://weworkremotely.com/) 8 | * [jobs.github.com](https://jobs.github.com/) 9 | * [careers.stackoverflow.com](http://careers.stackoverflow.com/jobs?searchTerm=front-end) 10 | * [angularjobs.com](http://angularjobs.com/) 11 | * [jobs.emberjs.com](http://jobs.emberjs.com/) 12 | * [jobs.jsninja.com](http://jobs.jsninja.com/) 13 | * [css-tricks.com/jobs](https://css-tricks.com/jobs/) 14 | * [glassdoor.com](http://www.glassdoor.com/Job/front-end-developer-jobs-SRCH_KO0,19.htm?jobType=all) 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /tools/perf.md: -------------------------------------------------------------------------------- 1 | # Performance tools 2 | 3 | ##### Reporting: 4 | 5 | * [WEIGHTOF.IT](http://weightof.it/category/application-frameworks) 6 | * [Web Page Test](http://www.webpagetest.org/) 7 | * [GTmetrix](https://gtmetrix.com/) 8 | * [Speed Curve](https://speedcurve.com/) [$] 9 | * [Chrome Devtools Timeline](https://developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool?hl=en) 10 | * [sitespeed.io](https://www.sitespeed.io) 11 | 12 | ##### JS tools: 13 | 14 | * [ImageOptim-CLI](http://jamiemason.github.io/ImageOptim-CLI/) 15 | * [imagemin](https://github.com/imagemin/imagemin) 16 | 17 | ##### Budgeting: 18 | 19 | * [performancebudget.io](http://www.performancebudget.io/) 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /tools/fonts.md: -------------------------------------------------------------------------------- 1 | # Font tools 2 | 3 | ##### Free web fonts: 4 | 5 | * [Google Fonts](http://fortawesome.github.io/Font-Awesome/) 6 | * [TypeKit](https://typekit.com) [free to $] 7 | * [fonts.com](http://www.fonts.com/) [free to $] 8 | 9 | ##### Icon fonts: 10 | 11 | * [Font Awesome](http://fortawesome.github.io/Font-Awesome/) 12 | * [ionicons](http://ionicons.com/) 13 | * [Fontello](http://fontello.com/) 14 | * [GitHub Octicons](https://octicons.github.com/) 15 | * [Devicons](http://vorillaz.github.io/devicons/#/main) 16 | 17 | ##### JS font tools: 18 | 19 | * [FlowType.js](http://simplefocus.com/flowtype/) 20 | * [webfontloader](https://github.com/typekit/webfontloader) 21 | * [localFont](https://github.com/jaicab/localFont) 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /tools/svg.md: -------------------------------------------------------------------------------- 1 | # SVG tools 2 | 3 | ##### Optimizing: 4 | 5 | * [SVGOMG](https://jakearchibald.github.io/svgomg/) 6 | * [Peter Collingridge's SVG Optimiser](http://petercollingridge.appspot.com/svg-optimiser) 7 | * [SVGO](https://github.com/svg/svgo) 8 | * [SVGO-GUI](https://github.com/svg/svgo-gui) 9 | * [SVG Cleaner](https://launchpad.net/svg-cleaner) 10 | * [Scour SVG Scrubber](http://www.codedread.com/scour/) 11 | * [Clean Multiple Gradient Stops](http://codepen.io/jakealbaugh/pen/OVrQXY) 12 | 13 | ##### SVG Editors: 14 | 15 | * [Illustrator](http://www.adobe.com/products/illustrator.html) 16 | * [Sketch](https://www.sketchapp.com/) 17 | * [Inkscape](https://inkscape.org/en/) 18 | * [DrawSVG](http://www.drawsvg.org/) 19 | 20 | ##### Sprite Creation: 21 | 22 | * [Icomoon](https://icomoon.io/) 23 | * [Fontastic](http://fontastic.me/) 24 | * [Grunticon](http://www.grunticon.com/) 25 | 26 | ##### Bug Trackers: 27 | 28 | * [SVG Weirdness](https://github.com/emilbjorklund/svg-weirdness) 29 | * [SVG Edit](https://code.google.com/p/svg-edit/wiki/BrowserBugs) -------------------------------------------------------------------------------- /tools/templates.md: -------------------------------------------------------------------------------- 1 | # Templating tools 2 | 3 | ##### Just Templating: 4 | 5 | * [Mustache.js](https://github.com/janl/mustache.js) 6 | * [Handlebars](http://handlebarsjs.com/) 7 | - [htmlbars](https://github.com/tildeio/htmlbars) 8 | * [Nunjuncks](http://mozilla.github.io/nunjucks/) 9 | * [Transparency](http://leonidas.github.io/transparency/) 10 | * [doT.js](http://olado.github.io/doT/) 11 | 12 | ##### Templating and reactive data binding: 13 | 14 | * [Rivets.js](http://rivetsjs.com/) 15 | * [paperclip.js](http://paperclipjs.com/) 16 | * [riot](http://riotjs.com/) 17 | * [vue.js](http://vuejs.org/) 18 | * [ractive.js](http://www.ractivejs.org/) 19 | * [react.js](https://facebook.github.io/react/index.html) 20 | * [RxJS](https://github.com/Reactive-Extensions/RxJS) 21 | * [knockout](http://knockoutjs.com/index.html) 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /learning/dns.md: -------------------------------------------------------------------------------- 1 | # Learn Domain Name System (aka DNS) 2 | 3 | > The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates domain names, which can be easily memorized by humans, to the numerical IP addresses needed for the purpose of computer services and devices worldwide. The Domain Name System is an essential component of the functionality of most Internet services because it is the Internet's primary directory service. - wikipedia 4 | 5 | ![](../images/dns.jpg "http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg") 6 | 7 | image source: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg 8 | 9 | 10 | * [DNS Explained](https://www.youtube.com/watch?v=72snZctFFtA) [watch] 11 | * [How DNS works](https://howdns.works/ep1/) [read] 12 | -------------------------------------------------------------------------------- /learning/cli.md: -------------------------------------------------------------------------------- 1 | # Learn command line 2 | 3 | > A command-line interface or command language interpreter (CLI), also known as command-line user interface, console user interface, and character user interface (CUI), is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines). - wikipedia 4 | 5 | ##### General learning: 6 | 7 | * [codecademy: Learn the Command Line](https://www.codecademy.com/courses/learn-the-command-line) [watch] 8 | * [The Command Line Crash Course](http://cli.learncodethehardway.org/book/) [read] 9 | * [Meet the Command Line](http://www.pluralsight.com/courses/meet-command-line) [watch][$] 10 | * [Learn Enough Command Line to Be Dangerous](http://www.learnenough.com/command-line-tutorial) [read] [free to $] 11 | 12 | ##### Mastering: 13 | 14 | * [Advanced Command Line Techniques](https://code.tutsplus.com/courses/advanced-command-line-techniques) [watch][$] 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /learning/headless-browsers.md: -------------------------------------------------------------------------------- 1 | # Learn headless browsers 2 | 3 | > A headless browser is a web browser without a graphical user interface. 4 | > 5 | >Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, color, font selection and execution of JavaScript and AJAX which are usually not available when using other testing methods. Google stated in 2009 that using a headless browser could help their search engine index content from websites that use AJAX. - wikipedia 6 | 7 | * [PhantomJS Cookbook](http://www.amazon.com/PhantomJS-Cookbook-Rob-Friesel/dp/178398192X) [read][$] 8 | * [Getting Started with PhantomJS](http://www.amazon.com/Getting-Started-PhantomJS-Aries-Beltran/dp/1782164227) [read][$] 9 | * [Rapid PhantomJS](https://www.packtpub.com/web-development/rapid-phantomjs-video) [watch][$] 10 | * [PhantomJS for Web Automation](https://www.youtube.com/watch?v=OqEcn_6GBDI) [watch] 11 | -------------------------------------------------------------------------------- /tools/charting.md: -------------------------------------------------------------------------------- 1 | # Data visualization (e.g. charts) tools 2 | 3 | ##### JS libraries: 4 | 5 | * [d3](http://d3js.org/) 6 | * [sigmajs](http://sigmajs.org/) 7 | 8 | ##### Widgets & Components: 9 | 10 | * [Chart.js](http://www.chartjs.org/) 11 | * [C3.js](http://c3js.org/) 12 | * [Google Charts](https://developers.google.com/chart/interactive/docs/) 13 | * [chartist-jsj](https://github.com/gionkunz/chartist-js) 14 | * [amCharts](http://www.amcharts.com/) [$] 15 | * [Highcharts](http://www.highcharts.com/) [Non-commercial free to $] 16 | * [FusionCharts](http://www.fusioncharts.com/) [$] 17 | * [ZingChart](http://www.zingchart.com/) [free to $] 18 | * [Epoch](https://github.com/epochjs/epoch) 19 | 20 | ##### Services: 21 | 22 | * [Datawrapper](https://datawrapper.de/) 23 | * [infogr.am](https://infogr.am) [free to $] 24 | * [plotly](https://plot.ly/) [free to $] 25 | * [ChartBlocks](http://www.chartblocks.com/) [free to $] 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /tools/ui.md: -------------------------------------------------------------------------------- 1 | # UI widgets & components tools 2 | 3 | ##### Desktop & Mobile: 4 | 5 | * [Kendo UI](http://www.telerik.com/kendo-ui) [free to $] 6 | * [Webix](http://webix.com/) [$] 7 | * [Semantic UI](http://semantic-ui.com/) 8 | * [Metro UI](http://metroui.org.ua/) 9 | * [Bootstrap](http://getbootstrap.com/components/) 10 | * [Materialize](http://materializecss.com/) 11 | * [Material ui](http://material-ui.com/) 12 | * [Polymer Paper Elements](https://elements.polymer-project.org/browse?package=paper-elements) 13 | 14 | ##### Desktop (NW.js and Electron): 15 | 16 | * [photonkit](http://photonkit.com/) 17 | * [React UI Components for OS X El Capitan and Windows 10](http://gabrielbull.github.io/react-desktop/) 18 | 19 | ##### Mobile focused: 20 | 21 | * [Ratchet](http://goratchet.com/) 22 | * [Kendo UI Mobile](http://demos.telerik.com/kendo-ui/m/index) 23 | * [Mobile Angular UI](http://mobileangularui.com/) 24 | * [Framework7](http://www.idangero.us/framework7) 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /tools/json.md: -------------------------------------------------------------------------------- 1 | # JSON tools 2 | 3 | ##### Online editors: 4 | 5 | * [JSONmate](http://jsonmate.com/) 6 | 7 | ##### Query tools: 8 | 9 | * [DefiantJS](http://www.defiantjs.com/) 10 | * [ObjectPath](http://objectpath.org/) 11 | * [JSON Mask](https://github.com/nemtsov/json-mask) 12 | 13 | ##### Generating mock JSON tools: 14 | 15 | * [JSON Generator](http://www.json-generator.com/) 16 | * [Mockaroo](https://www.mockaroo.com/) 17 | 18 | ##### Online JSON mocking API tools: 19 | 20 | * [Mocky](http://www.mocky.io/) 21 | * [FillText.com](http://www.filltext.com/) 22 | * [JSONPlaceholder](http://jsonplaceholder.typicode.com/) 23 | * [mockable.io](https://www.mockable.io/) 24 | 25 | ##### Local JSON mocking API tools: 26 | 27 | * [json-server](https://github.com/typicode/json-server) 28 | 29 | ##### JSON specifications/schemas: 30 | 31 | * [json-schema.org](http://json-schema.org/) & [jsonschema.net](http://jsonschema.net/) 32 | * [{json:api}](http://jsonapi.org/) 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /practice/myth.md: -------------------------------------------------------------------------------- 1 | # Generalist myth 2 | 3 | ![](../images/full-stack.jpg "http://andyshora.com/full-stack-developers.html") 4 | 5 | image source: http://andyshora.com/full-stack-developers.html 6 | 7 | The roles required to design and develop a web solution require a deep skill set and vast experience in the area of visual design, UI/interaction design, front-end development, and back-end development. Any person (aka generalist or full-stack developer/designer) who can fill one or more of these 4 roles at a professional level is a rare exception to the rule. 8 | 9 | Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles. Those who claim to operate at an expert level at one or more of these roles are exceptionally rare and more than likely mythical, given modern stacks. 10 | 11 | ![](../images/stacks-change.jpg "http://andyshora.com/full-stack-developers.html") 12 | 13 | image source: http://andyshora.com/full-stack-developers.html 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tools/general-tools.md: -------------------------------------------------------------------------------- 1 | # General front-end development tools 2 | 3 | ##### Development tools: 4 | 5 | * [screensiz.es](http://screensiz.es/) 6 | * [placehold.it](http://placehold.it/) 7 | * [codeKit](http://incident57.com/codekit/) 8 | * [prepros](https://prepros.io/) 9 | * [Browsersync](http://www.browsersync.io/) 10 | * [ish. 2.0.](https://github.com/bradfrost/ish.) 11 | * [Wraith](http://bbc-news.github.io/wraith/index.html) 12 | 13 | ##### Online code editors: 14 | 15 | * [jsbin.com](http://jsbin.com/) 16 | * [jsfiddle.net](http://jsfiddle.net/) 17 | * [liveweave.com](http://liveweave.com/) 18 | * [es6fiddle.net](http://www.es6fiddle.net/) 19 | * [codepen.io](http://codepen.io/) 20 | * [Plunker](http://plnkr.co/) 21 | 22 | ##### Tools for finding tools: 23 | 24 | * [stackshare.io](http://stackshare.io/) 25 | * [javascripting.com](http://www.javascripting.com) 26 | * [built with](http://builtwith.com/) 27 | * [microjs.com](http://microjs.com) 28 | * [The Tool Box](http://thetoolbox.cc/) 29 | * [unheap.com](http://www.unheap.com/) 30 | * [stylesheets.co](https://stylesheets.co/) 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /learning/internet.md: -------------------------------------------------------------------------------- 1 | # Learn internet/web 2 | 3 | > The Internet is a global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and peer-to-peer networks for file sharing. - wikipedia 4 | 5 | * [How the Internet Works](https://www.khanacademy.org/partner-content/code-org/internet-works) [watch] 6 | * [WHAT IS THE INTERNET? or, "You Say Tomato, I Say TCP/IP"](http://www.20thingsilearned.com/en-US/what-is-the-internet/1) [read] 7 | * [How does the Internet work](http://www.w3.org/wiki/How_does_the_Internet_work) [read] 8 | * [How does the Internet Work?](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm) [read] 9 | * [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) [watch] 10 | * [How The Web Works](https://www.eventedmind.com/classes/how-the-web-works-7f40254c) [watch][$] 11 | -------------------------------------------------------------------------------- /learning/hosting.md: -------------------------------------------------------------------------------- 1 | # Learn web hosting 2 | 3 | > A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web. Web hosts are companies that provide space on a server owned or leased for use by clients, as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for other servers located in their data center, called colocation, also known as Housing in Latin America or France. - wikipedia 4 | 5 | ![](../images/host.jpg "http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg") 6 | 7 | image source: http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg 8 | 9 | 10 | ##### General learning: 11 | 12 | * [Web Hosting Beginner Guide](http://www.webhostingsecretrevealed.net/web-hosting-beginner-guide/) [read] 13 | * [Web Hosting For Dummies](http://www.dummies.com/store/product/Web-Hosting-For-Dummies.productCd-1118540573.html) [read][$] 14 | * [Ultimate Guide to Web Hosting](Ultimate Guide to Web Hosting) [read] 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /learning/animation.md: -------------------------------------------------------------------------------- 1 | # Learn web animation 2 | 3 | ##### General learning: 4 | 5 | * [Adventures in Web Animations](https://www.codeschool.com/courses/adventures-in-web-animations) [$][watch] 6 | * [Animating With Snap.svg](https://webdesign.tutsplus.com/courses/animating-with-snapsvg) [$][watch] 7 | * [Animation in CSS3 and HTML5](https://frontendmasters.com/courses/animation-storytelling-html5-css3/) [$][watch] 8 | * [CSS Animation in the Real World](https://webdesign.tutsplus.com/courses/css-animation-in-the-real-world) [$][watch] 9 | * [Foundation HTML5 Animation with JavaScript](http://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_3) [$][read] 10 | * [Web Animation using JavaScript: Develop & Design (Develop and Design)](http://www.amazon.com/Web-Animation-using-JavaScript-Develop-ebook/dp/B00UNKXVDU/ref=sr_1_1) [$][read] 11 | * [The State Of Animation 2014](http://www.smashingmagazine.com/2014/11/the-state-of-animation-2014/) 12 | 13 | ##### Standards/specifications: 14 | 15 | * [Web Animations](https://w3c.github.io/web-animations/) 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /learning/seo.md: -------------------------------------------------------------------------------- 1 | # Learn Search Engine Optimization 2 | 3 | > Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's unpaid results - often referred to as "natural," "organic," or "earned" results. In general, the earlier (or higher ranked on the search results page), and more frequently a site appears in the search results list, the more visitors it will receive from the search engine's users. SEO may target different kinds of search, including image search, local search, video search, academic search, news search and industry-specific vertical search engines. - wikipedia 4 | 5 | ##### General learning: 6 | 7 | * [SEO Fundamentals from David Booth](http://www.lynda.com/Analytics-tutorials/SEO-Fundamentals/187858-2.html) [watch][$] 8 | * [SEO Fundamentals from Paul Wilson](http://www.pluralsight.com/courses/seo-fundamentals) [watch][$] 9 | * [SEO for Web Designers](https://webdesign.tutsplus.com/courses/seo-for-web-designers) [watch][$] 10 | * [Google Search Engine Optimization Starter Guide](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf) [read] 11 | * [SEO Tutorial For Beginners 2015](http://www.hobo-web.co.uk/seo-tutorial/) [read] 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /learning/self-direct-learning.md: -------------------------------------------------------------------------------- 1 | # Self directed learning 2 | 3 | This section focuses on free and paid resources (video training, books etc..) that an individual can use to direct their own learning process and career as a front-end developer. 4 | 5 | The resources include free material and paid material. Paid material will be indicated with [$]. 6 | 7 | The author believes that anyone with the right determination and dedication can teach themselves how to be a front-end developer. All that is required is a computer connected to the web and some cash for books and video training. 8 | 9 | Below are a few video learning outlets (tech focused) I generally recommend pulling content from: 10 | 11 | * [Frontend Masters](https://frontendmasters.com/) 12 | * [pluralsight.com](http://www.pluralsight.com/) [careful, quality varies] 13 | * [tutsplus.com](https://tutsplus.com/courses) 14 | * [lynda.com](http://www.lynda.com/) [careful, quality varies] 15 | * [treehouse](https://teamtreehouse.com/) 16 | * [mijingo](https://mijingo.com/) 17 | * [codeschool.com](https://www.codeschool.com/) 18 | * [laracasts](https://laracasts.com/) 19 | * [eventedmind.com](https://www.eventedmind.com/) 20 | * [egghead.io](https://egghead.io/) 21 | * [codecademy.com](https://codecademy.com) 22 | * [Khan Academy](https://www.khanacademy.org/computing/computer-programming) 23 | * [Tagtree](http://tagtree.tv/library) 24 | * [Udacity](https://www.udacity.com/courses/web-development) 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /tools/dom.md: -------------------------------------------------------------------------------- 1 | # DOM Tools 2 | 3 | ##### DOM libraries/frameworks: 4 | 5 | * [jQuery](http://jquery.com/) 6 | * [Zepto.js](http://zeptojs.com/) 7 | * [keypress](http://dmauro.github.io/Keypress/) 8 | * [clipboard.js](http://zenorocha.github.io/clipboard.js/) 9 | * [tether.io](http://tether.io/docs/welcome/) 10 | 11 | ##### DOM performance tools: 12 | 13 | * [DOMMonster](http://mir.aculo.us/dom-monster/) 14 | 15 | ##### References: 16 | 17 | * [DOM Browser Support](http://www.webbrowsercompatibility.com/dom/desktop/) 18 | * [DOM Events Browser Support](http://www.webbrowsercompatibility.com/dom-events/desktop/) 19 | * [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) 20 | * [Events](https://html.spec.whatwg.org/#events-2) 21 | * [MDN Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 22 | 23 | ##### DOM polyfills/shims: 24 | 25 | * [dom-shims](https://github.com/necolas/dom-shims) 26 | * [Pointer Events Polyfill: a unified event system for the web platform](https://github.com/jquery/PEP) 27 | 28 | ##### Virtual DOM: 29 | 30 | * [jsdom](https://github.com/tmpvar/jsdom) 31 | * [virtual-dom](https://github.com/Matt-Esch/virtual-dom) 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /learning/package-manager.md: -------------------------------------------------------------------------------- 1 | # Learn package manager 2 | 3 | > A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing software packages for a computer's operating system in a consistent manner. It typically maintains a database of software dependencies and version information to prevent software mismatches and missing prerequisites. - wikipedia 4 | 5 | ##### General learning: 6 | 7 | * [Bower Fundamentals](http://www.pluralsight.com/courses/bower-fundamentals) [watch][$] 8 | * [Package Managers: An Introductory Guide For The Uninitiated Front-End Developer](http://codylindley.com/techpro/2013_04_12__package-managers-an-introducto/) [read] 9 | * [Up and Running with NPM, the Node Package Manager](http://www.lynda.com/Developer-Web-Development-tutorials/Up-Running-NPM-Node-Package-Manager/409274-2.html)[watch][$] 10 | * [npm Basics](http://teamtreehouse.com/library/npm-basics) [watch][$] 11 | * [The npm Book](https://leanpub.com/npm) [read] 12 | * [The Mystical & Magical SemVer Ranges Used By npm & Bower](http://developer.telerik.com/featured/mystical-magical-semver-ranges-used-npm-bower/) [read] 13 | 14 | ##### References/docs: 15 | 16 | * [bower](http://bower.io/) 17 | * [jspm.io](http://jspm.io/) 18 | * [npm](https://www.npmjs.com/) 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /learning/front-end-apps.md: -------------------------------------------------------------------------------- 1 | # Learn front-end application architecture 2 | 3 | * [JavaScript Application Design](https://www.manning.com/books/javascript-application-design?a_aid=go&a_bid=e6de0d9d) [read][$] 4 | * [Build an App with React and Ampersand](http://learn.humanjavascript.com/react-ampersand) [watch][$] 5 | * [Human JavaScript](http://read.humanjavascript.com/) [read] 6 | * [Programming JavaScript Applications](http://chimera.labs.oreilly.com/books/1234000000262/index.html) [read] 7 | * [Building Modern Single-Page Web Applications](https://frontendmasters.com/workshops/web-apps/) [watch][$] 8 | * [Organizing JavaScript Functionality](https://frontendmasters.com/courses/organizing-javascript/) [watch][$] 9 | * [Eloquent JavaScript: modules](http://eloquentjavascript.net/10_modules.html) [read] 10 | * [Web UI Architecture](https://frontendmasters.com/courses/web-ui-architecture/) [watch][$] 11 | * [Field Guide to Web Applications](http://www.html5rocks.com/webappfieldguide/toc/index/) [read] 12 | * [UI Architecture](http://www.pluralsight.com/courses/web-ui-architecture) [watch][$] 13 | * [Terrific](http://terrifically.org/) [read] 14 | * [Nicholas Zakas: Scalable JavaScript Application Architecture](https://www.youtube.com/watch?v=vXjVFPosQHw) [watch] 15 | * [Patterns For Large-Scale JavaScript Application Architecture](http://addyosmani.com/largescalejavascript/) [read] 16 | * [A field guide to static apps](http://www.staticapps.org/) [read] 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /learning/version-control.md: -------------------------------------------------------------------------------- 1 | # Learn version control 2 | 3 | > A component of software configuration management, version control, also known as revision control or source control, is the management of changes to documents, computer programs, large web sites, and other collections of information. Changes are usually identified by a number or letter code, termed the "revision number," "revision level," or simply "revision." For example, an initial set of files is "revision 1." When the first change is made, the resulting set is "revision 2," and so on. Each revision is associated with a timestamp and the person making the change. Revisions can be compared, restored, and with some types of files, merged. - wikipedia 4 | 5 | The current modern solution for version control is [Git](https://git-scm.com/). Learn it! 6 | 7 | ##### General learning: 8 | 9 | * [codeschool.com](https://try.github.io/levels/1/challenges/1) [interact] 10 | * [Git Fundamentals](http://www.pluralsight.com/courses/git-fundamentals) [watch][$] 11 | * [Getting Git Right](https://www.atlassian.com/git/) [read] 12 | * [Ry’s Git Tutorial](http://rypress.com/tutorials/git/introduction) [read] 13 | * [Pro Git](http://git-scm.com/book/en/v2) [read] 14 | 15 | ##### Mastering: 16 | 17 | * [Advanced Git Tutorials](https://www.atlassian.com/git/tutorials/advanced-overview/) [read] 18 | * [Pro Git](http://git-scm.com/book/en/v2) [read] 19 | 20 | ##### References/docs: 21 | 22 | * [https://git-scm.com/doc](https://git-scm.com/docs) 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /practice/team.md: -------------------------------------------------------------------------------- 1 | # Front-end on a team 2 | 3 | A front-end developer is typically only one player on a team that designs and develops web sites, web applications, or native applications running on web technologies. (Note: A developer who builds everything was once called a "web master" but as of late these rare and mythical developers are called "full-stack developers"). 4 | 5 | A bare bones team for building professional sites or software on the web will minimally contain the following roles. 6 | 7 | * Visual Designer (i.e. fonts, colors, spacing, emotion, visuals concepts & themes) 8 | * UI/Interaction Designer/Information Architect (i.e. wireframes, specifying all user interactions and UI functionality, structuring information) 9 | * Front-end Developer (i.e. writes code that runs in client/on device) 10 | * Back-end Developer (i.e. writes code that runs on server) 11 | 12 | The roles are ordered according to overlapping skills. A front-end developer will typically have a good handle on UI/Interaction design as well as back-end development. It is not uncommon for team members to fill more than one role by taking on the responsibilities of an over-lapping role. 13 | 14 | It is assumed that the team is being directed by a project lead of some kind of product owner (i.e. stakeholder, project manager, project lead etc...) 15 | 16 | A larger web team might include the following roles not shown above: 17 | 18 | * Visual Designers 19 | * Interface Design/Interaction Designer/Information Design 20 | * **SEO strategist** 21 | * Front-end Developer 22 | * **DevOps Engineers** 23 | * Back-end Developer 24 | * **API Developer** 25 | * **Database Administrator** 26 | * **QA Engineer / Testers** 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /learning/node.md: -------------------------------------------------------------------------------- 1 | # Learn node.js 2 | 3 | > Node.js is an open-source, cross-platform runtime environment for developing server-side web applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, NonStop,[3] IBM AIX, IBM System z and IBM i. Its work is hosted and supported by the Node.js Foundation,[4] a collaborative project at Linux Foundation.[5] 4 | > 5 | > Node.js provides an event-driven architecture and a non-blocking I/O API designed to optimize an application's throughput and scalability for real-time web applications. It uses Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in library to allow applications to act as a web server without software such as Apache HTTP Server, Nginx or IIS. - wikipedia 6 | 7 | ##### General learning: 8 | 9 | * [Introduction to Node.js from Evented Mind](https://www.eventedmind.com/classes/introduction-to-node-js-4c0326de) [watch][$] 10 | * [The Art of Node](https://github.com/maxogden/art-of-node#the-art-of-node) [read] 11 | * [Node.js Basics](http://teamtreehouse.com/library/nodejs-basics) [watch][$] 12 | * [io.js and Node.js Next: Getting Started](http://www.pluralsight.com/courses/running-node-applications-io-js) [watch][$] 13 | * [Learn all the nodes](https://learnallthenodes.com/episodes/1-what-is-nodejs) [watch] 14 | * [The Node Beginner Book](https://leanpub.com/nodebeginner) [read][$] 15 | * [Introduction to Node.js](http://www.pluralsight.com/courses/node-intro) [watch][$] 16 | * [Node.js in Practice](https://www.manning.com/books/node-js-in-practice#downloads) [read][$] 17 | * [Nodeschool.io](http://nodeschool.io/) [code] 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /learning/perf.md: -------------------------------------------------------------------------------- 1 | # Learn site performance optimization 2 | 3 | > Web performance optimization, WPO, or website optimization is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user's web browser. With the average internet speed increasing globally, it is fitting for website administrators and webmasters to consider the time it takes for websites to render for the visitor. - wikipedia 4 | 5 | ##### General learning: 6 | 7 | * [Website Performance](https://frontendmasters.com/courses/website-performance/) [watch][$] 8 | * [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/ref=sr_1_3) [read][$] 9 | * [Even Faster Web Sites: Performance Best Practices for Web Developers](http://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304/ref=sr_1_5) [read][$] 10 | * [Web Performance Daybook Volume 2](http://www.amazon.com/Web-Performance-Daybook-Stoyan-Stefanov/dp/1449332919/ref=sr_1_4) [read][$] 11 | * [JavaScript Performance Rocks](http://javascriptrocks.com/) [read] 12 | * [Performance Calendar](http://calendar.perfplanet.com/2014/) [read] 13 | * [PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules) [read] 14 | * [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) [watch] 15 | * [Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860) [watch] 16 | * [Using WebPageTest](http://www.amazon.com/Using-WebPageTest-Rick-Viscomi/dp/1491902590/ref=sr_1_1) [read][$] 17 | * [Web Performance: The Definitive Guide](http://shop.oreilly.com/product/0636920032427.do) [read] 18 | * [perf.rocks](http://perf.rocks/) 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /learning/json.md: -------------------------------------------------------------------------------- 1 | # Learn JSON (JavaScript Object Notation) 2 | 3 | > JSON, (canonically pronounced sometimes JavaScript Object Notation), is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). 4 | > 5 | > Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. 6 | > 7 | > The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json. - wikipedia 8 | 9 | ##### General learning: 10 | 11 | * [json.com](https://www.json.com/) [read] 12 | * [What is JSON](https://mijingo.com/lessons/what-is-json/) [watch] 13 | * [Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON](http://www.amazon.com/Introduction-JavaScript-Object-Notation-Point/dp/1491929480/ref=pd_sim_sbs_14_1) [read][$] 14 | 15 | ##### References/docs: 16 | 17 | * [json.org/](http://json.org/) [read] 18 | 19 | ##### Standards/specifications: 20 | 21 | * [ECMA-404 The JSON Data Interchange Format](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf) 22 | * [RFC 7159 The JavaScript Object Notation (JSON) Data Interchange Format](https://tools.ietf.org/html/rfc7159) 23 | 24 | ##### Architecting: 25 | 26 | * [JSON API](http://jsonapi.org/) 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /learning/build.md: -------------------------------------------------------------------------------- 1 | # Learn build and task automation 2 | 3 | > Build automation is the process of automating the creation of a software build and the associated processes including: compiling computer source code into binary code, packaging binary code, and running automated tests. - wikipedia 4 | 5 | ##### General learning: 6 | 7 | * [JavaScript Build Automation With Gulp.js](http://www.pluralsight.com/courses/javascript-build-automation-gulpjs) [watch][$] 8 | * [Getting Started with Gulp](https://www.packtpub.com/web-development/getting-started-gulp) [read][$] 9 | * [Rapid Gulp](https://www.packtpub.com/web-development/rapid-gulp-video) [watch][$] 10 | * [Learning Gulp - Getting started with the font end factory](http://hmphry.com/gulp) [read] 11 | * [Gulp Basics](http://teamtreehouse.com/library/gulp-basics) [watch][$] 12 | * [Using npm as a Task Runner](http://teamtreehouse.com/library/using-npm-as-a-task-runner) [watch][$] 13 | 14 | ##### References/docs: 15 | 16 | * [gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) 17 | 18 | Gulp is great. However, you might only need `npm run`. Before turning to additional complexity in your application stack ask yourself if `npm run` can do the job. If you need more, use both. 19 | 20 | Read: 21 | 22 | * [Give Grunt the Boot! A Guide to Using npm as a Build Tool](http://www.sitepoint.com/guide-to-npm-as-a-build-tool/) 23 | * [Task automation with npm run](http://substack.net/task_automation_with_npm_run) 24 | * [Build Tools vs npm Scripts: Why Not Both?](http://engineering.hobsons.com/2015/06/26/build-tools-vs-npm-scripts-why-not-both/) 25 | * [Using npm as a build system for your next project](https://drublic.de/blog/npm-builds) 26 | * [How to Use npm as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /learning/fonts.md: -------------------------------------------------------------------------------- 1 | # Learn web fonts & icons 2 | 3 | > Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the `` tag in 1995, which was then standardized in the HTML 3.2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities. 4 | > 5 | > The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Explorer added support for the font downloading feature in version 4.0, released in 1997.[1] Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in Web typography, as well as the usage of font downloading. - wikipedia 6 | 7 | ##### General learning: 8 | 9 | * [Typography for the Web](http://www.pluralsight.com/courses/typography-for-web-1790) [watch][$] 10 | * [Learn-web-fonts](http://zoerooney.com/learn-web-fonts/) [read] 11 | * [Quick guide to webfonts via @font-face](http://www.html5rocks.com/en/tutorials/webfonts/quick/) [read] 12 | * [Responsive Typography](https://frontendmasters.com/courses/responsive-typography/) [watch][$] 13 | * [Beautiful Web Type A showcase of the best typefaces from the Google web fonts directory.](http://hellohappy.org/beautiful-web-type/) [read] 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /practice/fd-dev-for.md: -------------------------------------------------------------------------------- 1 | # Front-end developers develop for... 2 | 3 | A front-end developer crafts HTML, CSS, and JS that runs on the web platform 4 | (e.g. a web browser) on one of the following operating systems (aka OS's): 5 | 6 | * Windows 7 | * Windows Phone 8 | * OSX 9 | * iOS 10 | * Android 11 | * Ubuntu (or some flavor of Linux) 12 | * Chromium 13 | 14 | These operating systems typically run on one or more of the following devices: 15 | 16 | * Desktop computer 17 | * Laptop / Netbook computer 18 | * Mobile phone 19 | * Tablet 20 | * TV 21 | * Watch 22 | * Things (i.e. anything you can imagine, car, refrigerator, lights, thermostat etc..) 23 | 24 | ![](../images/fd-devs-for.jpeg "https://ams-ix.net/newsitems/87") 25 | 26 | image source: https://ams-ix.net/newsitems/87 27 | 28 | Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time scenarios: 29 | 30 | * A web browser (examples: [Chrome, IE, Safari, Firefox](http://outdatedbrowser.com/en)) running on an OS. 31 | * A [headless browser](https://en.wikipedia.org/wiki/Headless_browser) (examples [phantomJS](http://phantomjs.org/)) driven from a CLI running on an OS. 32 | * A [WebView](http://wiki.awesomium.com/general-use/introduction-to-web-views.html)/browser tab (think iframe) embedded within a native application as a runtime with bridge to native API's. WebView applications typically contain a UI constructed from web technologies. (i.e. HTML, CSS, and JS). (examples: [Apache Cordova](https://cordova.apache.org/), [NW.js](http://nwjs.io/), [Electron](http://electron.atom.io/)) 33 | * A native application built from web tech that is interpreted at runtime with a bridge to native API's. The UI will make use of native UI parts (e.g. iOS native controls) not web technologies. (examples: [NativeScript](https://www.nativescript.org/), [React Native](https://facebook.github.io/react-native/)) 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /learning/test.md: -------------------------------------------------------------------------------- 1 | # Learn JS testing 2 | 3 | > **unit testing** - In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use. Intuitively, one can view a unit as the smallest testable part of an application. - Wikipedia 4 | > 5 | > **functional testing** - Functional testing is a quality assurance (QA) process and a type of black box testing that bases its test cases on the specifications of the software component under test. Functions are tested by feeding them input and examining the output, and internal program structure is rarely considered (not like in white-box testing). Functional testing usually describes what the system does. - Wikipedia 6 | > 7 | > **integration testing** - Integration testing (sometimes called integration and testing, abbreviated I&T) is the phase in software testing in which individual software modules are combined and tested as a group. It occurs after unit testing and before validation testing. Integration testing takes as its input modules that have been unit tested, groups them in larger aggregates, applies tests defined in an integration test plan to those aggregates, and delivers as its output the integrated system ready for system testing. - wikipedia 8 | 9 | ##### General learning: 10 | 11 | * [Test-Driven JavaScript Development](http://tddjs.com/) [read][$] 12 | * [Testable JavaScript](http://www.amazon.com/gp/product/1449323391/ref=pd_lpo_sbs_dp_ss_3) [read][$] 13 | * [JavaScript Testing Recipes](http://jstesting.jcoglan.com/) [read][$] 14 | * [Front-End First: Testing and Prototyping JavaScript Apps](http://www.pluralsight.com/courses/testing-and-prototyping-javascript-apps) [watch][$] 15 | * [Let’s Code: Test-Driven JavaScript](http://www.letscodejavascript.com/) [watch][$] 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /learning/news-podcasts.md: -------------------------------------------------------------------------------- 1 | # Front-end newsletters, news sites, & podcasts 2 | 3 | ##### General front-end newsletters, news, & podcasts: 4 | 5 | * [shoptalkshow.com](http://shoptalkshow.com/) 6 | * [frontendfront.com](http://frontendfront.com/) 7 | * [webtoolsweekly.com](http://webtoolsweekly.com/) 8 | * [O'Reilly Web Platform Radar](http://radar.oreilly.com/web-platform) 9 | * [The Wdb Platform Podcast](http://thewebplatform.libsyn.com/) 10 | * [The Web Ahead](http://thewebahead.net/) 11 | * [The Big Web Show](http://5by5.tv/bigwebshow) 12 | * [Fresh Brewed Frontend](https://freshbrewed.co/frontend/) 13 | * [Mobile Web Weekly](http://mobilewebweekly.co/) 14 | * [Open Web Platform Daily Digest](http://webplatformdaily.org/) 15 | * [FRONT-END DEV weekly](http://frontenddevweekly.com/) 16 | * [Web Design Weekly](https://web-design-weekly.com/) 17 | * [Front-end News in 5 Minutes](https://frontendfive.codeschool.com/) 18 | * [TTL](http://ttlpodcast.com/) 19 | * [Viewsources](https://viewsourc.es/) 20 | * [Web Components Weekly](http://webcomponentsweekly.me/) 21 | 22 | ##### HTML/CSS newsletters: 23 | 24 | * [HTML 5 Weekly](http://html5weekly.com/) 25 | * [CSS Weekly](http://css-weekly.com/archives/) 26 | 27 | ##### JavaScript newsletters, news, & podcasts: 28 | 29 | * [Javascript Jabber](https://devchat.tv/js-jabber/) 30 | * [JavaScript Weekly](http://javascriptweekly.com/) 31 | * [Echo JS](http://www.echojs.com/) 32 | * [JavaScript Kicks](http://javascriptkicks.com/) 33 | * [javascript.com](https://www.javascript.com/news) 34 | * [FiveJS](https://fivejs.codeschool.com/) 35 | * [JavaScript Live](https://jslive.com/) 36 | 37 | ##### Graphic and Animation Newsletters and Podcasts 38 | 39 | * [Motion and Meaning](http://motionandmeaning.io/) 40 | * [SVG Immersion Podcast](http://svgimmersion.com/) 41 | * [Web Animation Weekly](http://rachelnabors.us1.list-manage.com/subscribe?u=0a8f219cf8284562f91a26ee9&id=d60f6683d2) 42 | * [Responsive Images Community Group Newsletter](https://responsiveimages.org/#newsletter) 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /practice/skills.md: -------------------------------------------------------------------------------- 1 | # Front-end dev skills 2 | 3 | ![](../images/front-end-skills.png "http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html") 4 | 5 | image source: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html 6 | 7 | Basic to advanced HTML, CSS, DOM, JavaScript, HTTP/URL, and browser skills are assumed for any type of front-end developer. 8 | 9 | Beyond HTML, CSS, DOM, JavaScript, HTTP/URL, and browser development, a front-end developer could be skilled in one of the following: 10 | 11 | * Content management systems (aka CMS) 12 | * Node.js 13 | * Cross-browser testing 14 | * Cross-platform testing 15 | * Unit Testing 16 | * Cross-device testing 17 | * Accessibility / WAI-ARIA 18 | * Search Engine Optimization (aka SEO) 19 | * Interaction or User Interface design 20 | * User Experience 21 | * Usability 22 | * E-commerce Systems 23 | * Portal Systems 24 | * Wireframing 25 | * CSS layout / Grids 26 | * DOM manipulation (e.g. jQuery) 27 | * Mobile Web Performance 28 | * Load Testing 29 | * Performance Testing 30 | * Progressive Enhancement / Graceful Degradation 31 | * Version Control (e.g. GIT) 32 | * MVC / MVVM / MV* 33 | * Functional Programming 34 | * Data Formats (e.g. JSON, XML) 35 | * Data API's (e.g Restful API) 36 | * Web Font Embedding 37 | * Scalable Vector Graphics (aka SVG) 38 | * Regular Expressions 39 | * Content Strategy 40 | * Microdata / Microformats 41 | * Task Runners, Build Tools, Process Automation Tools 42 | * Responsive Web Design 43 | * Object Oriented Programming 44 | * Application Architecture 45 | * Modules 46 | * Dependency Managers 47 | * Package Managers 48 | * JavaScript Animation 49 | * CSS Animation 50 | * Charts / Graphs 51 | * UI widgets 52 | * Code Quality Testing 53 | * Code Coverage Testing 54 | * Code Complexity Analysis 55 | * Integration Testing 56 | * Command Line / CLI 57 | * Templating Strategies 58 | * Templating Engines 59 | * Single Page Applications 60 | * XHR Requests (aka AJAX) 61 | * Web/Browser Security 62 | * HTML Semantics 63 | * Browser Developer Tools 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /learning/http-networks.md: -------------------------------------------------------------------------------- 1 | # Learn HTTP/networks (including CORS & WebSockets) 2 | 3 | > **HTTP** The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. - Wikipedia 4 | 5 | > **CORS** Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated. - Wikipedia 6 | 7 | >**WebSockets** WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API in Web IDL is being standardized by the W3C. - Wikipedia 8 | 9 | ##### HTTP 10 | 11 | * [HTTP: The Protocol Every Web Developer Must Know - Part 1](http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177) [read] 12 | * [HTTP: The Protocol Every Web Developer Must Know - Part 2](http://code.tutsplus.com/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155) [read] 13 | * [HTTP Fundamentals](http://www.pluralsight.com/courses/xhttp-fund) [watch][$] 14 | * [HTTP Succinctly](http://code.tutsplus.com/series/http-succinctly--net-33683) [read] 15 | * [High Performance Browser Networking: What every web developer should know about networking and web performance](http://chimera.labs.oreilly.com/books/1230000000545/index.html) [read] 16 | 17 | ##### CORS 18 | 19 | * [HTTP Status Codes in 60 Seconds](http://webdesign.tutsplus.com/tutorials/http-status-codes-in-60-seconds--cms-24317) [watch] 20 | * [HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) [read] 21 | * [CORS in Action](https://www.manning.com/books/cors-in-action) [read][$] 22 | 23 | ##### WebSockets 24 | 25 | * [WebSocket: Lightweight Client-Server Communications](http://www.amazon.com/WebSocket-Client-Server-Communications-Andrew-Lombardi/dp/1449369278/ref=sr_1_1) [read][$] 26 | * [The WebSocket Protocol](https://tools.ietf.org/html/rfc6455) [read] 27 | * [Connect the Web With WebSockets](https://code.tutsplus.com/courses/connect-the-web-with-websockets) [watch] 28 | -------------------------------------------------------------------------------- /myIntro.md: -------------------------------------------------------------------------------- 1 | # Front-end Developer Handbook 2 | 3 | Written by [Cody Lindley](http://codylindley.com/) sponsored by — [Frontend Masters](https://frontendmasters.com/) 4 | 5 | This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. 6 | 7 | It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTO's, instructors, and head hunters to gain insights into the practice of front-end development. 8 | 9 | The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem. 10 | 11 | The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter. 12 | 13 | The intention is to release an update to the content yearly. 14 | 15 | The handbook is divided into three parts. 16 | 17 | Part I: The front-end practice 18 | --- 19 | Part one broadly describes the practice of front-end engineering. 20 | 21 | Part II: Learning front-end development 22 | --- 23 | Part two identifies self-directed and direct resources for learning to become a front-end developer. 24 | 25 | Part III: Front-end development tools 26 | --- 27 | Part three briefly explains and identifies tools of the trade. 28 | 29 | *** 30 | 31 | **download a .pdf, .epub, or .mobi file from**: 32 | 33 | * [https://www.gitbook.com/book/frontendmasters/front-end-handbook/details](https://www.gitbook.com/book/frontendmasters/front-end-handbook/details) 34 | 35 | **contribute content, suggestions, and fixes on github**: 36 | 37 | * [https://github.com/FrontendMasters/front-end-handbook](https://github.com/FrontendMasters/front-end-handbook) 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /learning/ui-design-patterns.md: -------------------------------------------------------------------------------- 1 | # Learn user interface/interaction design 2 | 3 | > **User interface design** User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design). - wikipedia 4 | > 5 | > **Interaction design pattern** A design pattern is a formal way of documenting a solution to a common design problem. The idea was introduced by the architect Christopher Alexander for use in urban planning and building architecture, and has been adapted for various other disciplines, including teaching and pedagogy, development organization and process, and software architecture and design. - wikipedia 6 | > 7 | > **User experience design** - User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. - wikipedia 8 | > 9 | > **Human–computer interaction** Human–computer interaction (HCI) researches the design and use of computer technology, focusing particularly on the interfaces between people (users) and computers. Researchers in the field of HCI both observe the ways in which humans interact with computers and design technologies that lets humans interact with computers in novel ways. - wikipedia 10 | 11 | Minimally I'd suggest reading the following canonical texts on the matter so one can build proper user interfaces. 12 | 13 | * [Designing Interfaces ](http://www.amazon.com/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1) [read][$] 14 | * [About Face: The Essentials of Interaction Design](http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/1118766571/ref=pd_sim_14_3) [read][$] 15 | * [Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability](http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_sim_14_2) [read][$] 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-end Developer Handbook 2 | 3 | Written by [Cody Lindley](http://codylindley.com/) sponsored by — [Frontend Masters](https://frontendmasters.com/) 4 | 5 | This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. 6 | 7 | It is specifically written with the intention of being a professional resource for potential and currently practicing front-end developers to equip themselves with learning materials and development tools. Secondarily, it can be used by managers, CTO's, instructors, and head hunters to gain insights into the practice of front-end development. 8 | 9 | The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) and those solutions that are directly built on top of these open technologies. The materials referenced and discussed in the book are either best in class or the current offering to a problem. 10 | 11 | The book should not be considered a comprehensive outline of all resources available to a front-end developer. The value of the book is tied up in a terse, focused, and timely curation of just enough categorical information so as not to overwhelm anyone on any one particular subject matter. 12 | 13 | The intention is to release an update to the content yearly. 14 | 15 | The handbook is divided into three parts. 16 | 17 | Part I: The front-end practice 18 | --- 19 | Part one broadly describes the practice of front-end engineering. 20 | 21 | Part II: Learning front-end development 22 | --- 23 | Part two identifies self-directed and direct resources for learning to become a front-end developer. 24 | 25 | Part III: Front-end development tools 26 | --- 27 | Part three briefly explains and identifies tools of the trade. 28 | 29 | *** 30 | 31 | **read online at**: 32 | 33 | * [http://www.frontendhandbook.com](http://www.frontendhandbook.com/) 34 | 35 | **download a .pdf, .epub, or .mobi file from**: 36 | 37 | * [https://www.gitbook.com/book/frontendmasters/front-end-handbook/details](https://www.gitbook.com/book/frontendmasters/front-end-handbook/details) 38 | 39 | **contribute content, suggestions, and fixes on github**: 40 | 41 | * [https://github.com/FrontendMasters/front-end-handbook](https://github.com/FrontendMasters/front-end-handbook) 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /tools/html.md: -------------------------------------------------------------------------------- 1 | # HTML Tools 2 | 3 | ##### HTML templates/boilerplates/starter kits: 4 | 5 | * [HTML5 Boilerplate](https://html5boilerplate.com/) 6 | * [Mobile boilerplate](https://html5boilerplate.com/mobile/) 7 | * [Web Starter Kit Boilerplate & Tooling for Multi-Device Development](https://developers.google.com/web/tools/starter-kit) 8 | * [dCodes](http://www.dcodes.net/2/docs/index.html) 9 | * [HTML5 Bones](http://html5bones.com/) 10 | * [Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate) 11 | * [Pears](http://pea.rs/) 12 | 13 | ##### HTML polyfill: 14 | 15 | * [html5shiv](https://github.com/aFarkas/html5shiv) 16 | 17 | ##### Transpiling: 18 | 19 | * [jade](http://jade-lang.com/) 20 | * [HAML](http://haml.info/) 21 | * [Markdown](http://daringfireball.net/projects/markdown/) 22 | 23 | ##### References: 24 | 25 | * [HTML Interfaces Browser Support ](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) 26 | * [HTML Entity Lookup](http://entity-lookup.leftlogic.com/) 27 | * [HTMLelement.info](http://htmlelement.info/) 28 | * [Elements](https://html.spec.whatwg.org/multipage/indices.html#elements-3) 29 | * [Element attributes](https://html.spec.whatwg.org/multipage/indices.html#attributes-3) 30 | * [HTML Arrows](http://htmlarrows.com/) 31 | 32 | ##### Linting/hinting: 33 | 34 | * [html5-lint](https://github.com/mozilla/html5-lint) 35 | * [HTMLHint](http://htmlhint.com/) 36 | * [html-inspector](https://github.com/philipwalton/html-inspector) 37 | 38 | ##### Optimizer: 39 | 40 | * [HTML Minifier](http://kangax.github.io/html-minifier/) 41 | 42 | ##### Online creation/generation/experimentation tools: 43 | 44 | * [tablesgenerator.com](http://www.tablesgenerator.com/) 45 | 46 | ##### Authoring conventions: 47 | 48 | * [Principles of writing consistent, idiomatic HTML](https://github.com/necolas/idiomatic-html) 49 | * [HTML code guide](http://codeguide.co/#html) 50 | 51 | ##### Workflow: 52 | 53 | * [Emmet](http://emmet.io/) 54 | 55 | ##### Trending HTML repositories on Github this month: 56 | 57 | [https://github.com/trending?l=html&since=monthly](https://github.com/trending?l=html&since=monthly) 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /learning/browser-dev-tools.md: -------------------------------------------------------------------------------- 1 | # Learn web developer tools 2 | 3 | > Web development tools allow web developers to test and debug their code. They are different from website builders and IDEs in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user facing interface of a website or web application. 4 | > 5 | > Web development tools come as browser add-ons or built in features in web browsers. The most popular web browsers today like, Google Chrome, Firefox, Opera, Internet Explorer, and Safari have built in tools to help web developers, and many additional add-ons can be found in their respective plugin download centers. 6 | > 7 | > Web development tools allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to the increasing demand from web browsers to do more popular web browsers have included more features geared for developers. - wikipedia 8 | 9 | While most browsers come equipped with web developer tools, the [Chrome developer tools](https://developers.google.com/web/tools/chrome-devtools/) are currently the most talked about and widely used tools available. 10 | 11 | I'd suggest learning and using the [Chrome web developer tools](https://developers.google.com/web/tools/chrome-devtools/), simply because the best resources for learning web developer tools revolves around Chrome DevTools. 12 | 13 | ##### Learn Chrome web developer tools 14 | 15 | * [Explore and Master Chrome DevTools](http://discover-devtools.codeschool.com/) 16 | * [Chrome Developer Tools](https://code.tutsplus.com/courses/chrome-developer-tools) [watch][$] 17 | * [Using The Chrome Developer Tools](http://www.pluralsight.com/courses/chrome-developer-tools) [watch][$] 18 | 19 | ##### Chrome web developer tools docs: 20 | 21 | * [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs) 22 | * [Command Line API Reference](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en) 23 | * [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) 24 | * [Settings](https://developer.chrome.com/devtools/docs/settings) 25 | 26 | ##### News/newsletters/podcasts/tips: 27 | 28 | * [Dev Tips](https://umaar.com/dev-tips/) 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /learning/multi-thing-dev.md: -------------------------------------------------------------------------------- 1 | # Learn multi-thing development 2 | 3 | ![](../images/things.jpg "http://bradfrost.com/blog/post/this-is-the-web/") 4 | 5 | image source: http://bradfrost.com/blog/post/this-is-the-web/ 6 | 7 | A site or application can run on a wide range of computers, laptops, tablets and phones, as well as a handful of other things (watches, thermostats, fridges etc...). How you determine what things you'll support and how you will develop to support those things is called a multi-thing development strategy. Below, I list the most common multi-thing development strategies. 8 | 9 | * Build a [responsive (RWD)](https://en.wikipedia.org/wiki/Responsive_web_design) web site/app for all things. 10 | * Build a [RESS (responsive web design with server-side components)](http://www.lukew.com/ff/entry.asp?1392) web site/app for all things. 11 | * Build an [adaptive/progressively](https://en.wikipedia.org/wiki/Adaptive_web_design) enhanced web site/app for all things. 12 | * Build a website, web app, native app, or hybrid-native app for each individual thing or a grouping of things. 13 | * Attempt to retrofit something you have already built using bits and parts from strategies 1, 2 or 3. This could be as simple as sprinkling in some screen-size agnostic UI parts or attempting to fully support other things with the entire UI. 14 | 15 | ##### General learning: 16 | 17 | * [Adaptive Web Design](http://adaptivewebdesign.info/) [read][$] 18 | * [Designing with progressive enhancement](https://www.filamentgroup.com/dwpe/) [read][$] 19 | * [Responsive Typography](Responsive Typography) [watch][$] 20 | * [Responsive Web Design](https://frontendmasters.com/courses/responsive-web-design/) [watch][$] 21 | * [Responsive HTML Email Design](https://frontendmasters.com/courses/responsive-email/) [watch][$] 22 | * [Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices](http://www.amazon.com/Designing-Multi-Device-Experiences-Ecosystem-Approach/dp/1449340385/ref=pd_sim_14_8) [read][$] 23 | * [Responsive Web Design Fundamentals](https://www.udacity.com/courses/web-development) [watch] 24 | * [Responsive Images](https://www.udacity.com/course/responsive-images--ud882) [watch] 25 | * [Mobile Web Development](https://www.udacity.com/course/mobile-web-development--cs256) [watch] 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /learning/accessibility.md: -------------------------------------------------------------------------------- 1 | # Learn accessibility 2 | 3 | > Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and "indirect access" meaning compatibility with a person's assistive technology (for example, computer screen readers). 4 | > 5 | >Accessibility can be viewed as the "ability to access" and benefit from some system or entity. The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone. 6 | > 7 | >Accessibility is not to be confused with usability, which is the extent to which a product (such as a device, service, or environment) can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. 8 | > 9 | >Accessibility is strongly related to universal design which is the process of creating products that are usable by people with the widest possible range of abilities, operating within the widest possible range of situations. This is about making things accessible to all people (whether they have a disability or not). - wikipedia 10 | 11 | ##### General learning: 12 | 13 | * [Universal Design for Web Applications: Web Applications That Reach Everyone](http://www.amazon.com/Universal-Design-Web-Applications-Everyone/dp/0596518730/ref=sr_1_1) [read][$] 14 | * [Web Accessibility: Getting Started](http://www.pluralsight.com/courses/web-accessibility-getting-started) [watch][$] 15 | * [Introduction to Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) [read] 16 | * [A Web for Everyone](http://rosenfeldmedia.com/books/a-web-for-everyone/) [read][$] 17 | * [Foundations of UX: Accessibility](http://www.lynda.com/Web-Accessibility-tutorials/Foundations-UX-Accessibility/156957-2.html)[watch][$] 18 | * [Introduction to Web Accessibility](https://webaccessibility.withgoogle.com/course) [watch] 19 | 20 | ##### Standards/specifications: 21 | 22 | * [Web Accessibility Initiative (WAI)](http://www.w3.org/WAI/) 23 | * [Web Content Accessibility Guidelines (WCAG) Current Status](http://www.w3.org/standards/techs/wcag#w3c_all) 24 | * [Accessible Rich Internet Applications (WAI-ARIA) Current Status](http://www.w3.org/standards/techs/aria#w3c_all) 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /learning/web-api.md: -------------------------------------------------------------------------------- 1 | # Learn web/browser API's 2 | 3 | The BOM and the DOM are not the only browser API's that are made available on the web platform inside of browsers. Everything that is not specifically the DOM or BOM, but an interface for programming the browser could be considered a web or browser API (tragically in the past some of these API's have been called HTML5 api's which confuses their own specifics/standardize with the actual HTML5 specification specify the HTML5 markup language). Note that web or browser API's do include device API's (e.g. [`Navigator.getBattery()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery)) that are available through the browser on tablet and phones devices. 4 | 5 | ![](../images/web-api.png "http://www.evolutionoftheweb.com/") 6 | 7 | image source: http://www.evolutionoftheweb.com/ 8 | 9 | You should be aware of and learn, where appropriate, web/browser API's. A good tool to use to familiarize oneself with all of these API's would be to investigate the [HTML5test.com results for the 5 most current browsers](https://html5test.com/compare/browser/chrome-44/firefox-40/ie-11/safari-9.0.html). 10 | 11 | ##### Learn: 12 | 13 | * [DIVE INTO HTML5](http://diveintohtml5.info/) [read] 14 | * [Pro HTML5 Programming](http://apress.jensimmons.com/v5/pro-html5-programming/info.html) [read] 15 | 16 | ##### Learn audio: 17 | * [HTML5 Canvas](http://chimera.labs.oreilly.com/books/1234000001654/index.html) [read] 18 | * [Fun With Web Audio](https://code.tutsplus.com/courses/fun-with-web-audio/) [watch] 19 | * [Add Sound to Your Site With Web Audio](https://code.tutsplus.com/courses/add-sound-to-your-site-with-web-audio) [watch] 20 | 21 | ##### Learn canvas: 22 | 23 | * [Web Audio API](http://chimera.labs.oreilly.com/books/1234000001552/index.html) [read] 24 | 25 | Additionally, MDN has a great deal of information about web/browser APIs. 26 | 27 | * [MDN Web API reference](https://developer.mozilla.org/en-US/docs/Web/Reference/API) 28 | * [MDN WebAPI - lists device access APIs and other APIs useful for applications.](https://developer.mozilla.org/en-US/docs/WebAPI) 29 | * [MDN Web APIs interface reference - all interfaces, arranged alphabetically.](https://developer.mozilla.org/en-US/docs/Web/API) 30 | 31 | Keep in mind that not every API is specified by the W3C or WHATWG. 32 | 33 | In addition to MDN, you might find the following resources helpful: 34 | 35 | * [HTML5-overview](https://github.com/dret/HTML5-overview) 36 | * [platform.html5.org](https://platform.html5.org/) 37 | * [The HTML 5 JavaScript API Index](http://html5index.org/) 38 | 39 | 40 | -------------------------------------------------------------------------------- /learning/front-end.md: -------------------------------------------------------------------------------- 1 | # Learn general front-end development 2 | 3 | ##### General learning: 4 | 5 | * [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) [read] 6 | * [Being a web developer](http://www.yellowshoe.com.au/standards) [read] 7 | * [Isobar Front-end Code Standards](http://isobar-idev.github.io/code-standards/) [read] 8 | * [Web Fundamentals](https://developers.google.com/web/fundamentals) [read] 9 | * [Front-end Curriculum](https://gist.github.com/stevekinney/03027e71aac341af14a2) [read] 10 | * [freeCodeCamp](http://freecodecamp.com/) [interact] 11 | * [Planning a Front-end JS Application](https://www.youtube.com/watch?v=q4zEGkjTBFA) [watch] 12 | * [So, You Want to be a Front-End Engineer](https://www.youtube.com/watch?v=Lsg84NtJbmI) [watch] 13 | * [Front End Web Development Career Kickstart](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [watch][$] 14 | * [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$] 15 | * [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$] 16 | * [Introduction to Web Development](https://frontendmasters.com/courses/web-development/) [watch][$] 17 | * [Foundations of Front-End Web Development](https://www.udemy.com/foundations-of-front-end-development/) [watch][$] 18 | * [Lean Front-End Engineering](https://frontendmasters.com/courses/lean-front-end-engineering/) [watch][$] 19 | * [A Baseline for Front-End [JS] Developers: 2015](http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/) [read] 20 | * [Learn Front End Web Development](https://teamtreehouse.com/tracks/front-end-web-development) [watch][$] 21 | * [Front-End Dev Mastery](https://mijingo.com/products/bundles/front-end-dev-mastery/) [watch][$] 22 | * [Front-End Web Developer Nanodegree](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001) [watch][$] 23 | 24 | ##### General front-end newsletters, news outlets, & podcasts: 25 | 26 | * [shoptalkshow.com](http://shoptalkshow.com/) 27 | * [frontendfront.com](http://frontendfront.com/) 28 | * [webtoolsweekly.com](http://webtoolsweekly.com/) 29 | * [O'Reilly Web Platform Radar](http://radar.oreilly.com/web-platform) 30 | * [The Wdb Platform Podcast](http://thewebplatform.libsyn.com/) 31 | * [The Web Ahead](http://thewebahead.net/) 32 | * [The Big Web Show](http://5by5.tv/bigwebshow) 33 | * [Fresh Brewed Frontend](https://freshbrewed.co/frontend/) 34 | * [Mobile Web Weekly](http://mobilewebweekly.co/) 35 | * [Open Web Platform Daily Digest](http://webplatformdaily.org/) 36 | * [FRONT-END DEV weekly](http://frontenddevweekly.com/) 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /what-is-a-FD.md: -------------------------------------------------------------------------------- 1 | # What is a front-end developer? 2 | 3 | A front-end developer architects and develops websites and applications using web technologies (i.e. HTML, CSS, DOM, and JavaScript), which run on the [web platform](https://en.wikipedia.org/wiki/Open_Web_Platform) or act as compilation input for non-web platform environments (i.e. [NativeScript](https://www.nativescript.org/)). 4 | 5 | ![](images/what-is-front-end-dev.png "https://www.upwork.com/hiring/development/front-end-developer/") 6 | 7 | image source: https://www.upwork.com/hiring/development/front-end-developer/ 8 | 9 | Typically, a person enters into the field of front-end development by learning to develop HTML, CSS, and JS code, which runs in a [web browser](https://en.wikipedia.org/wiki/Web_browser), [headless browser](https://en.wikipedia.org/wiki/Headless_browser), webview, or as compilation input for a native runtime environment. The four run times scenarios are explained below. 10 | 11 | A web browser is software used to retrieve, present, and traverse information on the WWW. Typically, browsers run on a desktop, laptop, tablet, or phone, but as of late a browser can be found on just about anything (i.e on a fridge, in cars, etc...). 12 | 13 | The most common web browsers are: 14 | 15 | * [Chrome](http://www.google.com/chrome/) 16 | * [Internet Explorer](http://dev.modern.ie/) 17 | * [Firefox](https://www.mozilla.org/firefox/) 18 | * [Safari](http://www.apple.com/safari/) 19 | 20 | Headless browsers are a web browser without a graphical user interface that can be controlled from a command line interface for the purpose of web page automation (e.g. functional testing, scraping, unit testing etc..). Think of headless browsers as a browser that you can run from the command line that can retrieve and traverse web pages. 21 | 22 | The most common headless browsers are: 23 | 24 | * [PhantomJS](http://phantomjs.org/) 25 | * [slimerjs](http://slimerjs.org/) 26 | * [trifleJS](http://triflejs.org/) 27 | 28 | Webviews are used by a native OS to run web pages. Think of a webview like an iframe or a single tab from a web browser that is embedded in a native application running on a device. 29 | 30 | The most common solutions for webview development are: 31 | 32 | * [Cordova](https://cordova.apache.org/) (typically for native phone/tablet apps) 33 | * [NW.js](https://github.com/nwjs/nw.js) (typically used for desktop apps) 34 | * [Electron](http://electron.atom.io/) (typically used for desktop apps) 35 | 36 | Eventually, what is learned from web browser development can be used by front-end developers to craft code for environments that are not fueled by a browser engine. As of late, development environments are being dreamed up that use web technologies (e.g. CSS and JavaScript), without web engines, to create truly native applications. 37 | 38 | Some examples of these environments are: 39 | 40 | * [NativeScript](https://www.nativescript.org/) 41 | * [React Native](https://facebook.github.io/react-native/) 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /practice/types-of-front-end-dev.md: -------------------------------------------------------------------------------- 1 | # Front-end jobs titles 2 | 3 | Below is a list and description of various front-end job titles. The common, or most used (i.e. generic), title for a front-end developer is, "front-end developer" or "front-end engineer". Note that any job that contains the word "front-end", "client-side", "web UI", "HTML", "CSS", or "JavaScript" typically infers that a person has some degree of HTML, CSS, DOM, and JavaScript professional know how. 4 | 5 | *** 6 | 7 | **Front-end Developer/Engineer** (aka Front-end Web Developer/Engineer, Client-side Developer/Engineer, Front-end Software Developer/Engineer or UI Engineer) 8 | 9 | The generic job title that describes a developer who is skilled to some degree at HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform. 10 | 11 | *** 12 | 13 | **CSS/HTML Developer** 14 | 15 | The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and Application know how. 16 | 17 | *** 18 | 19 | **Front-end JavaScript (optionally...Application) Developer** 20 | 21 | When the word "JavaScript Application" is included in the job title, this will denote that the developer should be an advanced JavaScript developer possessing advanced programming, software development, and application development skills (i.e will have solid experience building front-end applications). 22 | 23 | *** 24 | 25 | **Front-end Web Designer** 26 | 27 | When the word "Designer" is included in the job title, this will denote that the designer will posses front-end skills (i.e. HTML & CSS) but also professional design (Visual Design and Interaction Design) skills. 28 | 29 | *** 30 | 31 | **Web/Front-end User Interface (aka UI) Developer/Engineer** 32 | 33 | When the word "Interface" or "UI" is included in the job title, this will denote that the developer should posses interaction design skills in addition to front-end skills. 34 | 35 | *** 36 | 37 | **Mobile/Tablet Front-end Developer** 38 | 39 | When the word "Mobile" or "Tablet" is included in the job title, this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively or on the web platform i.e. in a browser). 40 | 41 | *** 42 | 43 | **Front-end SEO Expert** 44 | 45 | When the word "SEO" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy. 46 | 47 | *** 48 | 49 | **Front-end Accessibility Expert** 50 | 51 | When the word "Acessibility" is included in the job title, this will denote that the developer has extensive experience crafting front-end technologies that support accessibility requirements and standards. 52 | 53 | *** 54 | 55 | **Front-end Dev. Ops** 56 | 57 | When the word "DevOps" is included in the job title, this will denote that the developer has extensive experience with software development practices pertaining to collaboration, integration, deployment, automation, and measurement. 58 | 59 | *** 60 | 61 | **Front-end Testing/QA** 62 | 63 | When the word "Testing" or "QA" is included in the job title, this will denote that the developer has extensive experience testing and managing software that involves unit testing, functional testing, user testing, and A/B testing. 64 | 65 | *** 66 | 67 | Note that if you come across the "Full Stack" or the generic "Web Developer" terms in job titles these words may be used to by an employer to describe a role that is responsible for all aspects of web/app development i.e. both front-end (potentially including design) and back-end. 68 | 69 | -------------------------------------------------------------------------------- /tools/browser.md: -------------------------------------------------------------------------------- 1 | # Browser Tools 2 | 3 | ##### JS browser utilities: 4 | 5 | * [URI.js](http://medialize.github.io/URI.js/) 6 | * [platform.js](https://github.com/bestiejs/platform.js) 7 | * [history.js](https://github.com/browserstate/history.js) 8 | * [html2canvas](https://github.com/niklasvh/html2canvas) 9 | 10 | ##### General reference tools to determine if X browser supports X: 11 | 12 | * [caniuse.com](http://caniuse.com/) 13 | * [HTML5 Please](http://html5please.com/) 14 | * [HTML5 test](https://html5test.com/) 15 | * [Browserscope](http://www.browserscope.org/) 16 | * [webbrowsercompatibility.com](http://www.webbrowsercompatibility.com/) 17 | * [iwanttouse.com/](http://www.iwanttouse.com/) 18 | * [Platform status](https://dev.modern.ie/platform/status/) 19 | * [Browser support for broken/missing images](http://codepen.io/bartveneman/full/qzCte/) 20 | * [Big JS-Compatibility-Table](http://compatibility.shwups-cms.ch/en/home) 21 | * [jscc.info](http://jscc.info/) 22 | 23 | ##### Browser development/debug tools: 24 | 25 | * [Opera Dragonfly](http://www.opera.com/dragonfly/) 26 | * [Safari Web Inspector](https://developer.apple.com/safari/tools/) 27 | * [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) 28 | * [Chrome Developer Tools (aka DevTools)](https://developers.google.com/web/tools/?hl=en) 29 | - [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs) 30 | - [Command Line API Reference](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en) 31 | - [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) 32 | - [Settings](https://developer.chrome.com/devtools/docs/settings) 33 | * [IE Developer tools (aka F12 tools)](https://dev.modern.ie/platform/documentation/f12-devtools-guide/) 34 | * [vorlon.js](http://vorlonjs.com/) 35 | 36 | ##### Synchronized browser tools: 37 | 38 | * [Browsersync](http://www.browsersync.io/) 39 | 40 | ##### Browser coding tools to determine if X browser supports X: 41 | 42 | * [Modernizr](https://modernizr.com/) 43 | * [ES Feature Tests](https://featuretests.io/) 44 | 45 | ##### Broad browser polyfills/shims: 46 | 47 | * [webcomponents.js](https://github.com/WebComponents/webcomponentsjs) 48 | * [webshim](https://afarkas.github.io/webshim/demos/) 49 | * [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) 50 | * [console-polyfill](https://github.com/paulmillr/console-polyfill) 51 | * [socket.io](http://socket.io/) 52 | * [sockjs](https://github.com/sockjs/sockjs-client) 53 | 54 | ##### Browser hosted testing/automation: 55 | 56 | * [browserstack](https://www.browserstack.com) [$] 57 | * [browserling](https://www.browserling.com/) [$] 58 | * [Sauce labs](https://saucelabs.com/) [$] 59 | * [Selenium](http://www.seleniumhq.org/) 60 | * [CrossBrowserTesting.com](http://crossbrowsertesting.com/) [$] 61 | 62 | ##### Headless browsers: 63 | 64 | * [PhantomJS](http://phantomjs.org/) 65 | * [slimerjs](http://slimerjs.org/) 66 | * [TrifleJS](http://triflejs.org/) 67 | 68 | ##### Headless browser automation: 69 | 70 | * [nightwatchjs](http://nightwatchjs.org/) 71 | * [casperJS](http://casperjs.org/) 72 | * [Nightmare](https://github.com/segmentio/nightmare) 73 | 74 | ##### Browser hacks: 75 | 76 | * [browserhacks.com](http://browserhacks.com/) 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /tools/css.md: -------------------------------------------------------------------------------- 1 | # CSS Tools 2 | 3 | ##### Desktop & mobile CSS frameworks: 4 | 5 | * [Semantic UI](http://semantic-ui.com/) 6 | * [Foundation](http://foundation.zurb.com/) 7 | * [Bootstrap](http://getbootstrap.com/) 8 | * [Metro UI](http://metroui.org.ua/) 9 | * [Pure.css](http://purecss.io/) 10 | * [Concise](http://concisecss.com/) 11 | * [Materialize](http://materializecss.com/) 12 | * [Material Design Lite (MDL)](http://www.getmdl.io/index.html) 13 | * [Base](http://getbase.org/) 14 | 15 | ##### Mobile only CSS frameworks: 16 | 17 | * [Ratchet](http://goratchet.com/) 18 | 19 | ##### CSS reset: 20 | 21 | > A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. - [http://cssreset.com/](http://cssreset.com/what-is-a-css-reset/) 22 | 23 | * [Eric Meyer’s “Reset CSS” 2.0](http://meyerweb.com/eric/tools/css/reset/) 24 | * [Normalize](https://necolas.github.io/normalize.css/) 25 | 26 | ##### Transpiling: 27 | 28 | * [SASS/SCSS](http://sass-lang.com/) 29 | * [stylus](https://github.com/stylus/stylus) 30 | * [PostCSS](https://github.com/postcss/postcss) & [cssnext](http://cssnext.io/) 31 | * [rework](https://github.com/reworkcss/rework) & [myth](http://www.myth.io/) 32 | * [pleeease.io](http://pleeease.io/) 33 | 34 | ##### References: 35 | 36 | * [css3test.com](http://css3test.com/) 37 | * [css4-selectors.com](http://css4-selectors.com/) 38 | * [css3clickchart.com](http://css3clickchart.com/) 39 | * [cssvalues.com](http://cssvalues.com/) 40 | * [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/) 41 | * [MDN CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) 42 | * [overapi.com CSS cheatsheet](http://overapi.com/css/) 43 | 44 | ##### Linting/hinting: 45 | 46 | * [CSS Lint](http://csslint.net/) 47 | * [stylelint](http://stylelint.io/) 48 | 49 | ##### Code formatter/beautifier: 50 | 51 | * [CSScomb](https://github.com/csscomb/csscomb.js) 52 | * [cssfmt](https://github.com/morishitter/cssfmt) 53 | 54 | ##### Optimizer: 55 | 56 | * [csso](http://css.github.io/csso/) 57 | * [clear-css](https://github.com/jakubpawlowicz/clean-css) 58 | * [cssnano](http://cssnano.co/) 59 | 60 | ##### Online creation/generation/experimentation tools: 61 | 62 | * [Ultimate CSS Gradient Generator](Ultimate CSS Gradient Generator) 63 | * [Enjoy CSS](http://enjoycss.com/) 64 | * [CSS matic](http://www.cssmatic.com/) 65 | * [patternify.com](http://patternify.com) 66 | * [patternizer.com](http://patternizer.com/) 67 | * [CSS arrow please](http://cssarrowplease.com/) 68 | * [flexplorer](http://bennettfeely.com/flexplorer/) 69 | * [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground) 70 | 71 | ##### Architecting CSS: 72 | 73 | * [oocss](http://oocss.org/) [read] 74 | * [SMACSS](https://smacss.com/) [read][$] 75 | * [Atomic Design](http://atomicdesign.bradfrost.com/) [read] 76 | 77 | ##### Authoring conventions: 78 | 79 | * [idiomatic-css](https://github.com/necolas/idiomatic-css) [read] 80 | * [CSS code guide](http://codeguide.co/#css) [read] 81 | * [cssguidelin.es](http://cssguidelin.es/) [read] 82 | * [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#General_Formatting) 83 | 84 | ##### Trending CSS repositories on Github this month: 85 | 86 | [https://github.com/trending?l=css&since=monthly](https://github.com/trending?l=css&since=monthly) 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /tools/js.md: -------------------------------------------------------------------------------- 1 | # JavaScript Tools 2 | 3 | ##### JS utilities: 4 | 5 | * [lodash](https://lodash.com/) 6 | * [underscore.js](http://underscorejs.org/) 7 | * [Moment.js](http://momentjs.com/) 8 | * [string.js](http://stringjs.com/) 9 | * [Numeral.js](http://numeraljs.com/) 10 | * [accounting.js](http://openexchangerates.github.io/accounting.js/) 11 | * [xregexp.com](http://xregexp.com/) 12 | * [Math.js](http://mathjs.org/) 13 | * [wait](https://github.com/elving/wait) 14 | * [async](https://github.com/caolan/async) 15 | * [format.js](http://formatjs.io/) 16 | 17 | ##### Transpiling (ESX to ESX): 18 | 19 | * [Babel](https://babeljs.io/) 20 | 21 | ##### JavaScript compatibility checker: 22 | 23 | * [http://jscc.info/](http://jscc.info/) 24 | 25 | ##### Linting/hinting: 26 | 27 | * [jshint](http://jshint.com/) 28 | * [eshint](http://eslint.org/) 29 | * [JSLint](http://www.jslint.com/) 30 | - [jslinterrors.com](http://jslinterrors.com/) 31 | 32 | ##### Unit testing: 33 | 34 | * [Mocha](http://mochajs.org/) 35 | * [QUnit](http://qunitjs.com/) 36 | * [Jasmine](http://jasmine.github.io/) 37 | - [Jest](http://facebook.github.io/jest/) 38 | 39 | ##### Testing assertions for unit testing: 40 | 41 | * [should.js](http://shouldjs.github.io/) 42 | * [Chai](http://chaijs.com/) 43 | * [expect.js](https://github.com/Automattic/expect.js) 44 | 45 | ##### Test spies, stubs, and mocks for unit testing: 46 | 47 | * [sinon.js](http://sinonjs.org/) 48 | 49 | ##### Code style linter: 50 | 51 | * [JSCS](http://jscs.info/) 52 | 53 | ##### Code formater/beautifier: 54 | 55 | * [jsfmt](http://rdio.github.io/jsfmt/) 56 | * [esformatter](https://github.com/millermedeiros/esformatter#esformatterformatstr-optsstring) 57 | * [js-beautify](http://jsbeautifier.org/) 58 | 59 | ##### Performance testing: 60 | 61 | * [jsperf](http://jsperf.com/) 62 | * [benchmark.js](http://benchmarkjs.com/) 63 | 64 | ##### Visualization, static analysis, complexity, coverage tools: 65 | 66 | * [jscomplexity.org](http://jscomplexity.org/) 67 | * [istanbul](https://github.com/gotwarlost/istanbul) 68 | * [Blanket.js](http://blanketjs.org/) 69 | * [Coveralls](https://coveralls.io/) [$] 70 | * [Plato](https://github.com/es-analysis/plato) 71 | * [escomplex](https://github.com/jared-stilwell/escomplex) 72 | * [Esprima](http://esprima.org/) 73 | 74 | ##### Optimizer: 75 | 76 | * [UglifyJS 2](https://github.com/mishoo/UglifyJS2) 77 | 78 | ##### Obfuscate: 79 | 80 | * [Javascript Obfuscator](http://www.javascriptobfuscator.com/) [free to $] 81 | * [JScrambler](https://jscrambler.com/) [$] 82 | 83 | ##### Online js code editors: 84 | 85 | * [jsbin.com](http://jsbin.com/) [free to $] 86 | * [jsfiddle.net](http://jsfiddle.net/) 87 | * [es6fiddle.net](http://www.es6fiddle.net/) 88 | 89 | ##### Online Regular expression editors/visual tools: 90 | 91 | * [regex101](https://regex101.com/) 92 | * [regexper](http://regexper.com/) 93 | * [debuggex](https://www.debuggex.com) 94 | * [RegExr](http://regexr.com/) 95 | 96 | ##### Authoring conventions: 97 | 98 | * [Node.js Style Guide](https://github.com/felixge/node-style-guide) 99 | * [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js) 100 | * [Airbnb JavaScript Style Guide](http://airbnb.io/javascript/) 101 | 102 | ##### Trending JS repositories on Github this month: 103 | 104 | [https://github.com/trending?l=javascript&since=monthly](https://github.com/trending?l=javascript&since=monthly) 105 | 106 | ##### Most depended upon packages on NPM: 107 | 108 | [https://www.npmjs.com/browse/depended](https://www.npmjs.com/browse/depended) 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /learning/dom.md: -------------------------------------------------------------------------------- 1 | # Learn DOM, BOM, & jQuery 2 | 3 | > **DOM** - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). - wikipedia.org 4 | 5 | > **BOM** - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish. - wikipedia.org 6 | 7 | > **jQuery** - jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License. - wikipedia.org 8 | 9 | The ideal path, but certainly the most difficult, would be to first learn JavaScript, then the DOM, then jQuery. However, do what makes sense to your brain. Most front-end developers learn about JavaScript and then DOM by way of first learning jQuery. Whatever path you take, just make sure JavaScript, then DOM, or jQuery don't become a black box. 10 | 11 | ##### General learning: 12 | 13 | * [The Document Object Model](http://eloquentjavascript.net/13_dom.html) [read] 14 | * [codecademy.com jQuery](https://www.codecademy.com/tracks/jquery) [watch] 15 | * [jQuery Enlightenment](http://jqueryenlightenment.com/) [read] 16 | * [HTML/JS: Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js) [watch] 17 | * [HTML/JS: Making webpages interactive with jQuery](https://www.khanacademy.org/computing/computer-programming/html-js-jquery) [watch] 18 | 19 | ##### Mastering: 20 | 21 | * [DOM Enlightenment](http://www.amazon.com/DOM-Enlightenment-Cody-Lindley/dp/1449342841/) [read][$] or [read online for free](http://domenlightenment.com/) 22 | * [Advanced JS Fundamentals to jQuery & Pure DOM Scripting](https://frontendmasters.com/courses/javascript-jquery-dom/) [watch][$] 23 | * [AdvancED DOM Scripting: Dynamic Web Design Techniques](http://www.amazon.com/gp/product/1590598563/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590598563&linkCode=as2&tag=fronenddevejo-20&linkId=VQZU5EQIQQXCF56Y) [read][$] 24 | * [Fixing Common jQuery Bugs](http://www.pluralsight.com/courses/fixing-common-jquery-bugs) [watch][$] 25 | * [jQuery Tips and Tricks](http://www.pluralsight.com/courses/jquery-tips-and-tricks) [watch][$] 26 | * [jQuery-free JavaScript](http://www.pluralsight.com/courses/jquery-free-javascript) [watch][$] 27 | * [Douglas Crockford: An Inconvenient API - The Theory of the DOM](https://www.youtube.com/watch?v=Y2Y0U-2qJMs&list=PL5586336C26BDB324&index=2) [watch] 28 | 29 | ##### References/docs: 30 | 31 | * [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 32 | * [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events) 33 | * [jQuery Docs](http://api.jquery.com/) 34 | * [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window) 35 | * [msdn Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx) 36 | 37 | ##### Standards/specifications: 38 | 39 | * [W3C DOM4](http://www.w3.org/TR/2014/WD-dom-20140204/) 40 | * [DOM Living Standard](https://dom.spec.whatwg.org/) 41 | * [Document Object Model (DOM) Level 3 Events Specification](http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/) 42 | * [Document Object Model (DOM) Technical Reports](http://www.w3.org/DOM/DOMTR) 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /tools/code-editor.md: -------------------------------------------------------------------------------- 1 | # Learn Code Editors 2 | 3 | > A source code editor is a text editor program designed specifically for editing source code of computer programs by programmers. It may be a standalone application or it may be built into an integrated development environment (IDE) or web browser. Source code editors are the most fundamental programming tool, as the fundamental job of programmers is to write and edit source code. - Wikipedia 4 | 5 | Front-end code can minimally be edited with a simple text editing application like Notepad or TextEdit. But, most front-end practitioners use a code editor specifically design for editing a programming language. 6 | 7 | Code editors come in all sorts of types and size, so to speak. Selecting one is a rather subjective engagement. Choose one, learn it inside and out, then get on to learning HTML, CSS, DOM, and JavasCript. 8 | 9 | However, I do strongly believe, minimally, a code editor should have the following features: 10 | 11 | 1. Good documentation on how to use the editor 12 | 2. Report (i.e. hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript. 13 | 3. Offer syntax highlighting for HTML, CSS, and JavaScript. 14 | 4. Offer code completion for HTML, CSS, and JavaScript. 15 | 5. Be customizable by way of a plug-in architecture 16 | 6. Have available a large repository of third-party/community plug-ins that can be used to customize the editor to your liking 17 | 7. Be small, simple, and not coupled to the code (i.e. not required to edited the code) 18 | 19 | I personally use and recommend [Sublime Text](http://www.sublimetext.com/) with the following plug-ins. 20 | 21 | * [Package Control](https://packagecontrol.io/packages/Package%20Control) 22 | * [Auto​File​Name](https://packagecontrol.io/packages/AutoFileName) 23 | * [Sublime​Linter](https://packagecontrol.io/packages/SublimeLinter) 24 | * [Sublime​Linter-json](https://packagecontrol.io/packages/SublimeLinter-json) 25 | * [Sublime​Linter-jshint](https://packagecontrol.io/packages/SublimeLinter-jshint) 26 | * [Sublime​Linter-html-tidy](https://packagecontrol.io/packages/SublimeLinter-html-tidy) 27 | * [Side​Bar​Enhancements](https://packagecontrol.io/packages/SideBarEnhancements) 28 | * [Terminal](https://packagecontrol.io/packages/Terminal) 29 | * [Bracket​Highlighter](https://packagecontrol.io/packages/BracketHighlighter) 30 | * [Color Highlighter](https://packagecontrol.io/packages/Color%20Highlighter) 31 | * [CSS3](https://packagecontrol.io/packages/CSS3) 32 | * [HTMLAttributes](https://packagecontrol.io/packages/HTMLAttributes) 33 | * [String​Encode](https://packagecontrol.io/packages/StringEncode) 34 | * [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify) 35 | 36 | Here are some resources for learning Sublime: 37 | 38 | * [Sublime Productivity](https://leanpub.com/sublime-productivity) [read][$] 39 | * [Sublime Text Power User Book](https://sublimetextbook.com/) [read][$] 40 | * [Sublime Text 3 From Scratch](http://www.pluralsight.com/courses/sublime-text-3-from-scratch) [watch][$] 41 | * [Perfect Workflow in Sublime Text 2](https://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2) [watch][requires login, but free] 42 | 43 | If you need a free alternative to Sublime (cost $70) you might consider [atom](https://atom.io/) or [brackets](http://brackets.io/). 44 | 45 | ##### Collaborative online code editors to share live code: 46 | 47 | * [jsbin.com](http://jsbin.com/) [free to $] 48 | * [jsfiddle.net](http://jsfiddle.net/) 49 | * [liveweave.com](http://liveweave.com/) 50 | * [es6fiddle.net](http://www.es6fiddle.net/) 51 | * [codepen.io](http://codepen.io/) [free to $] 52 | * [Plunker](http://plnkr.co/) 53 | 54 | ##### Online code editors: 55 | 56 | * [codeanywhere](https://codeanywhere.com) [free to $] 57 | * [Koding](https://koding.com) [free to $] 58 | * [Cloud9](https://c9.io) [free to $] 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /tools/apps.md: -------------------------------------------------------------------------------- 1 | # App (desktop, mobile, tablet etc..) tools 2 | 3 | ##### Front-end app frameworks: 4 | 5 | * [AngularJS](https://angularjs.org/) & [Batarang](https://github.com/angular/angularjs-batarang) 6 | * [Backbone](http://backbonejs.org/) & [Marionette](http://marionettejs.com/) 7 | * [React](http://facebook.github.io/react/) & [Flux](http://facebook.github.io/flux/) & [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 8 | * [Vue.js](http://vuejs.org/) & [vue-loader](https://github.com/vuejs/vue-loader) & [vue-router](https://github.com/vuejs/vue-router) 9 | * [Ember](http://emberjs.com/) & [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en) 10 | * [Ampersand.js](http://ampersandjs.com/) 11 | * [Knockout](http://knockoutjs.com/) 12 | * [Aurelia](http://aurelia.io/) 13 | * [Polymer](https://www.polymer-project.org/1.0/) & [Iron Elements](https://elements.polymer-project.org/browse?package=iron-elements) & [Paper Elements](https://elements.polymer-project.org/browse?package=paper-elements) 14 | 15 | ##### Full-stack JS app platforms: 16 | 17 | * [Meteor](https://www.meteor.com/) 18 | * [Hood.ie](http://hood.ie/intro/) 19 | * [MEAN](http://meanjs.org/) 20 | 21 | ##### Mobile web ui/site/app frameworks 22 | 23 | These solutions can be used anywhere including in a webview (i.e. web platform and browser engine) app: 24 | 25 | * [Ratchet](http://goratchet.com/getting-started/) 26 | * [Kendo UI Mobile](http://demos.telerik.com/kendo-ui/m/index) 27 | * [Mobile Angular UI](http://mobileangularui.com/) 28 | * [Framework7](http://www.idangero.us/framework7) 29 | 30 | ##### Native Hybrid mobile webview (i.e. browser engine driven) frameworks: 31 | 32 | These solution typically use [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), or a custom webview as bridge to native api's. 33 | 34 | * [ionic](http://ionicframework.com/) 35 | * [onsen.io](http://onsen.io/) 36 | 37 | ##### Native Hybrid mobile development webview (i.e. browser engine driven) environments/platforms/tools: 38 | 39 | These solution typically use [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), or a custom webview as bridge to native api's. 40 | 41 | * [AppBuilder](http://www.telerik.com/appbuilder) [$] 42 | * [Monaca](https://monaca.io/) [$] 43 | * [Adobe PhoneGap](http://phonegap.com/) [$] 44 | * [kony](http://www.kony.com/products/mobility-platform) [$] 45 | * [ionic hub](http://ionic.io/) [free to $] 46 | * [Taco](http://taco.tools/) 47 | * [manifoldJS](http://manifoldjs.com/) 48 | * [cocoon.io](https://cocoon.io) [free to $] 49 | 50 | ##### Native desktop webview (i.e. browser engine driven) app frameworks: 51 | 52 | * [NW.js](https://github.com/nwjs/nw.js) 53 | * [Electron](http://electron.atom.io/) 54 | 55 | ##### Native mobile app frameworks (aka JavaScript Native apps) 56 | 57 | These solutions use a JS engine at runtime to inerput JS and bridget that to native api's. No browser engine or webview is used. The ui is constructed from native UI components. 58 | 59 | * [NativeScript](https://www.nativescript.org/) 60 | * [React Native](https://facebook.github.io/react-native/) 61 | * [tabris.js](https://tabrisjs.com/) [free to $] 62 | * [trigger.io](https://trigger.io/how-it-works/) [$] 63 | 64 | ##### References: 65 | 66 | * [todomvc.com](http://todomvc.com/) 67 | 68 | ##### App seeds/starters/boilerplates: 69 | 70 | * [React Starter Kit](http://www.reactstarterkit.com/) 71 | * [Ember starter-kit](https://github.com/emberjs/starter-kit) 72 | * [NG6-starter](https://github.com/angular-class/NG6-starter) 73 | * [Angular 2 Webpack Starter](http://angularclass.com/angular2-webpack-starter/) 74 | * [hjs-webpack](https://github.com/henrikjoreteg/hjs-webpack#developing-on-multiple-devices-at-once) 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [What is a front-end developer?](what-is-a-FD.md) 4 | * [Part I: The front-end practice](practice.md) 5 | * [Front-end jobs titles](practice/types-of-front-end-dev.md) 6 | * [Common web tech employed](practice/tech-employed-by-fd.md) 7 | * [Front-end dev skills](practice/skills.md) 8 | * [Front-end devs develop for...](practice/fd-dev-for.md) 9 | * [Front-end on a team](practice/team.md) 10 | 11 | * [Generalist myth](practice/myth.md) 12 | * [Front-end interview questions](practice/interview-q.md) 13 | * [Front-end job boards](practice/jobboards.md) 14 | * [Front-end salaries](practice/salaries.md) 15 | * [How FD's are made](practice/making-fd.md) 16 | * [Part II: Learning front-end dev](learning.md) 17 | * [Self directed learning](learning/self-direct-learning.md) 18 | * [Learn internet/web](learning/internet.md) 19 | * [Learn web browsers](learning/browsers.md) 20 | * [Learn DNS](learning/dns.md) 21 | * [Learn HTTP/networks](learning/http-networks.md) 22 | * [Learn web hosting](learning/hosting.md) 23 | * [Learn general front-end dev](learning/front-end.md) 24 | * [Learn UI/interaction design](learning/ui-design-patterns.md) 25 | * [Learn HTML & CSS](learning/html-css.md) 26 | * [Learn SEO](learning/seo.md) 27 | * [Learn JavaScript](learning/javascript.md) 28 | * [Learn web animation](learning/animation.md) 29 | * [Learn DOM, BOM & jQuery](learning/dom.md) 30 | * [Learn web fonts](learning/fonts.md) 31 | * [Learn accessibility](learning/accessibility.md) 32 | * [Learn web/browser API's](learning/web-api.md) 33 | * [Learn JSON](learning/json.md) 34 | * [Learn JS templates](learning/json.md) 35 | * [Learn static site generators](learning/static.md) 36 | * [Learn front-end app architecture](learning/front-end-apps.md) 37 | * [Learn Interface/API design](learning/api.md) 38 | * [Learn web dev tools](learning/browser-dev-tools.md) 39 | * [Learn command line](learning/cli.md) 40 | * [Learn node.js](learning/node.md) 41 | * [Learn module loader](learning/module.md) 42 | * [Learn package managers](learning/package-manager.md) 43 | * [Learn version control](learning/version-control.md) 44 | * [Learn build & task automation](learning/build.md) 45 | * [Learn site performance optimization](learning/perf.md) 46 | * [Learn JS testing](learning/test.md) 47 | * [Learn headless browsers](learning/headless-browsers.md) 48 | * [Learn offline dev](learning/offline.md) 49 | * [Learn security](learning/security.md) 50 | * [Learn multi-thing dev (e.g. RWD)](learning/multi-thing-dev.md) 51 | * [Directed learning](learning/direct-learning.md) 52 | * [front-end schools, courses, & bootcamps](learning/courses.md) 53 | * [Front-end devs to learn from](learning/learn-from.md) 54 | * [Newsletters, news, & podcasts](learning/news-podcasts.md) 55 | * [Part III: Front-end dev tools](tools.md) 56 | * [General front-end dev tools](tools/general-tools.md) 57 | * [Doc/API browsing tools](tools/browsedocs.md) 58 | * [SEO tools](tools/seo.md) 59 | * [Prototyping & wireframing tools](tools/proto.md) 60 | * [Diagramming tools](tools/diagram.md) 61 | * [HTTP/network tools](tools/http.md) 62 | * [Code editing tools](tools/code-editor.md) 63 | * [Browser tools](tools/browser.md) 64 | * [HTML tools](tools/html.md) 65 | * [CSS tools](tools/css.md) 66 | * [DOM tools](tools/dom.md) 67 | * [JavaScript tools](tools/js.md) 68 | * [Static site generators tools](tools/static.md) 69 | * [App (desktop, mobile, tablet etc..) tools](tools/apps.md) 70 | * [Scaffolding tools](tools/scaffolding.md) 71 | * [Templating tools](tools/templates.md) 72 | * [UI widgets & components tools](tools/ui.md) 73 | * [Data visualization (e.g. charts) tools](tools/charting.md) 74 | * [Graphics (e.g. SVG, canvas, webgl) tools](tools/graphics.md) 75 | * [Animation tools](tools/animation.md) 76 | * [JSON tools](tools/json.md) 77 | * [Testing framework tools](tools/testing.md) 78 | * [Data storage tools](tools/db.md) 79 | * [Module/package loading tools](tools/loaders.md) 80 | * [Module/package repo. tools](tools/repo.md) 81 | * [Web/cloud/static hosting tools](tools/hosting.md) 82 | * [Project management & code hosting](tools/project-hosting.md) 83 | * [Collaboration & communication tools](tools/comm.md) 84 | * [CMS hosted/API tools](tools/cms.md) 85 | * [BAAS (for front-end devs) tools](tools/baas.md) 86 | * [Offline tools](tools/offline.md) 87 | * [Security tools](tools/security.md) 88 | * [Tasking (aka build) tools](tools/task.md) 89 | * [Deployment tools](tools/deploy.md) 90 | * [Site/app monitoring tools](tools/uptime.md) 91 | * [JS error monitoring tools](tools/error.md) 92 | * [Performance tools](tools/perf.md) 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /learning/courses.md: -------------------------------------------------------------------------------- 1 | # Directed learning 2 | 3 | The table below contains instructor led, paid, front-end courses, programs, schools, and bootcamps. 4 | 5 | If you can't afford a directed education, a self directed education using screencasts, books, and articles is a viable alternative to learn front-end development for the self-driven individual. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 |
companycoursepriceon siteremote
Iron YardFront End Engineering12,000multiple locations
UdacityFront-End Web Developer Nanodegree200 monthlymultiple locationsyes
The New York Code + Design AcademyFront End 1012,000New York, NY
Portland Code SchoolAdvanced Front-end Developer Tools2,000Portland, OR
BLOCBecome a Frontend Developer4,999yes
ThinkfulFrontend Web Development300 per monthyes
General AssemblyFrontend Web Development3,500multiple locations
Hackbright AcademyFront-End Web Development3,000San Francisco, CA
HackerYouFront-end Web Development Immersive7,000 - 7,910Toronto, Canada
The Flatiron SchoolIntroduction to Front-End Web Development3,500New York, NY
Austin Coding AcademyThe Front End Track1,490 per classAustin, TX
CodeupNight Front-End Bootcamp8,500San Antonio, Texas
BetamoreFront-end Web Development8,500Baltimore, MD
Codify AcademyFront-end Web Development4,000multiple locations
DecodeMTLLearn Front-end Web Development2,500Montreal, QC
gr8codeFront-End Bootcamp10,000Tampa, FL
LearningFuzePart-Time Front-End Development Course2,500Irvine, CA
139 | -------------------------------------------------------------------------------- /learning/html-css.md: -------------------------------------------------------------------------------- 1 | # Learn HTML & CSS 2 | 3 | > **HTML** - HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. - wikipedia.org 4 | 5 | > **CSS** - Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. - wikipedia.org 6 | 7 | Liken to constructing a house, one might consider HTML the framing and CSS to be the painting & decorating. 8 | 9 | ##### General learning: 10 | 11 | * [codecademy.com HTML & CSS](https://www.codecademy.com/tracks/web) [interact] 12 | * [Intro to HTML/CSS: Making webpages](https://www.khanacademy.org/computing/computer-programming/html-css) [watch] 13 | * [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) [read] 14 | * [Learn CSS Layout](http://learnlayout.com/) [read] 15 | * [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$] 16 | * [HTML and CSS: Design and Build Websites](http://www.amazon.com/gp/product/1118008189/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118008189&linkCode=as2&tag=fronenddevejo-20&linkId=V4CUOSZZARJURWZD) [read][$] 17 | * [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$] 18 | * [HTML Mastery: Semantics, Standards, and Styling](http://www.amazon.com/gp/product/1590597656/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590597656&linkCode=as2&tag=fronenddevejo-20&linkId=VFZVICLZO6GUZQI2) [read][$] 19 | * [CSS Positioning](http://www.pluralsight.com/courses/css-positioning-1834) [watch][$] 20 | * [HTML Document Flow](http://www.pluralsight.com/courses/html-document-flow-1837) [watch][$] 21 | * [Introduction to HTML5 and CSS3](https://frontendmasters.com/courses/introduction-html5-css3/) [watch][$] 22 | * [Absolute Centering in CSS](http://codepen.io/shshaw/full/gEiDt) [read] 23 | * [Understanding the CSS Box Model](https://webdesign.tutsplus.com/courses/understanding-the-css-box-model) [watch] 24 | * [Solid HTML Form Structure](https://webdesign.tutsplus.com/courses/solid-html-form-structure) [watch] 25 | * [Semantic HTML: How to Structure Web Pages](https://webdesign.tutsplus.com/courses/semantic-html-how-to-structure-web-pages) [watch] 26 | 27 | ##### Mastering: 28 | 29 | * [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/) [read] 30 | * [CSS Diner](http://flukeout.github.io/) [interact] 31 | * [CSS3 In-Depth](https://frontendmasters.com/courses/css3-in-depth/) [watch][$] 32 | * [atozcss.com/](http://www.atozcss.com/) [watch] 33 | * [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) [read] 34 | 35 | ##### References/docs: 36 | 37 | * [htmlelement.info](http://htmlelement.info/) 38 | * [MDN CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) 39 | * [MDN HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 40 | * [cssvalues.com/](http://cssvalues.com/) 41 | * [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/) 42 | * [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) 43 | 44 | ##### Glossary: 45 | 46 | * [HTML Glossary Programming reference for HTML elements](https://www.codecademy.com/articles/glossary-html) 47 | * [CSS Glossary - Programming reference for CSS covering Comments, Properties, and Selectors](https://www.codecademy.com/articles/glossary-css) 48 | 49 | ##### Standards/specifications: 50 | 51 | * [HTML5 from W3C](http://www.w3.org/TR/html5/) : 5th major revision of the core language of the World Wide Web 52 | * [The elements of HTML from the Living Standard](https://html.spec.whatwg.org/multipage/semantics.html#semantics) 53 | * [The HTML Syntax](https://html.spec.whatwg.org/multipage/syntax.html#syntax) from the Living Standard 54 | * [All W3C HTML Spec](http://www.w3.org/standards/techs/html#w3c_all) 55 | * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) 56 | * [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://drafts.csswg.org/css2/) 57 | * [Selectors Level 3](http://www.w3.org/TR/css3-selectors/) 58 | * [All W3C CSS Specifications](http://www.w3.org/Style/CSS/current-work#roadmap) 59 | 60 | ##### Architecting CSS: 61 | 62 | * [oocss](http://oocss.org/) [read] 63 | * [SMACSS](https://smacss.com/) [read][$] 64 | * [SMACSS](https://frontendmasters.com/courses/smacss/) [watch][$] 65 | * [Atomic Design](http://atomicdesign.bradfrost.com/) [read] 66 | 67 | ##### Authoring conventions: 68 | 69 | * [idiomatic-css](https://github.com/necolas/idiomatic-css) [read] 70 | * [Standards for developing flexible, durable, and sustainable HTML and CSS](http://mdo.github.io/code-guide/) [read] 71 | * [cssguidelin.es](http://cssguidelin.es/) [read] 72 | * [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#General_Formatting) 73 | 74 | ##### HTML/CSS newsletters: 75 | 76 | * [HTML 5 Weekly](http://html5weekly.com/) 77 | * [CSS Weekly](http://css-weekly.com/archives/) 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /learning/browsers.md: -------------------------------------------------------------------------------- 1 | # Learn web browsers 2 | 3 | > A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. Although browsers are primarily intended to use the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. - Wikipedia 4 | 5 | 6 | ##### The [most commonly used browsers](http://www.sitepoint.com/browser-trends-april-2015-statcounter-vs-netmarketshare/) (on any device) are: 7 | 8 | 1. [Chrome](http://www.google.com/chrome/) (engine: [Blink](https://en.wikipedia.org/wiki/Blink_%28layout_engine%29) + [V8](https://en.wikipedia.org/wiki/V8_%28JavaScript_engine%29)) 9 | 2. [Firefox](https://www.mozilla.org/en-US/firefox/new/) (engine: [Gecko](https://en.wikipedia.org/wiki/Gecko_%28software%29) + [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29)) 10 | 3. [Internet Explorer](Internet Explorer) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) 11 | 4. [Safari](https://www.apple.com/safari/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + [SquirrelFish](https://trac.webkit.org/wiki/SquirrelFish)) 12 | 13 | ![](../images/statcounter.png "http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201408-201508-bar") 14 | 15 | image source: http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201408-201508-bar 16 | 17 | ##### Evolution of browsers & web technologies (i.e. API's) 18 | 19 | * [www.evolutionoftheweb.com](http://www.evolutionoftheweb.com/) [read] 20 | * [Timeline of web browsers](https://en.wikipedia.org/wiki/Timeline_of_web_browsers) [read] 21 | 22 | ##### The most commonly used headless browser are: 23 | 24 | * [PhantomJS](http://phantomjs.org/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + SquirrelFish) 25 | * [slimerjs](http://slimerjs.org/) (engine: [Gecko](https://en.wikipedia.org/wiki/Gecko_%28software%29) + [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29)) 26 | * [TrifleJS](http://triflejs.org/) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) 27 | 28 | ##### How browsers work 29 | 30 | * [20 Things I Learned About Browsers and the Web](http://www.20thingsilearned.com/en-US/foreword/1) [read] 31 | * [How Browsers Work: Behind the scenes of modern web browsers](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) [read] 32 | * [Fast CSS: How Browsers Lay Out Web Pages](http://dbaron.org/talks/2012-03-11-sxsw/master.xhtml) [read] 33 | 34 | ![](../images/browsers-work.png "http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/") 35 | 36 | image source: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 37 | 38 | ##### Optimizing for browsers: 39 | 40 | * [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) [watch] 41 | * [Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860) [watch] 42 | 43 | ##### Browser security 44 | 45 | * [Browser Security Handbook](https://code.google.com/p/browsersec/wiki/Main) [read] 46 | * [HTML5 Security Cheatsheet](https://html5sec.org/#javascript) [read] 47 | * [Frontend Security](https://mikewest.org/2013/09/frontend-security-frontendconf-2013) [watch] 48 | * [Security for Web Developers: Using JavaScript, HTML, and CSS](http://www.amazon.com/Security-Web-Developers-Using-JavaScript/dp/1491928646/) [read][$] 49 | * [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/) [read]($) 50 | 51 | ##### Comparing browsers 52 | 53 | * [Comparison of web browsers](https://en.wikipedia.org/wiki/Comparison_of_web_browsers) [read] 54 | 55 | ##### Developing for browsers 56 | 57 | In the past, a front-end developer spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today, unless you have to write code for older browsers (i.e. JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded. - wikipedia.org 4 | 5 | ##### General learning: 6 | 7 | * [codecademy.com JavaScript](https://www.codecademy.com/en/tracks/javascript) [interact] 8 | * [Professional JavaScript for Web Developers](http://www.amazon.com/gp/product/1118026691/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1118026691&linkCode=as2&tag=fronenddevejo-20&linkId=3ECZAIHNX6Z4FTME) [read][$] 9 | * [JavaScript Enlightenment](http://www.javascriptenlightenment.com/) [read] 10 | * [The Principles of Object-Oriented JavaScript](http://www.amazon.com/gp/product/1593275404/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1593275404&linkCode=as2&tag=fronenddevejo-20&linkId=NQTZVDOIMJRGMAQM) [read][$] 11 | * [Speaking JavaScript](http://speakingjs.com/es5/index.html) [read] 12 | * [You Don't Know JS: Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going) [read] 13 | * [Understanding ECMAScript 6](https://github.com/nzakas/understandinges6) [read] 14 | * [JavaScript Patterns](http://www.amazon.com/gp/product/0596806752/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0596806752&linkCode=as2&tag=fronenddevejo-20&linkId=K56OPQZNQNMPF6QI) [read][$] 15 | * [JS.Next: ES6](https://frontendmasters.com/courses/jsnext-es6/) [watch][$] 16 | * [Crockford on JavaScript - Volume 1: The Early Years](https://www.youtube.com/watch?v=JxAXlJEmNMg) [watch] 17 | * [Crockford on JavaScript - Chapter 2: And Then There Was JavaScript](https://www.youtube.com/watch?v=RO1Wnu-xKoY) [watch] 18 | * [Crockford on JavaScript - Act III: Function the Ultimate](https://www.youtube.com/watch?v=ya4UHuXNygM) [watch] 19 | * [Crockford on JavaScript - Episode IV: The Metamorphosis of Ajax](https://www.youtube.com/watch?v=Fv9qT9joc0M) [watch] 20 | * [Crockford on JavaScript - Part 5: The End of All Things](https://www.youtube.com/watch?v=47Ceot8yqeI) [watch] 21 | * [Crockford on JavaScript - Scene 6: Loopage](https://www.youtube.com/watch?v=QgwSUtYSUqA) [watch] 22 | * [JavaScript Modules](http://jsmodules.io/cjs.html) [read] 23 | 24 | ##### Mastering: 25 | 26 | * [Functional JavaScript: Introducing Functional Programming with Underscore.js](http://www.amazon.com/gp/product/1449360726/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1449360726&linkCode=as2&tag=fronenddevejo-20&linkId=BDQC3FTEB3YXTYCK) [read][$] 27 | * [ECMA-262 by Dmitry Soshnikov](http://dmitrysoshnikov.com/) [read] 28 | * [Advanced JavaScript](https://frontendmasters.com/courses/advanced-javascript/) [watch][$] 29 | * [JavaScript the Good Parts](https://frontendmasters.com/courses/javascript-the-good-parts/) [watch][$] 30 | * [You Don't Know JS: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures) [read] 31 | * [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) [read] 32 | * [You Don't Know JS: Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar) [read] 33 | * [You Don't Know JS: Async & Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance) [read] 34 | * [You Don't Know JS: ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) [read] 35 | * [Eloquent JavaScript](http://eloquentjavascript.net/) [read] 36 | * [Test-Driven JavaScript Development](http://www.amazon.com/dp/0321683919/) [read][$] 37 | * [JavaScript Allongé](https://leanpub.com/javascriptallongesix) [read][$] 38 | * [JavaScript with Promises](http://www.amazon.com/JavaScript-Promises-Daniel-Parker/dp/1449373216/ref=pd_sim_sbs_14_5) [read][$] 39 | * [High Performance JavaScript (Build Faster Web Application Interfaces)](http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X/ref=sr_1_1) [read][$] 40 | * [JavaScript Regular Expression Enlightenment](JavaScript Regular Expression Enlightenment) [read] 41 | * [Using Regular Expressions](http://www.lynda.com/Regular-Expressions-tutorials/Using-Regular-Expressions/85870-2.html) [watch][$] 42 | 43 | ##### References/docs: 44 | 45 | * [MDN JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) 46 | 47 | ##### Glossary/encyclopedia: 48 | 49 | * [JavaScript Glossary](https://www.codecademy.com/articles/glossary-javascript) 50 | * [The JavaScript Encyclopedia](http://www.crockford.com/javascript/encyclopedia/) 51 | 52 | ##### Standards/specifications: 53 | 54 | * [ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/) 55 | * [Status, process, and documents for ECMA262](https://github.com/tc39/ecma262) 56 | 57 | ##### Style: 58 | 59 | * [Node.js Style Guide](https://github.com/felixge/node-style-guide) 60 | * [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js) 61 | * [Airbnb JavaScript Style Guide](http://airbnb.io/javascript/) 62 | 63 | ##### JavaScript newsletters, news, & podcasts: 64 | 65 | * [Javascript Jabber](https://devchat.tv/js-jabber/) 66 | * [JavaScript Weekly](http://javascriptweekly.com/) 67 | * [Echo JS](http://www.echojs.com/) 68 | * [JavaScript Kicks](http://javascriptkicks.com/) 69 | * [javascript.com](https://www.javascript.com/news) 70 | * [FiveJS](https://fivejs.codeschool.com/) 71 | * [JavaScript Live](https://jslive.com/) 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /practice/making-fd.md: -------------------------------------------------------------------------------- 1 | # How front-end developers are made 2 | 3 | ![](../images/making-fd.png "http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg") 4 | 5 | image source: http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg 6 | 7 | How exactly does one become a front-end developer? Well, it's complicated. Still today you can't go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and JavaScript professionally. In fact, most of the people working on the front-end, even today, generally seem to be self taught and not traditionally trained as a programmer. Why is this the case? 8 | 9 | A front-end developer is not a focused visual designer or an interaction designer. Design school is not exactly the place to hone front-end skills. A front-end developer is not exactly a traditionally trained computer science graduate either. Focusing on either doesn't prepare a person for front-end development. And, in fact, following the traditional paths for either in the higher education systems of America (i.e. College) can derail a person from potentially finding a doorway into a practice where actual experience is king. Today, if you want to be a front-end developer, you teach yourself or you take what is likely a non accredited program, course, bootcamp, or class. 10 | 11 | A front-end engineer crafts the skeleton that the user interface rests upon. They must, at times, care as much about the interaction design as they do about the underlying code that creates the UI interactions. Therefore, many in practice today do not come to front-end engineering with programming skills, but, instead, from the other direction. That is, front-end development seems to be filled with more designer types turned developer than programmer types turned front-end developer. Of course, as JavaScript has grown up, so has the desire by more traditionally trained programmers to bring their knowledge to the front-end practice. If you are not aware, front-end developers have not always been considered by "real" programmers as, well, programmers. But times are a changing. 12 | 13 | With all of that said, I believe that the path to a career as a front-end developer is very much an unknown process. What I can say is that to become a front-end engineer one must know and use HTML, CSS, DOM, and JavaScript at a high level without ignoring interaction design or traditional programming know how. In fact, from my experience, the best front-end developers often have a mastery understanding of interaction design and programming, but from the context of the web platform (i.e. browsers, HTML, CSS, DOM, and JavaScript). And for whatever reason, this knowledge is often found not given. That is to say, front-end engineering still seems very much to be a practice made up of self taught people, as opposed to a field that corresponds directly to an educational focus from an organized and accredited higher learning situation. 14 | 15 | If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below. The process assumes you are your own best teacher. 16 | 17 | 1. Learn, roughly, how the web works. Make sure you know the "what" and "where" of Domains, DNS, URL's, HTTP, networks, browsers, servers/hosting, databases, JSON, data API's, HTML, CSS, DOM, and JavaScript. The goal is to make sure you loosely know how it all works together and exactly what each part is doing. Focus on the high level outlines for front-end architectures. Start with simple web pages and briefly study [native web applications (aka SPA's)](https://blog.andyet.com/2015/01/22/native-web-apps). 18 | 2. Learn HTML, CSS, Accessibility, and SEO. 19 | 3. Learn the fundamentals of UI design patterns, interaction design, user experience design, and usability. 20 | 4. Learn the fundamentals of programming 21 | 5. Learn JavaScript 22 | 6. Learn JSON and data API's 23 | 7. Learn CLI/command line 24 | 8. Learn the practice of software engineering (i.e. Application design/architecture, templates, Git, testing, monitoring, automating, code quality, development methodologies). 25 | 9. Get opinionated and customize your tool box with whatever makes sense to your brain. 26 | 10. Learn Node.js 27 | 28 | Where you actually stop in the process is what will separate a front-end HTML/CSS developer from an expert level front-end application/JavaScript developer. 29 | 30 | A short word of advice on learning. Learn the actual underlying technologies, before learning abstractions. Don't learn jQuery, learn the DOM. Don't learn SASS, learn CSS. Don't learn HAML, learn HTML. Don't learn coffeeScript, learn JavaScript. Don't learn Handlebars, learn JavaScript ES6 templates. Don't just use Bootstrap, learn UI patterns. When getting your start, you should fear most things that conceal complexity. Abstracts in the wrong hands can give the appearance of advanced skills, while all the time hiding the fact that a developer has an inferior understanding of the basics or underlying concepts. 31 | 32 | The rest of this book contains point a reader to the resources and tools to follow the suggested process. It is assumed that you are not only learning, but also doing as you learn and investigate tools. Some suggest only doing. While others suggest only learning about doing. I suggest you find a mix of both that matches how your brain works and do that. But, for sure, it is a mix! So, don't just read about it, do it. Learn, do. Learn, do. Repeat indefinitely because things change fast. This is why learning the fundamentals, and not abstractions, are so important. 33 | 34 | I should mention that lately a lot of non-accredited front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are teacher directed in classroom (virtual and physical) courses, which follow a more traditional style of learning from an official instructor (i.e. syllabus, test, quizzes, projects, team projects, grades etc..). I have more to say about these institutions in the direct learning section of this handbook. In brief, this is the web, everything you need to learn is on the web for the taking (costing little to nothing). However, if you need someone to tell you how to take what is actually free, and hold you accountable for learning it, you might consider an organized course. Otherwise, I am not aware of any other profession that is practically free for the taking with an internet connection and a burning desire for knowledge. 35 | 36 | If you want to get started immediately I'd suggest the following general overviews of the practice of front-end development: 37 | 38 | * [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) [read] 39 | * [Being a web developer](http://www.yellowshoe.com.au/standards) [read] 40 | * [Isobar Front-end Code Standards](http://isobar-idev.github.io/code-standards/) [read] 41 | * [Web Fundamentals](https://developers.google.com/web/fundamentals) [read] 42 | * [Front-end Curriculum](https://gist.github.com/stevekinney/03027e71aac341af14a2) [read] 43 | * [freeCodeCamp](http://freecodecamp.com/) [interact] 44 | * [Planning a Front-end JS Application](https://www.youtube.com/watch?v=q4zEGkjTBFA) [watch] 45 | * [So, You Want to be a Front-End Engineer](https://www.youtube.com/watch?v=Lsg84NtJbmI) [watch] 46 | * [Front End Web Development Career Kickstart](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [watch][$] 47 | * [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$] 48 | * [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$] 49 | * [Introduction to Web Development](https://frontendmasters.com/courses/web-development/) [watch][$] 50 | * [Foundations of Front-End Web Development](https://www.udemy.com/foundations-of-front-end-development/) [watch][$] 51 | * [Lean Front-End Engineering](https://frontendmasters.com/courses/lean-front-end-engineering/) [watch][$] 52 | * [A Baseline for Front-End [JS] Developers: 2015](http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/) [read] 53 | * [Learn Front End Web Development](https://teamtreehouse.com/tracks/front-end-web-development) [watch][$] 54 | * [Front-End Dev Mastery](https://mijingo.com/products/bundles/front-end-dev-mastery/) [watch][$] 55 | * [Front-End Web Developer Nanodegree](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001) [watch][$] 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /practice/tech-employed-by-fd.md: -------------------------------------------------------------------------------- 1 | # Web technologies employed by front-end developers 2 | 3 | ![](../images/web-tech-employed.jpg "http://www.2n2media.com/compare-front-end-development-and-back-end-development") 4 | 5 | image source: http://www.2n2media.com/compare-front-end-development-and-back-end-development 6 | 7 | The following web technologies are employed by front-end developers: 8 | 9 | * Hyper Text Markup Language (aka HTML) 10 | * Cascading Style Sheets (aka CSS) 11 | * Document Object Model (aka DOM) 12 | * JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015) 13 | * Web API's (aka HTML5 and friends or Browser API's) 14 | * Hypertext Transfer Protocol (aka HTTP) 15 | * Uniform Resource Locator's (aka URL) 16 | * JavaScript Object Notation (aka JSON) 17 | * Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA) 18 | 19 | These technologies are defined below with the relevant documentation and specifications. For a comprehensive list of all web related specifications have a look at [platform.html5.org](https://platform.html5.org/). 20 | 21 | ##### Hyper Text Markup Language (aka HTML) 22 | 23 | > HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. - wikipedia.org 24 | 25 | Most relevant specifications / documentation: 26 | 27 | * [HTML5 from W3C](http://www.w3.org/TR/html5/) : 5th major revision of the core language of the World Wide Web 28 | * [The elements of HTML from the Living Standard](https://html.spec.whatwg.org/multipage/semantics.html#semantics) 29 | * [The HTML Syntax](https://html.spec.whatwg.org/multipage/syntax.html#syntax) from the Living Standard 30 | * [All W3C HTML Spec](http://www.w3.org/standards/techs/html#w3c_all) 31 | * [HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 32 | * [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) 33 | * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) 34 | 35 | ##### Cascading Style Sheets (aka CSS) 36 | 37 | > Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. - wikipedia.org 38 | 39 | Most relevant specifications / documentation: 40 | 41 | * [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://drafts.csswg.org/css2/) 42 | * [Selectors Level 3](http://www.w3.org/TR/css3-selectors/) 43 | * [All W3C CSS Specifications](http://www.w3.org/Style/CSS/current-work#roadmap) 44 | * [CSS reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) 45 | 46 | ##### Document Object Model (aka DOM) 47 | 48 | > The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). - wikipedia.org 49 | 50 | Most relevant specifications / documentation: 51 | 52 | * [W3C DOM4](http://www.w3.org/TR/2014/WD-dom-20140204/) 53 | * [DOM Living Standard](https://dom.spec.whatwg.org/) 54 | * [Document Object Model (DOM) Level 3 Events Specification](http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/) 55 | 56 | ##### JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015) 57 | 58 | > JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded. - wikipedia.org 59 | 60 | Most relevant specifications / documentation: 61 | 62 | * [ECMAScript® 2015 Language Specification](http://www.ecma-international.org/ecma-262/6.0/) 63 | 64 | ##### Web API's (aka HTML5 and friends) 65 | 66 | > When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site. - Mozilla 67 | 68 | Most relevant documentation: 69 | 70 | * [Web API Interfaces](https://developer.mozilla.org/en-US/docs/Web/API) 71 | 72 | ##### Hypertext Transfer Protocol (aka HTTP) 73 | 74 | > The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. - wikipedia.org 75 | 76 | Most relevant specifications: 77 | 78 | * [Hypertext Transfer Protocol -- HTTP/1.1](https://tools.ietf.org/html/rfc2616) 79 | * [Hypertext Transfer Protocol version 2 draft-ietf-httpbis-http2-16](https://tools.ietf.org/html/draft-ietf-httpbis-http2-16) 80 | 81 | ##### Uniform Resource Locator's (aka URL) 82 | 83 | > A uniform resource locator (URL) (also called a web address) is a reference to a resource that specifies the location of the resource on a computer network and a mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI),[3] although many people use the two terms interchangeably. A URL implies the means to access an indicated resource, which is not true of every URI.[4][5] URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications. - wikipedia.org 84 | 85 | Most relevant specifications: 86 | 87 | * [Uniform Resource Locators (URL)](http://www.w3.org/Addressing/URL/url-spec.txt) 88 | * [URL Living Standard](https://url.spec.whatwg.org/) 89 | 90 | ##### JavaScript Object Notation (aka JSON) 91 | 92 | > JSON, sometimes JavaScript Object Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX). Although originally derived from the JavaScript scripting language, JSON is a language-independent data format. Code for parsing and generating JSON data is readily available in many programming languages. The JSON format was originally specified by Douglas Crockford. It is currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA standard is minimal, describing only the allowed grammar syntax, whereas the RFC also provides some semantic and security considerations. The official Internet media type for JSON is application/json. The JSON filename extension is .json. - wikipedia.org 93 | 94 | Most relevant specifications: 95 | 96 | * [Introducing JSON](http://json.org/) 97 | * [The JSON Data Interchange Format](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf) 98 | * [JSON API](http://jsonapi.org/) 99 | 100 | ##### Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet Applications (aka ARIA) 101 | 102 | > Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and "indirect access" meaning compatibility with a person's assistive technology (for example, computer screen readers). - wikipedia.org 103 | 104 | * [Web Accessibility Initiative (WAI)](http://www.w3.org/WAI/) 105 | * [Web Content Accessibility Guidelines (WCAG) Current Status](http://www.w3.org/standards/techs/wcag#w3c_all) 106 | * [Accessible Rich Internet Applications (WAI-ARIA) Current Status](http://www.w3.org/standards/techs/aria#w3c_all) 107 | 108 | 109 | --------------------------------------------------------------------------------