├── .gitignore ├── 2018.md ├── README.md ├── SUMMARY.md ├── _layouts ├── ebook │ ├── page.html │ ├── pdf_footer.html │ ├── pdf_header.html │ └── summary.html └── website │ └── page.html ├── appspec.yml ├── book.json ├── buildspec.yml ├── cover.jpg ├── cover_small.jpg ├── frontendmasters.jpg ├── frontendmasters.md ├── gtm-analytics.js ├── images ├── FEM-2018-banner.png ├── browsers-work.png ├── dns.jpg ├── fd-devs-for.jpeg ├── frameworks1.png ├── frameworks2.png ├── front-end-salary.png ├── front-end-skills.png ├── full-stack.jpg ├── fullstack1.png ├── fullstack2.png ├── growth-iot.jpg ├── host.jpg ├── how-does-seo-work.png ├── how-the-internet-works.jpg ├── making-fd.png ├── makingFED.png ├── open-graph-image.jpg ├── q11.jpg ├── q13.jpg ├── q15.jpg ├── q18.jpg ├── reacteco.png ├── salary.png ├── salary3.png ├── spectrum.png ├── stacks-change.jpg ├── statcounter.png ├── task1.png ├── tasks2.png ├── test1.png ├── test2.png ├── things.jpg ├── vscode.png ├── web-api.png ├── web-tech-employed.jpg ├── what-is-front-end-dev.png ├── what-is-web-hosting-infographic.jpg └── who-runs-the-internet-infographic.jpg ├── learning.md ├── learning ├── accessibility.md ├── animation.md ├── browser-dev-tools.md ├── browsers.md ├── build.md ├── cli.md ├── courses.md ├── cs.md ├── data-api.md ├── direct-learning.md ├── dns.md ├── dom.md ├── fonts.md ├── front-end-apps.md ├── front-end.md ├── headless-browsers.md ├── hosting.md ├── html-css.md ├── http-networks.md ├── internet.md ├── javascript.md ├── js-api.md ├── json.md ├── learn-from.md ├── module-bundlers-loaders.md ├── module.md ├── multi-device-dev.md ├── news-podcasts.md ├── node.md ├── offline.md ├── package-manager.md ├── perf.md ├── pwa.md ├── react.md ├── security.md ├── self-direct-learning.md ├── seo.md ├── state.md ├── static.md ├── templates.md ├── test.md ├── ui-design-patterns.md ├── version-control.md └── web-api.md ├── myIntro.md ├── package-lock.json ├── package.json ├── practice.md ├── practice ├── fd-dev-for.md ├── interview-q.md ├── jobboards.md ├── making-fd.md ├── myth.md ├── salaries.md ├── skills.md ├── team.md ├── tech-employed-by-fd.md └── types-of-front-end-dev.md ├── recap.md ├── scripts └── pathway.js ├── styles ├── ebook.css └── website.css ├── template.md ├── tools.md ├── tools ├── accessibility.md ├── animation.md ├── apps.md ├── baas.md ├── browsedocs.md ├── browser.md ├── charting.md ├── cms.md ├── code-editor.md ├── comm.md ├── css.md ├── db.md ├── deploy.md ├── dev-tools.md ├── diagram.md ├── dom.md ├── error.md ├── find-tools.md ├── fonts.md ├── graphics.md ├── hosting.md ├── html.md ├── http.md ├── js.md ├── json.md ├── loaders.md ├── offline.md ├── perf.md ├── placeholder.md ├── project-hosting.md ├── proto.md ├── pwa.md ├── repo.md ├── security.md ├── seo.md ├── state.md ├── static.md ├── svg.md ├── task.md ├── templates.md ├── testing.md ├── ui.md └── uptime.md └── what-is-a-FD.md /.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 17 | 18 | # Remove Mac files 19 | *.DS_Store 20 | -------------------------------------------------------------------------------- /2018.md: -------------------------------------------------------------------------------- 1 | # In 2018 expect... 2 | 3 | * Nothing will change or slow the usage or popularity of React for many years to come. 4 | * GraphQL will [replace](https://medium.freecodecamp.org/rest-apis-are-rest-in-peace-apis-long-live-graphql-d412e559d8e4) a lot of REST API's this year. 5 | * The web will continue to become more native-like with offline capabilities and seamless mobile experiences. 6 | * HTML 5.3 is [coming](https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming/). 7 | * Keep an eye on [turbo](https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403), a blazing fast NPM client. 8 | * Expect to learn and use [CSS transforms 3d](https://caniuse.com/#feat=transforms3d), [CSS transitions](https://caniuse.com/#search=transitions), [CSS flexbox](https://caniuse.com/#search=flex), [CSS filters](https://caniuse.com/#feat=css-filters), [CSS grid](https://caniuse.com/#search=grid) 9 | * [JavaScript usage will continue to grow](https://insights.stackoverflow.com/survey/2017#technology-programming-languages) with no [slowdown in sight](https://insights.stackoverflow.com/survey/2017#technology-most-popular-languages-by-occupation). 10 | * Still waiting on [Web Assembly](http://webassembly.org/) to peak. This will likely require [tooling](https://webassembly.studio). 11 | * Universal/isomorphic JavaScript solutions continue to evolve e.g. [next.js](https://github.com/zeit/next.js) and [Sapper](https://sapper.svelte.technology/). 12 | * Web components still lurk and wait for significant traction from developers. 13 | * I believe the end is in sight for [CSS pre-processors](https://css-tricks.com/future-front-end-web-development/#article-header-id-7) as [PostCSS](https://github.com/postcss), [CSSnext](http://cssnext.io/), and CSS in JS take over. 14 | * Older server centric [application patterns](https://unpoly.com) show [up again](https://github.com/turbolinks/turbolinks) but [with](https://goiabada.blog/can-you-build-a-single-page-application-without-a-front-end-framework-6799cee03750) a [new](http://triskweline.de/unpoly-rugb/#/41) [spin](https://github.com/stimulusjs/stimulus). The pendulum could [start](http://blog.bloomca.me/2018/02/04/spa-is-not-silver-bullet.html) to swinging [away from strict SPA applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130). People will begin to [pull back on the complexity of single page applications](https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130) and return to things like [pjax](https://github.com/defunkt/jquery-pjax) \(A mix of SPA and Server-side Rendering. See [https://stimulusjs.org](https://stimulusjs.org/handbook/introduction)\). 15 | * [Progressive Web Applications](https://developers.google.com/web/progressive-web-apps/) hopefully will catch fire. If they don't, I fear they never will. At least not in their current form. 16 | * ["Chatbots created on the basis of artificial intelligence and neural networks will continue to evolve helping to increase communication online. I wonder what it will lead to, but this is unconditional web development trends 2018"](http://merehead.com/blog/web-development-trends-2018/). Nods. 17 | * Vue.js [usage will likely overtake all Angular usage](http://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue). 18 | * AR/AV, [AI](https://www.independent.co.uk/life-style/gadgets-and-tech/news/facebook-artificial-intelligence-ai-chatbot-new-language-research-openai-google-a7869706.html), and chat bots will continue to evolve and find their sweet spot. 19 | * JavaScript [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) and [Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) will likely go unnoticed by most front-end developers. 20 | * More developers will divorce themselves from plain JavaScript and try [to](http://elm-lang.org/) [marry](https://www.typescriptlang.org/index.html) [another](https://reasonml.github.io/). But, just like in marital divorce one always takes most of the same problems with them to the greener grass and little actually changes. Preferences and values just get re-prioritized and [history will repeat itself](http://coffeescript.org/). 21 | * Webpack 4 will happen, and be better, due to competition! 22 | * Continued [exploration](https://css-in-js-playground.com/?theme=light) for the ideal CSS solution for a tree of UI components will not cease. 23 | * State management gets a [reset](https://www.youtube.com/watch?v=kp-NOggyz54) and [people start to simplify](https://github.com/thejameskyle/unstated). Hopefully, this will be the year for solutions like [mobx](https://github.com/mobxjs/mobx) to shine. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AVAILABLE NOW: [Front-End Developer Handbook 2019](https://frontendmasters.com/guides/front-end-handbook/2019/) 2 | 3 | *** 4 | 5 | ## Front-End Developer Handbook 2018 6 | 7 | ### Written by [Cody Lindley](http://codylindley.com/) 8 | 9 | *Sponsored by [Frontend Masters](https://frontendmasters.com/), advancing your skills with in-depth, modern front-end engineering courses* 10 | 11 | [![Front End Developer Handbook 2018 Cover](https://frontendmasters.com/guides/front-end-handbook/2018/cover.jpg)](https://frontendmasters.com/guides/front-end-handbook/2018/) 12 | 13 | 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 in 2018. 14 | 15 | 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, CTOs, instructors, and headhunters to gain insights into the practice of front-end development. 16 | 17 | 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 of a problem. 18 | 19 | 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. 20 | 21 | The intention is to release an update to the content yearly. 22 | 23 | The handbook is divided into the following three parts: 24 | 25 | Part I: The Front-End Practice 26 | --- 27 | Part one broadly describes the practice of front-end engineering. 28 | 29 | Part II: Learning Front-End Development 30 | --- 31 | Part two identifies self-directed and direct resources for learning to become a front-end developer. 32 | 33 | Part III: Front-End Development Tools 34 | --- 35 | Part three briefly explains and identifies tools of the trade. 36 | 37 | *** 38 | 39 | **Read Online**: 40 | 41 | * [https://frontendmasters.com/guides/front-end-handbook/2018/](https://frontendmasters.com/guides/front-end-handbook/2018/) 42 | * Translations: [Chinese](https://github.com/xitu/front-end-handbook-2018) 43 | 44 | *** 45 | 46 | Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /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/Full-Stack 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 FDs 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, Icons, & Images](learning/fonts.md) 31 | * [Learn Accessibility](learning/accessibility.md) 32 | * [Learn Web/Browser APIs](learning/web-api.md) 33 | * [Learn JSON](learning/json.md) 34 | * [Learn JS Templates](learning/templates.md) 35 | * [Learn Static Site Generators](learning/static.md) 36 | * [Learn Computer Science via JS](learning/cs.md) 37 | * [Learn Front-End App Architecture](learning/front-end-apps.md) 38 | * [Learn Data API (i.e. JSON/REST) Design](learning/data-api.md) 39 | * [Learn React](learning/react.md) 40 | * [Learn State Management](learning/state.md) 41 | * [Learn Progressive Web App](learning/pwa.md) 42 | * [Learn JS API Design](learning/js-api.md) 43 | * [Learn Web Dev Tools](learning/browser-dev-tools.md) 44 | * [Learn Command Line](learning/cli.md) 45 | * [Learn Node.js](learning/node.md) 46 | * [Learn JS Modules](learning/module.md) 47 | * [Learn JS Module loaders/bundlers](learning/module-bundlers-loaders.md) 48 | * [Learn Package Managers](learning/package-manager.md) 49 | * [Learn Version Control](learning/version-control.md) 50 | * [Learn Build & Task Automation](learning/build.md) 51 | * [Learn Site Performance Optimization](learning/perf.md) 52 | * [Learn Testing](learning/test.md) 53 | * [Learn Headless Browsers](learning/headless-browsers.md) 54 | * [Learn Offline Dev](learning/offline.md) 55 | * [Learn Web/Browser/App Security](learning/security.md) 56 | * [Learn Multi-Device Dev (e.g., RWD)](learning/multi-device-dev.md) 57 | * [Directed Learning](learning/direct-learning.md) 58 | * [Front-End Schools, Courses, & Bootcamps](learning/courses.md) 59 | * [Front-End Devs to Learn From](learning/learn-from.md) 60 | * [Newsletters, News, & Podcasts](learning/news-podcasts.md) 61 | * [Part III: Front-End Dev Tools](tools.md) 62 | * [Doc/API Browsing Tools](tools/browsedocs.md) 63 | * [SEO Tools](tools/seo.md) 64 | * [Prototyping & Wireframing Tools](tools/proto.md) 65 | * [Diagramming Tools](tools/diagram.md) 66 | * [HTTP/Network Tools](tools/http.md) 67 | * [Code Editing Tools](tools/code-editor.md) 68 | * [Browser Tools](tools/browser.md) 69 | * [HTML Tools](tools/html.md) 70 | * [CSS Tools](tools/css.md) 71 | * [DOM Tools](tools/dom.md) 72 | * [JavaScript Tools](tools/js.md) 73 | * [Static Site Generators Tools](tools/static.md) 74 | * [Accessibility Dev Tools](tools/accessibility.md) 75 | * [App Frameworks (Desktop, Mobile etc.) Tools](tools/apps.md) 76 | * [State Management Tools](tools/state.md) 77 | * [Progressive Web App Tools](tools/pwa.md) 78 | * [GUI Development/Build Tools](tools/dev-tools.md) 79 | * [Templating/Data Binding Tools](tools/templates.md) 80 | * [UI Widget & Component Toolkits](tools/ui.md) 81 | * [Data Visualization (e.g., Charts) Tools](tools/charting.md) 82 | * [Graphics (e.g., SVG, canvas, webgl) Tools](tools/graphics.md) 83 | * [Animation Tools](tools/animation.md) 84 | * [JSON Tools](tools/json.md) 85 | * [Placeholder Images/Text Tools](tools/placeholder.md) 86 | * [Testing Tools](tools/testing.md) 87 | * [Front-end Data Storage Tools](tools/db.md) 88 | * [Module/Package Loading Tools](tools/loaders.md) 89 | * [Module/Package Repo. Tools](tools/repo.md) 90 | * [Hosting Tools](tools/hosting.md) 91 | * [Project Management & Code Hosting](tools/project-hosting.md) 92 | * [Collaboration & Communication Tools](tools/comm.md) 93 | * [CMS Hosted/API Tools](tools/cms.md) 94 | * [BAAS (for Front-End Devs) Tools](tools/baas.md) 95 | * [Offline Tools](tools/offline.md) 96 | * [Security Tools](tools/security.md) 97 | * [Tasking (aka Build) Tools](tools/task.md) 98 | * [Deployment Tools](tools/deploy.md) 99 | * [Site/App Monitoring Tools](tools/uptime.md) 100 | * [JS Error Monitoring Tools](tools/error.md) 101 | * [Performance Tools](tools/perf.md) 102 | * [Tools for Finding Tools](tools/find-tools.md) 103 | * [Recap of Front-end Dev in 2017](recap.md) 104 | * [In 2018 expect...](2018.md) 105 | * [Sponsored by Frontend Masters](frontendmasters.md) -------------------------------------------------------------------------------- /_layouts/ebook/page.html: -------------------------------------------------------------------------------- 1 | {% extends "layout.html" %} 2 | 3 | {% block title %}{{ page.title }}{% endblock %} 4 | {% block description %}{{ page.description }}{% endblock %} 5 | 6 | {% block style %} 7 | {### Include theme css before plugins css ###} 8 | {% if not fileExists(config.styles.print) %} 9 | {% if options.format %} 10 | 11 | {% else %} 12 | 13 | {% endif %} 14 | {% endif %} 15 | 16 | {{ super() }} 17 | 18 | {### Custom stylesheets for the book ###} 19 | 20 | {% for type, style in config.styles %} 21 | {% if fileExists(style) and (type == "ebook" or type == "print" or type == options.format) %} 22 | 23 | {% endif %} 24 | {% endfor %} 25 | {% endblock %} 26 | 27 | {% block body %} 28 |
29 | {% block page %} 30 |

{{ page.title }}

