Archives on Time Friend

Audit Your Coding Habits with /insights

Mon, 27 Jul 2026 16:30:00 +0000

When you’re busy writing, you rarely stop to look at how you actually use your tools.

I’d been using Claude Code for a while, feeling pretty good about it. Then a friend said: “Try /insights.”

Start claude, hop into a session, and type:

/insights

Wait a few dozen seconds, and an HTML report pops up in your browser. It analyzes your last 30 days of Claude Code sessions and breaks them down: which projects you spent time on, which tools you used most, language distribution, and — the punchline — where your workflow is wasting tokens.

From Terminal to Team: When Agent Workflows Outgrow One Laptop

Sat, 18 Apr 2026 17:00:00 +0000

For the first few months, I used Claude Code alone in my terminal. Big productivity boost. But I hit a wall: when I closed my laptop, the agent stopped. Anything I needed had to happen while I was sitting in front of the keyboard.

If your usage is “only when I’m around”, Claude Code is plenty. But once you start thinking — can this code review run automatically? can this dependency update run every Monday? — you need it to work when you’re not there.

Reviewing Agent Code Is Different from Reviewing Human Code

Fri, 03 Apr 2026 13:25:00 +0000

Reviewing code written by a colleague is different from reviewing code written by an agent.

Work with someone long enough and you pick up their habits — one person loves reduce, another always misses edge cases. An agent has no habits. Every output depends on the session context.

Here are the checkpoints I’ve built for reviewing agent code.

First: did it touch things it shouldn’t have?

The agent’s biggest problem isn’t writing wrong code — it’s not controlling itself. It might fix one bug and casually modify a config file next to it, or rename a function that had nothing to do with the task.

Five Tasks You Shouldn't Give Your Agent

Sun, 22 Mar 2026 08:50:00 +0000

After a few months with agents, it’s easy to fall into the trap of throwing everything at it.

But some tasks really shouldn’t be delegated — not because the agent isn’t capable, but because the risk/reward ratio is wrong.

One: anything touching production data

Running SQL against a production database — even SELECT — I won’t trust an agent with. Claude won’t intentionally break things, but it might scan a full table because it misunderstood the query.

Agent and Assistant Are Not the Same Thing

Sat, 14 Mar 2026 15:40:00 +0000

When I first started using Claude Code, I spent a lot of time wondering: is this thing an agent or an assistant?

Most articles try to draw a clean line — assistant does one step at a time, agent pursues a goal autonomously. But after using it daily, the line is blurry. Most tools can switch between both modes.

The distinction that actually matters isn’t what you call it. It’s who initiates, who controls, and where it runs.

Claude Gets Dumber After 50 Rounds

Fri, 06 Mar 2026 11:10:00 +0000

After a few months with Claude Code, you’ll hit this: the same session, 50 rounds in, and Claude feels dumb.

It’s not your imagination, and it’s not the model. The context is blown.

How context explodes

Claude’s working memory is finite. Early in a session, it remembers the goal, the decisions made, and what’s left to do. By round 50, the context is packed with dead ends, discarded approaches, and arguments about implementation.

What I Put in My CLAUDE.md

Thu, 19 Feb 2026 16:20:00 +0000

The most ironic thing? Complaining “I have to re-explain the project to Claude every session” while your project root doesn’t have a CLAUDE.md.

Don’t laugh. I was in that exact spot.

Turns out there’s a shortcut — run /init. Claude analyzes your project structure, detects build tools and test frameworks, and generates a starting CLAUDE.md. If you already have one, /init suggests improvements instead of overwriting it.

What CLAUDE.md is for

Claude Code reads this file at startup and uses it as the starting point for understanding your project. How to run tests, how the directory is organized, what conventions to follow — put it there, and it just knows.

Would You Merge Code an Agent Wrote Alone

Thu, 05 Feb 2026 09:45:00 +0000

Claude finishes editing and says “Done.” You glance at it, looks fine, merge it. Then Monday comes and production is down.

Without a runnable check, the agent’s “done” and your “done” are two different things. The most expensive bugs aren’t crashes — they’re silent wrong answers.

The simplest check: one line in your prompt

Add this at the end of your prompt:

Run the tests after you finish. Keep fixing until they all pass.

Claude will run npm test on its own, check output, fix what’s broken, and rerun. No input needed from you.

Writing Prompts That Land on the First Try

Thu, 22 Jan 2026 14:15:00 +0000

After using Claude Code for a while, you’ll notice most failed sessions trace back to your prompt, not the model. Claude can infer intent, but you can’t expect it to read your mind.

Lock down the scope

“Optimize this code” — what comes out is a lottery. Optimize for what? Performance? Readability? Removing dead code?

A good prompt names the file, the scenario, and how to verify:

Write an edge-case test for logged-out users in src/auth.ts. No mocks.

The tighter the scope, the more predictable the output. Vague prompts only make sense when you actually want the agent’s opinion — “what would you improve in this file” is fine, but keep it scoped so it doesn’t wander into hundreds of files.

Keeping Your Agent on Track with Plan → Code

Thu, 08 Jan 2026 10:30:00 +0000

When I first started using Claude Code, I had a bad habit: open the terminal, type one sentence telling it what to change, watch it go, and realize later it went in the wrong direction.

Here’s what I learned — agentic coding is a different skill from writing code. When you write code yourself, your hands follow your brain. When you use an agent, your value shifts to defining the goal and reviewing the result. Not typing faster.

Adding an Animated Logo to My Blog

Thu, 14 Aug 2025 17:00:00 +0000

That small square in the top-left corner of the site? It’s a video.

Grayscale by default. Lights up on hover — different color every time, and the playback speed surges then eases back down. Like it just woke up.

Why

The old logo was a static PNG. It felt lifeless. I had a short video clip lying around, so I swapped the static image for a video.

mp4 Has No Alpha Channel

CapCut removed the background on export, but mp4 doesn’t support transparency — it gets baked to black.

How I Built the Homepage Typing Effect

Tue, 12 Aug 2025 11:50:00 +0000

When you open the homepage, you see text being typed out character by character. Not complicated, but many people ask how it’s done.

This article explains the implementation.

How It Works

When the homepage loads, it picks a random quote from a JSON file, and uses Typed.js to simulate typing.

Homepage loads
 ↓
main.js detects it's the homepage
 ↓
Determine language (Chinese/English)
 ↓
Pick a random entry from /data/quotes.json
 ↓
Pass to Typed.js, start typing animation

Data Source: quotes.json

Quotes are stored in static/data/quotes.json.

Making My Blog Work Offline with PWA

Tue, 08 Jul 2025 15:30:00 +0000

PWA is a buzzword. For this blog, PWA means two things: manifest.json and Service Worker. manifest.json tells the browser “this is an app”, Service Worker makes it work offline.

This article focuses on Service Worker since it’s the complex part. manifest.json is straightforward, covered at the end.

What is Service Worker

A Service Worker is a script that runs in the background of your browser. It’s independent of the web page, working silently behind the scenes.

Setting Up Page Analytics for My Blog

Sun, 15 Jun 2025 13:20:00 +0000

Writing a blog without knowing if anyone’s reading feels empty. Analytics isn’t for KPIs, just for fun.

This blog has two analytics systems, each with its own purpose.

Busuanzi shows on article pages, readers can see how many times each article has been viewed. Open source, no registration needed, just include a script.

Google Analytics runs in the background, only I can see it. Used for traffic sources, user distribution, popular content, etc.

Adding a Comment System to My Blog

Tue, 06 May 2025 10:30:00 +0000

A blog needs comments. But I didn’t want to set up a database and moderation system just for that. Giscus is the compromise.

This blog uses Giscus for comments. It’s based on GitHub Discussions. All comments live in the GitHub repo, no database needed, no third-party service.

Full Flow

User opens article page
 ↓
Loads giscus.app/client.js
 ↓
Giscus script reads data- attributes
 ↓
Uses mapping="pathname" to get current URL path
 ↓
Queries GitHub Discussions API for matching Discussion
 ↓
Found → renders comment box and existing comments
Not found → shows "leave a comment" input
 ↓
User writes comment → clicks submit
 ↓
Redirects to GitHub OAuth (first time only)
 ↓
Comment written to repo's Discussions via API
 ↓
Giscus WebSocket listens for changes → real-time updates

User never leaves the page. Entire flow is seamless.

Deploying This Blog: From Push to Live

Thu, 10 Apr 2025 15:44:00 +0000

Static files need a place to live, accessible from anywhere in the world.

Platform: Cloudflare Pages

Cloudflare Pages over other platforms, three reasons:

Global CDN: edge nodes worldwide, visitors load from nearest location
Zero-config HTTPS: automatic SSL certificate issuance and renewal
Free tier: enough bandwidth and build minutes for a personal blog

Setup is simple: create a project in Cloudflare Pages dashboard, link your GitHub repo. Build commands and output directory are controlled in GitHub Actions, no need to configure in the dashboard.

What I Did for Google SEO on This Blog

Tue, 25 Mar 2025 11:08:00 +0000

This article only covers Google SEO. No other search engines. Reason: Google has the traffic share, doing Google well is enough.

Structured Data

The most important part. Structured data lets Google show rich results in search — publish date, author, summary.

Every article gets JSON-LD injected at build time:

{{ if .IsPage }}
<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "{{ .Title }}",
 "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 "author": {
 "@type": "Person",
 "name": "{{ .Site.Params.author }}"
 },
 "description": "{{ if .Description }}{{ .Description }}{{ else }}{{ .Summary | plainify }}{{ end }}",
 "url": "{{ .Permalink }}"
 {{ with .Params.tags }}
 ,"keywords": "{{ delimit . ", " }}"
 {{ end }}
}
</script>
{{ end }}

One thing to note: dates in JSON-LD must be ISO 8601 format (2025-03-17T10:43:00+08:00). If you only provide date without timezone, Google might not parse it correctly. Hugo’s .Date.Format outputs timezone by default, but if frontmatter doesn’t have timezone info, it assumes UTC — might not match your actual publish time.

How the Blog Build Pipeline Works

Wed, 05 Mar 2025 16:30:00 +0000

After writing articles, you don’t want to deploy them manually every time. The goal of automation is simple: push code and forget about it.

Two things: turn Markdown into static files and put them on the internet. Plus, automate the whole build process.

Gulp Tasks

Two Gulp tasks running in series:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

One line. Runs Hugo build, --buildFuture allows future-dated content, --minify handles HTML/CSS/JS compression at build time.

Customizing My Blog Theme

Sat, 15 Feb 2025 09:15:00 +0000

The theme is hugo-cactus-dark, a dark theme, clean and simple. Good enough for a blog.

But the original theme only had basic features. I needed bilingual switching, Giscus comments, page analytics, structured data — none of these were included. So I forked it and overrode the templates I needed in layouts/.

What Was Overridden

Templates in layouts/ have higher priority than the same files in the theme. I only overrode what I needed to change.

Going Multilingual: i18n for My Blog

Mon, 20 Jan 2025 14:21:00 +0000

Writing a tech blog has an awkward problem: Chinese content serves domestic readers, but there’s also considerable overseas traffic. So I went with both languages.

This blog is bilingual, Chinese and English. The same article has both versions, each with its own URL, independent of each other.

i18n has two parts: content internationalization (articles in both languages) and UI internationalization (buttons, menus, text switches with language).

Content Internationalization

Directory Structure

Using Hugo’s module.mounts for language mapping:

What My Blog Architecture Looks Like

Fri, 10 Jan 2025 10:00:00 +0000

Many people are curious about how this blog is built.

Looks simple, but there’s a lot behind it. Not a big project, but from an engineering perspective, I did quite a few things. Bilingual architecture, automated build pipeline, PWA, Google SEO, and so on.

So I’ll write a series to document the current setup. What I’m using, why I chose it, how the code is written, what performance considerations were made.

Long Time No See

Wed, 19 Jun 2024 19:02:36 +0000

Hello everyone,

It’s been almost three years since I last updated my blog. So much has changed since then. I want to share some of my recent experiences with you.

First, my whole family and I have moved to a new country. It was a big change for us. We are still getting used to everything.

In my job, I’ve noticed that front-end technology is not as demanding as I thought it would be. Instead, good communication in English has become the most important skill for me. English is now the main barrier in my life. It affects my job, my promotion, and everything in my career.

Mac Shortcut to Minimize All Applications

Wed, 31 Mar 2021 22:30:05 +0000

When using Mac, there are too many application windows on the desktop.

I’ve never been able to show desktop with one key like Windows.

After researching, there’s still a way to achieve the same effect on Mac.

Command+Option+H+M

2020 Year-End Reflections

Thu, 04 Mar 2021 16:41:00 +0000

Finally can write this article at this critical time node, although now it’s already March 2021. But never found a very good opportunity to write this article.

Because of pandemic reasons, I know everyone’s 2020 has too many stories to tell. I’m the same, this year is also a critical year of growth for me.

About Work

Because last year had certain progress in cross-platform aspects, after company organizational structure adjustment, established Light Application Group. Specifically doing cross-platform direction technical research to support company business development.

Recommended Order for Developing Taro Multi-Platform Applications

Wed, 16 Dec 2020 22:17:36 +0000

Developing Taro Multi-Platform Applications with Minimal Cost

All mini-programs, quick apps, React Native apps, etc. in our company are now being developed using Taro.

If you only need to support one platform, developing with Taro is no problem at all.

However, if you want to develop once and have it run normally on all platforms, you need to pay attention to many details.

Each platform has its own challenges.

Development Difficulty Ranking

Huawei Quick App > Quick App > React Native > Swan Mini-Program > WeChat Mini-Program > H5

How to Optimize Bundle Size for Quick Apps Developed with Taro

Tue, 15 Dec 2020 22:17:36 +0000

Quick App Duplicate Bundling Issue

When developing quick apps with Taro, there’s one issue that absolutely cannot be ignored: bundle size.

Due to the bundling characteristics of quick apps (below version 1080), if a third-party library is repeatedly used across multiple pages, that library’s code will be bundled into each page, causing the same code to exist in multiple pages.

Because quick app version 1080 is not yet widely deployed. If you rashly upgrade your quick app’s minimum platform version to 1080, you will lose a large number of users on lower versions.

What is a Tensor in TensorFlow?

Fri, 18 Sep 2020 00:00:00 +0000

Tensor

The term “tensor” was first introduced by William Rowan Hamilton in 1846. Yes, that’s the Hamilton who invented quaternions:

A Tensor is actually a multidimensional array
The purpose of Tensor is to be able to create higher-dimensional matrices and vectors.

Color Example

Color image files (RGB) are generally processed into 3-d tensors, where each element in the 2d array represents a pixel, R represents Red, G represents Green, B represents Blue

Enable Forced Dark Mode for Chrome and Edge on Mac

Thu, 17 Sep 2020 22:30:05 +0000

Enable Forced Dark Mode

Chrome

Enter browser, enter in address bar:

chrome://flags/#enable-force-dark

Edge

Enter browser, enter in address bar:

edge://flags/#enable-force-dark

Operation

Change first item Disabled to Enabled, then restart browser

Effective:

How to Disable Chrome CORS Restrictions on Mac

Wed, 16 Sep 2020 22:30:05 +0000

Disable Chrome Cross-Origin Restrictions

Because debugging often requires Chrome to disable cross-origin restrictions, most methods online are for Windows,

Here’s a note today:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

Math - Relationship Between Data Structures, Programming Statements, Basic Algorithms and Mathematics (Notes)

Tue, 15 Sep 2020 00:00:00 +0000

Many people say data structures and algorithms cannot be counted as mathematics.

Different data structures are products of applying mathematical thinking in programming. Each data structure has its own characteristics, helping us more conveniently implement certain specific mathematical models.

Data Structures

Don’t underestimate these data structures, they are actually “models” for solving problems

Array

Characteristics: Can directly locate required data through index, suitable for random access. Often combined with loop statements to implement iterative methods, such as binary search, Fibonacci sequence, etc.

Math - Naive Bayes Classification Algorithm (Notes)

Mon, 14 Sep 2020 00:00:00 +0000

Naive Bayes

“After updating our initial beliefs about something with objective new information, we get a new, improved belief.” —- Mathematician Thomas Bayes (Thomas Bayes, 1702～1761)

When you cannot accurately know the essence of something, you can rely on how many events related to that specific essence appear to judge the probability of its essential attributes.

The more events supporting a certain attribute occur, the greater the possibility that attribute holds.

Math - Probability, Joint Probability, Conditional Probability, Marginal Probability and Bayes' Theorem (Notes)

Sun, 13 Sep 2020 00:00:00 +0000

Formula symbol explanation: P(A|B) is conditional probability of A given B

Joint Probability

Various explanations and descriptions for understanding:

Joint probability refers to probability containing multiple conditions where all conditions hold simultaneously, denoted as P(X=a,Y=b) or P(a,b), some books also habitually denote as P(ab), but I’m not used to this notation, so below uses comma-separated notation. Must note that all conditions hold simultaneously!
Probability of intersection of two or more events

Math - Probability, Random Variables and Distributions (Notes)

Sat, 12 Sep 2020 00:00:00 +0000

Random Variable

Let the sample space of random experiment be S, X = X(e) is a real-valued single-valued function defined on sample space S. X = X(e) is called a random variable.
Essentially a function about basic events, independent variable is basic event, dependent variable is function value.

Random Experiment:

Satisfies:

(1) Repeatability: Experiment can be repeated under same conditions;
(2) Knowability: Each experiment has more than one possible result, and all possible results of experiment can be clearly identified in advance;

Math - Tree Depth-First Search and Breadth-First Search (Notes)

Fri, 11 Sep 2020 00:00:00 +0000

How to Use Recursion and Stack to Implement Depth-First Search?

The process of depth-first search is logically consistent with recursive calls.

Write a TreeNode Class Code, Supporting Node Insertion

class TreeNode {
 constructor(key){
 this.key = key;
 this.sons = []
 }
 insert(key){
 let node = new TreeNode(key);
 this.sons.push(node) 
 return node
 }
}
}

Try Creating a Tree

let str = 'hello word'
let str2 = 'abcdefg'

