What is this?
A community-maintained map of the knowledge a frontend engineer needs — browsers, languages, tools, frameworks, standards, performance, security — plus star-rated book recommendations. It grew out of @jayli's famous frontend knowledge structure diagram.
A community-maintained map of the knowledge a frontend engineer needs — browsers, languages, tools, frameworks, standards, performance, security — plus star-rated book recommendations. It grew out of @jayli's famous frontend knowledge structure diagram.Is this a tool or library I can install, or more like a reference document?Neither — it is a reference document: one markdown README structured as a topic tree. There is nothing to install or run, and the Git history doubles as a record of how the frontend field has changed over time.
Neither — it is a reference document: one markdown README structured as a topic tree. There is nothing to install or run, and the Git history doubles as a record of how the frontend field has changed over time.How is the material organized — what would I actually find inside?Top level: a frontend engineer knowledge tree — browsers, JavaScript/TypeScript, HTML/CSS, editors, debugging tools, version control, testing, frameworks, standards, performance, security, mobile web — plus a backend tree, recommended books, and interview links.
Top level: a frontend engineer knowledge tree — browsers, JavaScript/TypeScript, HTML/CSS, editors, debugging tools, version control, testing, frameworks, standards, performance, security, mobile web — plus a backend tree, recommended books, and interview links.How up to date is the content?It dates to 2012 — the contributor list was generated in January 2014 — so expect that era's landscape: IE6-11, CoffeeScript, Grunt/Yeoman, AngularJS. Treat it as a structured overview and verify current tool choices elsewhere.
It dates to 2012 — the contributor list was generated in January 2014 — so expect that era's landscape: IE6-11, CoffeeScript, Grunt/Yeoman, AngularJS. Treat it as a structured overview and verify current tool choices elsewhere.Is it aimed at beginners or at working engineers?Both. The tree runs from basics to niche topics, and the book lists are star-rated: fewer stars means simpler and better for getting started, more stars means harder or best saved for later — for example the performance books.
Both. The tree runs from basics to niche topics, and the book lists are star-rated: fewer stars means simpler and better for getting started, more stars means harder or best saved for later — for example the performance books.Why did the author turn a diagram into a GitHub repo?The original image by @jayli was inconvenient: without the source file nobody could contribute, and techniques change over time. A GitHub project lets people maintain it collaboratively, and the Git history witnesses how the frontend industry has evolved.
The original image by @jayli was inconvenient: without the source file nobody could contribute, and techniques change over time. A GitHub project lets people maintain it collaboratively, and the Git history witnesses how the frontend industry has evolved.What book lists does it include?For frontend: CSS, JavaScript, performance, and version control titles, each with a difficulty star rating. For backend: Linux administration, Linux programming, and C/C++ reading lists.
For frontend: CSS, JavaScript, performance, and version control titles, each with a difficulty star rating. For backend: Linux administration, Linux programming, and C/C++ reading lists.Does it help with frontend job interview prep?Yes — there is a dedicated frontend job interview section linking collections of frontend interview questions, including Chinese-language ones.
Yes — there is a dedicated frontend job interview section linking collections of frontend interview questions, including Chinese-language ones.Is there a visual version of the structure?Yes — the README links a visualization of the knowledge structure alongside the text tree, carrying on the original @jayli diagram the project started from.
Yes — the README links a visualization of the knowledge structure alongside the text tree, carrying on the original @jayli diagram the project started from.What are similar projects?fe-interview, web-interview, Become-A-Full-Stack-Web-Developer, react-redux-links, awesome-angular, markyun, CS-Interview-Knowledge-Map, Project-Ideas-And-Resources
fe-interview, web-interview, Become-A-Full-Stack-Web-Developer, react-redux-links, awesome-angular, markyun, CS-Interview-Knowledge-Map, Project-Ideas-And-ResourcesWhich topics is it in?roadmap, books, interview, visualization, git, vue, beginner-friendly, testing, css, learning-resources, html, awesome-list
roadmap, books, interview, visualization, git, vue, beginner-friendly, testing, css, learning-resources, html, awesome-list