Michael An's Coding Log¶

统计信息：字数 24521 阅读50分钟

2018¶

This repository is the first trial repository of Michael An.

2018.01¶

I start to learn frontend development. There are plenty of differences between traditional webpage editing (such as using Adobe Dreamweaver software to design a webpage).

The new standards of HTML5 and CSS3 are amazing. These parts are easy, I think. Probablly because I can use photoshop, firework and other Adobe softwares fluently.

What's more, it is easy to use css. But using it well isn't an easy task.

2018.02¶

I am learning basic javascript codes. Basic JS codes are similar to other coding languages. JS is an object oriented programming language. The polymorphism isn't obvious.

ECMA script, a standard coding plan, is developing rapidly. ES5 is ripe and stable. In 2015, ES6 use class to create an object (from cpp?). And ES6 use string module. It maybe come from Ruby.

Recently some frineds told me that NodeJS could used in desktop application(Microsoft VS code). In one day JS will work every place.

2018.03¶

I got a github account. Learning git is an essential step. When I fell asleep, I find that writing and coding could make me patient and calm.

I find a project, Codecombat. Codecombat is a perfect open-source project. It uses coffeeScript rather than javascript. A little upset => => In this project, people can learn coding including Python, Javascript, Java and other languages.

Learing coding and English every day!

2018.04¶

Read readme.text of data repository. Finish user's information setting in github.

I can make a basic webpage using sublime editor. HTML is the structure of pages, CSS is the style of pages, JS is the magic and action of pages.

Other small JS plugins can help me to ease working stress. The fullpage plugin can make different pages switching fluently. And a small shopping project (similar to JD) and a take out meal project are finished.

2018.05¶

I am laerning senior javascript programming. And JS is not easy. Some JS codes are unique. Such as 0.1 plus 0.2 not equal 0.3, however, 0.1 plus 0.5 equal 0.6. And ajax is excellent. Now axios can work well without ajax.

In the free time, I learn about main structures and MVC or MVVM design modal. (Modal-View-View-Modal). The main structures are Angular, Vue and React. Recently, Angular is too large to design a single page, so people choose React or Vue. And I design three shopping webpages for mobile devices. The pages use different methods to suit different length and height(percentage, flex, rem). Now I should use it fluently.

2018.06¶

Continue learning structue. Using modals can save more time and make codes use widely. Start designing Leisure website and a company fullpage. We have a small team and my main job is to design webpages. And I need to test my codes with others groupnumbers. There are many bugs that we can't realise until testing together. And sometimes designer perfer another color or logo, I need to clip them right away. The jobs are interesting and busy. Tired but happy.

And I learn some chrome inside render methods. There are three engines and each engines can render diferent parts of webpage. There are much knowledge that I need to learn. As a developing frontend develper, I have to know Internet basic and data structure knowledge as quickly as I can.

2018.07¶

I start to learn Mina frame for WeChat small app. I have a personal Wechat Official Platform. In one day, I will design my own WeChat Small App by myself.

The Mina frame use different programming language, wxml and wxss. Wxml language uses different tags(such as View tag). Wxss use different length, rpx, rather than px or percentage methods. This frame has many useful modules and we can easily use the APIs. However, data tramsfer by using props and state is not easy for me.

Never stop coding!

2018.08¶

August is a very busy month. Not only did I finish so mush codes of html, css, js, but also I learn plenty of new knowledge points. To be honest, I didn't have one day rest. At night I always learn new grammar. And there are some details about August.

Do some unit test.

It is significant to do unit test before using a new javascript API. When we finished writing an API, we must test it right away. The main test tool are Mocha or Jest. Using assertions to test if the API could return a right value. Unit test is basic test. The basic method is test APIs one by one. The advanced method is test lots of APIs once. Using one result as other API's parameters. But you should make sure that most of APIs are right and can return what you want. If there are some errors or warnings, you should check them one by one. For a fresh bird, I choose the first method now. In the future, I will use the advanced methods to release my work pressure and deal with other projects. Time is precious.

learn new OS（operating system）

I heard MAC OS and Linux OS before. But I didn't operate them before. Now I need to learn the basic knowledge. The Linux system is much different from Windows system. I use Ubuntu, a special linux OS. The base and vim command line need to remember. In the future, I will use them much. Bye-Bye windows.

Till now I can't find adequate PS and other softwares in MAC. I didn't have an Apple ID so I can't down app from App Store. The NodeJS and NPM parts are useful in MAC. I still use sublime as my editor software. The webstorm and atom editor are useful too.

new knowledge of Jest

What's more, there are many new knowledge points. I need to learn reactstrap(bootstrap in react framework). The ECMA script6 is necessary. The differences between const and let (let use much memory than const, about 2% to 3% maybe). And array function is useful. It can bind this to using function automaticly.Others, learn button/DropDown/Modal compoennts of reactstrap.