// Root node
let root = new TreeNode("root")

createTree(str,root)

createTree(str2,root)

function createTree(strs,parent){
 if(strs.length !==0){
 let found = parent.sons.find((item)=>item.key === strs[0])
 if(found){
 let newStrs = strs.slice(1)
 createTree(newStrs,parent)
 }else{
 let node = parent.insert(strs[0])
 let newStrs = strs.slice(1)
 createTree(newStrs,node)
 }
 
 }else if(strs.length === 0){
 console.log('Creation complete',root)
 return root
 }
}

Start Depth-First Search

// Use stack to implement depth-first search
// General idea is to push all nodes into array, then take last one to process, delete while processing.
// Until none left
function dfsByStack(root) {
 let stack = []; 
 // Create stack object, js uses array instead of stack, each element is TreeNode type
 stack.push(root); // Initialize, push root node
 while (stack.length) { // As long as stack has nodes, continue
 // Take out just pushed node
 let node = stack.pop(); // Pop top node of stack, get first node entered
 if (node.sons.length == 0) {
 // Already reached leaf node, output
 console.log('Already reached leaf node',node.key)
 } else {
 // Non-leaf node, traverse each of its child nodes
 // Note, here uses a temporary stack stackTemp
 // This is to maintain traversal order, consistent with recursive traversal order
 // If order not required, can directly push to stack
 let stackTemp = []
 for (let index = 0; index < node.sons.length; index++) {
 const son = node.sons[index];
 console.log(son.key)
 stackTemp.push(son)
 }
 // Put each node into stack sorted
 // Reverse order
 while (stackTemp.length) {
 stack.push(stackTemp.pop());
 }
 }
 }
 }

Breadth-First Search (BFS)

Breadth-First Search BFS (Breadth First Search) is also called width-first search. It is a strategy of expanding nodes that are generated first.

Math - Tree Concepts (Notes)

Thu, 10 Sep 2020 00:00:00 +0000

Basic Concepts of Trees

A tree is a data structure composed of nodes or vertices and edges (possibly nonlinear) that does not contain any cycles. A tree without nodes is called an empty (null or empty) tree. A non-empty tree includes a root node and (likely) multiple additional nodes, all nodes forming a multi-level hierarchical structure.

A tree is a special type of graph (graphs will be mentioned in subsequent articles).

Math - Dynamic Programming, Edit Distance Calculation (Notes)

Wed, 09 Sep 2020 00:00:00 +0000

Dynamic Programming (DP)

Many people abbreviate it as DP. Dynamic programming needs to derive the optimal solution of the final problem through optimal solutions of subproblems. Therefore, this method particularly emphasizes the transfer relationships between subproblems. We usually call these transfer relationships between subproblems state transfer, and call the expressions used to describe these state transfers state transfer equations.

Edit Distance (Levenshtein Distance)

Proposed by Russian scientist Vladimir Levenshtein (graduated from Moscow State University’s Department of Mathematics and Mechanics) in 1965. He won the IEEE Richard W. Hamming Medal in 2006 for his contributions to error-correcting code theory and information theory.

Math - Combination, Solve Schedule Planning and Natural Language Processing (Notes)

Tue, 08 Sep 2020 00:00:00 +0000

Combination

Combination is a mathematical term. Generally, selecting m (m≤n) elements from n different elements as a group is called a combination of m elements taken from n different elements. We call problems related to finding the number of combinations as combination problems.

For the complete set of combinations for all m values, we can call it All Combination. For example, for the set {1, 2, 3}, the complete combination is {empty set, {1}, {2}, {3}, {1, 2}, {1,3} {2, 3}, {1, 2, 3}}.

Math - Permutation, Solve Tianji Horse Racing and Password Cracking Problems (Notes)

Mon, 07 Sep 2020 00:00:00 +0000

Tianji Horse Racing Story

Tianji was a famous general of Qi, often raced horses with King of Qi, but always lost, very unhappy. Sun Bin wanted to help Tianji. He divided these horses into upper, middle, lower three grades. He let Tianji use his lower grade horse to fight King’s upper grade horse, use upper grade horse to fight King’s middle grade horse, use middle grade horse to fight King’s lower grade horse. After three matches, Tianji only lost first match, won last two matches, finally won entire match with King.

Math - Recursion, Divide and Conquer, From Merge Sort to MapReduce (Notes)

Sun, 06 Sep 2020 00:00:00 +0000

Teacher Huang Shen’s title is really too good, can’t find better title to describe today’s learning content. Haha~

Divide and Conquer Thinking in Merge Sort

Problem: Sort a pile of messy unordered numbers according to rules from small to large or large to small

Ordered Case

Try merging ordered arrays {1, 2, 5, 8} and {3, 4, 6} process.

Unordered Case

Try to continuously simplify problem, i.e., continuously simplify sequence, until only 1 number remains. 1 number itself is ordered,

Math - Recursion, Decompose Complex Problems (Notes)

Sat, 05 Sep 2020 00:00:00 +0000

Recursion and Loops

Theoretically all recursion can do, loops can achieve.

Recursion and loops are actually implementations of iterative method, and in certain situations, their implementations can be converted to each other.

Why Use Recursion

Since recursive function value return process is consistent with loop-based iterative method, why not just use iterative method directly, why still use recursive mathematical thinking and programming methods?

How to Find All Possible Summation Methods Under Limited Total?

Assume there are four denominations of currency, 1 yuan, 2 yuan, 5 yuan and 10 yuan, want to reward someone 10 yuan, can reward 1 ten yuan note, or 10 one yuan notes, or 5 one yuan notes plus 1 five yuan note, etc. How many schemes total?

Math - Mathematical Induction, Inject Soul into Computer (Notes)

Fri, 04 Sep 2020 00:00:00 +0000

What is Mathematical Induction?

Wheat grain placement rule on chessboard is, first square one grain, second square two grains, and so on, each small square has double grains of previous small square, until 64 squares filled. You discover grids 1 to 8’s wheat quantities are: 1, 2, 4, 8, 16, 32, 64, 128.

Find Pattern

For infinite sequence problems like this, we usually can use Mathematical Induction to prove

Math - Iterative Method, Make Each Calculation Closer to Truth (Notes)

Thu, 03 Sep 2020 00:00:00 +0000

What is Iterative Method?

Continuously use old variable values to recursively calculate new variable values.

Short Story:

Ancient Indian King Shah loved chess, planned to heavily reward chess inventor Prime Minister Sissa Ben Dahir. This clever minister pointed at chessboard and said to king: “Your Majesty, I don’t want other rewards, please put one grain in first small square of this chessboard, two grains in second small square, four grains in third small square, and so on, each small square has double grains of previous small square, until 64 squares filled, then give all grains on chessboard to your servant me!” King thought it trivial, happily agreed. But, when started putting grains, king discovered, before reaching twentieth square, one bag of wheat already empty. Then, bag after bag of wheat put into chessboard squares, king quickly realized, even bringing all India’s grain, couldn’t fulfill promise to Dahir.

Math - Remainder and Hash Function (Notes)

Wed, 02 Sep 2020 00:00:00 +0000

Remainder

Example 1:

Today is Wednesday, you want to know what day it will be 50 days later, you can calculate like this, divide 50 by 7 (because a week has 7 days), remainder is 1, finally add one day to today, this way you can know 50 days later is Thursday

Example 2:

If you want to display 1123 records, 10 per page, how to calculate total pages? I think you definitely divide 1123 by 10, finally get quotient 112, remainder 3, so your total pages is 112+1=113, and final remainder is extra data that can’t fill a page.

Math - Computer Origin Binary (Notes)

Tue, 01 Sep 2020 00:00:00 +0000

Computer Origin

Computer’s origin is binary counting method in mathematics

What is Binary Counting Method?

Daily Decimal

Arabic numerals consist of 10 counting symbols from 0 to 9, and adopt carry system, every 10 carries one place, take 2871 as example

Where ^ represents power or exponentiation operation. Decimal digit places (thousands, hundreds, tens, etc.) are all in form of 10^n. Need special attention, any non-zero number’s 0th power is 1. In this new representation, 10 is called decimal counting method’s base.

How Puppeteer Disguises Itself in Work (Crawler and Anti-Crawler)

Sat, 29 Aug 2020 20:32:05 +0000

To better protect our data and program security.

Today I’ll introduce how to detect if the web program accessing us is a headless browser, and some of their anti-detection methods.

Webdriver Detection

Generally, if in headless browser mode, navigator.webdriver will return true.

Detection Method

Simplest detection method

if (navigator.webdriver) {
 // Operations targeting headless browsers
}

How to Detect After Using defineProperty to Delete webdriver

If the other party uses the following method to delete the webdriver property, there’s still a way to detect it

Making Taro UI Support React Native

Thu, 27 Aug 2020 22:17:36 +0000

The Dilemma of Taro UI Not Supporting RN

Taro UI documentation mentioned early on that it might support RN, but it’s been over a year, and due to manpower issues in the Taro UI team, it hasn’t been compatible with RN yet.

Business is urgent, we can’t wait for that day. Do it yourself and you’ll have everything you need.

Problems with Traditional Taro Component Packaging on RN

Generally, after a component library is packaged, the dist/index.js file will look like this.

Taro Cross-Platform Development - Multi-Business Module Management React Native (Final)

Tue, 25 Aug 2020 22:17:36 +0000

React Native Hot Update Solution

RN business is becoming increasingly large, and more teams are collaborating. RN’s dynamic capabilities must be put on the agenda. For RN hot updates, the first problem is code splitting.

RN’s base library is very large, plus we depend on many third-party libraries. This code must be separated during code splitting. Business packages should be relatively pure, containing only business code. This ensures business packages are smaller, ensuring speed during hot updates.

Taro Cross-Platform Development - Multi-Business Module Management React Native (Part 2)

Sun, 23 Aug 2020 22:17:36 +0000

Implement a Simple Module Management Tool to Solve the Problem of Slow npm Pulling of Business Modules

Using npm to pull git repositories, the speed is actually acceptable. The main slowness is during postinstall when npm pulls git repositories, it needs to rebuild project code. Another point is that business modules also have dependencies, and npm install also needs to pull the same dependencies again.

These two steps can actually be omitted. The solution is to implement a simple module management tool to replace npm’s handling of loading business modules.

Taro Cross-Platform Development - Multi-Business Module Management React Native (Part 1)

Fri, 21 Aug 2020 22:17:36 +0000

How Can Native RN Projects and Taro Coexist?

Our team started practicing native React Native projects early on, for a long time,

All business modules were developed and maintained in one project. Over time, this project became a behemoth.

Plus later we introduced RN projects based on Taro development. To ensure native and Taro RN coexistence,

Whether it’s native RN projects or Taro projects, the main export index file format in package.json files is consistent.

Taro Cross-Platform Development - Dependency Management Issues

Thu, 20 Aug 2020 22:17:36 +0000

Currently, the platforms we reach through Taro include:

WeChat Mini Program
QQ Mini Program
Baidu Mini Program
React Native
H5
Quick App

To quickly allow business to reach all platforms, each of our business modules is independent.

They are compatible with different platforms according to business needs, and then assembled into a complete project during build time.

To meet the above needs and enable flexible development, each business module can be independently developed and run, without depending on the main project.

Taro Cross-Platform Development - Thoughts and Measures on the New Era of Cross-Platform Development

Tue, 16 Jun 2020 22:17:36 +0000

New Era

The emergence of cross-platform frameworks has transitioned front-end browser compatibility to a new era of client platform compatibility.

For startups, this type of framework can quickly test and reduce human and time costs.

Why Choose Taro

It’s not that Taro solution is particularly excellent. At the current time point, all current cross-platform frameworks are still in the improvement stage. The most complete platforms might be mini programs and H5.

Switch XCI to NSP Tool - 4NXCI Download

Sun, 02 Feb 2020 19:02:36 +0000

4NXCI is a tool to convert XCI files to NSP

Currently only supports Windows, other systems not supported

Github Address:

https://github.com/The-4n/4NXCI

Download Address

https://github.com/The-4n/4NXCI/releases

Usage Method

GUI Tool

If not used to commands can download GUI version, file naming roughly 4nxci-v4.03_GUI.zip

Command Line Tool

.\4nxci.exe [options...] <path_to_file.xci> 
 
Options: 
-k, --keyset Set keyset file path, default is ./keys.dat 
-h, --help Display help information
-t, --tempdir Set temporary folder
-o, --outdir Set export folder
-r, --rename Set exported nsp file's filename
--keepncaid Keep current ncas ID

About keyset File

Copy the following code into a txt file, then rename to keys.dat Use GUI or command line tool to import

2019 Year-End Reflections

Sun, 29 Dec 2019 21:29:00 +0000

This year can be said to be a fulfilling year, entered a new company. Everything changed, career very smooth. Also very grateful to my colleagues for their help and inspiration this year.

Compared to 2018, it’s a leap in growth. The more I think about it, the more I feel should have come to such a company earlier, fully showcase myself.

In the new company, all previous ideas about front-end automation were fully implemented company-wide. Micro-frontend architecture also got real application in company’s backend management system. And achieved certain results in Taro multi-platform isomorphic applications.

Continuous Integration - Code Quality Scanning

Sun, 15 Dec 2019 23:15:00 +0000

To facilitate managing company code quality, integrating code quality scanning with continuous integration is an important step. Currently the company is relatively young, but in just one year, we’ve had close to 300 frontend projects.

With so many frontend projects, how we ensure code quality becomes a very important matter.

With too many code projects, code review is necessary. But manual code review cannot guarantee efficiency. Due to differences in individual levels and familiarity with company standards, we cannot guarantee consistent standards across all projects. Some potential bugs may also be missed.

FREE-TO-SHOT - Horse

Sat, 07 Dec 2019 21:32:05 +0000

Shot on December 7, 2019 in Urumqi

Continuous Integration - Using GitLab CI for Frontend Project Continuous Integration

Fri, 20 Sep 2019 23:15:00 +0000

There are many continuous integration platforms on the market. Today I’ll introduce GitLab’s CI.

Starting from GitLab 8.0, GitLab CI has been integrated into GitLab.

Usage is very simple. As long as we create a .gitlab-ci.yml file in the project root directory and add a Runner, we directly integrate GitLab CI.

Integration method is very simple and convenient. Currently we put a .gitlab-ci.yml file in the front-end scaffold, and every subsequent front-end project can directly integrate GitLab CI according to standards.

Micro-Frontend Advanced 4 - Cross-Framework Shared Components (Widgetization)

Sat, 22 Jun 2019 22:17:36 +0000

In micro-frontend, we can let sub-modules use different framework technology stacks according to our business needs. Although reaching this step is already very beautiful, is this the end of micro-frontend?

The answer is no, micro-frontend boundaries can be further broadened.

The previous micro-frontend article https://time-friend.com/archive/qh7x5i5szfh/ introduced how to call React components between sub-modules with the same technology stack.

What we’re talking about today is how sub-modules between different technology stacks call components from different technology stacks.

Micro-Frontend Advanced 3 - Cross-Module Shared Components

Sun, 12 May 2019 22:17:36 +0000

After front-end microservices, we face a problem: duplicate code between modules cannot be reused.

If we use npm to manage our duplicate code, we’ll have additional costs maintaining npm packages. Updating npm package versions in sub-modules is also very troublesome. There’s no optimization in js file size either.

Today let’s talk about how to use one component simultaneously in multiple modules.

Approach

Manage public components in base module, encapsulate components as dynamic components, so when packaging we can split this component into a separate file. When other sub-modules need this component, dynamically get it from Base module.

Micro-Frontend Advanced 2 - Local Development Guide

Mon, 22 Apr 2019 22:17:36 +0000

After building our microservices front-end application using single-spa, there’s actually a problem that will always trouble us, That is how to develop effectively? How to be as simple and easy to use as our usual front-end application development. Today using umi sub-module as an example, hoping to give everyone an idea

Today I’ll introduce one method, hoping it helps everyone.

Module Loader

Do you remember my previous module loader, https://time-friend.com/archive/1a60cede/

We just need to encapsulate the original module loader into an npm package.

Micro-Frontend Advanced 1 - Umi-Based Submodule Solution

Sat, 13 Apr 2019 22:17:36 +0000

It’s been more than half a year since the first article about front-end microservices. Many people are interested.

Today let’s talk about how we build a more complete front-end microservices sub-module based on umi.

If you’re using front-end technology stacks other than React, Many of my handling methods can also be applied to other technology stacks.

Hope it helps you too.

Excellent umi Framework

In front-end mid-backend projects, front-end microservices needs are relatively strong.

MongoDB Migration - Backup and Restore

Wed, 27 Mar 2019 00:00:00 +0000

Recently did a migration of my crawler database, so here record MongoDB backup and restore

MongoDB Data Backup

mongodump -h dbhost -d dbname -o dbdirectory

-h: MongoDB server address, e.g.: 127.0.0.1, if not changed generally is: 127.0.0.1:27017
-d: Database name to backup, e.g.: test
-o: Backup data storage location, e.g.: /home/root/xxx,

MongoDB Data Restore

mongorestore -h <hostname><:port> -d dbname <path>

–host <:port>, -h <:port>: MongoDB server address, default: localhost:27017

A Bug Caused by .gitattributes File from Two Years Ago

Thu, 24 Jan 2019 19:33:33 +0000

Cause

On a whim, I opened a frontend project I wrote two years ago to start code review. I wrote this project alone for two years, roughly over a hundred thousand lines of code.

Found that Git in this project recognized all code files as binary files. This problem had troubled me for a long time, but I couldn’t find the cause. This led to my code having no diff history.

LintCode Longest Common Prefix

Sat, 19 Jan 2019 00:00:00 +0000

Write a function to find the longest common prefix string amongst an array of strings.

If there is no common prefix, return an empty string “”.

Example 1:

Input: ["flower","flow","flight"]
Output: "fl"

Example 2:

Input: ["dog","racecar","car"]
Output: ""
Explanation: There is no common prefix among the input strings.

Note:

All given inputs are in lowercase letters a-z.

JavaScript

