It has 1,867 words and takes four minutes to read and one minute to speed read. React, vue. js, Angular updates and extensions for the main front-end frameworks; On the CSS side, the Grid layout is notable; In terms of development efficiency, there are two tips on Git and Webpack. Please enjoy the following.
Technology of dynamic
Angular 4.0.0 is now available
Angular recently released version 4.0, and I can only marvel at how the front-end community is getting worse and worse. Version 4.0 is almost fully compatible with version 2.x, including improvements like: Smaller file sizes, improved view engine, 60% less code generated by template compilation, project references for server-side rendering, support for the latest version of TypeScript, and more. It looks like Google is putting a lot of effort into Angular. Are you following?
Micro channel small program 6 big new ability comprehensive interpretation
The wechat mini program broke the big news at 10 PM on March 27. Wechat has opened six new capabilities for small programs. In this article, you will see the most reliable interpretation of the six new capabilities of small programs.
A moment of relief: Left-pad event week age
This time last year, the JS community had the “left pad” incident that brought down a lot of open source packages and developers, and there was a lot of bad talk about the JS community, but the community as a whole has done a lot to avoid similar problems. Here are some interesting tweets to check out when you’re bored.
The article tutorial
Use examples to understand Grid and Flexbox layouts
For those of you in the front end, you should not only look at the changes in JS, but also the evolution of CSS. From the early table layout, to the later DIV + CSS layout, to flexbox layout, now there is a better grid layout. For these two new layouts, What are the differences between Flexbox and Grid? You might learn faster by comparison.
Perspective webpack build, use CommonsChunkPlugin to the extreme
The WebPack development team has launched a campaign on Twitter to use Webpack-bundle-Analyzer to post visualization screenshots of webPack dependencies and diagnose webPack configuration errors. This article corrects the typical wrong posture, you need to do your own research, there is a high probability that you use the wrong posture.
Declare seven postures for the vue.js component template
This article reviews 7 ways to declare vue.js component templates, and gives specific examples to illustrate the differences in code readability, maintainability, modularity, etc. All you need to do is to choose the one that is most comfortable for you.
The development tools
The most commonly used Git technique
There are more than 50 Git-related tips listed here, including the commands each tip requires and the problems it can solve. In addition to looking at the Git kernel, you also need to practice the common commands, here is the practice secret.
Configure the Webpack + Vue + TypeScript development environment
This article takes a long time to explain why you choose to do vue.js with.vue files, why you choose TypeScript, and how to configure their development environment, which is a good reference if you have problems doing something similar.
The code framework
Vue Typeahead: Input box auto-complete component
Typeahead is already a common way to interact. The ancestor is Google’s Search Suggestion, which is an input field auto-completion component developed for vue.js that should be useful for both user interface and admin background. The Demo on the official website uses the Twitter API, which may not be as smooth to use, even if it is over the wall.
React backend isomorphism application framework next.js is available in version 2.0
Next. Js has been included in the front End weekly issue 42, and its main motivation is to provide a scaffold for the front and back end isomorphic applications. Github Star has more than 1 million users and recently released version 2.0. The main author of React Conf 2017 also gave a talk and sermon on Next. Js. I highly recommend trying this.
Vue.js isomorphic application framework nuxt.js
This project is inspired by Next. Js in the React domain. The main purpose of this project is to facilitate the development of Vue. This reflects the popularity of vue.js in the developer community.
Choices: Lightweight input box, select list extension
Choices. Js provides input boxes and select list extensions similar to Select2 and Selectize, but does not rely on jQuery, the source code is small, and supports a variety of custom configurations. The home page provides the label input box, multiple option list, radio option list, and cascading Demo required in common service scenarios.
Good question and answer
Why do good programmers love the command line?
It is difficult to define a good programmer. Good at abstract thinking, strong hands-on ability, the pursuit of efficiency, like automation, willing to continue learning, high pursuit of code quality and so on, all of these dimensions have their rationality, but they are slightly abstract and subjective. The author of this article has a great point that I agree with, and it lists a lot of things that engineers can do from the command line.
What exactly does const in ES6 mean?
Const is the new way of declaring variables in ES6. On the surface, it means that the declared variable cannot be changed. Students who have transferred JS from other languages may be confused. Can arrays or objects declared with const, or instances of types, be changed? How can it be changed? Do you understand?
Use Taobao image to accelerate the installation speed of Electron and Node-sass
It can be said that Taobao’s mirror has saved a lot of time for domestic developers, from the operating system to various tools. This short article describes how to use Taobao Mirror for Electron and Node-sass installation acceleration in a project that will hopefully shorten your ride time in the environment.
One More Thing
The author of this article is Wang Shijun. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source. If you found this article helpful, please give it a thumbs up! If you have any questions about the content of this article, please leave a comment. Want to know what I’ll write next? Welcome to subscribe zhihu column: “Front End Weekly: Keep you up to date in the front End field”.
Happy Hacking