React framework contains several life cycle fucntion. How to use them fluently needs much time to practice. And slate.js framework, a rich text framework, is also important. Map Object/Selectiom/Value/Change and ... blob file. write later because there are much things to deal now. reading blog from RuanYF.

2018.09¶

Plan: learn slate.js (the main APIs) and react framework step by step. Hurry up! And this is the first time to use vim to write readme.md And use it more.

There are so many things to learn. And I found that it is important for us to learn not only code basic using but also inner logic of basic. For instance, learning slate-core codes is significant for understanding lower codes logic.

And I learn code (JS) data structure of JS. The bacis data strcuture is Array. In JS, we can use Array to create other complex data structure. (queue/stack/linked chart). What's more, the basic network knowledge is also essential and basic.

2018.10¶

For a frontend engineer, I should use frontend technique fluently. The main structure and basic logic and data structure. And I thought that I should not only know my aspects but also learn other aspects. The basic network and back-end knowledge are also important. I needn't write back-end codes, I just know their methods and thoughts. And I should learn frontend parts firstly.

Recently work is not busy (compared with Sep). And there are other things I have to deal with, such as tax, insurance, family tree : ) I will spend at least 20 percentages of my time and monty into future development (books and other online lecture). Never give up! Just hurry up!

There are so many things to learn. And I found that it is important for us to learn not only code basic using but also inner logic of basic. For instance, learning slate-core codes is significant for understanding lower codes logic. And I learn code (JS) data structure of JS. The bacis data strcuture is Array. In JS, we can use Array to create other complex data structure. (queue/stack/linked chart). What's more, the basic network knowledge is also essential and basic.

2018.11¶

1.Basic knowledge

Recently I read some books of traditional JS methods. Before ES6 ( class and other new points of OO, object-oriented ) come into our eyes, the constructor is important.

The curry function, which use less parameters in a single function, can gain more useful features. Eg: for a pure function, y = f(x). When we set a special x, this function can return a solid y for this special x. This function is called pure function. And if we enter a special parameters into another function, that function returns are not fixed. There are a lot of mess. So the main thoughts of curry function is that we should use only one parameters in a special function. If a function have too much codes and parameters, we should separate them into different parts. This method can decrease function coupling， and increase codes reusability. (PS: learn more CS words).

The memory of function. In fibonacci method, we can use resursion to culculate. function return n < 2 ? n : fibonacci(n-1) + fibonacci(n-2). The basic method has a shortage. And we have to calculate fibonacci(3) for too many time for instance. A new method is we can use closure, and create an array to store some result. If function has calculated some results, read it from the result array directly, else calculate it and store the results into array. The result array is in a closure. Finally, we just return the last result rather than result array. If n equals 10, traditional methods need 400 times, however, new method just needs about 30 times.

2.Learning methods

learn more of data structure. If I just use some basic components in my daily work, I won't get more new information of CS development. It is necessary for me to learn new method and new grammar(ES7). The latest React structure has some useful utils. React-Routers and React-Native are some of them. I need to learn them.

We all know that if you didn't study every day, you would been last for a long distance. So just hurry up! Don't hesitate to learn new knowledge. We all know that it is totally diffcult for us to learn in such a short periods, but we need to learn for the future. Two years age, angular is hot in whole China, plenty of my friends use angular as their basic frontend structure. Now, if you use angular, it is not a wise choice.

3.Singles' day thoughts

Today is Nov 11^th, the traditional shopping days. Ten years age, shopping day was created by Alibaba. Ten years later, there are 100 billion yuan trades during just ten hours. But I never buy any goods, because I must learn new CS knowledge. During ten years development, the main trades have changed a lot. Much people use mobile Apps to buy goods thought internet. And basic desktop browsers are decrease.

And I need to learn some mobile frontend methods. First, mobile app use lastest brower in Android or iphone, so we need't deal with old ie version. The new mobile screen and flex design are more important. Second, our mobile phone's hardwares are becoming more and more gaint. We can add some complex tecnology to increase clients thought. Third, 5G network will use in daily life. And we need to thought how to open web page sooner. And sending much data or async functions will use much. Using lazy-loading tec is also important.

2018.12¶

The last month of 2018 is arriving. How time flies! This year I faced lots of differences in my life. It is a turning point for me.

There are lots of bugs in my codes which I wrote in last several months. In the beginning period, our product has a basic design, however, now design has some adjustments so that some codes are not good enough for new features. So fix them as soon as possible.

I learn some design method in React. We all know that React use props and status. When some datas need to transfered from one component to another comonennt, we can use props. But when we want to transfer data from child component to parent component, props are not useful as before. So we can set a hoop-function in parent component. Transfer this function by props. When child component was rendered or some events happen, we can use this hoop function to listen event happened. The function name can use "on doing something".