/**
 * @param {string[]} strs
 * @return {string}
 */
var longestCommonPrefix = function(strs) {
 if(strs.length === 0)return ""
 let current = ""
 let prefix = ""
 let index = 0;
 let isTrue = true;
 while (strs[0][index]) { // Use first word as baseline
 current = strs[0][index]; // Use first word as baseline
 for(let i = 0; i < strs.length; i++){
 if((strs[i] || "")[index] !== current){
 isTrue = false;
 break
 }

 }
 if(isTrue){
 index ++;
 prefix = prefix + current;
 }else{
 break
 }
 }
 return prefix
};

LintCode Best Time to Buy and Sell Stock II

Sat, 12 Jan 2019 00:00:00 +0000

Given an array, its i-th element is the price of a given stock on day i.

Design an algorithm to calculate the maximum profit you can obtain. You can complete as many transactions as possible (buy and sell a stock multiple times).

Note: You cannot participate in multiple transactions simultaneously (you must sell the stock before buying again).

Example 1:

Input: [7,1,5,3,6,4]
Output: 7
Explanation: Buy on day 2 (stock price = 1) and sell on day 3 (stock price = 5), profit = 5-1 = 4.
Then buy on day 4 (stock price = 3) and sell on day 5 (stock price = 6), profit = 6-3 = 3.

Example 2:

Input: [1,2,3,4,5]
Output: 4
Explanation: Buy on day 1 (stock price = 1) and sell on day 5 (stock price = 5), profit = 5-1 = 4.
 Note that you cannot buy on day 1 and day 2 and then sell them later.
 Because this involves participating in multiple transactions simultaneously, you must sell the stock before buying again.

Example 3:

Input: [7,6,4,3,1]
Output: 0
Explanation: In this case, no transaction is completed, so maximum profit is 0.

JavaScript

/**
 * @param {number[]} prices
 * @return {number}
 */
var maxProfit = function(prices) {
 let n = 0;
 prices.forEach((element,index) => {
 if(element < prices[index +1]){
 n = prices[index +1] - element + n
 }
 });
 return n
}

Canvas Cross-Origin Image Ultimate Solution

Thu, 10 Jan 2019 16:14:25 +0000

Browsers, for security reasons, do not allow Canvas to use getImageData toDataURL to process cross-origin fetched images.

Traditional Solutions

1. Server Needs to Configure Access-Control-Allow-Origin

I believe everyone has seen this line of code too many times, I won’t elaborate

header("Access-Control-Allow-Origin: your-domain");

2. Set crossOrigin Attribute

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous'; // This line of code
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

Up to here, your cross-origin problem is basically solved. But because of some objective factors, backend engineers refuse to help you set cross-origin headers, what should you do?

The Ultimate Solution for Cross-origin Images in Canvas

Thu, 10 Jan 2019 16:14:25 +0000

Browsers do not allow Canvas to use getImageData or toDataURL on cross-origin images due to security concerns.

Traditional Solutions

1. Server needs to configure Access-Control-Allow-Origin

I’m sure you’ve seen this line of code many times, so I’ll keep it brief.

header("Access-Control-Allow-Origin: your-domain.com");

2. Set the crossOrigin Attribute

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

At this point, your cross-origin issues are mostly resolved. But what if the backend engineer refuses to set the cross-origin header for objective reasons?

Git Case-Insensitive Causing Annoying Problem

Wed, 09 Jan 2019 19:33:33 +0000

Because a colleague changed a folder name from lowercase to uppercase, I couldn’t directly push, rebase and other operations locally. Very annoying~

error: The following untracked working tree files would be overwritten by checkout:
 xxx.js
Please move or remove them before you can switch branches.
Aborting

Solution

Set to case-sensitive (must restore configuration after problem is solved)

git config core.ignorecase false

Although setting case-sensitive will always affect code in other branches, so it’s not recommended to use this configuration permanently. After the problem is solved, it should be changed back.

Visual Studio Code's jsconfig.json

Tue, 08 Jan 2019 19:33:33 +0000

Today let’s talk about some tips for configuring Visual Studio Code’s jsconfig.json.

What is jsconfig.json?

If your project has a jsconfig.json file, its configuration can provide personalized support for all JS code in the file’s directory.

Tip: If you’ve just added this file to your project, remember to restart VSCode.

Examples

exclude Property

When VSCode scans project code, if it encounters node_modules, it becomes very slow.

If you want to improve editor performance, you should exclude this folder.

Frontend Interview Knowledge Collection - JavaScript

Mon, 07 Jan 2019 22:17:36 +0000

JavaScript Interview Knowledge Summary

1. Introduce the basic data types of JS.

JS has six basic data types: Undefined, Null, Boolean, Number, String, and the Symbol type added in ES6,
which represents a unique and immutable data type after creation. Its appearance is mainly to solve the problem of possible global variable conflicts.

2. How many types of values does JavaScript have? Can you draw their memory diagram?

Related knowledge points:

Frontend Interview Knowledge Collection - HTML

Sun, 06 Jan 2019 22:17:36 +0000

HTML Interview Knowledge Summary

1. What is the purpose of DOCTYPE?

Related knowledge points:

IE5.5 introduced the concept of document mode, which is implemented through document type (DOCTYPE) switching.

The <!DOCTYPE> declaration is located at the first line of an HTML document, before the <html> tag. It tells the browser's parser which document standard to use for parsing.

The absence or incorrect format of DOCTYPE will cause the document to render in compatibility mode.

Answer (refer to 1-5):

Frontend Interview Knowledge Collection - CSS

Sat, 05 Jan 2019 22:17:36 +0000

CSS Interview Knowledge Summary

1. Introduce the standard CSS box model? How is the low-version IE box model different?

Related knowledge points:

(1) There are two box models: IE box model (border-box) and W3C standard box model (content-box)
(2) The box model consists of four parts: content, padding, margin, border

Difference between IE box model and W3C standard box model:

(1) W3C standard box model: width and height properties only include content, not border and padding
(2) IE box model: width and height properties include content, border, and padding, referring to content
+padding+border.

In IE8+ browsers, which box model to use can be controlled by box-sizing (a new CSS property). The default value is content-box, which is the standard box model.
If box-sizing is set to border-box, the IE box model is used. In IE6, 7, 8, if DOCTYPE is missing, the box model will be interpreted as IE box model.
If DOCTYPE is declared in the page, all browsers will interpret the box model as the W3C box model.

Answer:

Frontend Interview Knowledge Collection - Comprehensive

Fri, 04 Jan 2019 22:17:36 +0000

HTML, HTTP, Web Comprehensive Questions

Common sorting algorithm time complexity and space complexity

What SEO should frontend pay attention to

Reasonable title, description, keywords: search engines weight these three in descending order. Title should emphasize key points, with important keywords appearing no more than twice and positioned early. Different pages should have different titles. Description should summarize page content concisely, with appropriate length and no keyword stuffing. Different pages should have different descriptions. Keywords should list important keywords only.
Semantic HTML code compliant with W3C standards: semantic code helps search engines understand web pages easily.
Important content HTML code placed first: search engines crawl HTML from top to bottom. Some search engines have length limits on crawling, so placing important content first ensures it gets crawled.
Don’t output important content with JS: crawlers don’t execute JS to get content.
Minimize iframe usage: search engines don’t crawl content inside iframes.
Non-decorative images must include alt attributes.
Improve website speed: website speed is an important factor in search engine ranking.

Session tracking methods in web development

cookie
session
URL rewriting
Hidden input
IP address

Difference between `<img>`’s title and alt

title is one of the global attributes, used to provide additional advisory information for elements. It’s usually displayed when the mouse hovers over the element.
alt is a unique attribute of <img>, an equivalent description of the image content. It’s displayed when the image cannot load and is used by screen readers to interpret images. It improves image accessibility. Except for purely decorative images, it must have meaningful values, and search engines focus on analyzing it.

What is doctype? Examples of common doctypes and their characteristics

<!doctype> declaration must be at the top of the HTML document, before the <html> tag. In HTML5, it’s case-insensitive.
<!doctype> is not an HTML tag; it’s an instruction to tell the browser which HTML version the current page uses.
Modern browser HTML layout engines determine whether to use quirks mode or standards mode for rendering by checking the doctype. Some browsers have a “almost standards” mode.
In HTML4.01, <!doctype> points to a DTD. Since HTML4.01 is based on SGML, the DTD specifies markup rules to ensure the browser renders content correctly.
HTML5 is not based on SGML, so DTD is not needed.

Common doctypes:

Abstract Syntax Tree AST - Behind the Scenes Hero

Thu, 03 Jan 2019 17:33:33 +0000

Abstract Syntax Tree AST

In computer science, an abstract syntax tree, or syntax tree for short, is an abstract representation of the syntactic structure of source code.

Here I’ll introduce a website https://astexplorer.net, which allows you to clearly see how a piece of js, css, and other languages are converted into syntax trees.

In our browsers, our js code is also parsed into abstract syntax trees and then further analyzed and operated on.

2018 Year-End Reflections

Sat, 29 Dec 2018 21:29:00 +0000

Today is the last working day of the year, now I’m on the high-speed rail. Already used to using computer to work on something on high-speed rail. Looking back, don’t know how many versions I’ve released on high-speed rail, fixed how many bugs. Haha~

Looking back at 2018, for me it’s legendary, it’s tortuous, even a bit depressing. Fortunately personal growth wasn’t delayed by objective reasons.

My Team

Thinking back to July this year, the front-end team I personally built was disbanded due to macro environment reasons, really heartbreaking. If developed normally, I think should be able to build into my Dream Team. At least everyone is so passionate about technology.

Talking About HTTP X-Forwarded-For and X-Real-IP

Sat, 29 Dec 2018 16:14:25 +0000

Recently when looking at NetEase Cloud Music API nodejs project documentation.

Found in the calling instructions, there’s a section that says:

Due to NetEase restrictions, using this project on foreign servers will be restricted. To solve this, you can use mainland servers or use a proxy. Thanks to @hiyangguo for the solution: add X-Real-IP’:‘211.161.244.70’ // any domestic IP in the ‘headers’ section of ‘util.js’ to solve

NetEase Cloud Music API calls have restrictions for foreign countries. To bypass such restrictions, you must modify X-Real-IP in headers to solve.

Angular Path Alias Configuration

Thu, 27 Dec 2018 22:17:36 +0000

Angular CLI has webpack built-in, so path aliases can be configured. The configuration method is almost the same.

Configure Path Alias

Find the tsconfig.json file in your project root directory.

Note: If your configuration doesn’t take effect, check if your baseUrl is configured correctly.

{
 "compilerOptions": {
 "baseUrl": "./src/", 
 "paths": {
 "@app/*": ["app/*"],
 "@services/*": ["app/services/*"]
 }
 }
}

Before Configuration

import { Api } from '../../../../../services/api.service';
import { xxx } from '../../../../../services/api.xxx';

After Configuration

import { Api } from '@services/api.service';
import { xxx } from '@services/api.xxx';

Some development tips, hope this helps you.

TypeScript's Blessing: JSON To Interface

Tue, 25 Dec 2018 19:33:33 +0000

When using TypeScript, we need to write a lot of Interfaces.

But a JSON data object often has too many fields. Writing them one by one takes a lot of time.

When promoting TypeScript within a team, usage issues often create obstacles, and it’s not uncommon to eventually abandon it.

Today I recommend this plugin, hope it helps you.

JSON to TS Plugin

Installation

ext install json-to-ts

Copy to clipboard then run shortcut (Ctrl + Alt + V)

Centos7 How to Use yum to Upgrade Git to Latest Version

Mon, 24 Dec 2018 20:32:05 +0000

yum upgrade Cannot Upgrade Git to Latest Version

In CentOS7, the default git version is 1.8.x

Check Local Git Version

git --version
git version 1.8.3.1

If you want to use yum to upgrade to 2.0+ version

Direct yum Upgrade Won’t Upgrade to Latest Version

yum -y upgrade git
git version 1.8.3.1

But I don’t want to download source package, compile on local machine and export environment variables that way. Still too troublesome.

Recommended: An Angular Electron Project Template Ready to Use

Thu, 20 Dec 2018 19:02:36 +0000

The official Angular website does provide an official Angular template for Electron. But the version is 2.0, which is really too old. I doubt anyone will maintain it anymore. Yet it’s still listed on the official site. This misleads many beginners — at least it made me think there wasn’t a newer, usable Electron template for quickly creating projects.

Angular-electron

Here I recommend a highly complete template that’s ready to use out of the box:

Angular 7 + Electron Main Process and Renderer Process Communication

Wed, 19 Dec 2018 19:02:36 +0000

Process Types in Electron

In Electron, there are two types of processes: the main process and the renderer process.

The renderer process can be understood as the view layer — the process that displays pages, which we’re very familiar with. Here you can use Node.js API capabilities as well as perform browser operations we’re already used to. But when you need to invoke operations that only the main process can handle, you need a communication mechanism to tell the main process what you want to do.

Building an Angular 7 + Electron Desktop App from Scratch

Tue, 18 Dec 2018 19:02:36 +0000

What is Electron?

Electron is a library for building desktop applications with JavaScript, HTML, and CSS. These applications can be packaged to run on Mac, Windows, and Linux, and can also be published to the Mac and Windows App Stores. This means that as long as you have front-end development skills, you can easily build cross-platform desktop applications.

Electron’s Main Process and Renderer Process

Electron has two types of processes: the main process and the renderer process. Some modules can only run on one or the other, while others have no restrictions. The main process acts more as a behind-the-scenes role, while renderer processes are the individual windows of the application.

2018 Last Frontend Sharing (Slides Provided)

Thu, 13 Dec 2018 21:32:05 +0000

Improving Code Review Efficiency with Husky

Tue, 04 Dec 2018 00:00:00 +0000

During code review, code style is one of the review criteria. Reviewing code style involves a certain amount of work.

To reduce the workload of code review, why not standardize code style before committing?

This way we can save a lot of time during code review and spend it on more meaningful things.

Git Hooks

Git provides hooks — mechanisms to trigger other programs when operations like code commit, push, etc. occur.

Three Keys to Maintaining Code Review Habits in Your Team

Fri, 30 Nov 2018 14:00:00 +0000

We’ve talked about code review before. Maintaining a code review habit in a team is quite difficult. We need proper processes, tools, and institutional support to ensure the efficiency and quality of our code reviews.

Process Support: Gitflow

We’ve introduced the Gitflow workflow before.

It roughly goes like this:

Developers create a dedicated branch in the local repository to develop features.
Developers push branch changes to the public Git repository.
Developers initiate a Merge Request through Git.
Other team members review the code, discuss, and make changes.
The project maintainer merges the feature into the official repository and closes the Merge Request.

Tool Support

Enforce ESLint

Use ESLint strictly. Before code is committed, use tools like husky to enforce ESLint checks. Ensure that all submitted code passes ESLint first.

cheeriojs Chinese Parsed to Unicode Issue When Loading HTML

Thu, 29 Nov 2018 20:32:05 +0000

cheeriojs Parsing Chinese to Unicode Issue

When using cheeriojs, I found that whenever using the html method, Chinese will be parsed to unicode by default.

Usage is as follows:

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将会被解析成unicode</title>');
console.log($('title').html());

When using the text method, the above problem doesn’t occur

var cheerio = require('cheerio');
var $ = cheerio.load('<title>我是中文,我将会被解析成unicode</title>');
$('title').text()

Solution

Default Configuration

When we load html content, cheerio actually has default configuration. HTML parsing uses the htmlparser2 library, so htmlparser2 configuration is also applicable in cheerio.

Declarative vs Imperative Programming from a Front-End Perspective

Mon, 26 Nov 2018 11:46:35 +0000

Introduction

Declarative Programming: Tell the “machine” what you want (what), and let the machine figure out how to do it (how).
Imperative Programming: Command the “machine” how to do things (how), so no matter what you want (what), it will follow your commands.

How do we explain these two concepts?

Let’s use these two ideas and explain both programming paradigms with the technologies we are most familiar with.

Declarative Programming

Tell the “machine” what you want (what), and let the machine figure out how to do it (how).

Angular Template Safe Navigation Operator ( ?. )

Sun, 25 Nov 2018 22:17:36 +0000

This is very practical and frequently used operator in Angular development. React and Vue don’t have this feature natively.

In our daily development, when accessing property paths.

If for some reason the path contains null or undefined, and we continue to access properties, the entire program will crash, preventing the program from continuing to run.

Here’s an example:

var obj ={
 a:1,
 b:{ // Sometimes, this property might not exist
 c:2,
 d:3 
 }
}
obj.a // Normal access
obj.b // If this property sometimes doesn't exist, accessing it will only return undefined, won't cause an error
obj.b.c // When property b doesn't exist, accessing properties on undefined will definitely cause the program to crash

Safe navigation solves the above problem. We just need to change the . before uncertain properties to ?. to avoid errors. When no value is found, it will default to empty.

Automated Deployment of Hugo, Hexo Blog with Travis CI

Tue, 20 Nov 2018 16:14:25 +0000

What is Travis CI?

Travis CI is an online hosted CI service. Using Travis for continuous integration doesn’t require setting up your own server. Most importantly, it’s free for open source projects. If company uses gitlab, it also provides corresponding continuous integration services. Won’t elaborate here.

Travis CI Configuration File

Travis requires project root directory must have a .travis.yml file.

When your repository has commits, travis will automatically execute the behaviors you configured below.

Make Your Hugo Blog Support ECharts Charts

Mon, 19 Nov 2018 16:14:25 +0000

In previously hexo built blog, had used charts, but now after migrating to hugo, there’s no related plugin support.

So do it yourself, be self-sufficient.

In hugo there’s a feature called Shortcodes. Simply put it’s a small template that can pass parameters.

Create Shortcodes

Create ./layouts/Shortcodes/echarts.html file

<div id="echarts{{ .Get `height` }}" style="width: 100%;height: {{.Get `height`}}px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<script type="text/javascript">
 // Based on prepared dom, initialize echarts instance
 var myChart = echarts.init(document.getElementById('echarts{{ .Get `height` }}'));
 // Specify chart configuration items and data
 var option = JSON.parse({{ .Inner }})
 // Use just specified configuration items and data to display chart.
 myChart.setOption(option);
