1. Introduction
How time flies, blink of an eye now is the last week of 2017, and today is Christmas, a few days is New Year’s day. At the end of every year, we are used to summarizing and sharing, and I am no exception. But experience, I have posted before, so I will share today! I contact some resources to share with you, is to give you a double Dan gift! Hopefully you’ll get the resources you need from it. I’ve read a lot of blogs and open source projects from the time I started working on the front end to the deadline, with varying quality (even advertising, chicken soup), but here are some of the recommended blogs, articles, projects and other sources I’ve worked on. Dare not say the best resources, the most complete, suitable for everyone, but the quality of the content to my satisfaction. There may be some resources I may not read, understand, see fine. But I think it can help people, it can help people improve their skills. Hope to give you a guide, guide the way or to solve the confusion of the role. If you have any good resources, also welcome to share!
There are some resource links, and I will annotate them in parentheses! For example: “HTML5 promotion (introducing creative ads for HTML5 development)”, the reasons for adding annotations might be: 1. Resources are very good, more dry goods, remind everyone to see! 2. A resource is one of a series. For example, there are more than 20 articles in a series, each of which is useful. It is impossible for me to post more than 20 links, so I usually post the first one in the series to remind you not to forget to finish reading the series! 3. Part of the content of the resources I personally find very useful, there are parts I think not useful! Remind everyone to pick to see, according to demand to see! 4. The title of the resource may be slightly misleading, or other considerations of the resource, I will give my own explanation and remarks.
2. Recommended articles (tutorials)
html(5)
Post HTML5 ERA I Post HTML5 Era II H5 Animation development fast track mobile H5 front-end performance optimization guide to play with HTML5 mobile page HTML5 HTML5 Advanced Series: Canvas Dynamic chart HTML5 Advanced series: Drag and drop API to achieve drag and drop sorting (this series of articles are good, worth looking at) Dynamic ion background, moving colorful ball, snake, tank battle, is a man under 100 layers, heart text and so on to create a high Canvas particle animation Canvas entry combat — invite card generation and download
css(3)
CSS3 properties tutorial and case sharing (desert CSS3 dry goods, inside can be seen one by one, very useful for CSS3 learning) CSS3 implementation of 11 classic CSS technology (desert CSS3 classic example dry goods, very useful for CSS3 learning) Css3 Warm up for Real — Transitions and Animations (achieve cool pulldowns, accordions, and animations) It is easier to write your own code base (cSS3 commonly used animation implementation). It may be easier to do interactive effects with VUE + CSS3 CSS. Use CSS3 to create shapes and shapes for your CSS shapes. Use CSS3 to create shapes and shapes for your CSS shapes. Use CSS3 to create shapes and shapes for your CSS shapes. Left vertical bar implementation method (read the first, you can look at the following, will always help, but the site sometimes load out of the picture, if the load out of the picture, or to give up, we grasp the idea) pure CSS wave effect! Use the browser developer tools to examine CSS animation performance to solve these problems and say yes to CSS3 animation If you can use HTML/CSS to solve a problem, don’t use JS. How to make your animations more natural 10 quality CSS LOGO animation examples are liberated from GPUS — improve CSS3 performance CSS: The default checkbox, input, and radio are too ugly? CSS performance analysis, how to optimize CSS to improve performance, CSS dark magic tips, let you write less unnecessary JS, More elegant code, progressive Animation solutions, new features and optimized CSS Animation shapes
sass
Eight tips for writing SASS
javascript
Deep understanding of JavaScript series (Uncle Tom wrote JavaScript series, involving various knowledge points, From standard to Excellent — The Path of API Design — Functional Programming in my view JavaScript Componentization: How to write small and clear functions? Javascript object (JS version) This is a good column (for practical purposes) about __proto__ and prototype. The First part of this series is the basics of learning Javascript. It’s a good series of articles. Don’t forget to finish the series but you have to look for the series in the column where the article is posted, because the author is not Posting in consecutive series, there are other articles in between, but it’s easy to find. In this column (trigkit4), if not this series of articles, I read a few article, feeling also is very good, everyone can refer to the below) JavaScript | 01 – object-oriented design patterns and the development practice of JavaScript, this series of tutorials is good, “JavaScript Design Patterns and Development Practices” notes, this book I also read, this book is good, the author organized and summarized is also good, you read, harvest a lot) JavaScript functional programming performance issues? Do you still use the for loop method? The principle and implementation of the front-end template is only 20 lines of Javascript! You can use 150 lines of code to realize a low version of MVVM library (1). You can use 150 lines of code to realize a low version of MVVM library (2). You can pay attention to the corresponding column of this article. How to learn JavaScript step by step and effectively? Using JavaScript data binding to implement a simple MVVM library (in addition to building your own simple wheels, More importantly, use an example to understand the principle of MVVM. Regular expression 30-minute introduction to how to listen to changes in the page DOM and respond efficiently to the IntersectionObserver API. This API makes it easier to implement lazy image loading and other things. As a front-end developer, what are some of the js code that you should read? What’s so cool about JavaScript? What are some interesting things you can do with JavaScript? Counter crawlers, how much imagination can front-end engineers have? (front-end anti crawler article, only unexpected, no can’t do) these JavaScript programming black technology, install force guide, high force code, JavaScript Design Patterns: (1) Using object-oriented programming in the right way Don’t forget the following) How to write elegant JavaScript code personal summary — JavaScript practical tips and writing advice: How to use native JS gestures to unlock components JavaScript mind maps Pure front-end face recognition – extraction – synthesis of the most complete regular expression summary: Verify the QQ number, mobile phone number, Email, Chinese, postcode, ID, IP address, etc. 99% of people understand the difference between GET and POST in HTTP Free to practice) to reintroduce JavaScript (JS tutorial) to write their own code base (JavaScript commonly used instances of implementation and encapsulation) let me impress JavaScript interview questions JavaScript hit strange upgrade – business logic when the exercise do
Javascript (ES6, ES7, ES8)
Es6: What you Probably didn’t know — Basic es6: What you Probably didn’t know — Advanced es6: What you Probably didn’t know — 30 minutes to learn the core of ES6/ES2015 (a brief introduction to the core of ES6 6 reasons to replace Promise with Async/Await features in ES7 and ES8 Import, require, export, module.exports
typeScript
Website documentation (an official document of TS, well written)
jquery
Here are a few rules you should keep in mind to improve your performance: JQuery === spaghetti Code, jQuery === spaghetti Code, jQuery === spaghetti Code
vue
Vue official website vUE e2. X step pit and summary of vue in you do not know but very practical black technology a nutshell practice vue2.0 and 1.0 difference I have never seen so concise and easy to understand vue tutorial vue-API (2.3 version of the API daqo) Vue Vue open source project library summary (miscellaneous miscellaneous eight libraries have, of course, there are high and low quality, everyone pick to see.) Vue.js practical Tips (I) (after reading the first article, Don’t forget the rest) deep vue2.0 bottom idea — template rendering vue.js — VuE-Router 60 minutes quick start Vue2.1.7 source learning analysis Vue implementation principle – how to achieve bidirectional binding MVVM VUE.js entry (a) -MVVM framework to understand Vue2 Source code analysis – logic carde hand to hand teach you a VUe2.0 popover components based on the “dependency collection” responsive principle Vue family bucket practice project summary vuEX entry example (1/3) original “VUe2.0 advanced series” tutorial catalogue daqo another way: Vue single page, multi route, forward refresh, back do not refresh vuejsexamples (various vUE demo, there may be a need for requirements) VUE quick start of three small instances (my own article, the comparison of basic usage, with three small instances of vUE introduction,) with vUE development of a so-called sudoku
webpack
(Some of the following articles are webpack1.x and 2.x, considering that they have been updated to 3.x, Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack 3: Webpack Development tool tips: How to make your Webpack builds 10 times more efficient Step by step approach architecture pain points (don’t forget the rest after reading the first article, it’s been a good series)
parcel
Announce Parcel: a fast, zero-configuration Web application packaging tool front-end build tool to play with Parcel in a minimalist way: #1: Exploring Parcels from WebPack to Full hug
gulp
Gulp Tutorial Describes how to use the front-end build tool gulp and how to use it
react
A: I’m new to it. React Component specification (Redux, Redux, Redux, Redux, Redux, Redux, Redux, Redux React.js is easier than you might think
git
GIT Tutorial – Liao Xuefeng’s official website
browsersync
(Browsersync Chinese – a time-saving Browsersync test tool)
node.js
Node.js and package. json in nPM-nodesource basic configuration. NPMRC to get the best node.js environment
Markdown
Get to know Markdown and get started
yoeman
Teach you to build a front-end scaffolding tool from scratch
lodash
This is a JavaScript tool library with consistent interface, modularity, high performance, and other features. 4.17.4 version
Fiddler
Fiddler tutorial
debugging
The use of Console in JavaScript (see this article and the one above, You may feel like you wouldn’t have used Console at all before.) Chrome Developer Tools The State of the Web: A Guide to Web Performance: A summary of Mobile Web Development Issues and Optimization An incomplete guide to front-end optimization
Details, optimization
Introduction to mobile front-end best practices Front-end optimization of thinking and practice summary introduction to the front-end engineering front-end optimization Reduce the front-end code coupling judgment, single and multiple pictures loaded terminal code duplication rate detection front-end advanced modular development 】 【 article of how to write maintainable code can upgrade As a web developer, What technical details do you need to consider before publishing your site [single-page apps]? How do we handle the framework pop up hierarchy? Stripping template code to speed up Web page loading mobile front end series – mobile page performance optimization [chat a chat series] chat about baidu mobile end home front end speed those things
other
Socket. IO Chinese manual socket. IO WebSocket Chinese documents and socket. IO VR evolution | introduction to teach you how to build general WebVR engineering RxJS deeplearn. Js: browser side machine intelligence framework
Sharing and skill lists
The Year of the Rooster! To carry on the front end of the week (15), (although almost the year of the dog, but the inside of the content is not outdated) front-end favorites (like the article above, is someone else’s summary, dry goods, but the front-end favorites, may be too many resources, make me feel also a little put all resources, as long as it is resources, all in, Knowledge base (with many languages, frameworks, libraries of knowledge graph, it is worth a look! Can let you know which language, framework, library contains knowledge points, details of each knowledge point, also have chestnuts and articles, such as: javascript knowledge graph, HTML5 knowledge graph, react knowledge graph) front-end resources to share with you, recommend a few front-end summary articles. Github’s Front end projects to watch (trigkit4 is a list of recommended projects) You can on-demand) front end things (book list) FPB 2.0: Tencent Web Engineer front-end book list front-end developer manual imprinted Chinese – Manual (a variety of development documents, Webpack,vue, Sass, etc.) (the following several links, 1024 HackGame # HackGame # HackGame # HackGame # HackGame # HackGame # HackGame # HackGame # HackGame # HackGame # Take the SegmentFault all home – code article, send the surrounding official send book activity second bomb – growth posture of SF call you to talk about development official activities, simple SF call you to talk about development! How about sharing your development knowledge? Official 30 Line JS Contest: What can you do with 30 line JS? [official competition] community 1111 show code, let you show let you fly!
3. Recommend blogs
Team blog
Qq.com front-end RESEARCH and development center Tencent Alloyteam Tencent front-end IMWEB team Tencent front-end IMWEB team – Github Tencent Games Sina UED Qunar mobile architecture group front end (Ele. me) Soche big wireless team blog (the above team blog, it is worth paying attention to, the quality of blog content is high, but it is not updated frequently, the following updates will be more, Quality is also good) extremely happy technology IMWeb front-end community love front-end – Zhihu column front-end grocery store front-end external reviews front-end worry grocery store DDFE technology weekly front-end top Fed summary
Daniel blog
Ten years trace Zhang Xinxu Ruan yi Feng leaf small hairpin Si Tu Zhen mei Blog Uncle Tom Liao Xuefeng tick three shares four chokCoCo chokCoCo- Github Cherry’s Blog Yax share front-end technology Blog – front road
4. Recommended books
I read the book more miscellaneous, and front-end related, recommended is the following! I have read all of the following books. The difference is that I have read the whole of some books (and some back and forth several times), and some have skimped (and some have only read a few pages)!
About reading advice, the following books, you can choose according to their own needs and interests to read. A book, do not read it, to understand the content of the book. Some books are worth reading back and forth several times!
For book resources, the following recommended books (I read them as ebooks) I downloaded from the Internet. To avoid infringement, I do not put the link of resources here! Everyone buy their own paper books or e-books, or to find resources online!
JavaScript Advanced Programming: (Red book or Ruby Book) can be a primer, but it’s also an advanced book that can quickly absorb the basics and come back to the Authoritative Guide to JavaScript when you improve: (rhinoceros book) can say is JS the most classic book, the novice looks at may be a bit difficult, but for the person that learns JS, necessary, the place that does not understand goes to consult, very helpful. “Data Structures and Algorithms JavaScript Description” (Hedgehog book) “Writing Maintainable JavaScript” (Turtle book) “JavaScript DOM Programming Art Edition 2” JavaScript Language Essence “(Butterfly book) : Classic book, but also popularized JavaScript development thinking a book. “Javascript Framework Design” (second edition) – Situ Zhengmei “javascript Design Pattern” – Zhang Rongming (a book written by baidu staff, the case is vivid and easy to understand, and the design pattern involved is relatively complete) “javascript Design Pattern and Development Practice” – Zeng Chen (a book written by Tencent staff, JavaScript from front end to back End for Single-page Web Applications, and ECMAScript 6 Starter can serve as a book of new es6 feature documentation, and it’s open source (ECMAScript 6 Starter). Just read it! Need also can buy!
“HTML5 Mobile Web Development practice” “HTML5 Mobile Web Development guide” “HTML5 Canvas core technology” : for the experience of the charm of Canvas, use, animation implementation, are very helpful. “Html5 and CSS3 authoritative Guide to the third edition” – Lu Lingniu, this book seems to have the same name, pay attention to the author, the other book is divided into volumes one and two. I was reading the second edition, and I recommend the third edition now that it’s out. “Sharp jquery” : I learned jquery by reading this book, it didn’t impress my peers very well, but I feel good, and I learned jquery by reading this book, I recommend this book! The Amazing Node JS Takes JavaScript to the bottom and reveals CSS: After reading this book, I can never say I know CSS again! Many of them are unexpected!
5. Recommend communities
Although there are so many communities, I have registered an account and only two or three of them are active. The other communities are basically I came into contact with by accident when I was studying and I think they are good, so I also recommend them. It’s up to you to choose which communities you want to be active in. If you have any good community resources, might as well recommend it!
Github: At first I used to look for resources on it. But did not register the account, but was urged to register by the boss later, went. Inside can read other people’s code, learn from everyone! Rare earth Mining: I am currently active in a community that is a great place to write articles! Segmentfault: I’m currently active in a community that features q&A, articles and lectures, and the quality is great! Zhihu: Although IT is not a pure IT community, there are many great talents and high quality columns in IT! W3cplus: a front-end learning site with good quality articles, especially about CSS(3) front-end web front-end stews: A front end article sharing community, there are many excellent article developers headlines front end weekly HTML5 dream workshop graduate monk MOOCs network (it seems that many videos now charge, when I watch before, the basic is free) hui Wisdom network
No. 6. The public
The front of
segmentfault
At the top of the front end
Front end morning reading class
W3cplus
Rare earth circle
(Above picture source network)
7. Recommend items of interest
Projects on Github
Vue React (I have only been exposed to React a few times, it works well, I am learning it now) Gulp Parcel Webpack D3 Chart (like D3, it is a data visualization, I have experienced it. But I haven’t used it in the project, I feel powerful, so I recommend) Elemental-UI (a component library developed based on vue2.x, which is generally used in the development of background management system, and now our company develops background management using this) muse-UI (also based on vUE component library, AlloyTeam mobile gesture solution frontend-dev- Bookmarks (frontend-dev-bookmarks) Animate. CSS hover. CSS Muse-UI (a library based on vue2.0). CSS3 uses animate, CSS hover. CSS Muse-UI (a library based on Vue2.0). Although the number of STAR programs does not compare to several other recommended programs, Chokcoco /magicCss Chokcoco /iCSS Handtouch awesome-vue Electron vue-skeleton-webpack-plugin Liang Shaofeng personal blog (and good quality of the inside of the article, all kinds of all have, js, jquery, vue, react, node. Js) RxJs deeplearn (Google published, a framework about deep learning of artificial intelligence, are interested can look at, I think for a moment, didn’t understand)
(The following two are my own development of the project, although compared with other projects lack of enthusiasm, but not to be used or not available to the point, it is also my small advertising! (●’ plus-one ‘●)) EC-do: encapsulates a extract for one item for a typical javascript instance, including array deduplicating, array shutoff, case conversion, cookie encapsulation, and so on. Ec – CSS (based on cSS3 development code base, including everyday use hover transition effects, animation effects, and presets animation)
Other Recommended Items
Tencent CSS3 UI library NEC: better CSS style solution (netease a CSS3 solution, but seems to be quite old, not maintenance, but the case you can refer to, absolutely harvest)
8. Comprehensive Project Course (Learning record)
I used Node.js + socket. IO + Redis to implement basic chatroom scene front-end development, from grassroots to Hero (part 1) front-end development, from grassroots to Hero (Part 2) My way to the front end We can see) for your mobile page looking for a new idea — mobile interactive web page project summary (top) for your mobile page looking for a new idea — mobile interactive web page project summary (bottom) front-end development guide 2017 【 actual HTML5 and CSS3 first article 】 preliminary water depth, beautiful navigation, gorgeous pictures explosion!! Vue 2.0 based on the implementation of mobile terminal popover (Alert, Confirm, Toast) components. Finding the best of you – How to build the most appropriate components in the design of Webpack + VUE project actual practice (1, set up the running environment and related configuration) (my own article, about using vUE + Webpack to develop a single page application, a background management system development and construction, this series of five articles)
9. Develop gossip
My personal opinion about IT training organizations. You can refer to the resume rating standard of Meituan, and compare your own strength with the rating of Meituan. Front-end code specifications and best practices vue.js is good, but is it better than Angular or React? Website Architecture – A guide to building a front-end Architecture from scratch How to Learn JavaScript 8 Career advice that will make a programmer regret it Beware! 10 Tips for New Programmers With so many front-end frameworks, where do you go? I heard you want to write about the front end in 2017? How to Keep up with the latest advances in Front End Development — Seven Skills A Front end developer must Know — JacksonTian Another front end skills map (same as the link above, but with a mind set) how do you grow into a good Web front end developer? What kind of technical level should the front end personnel with monthly salary of 10-12K have? As a front-end developer, what js code is worth reading? Why do some companies hire people who don’t want to be trained on the front end? Is the Web front end saturated now? 2017 Hexo Advanced Tutorial: Teach you how to make your hexo blog search engine ranking the first (interested can look at, useful) open source of law (because of copyright, foreign license is very attention, the article will speak about the license after open source code, is a bit to see me, but in the end, after finishing my open source project with MIT)
10. Develop websites you’ll see frequently
Mdn-web technical documents zhi Map _ picture compress online tool _ online make webP multi-view through picture transform Base64 wechat JS-SDK description document material TWO-DIMENSIONAL code novice tutorial w3Cschool
11. A summary
Ok, I learned the front end of the blog posts, attention to the bull and project, project technology stack tutorials are basically here! What I share is not the best, the most complete and suitable for everyone. However, they are all the ones I have read or touched, at least the content is satisfactory to me, and I think they are useful for study and can help everyone. If you have any learning resources to recommend, I also hope that you are not stingy to share with me, to everyone!
This article, for you, is a collection of resources, but for me, it may be a dividing line. After the last article in 2017, I may pay attention to in-depth exploration on the premise of pragmatic basis. The article may be deeper than the present article, and the output of the article may not be as frequent as now!
Another suggestion is to learn the Web front end, which can play a role in guiding, guiding and clarifying. However, do not forget to practice more, after all, the most important practice! You have free time or weekends to work on your own interest projects and use them to develop your own projects! The project does not seek to be better than others, but to practice and improve their technical level!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