I find it is so busy in my daily life. And it may be the real life. Just face the difficults and overcome my weaknesses. I have to balance life, job, health, family and so on. It may be a little tough in the early period. Step by step, just do it!

2019¶

2019.01¶

Happy new year and just continue coding! In 2019, there are several things I need to learn. It is obvious that CS develep rapidly, so learning new knowledge is necessary to every code farmer(hahaha). Don't hesitate to code!

There are much things that are useful. I am sure that svg and canvas will replace traditional image ,such as png and icon. And I think watermark-dom and echarts are amazing. Using python to create html is so convenient. These techs should be learned as soon as possible. Canvas and csv image are also useful.

These days I found that old knowledge should be learned again so that we can get new treasure. And fix some weaknesses during this period. Learning some difficult things is needed.

2019.02¶

Happy Spring Festicval! The code-mirror is a useful library when we show codes in different styles. These days I think that we should learn new knowledge forever.

2019.03¶

At the last day in March, I need a review about this month. There are some thoughts.

How to deal with new knowledge and old tect knowledge? React-Router is much better than hash-transfer. And it may save more resources. When we use <Link> tag to jump to other page, the whole page don't reload, React just repaint for the added component. The inner tag is <a>, and react-router forbid the default function of <a> tag.
You shouldn't create a circle, and you should use the circle. Make our dialogs and other component more useful.
Everyone have same time in one day. God gives us same time. In a whole day, working hard and having a rest and having a date is not an easy thing. Now I should grasp more precious time in learning. And exeresicing is also important in the free time. Don't sit for a long time and don't sleep too late. If you did that, you would regret in one day.

2019.04¶

I read a book called《Make you code cleaner》.This is the main opinions: a function should contain single function and codes as less as possible. Use clear parameter as name of variable. A funciton should do only one thing. A class or a component in React should show a single UI component. And modify your codes after you write down them. When you review your codes, you can change and delete much useless codes.
RYF said, we should learn inner knowledge of coding. We all know that structure can change in one day, but the basic data structure and algie is still there. Write more and learn some inner thought in code. It is important. In the free time ,wu shouldn't do the basic things once and another times, but we can deal with tough problems for many hours. Because if you can resolve the tough problem, you are making progress.

2019.05¶

What is the difference between code farmer and code designer? The farmer can only fix some bugs, can build a wall which is not good, however, thr designer can create some codes and build a beautiful house. So basic logic is more important than fix some easy bugs. And important methods are also important.

2019.06¶

After about one year coding, I found that I have wrote down more than 40 thousands lines of code in public repo in github. I need to learn more knowledge about network/algie/data-structure in my free time. There are many coding language in different area, but the above basic points is similar. Seven years age, I started to learn basic computer programming(C), then I learned basic C++ by myself(just a little C++). Five years age, python was hot and I know it is a glue and can generate codes from C and C++, however, I didn't learn python at that time. Two years ago, I learn a little visual basic(VB) when I use excel software, it is boring. And I learn HTML/CSS/JS in the whole year. Last year, I learn a little ruby/java because my co-worker use them as network backend. Now I learn python in my free time, python can do much thing, such as network programming(django/flask), Artificial Intelligence, Machine learning, scaning webpage, it is amazing. During these years, my data-structure and database was still weak. Hurry up and make great progress!

2019.07¶

July is a little busy. During daily work time, I spent much time on dtable. This project is a table just like excel. And data structure and view-model structure is complex. From table to view, from mast to canvas row cell editor. App-store and apply-invert data are devided in several files. And there are many views, a function should work well in every views. There is a mess.

In my free time, I learn basic ES5 again.(including DOM Event, except BOM, because I waste much time on other thing). The e-book was written by RYF. Lucky, I pull two requests into this book after I find some mistakes. I thought I could learn it before July 15^th, but I didn't. On weekends(only six days), I climbed mountains and enjoy with friends. So DDL is not valid. Otherwise, it was really hot in my house without a fan or air-conditioner. I bought it last week thought Taobao but I can't receive fan till now! It is hot now! So I have to stay at KFC at evening. Sometimes there were some mosquitos in my house. It was terrible.

And I have worked for a whole year, I learn much things during the whole year. Everyone have same time in his lives, I am trying to save my time and learn efficiently.

2019.08¶

Things are still complex. A pile of papers and blogs should be reviewed.I have studied ECMA5 from RuanYF and basic ES6. The mind map is doing.

2019.09¶

I reviewed and rewrite some notes from 2018-09 to 2018-12. Till now, notes in 2018 have been reviewed.

I found some informations: The basic knowledge(JS basic grammar) is more important than structure(such as jquery and react). During the last three years, we used backbone, angular, react, VUE, and in the future, new structure will replace react and VUE again. And basic knowledge is stable. So next month I should learn basic knowledge again.

