In 2021, do you see JavaScript reaching beyond the traditional front and back ends and even becoming the default language supported in many Serverless architectures? As a Web engineer, I find that my work has gradually gone beyond the front-end itself, and I am exposed to more and more knowledge in non-javascript /HTML/CSS fields. In the process of learning and improving, I find more and more fun and benefit a lot.

Here I summarize three areas that I grew up with and eight tools that might help front-end engineers.

1. Use tools

1.1 Chrome DevTool – Front-end tools required

Homepage: developer.chrome.com/docs/devtoo…

You probably never knew that Chrome DevTool has so many handy features: real-time debugging of Android phones in USB developer mode; Use 3D model to display front-end hierarchy; Visually edit CSS animation curves; Replace part of the request with a local file…

Subscribe to What’s New in DevTool on YouTube. With each new release of Chrome, there will be a new video that introduces the new features added to make your front-end development speed and quality greatly improved.

1.2 Neovim/Vim – Immersive coding experience

Homepage: neovim. IO /

This is the tool I use most often to write TypeScript or go. I personally very subjectively like Neovim over Vim because it now has Language Server built in and can write various plug-ins or commands in Lua. Vim has a steep learning curve, but once you get used to it, you can throw the mouse away and quickly focus on coding.

In addition, through the coc.nvim auto-completion plug-in, Vim can achieve the same intelligent prompt as VSCode, fast jump. By the way, if you’re new to the keyboard, I suggest you do what I did and remove the top, bottom, left, and right keys from your keyboard — so you can get an immersive Vim experience.

1.3 Visual Studio Code – The most popular editor

Homepage: code.visualstudio.com/

Another favorite coding tool I use is Visual Studio Code, and I always use the Insider version of it, keeping an eye on the release log every time a new version is released so I can try out its latest features.

I even went so far as to use the LiveShare plugin for remote assistance and cryptographically shared local Terminal (yes, you don’t need Intranet penetration tools); View data with MySQL plug-in instead of database GUI tools.

Rapid prototyping/development

2.1 Draw.io – Powerful prototyping tool

This is a free and powerful flowchart and prototyping tool that you can use when you open a web page. It also offers a native version that you can use offline.

Home page: the draw. IO /

2.2 Light Service – fast one-stop development platform

Homepage: qingfuwu. Cn /

This is ByteDance’s cloud service for developers. You can quickly write and deploy your front-end projects or Serverless backend in JavaScript. It comes with basic services like Redis and databases built in — you just do the core logic, you don’t care how to connect and manage the basic components.

It is also worth mentioning that the development experience of the light service is great. In the light service database, you can even browse and edit the database data directly, and view the images directly.

3. Information acquisition

3.1 Hacker News – A well-known IT community

You can learn about cutting-edge technologies in the industry. It is recommended to Search hot content quickly or quickly through HN Search Powered by Algolia.

3.2 Qiita.com – “Super fast CSDN” from Japan

This is a programming Japanese community, the general article quality is much better than CSDN, and there are no psoriatic ads. I can’t read all the foreign languages, but you can get a sense of what they mean by catching the key words in the code. Also, be sure to install Google Translate on your Chrome.

Bonus search tip: You can set Google search language to: English, Japanese, Chinese, Russian. This will lead to more meaningful results (there will also be many articles from the Qiita community).

Homepage: qiita.com/

3.3 RSS Feeds – Keep track of more great content

I’m a Google Reader (I’ll miss it now) veteran and now use Reeder to subscribe and manage my feeds. Many well-known developers have their own blogs (rather than official accounts) and you can subscribe to their updates via RSS feeds.