preface
Time flies and I have graduated from university as a front-end engineer. Looking back on this year, I accomplished three things: I revised the blog system so that different users could start projects quickly. It was my first project with more than 100 stars; Translated and proofread technical articles, learned a lot of front-end practical technology; Research on GatsbyJS and ReactJS technology of blog system framework.
Thanks to the university friends and a lot of programmers help.
Revamp the blog system
When writing blog articles, I often wear three hats: front-end programmer for the blog system, editor dedicated to writing articles, and maintainer to ensure the quality of website service.
- Front End Engineer: I want to be able to use the latest and fastest technology while ensuring that the service is stable and the articles display properly.
- Edit: WHEN I write articles, I want to see the preview effect.
- Website maintainer: if there is a problem with the website, it can be quickly rolled back to the normal version to avoid online accidents.
Not only that, I also want to be able to proofread each version individually for proofreaders.
To better achieve these goals, I chose to use GatsbyJS + Netlify + Contentful to achieve this.
GatsbyJS
It is a static web site generation system based on ReactJS, which can read arbitrary data and generate modern front-end web sites.
Netlify
It is a one-stop site space hosting, generation platform. Support node.js environment generation, NPM scripts, each branch can generate a separate preview site.
Contentful
Cloud-based content management platform, can write Markdown text, support real-time preview markdown function.
results
In the past year, I have been able to update the blog system constantly and guarantee the stability of the service.
I am very satisfied with this configuration, because there are many computers in HKUST and many places can receive WIFI signal. All I had to do was find a computer and log on to Contentful and start writing.
I was able to access my server, open the Vim editor, and do some more daring coding.
Because Netlify locks the version, if the build fails, you will not see the wrong version, but the last successful version.
Blog reevolution
In the past few months, I have noticed that some of the configuration items in the blog system are changed, such as links, navigation bars, data pages.
These should not be part of a COMMIT; instead, they should be configurable online.
So I took a moment to pull out the blog configuration as well and get it from the Contentful server.
The Gatsby -starter-calpa-blog you see here is the result of the blog system I’ve been optimizing for months.
Remember when I last wrote the Front End Engineer’s Daily Checklist, the blog system on Github had a Star count of 62 and is now a collaborative project with over 100 stars.
Thank you.
Quick start
Use Netlify for deployment
With Netlify, I can quickly deploy any front-end project and have fun with it.
You can use this link to build and deploy a blogging system.
After you click the button above, you will give Netlify permission to get your Github license and select the repository name. Netlify automatically creates a repository and copies the files there.
After that, it automatically builds and deploys a new website, bringing you a complete blogging system.
You can also use Contentful as your content management system.
Use CodeSandbox to write code
CodeSandbox provides a free, out-of-the-box sandbox environment for writing code.
You can use this link to modify my blog system code.
Blog review
In the past year, the blog has managed to bring in more than 26,000 users and over 70,000 page views.
Most of these flows are concentrated after September, because IN the first half of this year, I have been preparing for the final test of college graduation.
Many thanks to those friends who have helped me since college.
Area with high traffic volume
As a front-end engineer, most of your writing is about the front end.
Several popular articles written this year are related to tools and optimization, such as:
- Daily Training List for Front End Engineers
- Lozad.js – high performance, no dependency pure JS arbitrary element lazy loading plug-in
- Web performance Tuning tools: Lighthouse, Puppeteer, and more advanced features at Google Developer Conference 2018
- Five minutes to lighten your front-end application – day.js
Traffic sources
Visitors come from different regions, but the majority of visitors are programmers.
- Search from Google and Baidu, mostly read React related articles
- The nuggets should be technical articles, mainly listing classes, and performance optimization articles
- V2EX programmer community mainly read my article “Life and Work Summary after working in Hangzhou for two months” written in mid-August.
The flow distribution
The traffic was concentrated in the third and fourth quarters because I had more time to write articles after I arrived in Hangzhou.
This article reviews
In this year, I wrote a total of more than 20 articles, which can be roughly divided into three categories:
- life
- The front-end optimization
- Programmer tools
life
- Summary of life and work after working in Hangzhou for two months
There is heaven above and Suzhou and Hangzhou below. After coming to Hangzhou, I began to get used to the life here, whether the pace of life, or work habits, are different. That’s what I’ve learned the most these days.
- Hackoberfest 2018
By participating in Hacktoberfest, I get to meet different programmers in the world, in addition to getting limited clothing and stickers.
As I watched the constant stream of discussions and Pull Requests, I found my passion for programming.
If you’re interested in getting involved in open source but don’t know how to get started, it’s a great place to start.
The front-end optimization
-
Five minutes to lighten your front-end application – day.js
In addition to using native functions when dealing with dates and times, it’s powerful moment.js. However, its weight is often the culprit behind the problem of over-size packaging. Therefore, switching to lightweight Day.js will save users a lot of volume and speed up site loading.
-
Web performance Tuning tools: Lighthouse, Puppeteer, and more advanced features at Google Developer Conference 2018
At this Google Developer conference, Lighthouse engineer Eric Bidelman is here to share how Lighthouse, Puppeteer, can be used to automate our daily processes. It is an open source automation tool for improving the quality of web applications. All you need to do is provide the url, and it tests the page and generates a performance report on the page. You can see what steps you can take to improve your application.
I still remember this conference, I asked for leave from Hangzhou to Shanghai, although I did not get paid for those two days, but I learned a lot from this conference.
What’s more, this article has been liked by over 400 programmers on nuggets and has been read by over 5,000 people for me.
-
Lozad.js – high performance, no dependency pure JS arbitrary element lazy loading plug-in
Over the past year, blogs have started this lazy loading feature, which has passed the test of many different users.
To improve the user’s page loading speed, we can use lazy loading method.
-
Front end engineer’s daily training list
When I first wrote this article, I didn’t expect so many people to come and read it. I just thought about how to do one thing: stage girl, evolution every day.
The article got a lot of traffic and more than 500 thumbs up on Nuggets.
test
-
Power Assert – A comprehensive library of more intelligent and elegant Assert assertions
When writing test code, we used to have to go through documentation and learn various apis to understand how to manipulate assertions. Now you can use the Assert method of power-Assert to reduce debugging stress. Not only that, but it also provides more intuitive, concrete runtime effects to help DEBUG. Writing test code can be easy.
-
Learn how to implement various NPM tools through TDD mode
Reading good code is essential to a programmer’s daily refinement. Through the TDD development model, you can imitate those excellent code, so as to improve their own code level. Here’s how to set up a TDD environment from scratch and build isEven code.
GatsbyJS series
In November, I started writing a series of articles about GatsbyJS.
GatsbyJS is a modern website generation system for developing websites, with a complete, rich and open source ecosystem. React + GraphQL generates multi-page applications that satisfy front-end engineers, editors, and users.
-
GatsbyJS introduction (A) : to build a modern front-end website out of the box
-
GatsbyJS Starter (2) : How to quickly build a website with Starter
-
The blog system based on GatsbyJS is officially open source: Gatsby -starter-calpa-blog and its usage method
tool
In addition to working on open source projects, I wrote two articles about two tools I use daily for development.
- Vtop – a graphical process management tool that you will love once you use it
- GitGuardian – GitHub automatic notification platform for sensitive information leaks out of the box
JavaScript
As a front-end engineer, HTML, CSS, and JavaScript are naturally used and learned every day.
In 2018, I began to translate some JavaScript articles and learn the application of functional programming in JavaScript.
- Explain JavaScript’s filter method in terms of the college application process
Looking ahead to 2019
In 2018, I came to Hangzhou from Hong Kong and started my life as a programmer.
I hope that in 2019, I can settle in the field of front-end, step by step, write some highly relevant technical articles. Continue to give full play to existing advantages and continue to expand in the field of GatsbyJS:
- Reflect on the pros and cons of the blog system
- If I were to rebuild the blogging system, how would I structure it
Just like the average programmer, I had to meet the business needs of daily development in order to make ends meet.
For next year, I have the following hopes:
- To reunderstand the concept of modularity: the evolutionary history of front-end modularity includes: CommonJS, AMD, CMD, ES6
- “JavaScript modularization for seven days” (PPT)
- Front-end Modularity: CommonJS,AMD,CMD,ES6
- Master front-end build and build tools
- Webpack
- Parcel
- Grasp the principles of compilation: not only know what front-end compilation tools are available, but also understand the principles of compilation, so as to know how and why.
- Why do Front-end Engineers Learn Compilation principles?
- I finally made sense of front end build tools. You can, too.
- Master the advanced features of Web animation
- By learning Web Animation – Klrupa, I can Learn how to use HTML, CSS to Learn Web Animation
- Dive into JavaScript, a language that front-end engineers work with every day
- Learn about Proxy features and why immer.js is immutable
- Grasp the Prototype chain and understand why this is different in functions, globally, and in different situations.
- Master Class characteristics, understand the truth of Class is not Class
Afterword.
Thanks to your support, I was able to change my career from a chemical engineering major to a front-end engineer.
With the end as the beginning, I hope I can continue to maintain the original intention to contribute to the realization of a better world.