</script>

Usage

Insert echarts configuration data in Shortcodes, this way you can see a complete chart in the page

Hugo Blog Articles Not Displaying After Specified Time?

Sun, 18 Nov 2018 16:14:25 +0000

Since switching the blog to Hugo, encountered some pitfalls.

Articles correctly added, page time adjusted to today, or after today, but cannot display in article list.

The reason is that when Hugo templates loop through files, articles exceeding the current time won’t appear.

Timezone Issue

If your article time doesn’t specify a timezone.

Like this 2018-11-19 16:14:25, the article likely won’t display.

Hugo time is unified to Greenwich Mean Time, because China’s time is 8 hours earlier than Greenwich Mean Time. When Greenwich Mean Time hasn’t reached your configured time, articles won’t appear in the article list.

Hugo Platform Articles Not Displaying After Specified Time?

Sun, 18 Nov 2018 16:14:25 +0000

Since blog switched to Hugo, encountered some pitfalls.

Clearly correctly added articles, page time adjusted to today, or after today but cannot display in article list.

Reason is Hugo template when looping through files, articles exceeding current time won’t appear.

Timezone Issue

If your article time doesn’t specify timezone.

Like this 2018-11-19 16:14:25, article likely won’t display.

Hugo Blog Baidu SEO Ultimate Optimization, Baidu Xiongzhang Auto Push

Sat, 17 Nov 2018 16:14:25 +0000

After switching to Hugo platform, the headache is that many SEO plugins from Hexo can’t be used. Below I’ll share my SEO optimization solution.

Meta Tag Optimization

Description

meta description, considered the most useful meta tag, is the website’s introduction information. Content should be controlled within 100 characters.

<meta name='description' itemprop="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{substr .Summary 0 100}}{{ end }}{{ end }}">

Keywords

{{ if .Keywords }} 
<meta name="keywords" content="{{ delimit .Keywords ", " }}" >
{{else}}
<meta name="keywords" content="{{ delimit .Site.Params.Keywords ", " }}" >
{{ end }}

Baidu Xiongzhang Push

Speaking of SEO, Xiongzhang is essential, it can achieve indexing within 24 hours. So this must not be missed.

Basic Usage of Hugo Blog Building Tool

Thu, 15 Nov 2018 16:14:25 +0000

Finally migrated blog to Hugo, initially most worried was this theme didn’t exist on Hugo platform. But got excited, spent two or three days. This theme. Completely migrated to Hugo platform. Next I’ll introduce Hugo usage and pitfalls encountered, and solutions.

Hugo Performance

Precisely because hexo’s performance couldn’t satisfy, extremely unstable when generating static files. And time is relatively longer. With same page count, processing speed hugo is 20 times or more than hexo. This is why I switched to Hugo.

Hexo Process Out of Memory Issue

Tue, 13 Nov 2018 21:32:05 +0000

Hexo Memory Overflow Issue

When Hexo generates around 1000 articles, this issue may occur.

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

Solution:

# Find hexo command location
which hexo

Edit the first line of the hexo command’s bin file to the following content.

#!/usr/bin/env node --max_old_space_size=8192

This temporarily solves the memory overflow issue.

Hexo Performance

Hexo’s performance is indeed much worse than Hugo. For the same 1000+ pages, Hugo only took less than 2s. This makes me hesitate whether to abandon using Hexo.

Code Review Tool Recommendations and Usage Report

Mon, 12 Nov 2018 00:00:00 +0000

As teams grow, unifying coding standards and improving code quality becomes increasingly important. Code review, as one of the effective ways to improve code quality, is worth implementing within the company. Help the team develop a code review habit, improve code quality, and avoid unnecessary problems in advance.

For more efficient code review, a code review tool is needed. Hence this usage report.

Below are some tools I’ve tried, along with evaluations and summaries.

How Code Review Helps Teams Improve Code Quality

Thu, 08 Nov 2018 00:00:00 +0000

Code Review Solutions

Recently, I’ve been promoting code review in my company. After several days of research, I’ve compiled some problems and solutions.

Current Problems

No good tool for convenient code review
No good code standards for code review
No enforced process for code review
No dedicated person responsible for code review
Tracking changes after code review
Incentive mechanism for reviewers and fixers
Cross-team resource allocation can lead to excessive code

Solutions

Integrate Merge Request Workflow

To do code review on GitLab, we need to add Merge Request to our existing Git workflow.

Mac 10.14 Mojave Upgrade Accessibility Blank Cannot Add Issue

Sun, 04 Nov 2018 22:30:05 +0000

Recently after system upgrade to Mac mojave 10.14, found Accessibility in Security & Privacy is blank, and Apps cannot be added no matter what. My macbook pro is normal, but my mac mini has this problem. Very headache.

Problem Cause

Should be upgrade caused /Library/Application\ Support/com.apple.TCC corruption or permission exception, causing problems.

Solution

Execute the following two commands then restart system, can return to normal.

sudo chmod 777 /Library/Application\ Support/com.apple.TCC
sudo rm -rf /Library/Application\ Support/com.apple.TCC/TCC.db
# Restart system

November 2018 China Browser Statistics

Thu, 01 Nov 2018 00:00:00 +0000

Data from CNZZ

Browser	Market Share
Chrome	55.01%
QQ Browser	21.23%
Safari	8.67%
360 Browser	5.42%
Sogou Browser	3.08%
UC Browser	1.95%
Firefox	1.82%
Others	2.82%

Building Your Single-SPA Micro Frontend App with Webpack & SystemJS

Wed, 31 Oct 2018 01:00:00 +0000

Here is an introduction to using micro frontend applications built with Single-SPA in various popular build tools.

Webpack 2+

Webpack 2+ supports import() for code splitting. Webpack 2+ is already widely used in other projects, so I won’t go into too much detail here.

import {registerApplication} from 'single-spa';

registerApplication('app-name', () => import('./my-app.js'), activeWhen);

function activeWhen() {
 return window.location.pathname.indexOf('/my-app') === 0;
}

SystemJS

In our previous projects, we used SystemJS because it facilitates secondary builds after application deployment. It’s also very convenient to use.

Single-SPA Micro Frontend Demo Collection

Wed, 31 Oct 2018 00:00:00 +0000

Here are the single-spa micro frontend demos that can be found on GitHub:

single-spa-examples

This is the official single-spa example. Here is the online demo.

simple-single-spa-webpack-example

This is a usage example built with webpack. The webpack version might be a bit old, but the concept is the same.

single-spa-angular-cli-examples

An Angular example based on angular-cli, suitable for Angular 2.0+ versions.

single-spa-es5-angularjs

An AngularJS example, i.e., AngularJS 1.x version.

single-spa-portal-example

This is already a very complete multi-tech-stack use case, integrating multiple tech stacks with inter-module communication ideas. Very worth studying.

Git Delete All Commit History Solution

Tue, 30 Oct 2018 19:33:33 +0000

If your previous project committed some sensitive data, or you want to clear previous commit history, here’s the solution.

# 1. Check out a new branch
git checkout --orphan latest_branch

# 2. Stage all files
git add -A

# 3. Commit the staged files
git commit -am "commit message"


# 4. Delete the original branch
git branch -D master

# 5. Rename the current branch
git branch -m master

# 6. Push your history to the remote repository
git push -f origin master

Make Your Hexo Blog Support Baidu Xiongzhang URL Auto-Push, 24-Hour Baidu Indexing

Wed, 24 Oct 2018 21:32:05 +0000

Baidu launched Xiongzhanghao (Bear’s Paw). To make hexo support Xiongzhang push, I added the Xiongzhang push feature on top of the hexo-baidu-url-submit plugin. Articles pushed on the same day will be indexed within 24 hours. With this, Baidu indexing speed is very fast.

No more waiting forever for Baidu to index your content.

Xiongzhang Support

Change the content in package.json to:

 "hexo-baidu-url-submit": "https://github.com/Num142857/hexo-baidu-url-submit",

baidu_url_submit Configuration

baidu_url_submit:
 count: 1000 ## Submit the latest link
 host: time-friend.com ## Domain registered on Baidu Webmaster Platform
 token: xxxxx ## Note: this is your secret key, so please don't publish blog source code in public repositories!
 path: baidu_urls.txt ## Text file address, new links will be saved in this text file
 xz_appid: 'xxxxxx' ## Your Xiongzhang appid
 xz_token: 'xxxxxx' ## Your Xiongzhang token
 xz_count: 10 ## Select the latest 10 items from all submitted data, this number depends on your Xiongzhang account

Deploy Configuration

deploy:
- type: baidu_url_submitter # Baidu
- type: baidu_xz_url_submitter # Baidu Xiongzhang

Node.js Crawler Tips - Download Images or Files with Puppeteer

Tue, 23 Oct 2018 20:32:05 +0000

Some websites’ images don’t allow external links. If we want to download these websites’ images, Puppeteer is a good solution. Today I’ll introduce a crawler tip to download images or files you want through Puppeteer.

How to Download Through Puppeteer?

We need an additional dependency library fs-extra

Code is very simple, main code can be simplified to two or three lines

 const fse = require('fs-extra'); // Required dependency library, you can use native fs if you want

 // Main code
 var viewSource = await page.goto(url);
 await fse.outputFile(`path`, await viewSource.buffer()) // Download to path you want

Nintendo Switch 6.0+ System Menu Localization

Mon, 15 Oct 2018 19:02:36 +0000

Nintendo Switch Localization Patch

Only supports 6.0 and 6.0.1 systems
Simplified Chinese/Traditional Chinese
Supports Atmosphere, ReiNX, RajNX, SXOS (TXOS)

Download Address

Localization Installer

Localization Installer: https://share.weiyun.com/5HNlw1J (Strongly Recommended)

Overwrite Version: (Use when installer crashes, before overwriting must delete original files cleanly.)

Simplified Chinese: https://share.weiyun.com/59MqPxr
Traditional Chinese: https://share.weiyun.com/52w0vp8

ReiNX Localization Special Version:

Complete localization support, already fixed DOOM and 2K19 issues https://share.weiyun.com/58azYtc

Source code from https://github.com/Reisyukaku/ReiNX

Address Overwrite

Atmosphere overwrite to atmosphere/titles
ReiNX overwrite to ReiNX/titles
SXOS overwrite to sxos/titles

Localization Installer Tutorial:

First, use card reader to insert SD card into computer.
Open SD card drive.
Put Nintendo Switch System Localization Patch.exe into card.
Run Nintendo Switch System Localization Patch.exe
Follow prompts to select.

FAQ

Does localization affect games?

Generally localization causing game crashes is due to text errors, new localization has already fixed most issues. Of course actual effects still need testing.

What's the Difference Between Switch NSP and XCI?

Sun, 14 Oct 2018 19:02:36 +0000

Recently working on Switch, encountered two game formats during game installation, respectively

What’s the Difference Between Them?

In actual use: xci, throw into memory card can use, nsp, need to install before can use Simple understanding is, xci is portable software (correctly should be ISO), nsp is installer software.

Because xci is equivalent to cartridge, doesn’t need installation, needs switching. nsp is equivalent to digital version, needs installation, after installation can play directly

Nintendo Switch Hack Principle

Thu, 11 Oct 2018 19:02:36 +0000

Nintendo Switch

Nintendo Switch is an electronic game console produced by Nintendo, released in Japan, North America, Europe and Hong Kong on March 3, 2017, and in South Korea and Taiwan on December 1 of the same year. Has detachable controllers and separable host, game media uses proprietary cartridges. Host processor uses NVIDIA customized Tegra X1 system-on-chip, this is Nintendo’s first time using NVIDIA’s system-on-chip. Nintendo Switch host’s built-in storage space is 32GB, can be expanded using microSD, maximum supports microSDXC standard, maximum supports 2TB capacity; Host at initial system 1.0.0 can only support up to microSD standard, system 2.0.0 update provided on release day enables support for microSDXC standard.

Develop Your Ethereum Dapp with Eggjs(koa) & web3.js

Wed, 10 Oct 2018 19:33:33 +0000

Eggjs

Eggjs is Alibaba’s open source enterprise-level Node.js framework based on Koa2. eggjs is basically out-of-the-box, follows “Convention over Configuration”. In daily development, very smooth to use. And ecosystem is also relatively complete, koa2 plugins can all be integrated into framework.

Egg.js Directory Structure

egg-project
├── package.json
├── app.js (optional)
├── agent.js (optional)
├── app
|| ├── router.js
│ ├── controller
│ | └── home.js
│ ├── service (optional)
│ | └── user.js
│ ├── middleware (optional)
│ | └── response_time.js
│ ├── schedule (optional)
│ | └── my_task.js
│ ├── public (optional)
│ | └── reset.css
│ ├── view (optional)
│ | └── home.tpl
│ └── extend (optional)
│ ├── helper.js (optional)
│ ├── request.js (optional)
│ ├── response.js (optional)
│ ├── context.js (optional)
│ ├── application.js (optional)
│ └── agent.js (optional)
├── config
|| ├── plugin.js
|| ├── config.default.js
│ ├── config.prod.js
|| ├── config.test.js (optional)
|| ├── config.local.js (optional)
|| └── config.unittest.js (optional)
└── test
 ├── middleware
 | └── response_time.test.js
 └── controller
 └── home.test.js

As above, directories agreed by framework:

October 2018 China Browser Statistics

Mon, 01 Oct 2018 00:00:00 +0000

Data from CNZZ

Browser	Market Share
Chrome	54.12%
QQ Browser	21.87%
Safari	8.43%
360 Browser	5.61%
Sogou Browser	3.15%
UC Browser	2.08%
Firefox	1.87%
Others	2.87%

Solution for Upsource Startup Failure on Centos7

Sat, 29 Sep 2018 19:33:33 +0000

Error

When starting Upsource on Centos7, the following error occurred. Starting Upsource on Mac worked fine.

[Upsource Error] Failed to start JetBrains Upsource 2018.2 due to unexpected exception: Native random generator does not seem to have enough entropy for JetBrains Upsource 2018.2 to start. [Upsource Error] You can fix it by switching to PRNG (with -Djava.security.egd=/dev/zrandom) or by reconfiguring your operation system to provide more random bits.

Solution

Copy upsource.jvmoptions.dist to upsource.jvmoptions

cp $upsource_path/conf/upsource.jvmoptions.dist $upsource_path/conf/upsource.jvmoptions

Edit $upsource_path/conf/upsource.jvmoptions file, add the following line at the end:

-Djava.security.egd=/dev/zrandom

Start

$upsource_path/bin/upsource.sh start

Punch a Hole in Your Machine with ngrok - Internal Network Penetration

Wed, 12 Sep 2018 00:00:00 +0000

I have many personal codes running on home server. Generally all are automated processing of some life problems, data collection and related activities. So generally no client access to home server needs. But many times brain suddenly has ideas. Some small ideas, some small bugs or small optimizations, after code modification completes, there’s a deployment need. Because home server doesn’t have a stable external network IP, external network cannot directly connect to server. So we need internal network penetration.

Micro Frontend Solution 8 - Secondary Build

Fri, 07 Sep 2018 01:00:00 +0000

Secondary Build

Further optimize our micro frontend performance

In a micro frontend architecture, each module outputs fixed files, such as the previously mentioned:

Project config file
Store.js file
main.js render entry file

These three are the necessary files for each module in a micro frontend architecture.

When the module loader starts the entire project, it must load all modules’ config files and Store.js files. In a previous article, we discussed config automation, which is essentially a simple form of secondary build. Although each module’s config file is not very large, each file is loaded and is necessary for project startup. Each file takes one HTTP request, and each file’s blocking affects the project’s startup time.

Micro Frontend Solution 7 - Static Data Sharing

Thu, 06 Sep 2018 01:00:00 +0000

From the previous introductions, I believe you now have a relatively complete understanding of micro frontends. Below are some tips and handling methods I’ve developed during my work.

Dynamic Entry

When a new submodule is mounted to the project, a new entry point in the UI is needed to access the submodule’s UI. Such an entry point needs to be generated dynamically.

For example: the menu on the left side of the image should not be hardcoded. It should be automatically generated based on the data provided by each module.

Micro Frontend Solution 6 - Build & Deploy

Wed, 05 Sep 2018 01:00:00 +0000

Micro Frontend Build

There are some things to note when bundling micro frontend projects. Take webpack as an example:

AMD Modules

In previous articles, we mentioned that our loader is based on System.js. So the final bundle of our micro frontend modules must conform to module specifications. We use the AMD module specification to build our modules.

Specify Base Path

Since the module loader calls the module entry file after bundling, To clearly manage each module and correctly load all our module resources, we specify a publicPath for all module resources.

Micro Frontend Solution 5 - Route Distribution

Tue, 04 Sep 2018 01:00:00 +0000

Route-Distributed Micro Frontend

From Application Distributing Routes to Routes Distributing Applications

There is no better way to explain micro frontend routing than this sentence.

Route-distributed micro frontend distributes different business functions to different, independent front-end applications through routing. This can usually be achieved through reverse proxy on an HTTP server, or through the routing that comes with the application framework. Currently, route-distributed micro frontend architecture is probably the most adopted and easiest “micro frontend” solution. However, this approach looks more like a聚合 of multiple front-end applications, i.e., we just piece together these different front-end applications to make them look like a complete whole. But they are not — every time a user goes from App A to App B, they often need to refresh the page. — Quoted from phodal The Matters of Micro Frontends

Micro Frontend Solution 4 - Message Bus

Mon, 03 Sep 2018 01:00:00 +0000

The main function of the micro frontend message bus is to bridge communication between modules.

Black Box

Problem 1:

After applying microservices architecture, each individual module becomes a black box. What happens inside, what state changes, other modules have no way of knowing. For example, when Module A wants to perform an action based on a certain internal state of Module B, there is no way for black boxes to communicate. This is a major problem.

Micro Frontend Solution 3 - Module Loader

Mon, 03 Sep 2018 00:00:00 +0000

The micro frontend module loader handles three main responsibilities:

