Every Monday I share articles that I've read about in the technical site I subscribed to last week, and during the problem solving process.
After all, personal reading is limited, also welcome messages or private messages to me you read, to your front-end technology to help any content, subject matter, Language Unlimited. It can be a technical blog, or it can be a quiz or a stackoverflow.
If you feel that this share has brought you help, please don't hesitate to praise, or recommend this column to your friends, but also follow me. Thank you!
Recommended this week
What's the best book for learning JavaScript?
The author here gives the three books he thinks are best for learning JavaScript, eloquent javascript,you Don ' t Know js,effective JavaScript, respectively. These three books cover the basics from the beginning to the depth, from node. js to ES6. One of the You don ' t know JS is hosted for GitHub on open source projects that can be read for free, and I am personally in the reading. Of course, the author also repeatedly stressed that these three books is not the absolute standard of his personal recommendation. By the right, what do you think is the most helpful learning JavaScript book for you? Share in the message to everyone
The Document Outline dilemma
There has been a lot of discussion about the label "title (
Universal Web Components
Even if you haven't been exposed to WEB components, you can read this article. The value of this article lies in its good interpretation of the design ideas behind the Web components inherited from HTML: Abstraction & Declarative. That tells the browser what you need instead of telling the browser how to do it. This greatly simplifies programming (compare the use of scripting to create a DIV tag and create a DIV tag using HTML). Based on this topic, it then demonstrates the use of WEB components across domains, such as those used on the node. JS server, for hardware programming, and so on.
The unexpected Power of Viewport Units in CSS
Introduction to viewport units and 5 classic usage. With this article Viewport unit Based typography about how to use the Viewport Unit Settings page font and everything I know about responsive Web typography responsive typesetting articles to eat together More
Using CSS transitions on Auto Dimensions
When adding transition animations to certain CSS properties, it is required that the CSS property value must be an explicit number, not auto. This article summarizes four ways to successfully perform a transition animation even in the case of a value of auto
Moving Airbnb Search to React
Airbnb's research and development team decided to use react to reconstruct their search page. Page interface design is simple, but the implementation of the page is really very complex, including a variety of experiments, localization and marketing requirements, more deadly is the lack of test coverage. So how do you ensure that the reconstructed version does not have a functional missing? The problem is discovered by comparing the various indexes of the page before and after the reconstruction.
Technology foresight
CSS Grid layout:a New Layout Module for the Web
This week's big news is that more browsers support CSS grids (released this week in Chrome 57 and Firefox 52)! There are a lot of tutorials on CSS grid, a selection of this WebKit's official CSS grid tutorial dedicated to everyone
Introduction to Web Audio API
Or you will never use the Web audio API in your life, but I personally think this article is very interesting, the demo is also very fun, such as you can try the following demo:play the xylophone (Web audio API)
On container queries
Ethan Marcotte likes to design pages as a system that has many rich components. Each component has its own response-style rules, each with its own breakpoints, and divide and conquer design each component is finally assembled into a whole page. But at the moment media query can only return the overall state of the current page, and cannot query the environment in which a single element is located. This article, through a practical example, illustrates the dilemma and the inconvenience it brings to the design, and suggests the need for container query (or element query).
Progressive Web App
PWA seems to me to be a very promising technical direction (offline application), this is an introduction that can be said to be from the official (because this author Addy Osmani is a Google engineer, he seems to be yeoman author, but also the book Learning Javascript Author of Design patterns). The technical ecology of some of the columns surrounding PWA is worth introducing. You can come to a PWA program in the future.
Rehash
CSS Architecture Block-element-modifier (BEM)
The BEM criteria used to design the style structure is a classic theory, which gives some rules for how to organize HTML structures and how to name styles according to the structure, which is briefly described in this article. Friends who want to know can get started with this article. If you are interested, you can continue to search the Internet for other information about it.
Learn about CSS architecture:atomic CSS
Compared to the BEM style architecture of the previous article, the atomic architecture feels like a heterogeneous one. If the BEM principle is likened to semantics, then atomic represents visualization. I personally still tend to bem, but may as well listen to different voices, a matter of opinion
React quickly:how to work with Forms in React
React introductory article to teach you how to handle <Form> elements with react. Most of the content is regular, and I think the interpretation of one-way binding and two-way binding is very thorough.
Sing the Devil.
AMP and the Web
AMP is a set of front-end boxes that Google launches. Unlike our common front-end framework, it is a set of page-level solutions designed to improve page performance. The author of this article is concerned that the AMP-level framework is stifling creativity in the Internet, and you can imagine that using AMP's site to show content is limited to the limited components in the framework. The more frightening truth is that many sites use AMP's goal not to improve site performance, but to optimize and improve search results rankings for SEO
Talk about the truth.
Asura field: The route of the apprentice of the Japanese Michelin restaurant
This is a Japanese Michelin restaurant apprentice growth trajectory of an article, to tell the truth I in their way to go only see the endurance and hardship, of course, the end may be thick and thin hair into a generation guru. Here's a little bit of my feeling: writing a program is also considered a craft, for craftsmen to pursue the pursuit of technical excellence should be a matter of course. In how to write good program good This thing there is no shortcut to go, but also to withstand loneliness. Learn more, think more and do more.
This article is also published in my knowledge column: front-end Technology roaming guide, you are welcome to pay attention to
Front end News weekly 3.6-3.12: Three books that are most helpful for learning JavaScript, and myths about HTML titles