31 |
32 | {{ page.content|safe }} 33 |
34 | {% endblock %} 35 |
36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /_layouts/ebook/pdf_footer.html: -------------------------------------------------------------------------------- 1 | {% extends "./page.html" %} 2 | 3 | {% block body %} 4 |
5 | {{ page.section }} 6 | {{ page.num }} 7 |
8 | {% endblock %} 9 | -------------------------------------------------------------------------------- /_layouts/ebook/pdf_header.html: -------------------------------------------------------------------------------- 1 | {% extends "./page.html" %} 2 | 3 | {% block body %} 4 |
5 | {{ page.title }} 6 |
7 | {% endblock %} 8 | -------------------------------------------------------------------------------- /_layouts/ebook/summary.html: -------------------------------------------------------------------------------- 1 | {% extends "./page.html" %} 2 | 3 | {% block title %}{{ "SUMMARY"|t }}{% endblock %} 4 | 5 | {% macro articles(_articles) %} 6 | {% for article in _articles %} 7 |
  • 8 | 9 | {% if article.path or article.url %} 10 | {% if article.path %} 11 | {{ article.title }} 12 | {% else %} 13 | {{ article.title }} 14 | {% endif %} 15 | {% else %} 16 | {{ article.title }} 17 | {% endif %} 18 | {% if 1 %} 19 | {{ article.level }} 20 | {% endif %} 21 | 22 | {% if article.articles.length > 0 %} 23 |
      24 | {{ articles(article.articles) }} 25 |
    26 | {% endif %} 27 |
    • 28 | {% endfor %} 29 | {% endmacro %} 30 | 31 | {% block page %} 32 |
    33 |

    {{ "SUMMARY"|t }}

    34 |
      35 | {% for part in summary.parts %} 36 | {% if part.title %} 37 |
    1. 38 |

      {{ part.title }}

      39 |
      2. 40 | {% endif %} 41 | {{ articles(part.articles) }} 42 | 43 | {% if not loop.last %} 44 |
    2. 45 | {% endif %} 46 | {% endfor %} 47 | 48 | {% if glossary.path %} 49 |
    3. 50 | 51 | {{ "GLOSSARY"|t }} 52 | 53 |
      4. 54 | {% endif %} 55 |
    56 |
    57 | {% endblock %} 58 | 59 | -------------------------------------------------------------------------------- /_layouts/website/page.html: -------------------------------------------------------------------------------- 1 | {% extends template.self %} 2 | 3 | {% block body %} 4 |
    5 | 8 |
    9 | Get free, lifetime access to 5 popular courses 10 |
    11 | 12 |
    13 | 14 | {{ super() }} 15 | 16 | 29 | 30 | {% endblock %} -------------------------------------------------------------------------------- /appspec.yml: -------------------------------------------------------------------------------- 1 | # This is an appspec.yml template file for use with AWS CodeDeploy. 2 | # The lines in this template starting with the hashtag symbol are 3 | # instructional comments and can be safely left in the file or 4 | # ignored. 5 | # For help completing this file, see the "AppSpec File Reference" in the 6 | # "AWS CodeDeploy User Guide" at 7 | # http://docs.aws.amazon.com/codedeploy/latest/userguide/app-spec-ref.html 8 | version: 0.0 9 | # Specify "os: linux" if this revision targets Amazon Linux, 10 | # Red Hat Enterprise Linux (RHEL), or Ubuntu Server 11 | # instances. 12 | # Specify "os: windows" if this revision targets Windows Server instances. 13 | # (You cannot specify both "os: linux" and "os: windows".) 14 | os: linux 15 | # os: windows 16 | # During the Install deployment lifecycle event (which occurs between the 17 | # BeforeInstall and AfterInstall events), copy the specified files 18 | # in "source" starting from the root of the revision's file bundle 19 | # to "destination" on the Amazon EC2 instance. 20 | # Specify multiple "source" and "destination" pairs if you want to copy 21 | # from multiple sources or to multiple destinations. 22 | # If you are not copying any files to the Amazon EC2 instance, then remove the 23 | # "files" section altogether. A blank or incomplete "files" section 24 | # may cause associated deployments to fail. 25 | files: 26 | - source: /_book 27 | destination: /var/www/frontendhandbook.com/2018 28 | 29 | permissions: 30 | - object: /var/www/frontendhandbook.com/2018 31 | owner: root 32 | group: root 33 | mode: 755 34 | 35 | # If you are not running any commands on the Amazon EC2 instance, then remove 36 | # the "hooks" section altogether. A blank or incomplete "hooks" section 37 | # may cause associated deployments to fail. 38 | # hooks: 39 | 40 | # During the ApplicationInstall deployment lifecycle event, run the commands 41 | # in the script specified in "location". 42 | # ApplicationStart: 43 | # - location: /srv/fem-wp-site/install.sh 44 | # timeout: 300 45 | # runas: root 46 | # 47 | -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Front-End Developer Handbook 2018", 3 | "description": "Front-End Developer Handbook is a useful resource for understanding the entire scope of the front-end development practice.", 4 | "structure": { 5 | "readme": "myIntro.md" 6 | }, 7 | "plugins": [ 8 | "scripts", 9 | "canonical-link", 10 | "open-graph" 11 | ], 12 | "pluginsConfig": { 13 | "scripts": { 14 | "files": [ 15 | "./gtm-analytics.js" 16 | ] 17 | }, 18 | "canonical-link": { 19 | "baseURL": "https://frontendmasters.com/guides/front-end-handbook/2018" 20 | }, 21 | "open-graph": { 22 | "baseURL": "https://frontendmasters.com/guides/front-end-handbook/2018", 23 | "defaultDescription": "Front-end Developer Handbook is a useful resource for understanding the entire scope of the front-end development practice.", 24 | "defaultImage": "images/open-graph-image.jpg" 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /buildspec.yml: -------------------------------------------------------------------------------- 1 | version: 0.1 2 | 3 | meta: | 4 | AWS CodeBuild buildspec.yml 5 | The dependencies are downloaded and the binary built outside of the GOPATH. 6 | This requies special consideration is necessary. GOROOT is not set by default. 7 | GOPATH is set to /go. GOBIN is necessary for the prebuild go get phase. 8 | The repo source must be installed to the GOPATH. 9 | 10 | environment_variables: 11 | plaintext: 12 | PHASE: "build" 13 | PROJECT: "feh-2018" 14 | AWS_DEFAULT_REGION: "us-west-2" 15 | 16 | phases: 17 | pre_build: 18 | commands: 19 | - apt-get update -y 20 | - curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - 21 | - apt-get install -y --force-yes nodejs 22 | - npm install 23 | build: 24 | commands: 25 | - echo Build started on `date` 26 | - npm run build 27 | 28 | post_build: 29 | commands: 30 | - echo build completed started on `date` 31 | 32 | artifacts: 33 | type: zip 34 | files: 35 | - _book/**/* 36 | - appspec.yml 37 | discard-paths: no 38 | -------------------------------------------------------------------------------- /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/cover.jpg -------------------------------------------------------------------------------- /cover_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/cover_small.jpg -------------------------------------------------------------------------------- /frontendmasters.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/frontendmasters.jpg -------------------------------------------------------------------------------- /frontendmasters.md: -------------------------------------------------------------------------------- 1 | [![Frontend Masters](https://frontendmasters.com/books/front-end-handbook/2018/frontendmasters.jpg)](https://frontendmasters.com/) 2 | 3 | -------------------------------------------------------------------------------- /gtm-analytics.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Google Tag Manager Tracking 3 | */ 4 | (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 5 | new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 6 | j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 7 | '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 8 | })(window,document,'script','dataLayer','GTM-NF375C'); 9 | /* 10 | * End Google Tag Manager 11 | */ 12 | -------------------------------------------------------------------------------- /images/FEM-2018-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/FEM-2018-banner.png -------------------------------------------------------------------------------- /images/browsers-work.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/browsers-work.png -------------------------------------------------------------------------------- /images/dns.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/dns.jpg -------------------------------------------------------------------------------- /images/fd-devs-for.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/fd-devs-for.jpeg -------------------------------------------------------------------------------- /images/frameworks1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/frameworks1.png -------------------------------------------------------------------------------- /images/frameworks2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/frameworks2.png -------------------------------------------------------------------------------- /images/front-end-salary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/front-end-salary.png -------------------------------------------------------------------------------- /images/front-end-skills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/front-end-skills.png -------------------------------------------------------------------------------- /images/full-stack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/full-stack.jpg -------------------------------------------------------------------------------- /images/fullstack1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/fullstack1.png -------------------------------------------------------------------------------- /images/fullstack2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/fullstack2.png -------------------------------------------------------------------------------- /images/growth-iot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/growth-iot.jpg -------------------------------------------------------------------------------- /images/host.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/host.jpg -------------------------------------------------------------------------------- /images/how-does-seo-work.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/how-does-seo-work.png -------------------------------------------------------------------------------- /images/how-the-internet-works.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/how-the-internet-works.jpg -------------------------------------------------------------------------------- /images/making-fd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/making-fd.png -------------------------------------------------------------------------------- /images/makingFED.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/makingFED.png -------------------------------------------------------------------------------- /images/open-graph-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/open-graph-image.jpg -------------------------------------------------------------------------------- /images/q11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/q11.jpg -------------------------------------------------------------------------------- /images/q13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/q13.jpg -------------------------------------------------------------------------------- /images/q15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/q15.jpg -------------------------------------------------------------------------------- /images/q18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/q18.jpg -------------------------------------------------------------------------------- /images/reacteco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/reacteco.png -------------------------------------------------------------------------------- /images/salary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/salary.png -------------------------------------------------------------------------------- /images/salary3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/salary3.png -------------------------------------------------------------------------------- /images/spectrum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/spectrum.png -------------------------------------------------------------------------------- /images/stacks-change.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/stacks-change.jpg -------------------------------------------------------------------------------- /images/statcounter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/statcounter.png -------------------------------------------------------------------------------- /images/task1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/task1.png -------------------------------------------------------------------------------- /images/tasks2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/tasks2.png -------------------------------------------------------------------------------- /images/test1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/test1.png -------------------------------------------------------------------------------- /images/test2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/test2.png -------------------------------------------------------------------------------- /images/things.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/things.jpg -------------------------------------------------------------------------------- /images/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/vscode.png -------------------------------------------------------------------------------- /images/web-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/web-api.png -------------------------------------------------------------------------------- /images/web-tech-employed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/web-tech-employed.jpg -------------------------------------------------------------------------------- /images/what-is-front-end-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/what-is-front-end-dev.png -------------------------------------------------------------------------------- /images/what-is-web-hosting-infographic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/what-is-web-hosting-infographic.jpg -------------------------------------------------------------------------------- /images/who-runs-the-internet-infographic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FrontendMasters/front-end-handbook-2018/a925c3e62e0a95a8ff658b7c7a76e03f4daa9050/images/who-runs-the-internet-infographic.jpg -------------------------------------------------------------------------------- /learning.md: -------------------------------------------------------------------------------- 1 | --- 2 | description: Self-directed and directed resources for learning to become a front-end developer. 3 | --- 4 | # Part II: Learning 5 | 6 | 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. 7 | 8 | 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. -------------------------------------------------------------------------------- /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). 10 | 11 | >— [Wikipedia](https://en.wikipedia.org/wiki/Accessibility) 12 | 13 | ##### General Learning: 14 | 15 | * [9 tips to get bare minimum of web accessibility](https://medium.com/@realabhijeet4u/9-tips-to-get-bare-minimum-of-web-accessibility-739899a9437c) 16 | * [Foundations of UX: Accessibility](http://www.lynda.com/Accessibility-tutorials/Foundations-UX-Accessibility/435008-2.html) [watch][$] 17 | * [How HTML elements are supported by screen readers](http://thepaciellogroup.github.io/AT-browser-tests/?utm_source=html5weekly&utm_medium=email) [read] 18 | * [Introduction to Web Accessibility](https://webaccessibility.withgoogle.com/course) - Google Open Online Education [watch] 19 | * [Introduction to Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) - WAI [read] 20 | * [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][$] 21 | * [Web Accessibility: Getting Started](http://www.pluralsight.com/courses/web-accessibility-getting-started) [watch][$] 22 | * [A Web for Everyone](http://rosenfeldmedia.com/books/a-web-for-everyone/) [read][$] 23 | * [Web Accessibility](https://frontendmasters.com/courses/web-accessibility/) [watch][$] 24 | * [A11ycasts](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) [watch] 25 | * [Accessibility by Google](https://www.udacity.com/course/web-accessibility--ud891) - Udacity course [watch] 26 | 27 | ##### Standards/Specifications: 28 | 29 | * [Accessible Rich Internet Applications (WAI-ARIA) Current Status](http://www.w3.org/standards/techs/aria#w3c_all) 30 | * [Web Accessibility Initiative (WAI)](http://www.w3.org/WAI/) 31 | * [Web Content Accessibility Guidelines (WCAG) Current Status](http://www.w3.org/standards/techs/wcag#w3c_all) 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 | -------------------------------------------------------------------------------- /learning/animation.md: -------------------------------------------------------------------------------- 1 | # Learn Web Animation 2 | 3 | ##### General Learning: 4 | 5 | * [Advanced SVG Animation](https://frontendmasters.com/courses/svg-animation/) [$][watch] 6 | * [Adventures in Web Animations](https://www.codeschool.com/courses/adventures-in-web-animations) [$][watch] 7 | * [Animating With Snap.svg](https://webdesign.tutsplus.com/courses/animating-with-snapsvg) [$][watch] 8 | * [Animation in CSS3 and HTML5](https://frontendmasters.com/courses/animation-storytelling-html5-css3/) [$][watch] 9 | * [Create Animations in CSS](http://www.kirupa.com/css_animations/index.htm) [read & watch] 10 | * [CSS Animation in the Real World](https://webdesign.tutsplus.com/courses/css-animation-in-the-real-world) [$][watch] 11 | * [Foundation HTML5 Animation with JavaScript](http://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_3) [$][read] 12 | * [Learn to Create Animations in JavaScript](http://www.kirupa.com/javascript_animations/index.htm) [read & watch] 13 | * [Motion Design with CSS](https://frontendmasters.com/courses/motion-design-css/) [$][watch] 14 | * [State of the Animation 2015](https://air.mozilla.org/rachel-nabors-state-of-the-animation-2015/) [watch] 15 | * [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] 16 | 17 | ##### Standards/Specifications: 18 | 19 | * [Web Animations](https://w3c.github.io/web-animations/) 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 | -------------------------------------------------------------------------------- /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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/Web_development_tools) 10 | 11 | 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. 12 | 13 | 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. 14 | 15 | ##### Learn Chrome Web Developer Tools: 16 | 17 | * [Modern DevTools](https://moderndevtools.com/) [watch][$ + free] 18 | * [Explore and Master Chrome DevTools](http://discover-devtools.codeschool.com/) [watch] 19 | * [Mastering Chrome Developer Tools](https://frontendmasters.com/courses/chrome-dev-tools/) [watch][$] 20 | * [Using The Chrome Developer Tools](http://www.pluralsight.com/courses/chrome-developer-tools) [watch][$] 21 | * [Learning Chrome Web Developer Tools](https://www.lynda.com/Chrome-tutorials/Learning-Chrome-Web-Developer-Tools/590844-2.html) [watch][$] 22 | 23 | ##### Chrome Web Developer Tools Docs: 24 | 25 | * [Command Line API Reference](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference) 26 | * [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) 27 | * [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs) 28 | * [Configure and Customize DevTools](https://developer.chrome.com/devtools/docs/settings) 29 | 30 | ##### News/Newsletters/Podcasts/Tips: 31 | 32 | * [Dev Tips](https://umaar.com/dev-tips/) 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 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Web_browser) 6 | 7 | 8 | ##### The [most commonly used browsers](https://www.sitepoint.com/browser-trends-september-2016-browser-wars/) (on any device) are: 9 | 10 | 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)) 11 | 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)) 12 | 3. [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) 13 | 4. [Safari](https://www.apple.com/safari/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + [SquirrelFish](https://trac.webkit.org/wiki/SquirrelFish)) 14 | 15 | ![](../images/statcounter.png "http://gs.statcounter.com/browser-market-share") 16 | 17 | Image source: http://gs.statcounter.com/browser-market-share 18 | 19 | ##### Evolution of Browsers & Web Technologies (i.e., APIs) 20 | 21 | * [evolutionoftheweb.com](http://www.evolutionoftheweb.com/) [read] 22 | * [Timeline of web browsers](https://en.wikipedia.org/wiki/Timeline_of_web_browsers) [read] 23 | 24 | ##### The Most Commonly Used [Headless Browser](http://www.asad.pw/HeadlessBrowsers/) Are: 25 | 26 | * [Headless Chromium](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) (engine: [Blink](https://www.chromium.org/blink) + V8) 27 | * [PhantomJS](http://phantomjs.org/) (engine: [Webkit](https://en.wikipedia.org/wiki/WebKit) + SquirrelFish) 28 | * [SlimerJS](http://slimerjs.org/) (engine: [Gecko](https://en.wikipedia.org/wiki/Gecko_%28software%29) + [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey_%28software%29)) 29 | * [TrifleJS](https://github.com/sdesalas/trifleJS) (engine: [Trident](https://en.wikipedia.org/wiki/Trident_%28layout_engine%29) + [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29)) 30 | 31 | ##### How Browsers Work 32 | 33 | * [20 Things I Learned About Browsers and the Web](http://www.20thingsilearned.com/en-US/foreword/1) [read] 34 | * [Fast CSS: How Browsers Lay Out Web Pages](http://dbaron.org/talks/2012-03-11-sxsw/master.xhtml) [read] 35 | * [How Browsers Work: Behind the scenes of modern web browsers](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) [read] 36 | * [Quantum Up Close: What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/) 37 | * [So How Does the Browser Actually Render a Website](https://www.youtube.com/watch?v=SmE4OwHztCc) [watch] 38 | * [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) [read] 39 | * [What Every Frontend Developer Should Know About Webpage Rendering](http://frontendbabel.info/articles/webpage-rendering-101/) [read] 40 | 41 | ![](../images/browsers-work.png "http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/") 42 | 43 | Image source: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 44 | 45 | ##### Optimizing for Browsers: 46 | 47 | * [Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860) [watch] 48 | * [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) [watch] 49 | 50 | ##### Comparing Browsers 51 | 52 | * [Comparison of Web Browsers](https://en.wikipedia.org/wiki/Comparison_of_web_browsers) [read] 53 | 54 | ##### Browser Hacks 55 | 56 | * [browserhacks.com](http://browserhacks.com/) [read] 57 | 58 | ##### Developing for Browsers 59 | 60 | In the past, front-end developers spent a lot of time making code work in several different browsers. This was once a bigger issue than it is today. Today, abstractions (e.g., jQuery, React, Post-CSS, Babel etc...) combined with modern browsers make browser development fairly easy. The new challenge is not which browser the user will use, but on which device they will run the browser. 61 | 62 | ##### Evergreen Browsers 63 | 64 | The latest versions of most modern browsers are considered evergreen browsers. That is, in theory they are suppose to automatically update themselves silently without prompting the user. This move towards self updating browsers has been in reaction to the slow process of eliminating older browsers that do not auto-update. 65 | 66 | ##### Picking a Browser [^1] 67 | 68 | As of today, most front-end developers use Chrome and "Chrome Dev Tools" to develop front-end code. However, the most used modern browsers all offer a flavor of developer tools. Picking one to use for development is a subjective choice. The more important issue is knowing which browsers, on which devices, you have to support and then testing appropriately. 69 | 70 | *** 71 | 72 | ###### ADVICE: 73 | 74 | [^1] I suggest using Chrome because the developer tools are consistently improving and at this time contain the most robust features. 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/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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Build_automation) 6 | 7 | ##### General Learning: 8 | 9 | * [Getting Started with Gulp](https://www.amazon.com/Getting-Started-Gulp-Travis-Maynard/dp/1784395765?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=3eb1e7a868a09b44f90570c56ef5f53b&camp=1789&creative=9325) [read][$] 10 | * [Gulp Basics](http://teamtreehouse.com/library/gulp-basics) [watch][$] 11 | * [JavaScript Build Automation With Gulp.js](http://www.pluralsight.com/courses/javascript-build-automation-gulpjs) [watch][$] 12 | 13 | ##### References/Docs: 14 | 15 | * [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) 16 | 17 | *** 18 | 19 | ###### ADVICE: 20 | 21 | 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 Gulp. 22 | 23 | Read: 24 | 25 | * [Give Grunt the Boot! A Guide to Using npm as a Build Tool](http://www.sitepoint.com/guide-to-npm-as-a-build-tool/) 26 | * [How to Use npm as a Build Tool](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) 27 | * [Task Automation with npm Run](http://substack.net/task_automation_with_npm_run) 28 | * [Using npm as a Build System for Your next Project](https://drublic.de/blog/npm-builds) 29 | * [Using npm as a Task Runner](http://teamtreehouse.com/library/using-npm-as-a-task-runner) [watch][$] 30 | * [Why I Left Gulp and Grunt for npm Scripts](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.z8plsoxxs) 31 | * [Why npm Scripts?](https://css-tricks.com/why-npm-scripts/) 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 | -------------------------------------------------------------------------------- /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). 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Command-line_interface) 6 | 7 | ##### General Learning: 8 | 9 | * [The Bash Guide](http://guide.bash.academy/) [read] 10 | * [Codecademy: Learn the Command Line](https://www.codecademy.com/courses/learn-the-command-line) [watch] 11 | * [Command Line Power User](http://commandlinepoweruser.com/) [watch] 12 | * [Learn Enough Command Line to Be Dangerous](http://www.learnenough.com/command-line-tutorial) [read] [free to $] 13 | * [Meet the Command Line](http://www.pluralsight.com/courses/meet-command-line) [watch][$] 14 | 15 | ##### Mastering: 16 | 17 | * [Advanced Command Line Techniques](https://code.tutsplus.com/courses/advanced-command-line-techniques) [watch][$] 18 | * [Introduction to Bash, VIM & Regex](https://frontendmasters.com/courses/bash-vim-regex/) [watch][$] 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/courses.md: -------------------------------------------------------------------------------- 1 | # Directed Learning 2 | 3 | The table below contains instructor led, paid, front-end courses, programs, schools, and bootcamps. 4 | 5 | However, if you can't afford a directed education (can be very expensive), a [self directed](../learning/self-direct-learning.html) 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 |
    companycoursepriceon siteremoteduration
    BetamoreFront-end Web Development3,000Baltimore, MD10 weeks
    BLOCBecome a Frontend Developer4,999yes16 weeks @ 25hr/wk or 32 weeks @ 10hr/wk
    General AssemblyFrontend Web Development3,500multiple locations3 hrs/day 2 days/wk for 8 weeks
    HackerYouFront-end Web Development Immersive7,000 - 7,910Toronto, Canada9 weeks
    The New York Code + Design AcademyFront End 1012,000New York, NY8 weeks part-time
    ThinkfulFrontend Web Development300 per monthyes15 hrs/wk for 3 months
    Turing School of Software & DesignFront-End Engineering20,000Denver, CO7 months full time
    UdacityFront-End Web Developer Nanodegree200 monthlymultiple locationsyes6 months 12hrs/wk
    85 | 86 | --- 87 | 88 | ###### NOTES: 89 | 90 | For a complete list of courses/bootcamps look at [switchup.org](https://www.switchup.org/front-end-development) or [coursereport.com](https://www.coursereport.com/tracks/front-end-developer-bootcamps). 91 | -------------------------------------------------------------------------------- /learning/cs.md: -------------------------------------------------------------------------------- 1 | # Learn Computer Science via JS 2 | 3 | * [Four Semesters of Computer Science in Six Hours](https://frontendmasters.com/courses/computer-science/) [video][$] 4 | * [Four Semesters of Computer Science in Six Hours: Part 2](https://frontendmasters.com/courses/computer-science-2/) [video][$] 5 | * [Computer Science in JavaScript](https://github.com/davidshariff/computer-science) [read] 6 | * [Collection of classic computer science paradigms, algorithms, and approaches written in JavaScript](https://github.com/nzakas/computer-science-in-javascript) [read] 7 | * [Algorithms and Data Structures in JavaScript](https://frontendmasters.com/workshops/algorithms-data-structures-js/) [watch][$] 8 | -------------------------------------------------------------------------------- /learning/data-api.md: -------------------------------------------------------------------------------- 1 | # Learn Data (i.e. JSON) API Design 2 | 3 | * [REST & GraphQL API Design in Node.js, v2 (using Express & MongoDB)](https://frontendmasters.com/courses/api-node-rest-graphql/) [watch][$] 4 | * [Build APIs You Won't Hate](http://apisyouwonthate.com/) [$][read] 5 | * [JSON API ](http://jsonapi.org/) [read] 6 | * [RESTful Web API Design with Node.JS - Second Edition](https://www.amazon.com/RESTful-Web-API-Design-Node-JS/dp/1786469138?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=65822660966bb9c5339b4b411ef25d73&camp=1789&creative=9325) [$][read] 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 | -------------------------------------------------------------------------------- /learning/direct-learning.md: -------------------------------------------------------------------------------- 1 | # Directed Learning 2 | 3 | This section focuses on directed learning via schools, courses, programs and bootcamps. -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Domain_Name_System) 6 | 7 | ![](../images/dns.jpg "http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg") 8 | 9 | Image source: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg 10 | 11 | * [An Introduction to DNS Terminology, Components, and Concepts](https://www.digitalocean.com/community/tutorials/an-introduction-to-dns-terminology-components-and-concepts) [read] 12 | * [DNS Explained](https://www.youtube.com/watch?v=72snZctFFtA) [watch] 13 | * [How DNS Works](https://howdns.works/ep1/) [read] 14 | * [The Internet: IP Addresses and DNS](https://www.youtube.com/watch?v=5o8CwafCxnU&index=3&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7) [watch] 15 | * [What is a domain name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) [read] 16 | * [Full Stack for Front End Engineers](https://frontendmasters.com/courses/full-stack/) [watch][$] 17 | -------------------------------------------------------------------------------- /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). 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Document_Object_Model) 6 | 7 | > **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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/Browser_Object_Model) 10 | 11 | > **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. 12 | 13 | >— [Wikipedia](https://en.wikipedia.org/wiki/JQuery) 14 | 15 | 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, the DOM, and jQuery don't become a black box. 16 | 17 | ##### General Learning: 18 | 19 | * [Codecademy.com jQuery](https://www.codecademy.com/tracks/jquery) [watch] 20 | * [The Document Object Model](http://eloquentjavascript.net/13_dom.html) [read] 21 | * [HTML/JS: Making Webpages Interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js) [watch] 22 | * [HTML/JS: Making Webpages Interactive with jQuery](https://www.khanacademy.org/computing/computer-programming/html-js-jquery) [watch] 23 | * [jQuery Enlightenment](http://jqueryenlightenment.com/) [read] 24 | * [What is the DOM?](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) [read] 25 | 26 | ##### Mastering: 27 | 28 | * [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][$] 29 | * [Advanced JS Fundamentals to jQuery & Pure DOM Scripting](https://frontendmasters.com/courses/javascript-jquery-dom/) [watch][$] 30 | * [Douglas Crockford: An Inconvenient API - The Theory of the DOM](https://www.youtube.com/watch?v=Y2Y0U-2qJMs&list=PL5586336C26BDB324&index=2) [watch] 31 | * [DOM Enlightenment](http://www.amazon.com/DOM-Enlightenment-Cody-Lindley/dp/1449342841/) [read][$] or [read online for free](http://domenlightenment.com/) 32 | * [Fixing Common jQuery Bugs](http://www.pluralsight.com/courses/fixing-common-jquery-bugs) [watch][$] 33 | * [jQuery-Free JavaScript](http://www.pluralsight.com/courses/jquery-free-javascript) [watch][$] 34 | * [jQuery Tips and Tricks](http://www.pluralsight.com/courses/jquery-tips-and-tricks) [watch][$] 35 | 36 | ##### References/Docs: 37 | 38 | * [jQuery Docs](http://api.jquery.com/) 39 | * [Events](https://html.spec.whatwg.org/#events-2) 40 | * [DOM Browser Support](http://www.webbrowsercompatibility.com/dom/desktop/) 41 | * [DOM Events Browser Support](http://www.webbrowsercompatibility.com/dom-events/desktop/) 42 | * [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) 43 | * [MDN Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 44 | * [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window) 45 | * [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 46 | * [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events) 47 | * [MSDN Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx) 48 | 49 | ##### Standards/Specifications: 50 | 51 | * [Document Object Model (DOM) Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/) 52 | * [Document Object Model (DOM) Technical Reports](http://www.w3.org/DOM/DOMTR) 53 | * [DOM Living Standard](https://dom.spec.whatwg.org/) 54 | * [W3C DOM4](https://www.w3.org/TR/2015/REC-dom-20151119/) 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 | -------------------------------------------------------------------------------- /learning/fonts.md: -------------------------------------------------------------------------------- 1 | # Learn Web Fonts, Icons, & Images 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. 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. 6 | 7 | >— [Wikipedia](https://en.wikipedia.org/wiki/Web_typography) 8 | 9 | ##### Fonts: 10 | 11 | * [A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) [read] 12 | * [Beautiful Web Type a Showcase of the Best Typefaces from the Google Web Fonts Directory](http://hellohappy.org/beautiful-web-type/) [read] 13 | * [Quick Guide to Webfonts via @font-face](http://www.html5rocks.com/en/tutorials/webfonts/quick/) [read] 14 | * [MDN: Web fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) [read] 15 | * [Responsive Typography](https://frontendmasters.com/courses/responsive-typography/) [watch][$] 16 | * [Typography for the Web](http://www.pluralsight.com/courses/typography-for-web-1790) [watch][$] 17 | 18 | ##### Icons: 19 | 20 | * [[read]](https://www.lynda.com/CSS-tutorials/Web-Icons-SVG/502312-2.html) [watch] 21 | 22 | ##### Images: 23 | 24 | * [MDN: Images in HTMLb](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) [read] 25 | * [MDN: Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) [read] 26 | * [SVG ON THE WEB - A Practical Guide](https://svgontheweb.com/) [read] 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/front-end-apps.md: -------------------------------------------------------------------------------- 1 | # Learn Front-End Application Architecture 2 | 3 | ##### General Learning: [^1] 4 | 5 | * [JavaScript Application Design](https://www.amazon.com/JavaScript-Application-Design-Build-Approach/dp/1617291951?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=4dd15b53493d3b5148af2b3e5488e98d&camp=1789&creative=9325) [read][$] 6 | * [Programming JavaScript Applications](http://chimera.labs.oreilly.com/books/1234000000262/index.html) [read] 7 | * [Grab Front End Guide](https://github.com/grab/front-end-guide) [read] 8 | * [A set of best practices for JavaScript projects](https://github.com/elsewhencode/project-guidelines) 9 | * [Spellbook of Modern Web Dev](https://github.com/dexteryy/spellbook-of-modern-webdev) 10 | * [JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch) 11 | 12 | ##### Deprecated Learning Materials: 13 | 14 | * [Build an App with React and Ampersand](http://learn.humanjavascript.com/react-ampersand) [watch] 15 | * [Building Modern Single-Page Web Applications](https://frontendmasters.com/courses/modern-web-apps/) [watch][$] 16 | * [Eloquent JavaScript: Modules](http://eloquentjavascript.net/10_modules.html) [read] 17 | * [Field Guide to Web Applications](http://www.html5rocks.com/webappfieldguide/toc/index/) [read] 18 | * [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire) [read] 19 | * [Human JavaScript](http://read.humanjavascript.com/) [read] 20 | * [Nicholas Zakas: Scalable JavaScript Application Architecture](https://www.youtube.com/watch?v=vXjVFPosQHw) [watch] 21 | * [Organizing JavaScript Functionality](https://frontendmasters.com/courses/organizing-javascript/) [watch][$] 22 | * [Patterns for Large-Scale JavaScript Application Architecture](http://addyosmani.com/largescalejavascript/) [read] 23 | * [Terrific](http://terrifically.org/) [read] 24 | * [UI Architecture](http://www.pluralsight.com/courses/web-ui-architecture) [watch][$] 25 | * [Web UI Architecture](https://frontendmasters.com/courses/web-ui-architecture/) [watch][$] 26 | 27 | *** 28 | 29 | ###### NOTES: 30 | 31 | Not a lot of general content is being created on this topic as of late. Most of the content offered for learning how to build front-end/SPA/JavaScript applications presupposes you've decided up a tool like Angular, Ember, React, or Aurelia. 32 | 33 | *** 34 | 35 | ###### ADVICE: 36 | 37 | [^1] In [2018](https://stateofjs.com/2017/front-end/results) learn [React](https://facebook.github.io/react/) and [Mobx](https://github.com/mobxjs/mobx). 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 | -------------------------------------------------------------------------------- /learning/front-end.md: -------------------------------------------------------------------------------- 1 | # Learn General Front-End Development 2 | 3 | ##### General Learning: 4 | 5 | * [Become a Front-End Web Developer](https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer) [watch][$] 6 | * [Being a web developer](http://www.yellowshoe.com.au/standards) [read] 7 | * [Foundations of Front-End Web Development](https://www.udemy.com/foundations-of-front-end-development/) [watch] 8 | * [freeCodeCamp](http://freecodecamp.com/) [interact] 9 | * [Front-End Curriculum](https://gist.github.com/stevekinney/03027e71aac341af14a2) [read] 10 | * [Front-End Dev Mastery](https://mijingo.com/products/bundles/front-end-dev-mastery/) [watch][$] 11 | * [Front-End Web Developer Nanodegree](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001) [watch][$] 12 | * [Front End Web Development Career Kickstart](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [watch][$] 13 | * [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$] 14 | * [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$] 15 | * [Front-End Web Development: The Big Nerd Ranch Guide](https://www.amazon.com/Front-End-Web-Development-Ranch-Guide/dp/0134433947/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=06802d4e42ca55b03294779c960d0826&camp=1789&creative=9325) [read][$] 16 | * [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) [read] 17 | * [Introduction to Web Development](https://frontendmasters.com/courses/web-development/) [watch][$] 18 | * [Isobar Front-End Code Standards](http://isobar-idev.github.io/code-standards/) [read] 19 | * [Lean Front-End Engineering](https://frontendmasters.com/courses/lean-front-end-engineering/) [watch][$] 20 | * [Learn Front End Web Development](https://teamtreehouse.com/tracks/front-end-web-development) [watch][$] 21 | * [Planning a Front-End JS Application](https://www.youtube.com/watch?v=q4zEGkjTBFA) [watch] 22 | * [So, You Want to Be a Front-End Engineer](https://www.youtube.com/watch?v=Lsg84NtJbmI) [watch] 23 | 24 | ##### General Front-End Newsletters, News Outlets, & Podcasts: 25 | 26 | * [The Big Web Show](http://5by5.tv/bigwebshow) 27 | * [Front-End Dev Weekly](http://frontenddevweekly.com/) 28 | * [Front End Happy Hour](http://frontendhappyhour.com/) 29 | * [frontendfront.com](http://frontendfront.com/) 30 | * [FrontEnd Focus](http://frontendfocus.co/) 31 | * [Front End Newsletter](http://frontendnewsletter.com/) 32 | * [Mobile Web Weekly](http://mobilewebweekly.co/) 33 | * [Open Web Platform Daily Digest](http://webplatformdaily.org/) 34 | * [Pony Foo Weekly](https://ponyfoo.com/weekly) 35 | * [shoptalkshow.com](http://shoptalkshow.com/) 36 | * [The Web Ahead](http://thewebahead.net/) 37 | * [The Web Platform Podcast](http://thewebplatform.libsyn.com/) 38 | * [webtoolsweekly.com](http://webtoolsweekly.com/) 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/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. 6 | 7 | >— [Wikipedia](https://en.wikipedia.org/wiki/Headless_browser) 8 | 9 | * [Getting Started with Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) [readme] 10 | 11 | *** 12 | 13 | ###### NOTES: 14 | 15 | [PhantomJS is no longer maintained](https://www.infoq.com/news/2017/04/Phantomjs-future-uncertain), [Headless Chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) steps in. -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Web_hosting_service) 6 | 7 | ![](../images/host.jpg "http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg") 8 | 9 | Image source: http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg 10 | 11 | 12 | ##### General Learning: 13 | 14 | * [Web Hosting Services Explained](https://firstsiteguide.com/web-hosting/) [read] 15 | * [Web Hosting 101: Get Your Website Live on the Web in No Time](https://www.udemy.com/web-hosting-101/) [video] 16 | 17 | ![](../images/what-is-web-hosting-infographic.jpg "https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg") 18 | 19 | Image source: https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg 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 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol) 6 | 7 | > **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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 10 | 11 | >**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. 12 | 13 | >— [Wikipedia](https://en.wikipedia.org/wiki/WebSocket) 14 | 15 | ##### HTTP Specifications 16 | 17 | * [HTTP/2](https://http2.github.io/) 18 | * [Hypertext Transfer Protocol -- HTTP/1.1](https://tools.ietf.org/html/rfc2616) 19 | 20 | ##### HTTP Docs 21 | 22 | * [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) [read] 23 | 24 | ##### HTTP Videos/Articles/Tutorials 25 | 26 | * [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] 27 | * [MDN: An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) [read] 28 | * [HTTP: The Definitive Guide (Definitive Guides)](https://www.amazon.com/HTTP-Definitive-Guide-Guides/dp/1565925092/ref=cm_cr_arp_d_product_top?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=11b990b79d33ddbef63712765715a9c1&camp=1789&creative=9325) [read][$] 29 | * [HTTP/2 Frequently Asked Questions](https://http2.github.io/faq/#what-are-the-key-differences-to-http1x) [read] 30 | * [HTTP Fundamentals](http://www.pluralsight.com/courses/xhttp-fund) [watch][$] 31 | * [HTTP/2 Fundamentals](https://app.pluralsight.com/library/courses/http2-fundamentals/table-of-contents) [watch][$] 32 | * [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] 33 | * [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] 34 | * [HTTP Succinctly](http://code.tutsplus.com/series/http-succinctly--net-33683) [read] 35 | 36 | ##### HTTP Status Codes 37 | 38 | * [HTTP Status Codes](https://httpstatuses.com/) 39 | * [HTTP Status Codes in 60 Seconds](http://webdesign.tutsplus.com/tutorials/http-status-codes-in-60-seconds--cms-24317) [watch] 40 | 41 | ##### CORS Specifications 42 | 43 | * [Cross-Origin Resource Sharing](https://www.w3.org/TR/cors/) 44 | 45 | ##### CORS 46 | 47 | * [CORS in Action](https://www.amazon.com/CORS-Action-Creating-consuming-cross-origin/dp/161729182X/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=47ebd885d688a4ed69f77a1bd8273f8a&camp=1789&creative=9325) [read][$] 48 | * [HTTP Access Control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) [read] 49 | 50 | ##### WebSockets 51 | 52 | * [Connect the Web With WebSockets](https://code.tutsplus.com/courses/connect-the-web-with-websockets) [watch] 53 | * [WebSocket: Lightweight Client-Server Communications](https://www.amazon.com/WebSocket-Client-Server-Communications-Andrew-Lombardi/dp/1449369278/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=dd39395cf3d2ab4fc7c820d7c19db39a&camp=1789&creative=9325) [read][$] 54 | * [The WebSocket Protocol](https://tools.ietf.org/html/rfc6455) [read] 55 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Internet) 6 | 7 | ![](../images/how-the-internet-works.jpg "https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/") 8 | 9 | Image source: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/ 10 | 11 | * [What is the Internet?](https://www.youtube.com/watch?v=Dxcc6ycZ73M) [watch] 12 | * [How the Web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) [read] 13 | * How does the Internet work? [https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) and 14 | [http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm](http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm) [read] 15 | * [How the Internet Works](https://www.khanacademy.org/partner-content/code-org/internet-works) [watch] 16 | * [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) [watch] 17 | * [How the Web Works](https://www.eventedmind.com/classes/how-the-web-works-7f40254c) [watch] 18 | * [What Is the Internet? Or, "You Say Tomato, I Say TCP/IP"](http://www.20thingsilearned.com/en-US/what-is-the-internet/1) [read] 19 | * [Don’t Fear the Internet](http://www.dontfeartheinternet.com/) 20 | 21 | ![](../images/who-runs-the-internet-infographic.jpg "http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/") 22 | 23 | Image source: http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/ 24 | -------------------------------------------------------------------------------- /learning/js-api.md: -------------------------------------------------------------------------------- 1 | # Learn JS API Design 2 | 3 | * [Designing Better JavaScript APIs](http://www.smashingmagazine.com/2012/10/designing-javascript-apis-usability/) [read] 4 | * [Writing JavaScript APIs](http://blog.wolksoftware.com/writing-javascript-apis) [read] 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 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/JSON) 10 | 11 | ##### General Learning: 12 | 13 | * [Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON](https://www.amazon.com/Introduction-JavaScript-Object-Notation-Point/dp/1491929480/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=24e8df4722cb62d086d3f8c87f4e17a1&camp=1789&creative=9325) [read][$] 14 | * [json.com](https://www.json.com/) [read] 15 | * [What is JSON](https://mijingo.com/lessons/what-is-json/) [watch] 16 | 17 | ##### References/Docs: 18 | 19 | * [json.org](http://json.org/) [read] 20 | 21 | ##### Standards/Specifications: 22 | 23 | * [ECMA-404 The JSON Data Interchange Format](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf) 24 | * [RFC 7159 The JavaScript Object Notation (JSON) Data Interchange Format](https://tools.ietf.org/html/rfc7159) 25 | * [STD 90 - RFC 8259 - The JavaScript Object Notation (JSON) Data Interchange Format, DECEMBER 2017](https://www.rfc-editor.org/info/rfc8259) 26 | 27 | ##### Architecting: 28 | 29 | * [JSON API](http://jsonapi.org/) 30 | 31 | *** 32 | 33 | ###### NOTES: 34 | 35 | JSON apis are being replaced by things like [GraphQL](http://graphql.org/) and [Falcor](http://netflix.github.io/falcor/). 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 | -------------------------------------------------------------------------------- /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, & Podcasts](../learning/news-podcasts.md)). 4 | -------------------------------------------------------------------------------- /learning/module-bundlers-loaders.md: -------------------------------------------------------------------------------- 1 | # Learn Module loaders/bundlers 2 | 3 | ##### Webpack: 4 | 5 | * [Webpack](https://webpack.js.org/guides/getting-started/) [read] 6 | * [Webpack Deep Dive](https://frontendmasters.com/courses/webpack/) [watch][$] 7 | * [Webpack Fundamentals](http://www.pluralsight.com/courses/webpack-fundamentals) [watch][$] 8 | * [Survivejs.com Webpack Book](https://survivejs.com/webpack/introduction/) [read] 9 | 10 | ##### Rollup: 11 | 12 | * [Rollup](http://rollupjs.org/guide/) [read] 13 | * [Microbundle](https://github.com/developit/microbundle) 14 | 15 | ##### Parcel 16 | 17 | * [Parcel](https://parceljs.org/getting_started.html) [read] 18 | 19 | *** 20 | 21 | ###### NOTES: 22 | 23 | It is not uncommon for developers to use a tool like Gulp for bundling JS modules. However, many of the Gulp plugins simply use Webpack or Rollup under the hood. 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 | -------------------------------------------------------------------------------- /learning/module.md: -------------------------------------------------------------------------------- 1 | # Learn Modules 2 | 3 | ##### General Learning: 4 | 5 | * [jsmodules.io](http://jsmodules.io/) 6 | * [ES6 Modules in Depth](https://ponyfoo.com/articles/es6-modules-in-depth) [read] 7 | * [Exploring JS - Modules](http://exploringjs.com/es6/ch_modules.html#ch_modules) [read] 8 | 9 | ##### References/Docs: 10 | 11 | * [MDN - export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) 12 | * [MDN - import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 13 | 14 | *** 15 | 16 | ###### NOTES: 17 | 18 | We are still waiting on [wide support](https://caniuse.com/#feat=es6-module) in browsers for loading modules. Until then you can have a look at, ["ES Module Loader Polyfill"](https://github.com/ModuleLoader/es-module-loader), ["JavaScript Loader Standard"](https://whatwg.github.io/loader/), and [ECMAScript modules in browsers](https://jakearchibald.com/2017/es-modules-in-browsers/). 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/multi-device-dev.md: -------------------------------------------------------------------------------- 1 | # Learn Multi-Device 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 website or web application can run on a wide range of computers, laptops, tablets and phones, as well as a handful of new devices (watches, thermostats, fridges, etc.). How you determine what devices you'll support and how you will develop to support those devices is called, "multi-device development strategy". Below, I list the most common multi-device development strategies. 8 | 9 | * Build a [responsive (RWD)](https://en.wikipedia.org/wiki/Responsive_web_design) web site/app for all devices. 10 | * Build an [adaptive/progressively](https://en.wikipedia.org/wiki/Adaptive_web_design) enhanced web site/app for all devices. 11 | * Build a website, web app, native app, or hybrid-native app for each individual device or a grouping of devices. 12 | * Attempt to retrofit something you have already built using bits and parts from strategies 1, 2 or 3. 13 | 14 | ##### General Learning: 15 | 16 | * [A book Apart Pack - Responsive Web Design](https://abookapart.com/collections/responsive-design) [read][$] 17 | * [A Book Apart Pack - Design For Any Device](https://abookapart.com/collections/design-for-any-device) [read][$] 18 | * [Adaptive Web Design](https://www.amazon.com/gp/product/0134216148?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=defa398e66db76e7edbb8ddfa28caa1e&camp=1789&creative=9325) [read][$] 19 | * [Designing with Progressive Enhancement](https://www.amazon.com/Designing-Progressive-Enhancement-Building-Everyone/dp/0321658884/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=bdac6f12a3d24fe694468aa8145001eb&camp=1789&creative=9325) [read][$] 20 | * [Mobile Web Development](https://www.udacity.com/course/mobile-web-development--cs256) [watch] 21 | * [CSS Grids and Flexbox for Responsive Web Design](https://frontendmasters.com/courses/css-grids-flexbox/) [watch][$] 22 | * [Responsive HTML Email Design](https://frontendmasters.com/courses/responsive-email/) [watch][$] 23 | * [Responsive Images](https://www.udacity.com/course/responsive-images--ud882) [watch] 24 | * [Responsive Typography](https://www.pluralsight.com/courses/responsive-typography) [watch][$] 25 | * [Responsive Web Design Fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) [watch] 26 | 27 | ##### Responsive Newsletters, News, & Podcasts: 28 | 29 | * [Responsive Web Design Podcast](https://responsivewebdesign.com/podcast/) 30 | * [Responsive Web Design Newsletter](https://responsivewebdesign.com/newsletter/) 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/news-podcasts.md: -------------------------------------------------------------------------------- 1 | # Front-End Newsletters, News Sites, & Podcasts 2 | 3 | ##### General Front-End Newsletters, News, & Podcasts: 4 | 5 | * [The Big Web Show](http://5by5.tv/bigwebshow) 6 | * [Dev Tips](https://umaar.com/dev-tips/) 7 | * [Front End Happy Hour](http://frontendhappyhour.com/) 8 | * [Front-End Front](http://frontendfront.com/) 9 | * [FrontEnd Focus](http://frontendfocus.co/) 10 | * [The Frontside Podcast](https://frontsidethepodcast.simplecast.fm/) 11 | * [Mobile Web Weekly](http://mobilewebweekly.co/) 12 | * [Non Breaking Space Show](http://nonbreakingspace.tv) 13 | * [Web Platform News Weekly](https://webplatform.news/) 14 | * [ShopTalk Show](http://shoptalkshow.com/) 15 | * [UX Design Newsletter](http://uxdesignnewsletter.com/) 16 | * [The Versioning Show by SitePoint](https://www.sitepoint.com/versioning-show/) 17 | * [The Web Ahead](http://thewebahead.net/) 18 | * [Web Development Reading List](https://wdrl.info/) 19 | * [The Web Platform Podcast](http://thewebplatform.libsyn.com/) 20 | * [Web Tools Weekly](http://webtoolsweekly.com/) 21 | * [Fresh Brewed Frontend](https://freshbrewed.co/frontend/) 22 | * [Pony Foo Weekly](https://ponyfoo.com/weekly) 23 | 24 | ##### HTML/CSS Newsletters: 25 | 26 | * [Accessibility Weekly](http://a11yweekly.com/) 27 | * [CSS Weekly](http://css-weekly.com/archives/) 28 | * [CSS-Tricks](https://css-tricks.com/newsletters/) 29 | * [csslayout.news](http://csslayout.news/) 30 | 31 | ##### JavaScript Newsletters, News, & Podcasts: 32 | 33 | * [Awesome JavaScript Newsletter](https://js.libhunt.com/) 34 | * [Echo JS](http://www.echojs.com/) 35 | * [ECMAScript Daily](https://ecmascript-daily.github.io/) 36 | * [ES.next News](http://esnextnews.com/) 37 | * [JavaScript Jabber](https://devchat.tv/js-jabber/) 38 | * [JavaScript Kicks](http://javascriptkicks.com/) 39 | * [JavaScript Live](https://jslive.com/) 40 | * [JavaScript Weekly](http://javascriptweekly.com/) 41 | * [JavaScript.com](https://www.javascript.com/news) 42 | * [JSter](http://jster.net/blog) 43 | * [React Status](https://react.statuscode.com/) 44 | 45 | ##### Graphic and Animation Newsletters and Podcasts 46 | 47 | * [Motion and Meaning](http://motionandmeaning.io/) 48 | * [Responsive Images Community Group Newsletter](https://responsiveimages.org/#newsletter) 49 | * [SVG Immersion Podcast](http://svgimmersion.com/) 50 | * [Web Animation Weekly](http://webanimationweekly.com/) 51 | 52 | *** 53 | 54 | ###### NOTES: 55 | 56 | Need more Newsletters, News Sites, & Podcasts look at [Awesome Newsletter](https://github.com/vredniy/awesome-newsletters). 57 | -------------------------------------------------------------------------------- /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, IBM AIX, IBM System z and IBM i. Its work is hosted and supported by the Node.js Foundation, a collaborative project at Linux Foundation. 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. 6 | 7 | >— [Wikipedia](https://en.wikipedia.org/wiki/Node.js) 8 | 9 | ##### General Learning: 10 | 11 | * [The Art of Node](https://github.com/maxogden/art-of-node#the-art-of-node) [read] 12 | * [Introduction to Node.js](http://www.pluralsight.com/courses/node-intro) [watch][$] 13 | * [Introduction to Node.js from Evented Mind](https://www.eventedmind.com/classes/introduction-to-node-js-4c0326de) [watch] 14 | * [io.js and Node.js Next: Getting Started](http://www.pluralsight.com/courses/running-node-applications-io-js) [watch][$] 15 | * [Learning Node: Moving to the Server-Side](https://www.amazon.com/Learning-Node-Server-Side-Shelley-Powers/dp/1491943122/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=264ce29eb0775f4e8ccb7db892539555&camp=1789&creative=9325) [read][$] 16 | * [Learn You The Node.js](https://github.com/workshopper/learnyounode) [self-guided workshops] 17 | * [Node.js Basics](http://teamtreehouse.com/library/nodejs-basics) [watch][$] 18 | * [Node.js in Practice](https://www.amazon.com/Node-js-Practice-Alex-R-Young/dp/1617290939/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=e202c01e97ebad79157fab3b59723e94&camp=1789&creative=9325) [read][$] 19 | * [Real-time Web with Node.js](https://www.codeschool.com/courses/real-time-web-with-node-js) [watch] 20 | * [REST & GraphQL API Design in Node.js, v2 (using Express & MongoDB)](https://frontendmasters.com/courses/api-node-rest-graphql/) [watch][$] 21 | * [Learn Node](https://learnnode.com/) [watch][$] 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 | -------------------------------------------------------------------------------- /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 | * [Creating HTML5 Offline Web Applications](http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html) [read] 8 | * [Everything You Need to Know to Create Offline-First Web Apps](https://github.com/pazguille/offline-first) [read] 9 | * [Offline First](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf) [read] 10 | * [offlinefirst.org](http://offlinefirst.org) [read] 11 | * [The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/) [read] 12 | * [Offline Quickstart](https://developers.google.com/web/ilt/pwa/offline-quickstart)[read] 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 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Package_manager) 6 | 7 | ##### General Learning: 8 | 9 | * [An introduction to how JavaScript package managers work](https://medium.freecodecamp.com/javascript-package-managers-101-9afd926add0a#.hu6knvct3) 10 | * [The Mystical & Magical SemVer Ranges Used By npm & Bower](http://developer.telerik.com/featured/mystical-magical-semver-ranges-used-npm-bower/) [read] 11 | * [Package Managers: An Introductory Guide For The Uninitiated Front-End Developer](http://codylindley.com/techpro/2013_04_12__package-managers-an-introducto/) [read] 12 | * [npm docs](https://docs.npmjs.com/) 13 | * [yarn docs](https://yarnpkg.com/en/docs/) 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 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Web_performance_optimization) 6 | 7 | ##### General Learning: 8 | 9 | * [Browser Rendering Optimization](https://www.udacity.com/course/browser-rendering-optimization--ud860) [watch] 10 | * [Even Faster Web Sites: Performance Best Practices for Web Developers](https://www.amazon.com/Even-Faster-Web-Sites-Performance/dp/0596522304?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=4fe6a82bbf727209ba337ecaa0e516bc&camp=1789&creative=9325) [read][$] 11 | * [High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=e93ab3ea06b7e3e93ee0d868249d0e3f&camp=1789&creative=9325) [read][$] 12 | * [JavaScript Performance Rocks](http://javascriptrocks.com/) [read][$] 13 | * [PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules) [read] 14 | * [perf-tooling.today](http://www.perf-tooling.today/) [read] 15 | * [Performance Calendar](http://calendar.perfplanet.com) [read] 16 | * [perf.rocks](http://perf.rocks/) [read] 17 | * [Using WebPageTest](https://www.amazon.com/Using-WebPageTest-Rick-Viscomi/dp/1491902590/ref=sr_1_1?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=91a76d5d4b4f47cf4e0d1392cc9cea30&camp=1789&creative=9325) [read][$] 18 | * [Web Performance Daybook Volume 2](https://www.amazon.com/Web-Performance-Daybook-Techniques-Optimizing/dp/1449332919/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=59e32c394c2377bb17af1d801b924d1d&camp=1789&creative=9325) [read][$] 19 | * [Website Performance](https://frontendmasters.com/courses/web-performance/) [watch][$] 20 | * [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) [watch] 21 | * [Front-End Performance Checklist 2018 [PDF, Apple Pages]](https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/) [read] 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 | -------------------------------------------------------------------------------- /learning/pwa.md: -------------------------------------------------------------------------------- 1 | # Learn Progressive Web App 2 | 3 | >Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience. 4 | > 5 | >In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "Progressive Web Apps" to describe apps taking advantage of new features supported by modern browsers, including Service Workers and Web App Manifests, that let users upgrade web apps to be first-class applications in their native OS. 6 | > 7 | >According to Google Developers, these characteristics are: 8 | > 9 | > * Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. 10 | > * Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge. 11 | > * Connectivity independent - Service workers allow work offline, or on low quality networks. 12 | > * App-like - Feel like an app to the user with app-style interactions and navigation. 13 | > * Fresh - Always up-to-date thanks to the service worker update process. 14 | > * Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. 15 | > * Discoverable - Are identifiable as “applications” thanks to W3C manifests[6] and service worker registration scope allowing search engines to find them. 16 | > * Re-engageable - Make re-engagement easy through features like push notifications. 17 | > * Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. 18 | > * Linkable - Easily shared via a URL and do not require complex installation. 19 | > 20 | >— [Wikipedia](https://en.wikipedia.org/wiki/Progressive_web_app) 21 | 22 | * [A Beginner’s Guide To Progressive Web Apps](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/) [read] 23 | * [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) [read] 24 | * [Getting Started with Progressive Web Apps](https://www.pluralsight.com/courses/web-apps-progressive-getting-started) [watch][$] 25 | * [Building a Progressive Web App](https://www.lynda.com/CSS-tutorials/Building-Progressive-Web-App/518052-2.html) [watch][$] 26 | * [Intro to Progressive Web Apps by Google](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811) [watch] 27 | * [Native Apps are Doomed](https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0#.rfw9hdym6) [read] 28 | * [Why Native Apps Really are Doomed: Native Apps are Doomed pt 2](https://medium.com/javascript-scene/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9#.qjrm13yj3) [read] 29 | * [Your First Progressive Web App](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/) [read] 30 | * [Progressive Web Applications and Offline](https://frontendmasters.com/courses/progressive-web-apps/) [watch][$] 31 | -------------------------------------------------------------------------------- /learning/react.md: -------------------------------------------------------------------------------- 1 | # Learn React 2 | 3 | ##### Learning React: 4 | 5 | * [The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) [read] 6 | * [React.js Introduction For People Who Know Just Enough jQuery To Get By](http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/) [read] 7 | * [13 things you need to know about React](http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/) [read] 8 | * [Tutorial: Intro To React](https://facebook.github.io/react/tutorial/tutorial.html) [read] 9 | * [ReactJS For Stupid People](http://blog.andrewray.me/reactjs-for-stupid-people/) [read] 10 | * [Complete Intro to React, v3 (feat. Redux, Router & Flow)](https://frontendmasters.com/courses/react/) [watch][$] 11 | * [React 🎄](https://react.holiday/) [read] 12 | * [React Enlightenment](https://www.reactenlightenment.com/) [read] 13 | * [REACT JS TUTORIAL #1 - Reactjs Javascript Introduction & Workspace Setup](https://www.youtube.com/watch?v=MhkGQAoc7bc&t=6s) [watch] 14 | * [React For Beginners](https://ReactForBeginners.com) [watch][$] 15 | 16 | ##### Mastering React: 17 | 18 | * [Build Your First Production Quality React App](https://egghead.io/courses/build-your-first-production-quality-react-app) [watch][$] 19 | * [Advanced React Component Patterns](https://egghead.io/courses/advanced-react-component-patterns) [watch][$] 20 | * [React Patterns](https://reactpatterns.com/) [read] 21 | * [8 Key React Component Decisions](https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594) [read] 22 | * [React + Mobx codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.](https://github.com/gothinkster/react-mobx-realworld-example-app) [code] 23 | * [An Introduction to React Router v4 and its Philosophy Toward Routing](https://medium.freecodecamp.org/react-router-v4-philosophy-and-introduction-730fd4fff9bc) [read] 24 | 25 | *** 26 | 27 | ###### NOTES: 28 | 29 | Once you have a good handle on React move on to learning a more robust state management solution like [MobX](https://mobx.js.org/). If you are an experienced developer with Functional Programming knowledge look at [Redux](https://redux.js.org/). If you need help understanding the role of state management beyond React's `setState` watch, "[Advanced State Management in React (feat. Redux and MobX)](https://frontendmasters.com/courses/react-state/)". 30 | 31 | Note below the trends in the React Ecosystem (from npm registry) as you move past React and learn tools that work alongside React. 32 | 33 | ![](../images/reacteco.png "https://www.npmjs.com/npm/the-state-of-javascript-frameworks-2017-part-2-the-react-ecosystem") 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 | -------------------------------------------------------------------------------- /learning/security.md: -------------------------------------------------------------------------------- 1 | # Learn Web/Browser/App Security 2 | 3 | * [Browser Security Handbook](https://code.google.com/p/browsersec/wiki/Main) [read] 4 | * [Frontend Security](https://mikewest.org/2013/09/frontend-security-frontendconf-2013) [watch] 5 | * [Hacksplaining](https://www.hacksplaining.com/) [read] 6 | * [HTML5 Security Cheatsheet](https://html5sec.org) [read] 7 | * [HTTP Security Best Practice](https://httpsecurityreport.com/best_practice.html) [read] 8 | * [Identity and Data Security for Web Development: Best Practices](https://www.amazon.com/Identity-Data-Security-Web-Development/dp/1491937017?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=f5f2aaa4d5f944a3ccc316a16e3673f4&camp=1789&creative=9325) [read]($) 9 | * [Security for Web Developers: Using JavaScript, HTML, and CSS](https://www.amazon.com/Security-Web-Developers-Using-JavaScript/dp/1491928646/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=df49be399d7d1a12acebe5a85637a7a8&camp=1789&creative=9325) [read][$] 10 | * [The Basics of Web Application Security](http://martinfowler.com/articles/web-security-basics.html) [read] 11 | * [The Internet: Encryption & Public Keys](https://www.youtube.com/watch?v=ZghMPWGXexs&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&index=6) [watch] 12 | * [The Internet: Cybersecurity & Crime](https://www.youtube.com/watch?v=AuYNXgO_f3Y&list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&index=7) [watch] 13 | * [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/) [read][$] 14 | * [Web Security Basics](https://github.com/vasanthk/web-security-basics) [read] 15 | * [Web security](https://developer.mozilla.org/en-US/docs/Web/Security) [read] 16 | * [Web Security](https://frontendmasters.com/courses/web-security/) [watch][$] 17 | * [Full Stack for Front End Engineers](https://frontendmasters.com/courses/full-stack/) [watch][$] 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /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 learning resources mentioned (articles, books, videos, screencasts etc..) will include both free 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 online video training. 8 | 9 | Below are a few video learning outlets (tech focused) I generally recommend pulling content from: 10 | 11 | * [codecademy.com](https://codecademy.com) 12 | * [codeschool.com](https://www.codeschool.com/) 13 | * [egghead.io](https://egghead.io/) 14 | * [eventedmind.com](https://www.eventedmind.com/) 15 | * [Frontend Masters](https://frontendmasters.com/) 16 | * [Freecodecamp](https://www.freecodecamp.com) 17 | * [Khan Academy](https://www.khanacademy.org/computing/computer-programming) 18 | * [laracasts.com](https://laracasts.com/) 19 | * [lynda.com](http://www.lynda.com/) [careful, quality varies] 20 | * [mijingo.com](https://mijingo.com/) 21 | * [pluralsight.com](http://www.pluralsight.com/) [careful, quality varies] 22 | * [Treehouse](https://teamtreehouse.com/) 23 | * [tutsplus.com](https://tutsplus.com/courses) 24 | * [Udacity](https://www.udacity.com/courses/web-development) [careful, quality varies] 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Search_engine_optimization) 6 | 7 | how-does-seo-work.png 8 | 9 | ![](../images/how-does-seo-work.png "https://visual.ly/community/infographic/computers/how-does-seo-work") 10 | 11 | Image source: https://visual.ly/community/infographic/computers/how-does-seo-work 12 | 13 | ##### General Learning: 14 | 15 | * [Google Search Engine Optimization Starter Guide](http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf) [read] 16 | * [Modern SEO](https://frontendmasters.com/courses/modern-seo/) [watch][$] 17 | * [SEO Fundamentals From David Booth](http://www.lynda.com/Analytics-tutorials/SEO-Fundamentals/187858-2.html) [watch][$] 18 | * [SEO Fundamentals From Paul Wilson](http://www.pluralsight.com/courses/seo-fundamentals) [watch][$] 19 | * [SEO Tutorial For Beginners in 2016](http://www.hobo-web.co.uk/seo-tutorial/) [read] 20 | * [SEO for Web Designers](https://webdesign.tutsplus.com/courses/seo-for-web-designers) [watch][$] 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 | -------------------------------------------------------------------------------- /learning/state.md: -------------------------------------------------------------------------------- 1 | # Learn State Management 2 | 3 | * [State management in JavaScript](https://codeburst.io/state-management-in-javascript-15d0d98837e1) [read] 4 | * [Advanced State Management in React (feat. Redux and MobX)](https://frontendmasters.com/courses/react-state/) [watch][$] 5 | * [React js tutorial - How Redux Works](https://www.youtube.com/watch?v=1w-oQ-i1XB8&list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt) [watch] 6 | * [MobX + React is AWESOME](https://www.youtube.com/watch?v=_q50BXqkAfI&t=10s) [watch] 7 | * [Vuex](https://vuex.vuejs.org/en/intro.html) 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 | -------------------------------------------------------------------------------- /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.), produce static HTML files from static text/data + templates that are intended to be sent from a server to the client statically without a dynamic nature. 4 | 5 | ##### General Learning: 6 | 7 | * [JAMstack](https://jamstack.org/) [read] 8 | * [Static Site Generators](http://www.oreilly.com/web-platform/free/static-site-generators.csp) [read] 9 | * [Working with Static Sites - Bringing the Power of Simplicity to Modern Sites](https://www.amazon.com/Working-Static-Sites-Bringing-Simplicity/dp/1491960949) [read][$] 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 | -------------------------------------------------------------------------------- /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 | * [ES6 Template Literals, the Handlebars killer?](https://www.keithcirkel.co.uk/es6-template-literals/) [read] 6 | * [Getting Started with nunjucks](http://mozilla.github.io/nunjucks/getting-started.html) [read] 7 | * [Instant Handlebars.js](https://www.amazon.com/Instant-Handlebars-js-Gabriel-Manricks/dp/1783282657/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=ff063868c79e956eb5cbc43571dc7065&camp=1789&creative=9325) [read][$] 8 | * [JavaScript Templating with Handlebars](http://www.pluralsight.com/courses/handlebars-javascript-templating) [watch][$] 9 | * [Learn Handlebars in 10 Minutes or Less](http://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes/) [read] 10 | * [Lodash Templates](https://lodash.com/docs/4.17.2#template) [docs] 11 | 12 | *** 13 | 14 | ###### NOTES: 15 | 16 | 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). Additionally, templating as of late has been replaced by things like [JSX](https://facebook.github.io/jsx/), [a template element](http://aurelia.io/docs/templating/basics), or [HTML strings](https://angular.io/docs/ts/latest/guide/template-syntax.html#). 17 | 18 | *** 19 | 20 | ###### ADVICE: 21 | 22 | If I was not using React & JSX I'd first reach for JavaScript ["Templates strings"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings) and when that was lacking move to [nunjucks](http://mozilla.github.io/nunjucks/getting-started.html). -------------------------------------------------------------------------------- /learning/test.md: -------------------------------------------------------------------------------- 1 | # Learn 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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Unit_testing) 6 | > 7 | > **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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/Functional_testing) 10 | > 11 | > **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. 12 | 13 | >— [Wikipedia](https://en.wikipedia.org/wiki/Integration_testing) 14 | 15 | ##### General Learning: 16 | 17 | * [Front-End First: Testing and Prototyping JavaScript Apps](http://www.pluralsight.com/courses/testing-and-prototyping-javascript-apps) [watch][$] 18 | * [Let's Code: Test-Driven JavaScript](http://www.letscodejavascript.com/) [watch][$] 19 | * [JavaScript Testing](https://www.udacity.com/course/javascript-testing--ud549) [watch] 20 | * [JavaScript Testing Recipes](http://jstesting.jcoglan.com/) [read][$] 21 | * [Testable JavaScript](https://www.amazon.com/gp/product/1449323391?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=a27df21b09e3eff9ad8033a5c959e7f0&camp=1789&creative=9325) [read][$] 22 | * [Test-Driving JavaScript Applications: Rapid, Confident, Maintainable Code](https://www.amazon.com/Test-Driving-JavaScript-Applications-Confident-Maintainable/dp/1680501747?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=c97c9c87e634569328a335cba0b0c15f&camp=1789&creative=9325)[read][$] 23 | * [Test-Driven JavaScript Development](https://www.amazon.com/dp/0321683919/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=f707aa5243bf6bac68bda05d1e6369e8&camp=1789&creative=9325) [read][$] 24 | * [The Way of the Web Tester: A Beginner's Guide to Automating Tests](https://www.amazon.com/Way-Web-Tester-Beginners-Automating/dp/1680501836/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=3e2c87950e0350d64c9d9862ed2ef524&camp=1789&creative=9325) [read][$] 25 | * [Testing and Modular Front-End](https://frontendmasters.com/courses/testing-modular-front-end/) [watch][$] 26 | * [Testing JavaScript Applications (feat. React and Redux)](https://frontendmasters.com/courses/testing-javascript/) [watch][$] 27 | * [Learn Javascript Unit Testing With Mocha, Chai and Sinon](https://www.udemy.com/learn-javascript-unit-testing-with-mocha-chai-and-sinon/) [watch][$] 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 | -------------------------------------------------------------------------------- /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). 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/User_interface_design) 6 | > 7 | > **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. 8 | 9 | >— [Wikipedia](https://en.wikipedia.org/wiki/Design_pattern) 10 | > 11 | > **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. 12 | 13 | >— [Wikipedia](https://en.wikipedia.org/wiki/User_experience_design) 14 | > 15 | > **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. 16 | 17 | >— [Wikipedia](https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction) 18 | 19 | Minimally I'd suggest reading the following canonical texts on the matter so one can support and potential build usable user interfaces. 20 | 21 | * [About Face: The Essentials of Interaction Design](https://www.amazon.com/About-Face-Essentials-Interaction-Design-ebook/dp/B00MFPZ9UY/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=c723c84ad4d246cb7f1c4a737c5f38a4&camp=1789&creative=9325) [read][$] 22 | * [Design for Hackers: Reverse Engineering Beauty](https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty/dp/1119998956/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=2a52f0968de21c03f069d857b9d92b37&camp=1789&creative=9325) [read][$] 23 | * [Design for Non-Designers](https://www.youtube.com/watch?v=ZbrzdMaumNk&feature=youtu.be) [watch] 24 | * [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=4539707bb145c676472472aab25eaa56&camp=1789&creative=9325) [read][$] 25 | * [Designing Web Interfaces: Principles and Patterns for Rich Interactions](https://www.amazon.com/Designing-Web-Interfaces-Principles-Interactions-ebook/dp/B0026OR33U/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=03fb59f4a4345732fae9ecdfaa5076ae&camp=1789&creative=9325) [read][$] 26 | * [Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability](https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/?&_encoding=UTF8&tag=frontend-handbook-20&linkCode=ur2&linkId=8b0b0771a9985e4e030ef1fe29cf6409&camp=1789&creative=9325) [read][$] 27 | 28 | 29 | -------------------------------------------------------------------------------- /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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Version_control) 6 | 7 | The most common solution used for [version control](https://en.wikipedia.org/wiki/Version_control) today is [Git](https://git-scm.com/). Learn it! 8 | 9 | ##### General Learning: 10 | 11 | * [codeschool.com](https://try.github.io/levels/1/challenges/1) [interact] 12 | * [Getting Git Right](https://www.atlassian.com/git/) [read] 13 | * [Git Fundamentals](http://www.pluralsight.com/courses/git-fundamentals) [watch][$] 14 | * [learn Enough Git](https://www.learnenough.com/git-tutorial) [read] 15 | * [Ry's Git Tutorial](https://www.amazon.com/Rys-Git-Tutorial-Ryan-Hodson-ebook/dp/B00QFIA5OC) [read] 16 | 17 | ##### Mastering: 18 | 19 | * [Advanced Git Tutorials](https://www.atlassian.com/git/tutorials/advanced-overview/) [read] 20 | * [Pro Git](http://git-scm.com/book/en/v2) [read] 21 | * [Learn Git Branching](http://learngitbranching.js.org/) [interact] 22 | 23 | ##### References/Docs: 24 | 25 | * [https://git-scm.com/doc](https://git-scm.com/docs) 26 | * [git-cheatsheet](https://gist.github.com/eashish93/3eca6a90fef1ea6e586b7ec211ff72a5) 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 | -------------------------------------------------------------------------------- /learning/web-api.md: -------------------------------------------------------------------------------- 1 | # Learn Web/Browser APIs 2 | 3 | ![](../images/web-api.png "http://www.evolutionoftheweb.com/") 4 | 5 | Image source: http://www.evolutionoftheweb.com/ 6 | 7 | The BOM (Browser Object Model) and the DOM (Document Object Model) are not the only browser APIs 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 APIs have been called HTML5 APIs which confuses their own specifics/standardize with the actual HTML5 specification specifying the HTML5 markup language). Note that web or browser APIs do include device APIs (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. 8 | 9 | You should be aware of and learn, where appropriate, web/browser APIs. A good tool to use to familiarize oneself with all of these APIs would be to investigate the [HTML5test.com results for the 5 most current browsers](https://html5test.com/compare/browser/index.html). 10 | 11 | MDN has a great deal of information about web/browser APIs. 12 | 13 | * [MDN Web API Reference](https://developer.mozilla.org/en-US/docs/Web/Reference/API) 14 | * [MDN Web APIs Interface Reference - All Interfaces, Arranged Alphabetically](https://developer.mozilla.org/en-US/docs/Web/API) 15 | * [MDN WebAPI - Lists Device Access APIs and Other APIs Useful for Applications](https://developer.mozilla.org/en-US/docs/WebAPI) 16 | 17 | Keep in mind that not every API is specified by the W3C or WHATWG. 18 | 19 | In addition to MDN, you might find the following resources helpful for learning about all the web/browser API's: 20 | 21 | * [The HTML 5 JavaScript API Index](http://html5index.org/) 22 | * [HTML5 Overview](http://html5-overview.net/current) 23 | * [platform.html5.org](https://platform.html5.org/) 24 | 25 | 26 | -------------------------------------------------------------------------------- /myIntro.md: -------------------------------------------------------------------------------- 1 | --- 2 | opengraphtitle: Front-End Developer Handbook 2018 - Learn the entire JavaScript, CSS and HTML development practice! 3 | opengraphdescription: A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering. 4 | --- 5 | # AVAILABLE NOW: [Front-End Developer Handbook 2019](https://frontendmasters.com/books/front-end-handbook/2019/) 6 | 7 | *** 8 | 9 | ## Front-End Developer Handbook 2018 10 | 11 | ### Written by [Cody Lindley](http://codylindley.com/) 12 | 13 | *Sponsored by [Frontend Masters](https://frontendmasters.com/), advancing your skills with in-depth, modern front-end engineering courses* 14 | 15 | ![Front End Handbook 2018 Cover](https://frontendmasters.com/books/front-end-handbook/2018/cover.jpg) 16 | 17 | 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 in 2018. 18 | 19 | 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, CTOs, instructors, and head hunters to gain insights into the practice of front-end development. 20 | 21 | 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. 22 | 23 | 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. 24 | 25 | The intention is to release an update to the content yearly. 26 | 27 | The handbook is divided into the following three parts: 28 | 29 | Part I. The Front-End Practice 30 | --- 31 | Part one broadly describes the practice of front-end engineering. 32 | 33 | Part II: Learning Front-End Development 34 | --- 35 | Part two identifies self-directed and direct resources for learning to become a front-end developer. 36 | 37 | Part III: Front-End Development Tools 38 | --- 39 | Part three briefly explains and identifies tools of the trade. 40 | 41 | **Contribute content, suggestions, and fixes on github**: 42 | 43 | * [https://github.com/FrontendMasters/front-end-handbook-2018](https://github.com/FrontendMasters/front-end-handbook-2018) 44 | 45 | *** 46 | 47 | Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-handbook-2018", 3 | "version": "1.0.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "git+https://github.com/FrontendMasters/front-end-handbook-2018.git" 7 | }, 8 | "scripts": { 9 | "start": "honkit serve", 10 | "build": "honkit build" 11 | }, 12 | "devDependencies": { 13 | "gitbook-plugin-canonical-link": "^2.0.3", 14 | "gitbook-plugin-open-graph": "^0.0.1", 15 | "gitbook-plugin-scripts": "^1.0.2", 16 | "honkit": "^5.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /practice/fd-dev-for.md: -------------------------------------------------------------------------------- 1 | # Front-End Developers Develop For... 2 | 3 | A front-end developer crafts HTML, CSS, and JS that typically runs on the [web platform](http://tess.oconnor.cx/2009/05/what-the-web-platform-is) 4 | (e.g. a web browser) delivered from one of the following operating systems (aka OSs): 5 | 6 | * Android 7 | * Chromium 8 | * iOS 9 | * OS X 10 | * Ubuntu (or some flavor of Linux) 11 | * Windows Phone 12 | * Windows 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](https://en.wikipedia.org/wiki/Internet_of_things) (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.) 23 | 24 | ![](../images/growth-iot.jpg "https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/") 25 | 26 | Image source: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/ 27 | 28 | Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios: 29 | 30 | * A web browser (examples: [Chrome, IE, Safari, Firefox](http://outdatedbrowser.com/en)). 31 | * A [headless browser](https://en.wikipedia.org/wiki/Headless_browser) (examples: [puppeteer](https://pptr.dev/)). 32 | * A [WebView](http://developer.telerik.com/featured/what-is-a-webview/)/browser tab (think iframe) embedded within a native application as a runtime with bridge to native APIs. 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 APIs. 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 | #### We hope you enjoyed this guide! [Upgrade Your Front-End Developer Skills Today with Frontend Masters](https://frontendmasters.com/?utm_source=website&utm_medium=website&utm_campaign=handbook-2018) ❤️ -------------------------------------------------------------------------------- /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 | * [angularjobs.com](http://angularjobs.com/) 6 | * [authenticjobs.com](https://authenticjobs.com/#category=4) 7 | * [careers.stackoverflow.com](http://careers.stackoverflow.com/jobs?searchTerm=front-end) 8 | * [css-tricks.com/jobs](https://css-tricks.com/jobs/) 9 | * [codepen.io/jobs/](http://codepen.io/jobs/) 10 | * [frontenddeveloperjob.com](http://frontenddeveloperjob.com/) 11 | * [glassdoor.com](http://www.glassdoor.com/Job/front-end-developer-jobs-SRCH_KO0,19.htm?jobType=all) 12 | * [jobs.emberjs.com](http://jobs.emberjs.com/) 13 | * [jobs.github.com](https://jobs.github.com/) 14 | * [weworkremotely.com](https://weworkremotely.com/) 15 | 16 | *** 17 | 18 | ###### NOTES: 19 | 20 | Looking for a remote front-end Job, check out these [Remote-friendly companies](https://github.com/jessicard/remote-jobs) 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /practice/making-fd.md: -------------------------------------------------------------------------------- 1 | # How Front-End Developers Are Made 2 | 3 | ![](../images/makingFED.png "https://github.com/kamranahmedse/developer-roadmap") 4 | 5 | Image source: https://github.com/kamranahmedse/developer-roadmap 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. From my perspective, most of the people working on the front-end today generally seem to be self taught from the ground up or cross over into the front-end from design or traditional computer science fields. 8 | 9 | If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below (Part two, ["Learning Front-End Dev"](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/learning/self-direct-learning.html), dives into more details on learning resources). 10 | 11 | 1. Learn, roughly, how the web works. Make sure you know the "what" and "where" of Domains, DNS, URLs, HTTP, networks, browsers, servers/hosting, JSON, data APIs, HTML, CSS, DOM, and JavaScript. Don't dive deep on anything, just understand the parts and loosely how they fit together. Focus on the high level outlines for front-end architectures. Start with simple [web pages](https://github.com/h5bp/html5-boilerplate/blob/master/dist/index.html) and briefly study [front-end applications (aka SPAs)](http://developer.telerik.com/featured/front-end-driven-applications-new-approach-applications/) 12 | 2. Learn HTML 13 | 3. Learn CSS 14 | 4. [Learn JavaScript](https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL) 15 | 5. Learn DOM 16 | 6. Learn JSON and data APIs 17 | 7. Learn the fundamentals of user interface design (i.e. UI patterns, interaction design, user experience design, and usability). 18 | 8. Learn CLI/command line 19 | 9. Learn the practice of software engineering (i.e., Application design/architecture, templates, Git, testing, monitoring, automating, code quality, development methodologies). 20 | 10. Get opinionated and customize your tool box with whatever makes sense to your brain (e.g. Webpack, React, and Mobx). 21 | 11. Learn Node.js 22 | 23 | A short word of advice on learning. [Learn the actual underlying technologies, before learning abstractions.](https://youtu.be/QjKH1J77gjI?list=PL055Epbe6d5bQubu5EWf_kUNA3ef_qbmL) 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. 24 | 25 | Lately a lot of non-accredited, expensive, front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are typically teacher directed courses, that follow a more traditional style of learning, from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.). Keep in mind, if you are considering an expensive training program, 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 and learn 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, a hundred dollars a month for screencasting memberships, and a burning desire for knowledge. 26 | 27 | For example if you want to get going today, consuming one or more of the following self-directed resources below can work: 28 | 29 | * [Complete Intro to Web Development](https://frontendmasters.com/courses/web-development-v3/) [watch] 30 | * [A Beginner's Guide to Front-End Programming](https://www.springboard.com/learning-paths/beginners-guide-front-end-programming/learn/) [read & watch][free to $] 31 | * [Become a Front-End Web Developer](https://www.lynda.com/learning-paths/Web/become-a-front-end-web-developer) [watch][$] 32 | * [Front-End Curriculum](https://gist.github.com/stevekinney/03027e71aac341af14a2) [read] 33 | * [freeCodeCamp](http://freecodecamp.com/) [interact] 34 | * [So, You Want to be a Front-End Engineer](https://www.youtube.com/watch?v=Lsg84NtJbmI) [watch] 35 | * [Front End Web Development Career Kickstart](http://www.pluralsight.com/courses/front-end-web-development-career-kickstart) [watch][$] 36 | * [Front End Web Development: Get Started](http://www.pluralsight.com/courses/front-end-web-development-get-started) [watch][$] 37 | * [Front-End Web Development Quick Start With HTML5, CSS, and JavaScript](http://www.pluralsight.com/courses/front-end-web-app-html5-javascript-css) [watch][$] 38 | * [Learn Front End Web Development](https://teamtreehouse.com/tracks/front-end-web-development) [watch][$] 39 | * [Front-End Web Developer Nanodegree](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd001) [watch][$] 40 | * [Full Stack for Front End Engineers](https://frontendmasters.com/courses/fullstack-v2/) [$] 41 | 42 | If you are not a self motivated individual and need a more structured approach you should consider a [directed learning path](https://frontendmasters.com/learn/). 43 | 44 | When getting your start, you should fear most things that conceal complexity. Abstractions 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. 45 | 46 | The remaining parts of this book will point the reader to potential resources that could be used to learn front-end development and the tools used when practicing front-end development. It is assumed that on this journey you are not only learning, but also doing as you learn and investigate tools. Some suggest only doing to learn. 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. 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 | -------------------------------------------------------------------------------- /practice/myth.md: -------------------------------------------------------------------------------- 1 | # Generalist/Full-Stack 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](https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap), and [back-end development](https://github.com/kamranahmedse/developer-roadmap#-back-end-roadmap). Any person who can fill one or more of these 4 roles at a professional level is an extremely rare commodity. 8 | 9 | Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles (i.e. Visual Design, Interaction Design/IA, Front-end Dev, Back-end Dev). Those who claim to operate at an expert level at one or more of these roles are exceptionally rare and more than likely mythical. 10 | 11 | However, given that JavaScript has infiltrated all layers of a technology stack (e.g. React, node.js, express, couchDB, gulp.js etc...) finding a full-stack JS developer who can code the front-end and back-end is becoming less mythical. Typically, these full stack developers only deal with JavaScript. A developer who can code the front-end, back-end, API, and database isn't as absurd as it once was (excluding visual design, interaction design, and CSS). Still mythical in my opinion, but not as uncommon as it once was. Thus, I wouldn't recommend a developer set out to become a "full stack" developer. In rare situations it can work. But, as a general concept for building a career as a Front-end Developer, I'd focus on front-end technologies. 12 | 13 | *** 14 | 15 | ###### NOTES: 16 | 17 | The term "Full-Stack" developer has come to take on several meanings. So many, that not one meaning is clear when the term is used. Just consider the results from the two surveys shown below. These results would lead one to believe that the majority of developers are full-stack developers. But, in my almost 20 years of experience, this is anything but the case. 18 | 19 | 20 | ![](../images/fullstack1.png "https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz") 21 | 22 | Image source: https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz 23 | 24 | ![](../images/fullstack2.png "https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types") 25 | 26 | Image source: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /practice/salaries.md: -------------------------------------------------------------------------------- 1 | # Front-End Salaries 2 | 3 | The national average in the U.S for a mid-level front-end developer is somewhere between [$75k](https://www.glassdoor.com/Salaries/front-end-developer-salary-SRCH_KO0,19.htm) and [100k](https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6). 4 | 5 | ![](../images/salary.png "https://www.payscale.com/research/US/Job=Front_End_Developer_%2F_Engineer/Salary") 6 | 7 | Image source: https://www.payscale.com/research/US/Job=Front_End_Developer_%2F_Engineer/Salary 8 | 9 | ![](../images/salary3.png "https://www.indeed.com/salaries/Front-End-Developer-Salaries") 10 | 11 | Image source: https://www.indeed.com/salaries/Front-End-Developer-Salaries 12 | 13 | Of course when you first start expect to enter the field at around 43k depending upon location and portfolio. 14 | 15 | *** 16 | 17 | ###### NOTES: 18 | 19 | A lead/senior front-end developer/engineer can potentially 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 or examine the salary ranges on [Stack Overflow Jobs](https://stackoverflow.com/jobs?q=front-end&sort=y)). 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /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 know-how, a front-end developer could be skilled in one or more 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 APIs (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 | -------------------------------------------------------------------------------- /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 from web technologies. 4 | 5 | A bare bones development team for building ***professional*** web sites or software for the web platform will typically, 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 mentioned above is being directed by a project lead or 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 | * SEO Strategists 19 | * DevOps Engineers 20 | * Code Quality Engineers 21 | * Performance Engineers 22 | * API Developers 23 | * Database Administrators 24 | * QA Engineers / Testers 25 | 26 | *** 27 | 28 | ###### NOTES: 29 | 30 | A small trend seems to be occurring where a, "full-stack developer" takes on the responsibilities of both a front-end and back-end developer. 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 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** 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 | **Front-End Engineer (aka JavaScript Developer or Full-stack JavaScript Developer)** 14 | 15 | The job title given to a developer who comes from a computer science, engineering, background and is using these skills to work with front-end technologies. This role typically requires a computer science degree and years of software development experience. 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 has years of experience building front-end applications). 16 | 17 | *** 18 | 19 | **CSS/HTML Developer** 20 | 21 | The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and Application know how. 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 developer skills or front-end engineering 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 "Accessibility" 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 | ###### NOTES: 68 | 69 | If you come across the "Full Stack" or the generic "Web Developer" terms in job titles these words may be used 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. 70 | 71 | #### We hope you enjoyed this guide! [Upgrade Your Front-End Developer Skills Today with Frontend Masters](https://frontendmasters.com/?utm_source=website&utm_medium=website&utm_campaign=handbook-2018) ❤️ -------------------------------------------------------------------------------- /styles/ebook.css: -------------------------------------------------------------------------------- 1 | cite{ 2 | margin-top: -30px; 3 | font-size:10px; 4 | text-align: center; 5 | color: #666; 6 | } 7 | 8 | .page-inner ul, .page-inner ol { 9 | margin-bottom:15px !important; 10 | } 11 | 12 | small{ 13 | font-size:10px; 14 | } -------------------------------------------------------------------------------- /styles/website.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | cite{ 7 | margin-top: -30px; 8 | font-size:10px; 9 | text-align: center; 10 | color: #666; 11 | } 12 | 13 | .page-inner ul, .page-inner ol { 14 | margin-bottom:15px !important; 15 | } 16 | 17 | small{ 18 | font-size:10px; 19 | } 20 | 21 | .FmCta { 22 | align-items: flex-start; 23 | background: #000; 24 | color: #fff; 25 | display: flex; 26 | gap: 15px; 27 | line-height: 2; 28 | padding: 10px 15px; 29 | } 30 | 31 | .FmCtaLogo svg { 32 | fill: #c02d28; 33 | vertical-align: middle; 34 | width: 25px; 35 | } 36 | 37 | .FmCtaLogo:hover svg { 38 | fill: #dd625e; 39 | } 40 | 41 | .FmCtaText { 42 | display: flex; 43 | flex: 1; 44 | gap: 15px; 45 | } 46 | 47 | .FmCtaText a { 48 | color: #ccc; 49 | font-weight: bold; 50 | } 51 | 52 | .FmCtaText a:hover { 53 | color: #fff; 54 | } 55 | 56 | .FmCtaClose { 57 | background: none; 58 | border: none; 59 | color: #888; 60 | font-size: 25px; 61 | height: 30px; 62 | line-height: 1; 63 | outline: none; 64 | padding-bottom: 5px; 65 | width: 30px; 66 | } 67 | 68 | .FmCtaClose:hover { 69 | color: #fff; 70 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tools.md: -------------------------------------------------------------------------------- 1 | # Part III: Front-end Developer 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 | ![](images/spectrum.png "https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0") 10 | 11 | Image source: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0 12 | -------------------------------------------------------------------------------- /tools/accessibility.md: -------------------------------------------------------------------------------- 1 | # Accessibility Tools 2 | 3 | ## Guides 4 | * [A11Y Style Guide](http://a11y-style-guide.com/style-guide/) 5 | * [Accessibility Guidelines Checklist](http://accessibility.voxmedia.com) 6 | * [Interactive WCAG 2.0](http://code.viget.com/interactive-wcag/) 7 | * [18F Accessibility Guide](https://pages.18f.gov/accessibility/checklist/) 8 | 9 | ## Site Scanners 10 | * [aXe Browser Extension](http://www.deque.com/products/axe/) 11 | * [Chrome Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb) 12 | * [Tenon Accessibility Tool](https://tenon.io) 13 | * [WAVE Accessibility Tool](http://wave.webaim.org) 14 | 15 | ## Color Contrast Testers 16 | * [Colorable](http://jxnblk.com/colorable/demos/text/) 17 | * [Colorable Matrix](http://jxnblk.com/colorable/demos/matrix/) 18 | * [Color Safe](http://colorsafe.co) 19 | * [Color Ratio](http://leaverou.github.io/contrast-ratio/) 20 | 21 | ## Low-Vision Simulators 22 | * [SEE](https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn) (Chrome) 23 | * [Spectrum](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb) (Chrome) 24 | * [NoCoffee](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl) (Chrome) 25 | 26 | ## Screen Readers 27 | * [VoiceOver](http://www.apple.com/accessibility/) (Mac) 28 | * [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Win) 29 | * [NVDA](https://www.nvaccess.org) (Win) 30 | * [Window-Eyes](https://www.aisquared.com/products/window-eyes/) (Win) 31 | * [ChromeVox](http://www.chromevox.com) (Chrome extension) 32 | * [Basic screen reader commands](https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/) 33 | 34 | ## Readability Testers 35 | * [Expresso App](http://www.expresso-app.org) 36 | * [Hemingway App](http://www.hemingwayapp.com) 37 | * [Grammarly](https://www.grammarly.com) 38 | * [Readability Score](https://readability-score.com/text/) 39 | * [MS Office](https://support.office.com/en-us/article/Test-your-document-s-readability-0adc0e9a-b3fb-4bde-85f4-c9e88926c6aa) 40 | 41 | ## Articles 42 | * [Getting Started with ARIA](http://a11yproject.com/posts/getting-started-aria/) 43 | * [Reframing Accessibility for the Web](http://alistapart.com/article/reframing-accessibility-for-the-web) 44 | * [An Alphabet of Accessibility Issues](https://the-pastry-box-project.net/anne-gibson/2014-July-31) 45 | * [Practical ARIA Examples](http://heydonworks.com/practical_aria_examples/) 46 | * [MDN Accessibility Guide](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) 47 | * [Enable accessibility panel in Chrome dev tools](https://umaar.com/dev-tips/101-accessibility-inspection/) 48 | -------------------------------------------------------------------------------- /tools/animation.md: -------------------------------------------------------------------------------- 1 | # Animation Tools 2 | 3 | ##### CSS and JavaScript Utilities: 4 | 5 | * [Animate Plus](https://github.com/bendc/animateplus) 6 | * [Animate](https://github.com/daneden/animate.css) 7 | * [Anime.js](http://animejs.com/) 8 | * [Animista.net](http://animista.net/) 9 | * [Dynamics.js](http://dynamicsjs.com/) 10 | * [GreenSock-JS](http://greensock.com/) 11 | * [Kute.js](http://thednp.github.io/kute.js/) 12 | * [Magic](https://github.com/miniMAC/magic) 13 | * [Micron.js](https://webkul.github.io/micron/) 14 | * [Motion](http://mojs.io/) 15 | * [TweenJS](https://github.com/CreateJS/TweenJS) 16 | * [Popmotion](https://popmotion.io) 17 | * [Velocity.js](http://julian.com/research/velocity/) 18 | 19 | ##### Polyfills/Shims: 20 | 21 | * [web-animations-js](https://github.com/web-animations/web-animations-js) 22 | 23 | ##### Animation References: 24 | 25 | * [canianimate.com](http://canianimate.com/) 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 | -------------------------------------------------------------------------------- /tools/apps.md: -------------------------------------------------------------------------------- 1 | # App Frameworks (Desktop, Mobile, Tablet, etc.) Tools 2 | 3 | ##### Front-End App Frameworks: [^1] 4 | 5 | * [AngularJS](https://github.com/angular/angular.js) (i.e Angular 1.x.x) + [Batarang](https://github.com/angular/angularjs-batarang) 6 | * [Angular](https://github.com/angular/angular) (i.e. Angular 2.0.0 +) + [angular-cli](https://github.com/angular/angular-cli) 7 | * [Aurelia](http://aurelia.io/) + [Aurelia CLI](https://github.com/aurelia/cli) 8 | * [Ember](http://emberjs.com/) + [embercli](https://ember-cli.com/) + [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en) 9 | * [Polymer](https://www.polymer-project.org/1.0/) 10 | * [React](http://facebook.github.io/react/) + [create-react-app](https://github.com/facebookincubator/create-react-app) + [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 11 | * [Vue.js](http://vuejs.org/) + [vue-cli](https://github.com/vuejs/vue-cli) & [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) 12 | * [Riot](http://riotjs.com/) 13 | 14 | ##### Native Hybrid Mobile WebView (i.e., Browser Engine Driven) Frameworks: 15 | 16 | These solutions typically use [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), or a custom WebView as a bridge to native APIs. 17 | 18 | * [ionic](http://ionicframework.com/) 19 | * [onsen.io](http://onsen.io/) 20 | 21 | ##### Native Hybrid Mobile Development Webview (i.e., Browser Engine Driven) Environments/Platforms/Tools: 22 | 23 | These solutions typically use [Cordova](https://cordova.apache.org/), [crosswalk](https://crosswalk-project.org/), or a custom WebView as a bridge to native APIs. 24 | 25 | * [Adobe PhoneGap](http://phonegap.com/) [$] 26 | * [cocoon.io](https://cocoon.io) [free to $] 27 | * [ionic hub](http://ionic.io/) [free to $] 28 | * [kony](http://www.kony.com/products/mobility-platform) [$] 29 | * [Monaca](https://monaca.io/) [$] 30 | 31 | ##### Native Desktop WebView (i.e., Browser Engine Driven) App Frameworks: 32 | 33 | * [Electron](http://electron.atom.io/) 34 | * [NW.js](https://github.com/nwjs/nw.js) 35 | 36 | ##### Native Mobile App Frameworks (Aka JavaScript Native Apps) 37 | 38 | These solutions use a JS engine at runtime to interpret JS and bridge that to native APIs. No browser engine or WebView is used. The UI is constructed from native UI components. 39 | 40 | * [Flutter](https://flutter.io/) 41 | * [NativeScript](https://www.nativescript.org/) 42 | * [React Native](https://facebook.github.io/react-native/) 43 | * [tabris.js](https://tabrisjs.com/) [free to $] 44 | * [trigger.io](https://trigger.io/how-it-works/) [$] 45 | * [weex](https://weex.apache.org/) 46 | 47 | ##### References & demo apps: 48 | 49 | * [todomvc.com](http://todomvc.com/) 50 | * [RealWorld example apps](https://github.com/gothinkster/realworld) [code] 51 | * [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire) 52 | * [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) 53 | 54 | ##### Performance: 55 | 56 | * [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) 57 | * [Front-End Performance Checklist 2018](https://www.dropbox.com/s/8h9lo8ee65oo9y1/front-end-performance-checklist-2018.pdf?dl=0) 58 | 59 | *** 60 | 61 | ###### ADVICE: 62 | 63 | [^1] If you are new to front-end/JavaScript application development I'd start with [Vue.js](http://vuejs.org/). Then I'd work my way to [React](http://facebook.github.io/react/). Then I'd look at [Angular 2+](https://angular.io/), [Ember](http://emberjs.com/), or [Aurelia](http://aurelia.io/). 64 | 65 | If you are building a simple website that has minimal interactions with data (i.e. mostly a static content web site), you should avoid a front-end framework. A lot of work can be done with a task runner like [Gulp and jQuery](https://github.com/vigetlabs/blendid), while avoiding the unnecessary complexity of learning and using an app framework tool. 66 | 67 | Want something smaller than React, consider [Preact](https://preactjs.com/). Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped). 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 | -------------------------------------------------------------------------------- /tools/baas.md: -------------------------------------------------------------------------------- 1 | # Back-end/API tools 2 | 3 | ##### Data/back-end as a service aka BAAS: 4 | 5 | * [Back&](https://www.backand.com/) [free to $] 6 | * [Backendless](https://backendless.com) 7 | * [Firebase](https://www.firebase.com/index.html) [free to $] 8 | * [Pusher](https://pusher.com/) [free to $] 9 | * [restdb.io](https://restdb.io/) [free to $] 10 | * [MongoDB Stitch](https://www.mongodb.com/cloud/stitch) 11 | 12 | ##### Data/back-end 13 | 14 | * [GraphQL](http://graphql.org/) 15 | * [Apollo](http://www.apollodata.com/) 16 | * [Relay](https://facebook.github.io/relay/) 17 | * [Falcor](https://netflix.github.io/falcor/) 18 | * [RxDB](https://github.com/pubkey/rxdb) 19 | 20 | ##### User Management as a Service: 21 | 22 | * [Auth0](https://auth0.com) [$] 23 | * [AuthRocket](https://authrocket.com) 24 | * [Okta](https://developer.okta.com/) 25 | 26 | ##### Search 27 | 28 | * [Algolia](https://www.algolia.com) 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 | -------------------------------------------------------------------------------- /tools/browsedocs.md: -------------------------------------------------------------------------------- 1 | # Doc/API Browsing Tools 2 | 3 | Tools to browse common developer documents and developer API references. 4 | 5 | * [Dash](https://kapeli.com/dash) [OS X, iOS][$] 6 | * [DevDocs](http://devdocs.io/) 7 | * [Velocity](https://velocity.silverlakesoftware.com/) [Windows][$] 8 | * [Zeal](https://zealdocs.org/) [Windows, Linux] 9 | 10 | Cheatsheets: 11 | 12 | * [devhints.io](https://devhints.io) 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 | -------------------------------------------------------------------------------- /tools/browser.md: -------------------------------------------------------------------------------- 1 | # Browser Tools 2 | 3 | ##### JS Utilities to fix Browsers: 4 | 5 | * [History.js](https://github.com/browserstate/history.js) 6 | * [html2canvas](https://github.com/niklasvh/html2canvas) 7 | * [Platform.js](https://github.com/bestiejs/platform.js) 8 | * [URI.js](http://medialize.github.io/URI.js/) 9 | 10 | ##### General Reference Tools to Determine If X Browser Supports X: 11 | 12 | * [Browser support for broken/missing images](http://codepen.io/bartveneman/full/qzCte/) 13 | * [Browserscope](http://www.browserscope.org/) 14 | * [caniuse.com](http://caniuse.com/) 15 | * [Firefox Platform Status - Implementation & standardization roadmap for web platform features](https://platform-status.mozilla.org/) 16 | * [HTML5 Please](http://html5please.com/) 17 | * [HTML5 Test](https://html5test.com/) 18 | * [iwanttouse.com](http://www.iwanttouse.com/) 19 | * [Platform Status](https://dev.modern.ie/platform/status/) 20 | * [web-platform-tests dashboard](https://wpt.fyi/) 21 | * [whatwebcando.today](https://whatwebcando.today/) 22 | 23 | ##### Browser Development/Debug Tools: 24 | 25 | * [Chrome Developer Tools (aka DevTools)](https://developers.google.com/web/tools/?hl=en) 26 | * [Per-Panel Documentation](https://developers.google.com/web/tools/chrome-devtools/#docs) 27 | * [Command Line API Reference](https://developers.google.com/web/tools/javascript/command-line/command-line-reference?hl=en) 28 | * [Keyboard & UI Shortcuts Reference](https://developers.google.com/web/tools/iterate/inspect-styles/shortcuts) 29 | * [Settings](https://developer.chrome.com/devtools/docs/settings) 30 | * [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) 31 | * [IE Developer tools (aka F12 tools)](https://dev.modern.ie/platform/documentation/f12-devtools-guide/) 32 | * [Safari Web Inspector](https://developer.apple.com/safari/tools/) 33 | * [Vorlon.js](http://vorlonjs.com/) 34 | 35 | ##### JavaScript Utilities to Determine If X Browser Supports X: 36 | 37 | * [Feature.js](http://featurejs.com/) 38 | * [Modernizr](https://modernizr.com/) 39 | 40 | ##### Broad Browser Polyfills/Shims: 41 | 42 | * [console-polyfill](https://github.com/paulmillr/console-polyfill) 43 | * [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) 44 | * [fetch](https://github.com/github/fetch) 45 | * [socket.io](http://socket.io/) 46 | * [SockJS](https://github.com/sockjs/sockjs-client) 47 | * [webcomponents.js](https://github.com/WebComponents/webcomponentsjs) 48 | * [webshim](https://afarkas.github.io/webshim/demos/) 49 | 50 | ##### Hosted Testing/Automation for Browsers: 51 | 52 | * [Browserling](https://www.browserling.com/) [free to $] 53 | * [BrowserStack](https://www.browserstack.com) [$] 54 | * [CrossBrowserTesting.com](http://crossbrowsertesting.com/) [$] 55 | * [Ghost Inspector](https://ghostinspector.com) [free to $] 56 | * [Nightcloud.io](http://nightcloud.io/) 57 | * [Sauce Labs](https://saucelabs.com/) [$] 58 | 59 | ##### Headless Browsers: 60 | 61 | * [PhantomJS](http://phantomjs.org/) 62 | * [PhantomCSS](https://github.com/Huddle/PhantomCSS) 63 | * [slimerjs](http://slimerjs.org/) 64 | * [Zombie.js](http://zombie.js.org/) 65 | * [Headless Chromium](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md) 66 | 67 | ##### Browser Automation: 68 | 69 | Used for functional testing and monkey testing. 70 | 71 | * [CasperJS](http://casperjs.org/) 72 | * [Nightmare](https://github.com/segmentio/nightmare) 73 | * [TestCafe](https://github.com/DevExpress/testcafe) 74 | 75 | ##### Browser Hacks: 76 | 77 | * [browserhacks.com](http://browserhacks.com/) 78 | 79 | ##### Browser Syncing Tools: 80 | 81 | * [Browsersync](http://www.browsersync.io/) 82 | 83 | ##### Browser List: 84 | 85 | Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env. 86 | 87 | * [Browserslist](https://github.com/ai/browserslist) 88 | * [http://browserl.ist/](http://browserl.ist/?q=%3E+2%25) 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/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 | * [amCharts](http://www.amcharts.com/) [free to $] 11 | * [AnyChart](http://www.anychart.com/) [Non-commercial free to $] 12 | * [C3.js](http://c3js.org/) 13 | * [Chartist-jsj](https://github.com/gionkunz/chartist-js) 14 | * [Chart.js](http://www.chartjs.org/) 15 | * [Epoch](http://epochjs.github.io/epoch/) 16 | * [FusionCharts](http://www.fusioncharts.com/) [$] 17 | * [Google Charts](https://developers.google.com/chart/interactive/docs/) 18 | * [Highcharts](http://www.highcharts.com/) [Non-commercial free to $] 19 | * [ZingChart](http://www.zingchart.com/) [free to $] 20 | 21 | ##### Services (i.e. hosted data visualization services for embedding and sharing): 22 | 23 | * [ChartBlocks](http://www.chartblocks.com/) [free to $] 24 | * [Datawrapper](https://datawrapper.de/) 25 | * [infogr.am](https://infogr.am) [free to $] 26 | * [plotly](https://plot.ly/) [free to $] 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 | -------------------------------------------------------------------------------- /tools/cms.md: -------------------------------------------------------------------------------- 1 | # Content Management Hosted/API Tools 2 | 3 | ##### Headless CMS Tools: 4 | 5 | * [Contentful](https://www.contentful.com/) [$] 6 | * [prismic.io](https://prismic.io/) [free to $] 7 | * [Headless](https://www.headless.rest/) 8 | 9 | ##### Self-hosted Headless CMS Tools: 10 | 11 | * [Cockpit](https://getcockpit.com/) 12 | 13 | ##### Hosted CMS: 14 | 15 | * [LightCMS](https://www.lightcms.com) [$] 16 | * [Surreal CMS](http://www.surrealcms.com/) [$] 17 | 18 | ##### Static CMS Tools: 19 | 20 | * [webhook.com](http://www.webhook.com/) 21 | * [Dato CMS](https://www.datocms.com/) 22 | * [siteleaf](https://www.siteleaf.com/) 23 | * [forestry.io](https://forestry.io/) 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/code-editor.md: -------------------------------------------------------------------------------- 1 | # Code Editing Tools 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. 4 | 5 | >— [Wikipedia](https://en.wikipedia.org/wiki/Source_code_editor) 6 | 7 | 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. 8 | 9 | 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. 10 | 11 | However, I do strongly believe, minimally, a code editor should have the following qualities (by default or by way of plugins): 12 | 13 | 1. Good documentation on how to use the editor 14 | 2. Report (i.e., hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript. 15 | 3. Offer syntax highlighting for HTML, CSS, and JavaScript. 16 | 4. Offer code completion for HTML, CSS, and JavaScript. 17 | 5. Be customizable by way of a plug-in architecture 18 | 6. Have available a large repository of third-party/community plug-ins that can be used to customize the editor to your liking 19 | 7. Be small, simple, and not coupled to the code (i.e., not required to edit the code) 20 | 21 | ##### Code Editors: [^1] 22 | 23 | * [Atom](https://atom.io/) 24 | * [Sublime Text](http://www.sublimetext.com/) [$] 25 | * [WebStorm](https://www.jetbrains.com/webstorm/whatsnew/) [$] 26 | * [Visual Studio Code](https://code.visualstudio.com/) 27 | 28 | ##### Online Code Editors: 29 | 30 | * [PaizaCloud](https://paiza.cloud) [free to $] 31 | * [AWS Cloud9](https://aws.amazon.com/cloud9/) [$] 32 | * [Codeanywhere](https://codeanywhere.com) [free to $] 33 | 34 | ##### Shareable & Runnable Code Editors: 35 | 36 | Used to share limited amounts of immediately runnable code. Not a true code editor but a tool that can be used to share small amounts of immediately runnable code in a web browser. 37 | 38 | * [CodePen](http://codepen.io/) [free to $] 39 | * [jsbin.com](http://jsbin.com/) [free to $] 40 | * [jsfiddle.net](http://jsfiddle.net/) 41 | * [StackBliz](https://stackblitz.com/) 42 | * [codeSandbox](https://codesandbox.io/) 43 | * [glitch](https://glitch.com/) 44 | 45 | *** 46 | 47 | ###### ADVICE: 48 | 49 | [^1] I recommending using [Visual Studio Code](https://code.visualstudio.com/) because of the quality of the tool and the continuous improvements made to the editor that likely won't stop or slow due to the fact that Microsoft is behind the tool. It is widely used: 50 | 51 | ![](../images/vscode.png "https://stateofjs.com/2017/other-tools/") 52 | 53 | Image source: https://stateofjs.com/2017/other-tools/ 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 | -------------------------------------------------------------------------------- /tools/comm.md: -------------------------------------------------------------------------------- 1 | # Collaboration & Communication Tools 2 | 3 | * [Slack](https://slack.com/) & [screenhero](https://screenhero.com/) [free to $] 4 | * [appear.in](https://appear.in/) 5 | * [Mattermost](https://mattermost.org/) [free to $] 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/css.md: -------------------------------------------------------------------------------- 1 | # CSS Tools 2 | 3 | ##### CSS [Utilities](https://css-tricks.com/need-css-utility-library/): 4 | 5 | * [Basscss](http://basscss.com/) 6 | * [Skeleton](http://getskeleton.com/) 7 | * [Shed](http://tedconf.github.io/shed-css/) 8 | * [Tailwind CSS](https://tailwindcss.com/) 9 | * [Tachyons](https://github.com/tachyons-css/tachyons/) 10 | 11 | ##### CSS Frameworks (utilities + UI): 12 | 13 | * [Base](http://getbase.org/) 14 | * [Bulma](http://bulma.io/) 15 | * [Bootstrap 4](https://v4-alpha.getbootstrap.com/) 16 | * [Concise](http://concisecss.com/) 17 | * [Foundation](http://foundation.zurb.com/) 18 | * [Material Design Lite (MDL)](http://www.getmdl.io/index.html) 19 | * [Metro UI](http://metroui.org.ua/) 20 | * [Mini.css](https://minicss.org/) 21 | * [Mobi.css](http://getmobicss.com/) 22 | * [Picnic](http://picnicss.com/) 23 | * [Pure.css](http://purecss.io/) 24 | * [Semantic UI](http://semantic-ui.com/) 25 | * [Shoelace](https://shoelace.style/) 26 | * [Spectre.css](https://picturepan2.github.io/spectre/) 27 | 28 | ##### Mobile Only CSS Frameworks: 29 | 30 | * [Ratchet](http://goratchet.com/) 31 | 32 | ##### CSS Reset: 33 | 34 | > 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. 35 | 36 | >— [cssreset.com](http://cssreset.com/what-is-a-css-reset/) 37 | 38 | * [Eric Meyer's “Reset CSS” 2.0](http://meyerweb.com/eric/tools/css/reset/) 39 | * [Normalize](https://necolas.github.io/normalize.css/) 40 | * [sanitize.css](https://github.com/jonathantneal/sanitize.css) 41 | 42 | ##### Transpiling: 43 | 44 | * [pleeease.io](http://pleeease.io/) 45 | * [PostCSS](https://github.com/postcss/postcss) & [cssnext](http://cssnext.io/) 46 | * [rework](https://github.com/reworkcss/rework) & [myth](http://www.myth.io/) 47 | 48 | ##### References: 49 | 50 | * [CSS Cursors](http://csscursor.info/) 51 | * [css3test.com](http://css3test.com/) 52 | * [css3clickchart.com](http://css3clickchart.com/) 53 | * [cssreference.io](http://cssreference.io/) 54 | * [CSS Indexes - A listing of every term defined by CSS specs](https://drafts.csswg.org/indexes/) 55 | * [css4-selectors.com](http://css4-selectors.com/) 56 | * [css4 Rocks](http://css4.rocks/) 57 | * [CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE](http://csstriggers.com/) 58 | * [CSS Tricks Almanac](https://css-tricks.com/almanac/) 59 | * [cssvalues.com](http://cssvalues.com/) 60 | * [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) 61 | * [CSS Cheat Sheet](https://adam-marsden.co.uk/css-cheat-sheet/) 62 | 63 | ##### Linting/Hinting: 64 | 65 | * [CSS Lint](http://csslint.net/) 66 | * [stylelint](http://stylelint.io/) 67 | 68 | ##### Code Formatter/Beautifier: 69 | 70 | * [CSScomb](https://github.com/csscomb/csscomb.js) 71 | * [CSSfmt](https://github.com/morishitter/cssfmt) 72 | 73 | ##### Optimizer: 74 | 75 | * [clear-css](https://github.com/jakubpawlowicz/clean-css) 76 | * [cssnano](http://cssnano.co/) 77 | * [CSSO](http://css.github.io/csso/) 78 | * [purgecss](https://github.com/FullHuman/purgecss) 79 | 80 | ##### Online Creation/Generation/Experimentation Tools: 81 | 82 | * [CSS Arrow Please](http://cssarrowplease.com/) 83 | * [CSS Matic](http://www.cssmatic.com/) 84 | * [Enjoy CSS](http://enjoycss.com/) 85 | * [Flexbox Playground](https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground) 86 | * [flexplorer](http://bennettfeely.com/flexplorer/) 87 | * [patternify.com](http://patternify.com) 88 | * [patternizer.com](http://patternizer.com/) 89 | * [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) 90 | 91 | ##### Architecting CSS: 92 | 93 | * [Atomic Design](http://atomicdesign.bradfrost.com/) [read] 94 | * [BEM](http://getbem.com/introduction/) 95 | * [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) 96 | * [OOCSS](http://oocss.org/) [read] 97 | * [SMACSS](https://smacss.com/) [read][$] 98 | * [Scalable Modular Architecture for CSS (SMACSS)](https://frontendmasters.com/courses/smacss/) [watch][$] 99 | * [SUIT CSS](http://suitcss.github.io) 100 | * [rscss](http://rscss.io/) 101 | 102 | ##### Authoring/Architecting Conventions: 103 | 104 | * [CSS code guide](http://codeguide.co/#css) [read] 105 | * [css-architecture](https://github.com/jareware/css-architecture) [read] 106 | * [cssguidelin.es](http://cssguidelin.es/) [read] 107 | * [Idiomatic CSS](https://github.com/necolas/idiomatic-css) [read] 108 | * [MaintainableCSS](http://maintainablecss.com/) [read] 109 | * [Standards for Developing Flexible, Durable, and Sustainable HTML and CSS](http://mdo.github.io/code-guide/) [read] 110 | * [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css) [read] 111 | 112 | ##### Style Guide Resources: 113 | 114 | * [Frontify](https://frontify.com/) [$] 115 | * [SC5 STYLE GUIDE GENERATOR](http://styleguide.sc5.io/) 116 | * [styleguide-generators](https://github.com/davidhund/styleguide-generators) 117 | * [Catalog](https://docs.catalog.style/) 118 | 119 | ##### Trending CSS Repositories on GitHub This Month: 120 | 121 | [https://github.com/trending?l=css&since=monthly](https://github.com/trending?l=css&since=monthly) 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 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /tools/db.md: -------------------------------------------------------------------------------- 1 | # Front-End Data Storage Tools (i.e. Data storage solution in the client) 2 | 3 | * [AlaSQL](http://alasql.org/) 4 | * [Dexie.js](http://www.dexie.org/) 5 | * [ImmortalDB](https://github.com/gruns/ImmortalDB) 6 | * [LocalForage](https://localforage.github.io/localForage/) 7 | * [LokiJS](http://lokijs.org/#/) 8 | * [Lovefield](https://google.github.io/lovefield) 9 | * [lowdb](https://github.com/typicode/lowdb) 10 | * [Pouchdb](http://pouchdb.com/) 11 | * [NeDB](https://github.com/louischatriot/nedb) 12 | * [RxDB](https://pubkey.github.io/rxdb/install.html) 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/deploy.md: -------------------------------------------------------------------------------- 1 | # Deployment Tools 2 | 3 | * [Bamboo](https://www.atlassian.com/software/bamboo/) [$] 4 | * [Buddy](https://buddy.works/) [free to $] 5 | * [CircleCI](https://circleci.com/) [free to $] 6 | * [Codeship](https://codeship.com/) [free to $] 7 | * [Deploybot](https://deploybot.com/) [free to $] 8 | * [Deployhq](https://www.deployhq.com/) [free to $] 9 | * [FTPLOY](http://ftploy.com/) [free to $] 10 | * [Now](https://zeit.co/now) [free to $] 11 | * [Travis CI](http://docs.travis-ci.com/) [free to $] 12 | * [Semaphore](https://semaphoreci.com/) [free to $] 13 | * [Springloops](http://www.springloops.io/) [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 | -------------------------------------------------------------------------------- /tools/dev-tools.md: -------------------------------------------------------------------------------- 1 | # GUI Development/Build Tools 2 | 3 | * [CodeKit](http://incident57.com/codekit/) 4 | * [Prepros](https://prepros.io/) 5 | * [KoalaApp](http://koala-app.com/) [free] 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 | -------------------------------------------------------------------------------- /tools/diagram.md: -------------------------------------------------------------------------------- 1 | # Diagramming Tools 2 | 3 | * [draw.io](https://www.draw.io/) [free to $] 4 | * [Cacoo](https://cacoo.com) [free to $] 5 | * [gliffy](https://www.gliffy.com/products/online/) [free to $] 6 | * [sketchboard.io](https://sketchboard.io) [$] 7 | * [coggle](https://coggle.it) [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 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /tools/dom.md: -------------------------------------------------------------------------------- 1 | # DOM Tools 2 | 3 | ##### DOM Libraries/Frameworks: 4 | 5 | * [Bliss](http://blissfuljs.com/docs.html) 6 | * [jQuery](http://jquery.com/) 7 | * [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery) 8 | * [Zepto](http://zeptojs.com/) 9 | * [cash](https://github.com/kenwheeler/cash/) 10 | * [Umbrella JS](http://umbrellajs.com/) 11 | 12 | ##### DOM Utilities: 13 | 14 | * [Keypress](http://dmauro.github.io/Keypress/) 15 | * [Tether](http://tether.io/docs/welcome/) 16 | * [clipboard.js](http://zenorocha.github.io/clipboard.js/) 17 | 18 | ##### DOM Event Tools: 19 | 20 | * [Keyboard Event Viewer](http://w3c.github.io/uievents/tools/key-event-viewer.html) 21 | 22 | ##### DOM Performance Tools: 23 | 24 | * [Chrome DevTools Timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) 25 | * [DOM Monster](http://mir.aculo.us/dom-monster/) 26 | 27 | ##### References: 28 | 29 | * [Events](https://html.spec.whatwg.org/#events-2) 30 | * [DOM Browser Support](http://www.webbrowsercompatibility.com/dom/desktop/) 31 | * [DOM Events Browser Support](http://www.webbrowsercompatibility.com/dom-events/desktop/) 32 | * [HTML Interfaces Browser Support](http://www.webbrowsercompatibility.com/html-interfaces/desktop/) 33 | * [MDN Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 34 | * [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window) 35 | * [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 36 | * [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events) 37 | * [MSDN Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx) 38 | 39 | ##### DOM Polyfills/Shims: 40 | 41 | * [dom-shims](https://github.com/necolas/dom-shims) 42 | * [Pointer Events Polyfill: a unified event system for the web platform](https://github.com/jquery/PEP) 43 | 44 | ##### Virtual DOM: 45 | 46 | * [jsdom](https://github.com/tmpvar/jsdom) 47 | * [virtual-dom](https://github.com/Matt-Esch/virtual-dom) 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 | -------------------------------------------------------------------------------- /tools/error.md: -------------------------------------------------------------------------------- 1 | # JavaScript Error Reporting/Monitoring 2 | 3 | * [bugsnag](https://bugsnag.com/) [$] 4 | * [errorception](https://errorception.com/) [$] 5 | * [Honeybadger](https://www.honeybadger.io) [$] 6 | * [Raygun](https://raygun.io) [$] 7 | * [Rollbar](https://rollbar.com) [free to $] 8 | * [Sentry](https://getsentry.com/welcome/) [free to $] 9 | * [TrackJS](https://trackjs.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 | 57 | -------------------------------------------------------------------------------- /tools/find-tools.md: -------------------------------------------------------------------------------- 1 | # Tools for Finding Tools 2 | 3 | * [built with](http://builtwith.com/) 4 | * [frontendtools.com](http://frontendtools.com/) 5 | * [javascripting.com](http://www.javascripting.com) 6 | * [js.coach](https://js.coach/) 7 | * [JSter](http://jster.net) 8 | * [microjs.com](http://microjs.com) 9 | * [npms](https://npms.io/) 10 | * [stackshare.io](http://stackshare.io/) 11 | * [Unheap](http://www.unheap.com/) 12 | * [bestof.js.org](https://bestof.js.org/) 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 | -------------------------------------------------------------------------------- /tools/fonts.md: -------------------------------------------------------------------------------- 1 | # Font Tools 2 | 3 | ##### Free Web Fonts: 4 | 5 | * [fonts.com](http://www.fonts.com/) [free to $] 6 | * [Google Fonts](http://fortawesome.github.io/Font-Awesome/) 7 | * [TypeKit](https://typekit.com) [free to $] 8 | 9 | ##### Icon Fonts: 10 | 11 | * [Devicons](http://vorillaz.github.io/devicons/#/main) 12 | * [Font Awesome](http://fortawesome.github.io/Font-Awesome/) 13 | * [Fontello](http://fontello.com/) 14 | * [GitHub Octicons](https://octicons.github.com/) 15 | * [ionicons](http://ionicons.com/) 16 | 17 | ##### JS Font Tools: 18 | 19 | * [FlowType.js](http://simplefocus.com/flowtype/) 20 | * [localFont](https://github.com/jaicab/localFont) 21 | * [Web Font Loader](https://github.com/typekit/webfontloader) 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/graphics.md: -------------------------------------------------------------------------------- 1 | # Graphics (e.g., SVG, canvas, webgl) Tools 2 | 3 | ##### General: 4 | 5 | * [Fabric.js](http://fabricjs.com/) 6 | * [Two.js](http://jonobr1.github.io/two.js/#introduction) 7 | 8 | ##### Canvas: 9 | 10 | * [EaselJS](https://github.com/CreateJS/EaselJS) 11 | * [Paper.js](http://paperjs.org/) 12 | 13 | ##### SVG: 14 | 15 | * [d3](http://d3js.org/) 16 | * [GraphicsJS](http://www.graphicsjs.org/) 17 | * [Raphaël](http://dmitrybaranovskiy.github.io/raphael/) 18 | * [Snap.svg](http://snapsvg.io/) 19 | * [svg.js](http://svgjs.com/) 20 | 21 | ##### WebGL: 22 | 23 | * [pixi.js](https://github.com/pixijs/pixi.js) 24 | * [three.js](http://threejs.org/) 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/hosting.md: -------------------------------------------------------------------------------- 1 | # Hosting Tools 2 | 3 | ##### General 4 | 5 | * [AWS](https://aws.amazon.com/websites/) [$] 6 | * [DigitalOcean](https://digitalocean.com) [$] 7 | * [WebFaction](https://www.webfaction.com/) [$] 8 | 9 | ##### Static 10 | 11 | * [Firebase Hosting](https://firebase.google.com/docs/hosting/) [free to $] 12 | * [netlify](https://www.netlify.com) [free to $] 13 | * [Bitballoon](https://www.bitballoon.com/) 14 | * [Surge](https://surge.sh/) [free to $] 15 | * [Forge](https://getforge.com/) [$] 16 | 17 | ##### Local Hosting Tools: 18 | 19 | * [Localname](https://localname.io) -------------------------------------------------------------------------------- /tools/html.md: -------------------------------------------------------------------------------- 1 | # HTML Tools 2 | 3 | ##### HTML Templates/Boilerplates/Starter Kits: 4 | 5 | * [dCodes](http://www.dcodes.net/2/docs/index.html) 6 | * [Email-Boilerplate](https://github.com/seanpowell/Email-Boilerplate) 7 | * [HTML5 Boilerplate](https://html5boilerplate.com/) 8 | * [HTML5 Bones](http://html5bones.com/) 9 | * [Mobile boilerplate](https://html5boilerplate.com/mobile/) 10 | 11 | ##### HTML Polyfill: 12 | 13 | * [html5shiv](https://github.com/aFarkas/html5shiv) 14 | 15 | ##### Transpiling: 16 | 17 | * [Pug](https://pugjs.org/api/getting-started.html) 18 | * [Markdown](http://daringfireball.net/projects/markdown/) 19 | 20 | ##### References: 21 | 22 | * [Element attributes](https://html.spec.whatwg.org/multipage/indices.html#attributes-3) 23 | * [Elements](https://html.spec.whatwg.org/multipage/indices.html#elements-3) 24 | * [HTML Arrows](http://htmlarrows.com/) 25 | * [HTML Entity Lookup](http://entity-lookup.leftlogic.com/) 26 | * [htmlreference.io](http://htmlreference.io/) 27 | * [HEAD - A free guide to elements](https://gethead.info/) 28 | 29 | ##### Linting/Hinting: 30 | 31 | * [HTMLHint](http://htmlhint.com/) 32 | * [html-inspector](https://github.com/philipwalton/html-inspector) 33 | 34 | ##### Optimizer: 35 | 36 | * [HTML Minifier](http://kangax.github.io/html-minifier/) 37 | 38 | ##### Online Creation/Generation/Experimentation Tools: 39 | 40 | * [tablesgenerator.com](http://www.tablesgenerator.com/) 41 | 42 | ##### Authoring Conventions: 43 | 44 | * [HTML Code Guide](http://codeguide.co/#html) 45 | * [Principles of Writing Consistent, Idiomatic HTML](https://github.com/necolas/idiomatic-html) 46 | 47 | ##### Workflow: 48 | 49 | * [Emmet](http://emmet.io/) 50 | 51 | ##### HTML Outliner: 52 | 53 | * [HTML 5 Outliner](https://gsnedders.html5.org/outliner/) 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 | -------------------------------------------------------------------------------- /tools/http.md: -------------------------------------------------------------------------------- 1 | # HTTP/Network Tools 2 | 3 | * [Charles](http://www.charlesproxy.com/) [$] 4 | * [Chrome DevTools Network Panel](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading) 5 | * [Insomnia](https://insomnia.rest/) [free - $] 6 | * [Mitmproxy](https://mitmproxy.org/) [free] 7 | * [Paw](https://paw.cloud/) [$] 8 | * [Postman](https://www.getpostman.com/) [free - $] 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 | -------------------------------------------------------------------------------- /tools/js.md: -------------------------------------------------------------------------------- 1 | # JavaScript Tools 2 | 3 | ##### JS Utilities: 4 | 5 | * [accounting.js](http://openexchangerates.github.io/accounting.js/) 6 | * [async](http://caolan.github.io/async/) 7 | * [axios](https://github.com/mzabriskie/axios) 8 | * [chance](http://chancejs.com/) 9 | * [date-fns](https://date-fns.org/) 10 | * [format.js](http://formatjs.io/) 11 | * [immutable](https://facebook.github.io/immutable-js/) 12 | * [is.js](http://arasatasaygin.github.io/is.js/) 13 | * [lodash](https://lodash.com/) 14 | * [You-Dont-Need-Lodash-Underscore](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) 15 | * [Luxon](https://moment.github.io/luxon/) 16 | * [Math.js](http://mathjs.org/) 17 | * [Moment.js](http://momentjs.com/) 18 | * [Numeral.js](http://numeraljs.com/) 19 | * [Ramda](http://ramdajs.com/) 20 | * [RxJS](http://reactivex.io/rxjs/) 21 | * [string.js](http://stringjs.com/) 22 | * [voca](https://vocajs.com/) 23 | * [wait](https://github.com/elving/wait) 24 | * [xregexp.com](http://xregexp.com/) 25 | 26 | ##### Transforming JavaScript Objects Tool: 27 | 28 | * [transform-www](https://transform.now.sh/) 29 | 30 | ##### Transpiling / Type Checking (ES* to ES*): 31 | 32 | * [Babel](https://babeljs.io/) 33 | * [TypeScript](https://www.typescriptlang.org/) 34 | * [Flow](https://flowtype.org/) 35 | 36 | ##### Code-analysis Engine: 37 | 38 | * [Tern](https://ternjs.net/) 39 | 40 | ##### Linting/Hinting & Style Linter: 41 | 42 | * [eslint](http://eslint.org/) 43 | 44 | ##### Unit Testing: 45 | 46 | * [AVA](https://github.com/avajs/ava) 47 | * [Jasmine](http://jasmine.github.io/) 48 | * [Mocha](http://mochajs.org/) 49 | * [Tape](https://github.com/substack/tape) 50 | 51 | ##### Testing Assertions for Unit Testing: 52 | 53 | * [Chai](http://chaijs.com/) 54 | * [expect.js](https://github.com/Automattic/expect.js) 55 | * [should.js](http://shouldjs.github.io/) 56 | 57 | ##### Test Spies, Stubs, and Mocks for Unit Testing: 58 | 59 | * [sinon.js](http://sinonjs.org/) 60 | * [Kakapo.js](http://devlucky.github.io/kakapo-js) 61 | 62 | ##### Code Formater/Beautifier: 63 | 64 | * [esformatter](https://github.com/millermedeiros/esformatter#esformatterformatstr-optsstring) 65 | * [js-beautify](http://jsbeautifier.org/) 66 | * [jsfmt](http://rdio.github.io/jsfmt/) 67 | * [prettier](https://github.com/jlongster/prettier) 68 | 69 | ##### Performance Testing: 70 | 71 | * [benchmark.js](http://benchmarkjs.com/) 72 | * [jsperf.com](https://jsperf.com/) 73 | 74 | ##### Visualization, Static Analysis, Complexity, Coverage Tools: 75 | 76 | * [Coveralls](https://coveralls.io/) [$] 77 | * [Esprima](http://esprima.org/) 78 | * [istanbul](https://github.com/gotwarlost/istanbul) 79 | 80 | ##### Optimizer: 81 | 82 | * [Closure Compiler](https://developers.google.com/closure/compiler/) 83 | * [UglifyJS 2](https://github.com/mishoo/UglifyJS2) 84 | * [optimize-js](https://github.com/nolanlawson/optimize-js) 85 | * [Prepack](https://prepack.io/) 86 | 87 | ##### Obfuscate: 88 | 89 | * [Javascript Obfuscator](http://www.javascriptobfuscator.com/) [free to $] 90 | * [JScrambler](https://jscrambler.com/) [$] 91 | 92 | ##### Sharable/Runnable Code Editors: 93 | 94 | * [CodeSandbox](https://codesandbox.io/) [free to $] 95 | 96 | ##### Online Regular Expression Editors/Visual Tools: 97 | 98 | * [debuggex](https://www.debuggex.com) 99 | * [regex101](https://regex101.com/) 100 | * [regexper](http://regexper.com/) 101 | * [RegExr](http://regexr.com/) 102 | * [extendsclass](https://extendsclass.com/regex-tester.html) 103 | * [regextester](https://www.regextester.com/) 104 | 105 | ##### Authoring Convention Tools: 106 | 107 | * [Airbnb's ESLint config, following our styleguide](https://www.npmjs.com/package/eslint-config-airbnb) 108 | * [Standard - ESLint Shareable Config](https://github.com/feross/eslint-config-standard) 109 | 110 | ##### Trending JS Repositories on GitHub This Month: 111 | 112 | [https://github.com/trending?l=javascript&since=monthly](https://github.com/trending?l=javascript&since=monthly) 113 | 114 | ##### Most Depended upon Packages on NPM: 115 | 116 | [https://www.npmjs.com/browse/depended](https://www.npmjs.com/browse/depended) 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 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /tools/json.md: -------------------------------------------------------------------------------- 1 | # JSON Tools 2 | 3 | ##### Online Editors: 4 | 5 | * [JSONmate](http://jsonmate.com/) 6 | * [JSON Editor Online](https://jsoneditoronline.org/) 7 | 8 | ##### Formatter & Validator: 9 | 10 | * [jsonformatter.org](http://jsonformatter.org/) 11 | * [JSON Formatter & Validator](https://jsonformatter.curiousconcept.com/) 12 | 13 | ##### Query Tools: 14 | 15 | * [DefiantJS](http://www.defiantjs.com/) 16 | * [JSON Mask](https://github.com/nemtsov/json-mask) 17 | * [ObjectPath](http://objectpath.org/) 18 | 19 | ##### Generating Mock JSON Tools: 20 | 21 | * [JSON Generator](http://www.json-generator.com/) 22 | * [Mockaroo](https://www.mockaroo.com/) [free to $] 23 | 24 | ##### Online JSON Mocking API Tools: 25 | 26 | * [FillText.com](http://www.filltext.com/) 27 | * [FakeJSON](https://fakejson.com) [free to $] 28 | * [Jam API](https://github.com/dinubs/jam-api) 29 | * [JSONPlaceholder](http://jsonplaceholder.typicode.com/) 30 | * [jsonbin.io](https://jsonbin.io) 31 | * [jsonbin.org](https://jsonbin.org/) 32 | * [mockable.io](https://www.mockable.io/) 33 | * [mockapi.io](http://www.mockapi.io/) 34 | * [Mocky](http://www.mocky.io/) 35 | * [RANDOM USER GENERATOR](https://randomuser.me/) 36 | 37 | ##### List of public JSON API's: 38 | 39 | * [A collective list of JSON APIs for use in web development](https://github.com/toddmotto/public-apis) 40 | 41 | ##### Local JSON Mocking API Tools: 42 | 43 | * [json-server](https://github.com/typicode/json-server) 44 | 45 | ##### JSON Specifications/Schemas: 46 | 47 | * [json-schema.org](http://json-schema.org/) & [jsonschema.net](http://jsonschema.net/) 48 | * [{json:api}](http://jsonapi.org/) 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 | -------------------------------------------------------------------------------- /tools/loaders.md: -------------------------------------------------------------------------------- 1 | # Module Loading/Bundling Tools 2 | 3 | * [Parcel](https://parceljs.org/) 4 | * [Rollup](http://rollupjs.org/) 5 | * [Microbundle](https://github.com/developit/microbundle) 6 | * [webpack](https://webpack.js.org/) 7 | * [http://www.webpackbin.com/](http://www.webpackbin.com/) 8 | * [Fusebox](https://fuse-box.org/) 9 | * [Browserify](http://browserify.org/) 10 | 11 | *** 12 | 13 | ###### Notes: 14 | 15 | Generally, when should I use Parcel, Webpack or Rollup? 16 | 17 | Parcel — Small to medium sized projects (<15k lines of code) 18 | 19 | Webpack — Large to enterprise sized projects. 20 | 21 | Rollup — For NPM packages. 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 | -------------------------------------------------------------------------------- /tools/offline.md: -------------------------------------------------------------------------------- 1 | # Offline Tools 2 | 3 | * [Hoodie](http://hood.ie/) 4 | * [Offline.js](http://github.hubspot.com/offline/docs/welcome/) 5 | * [PouchDB](http://pouchdb.com/) 6 | * [upup](https://www.talater.com/upup/) 7 | 8 | *** 9 | 10 | ###### NOTES: 11 | 12 | For more tools look [here](https://github.com/pazguille/offline-first#tools). 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 | -------------------------------------------------------------------------------- /tools/perf.md: -------------------------------------------------------------------------------- 1 | # Performance Tools 2 | 3 | ##### Reporting: 4 | 5 | * [bundlephobia.com](https://bundlephobia.com/) 6 | * [GTmetrix](https://gtmetrix.com/) 7 | * [sitespeed.io](https://www.sitespeed.io) 8 | * [Speed Curve](https://speedcurve.com/) [$] 9 | * [Web Page Test](http://www.webpagetest.org/) 10 | * [Sonarwhal](https://sonarwhal.com) 11 | * [Datadog](https://www.datadoghq.com) [$] 12 | * [PWMetrics](https://github.com/paulirish/pwmetrics) 13 | * [Treo](http://treo.sh) 14 | 15 | ##### JS Tools: 16 | 17 | * [imagemin](https://github.com/imagemin/imagemin) 18 | * [ImageOptim-CLI](http://jamiemason.github.io/ImageOptim-CLI/) 19 | 20 | ##### Budgeting: 21 | 22 | * [performancebudget.io](http://www.performancebudget.io/) 23 | 24 | ##### References/Docs: 25 | 26 | * [Jank Free](http://jankfree.org/) 27 | * [Performance of ES6 features relative to the ES5](https://kpdecker.github.io/six-speed/) 28 | 29 | ##### Checklist: 30 | 31 | * [The Front-End Checklist](https://frontendchecklist.io/) 32 | * [Front-End Performance Checklist 2018](https://www.dropbox.com/s/8h9lo8ee65oo9y1/front-end-performance-checklist-2018.pdf?dl=0) 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 | -------------------------------------------------------------------------------- /tools/placeholder.md: -------------------------------------------------------------------------------- 1 | # Placeholder Content Tools 2 | 3 | ## Images: 4 | * [placehold.it](http://placehold.it) 5 | * [Satyr](http://satyr.io) 6 | * [Placeimg](http://placeimg.com) 7 | * [Lorem Pixel](http://lorempixel.com) 8 | * [CSS-Tricks Image Resources](https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free/) 9 | * [LibreStock](http://librestock.com) 10 | * [Unsplash](https://unsplash.it) 11 | * [Place Beyoncé](http://placebeyonce.com) 12 | 13 | ## Device Mockups: 14 | * [placeit.net](https://placeit.net) 15 | * [mockuphone.com](http://mockuphone.com) 16 | 17 | ## Text: 18 | * [Meet the Ipsums](http://meettheipsums.com) 19 | * [catipsum.com](http://www.catipsum.com/) 20 | * [baconipsum.com](http://baconipsum.com/) ([API](http://baconipsum.com/json-api/)) 21 | 22 | ## User Data: 23 | * [uinames.com](https://uinames.com) 24 | * [randomuser.me](https://randomuser.me) 25 | -------------------------------------------------------------------------------- /tools/project-hosting.md: -------------------------------------------------------------------------------- 1 | # Project Management & Code Hosting Tools 2 | 3 | * [Assembla](https://www.assembla.com) [free to $] 4 | * [Bitbucket](https://bitbucket.org) [free to $] 5 | * [Codebase](https://www.codebasehq.com/) [$] 6 | * [Github](https://github.com/) [free to $] 7 | * [GitLab](https://about.gitlab.com/) [free to $] 8 | * [Unfuddle](https://unfuddle.com/) [$] 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/proto.md: -------------------------------------------------------------------------------- 1 | # Prototyping & Wireframing Tools 2 | 3 | ##### Creating: 4 | 5 | * [Axure](http://www.axure.com/) [$] 6 | * [Balsamiq Mockups](https://balsamiq.com) [$] 7 | * [Justinmind](http://www.justinmind.com/) [$] 8 | * [Moqups](https://moqups.com/) [$] 9 | * [proto.io](https://proto.io/) [$] 10 | * [UXPin](http://www.uxpin.com/) [free to $] 11 | * [Figma](https://www.figma.com/) [free to $] 12 | * [Framer](https://framer.com/) [$] 13 | 14 | ##### Collaboration / Presenting: 15 | 16 | * [InVision](http://www.invisionapp.com/) [free to $] 17 | * [Conceptboard](https://conceptboard.com/) [free to $] 18 | * [myBalsamiq](https://balsamiq.cloud/) [$] 19 | * [Marvel](https://marvelapp.com/) [free to $] 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 | -------------------------------------------------------------------------------- /tools/pwa.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App Tools: 2 | 3 | * [lighthouse](https://developers.google.com/web/tools/lighthouse/) 4 | * [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist) 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/repo.md: -------------------------------------------------------------------------------- 1 | # Module/Package Repository Tools 2 | 3 | * [NPM](https://www.npmjs.com/) 4 | * [yarn](https://yarnpkg.com/) 5 | * [PNPM](https://pnpm.js.org/) 6 | 7 | *** 8 | 9 | ###### NOTES: 10 | 11 | Keep an eye on [turbo](https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403). 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/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 | ##### Security Scanners/Evaluators/Testers: 9 | 10 | * [Netsparker](https://www.netsparker.com) 11 | * [Websecurify](http://www.websecurify.com/) 12 | * [OWASP ZAP](https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project) 13 | 14 | ##### References: 15 | 16 | * [HTML5 Security Cheatsheet](https://html5sec.org/) 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/seo.md: -------------------------------------------------------------------------------- 1 | # SEO Tools 2 | 3 | * [Keyword Tool](http://keywordtool.io/) 4 | * [Google Webmasters Search Console](https://www.google.com/webmasters/) 5 | * [Varvy SEO tool](https://varvy.com/tools/) 6 | 7 | ##### Tools for Finding SEO Tools: 8 | 9 | * [SEO Tools - The Complete List](http://backlinko.com/seo-tools) 10 | * [CuratedSEOTools - Curated directory of the best SEO tools](https://curatedseotools.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 | -------------------------------------------------------------------------------- /tools/state.md: -------------------------------------------------------------------------------- 1 | # State Tools 2 | 3 | * [Redux](https://redux.js.org/) 4 | * [Mobx](https://mobx.js.org/) 5 | * [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree) 6 | * [Cerebral](https://github.com/cerebral/cerebral) 7 | * [freactal](https://github.com/FormidableLabs/freactal) 8 | * [unistore](https://github.com/developit/unistore) 9 | * [Vuex](https://vuex.vuejs.org/en/) 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/static.md: -------------------------------------------------------------------------------- 1 | # Static Site Generators Tools 2 | 3 | ##### Site Generator Listings: [^1] 4 | 5 | * [staticgen.com](https://www.staticgen.com/) 6 | * [staticsitegenerators.net](https://staticsitegenerators.net/) 7 | * [Metalsmith](http://www.metalsmith.io/) 8 | 9 | *** 10 | 11 | ###### ADVICE: 12 | 13 | [^1] Before using a static site generator framework consider using [Gulp](http://gulpjs.com/) or [npm scripts](https://scotch.io/tutorials/using-npm-as-a-build-tool) to orchestrate a custom solution or use a tool that makes use of Gulp for static site generation. e.g. [Blendid](https://github.com/vigetlabs/blendid) 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 | -------------------------------------------------------------------------------- /tools/svg.md: -------------------------------------------------------------------------------- 1 | # SVG Tools 2 | 3 | ##### Optimizing: 4 | 5 | * [Clean Multiple Gradient Stops](http://codepen.io/jakealbaugh/pen/OVrQXY) 6 | * [Peter Collingridge's SVG Optimiser](http://petercollingridge.appspot.com/svg-optimiser) 7 | * [Scour SVG Scrubber](http://www.codedread.com/scour/) 8 | * [SVG Cleaner](https://launchpad.net/svg-cleaner) 9 | * [SVGO](https://github.com/svg/svgo) 10 | * [SVGO-GUI](https://github.com/svg/svgo-gui) 11 | * [SVGOMG](https://jakearchibald.github.io/svgomg/) 12 | 13 | ##### SVG Editors: 14 | 15 | * [DrawSVG](http://www.drawsvg.org/) 16 | * [Illustrator](http://www.adobe.com/products/illustrator.html) 17 | * [Inkscape](https://inkscape.org/en/) 18 | * [Sketch](https://www.sketchapp.com/) 19 | 20 | ##### Sprite Creation: 21 | 22 | * [Fontastic](http://fontastic.me/) 23 | * [Grunticon](http://www.grunticon.com/) 24 | * [Icomoon](https://icomoon.io/) 25 | * [Orion Icon Library](https://orioniconlibrary.com/app) 26 | 27 | ##### Bug Trackers: 28 | 29 | * [SVG Edit](https://code.google.com/p/svg-edit/wiki/BrowserBugs) 30 | * [SVG Weirdness](https://github.com/emilbjorklund/svg-weirdness) 31 | -------------------------------------------------------------------------------- /tools/task.md: -------------------------------------------------------------------------------- 1 | # Tasking (aka Build) Tools 2 | 3 | ##### Tasking/Build Tools: [^1] 4 | 5 | * [Gulp](http://gulpjs.com/) 6 | 7 | ##### Opinionated Tasking/Build pipeline tools: 8 | 9 | * [Brunch](http://brunch.io/) 10 | 11 | *** 12 | 13 | ###### ADVICE: 14 | 15 | [^1] Before reaching for Gulp make sure [npm scripts](https://docs.npmjs.com/misc/scripts) or [yarn script](https://yarnpkg.com/en/docs/package-json#toc-scripts) won't fit the bill. Read, ["Why I Left Gulp and Grunt for npm Scripts"](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.nw3huib54). 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/templates.md: -------------------------------------------------------------------------------- 1 | # Templating/Data Binding Tools 2 | 3 | ##### Just Templating: 4 | 5 | * [doT.js](http://olado.github.io/doT/) 6 | * [art-template](https://aui.github.io/art-template/) 7 | * [Nunjuncks](http://mozilla.github.io/nunjucks/) 8 | 9 | ##### Templating and Reactive Data Binding: 10 | 11 | * [ractive.js](https://ractive.js.org/) 12 | * [react.js](https://facebook.github.io/react/index.html) 13 | * [preact](https://preactjs.com/) 14 | * [inferno](https://infernojs.org/) 15 | * [nerv](https://github.com/NervJS/nerv) 16 | * [rax](https://github.com/alibaba/rax) 17 | * [riot](http://riotjs.com/) 18 | * [Rivets.js](http://rivetsjs.com/) 19 | * [vue.js](http://vuejs.org/) 20 | 21 | ##### Templating to Virtual DOM: 22 | 23 | * [JSX](https://facebook.github.io/jsx/) 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 | -------------------------------------------------------------------------------- /tools/testing.md: -------------------------------------------------------------------------------- 1 | # Testing Tools 2 | 3 | ##### Software Testing Frameworks: 4 | 5 | * [Intern](https://theintern.github.io/) 6 | * [Jest](http://facebook.github.io/jest/) 7 | * [majestic](https://majestic.debuggable.io/) 8 | * [Enzyme](https://github.com/airbnb/enzyme) 9 | * [Cheerio](https://github.com/cheeriojs/cheerio) 10 | 11 | ##### Unit Testing: 12 | 13 | * [AVA](https://github.com/avajs/ava) 14 | * [Jasmine](http://jasmine.github.io/) 15 | * [Mocha](http://mochajs.org/) 16 | * [Tape](https://github.com/substack/tape) 17 | 18 | ##### Testing Assertions for Unit Testing: 19 | 20 | * [Chai](http://chaijs.com/) 21 | * [expect.js](https://github.com/Automattic/expect.js) 22 | * [should.js](http://shouldjs.github.io/) 23 | 24 | ##### Test Spies, Stubs, and Mocks for Unit Testing: 25 | 26 | * [sinon.js](http://sinonjs.org/) 27 | * [Kakapo.js](http://devlucky.github.io/kakapo-js) 28 | 29 | ##### Hosted Testing/Automation for Browsers: 30 | 31 | * [Browserling](https://www.browserling.com/) [$] 32 | * [BrowserStack](https://www.browserstack.com) [$] 33 | * [CrossBrowserTesting.com](http://crossbrowsertesting.com/) [$] 34 | * [Nightcloud.io](http://nightcloud.io/) 35 | * [Sauce Labs](https://saucelabs.com/) [$] 36 | 37 | ##### Integration/Functional Testing: 38 | 39 | * [Cypress](https://www.cypress.io/) 40 | [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test) 41 | * [Nightwatch](http://nightwatchjs.org/) 42 | * [WebDriver.io](http://webdriver.io/) 43 | 44 | ##### Browser Automation: 45 | 46 | * [CasperJS](http://casperjs.org/) 47 | * [Nightmare](https://github.com/segmentio/nightmare) 48 | * [TestCafe](https://github.com/DevExpress/testcafe) 49 | 50 | ##### UI Testing Tools: 51 | 52 | * [gremlins.js](https://github.com/marmelab/gremlins.js) 53 | * [Percy](https://percy.io) 54 | * [BackstopJS](https://github.com/garris/BackstopJS) 55 | * [PhantomCSS](https://github.com/Huddle/PhantomCSS) 56 | * [Ghost Inspector](https://ghostinspector.com/) 57 | * [diff.io](https://diff.io/) 58 | 59 | ##### Automated dead link and error detectors: 60 | 61 | * [Monkey Test It](https://monkeytest.it/) 62 | 63 | *** 64 | 65 | ###### NOTES: 66 | 67 | Testing frameworks typically offer more tools than just unit testing. If you are looking for JavaScript unit testing solutions look at [JavaScript Tools](https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/tools/js.html). 68 | 69 | Nice [recap of testing JavaScript in 2017](https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a). 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 | -------------------------------------------------------------------------------- /tools/ui.md: -------------------------------------------------------------------------------- 1 | # UI Widget & Component Toolkits 2 | 3 | ##### On Web Platform: [^1] 4 | 5 | * [Kendo UI](http://www.telerik.com/kendo-ui) for jQuery [free to $] 6 | * [Materialize](http://materializecss.com/) 7 | * [Office UI Fabric](http://dev.office.com/fabric) 8 | * [Semantic UI](http://semantic-ui.com/) 9 | * [UiKit](https://getuikit.com/) 10 | * [Webix](http://webix.com/) [$] 11 | 12 | ##### React Specific, On Web Platform: 13 | 14 | * [Ant Design](https://ant.design/) 15 | * [Material ui](http://material-ui.com/) 16 | * [Semantic-UI-React](http://react.semantic-ui.com/introduction) 17 | * [ExtReact](https://www.sencha.com/products/extreact/#app) [$] 18 | * [Fabric](https://developer.microsoft.com/en-us/fabric) 19 | 20 | ##### Native Desktop/Laptop/Netbook Apps via Web Platform (i.e. used with NW.js and Electron): 21 | 22 | * [Photon](http://photonkit.com/) 23 | * [React UI Components for OS X El Capitan and Windows 10](http://gabrielbull.github.io/react-desktop/) 24 | 25 | *** 26 | 27 | ###### ADVICE: 28 | 29 | [^1] If you need a basic set of UI Widgets/Components start with [Semantic UI](http://semantic-ui.com/). If you are building something that needs a grid, spreadsheet, or pivot grid you'll have to look at [Kendo UI](http://www.telerik.com/kendo-ui) or [Webix](http://webix.com/). Keep in mind that most of these solutions still require jQuery. 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 | -------------------------------------------------------------------------------- /tools/uptime.md: -------------------------------------------------------------------------------- 1 | # Site/App Monitoring Tools 2 | 3 | ##### Uptime Monitoring: 4 | 5 | * [Monitority](http://monitority.com/) [free] 6 | * [Uptime Robot](https://uptimerobot.com/) [free to $] 7 | 8 | ##### General Monitoring Tools: 9 | 10 | * [Pingdom](https://www.pingdom.com/) [free to $] 11 | * [New Relic](http://newrelic.com/) 12 | * [Uptrends](https://www.uptrends.com/) [$] 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 | --------------------------------------------------------------------------------