Loading project configuration files
Loading module API files (used by the message bus, covered later)
Loading module entry files

These are three essential parts for every module.

Configuration File

In our micro frontend practice, each module has an external configuration file used when registering with Single-SPA.

{
 "name": "name",
 "path": "/project",
 "prefix": "/module-prefix/",
 "main": "/module-prefix/main.js",
 "store": "/module-prefix/store.js",
 "base": true
 }

When a module supports multiple URL prefixes, the path can be an array:

Micro Frontend Solution 2 - Single-SPA

Sun, 02 Sep 2018 22:17:36 +0000

Technology Selection

After extensive research, we chose Single-SPA as the foundation for our frontend microservices solution.

Your browser does not support video.

Single-SPA

A JavaScript frontend solution for frontend microservices

With Single-SPA, you can:

Use multiple frameworks (React, Vue, AngularJS, Angular, Ember, etc.) on the same page without refreshing.
Write new code with modern frameworks without refactoring existing code.
Load each module on demand for better performance.
Run each independent module separately.

Demo: https://single-spa.surge.sh/

Micro Frontend Solution 1 - Thinking

Sat, 01 Sep 2018 22:17:36 +0000

In recent years, microservices architecture has become hugely popular in the backend development community, considered the future direction of IT software architecture. How can we apply the principles of backend microservices to build modern frontend applications? Here I provide a frontend microservices solution that can actually be implemented in production.

Comparison of Backend and Frontend Microservices

Advantages of Backend Microservices:

Controlled Complexity: Small size, low complexity. Each microservice can be fully managed by a small development team, making it easy to maintain high maintainability and development efficiency.
Independent Deployment: Since microservices run in separate processes, each can be deployed independently.
Flexible Technology Choices: In a microservices architecture, technology selection is decentralized. Each team can freely choose the most suitable tech stack based on their service needs and industry trends.
Fault Isolation: When a component fails, in a single-process traditional architecture, the fault is likely to spread within the process, causing global unavailability.
Scalability: Monolithic applications can also scale horizontally, but it requires replicating the entire application to different nodes.

Advantages of Frontend Microservices:

Controlled Complexity: Each UI business module is developed by an independent frontend team, preventing code bloat, maintaining fast compilation during development, and keeping complexity low for easy maintenance.
Independent Deployment: Each module can be deployed independently, down to a single component’s UI, without affecting other modules.
Flexible Technology Choices: The most attractive advantage — you can use any frontend tech stack available today, including future ones, within the same project.
Fault Isolation: A single module failure does not affect the entire application.
Scalability: Each service can be independently scaled horizontally to meet business needs without unnecessary resource consumption.

When Do We Need Frontend Microservices?

The project’s tech stack is outdated, developers with relevant skills are scarce, feature expansion is difficult, and refactoring or maintenance costs are high.
The project is too large, code compilation is slow, the development experience is poor, and a higher-level decoupling solution is needed.
A single tech stack cannot meet your business requirements.

Problems and Challenges

We will face the following issues:

September 2018 China Browser Statistics

Sat, 01 Sep 2018 00:00:00 +0000

Data from CNZZ

Browser	Market Share
Chrome	53.42%
QQ Browser	22.51%
Safari	8.15%
360 Browser	5.83%
Sogou Browser	3.27%
UC Browser	2.16%
Firefox	1.98%
Others	2.68%

Network Notes - Network Protocols and Network Layering

Thu, 30 Aug 2018 00:00:00 +0000

The Bible has a Tower of Babel story, God to prevent humans from uniting, made humans speak different languages. Humans couldn’t communicate, couldn’t reach “agreement”, Tower of Babel plan failed.

A thousand years later, a group of engineers to solve this problem, formulated various protocols and standards, let various devices communicate through protocols, then through internet achieved world interconnection.

Like the code we write now, using universal programming languages, world is thus connected. Our computer languages are also a kind of protocol.

Linux - CentOS Timezone Setting

Mon, 30 Jul 2018 20:32:05 +0000

timedatectl Command

Check Current Timezone Status

$ timedatectl status
 Local time: Fri 2018-08-31 13:42:42 CST
 Universal time: Fri 2018-08-31 05:42:42 UTC
 RTC time: n/a
 Time zone: Asia/Shanghai (CST, +0800)
 NTP enabled: n/a
NTP synchronized: yes
 RTC in local TZ: no
 DST active: n/a

Set Timezone to Shanghai

$ timedatectl set-timezone Asia/Shanghai # Set system timezone to Shanghai

Other Operations

$ timedatectl list-timezones # List all timezones

$ timedatectl set-local-rtc 1 # Adjust hardware clock to match local clock, 0 means set to UTC time

MongoDB - Using MongoDB in Egg

Fri, 18 May 2018 00:00:00 +0000

MongoDB official provides node database operation driver and API: node-mongodb-native

In egg community there’s also an egg plugin based on this plugin secondary encapsulation egg-mongo-native

Made some secondary encapsulation of some methods, can also call original methods.

Configuration

Official documentation also has related configuration instructions, but I encountered some problems in actual use. Below I provide correct configuration method for everyone to use. Other related knowledge please refer to this plugin’s official documentation.

MongoDB - Document Basic Operations (Part 2)

Sun, 13 May 2018 00:00:00 +0000

Document Update

Syntax: update(, , )

# Update rank field
> db.posts.update({"title":"Monster Hunter World Review"}, {$set: {"rank": 10} });

# Update entire data to: {"rank": 99}
> db.posts.update({"title":"Monster Hunter World Review"}, {"rank": 99});

# Update multiple records multi: true, if false, then update first record found
> db.posts.update({"tag":"it"}, {$set: {"rank": 60}}, {multi: true});

Document Field Operation Functions

$inc: Increment
$mul: Multiply
$rename: Rename
$set: Add or modify
$unset: Field delete

# Field value increment, result: field value + 1
> db.posts.update({title:"Monster Hunter World Review"}, {$inc: {rank: 1}});

# Field value multiply operation, result: field value * 2
> db.posts.update({title:"Monster Hunter World Review"}, {$mul: {rank: 2}});

# Field rename
> db.posts.update({title:"Monster Hunter World Review"}, {$rename: {"rank": "score"}});

# Set or add field
> db.posts.update({title:"Monster Hunter World Review"}, {$set: {"istop": true}});

# Delete istop field
> db.posts.update({title:"Monster Hunter World Review"}, {$unset: {"istop": true}});

Document Special Updates

upsert: Update if exists, append if not
remove: Conditional delete data

$ mongo
# Update entire data
> db.posts.update({title:"Actually Creation is More Fun than Taishi"}, {title:"Actually Creation is More Fun than Taishi", "rank":5,"tag":"game"});

# Update or add data
> db.posts.update({title:"Actually Creation is More Fun than Taishi"}, {title:"Actually Creation is More Fun than Taishi", "rank":5,"tag":"game"}, {upsert:true});

# Delete data
> db.posts.remove({title:"Actually Creation is More Fun than Taishi"});

Index

getIndexes() Get indexes
createIndex({…}, {…}) Add index
dropIndex({…}) Delete index

# Get indexes
> db.posts.getIndexes();

# Create rank descending index
> db.posts.createIndex({rank:-1});

# Delete index
> db.posts.dropIndex({rank:-1});

# Create an ascending index, and cannot duplicate, subsequent title duplicates will fail to add
> db.posts.createIndex({title:1}, {unique:true});

MongoDB - Document Basic Operations (Part 1)

Sat, 12 May 2018 00:00:00 +0000

Document Add/Delete

# Create collection
> db.createCollection("posts");

# Insert one data
> db.posts.insert(
... {
... title: "My First Blog",
... content: "Started writing blog, so excited."
... }
... );

# Query data
> db.posts.find();

# Insert another data
> db.posts.insert(
... {
... title: "My Second Blog",
... content: "What should I write?",
... tag: ["Uncategorized"]
... }
... );



# Use js for loop to insert data
> for(var i = 3; i <=10; i++ ) {
... db.posts.insert({
... title: "My " + i + "th Blog"
... });
... }

# Query data
> db.posts.find();

# View data count
> db.posts.count();

# Delete all collection data
> db.posts.remove({});

> db.posts.find();

Document Conditional Query

# Query data with tag as game
> db.posts.find({"tag": "game"});

# Query data with rank greater than or equal to 4
> db.posts.find({"rank": {$gte: 4}});

# Query data with rank greater than 4
> db.posts.find({"rank": {$gt: 4}});

# Query data with rank less than or equal to 4
> db.posts.find({"rank": {$lte: 4}});

# Query data with rank less than 4
> db.posts.find({"rank": {$lt: 4}});

# Regular expression query
> db.posts.find({"title": /u/});

# Multi-condition query
> db.posts.find({"title": /u/, "rank":{$gte:5} });

# $or OR condition query
> db.posts.find({$or: [{"title": /u/}, {"rank":{$gte:4}}] });

# $in contains, query data with rank containing 3,4
> db.posts.find({"rank": {$in: [3,4]} });

# Check if exists
> db.posts.find({"istop": {$exists: true} });

# Query data with three tags in article
> db.posts.find({'tag': {$size: 3}});

# Get all tag types, distinct function is to get non-duplicate values of specified field in collection, return as array
> db.posts.distinct("tag");

MongoDB vs RDBMS Where Statement Comparison

Operation	Format	Example	Similar Statement in RDBMS
Equal	{:}	db.col.find({“by”:“test”}).pretty()	where by = ’test'
Less than	{:{$lt:<value%}}	db.col.find({“likes”:{$lt:50}}).pretty()	where likes < 50
Less than or equal	{:{$lte:<value%}}	db.col.find({“likes”:{$lte:50}}).pretty()	where likes <= 50
Greater than	{:{$gt:<value%}}	db.col.find({“likes”:{$gt:50}}).pretty()	where likes > 50
Greater than or equal	{:{$gte:<value%}}	db.col.find({“likes”:{$gte:50}}).pretty()	where likes >= 50
Not equal	{:{$ne:<value%}}	db.col.find({“likes”:{$ne:50}}).pretty()	where likes != 50

Specify Extract Fields

Syntax: db.[collection_name].find({}, {field1: true, field2: 1})

MongoDB - Database and Collection Basic Operations

Fri, 11 May 2018 00:00:00 +0000

Database Basic Operations

# Enter command line
$ mongo

# Help
> help

# Exit
> exit

# Show all databases
> show dbs;

# Enter or create collection
> use aliliblog;

# View current database status
> db.stats();

# Delete database
> db.dropDatabase();

Collection Operations



# View collections
> show collections;

# Create collection
> db.createCollection("users");

# Collection rename
> db.users.renameCollection("staff"); // users -> staff

# Collection delete
> db.staff.drop();

MongoDB - Basic Concepts and Comparison with Other Databases

Thu, 10 May 2018 00:00:00 +0000

Basic Concepts

NoSql

In NoSql databases, data operations are all completed through commands or programming languages.

In MongoDB uses JavaScript and JSON data structures to operate and manage data.

MongoDB Database vs Relational Database Comparison

MongoDB	Relational Database
Database (Database)	Database (Database)
Collection (Collection)	Table (Table)
Document (Document)	Record (Record)

MongoDB vs RDBMS Corresponding Terms

MongoDB	RDBMS
Database	Database
Collection	Table
Document	Row
Field	Column
Embedded Document	Table Join
Primary Key (MongoDB provides key as _id )	Primary Key

MongoDB Data Types

Data Type	Description
String	String. Common data type for storing data. In MongoDB, UTF-8 encoded strings are legal.
Integer	Integer value. Used to store numeric values. Depending on server you adopt, can be 32-bit or 64-bit.
Boolean	Boolean value. Used to store boolean values (true/false).
Double	Double precision floating point value. Used to store floating point values.
Min/Max keys	Compare a value with BSON (binary JSON) element’s lowest and highest values.
Array	Used to store arrays or lists or multiple values as one key.
Timestamp	Timestamp. Records document modification or addition specific time.
Object	Used for embedded documents.
Null	Used to create empty values.
Symbol	Symbol. This data type basically equals string type, but difference is, it’s generally used for languages using special symbol types.
Date	Date time. Uses UNIX time format to store current date or time. You can specify your own date time: create Date object, pass year month day information.
Object ID	Object ID. Used to create document’s ID.
Binary Data	Binary data. Used to store binary data.
Code	Code type. Used to store JavaScript code in documents.
Regular expression	Regular expression type. Used to store regular expressions.

MongoDB - Installation and Startup

Wed, 09 May 2018 00:00:00 +0000

What is MongoDB?

MongoDB is a document-oriented free database, often used for data collection and distributed processing (Map/Reduce), especially good at big data processing.

MongoDB is a database based on distributed file storage. Written in C++ language. Aims to provide scalable high-performance data storage solutions for WEB applications.

MongoDB is a product between relational databases and non-relational databases, is the most feature-rich among non-relational databases, most like relational databases.

macOS OS Installation and Startup

Installation

Simplest is through brew installation

Ethereum Development - Build Pet Shop

Sat, 21 Apr 2018 19:33:33 +0000

Truffle’s pet shop is a very good example to understand Ethereum development. Following official provided demo and tutorial, can completely experience entire development process.

Ganache

For environment needs, and quickly set up a private chain environment locally. truffle launched a visual private chain client: Ganache Download Address After downloading and running, you’ll see an interface like this:

Initialize Your Project

First we create a new directory, and initialize the project

$ mkdir pet-shop
$ cd pet-shop
$ truffle unbox pet-shop

Project Directory Structure

Here only lists important directories and files

Ethereum Development - Solidity Beginner Editor -- remix-ide

Fri, 20 Apr 2018 19:33:33 +0000

In Ethereum application development, smart contract development is unavoidable. Currently, remix-ide I found is the most beginner-friendly development tool. Doesn’t need any other environment, can directly deploy and debug. If I find more friendly ones, I’ll recommend in future blogs.

Installation

remix is just an ordinary npm package

$ npm i remix-ide -g

Startup

$ remix-ide

Default will start local port 8080, open browser http://localhost:8080

Usage

First we need to check auto compile

Ethereum Development - Starting with the Truffle Scaffold

Thu, 19 Apr 2018 19:33:33 +0000

I started learning blockchain development this week to build up some knowledge before the company’s blockchain project begins. This blog post is a review of what I’ve learned.

What is Truffle

Truffle is a development framework for the Solidity language on Ethereum. It is implemented in JavaScript. Although it’s built with JavaScript, which we’re familiar with, Truffle is mainly a tool for compiling and deploying smart contracts (though it does have other features).

Build Simpler Private npm Server with verdaccio

Tue, 10 Apr 2018 22:30:05 +0000

Building private npm servers like cnpm.org is already quite simple, but compared to verdaccio’s simplicity, there’s no comparison. Because verdaccio is too simple.

Introduction

verdaccio is a lightweight private NPM Registry (forked from Sinopia, Sinopia’s last update was years ago). Initially planned to use cnpmjs to build private npm repository but after building there were some problems, so used Sinopia;

Next I’ll briefly introduce verdaccio usage.

Install verdaccio on Your Server

$ npm i verdaccio -g

Start

# Directly enter verdaccio command
$ verdaccio

// If startup successful, will display the following information
 Verdaccio doesn't need superuser privileges. Don't run it under
 warn --- config file - /root/.config/verdaccio/config.yaml
 warn --- http address - http://localhost:4873/ - verdaccio/

We can also start with pm2 (also the method I chose to use)

Git Push Stuck Solution

Mon, 09 Apr 2018 19:33:33 +0000

The blog’s daily English is directly scraped from Shanbay English. To avoid directly requesting proxy interfaces (which would be relatively slow). So my program generates corresponding data files every day, and the frontend directly gets them via ajax. Blog content is also automatically published every day, achieving the effect of updating famous quotes and sentences daily. Haven’t checked for a long time, found many git commits weren’t pushed. After manually pushing, found there were over 800 modifications not pushed.

Linux - SSH Connect to Remote Server Directly Execute Command PATH Incomplete Solution

Thu, 15 Mar 2018 20:32:05 +0000

PATH Incomplete in non-interactive mode

ssh username@desktop.domain ‘command’ is a typical non-interactive shell, PATH incomplete.

Reason

A common way to determine if it’s an interactive shell in Linux systems is through the PS1 variable. Although there are other ways, currently .bashrc determines if it’s interactive mode through PS1.

# .bashrc file
# If not running interactively, don't do anything 
[ -z "$PS1" ] && return

Solution

Move all necessary export PATH declarations before [ -z “$PS1” ] && return. Ensure PATH settings also take effect in non-interactive mode.

CentOS7 Environment Puppeteer Startup Failure Solution

Sun, 25 Feb 2018 19:33:33 +0000

Tip: In CentOS6 environment, Puppeteer cannot be started. In CentOS6, many Puppeteer dependency libraries don’t exist. So if you want to run Puppeteer on CentOS6, I suggest giving up, it’s more worthwhile to spend time elsewhere.

Missing Dependencies

Running Puppeteer on a new CentOS7 often fails, many times reporting errors like:

...node_modules/puppeteer/.local-chromium/linux-496140/chrome-linux/chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared object file: No such file or directory

This error indicates missing dependencies.

Linux - vim vi Learning Notes

Sat, 17 Feb 2018 20:32:05 +0000

Often on Mac or Linux, because we frequently need to use it, but its operations differ greatly from other editors, so I’ll specifically learn it. When using it, won’t be too confused. In learning, need to practice more and use more to become proficient.

Three Modes of vim/vi

Command mode
Insert mode
Last line mode

Command Mode

When we use vim to open a file, we enter command mode. In command mode, we cannot input/edit text. In command mode, we can input the following to switch to other modes

Linux - Install Nginx Steps

Tue, 16 Jan 2018 20:32:05 +0000

yum install gcc
yum install pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel

Of course you can also install together

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

Download Nginx tar Archive

Go to webpage http://nginx.org/download/