remove C and Java codes from this repo.
move VUE to another Repo(special for VUE)
review codes in 2018，then put them into learn folder. (Sig and eme)
move makefile and babel into another repo(webpack-babel)，remove src folder and dist folder.

2019.10¶

There are less than 100 days left in 2019. Don't leave any regrets these days.

Delete all VUE and python codes
Javascript Basic Data structure
review codes in 2019（01-04）

2019.11¶

basic MySQL by aliyun education
Whole stack basic by RYF（React+node+test）
React video JSpang(not good)
Leetcode 50 + unit test + pytest

2019.12¶

The most important thing is that review whole year knowledge. And try to sovel leetcode problems as many as possible. It is really busy in December.

leetcode 100+

2020¶

2020.01¶

The main task is review 2019 codes. During 2019, I have learned basic knowledge of ES5 and ES6, mysql and data structure. And try my best to finish at least 100 Leetcode issues. It is a challenge for me at first. In 2020, learn and review them again.review 2019 notes

2020.02¶

China Spring Festival Hiliday and COVID-19.NetEase senior frontend lessions.

2020.03¶

I should remember these useful knowledge in this repo. If I just write down and never review and remember it, these knowledge can not become my own knowledge. That is why I read mamy books and articles but I find nothing. Write it down -> remember several times is a useful method.

2020.04¶

How to improve programming ability？

read books (learn net knowledge fast)
do projects (know how to use these knowledge)
read source code (know other people's code)
find answer in google(know slices of useful knowledge)
learn NetEase senior lessions1 and lession2

2020.12¶

learn leetcode basic methods(sort, search) review basic data structure(array, object, list, tree, graph and so on).

2021¶

2021.01¶

Leetcode finished 400 issues. Learn basic aglre such as in-place, dichotomous algorithm, greedy Algorithm, dynamic programming algorithm.
Sort rows animation. Use requestAnimationFrame to generate animations.

2021.02¶

review all paperworks and try to remember this issues.
resist on learning in QQ online stydy room.
Linked list: Reverse linked list, find the intermediate node of the linked list;
Stack: valid bracket string, array dimension reduction
Three kinds of binary tree traversal; maximum and minimum depth; nearest common ancestor; symmetric binary tree; binary tree path; binary search tree (verify binary search tree, sort array is converted into binary search tree; tree is converted into linked list; generate different binary Fork search tree) The binary search tree is not very familiar;
Simple understanding of frontend monitoring

2021.03¶

rebuild personal blog using mkdocs and seperate it into several parts
use some autometic method to refresh blog
todo: read, remember and rewrite blog soon.
I learned the paper interview questions once

2021.04¶

react-redux

2021.06¶

leetcode 500+
aha-algre（C）several sorts method and tranverse tree and graph. The pointer is a little difficult.

2021.12¶

Recent feelings:

I have learnt computer science for about five years. I must improve my comprehensive quality so that I can stand out in the future.

React vs Vue, and other various third-party libraries, such as Redux, React-Response, and feature components abound. Superset languages such as ts and less also abound. Backend frameworks range from Django and Flask for Python, Beego for Golang, PHP and Ruby for the past, Koa and egg for nodeJS. I have been in touch with a lot, but I didn't mastered it, what a pity, but I have some understanding of the basic structure logic.

The more you use it, the more you know it. If you don't use it, you will forget it. So what do you learn by yourself? How to learn? In small companies, versatile talents are needed, and the frontend and backend, database, networks, including products and design, need a simple understanding. However, due to the small scale of the company, the technical depth and work are not very standardized, and there is no particularly big competition to force them to make progress, which is the limitation. In large company , you may be just a screw that gets a frontend component or function right. That's the difference between two kinds of companies.

There is still a lack of comprehensive capabilities for large project architectures; I'm try it whenever I have the chance to improve myself.

What about future development? The core algorithm and ECMA syntax are still fundamental, and new technologies emerge in endlessly. So closely following the technical route of big companies (such as Alibaba and Tencent) represents the future development direction and technical standards.

Of course, life is not only about work, but also about future development and how to walk out of our own way in spare time.

2023¶

2023.05¶

I haven't updated my English blog for a long time, because I have been writing some technical and personal thoughts in my owb blog or CSDN blog for the past two years. In the last two months, I designed a Genshin Theme novel reader, from development to design, from backend to frontend, to testing. Surprise! Currently only version 1.0.0, containing basic functionality. In the future, some interesting features will be added to the new version.

Recently I have been thinking about my future personal development, which path should I choose, and what should I do in order to achieve my huge goals? Specifically, how to use working time to improve learning efficiency scientifically, and how to arrange my free time to balance life and work? There are so many things to juggle that I have to do the top 30% and delete the last 70%. Focus on the important things and don't waste time on trivial matters.

Hurry up! Don't waste time in a lazy life!

Last update: November 9, 2024