Choose the version you need:

 # Enter local folder
 cd /usr/local

 # I chose a relatively new version, download to current directory
 wget http://nginx.org/download/nginx-1.13.9.tar.gz

 # Extract
 tar -xvf nginx-1.13.9.tar.gz

 # Rename
 mv nginx-1.13.9.tar.gz nginx

 # Enter nginx directory
 cd nginx

 # Execute following commands
 ./configure

 # Compile
 make

After completing the above steps, your nginx is already installed

A Headless Chrome Browser: Puppeteer

Thu, 21 Dec 2017 20:32:05 +0000

Puppeteer Introduction

Puppeteer is a Node.js library that provides a set of APIs to control Chrome. Compared to PhantomJS, it can directly call Chrome’s API in your Node.js project. Many automation tests and crawlers can be based on Puppeteer in the future.

Installation

npm install puppeteer

Usage

Screenshot

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

Save Page as PDF

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
 await page.pdf({path: 'hn.pdf', format: 'A4'});

 await browser.close();
})();

Puppeteer also provides many Chrome APIs https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

Algorithm Complexity Analysis

Tue, 19 Dec 2017 22:17:36 +0000

Everything is to count the efficiency of code execution

Post-Statistical Method

Through statistics and monitoring, we can get the execution time and memory usage of the algorithm

Big O Complexity Notation

As data scale grows, algorithm execution time and space usage grow proportionally according to polynomials

Time Complexity Ranking (from best to worst)

O(1) (constant order) < O(logn) (logarithmic order) < O(n) (linear order) < O(nlogn) (linear logarithmic order) < O(n^2) (quadratic order) < O(n^3) (cubic order) < O(2^n) (exponential order) < O(n!) (factorial order)

Multi-Server Automated Deployment Solution Based on shipit-deploy

Sun, 17 Dec 2017 20:32:05 +0000

Why automate deployment, I won’t elaborate here.

Automated deployment based on shipit-deploy can achieve the following effects

One-click deployment to multiple servers.
One-click rollback of multiple servers.
Local operation, no need to log into servers.
Easy to customize, easy to extend, achieve automation.

Usage

1. Download and Install

npm install --save-dev shipit-cli
npm install --save-dev shipit-deploy

2. Establish Trust Relationship with Servers

ssh-copy-id USER@REMOTE_HOST

3. Configuration

module.exports = function (shipit) {
 require('shipit-deploy')(shipit);
 require('shipit-pm2')(shipit);
 require('shipit-cnpmjs')(shipit);

 shipit.initConfig({
 default: {
 workspace: '/tmp/github-monitor',
 deployTo: '/tmp/deploy_to', // Server target path
 repositoryUrl: 'https://github.com/user/repo.git', // Git repository address
 ignores: ['.git', 'node_modules'], // Excluded files
 keepReleases: 2, // Number of release versions to keep
 deleteOnRollback: false,
 key: '/path/to/key',
 shallowClone: true,
 cnpm: {
 remote: false
 }
 },
 dev: { // Development server deployment
 servers: ['user@devServer1', 'user@devServer1'],
	 branch: 'dev' // Git branch to publish,
 pm2: {
 json: 'pm2-dev-app.json' // Development environment pm2 startup configuration
 }
 },
 prod: { // Production server deployment
 servers: ['user@prodServer1', 'user@prodServer2'],
	 branch: 'master' // Git branch to publish,
 pm2: {
 json: 'pm2-prod-app.json' // Production environment pm2 startup configuration
 }
 }
 });
};

pm2-prod-app.json example:

Linux - Use ssh-copy-id Command to Achieve SSH Passwordless Login

Sat, 16 Dec 2017 20:32:05 +0000

1. Generate Public and Private Keys

ssh-keygen -t rsa

After entering according to prompts, will generate id_rsa and id_rsa.pub files in ~/.ssh directory

2. Establish Connection with Server

ssh-copy-id root@192.168.0.100 //Example IP

Next will require entering connection password, after successful verification

Try the following command to see if login succeeds directly:

ssh root@192.168.0.100

It’s that simple

Enable Gzip Mode for Express, Egg.js, Koa.js

Wed, 13 Dec 2017 20:32:05 +0000

To reduce download size of APIs and static files, we can enable Gzip when server resources are sufficient.

Express

Express version below 4.0

var express = require('express');
var app = express();
app.use(express.compress()); //Mainly this line

Express version 4.0 and above (including 4.0)

var compression = require('compression');
var express = require('express');
var app = express();
app.use(compression());

Egg.js

// app/middleware/compress.js
// koa-compress exposed interface (`(options) => middleware`) matches framework's middleware requirements
module.exports = require('koa-compress')

// config/config.default.js
module.exports = {
 middleware: [ 'compress' ],
 compress: {
 threshold: 2048,
 },
};

Koa.js

const koa = require('koa');
const compress = require('koa-compress');

const app = koa();

const options = { threshold: 2048 };
app.use(compress(options));

Apache, Nginx, Express, Egg.js Support Frontend HTML5 History Mode

Sat, 02 Dec 2017 22:30:05 +0000

When you use history mode, URLs look like normal URLs, e.g. http://xxx.com/user/id.

To perfectly support this mode, backend configuration support is also needed. When the application is a single-page client application, if the backend is not correctly configured, when users directly access http://xxx.com/user/id in the browser, it will return 404.

Backend support examples:

Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
 try_files $uri $uri/ /index.html;
}

Node.js (Express)

If using Express, you can use connect-history-api-fallback https://github.com/bripkens/connect-history-api-fallback

How Egg.js Supports Single Page Application

Fri, 01 Dec 2017 22:30:05 +0000

Enable ejs in config/plugin.js // Other template engines also work

exports.ejs = {
 enable: true,
 package: 'egg-view-ejs',
};

Configure static directory

//config/config.{env}.js

 config.static = {
 prefix: '/',
 dir: path.join(appInfo.baseDir, 'app/view/')
 }

Template configuration

//config/config.{env}.js

 config.view = {
 defaultExt: '.html',
 mapping: {
 '.ejs': 'ejs',
 '.html': 'ejs',
 }
 }

Configure root directory route mapping

// app/router.js

module.exports = app => {
 app.router.get('/', app.controller.home.index);
}

Configure route corresponding controller

// app/controller/home.js

const { Controller } = require('egg');
class HomeController extends Controller {
 async index() {
 const { ctx } = this;
 // render index.html
 await ctx.render('index');
 }
}
module.exports = HomeController;

After completing the above configuration, you can combine with single page application

Publish Company Private Code to Self-Hosted cnpm

Sat, 25 Nov 2017 22:30:05 +0000

Configuration

First need to add some configuration properties to the original config/config.js:

 enablePrivate: false, // Anyone can publish packages
 admins: {
 admin: 'test@company.com' // Admin permissions
 },
 scopes: ['@company'], // Private packages must be under scope

Restart cnpm

Enter cnpm directory

npm stop // Stop service
npm start // Start service

Add code to package.json file:

 "name": "@company/testjs", // Package name, must add scope name before

 npm login --registry=http://192.168.0.100:7001 // Register previous user
 Username: admin // Admin name
 Password: 1234 // Password you want

 npm publish --registry=http://192.168.80.130:7001

Publish successful

Build Private cnpm Server in Company

Fri, 24 Nov 2017 22:30:05 +0000

There are more and more js projects now. If we open source our code, we’ll publish these codes to npm. But npm is public, company code after all won’t be publicly available online. So we need to build our own npm server. Publish company private code on the company’s npm server. This way we can conveniently download the code we want, and also not put this code on open source platforms

Visual Studio Code Hide Extra js and map Files Generated from ts

Wed, 22 Nov 2017 20:32:05 +0000

Open 【File】>【Preferences】>【Workspace Settings】, put in the following code:

// Put settings in this file to override defaults and user settings.
{
 "files.exclude": {
 // exclude .js and .js.map files, when in a TypeScript project
 "node_modules": true,
 "**/*.js": { "when": "$(basename).ts"},
 "**/*.js.map": true
 }
}

Make Visual Studio Code Format Your Code with ESLint Rules

Sun, 05 Nov 2017 19:33:33 +0000

After adding ESLint to the project, everyone’s code became much cleaner. But because we weren’t familiar with ESLint rules at first, we spent a lot of time counting spaces and toggling between double and single quotes.

This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!!

Important things must be said three times!!!

Below is a method using the Visual Studio Code ESLint plugin. After configuration, your code will be automatically formatted according to ESLint rules.

Put Redux Aside, Try MobX

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx is a simple, highly scalable state management tool. Like Redux, Mobx is a tool for managing state in React. However, the development experience is better than Redux.

Installation

npm install mobx --save

//For React: 
npm install mobx-react --save

A Simple Counter

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

Using Decorators in Your React Project

Wed, 01 Nov 2017 19:33:33 +0000

Using Decorators

Currently only supports Babel/TypeScript preprocessors

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

Add it to your .babelrc configuration file. If you don’t have a .babelrc file, create one.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

The plugin order is very important: transform-decorators-legacy should be the first plugin.

When using React Native, the following preset can replace transform-decorators-legacy:

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

Using Decorators in create-react-app

npm run eject

Install the related plugins:

Move Blog to CSDN

Sun, 24 Sep 2017 00:04:05 +0000

Move blog to CSDN

https://blog.csdn.net/m0_48741717

My Blog Will Sync to Tencent Cloud+ Community

Sun, 24 Sep 2017 00:04:05 +0000

My blog will sync to Tencent Cloud+ Community, invite everyone to join: https://cloud.tencent.com/developer/support-plan?invite_code=onqmnob0dh5k

Git Series - About the Add Command

Sun, 10 Sep 2017 19:33:33 +0000

Basic Usage

Usually add <path> to the index library through the form git add <path>,

<path> can be a file or a directory:

git add <path>

If there are many changes, you can use the following command to add all changed files at once:

 git add -A .

Add all modifications to the staging area, including new files and edited files, excluding deleted files:

$ git add .

Means add all content:

React Series: How Parent Components Pass Props to this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

Problem

When using React Router, the following pattern appears frequently:

this.props.children

But how does the parent component pass props to a component rendered this way?

Solution

We can pass props to child components like this:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

MySQL Safe Mode

Sat, 26 Aug 2017 23:36:00 +0000

Today when deleting a piece of data, the following error appeared.

You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.

Because MySQL is running in safe-updates mode.

To disable this mode, run the following command:

SET SQL_SAFE_UPDATES = 0

For safety, it’s recommended to restore to default state 1 after completing operations

MySQL Access Denied for User Issue

Fri, 25 Aug 2017 23:36:00 +0000

Problem

When connecting to MySQL from another server, an error appeared: Access denied for user ‘root’@‘xxx.xxx.xxx.xxx’ (using password: YES).

This is a database permission issue.

Solution

On the MySQL server, log in as root and execute the following SQL statement:

mysql -u root -p

Then enter your password.

Then execute the following command:

GRANT ALL PRIVILEGES ON *.* TO 'your-account'@'%' IDENTIFIED BY 'your-password' WITH GRANT OPTION;

After successful execution:

FLUSH PRIVILEGES;

Then try connecting to your database again, it should work.

Debug Node.js with Chrome DevTools

Tue, 08 Aug 2017 00:04:05 +0000

Prerequisites

Node.js 6.3+;
Chrome 55+;

Configure Chrome (Latest versions no longer need this step);

Enter URL: chrome://flags/#enable-devtools-experiments to enter Developer Lab
Enable highlighted option
Restart Chrome
Open DevTools Setting -> Experiments;
Press Shift 6 times consecutively to show hidden options
Find Node debugging and check it. (New versions no longer have this option, it’s enabled by default. So Chrome doesn’t need configuration)

Run Node.js

Just add –inspect to the command, followed by the file you want to execute;

React Series: Create React Native Apps with create-react-native-app

Sun, 30 Jul 2017 19:33:33 +0000

Earlier when introducing create-react-app, I briefly mentioned create-react-native-app.

This tool is actually quite fun to use. The biggest advantage is that you can debug React Native apps on your computer without installing Xcode or Android Studio.

By computer, I mean Mac, Windows, and Linux!!!!

create-react-native-app

Create React Native App Installation

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

Install the Expo app on your iPhone or Android phone. After running npm start, a QR code will appear in the console. Scan it with the Expo app, and you can start remote debugging on your phone right away. It’s very convenient, though a bit slower than desktop simulator debugging.

Talking About HTTP MIME

Wed, 26 Jul 2017 16:14:25 +0000

What is MIME?

MIME (Multipurpose Internet Mail Extensions) Multipurpose Internet Mail Extensions;

In the earliest HTTP protocol, there was no additional data type information.

All transmitted data was interpreted by client programs as HTML documents, and to support multimedia data types, the HTTP protocol used MIME data type information attached before documents to identify data types.

Each MIME type consists of two parts, the front part is the general category of data, such as audio, image, etc., and the back part defines the specific type.

HTTP URI Format Explanation

Tue, 25 Jul 2017 16:14:25 +0000

Below are the various components of a URI

 Authority Path
 ┌───────────────┴───────────────┐┌───┴────┐
 abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
 └┬┘ └───────┬───────┘ └────┬────┘ └┬┘ └─────────┬─────────┘ └──┬──┘
 Protocol User Info Hostname Port Query Params Fragment

Make Webpack Support sftp Upload Files

Tue, 18 Jul 2017 11:43:05 +0000

Today introduce two plugins, can make your webpack support uploading files to your ftp server.

sftp-webpack-plugin

Install sftp-webpack-plugin

npm install sftp-webpack-plugin --save-dev

Usage

const SftpWebpackPlugin = require('sftp-webpack-plugin');

var config = {
 plugins: [new SftpWebpackPlugin({
 port: 'your port',//Server port
 host: 'your host',//Server address
 username: 'your username',//Username
 password: 'your password',//Password
 from: 'you neeed upload file path ',//Your local path
 to: 'you want to destination'//Path on server
 })]
}

webpack-sftp-client

Install webpack-sftp-client

npm install webpack-sftp-client --save-dev

Usage

var WebpackSftpClient = require('webpack-sftp-client');

var config = {
 plugins: [new WebpackSftpClient({
 port: '22',//Server port
 host: 'exmaple.com',//Server address
 username: 'root',//Username
 password: 'password',//Login password
 path: './build/', //Local path
 remotePath: '/data/website/demo/', //Server path
 verbose: true //Console show detailed information
})]
}

React Series: An Auto-Height iframe Component

Mon, 17 Jul 2017 19:33:33 +0000

When embedding iframes in a webpage, you always need to deal with the iframe height problem.

How do we do it in React?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

Macbook Pro Bluetooth Unavailable Issue

Sun, 16 Jul 2017 22:30:05 +0000

Two days ago in the morning at company, computer started up. Found mouse couldn’t be used.

After fiddling around, found computer Bluetooth became a wavy line. Shows Bluetooth unavailable.

Fiddled for a long time, computer system also upgraded to latest version. Restarted several times, Bluetooth still in unavailable state.

Searched Baidu, online also has similar problem solutions.

1. Shutdown


2. Press shift+control+option+power simultaneously, hold for 5 seconds


3. Press power key first, then immediately press option+command+p+r simultaneously,
Wait for mac to make 4 Duang~ sounds, then release, system will automatically start


4. Bluetooth returns to normal

But some netizens tried it and it was successful.

Publish Aliyun API Signature Generation Tool Based on Node.js -- AliToSing

Sun, 16 Jul 2017 00:04:05 +0000

Aliyun API signature generation tool based on Node.js

Github AliToSign

Aliyun Signature Official Documentation

Installation method:

npm install alitosign --save

Usage method:

Example: Add Domain

const alitosign = require("alitosign");
const querystring = require("querystring");
const moment = require("moment");
const http = require("http");

// Basically common parameters needed for calling interfaces
let originParams = {
 AccessKeyId: "xxxxxxx", // AccessKeyId acquisition method please refer to official documentation
 Format: "JSON",
 Version: "2015-01-09",
 SignatureMethod: "HMAC-SHA1",
 SignatureVersion: "1.0",
};

function AddDomain() {
 // Copy common parameters
 let params = Object.assign({}, originParams);

 // Add necessary parameters for the interface you want to call on the new object,
 // Each interface is different, please check official documentation for details
 params.Action = "AddDomain";
 params.DomainName = "time-friend.com";
 params.GroupId = "2223";

 // Add timestamp
 params.Timestamp = moment.utc().format(); // Use Greenwich Mean Time;
 params.SignatureNonce = new Date().getTime();

 // Generate signature
 let signParams = alitosign(params);

 // Convert object containing signature property to query format string
 let queryParams = querystring.stringify(signParams);

 // Concatenate url
 let url = `http://alidns.aliyuncs.com/?` + queryParams;

 // Call interface
 http.get(url, (res) => {
 res.on("data", function (data) {
 // After serialization, you can get the data you want
 let oData = JSON.parse(data);
 });
 });
}

React Series: Make create-react-app Support LESS Imports

Fri, 14 Jul 2017 19:33:33 +0000

Currently, create-react-app does not support importing LESS directly. Here I’ll show you how to make it support LESS imports.

create-react-app is based on webpack, but it doesn’t expose the webpack.config files. To support LESS, you need to modify the webpack configuration. The following command exposes the configuration files:

npm run eject

After running it, you’ll see a new config folder. Inside are files like webpack.config.dev.js and webpack.config.prod.js.

Next, install less-loader

npm install less-loader less --save-dev

Then modify the webpack.config.dev.js file.

React Series - JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX is an interesting thing. It looks like a template language, but has all the capabilities of JavaScript.

In React, JSX is used to generate React elements.

After we create an APP using create-react-app:

A Piece of JSX Code

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 I am an APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

We Can Embed Expressions in JSX

 //Insert data 
 const data = {name:"Xiaoming"}
 const ele = <div>My name is: {data.name} </div>;

 //Calculate
 const ele1 = <div> {1+1} </div>;

 //Ternary expression
 const ele2 = <div> {true?"I am Xiaoming":"I am not Xiaoming"} </div>;

 //In attributes
 const ele3 = <img src={date.xxx} />;

Because JSX is compiled by Babel, it itself is an object.

React Series: Starting from a Scaffold - create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

The React ecosystem is incredibly vast. If beginners want to directly experience the charm of React, here is an official scaffold. The usage is very simple.

create-react-app

Basic Usage

Install

npm install -g create-react-app

Create an app

create-react-app my-app
cd my-app/

File structure:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

Start the app:

npm, yarn Package Manager Switch to Taobao Registry

Sat, 01 Jul 2017 20:32:05 +0000

Due to some special reasons, package management software like npm, Yarn always downloads a bit slow in China. Can switch to Taobao registry, directly pull from domestic servers. Here’s a note:

NPM

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

If the above configuration doesn’t work happily, can try the following method:

npm config set registry http://registry.cnpmjs.org
npm info underscore 
//(If above configuration is correct, this command will have string response)

yarn

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

If EACCES: permission denied permission error appears, Fix /usr/local directory ownership:

Cross-domain with CSS3: CSST (CSS Text Transformation)

Tue, 20 Jun 2017 16:14:25 +0000

CSST (CSS Text Transformation)

Getting content through CSS3’s content property.

Dynamically create a link element with JS and insert it into the document to request a CSS file.
Use computedStyle = window.getComputedStyle to get the style object of a specified element.
Use computedStyle.content to get the content.

The CSS file that the server can return:

 @keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 @-webkit-keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 #CSST {
 content: "${text}";
 animation: anima 2s;
 -webkit-animation: anima 2s;
 }

${text} is the data we want to populate.

Common Ground Between Object.defineProperty and Proxy

Thu, 01 Jun 2017 11:33:33 +0000

When reading Vue documentation, I found an interesting point. It’s about how Object.defineProperty is used similarly to Proxy. Very interesting.

The documentation says:

When you pass a plain JavaScript object to a Vue instance’s data option, Vue will walk through all of this object’s properties and convert them to getter/setter using Object.defineProperty.

Object.defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

obj: Required. Target object
prop: Required. Name of the property to define or modify
descriptor: Required. Descriptor for the target property

Return value:

What Object.defineProperty and Proxy Have in Common

Thu, 01 Jun 2017 11:33:33 +0000

While reading the Vue documentation, I noticed something interesting.

The use of Object.defineProperty and the new Proxy feature have some similarities. Quite interesting.

The docs say:

When a plain JavaScript object is passed to the Vue instance’s data option, Vue iterates over all of its properties and converts them to getter/setters using Object.defineProperty.

Object.defineProperty

Syntax:

Object.defineProperty(obj, prop, descriptor)

obj: Required. The target object.
prop: Required. The name of the property to define or modify.
descriptor: Required. The descriptor for the target property.

Return value:

Talking About Vue Event Modifiers

Thu, 25 May 2017 19:33:33 +0000

Event Modifiers

Speaking of vue event modifiers, compared to angularJs, really too comfortable, greatly increases readability.

In daily development, often need to call event.preventDefault or event.stopPropagation and other methods.

Without event modifiers, we would write like this:

//AngularJS
$scope.fn=function(message,event){
 if (event) event.preventDefault()
 alert(message)
 }
}

//vue can also write like this
methods: {
 fn: function (message, event) {
 // Now we can access native event object
 if (event) event.preventDefault()
 alert(message)
 }
}

Vue provides more convenient writing:

A WeChat SPA Page Webview Cache Issue

Wed, 22 Feb 2017 16:14:25 +0000

A Low-Level Problem

Because the company’s WeChat project uses Angular routing for single-page applications. So page switching is done based on hash values.

We encountered a problem: every time we deploy new web code to the server. On Android WeChat client, it always takes many days. Even requires uninstalling WeChat. After reopening the page, the page will update. (But there’s no such problem on iPhone)

If a critical bug is encountered after the version is officially released. That would be a disaster.

Hexo DTraceProviderBindings MODULE_NOT_FOUND Issue

Sun, 19 Feb 2017 21:32:05 +0000

Recently installing Hexo on Mac, always getting error DTraceProviderBindings MODULE_NOT_FOUND;

First Type of Error

Error command as follows:

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

Although Hexo’s generate and publish functions weren’t affected. But every time running commands, it would error. Very annoying;

Common method online is:

npm install hexo --no-optional

But, my computer still had no effect;

Express Set CORS, Let Browser Cross-Origin Access Your Server

Sat, 18 Feb 2017 21:32:05 +0000

Speaking of frontend cross-origin, it really makes many frontend developers sweat.

Cross-origin solutions are like eight immortals crossing the sea. Various black tech, various black magic. Makes people amazed. (If you don’t understand, you can search)

But none are perfect solutions, all can do this but not that.

Today I’ll talk about the ultimate cross-origin solution (IE8 and lower versions don’t support)

var express = require('express'); 
var app = express(); 
//Set CORS
app.all('*', function(req, res, next) { 
 res.header("Access-Control-Allow-Origin", "*"); 
 //Second parameter is an asterisk, means pages from any domain can request this server;
 //Set specified domain:
 //res.header("Access-Control-Allow-Origin", "http://baidu.com");
 //This way, web pages under baidu.com can ajax request your server


 res.header("Access-Control-Allow-Headers", "X-Requested-With"); 


 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 
 //Second parameter is which HTTP request methods the other party can use to request your server, set according to your situation


 res.header("X-Powered-By",' 3.2.1') 
 res.header("Content-Type", "application/json;charset=utf-8"); 
 next(); 
}); 
 
app.get('/', function(req, res) { 
 res.send("You have successfully accessed this server"); 
}); 
 
app.listen(3000);

Make Node.js Fetch Like Browser

Fri, 17 Feb 2017 20:32:05 +0000

Previous article briefly introduced Node.js http module’s get and post methods, but because post configuration is still quite cumbersome, today recommend a module:

node-fetch

Installation

npm install node-fetch --save

Usage

var fetch = require('node-fetch');

// HTML 
fetch('https://github.com/')
 .then(function(res) {
 return res.text();
 }).then(function(body) {
 console.log(body);
 });
 


// JSON 
fetch('https://api.github.com/users/github')
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// When network error occurs
fetch('http://domain.invalid/')
 .catch(function(err) {
 console.log(err);
 });
 


// stream
var fs = require("fs")
fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')
 .then(function(res) {
 var dest = fs.createWriteStream('./octocat.png');
 res.body.pipe(dest);
 });
 


// buffer 
var fileType = require('file-type');
fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')
 .then(function(res) {
 return res.buffer();
 }).then(function(buffer) {
 fileType(buffer);
 });
 

// meta 
fetch('https://github.com/')
 .then(function(res) {
 console.log(res.ok);
 console.log(res.status);
 console.log(res.statusText);
 console.log(res.headers.raw());
 console.log(res.headers.get('content-type'));
 });
 


// POST request 
fetch('http://httpbin.org/post', { method: 'POST', body: 'a=1' })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// post with stream from resumer 
var resumer = require('resumer');
var stream = resumer().queue('a=1').end();
fetch('http://httpbin.org/post', { method: 'POST', body: stream })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 



// post form data
 
var FormData = require('form-data');
var form = new FormData();
form.append('a', 1);
fetch('http://httpbin.org/post', { method: 'POST', body: form })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 




// post form data and modify header 
var FormData = require('form-data');
var form = new FormData();
form.append('a', 1);
fetch('http://httpbin.org/post', { method: 'POST', body: form, headers: form.getHeaders() })
 .then(function(res) {
 return res.json();
 }).then(function(json) {
 console.log(json);
 });
 


// node 0.12+, yield with co 
var co = require('co');
co(function *() {
 var res = yield fetch('https://api.github.com/users/github');
 var json = yield res.json();
 console.log(res);
});

API

fetch(url, options)

Returns a Promise object

Node.js http Module GET and POST Requests

Thu, 16 Feb 2017 20:32:05 +0000

In front-end, we often need to use ajax to get and submit data to the server. The server can also initiate the same request to another server.

Today, let’s talk about how Node.js initiates requests to another server.

GET Request

Writing is quite simple, a bit similar to angular’s $http.get.

 var http = require('http');
 http.get("http://baidu.com", function(response) {
 console.log(response)
 });
})

POST Request

Compared to get, post writing is much more cumbersome.

Get Public IP with Node.js

Wed, 15 Feb 2017 21:30:05 +0000

Because Raspberry Pi is placed at home, due to ISP reasons, public IP keeps changing. How can we quickly get the current network’s public IP?

Today introduce a small tool that can simply get public IP.

public-ip

Installation

npm install --save public-ip

Usage

const publicIp = require('public-ip');
 
publicIp.v4().then(ip => { 
 console.log(ip);
 //=> '46.5.21.123' 
});
 
publicIp.v6().then(ip => {
 console.log(ip);
 //=> 'fe80::200:f8ff:fe21:67cf' 
});

Set HTTPS

If using https, it will query based on icanhazip.com service.

Automated Deployment Based on Github and Coding Code Hosting Platforms

Tue, 14 Feb 2017 22:30:05 +0000

Since playing with Raspberry Pi, I need to frequently update code to Raspberry Pi every day.

But it’s too frequent, repetitive things need to be done over and over. Very time-consuming.

Found Github and Coding both have webhook functionality,

So I had an idea:

Want every time git push updates code, Use hosting platform’s webhook to notify my Raspberry Pi, After receiving notification, automatically update hosting platform’s latest code, and automatically restart.

Generate Aliyun API Signature with Node.js

Mon, 13 Feb 2017 21:32:05 +0000

To call Aliyun’s DNS API, you must generate the signature required by Aliyun. Signature Mechanism

I couldn’t find Node.js related code for getting signatures online. According to Aliyun’s requirements, I wrote a program myself to easily generate signatures.

const querystring = require('querystring');
const crypto = require("crypto");

module.exports=function getSignatureParams(params) {
 StringToSign = "GET" + "&" + percentEncode("/") + "&" + percentEncode(uriSort(params))
 var Signture = getSignture(StringToSign);
 params.Signature = Signture;
 return params; // Return complete uri with signature
}


 function percentEncode(str) { // Percent encode uri
 var s = encodeURI(str);
 return s
 .replace(/ /g, "%20")
 .replace(/\//g, "%2F")
 .replace(/\+/g, "%20")
 .replace(/\*/g, "%2A")
 .replace(/\%7E/g, "~")
 .replace(/\=/g, "%3D")
 .replace(/\&/g, "%26")
 .replace(/\:/g, "%253A")
 }
 
 function getSignture(Signature) { // Calculate HMAC
 // 47awTgVxfVEBL8hewkBgYD6kEvuJn0 
 return crypto
 .createHmac('sha1', "testsecret&") // Your secret
 .update(Signature)
 .digest()
 .toString('base64');
 }

 function uriSort(uri) { // Sort uri parameters
 var arr = querystring.stringify(uri).split("&");
 arr = arr.sort();
 var str = "";
 [].forEach.call(arr, function (s, i) {
 if (i == (arr.length - 1)) {
 str = str + s
 } else {
 str = str + s + "&"
 }
 });
 return str;
 }

Disable Mac SIP and Uninstall Input Methods on Mac

Sat, 21 Jan 2017 22:30:05 +0000

On Mac computers, some extra input methods found can’t be deleted. Every time switching input methods always need to press several more times. Extremely annoying.

First is the system default input method.

Disable Mac System SIP

Restart system, hold Command + R to enter recovery mode.
Click Terminal in top menu bar Utilities.
Enter the following command to disable SIP protection mechanism.

csrutil disable

After execution, output the following information indicating disable successful.

Successfully disabled System Integrity Protection. Please restart the machine for the changes to take effect.

Finally restart system.

Re-enable SIP Method

In recovery mode terminal enter the following command

Raspberry Auto Time Calibration

Fri, 20 Jan 2017 22:30:05 +0000

Should be Raspberry Pi system version issue, many methods online to enable Network Time Protocol (auto time calibration) have failed. For a beginner like me, tried many methods, none succeeded.

Today let’s talk about the correct way to enable;

Raspberry Pi doesn’t enable auto time calibration by default. Need to enable NTP (Network Time Protocol) to ensure time accuracy as much as possible.

Enable NTP:

sudo timedatectl set-ntp true

Next let’s see if time is correct:

Is POST More Secure Than GET?

Mon, 16 Jan 2017 11:46:35 +0000

From the very first day we learned about sending requests, teachers told us: POST requests are more secure than GET requests.

Why?

In the era of sending requests via forms, GET requests carried information in the URL bar, while POST did not — POST put the information in the request body.

Because GET requests put parameters in the URL bar, others could see them, inevitably exposing some information.

Hence the conclusion: POST is more secure than GET.

Raspberry Startup pm2

Thu, 12 Jan 2017 20:32:05 +0000

My Raspberry Pi journey can be described as bumpy, researched for over ten hours before installing Node.js.

Next wanted to do startup pm2, struggled for another ten hours. Methods online because couldn’t keep up with version iterations updated, causing various failures.

Next, introduce method to make pm2 startup on Raspberry Pi

First download pm2

cnpm install pm2 -g

Run code that needs to run

pm2 start app.js

Save pm2 running state at this time, so after startup, pm2 can rerun app.js

Raspberry Install Node.js

Wed, 11 Jan 2017 22:30:05 +0000

My installed Raspberry Pi system comes with Node.js, but version is very low. And no npm. To install new version nodejs, I struggled for over ten hours, various methods online failed.

Finally installed successfully, next I’ll introduce my installation method.

Download Node.js

Node.js Download Page

We choose Linux Binaries (ARM) ARMv7 version, copy download link

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-armv7l.tar.xz
tar -xzf node-v6.9.5-linux-armv7l.tar.xz // Extract installation package
sudo mv node-v6.9.5-linux-armv7l /usr/local/bin/node/
sudo ln /usr/local/bin/node/bin/node /usr/local/bin/node
sudo ln -s /usr/local/bin/node/lib/node_modules/npm/bin/npm /usr/local/bin/npm

Alright, at this time we enter in any directory:

Raspberry External Network Access

Tue, 10 Jan 2017 20:53:05 +0000

I want to operate my home Raspberry Pi when at company. But home ip address is dynamic, what should I do?

After various online searches, using router port forwarding or DMZ, can achieve external network access to internal network.

But after I set it up, didn’t succeed. Struggled for a long time, didn’t find the reason. Finally ended in failure. (I suspect I bought a fake router).

After trying various solutions, using Peanut Shell can achieve external network access to internal network, Peanut Shell’s term is:

Raspberry Operate via SSH

Tue, 10 Jan 2017 17:53:05 +0000

After various searches, various struggles, finally installed operating system for my little Raspberry Pi. But, this PIXEL OS graphical interface, various inexplicable bugs that won’t respond. After struggling for several hours, made me very frustrated.

Because just started with Linux, many problems need online searches, switching back and forth between PC and Raspberry Pi is really uncomfortable.

Below introduces method to control Raspberry Pi via SSH from another computer. To solve the above frustrating problems.

Raspberry System Installation

Tue, 10 Jan 2017 12:43:05 +0000

New Year passed, Taobao merchants finally started working and shipping. Before New Year, wanted to buy a Raspberry Pi to play with. But my luck was bad, merchants were already preparing to go home for New Year.

Yesterday ordered on Taobao. Got it today. I bought Raspberry-Pi3 Modle B.

Raspberry Pi doesn’t come with hard drive, so if you want to install system, need to prepare TF card or USB drive yourself.

My Project Debugging Methods at Work

Wed, 04 Jan 2017 11:46:35 +0000

Mobile Debugging

To debug mobile pages on a PC, follow these steps:

PC

Download WeChat Web Developer Tools;
Open the WeChat Developer Tools and select Mobile Debugging;
Select a request and copy the cookie;
Open Chrome DevTools on your computer, switch to the console, and enter the following code (for authentication):

 document.cookie="the cookie you just copied"

If it’s a WeChat page, you need to use Chrome to simulate the WeChat browser’s user-agent. Tutorial:

Simulate UA to access pages that can only be opened on WeChat

Creating a Canvas Particle Effect

Sun, 04 Sep 2016 11:46:35 +0000

Preview: Canvas Simple Particle Effect Preview

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas Simple Particle Effect Preview</title>
 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 overflow: hidden;
 }
 </style>
</head>
<body>
 <canvas id="dotCanvas"></canvas>
 <script>
 (function () {
 var domConvas = document.getElementById("dotCanvas");
 var oCanvas = domConvas.getContext("2d");

 var winWidth = document.documentElement.clientWidth;
 var winHeight = document.documentElement.clientHeight;

 domConvas.width = winWidth;
 domConvas.height = winHeight;

 var dots = [];
 for (var i = 0; i < 300; i++) {
 dots.push({
 x: Math.random() * winWidth >> 0,
 y: Math.random() * winHeight >> 0,
 xm: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 ym: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 max: 6000
 })
 }

 function amen() {
 return !!(Math.random() * 10 >> 0) % 2
 }

 dotMove();

 function dotMove() {
 oCanvas.clearRect(0, 0, winWidth, winHeight)

 dots.forEach(function (dot, index) {
 dot.x = dot.x + dot.xm;
 dot.y = dot.y + dot.ym;

 if (dot.x < 0 || dot.x > winWidth) {
 dot.xm = dot.xm * -1
 }

 if (dot.y < 0 || dot.y > winHeight) {
 dot.ym = dot.ym * -1
 }

 oCanvas.fillRect(dot.x, dot.y, 2, 2);

 for (var i = 0; i < dots.length; i++) {
 var dot2 = dots[i];
 if (dot2 == dot) continue;

 var gou = dot.y - dot2.y;
 var gu = dot.x - dot2.x;

 var xian = gou * gou + gu * gu;
 
 if (xian < dot2.max) {
 oCanvas.beginPath();
 oCanvas.strokeStyle = 'rgba(0,0,0,1)';
 oCanvas.lineWidth=1;
 oCanvas.moveTo(dot.x, dot.y);
 oCanvas.lineTo(dot2.x,dot2.y)
 oCanvas.stroke()
 }
 }
 })

 requestAnimationFrame(dotMove)
 }

 })()
 </script>
</body>

</html>

Replaced and Non-Replaced Elements

Mon, 29 Aug 2016 17:33:33 +0000

Suddenly heard about this concept. Never heard of it before. So I looked it up to learn more.

Replaced and Non-Replaced Elements

Replaced elements generally refer to elements that have default styles, such as: img, input, textarea, select, object
Non-replaced elements are the opposite, that is, all elements other than replaced elements like: img, input, textarea, select, object.

JavaScript Operator Precedence

Thu, 25 Aug 2016 11:33:33 +0000

JavaScript Operators

The following table lists JavaScript operators, ordered from highest to lowest precedence. Operators with the same precedence are evaluated left to right.

Operator	Description
. [ ] ( )	Field access, array indexing, function calls, and expression grouping
++ – - ~ ! delete new typeof void	Unary operators, return data type, object creation, undefined value

/ %|Multiplication, division, remainder

- +|Addition, subtraction, string concatenation « » »>|Shift < <= > >= instanceof|Less than, less than or equal, greater than, greater than or equal, instanceof == != === !==|Equality, inequality, strict equality, strict inequality & |Bitwise AND ^|Bitwise XOR | | Bitwise OR && |Logical AND || | Logical OR ?: |Conditional (ternary) = OP=|Assignment, compound assignment (e.g. += and &=) , |Multiple evaluation

A Trap with Fetch

Wed, 08 Jun 2016 22:52:35 +0000

Fetch does not include cookies in cross-origin requests.

Solution:

Add the parameter {credentials: 'include'} to include cookies in the request.

fetch('doAct.action', {credentials: 'include'}).then(function(res) {
 // ...
})

About HTML5 History API

Mon, 06 Jun 2016 23:52:35 +0000

About HTML5 History API

HTML5 enhanced the history API. In SPAs, there are two ways to change the URL without refreshing the page:

Modify the page’s hash value
Use the enhanced pushState from HTML5

Let’s start with hash, which works in all browsers.

Hash is what we used to call an anchor. We’re not unfamiliar with it. We can set it via:

location.hash="212345"

This sets the URL’s hash value. The result looks like:

About FormData File Upload

Fri, 03 Jun 2016 23:46:35 +0000

About file upload

In the modern era, use input file to select a file, then pass the DOM object into FormData.

var filedata = document.getElementById('file');

var formData= new FormData();

formData.append('file',filedata);

var xhr = new XMLHttpRequest();

xhr.open('post','url',true);
xhr.send(formData);
xhr.onreadystatechange= function(){
 if(xhr.readyState = 4 &&xhr.staus == 200){
 do something....
 }
}

// assuming the HTML already has a form with an input type="file"
var form = document.getElementById('form');

// just pass it into FormData
var formData= new FormData(form);

var xhr = new XMLHttpRequest();

xhr.open('post','url',true);
xhr.send(formData);
xhr.onreadystatechange= function(){
 if(xhr.readyState = 4 &&xhr.staus == 200){
 do something....
 }
}

In the era before FormData, we used form to upload files.

AngularJS Lazy Loading (3)

Wed, 01 Jun 2016 23:55:35 +0000

The previous article roughly described Angular’s startup process,

If you want to asynchronously load third-party modules in your own project, you need to run through the main logic from the previous article again.

This way, all methods of third-party modules can be loaded into Angular.

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 '$injector',
 function($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {

 //As mentioned in the first article, expose internal methods
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;


 //And define a global function for easy future calls
 //Code for loading third-party modules,
 window.addModule=function(moduleName){
 var module = angular.module(moduleName);
 var ngProviders = {
 '$controllerProvider': $controllerProvider,
 '$compileProvider': $compileProvider,
 '$filterProvider': $filterProvider,
 '$provide': $provide
 };

 if (module.requires) {
 for (var i = 0; i < module.requires.length; i++) {
 addModule(module.requires[i]);
 }
 }
 angular.forEach(module._invokeQueue, function(args) {
 var provider = ngProviders[args[0]] || $injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._configBlocks, function(args) {
 var provider = ngProviders.$injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._runBlocks, function(args) {
 $injector.invoke(args);
 });
 }

 }
]);

AngularJS Lazy Loading (2)

Tue, 31 May 2016 20:34:35 +0000

In the previous article, we implemented the simplest AngularJS lazy loading,

by replacing Angular’s internal methods and using require.js with $q to complete lazy loading.

Today let’s talk about how Angular lazy loads third-party modules;

Before that, we need to understand how Angular starts.

setupModuleLoader Method

In the above figure, we need to pay attention to a very important method;

setupModuleLoader method, as the name suggests - module loader;

AngularJS Lazy Loading (1)

Mon, 30 May 2016 16:14:25 +0000

Today let’s talk about a problem that has been bothering me for a long time. AngularJS lazy loading.

The benefits of Angular don’t need to be mentioned here, but after using it for a while, you’ll find that all Controllers, Services, Directives, etc. of a website are loaded completely, before the page starts running.

For small projects with little code, this doesn’t feel like a big problem.

But when there are more pages, the main page becomes increasingly bloated. Useful and useless code are all loaded. Although loading everything means the first page load will be much slower, subsequent pages will be extremely fast. But this is not Smart at all.

Journey

Sat, 28 May 2016 14:19:04 +0000

WeChat Browser Dynamically Modify Title

Thu, 26 May 2016 11:43:05 +0000

WeChat Browser Dynamically Modify Title

Why this article? Previously when doing spa page development, discovered something very puzzling.

The following code in WeChat browser is invalid.

document.title = "I am title"

After title is first generated, cannot be changed.

But it’s okay,

Below we use black magic code to complete title modification in WeChat browser.

document.title = "I am title";
var iframe = document.createElement("iframe");
iframe.src = "/favicon.ico";
document.body.appendChild(iframe);
iframe.onload = function() {
 setTimeout(function() {
 document.body.removeChild(iframe);
 }, 0)
}

Like this, title changed.

JavaScript Tips and Tricks

Wed, 25 May 2016 11:33:33 +0000

Type Conversion

Array to String

var arr = [1,2,3,4,5,6];
var str = arr+''; //1,2,3,4,5,6

String to Number

var str = '999';
var num = str * 1; //999

var str = '999';
var num = str - 0; //999

String to Number

var str = '999';
var num = str * 1; // 999

Floor

var num = ~~1.23232656; // 1

var num = 563.933333 >> 0; // 563

Boolean Conversion

var bool = !!null; // false
var bool = !!'null'; // true

var bool = !!undefined; // false
var bool = !!'undefined'; // true

var bool = !!0; // false
var bool = !!'0'; // true

var bool=!!''; // true
var bool=!![]; // true
var bool=!!{}; // true

var bool=!!new Boolean('false'); // true
var bool=!!new Boolean('true'); // true

Check if an Object Has a Property

Direct Check

var obj = {a:123};
if(obj.a){ //obj.b ==>123
console.log('runs') //runs
}

if(obj.b){ //obj.b ==>undefined
console.log('runs') //does not run
}

var obj2 = {a:false};
if(obj2.a){ //obj.b ==>false
console.log('runs') //does not run
}
// Not strict: if value is 0, undefined, false, null... it also evaluates to false

in Operator

var obj = {a:123};
if('a' in obj){ // 'a' in obj ==>true
console.log('runs') //runs
}

if('b' in obj){// 'a' in obj ==>false
console.log('runs') //does not run
}

Using hasOwnProperty

var obj = {a:123};
if(obj.hasOwnProperty('a')){ //==>true
console.log('runs') //runs
}

if(obj.hasOwnProperty('b')){ //==>false
console.log('runs') //does not run
}

There are many more, I’ll add them slowly.

Common Browser Local Storage Methods

Fri, 29 Apr 2016 17:33:33 +0000

In daily development, you will inevitably encounter requirements for storing some data in the browser. Currently, the commonly used storage methods are:

Cookie was not originally designed for data storage, but rather to distinguish HTTP requests. That’s why every HTTP request carries cookies. If the amount of data stored in cookies is too large, it will certainly cause HTTP performance issues.

// set cookie (store data)
function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}

// read cookie (read data)
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

localStorage

Compared to cookie operations, localStorage is much simpler. Additionally, every update to localStorage triggers an onstorage event.

What is Browser Repaint and Reflow

Mon, 25 Apr 2016 19:33:33 +0000

Repaint and Reflow Definitions

Repaint: When current element’s style (background color, font color, etc.) changes, we only need to re-render the changed element, repaint has smaller impact on browser performance, so generally not considered. 　　Repaint situations: Changing container’s appearance style, etc., like background: black, etc. Changing appearance, not changing layout, not affecting other dom.
Reflow: Process where browser recalculates element positions and geometric structure in document to re-render part or all of document. Because reflow may cause entire dom tree reconstruction, it’s a major performance killer. An element’s reflow causes subsequent reflow of all its child elements and ancestors immediately following it in DOM.

Mobile Website Tap Highlight or Gray Background Issue

Wed, 20 Apr 2016 19:33:33 +0000

Mobile website tap highlight or gray background issue

Simply add a class style to the bound event element to make the background transparent when the event is triggered

.class{-webkit-tap-highlight-color:transparent;}

Source Code Analysis - Small Differences Between Providers in AngularJS

Mon, 22 Feb 2016 16:14:25 +0000

AngularJS Providers

Angular has the following methods to create providers:

provider()
service()
factory()

Provider Usage

angular.module("app", [])
.provider("HelloAngular", function() {
 return {
 $get: function() {
 var name = "Xiaoming";
 function getName() {
 return name;
 }
 return {
 getName: getName
 }
 }
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Service Usage

angular.module("app", [])
.service("HelloAngular", function() {
 this.name = "Xiaoming";
 this.getName=function(){
 return this.name;
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Factory Usage

angular.module("app", [])
.factory("HelloAngular", function() {
 var name = "Xiaoming";
 function getName(){
 return name;
 }
 return {
 	getName:getName
 };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

The implementation methods differ, but the usage is exactly the same

Hexo SEO Optimization (Search Engine Optimization)

Tue, 19 Jan 2016 21:32:05 +0000

Today let’s talk about hexo’s SEO, specifically some search engine optimization for Baidu and Google.

Sitemap

Install sitemap plugin

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

Add the following configuration in _config.yml

sitemap:
 path: sitemap.xml
baidusitemap:
 path: baidusitemap.xml

Generate sitemap

hexo clean
hexo g

Baidu Active Push

Install plugin

npm install hexo-baidu-url-submit --save

Plugin configuration in _config.yml

baidu_url_submit:
 count: 10 # Number of latest links to submit
 host: time-friend.com # Domain registered on Baidu Webmaster Platform, although the official recommendation includes www, it can be without.
 token: your_token ## Note: this is your secret key, please don't publish it in public repositories!
 path: baidu_urls.txt # Text file address, new links will be saved in this text file

Deploy configuration in _config.yml

deploy:
- type: git # Deploy type
 repository: xxxxx # Repository
 branch: master 
- type: baidu_url_submitter # Add this line

Push and deploy

hexo clean
hexo g

ES6 Proxy

Fri, 31 Jul 2015 21:17:51 +0000

Proxy

ES6 introduces Proxy. So what is Proxy?

Proxy, as the name suggests, acts as a proxy. In ES6, Proxy can intercept and customize operations performed on an object.

This means you can listen to and modify access and changes made to an object from the outside, and do additional things.

Here’s an example:

var obj={
 a:1
}
var proxyObj = new Proxy(obj,{ //proxyObj will inherit obj
 set:function(){
 alert("I've been modified")
 }
 });

 // Modify property
 proxyObj.a=2; // After the property is modified, the previously set handler is triggered
 console.log(obj.a) // 2

It’s that simple.

ES6 Promise

Tue, 28 Jul 2015 23:13:56 +0000

Promise

Promise, like Generator from the previous chapter, is also a solution for asynchronous programming.

You can find similar approaches for handling async operations in jQuery and Angular.

Basic Usage


// First, instantiate a Promise
var promise = new Promise(function(resolve, reject) {
 // Promise has two parameters: resolve and reject — one for success, one for failure

 if (/* true or false */){
 resolve(value); // Success: executes the first callback of promise.then
 } else {
 reject(error); // Failure: executes the second callback of promise.then
 }

});


promise.then(function(value){

 // When resolve() runs in the Promise function, this executes
 // It receives the parameter passed to resolve

},function(error){

 // When reject() runs in the Promise function, this executes
 // It receives the parameter passed to reject

}).catch(function(error){

 // If either callback in then throws an error, catch handles it
 // This prevents the code from stopping execution due to errors

})

That’s a complete Promise usage example. Simple, isn’t it?

ES6 Generator

Sat, 25 Jul 2015 22:15:47 +0000

Basic Usage of Generator

Generator is an asynchronous solution provided by ES6. What can it do?

What specific problems can it solve for us?

For example, let’s say I need to do something, but it requires two ajax calls to complete first.

For instance:

$http.get('request 1').success(function(){
 $http.get('request 2').success(function(){
 // do something ...
 })
})

This approach requires nested callbacks. With more requests, the code becomes very messy.

Now with Generator, how would we do it?

ES6 Arrow Functions

Sun, 19 Jul 2015 20:45:33 +0000

ES6 introduces Arrow Functions.

var foo = (a) => a;
foo("hello word"); //hello word

Equivalent to:

var foo = function(a){
 return a
}
foo("hello word"); //hello word

With a single parameter, you can even omit the parentheses:

var foo = a => a;
foo("hello word"); //hello word

If the function has no parameters, you must include the parentheses:

var foo = () => {
 alert("hello word");
};

As an event handler:

document.addEventListener('click', event => {
 console.log(event)
})

Callback:

$("button").hover(
 ()=>{
 // mouse enter
 console.log("mouse enter");
},
 ()=>{
 // mouse leave
 console.log("mouse leave");
})

With arrow functions, this inherits from the enclosing scope. Here’s an example:

ES6 Destructuring Assignment

Fri, 17 Jul 2015 23:32:16 +0000

Learning about destructuring reminded me of a classic problem:

Swap the values of two variables a and b without using a third variable.

var a = 10,
 b = 20;
 a = {
 a: a,
 b: b
 };
 b = a.a;
 a = a.b;

 console.log(a) //20
 console.log(b) //10

var a = 10,
 b = 20;
 a = [a,b]
 b = a[0];
 a = a[1];

 console.log(a) //20
 console.log(b) //10

There’s also a tricky one-liner:

var a = 10,
 b = 20;
 a=[b,b=a][0];

 console.log(a) //20
 console.log(b) //10

Now with destructuring assignment, it’s much cleaner:

var a=10;
var b=20;
 [a,b]=[b,a];
 console.log(a) //20
 console.log(b) //10

Pretty neat, right?

ES6 Variables - let and const

Wed, 15 Jul 2015 20:18:24 +0000

ES6 has been officially released for a month now. I’ll be sharing some study notes and my understanding of it.

New Keywords: let and const

JavaScript has always used var to declare variables.

function foo(){
 var a = 1;
 console.log(a)
}

foo(); //1

Now we have two new friends: let and const.

The let Command

function foo(){
 let a = 1;
 console.log(a)
}

foo(); //1

This looks the same as var. Let’s look at the next example.

ES6 Quick Start - How to Run ES6 in the Browser

Wed, 15 Jul 2015 19:02:36 +0000

The word Babel can be translated as the Tower of Babel.

The Bible, Old Testament, Genesis

Chapter 11 declares that at that time, humans united to build a tower that could reach heaven. To stop this plan, God made humans speak different languages, so they could no longer communicate with each other. The plan failed, and humans scattered across the earth.

This is probably why babel.js is called Babel.

How to Run ES6

Online Compilation

Babel has a REPL online compiler that can convert ES6 code to ES5 directly in the browser.

Automated Deployment Frontend Code - Using grunt-ftp-deploy

Sun, 14 Jun 2015 23:36:00 +0000

Every time after modifying code, need to deploy to remote server, my operation steps are:

Modify code –> grunt build –> Open FileZilla –> Login ftp server –> Find local folder –> Find remote server target folder –> Select all local files –> Upload

Because deploying code, at some times will be particularly frequent. Every time need to repeat the above eight operations. Want to do something, change this.

Today our protagonist: grunt-ftp-deploy

Annoying AngularJS Annotations - Using grunt-ng-annotate

Fri, 12 Jun 2015 23:15:00 +0000

Angular added dependency injection

When writing code, roughly written as follows

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

But such code, after compression will cause a problem. Function parameters: $scope, $http, $state, $timeout will become: a,b,c,d

Causing this function cannot find services to inject, because each parameter’s naming is strictly required.

As follows:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

To solve this problem, angular supports the following writing:

AngularJS Directive Template

Thu, 21 May 2015 22:17:36 +0000

myModule.directive('namespaceDirectiveName', function factory(injectables) {

 var directiveDefinitionObject = {
 restrict: string,// Directive usage method, including tag, attribute, class, comment
 priority: number,// Directive execution priority
 template: string,// Template used by directive, expressed as HTML string
 templateUrl: string,// Load template from specified url address
 replace: bool,// Whether to replace current element with template, if false, append to current element
 transclude: bool,// Whether to transfer current element's content to template
 scope: bool or object,// Specify directive's scope
 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},// Define interface function for interacting with other directives
 require: string,// Specify other directives that need to be depended on
 link: function postLink(scope, iElement, iAttrs) {...},// Programmatically manipulate DOM, including adding listeners, etc.
 compile: function compile(tElement, tAttrs, transclude){
 return: {

 pre: function preLink(scope, iElement, iAttrs, controller){...},
 post: function postLink(scope, iElement, iAttrs, controller){...}
 }

 }// Programmatically modify DOM template copy, can return link function
 };

 return directiveDefinitionObject;

});

New Beginning, Journey

Sun, 20 Jul 2014 00:00:00 +0000

2014-07-20

Graduated, What you can’t learn, that’s called learning!!!! :)

2018-11-20

We learn so many technologies, just to give business more possibilities, let our imagination have a solid foundation rather than random thoughts.

2018-12-16

Turns out the motivation for all my learning comes entirely from anxiety about the future.

2018-12-28

My growth seems to need to race against time.

2019-01-01

This year’s goals established, two points total. One is English, one is weight~