Lynn’s Blog

JavaScript Basics

2020-10-07T00:00:00+08:00

Read a little history of JavaScript here.

Miscellaneous

Display content
- In the console: console.log('Hello, world!');
- Show alert message: alert('Hello, world!');
Comments
- Single-line comment: //
- Multi-line comment: /* */
Semicolons
- One statement ends and another begins: ;
Variables
- Naming conventions: camelCase

Data Types

Numbers
- Arithmetic operators: +, -, *, /, %
- Comparison operators: <, >, <=, >=, ==, !=
Strings
- String literals: " ", ' '
- String concatenation: +
- String index: 'James'[0];
- Escaping strings: \\, \", \', \n, \t
- Comparing strings: character-by-character for the ASCII values (charCodeAt(0))
Booleans
- true
- false
Null, Undefined, and NaN
- Value of nothing: null
- Absence of value: undefined
- Not-A-Number: NaN
Equality
- Implicit type coercion: '1' == 1, 0 == false, ' ' == false (Returns: true)
- Strict equality: ===, !==

Conditions

If…else statements

if (/* this expression is true */) {
    // run this code
} else {
    // run this code
}

Else ff statements

if (/* this expression is true */) {
    // run this code
} else if (/* exra conditional statement */) {
    // run this code
} else {
    // run this code
}

Logical operators
- Logical AND: &&
- Logical OR: ||
- Logical NOT: !
Short-circuiting
- false && _ returns false
- true || _ returns true
Truthy and falsy
- Only six falsy values in all JavaScript
  - The Boolean value false
  - The null type
  - The undefined type
  - The number 0
  - The empty string ''
  - The odd value NaN
- It’s truthy if it’s not in the list of falsy values
Ternary operator
- conditional ? (if condition is true) : (if condition is false)

Switch statement

switch (option) {
    case 1:
        console.log('You selected option 1.');
        break;
    case 2:
        console.log('You selected option 2.');
        break;
    case 3:
        console.log('You selected option 3.');
        break;
    default:
        console.log('You selected option ' + option + '.');
}

Loops

While loop

var start = 0; // when to start
while (start < 10) { // when to stop
    console.log(start);
    start = start + 2; // how to get to the next item
}

For loop

for (start; stop; step) {
    // do this thing
}

Increment and decrement
- x++ or ++x // same as x = x + 1
- x-- or --x // same as x = x - 1
- x += 3 // same as x = x + 3
- x -= 6 // same as x = x - 6
- x *= 2 // same as x = x * 2
- x /= 5 // same as x = x / 5

Scope and Variable Declaration

Global scope
- When a particular variable is visible (can be used) anywhere in the code.
Function scope
- When a particular variable is visible (can be used) within a particular function only.
Block scope
- When a particular variable is visible (can be used) within a pair of { . . . } only.

/*
 * Global scope.
 * This variable declared outside of any function is called Global variable.
 * Hence, you can use this anywhere in the code
 */
var opinion = 'This nanodegree is amazing';

// Function scope
function showMessage() {
    // Local variable, visible within the function `showMessage`
    var message = 'I am an Udacian!';

    // Block scope
    {
          let greet = 'How are you doing?';
        /*
         * We have used the keyword `let` to declare a variable `greet` because variables declared with the `var` keyword can not have Block Scope.
         */
    } // block scope ends

    console.log( message ); // OK
    console.log( greet ); // ERROR.
    // Variable greet can NOT be used outside the block

    console.log( opinion ); // OK    to use the gobal variable anywhere in the code

} // function scope ends

Variable declaration
- let
  - It is a new way to declare a variable in any scope. The value of this variable can be changed or reassigned anytime within its scope.
- const
  - It is also a way to declare constants in any scope. Once you are assigned a value to a const variable, the value of this variable CANNOT be changed or reassigned throughout the code.
- var
  - This is the old way of declaring variables in only two scope — Global, or Local. Variables declared with the var keyword can not have Block Scope. The value of this variable can be changed or reassigned anytime within its scope.

Functions

// x and y are parameters in this function declaration
function add(x, y) {
    // function body
    // Here, `sum` variable has a scope within the function.
    // Such variables defined within a function are called Local variables
    // You can try giving it another name
    var sum = x + y;
    return sum; // return statement
}

// 1 and 2 are passed into the function as arguments,
// and the result returned by the function is stored in a new variable `sum`
// Here, `sum` is another variable, different from the one used inside the function
var sum = add(1, 2);

Function body

function add(x, y) {
    // function body!
}

Return statements
```
1
return sum;
```
Invoke or call a function
```
1
add(1, 2);
```

Hoistinng

Examples

sayHi('Julia');
function sayHi(name) {
    console.log(greeting + ' ' + name);
    var greeting = 'Hello';
}

undefined Julia

sayHi('Julia');
function sayHi(name) {
    console.log(greeting + ' ' + name);
    var greeting = 'Hello';
}

undefined Julia

function sayHi(name) {
    var greeting = 'Hello';
    console.log(greeting + ' ' + name);
}
sayHi('Julia');

Hello Julia

JavaScript hoists function declarations and variable declarations to the top of the current scope.
Variable assignments are not hoisted.
Declare functions and variables at the top of your scripts, so the syntax and behavior are consistent with each other.

Function Expressions

Function Expression: When a function is assigned to a variable. The function can be named, or anonymous. Use the variable name to call a function defined in a function expression.

// anonymous function expression
var doSomething = function(y) {
    return y + 1;
};

// named function expression
var doSomething = function addOne(y) {
    return y + 1;
};

// for either of the definitions above, call the function like this:
doSomething(5);

All function declarations are hoisted and loaded before the script is actually run. Function expressions are not hoisted, since they involve variable assignment, and only variable declarations are hoisted. The function expression will not be loaded until the interpreter reaches it in the script.

Callback: A function that is passed into another function.

// function expression catSays
var catSays = function(max) {
    var catMessage = '';
    for (var i = 0; i < max; i++) {
      catMessage += 'meow ';
    }
    return catMessage;
};

// function declaration helloCat accepting a callback
function helloCat(callbackFunc) {
    return 'Hello ' + callbackFunc(3);
}

// pass in catSays as a callback function
helloCat(catSays);

Inline function expressions: Writing function expressions that pass a function into another function inline.

// function declaration that takes in two arguments: a function for displaying
// a message, along with a name of a movie
function movies(messageFunction, name) {
    messageFunction(name);
}

// call the movies function, pass in the function and name of movie
movies(function displayFavorite(movieName) {
    console.log('My favorite movie is ' + movieName);
}, 'Finding Nemo');

Arrays

// creates a `donuts` array with three strings
var donuts = ['glazed', 'powdered', 'jelly'];

// creates a `mixedData` array with mixed data types
var mixedData = ['abcd', 1, true, undefined, null, 'all the things'];

// creates a `arraysInArrays` array with three arrays
var arraysInArrays = [[1, 2, 3], ['Julia', 'James'], [true, false, true, false]];

Indexing

var donuts = ['glazed', 'powdered', 'sprinkled'];
console.log(donuts[0]); // 'glazed' is the first element in the `donuts` array

donuts[1] = 'glazed cruller'; // changes the second element in the `donuts` array to 'glazed cruller'

Properties and Methods

Array.length

var donuts = ['glazed', 'powdered', 'sprinkled'];
console.log(donuts.length);

3

Push

var donuts = ['glazed', 'chocolate frosted', 'Boston creme', 'glazed cruller', 'cinnamon sugar', 'sprinkled'];
donuts.push('powdered'); // pushes 'powdered' onto the end of the `donuts` array, and returns the length of the array after an element has been added

7

Pop

var donuts = ['glazed', 'chocolate frosted', 'Boston creme', 'glazed cruller', 'cinnamon sugar', 'sprinkled', 'powdered'];
donuts.pop(); // pops 'powdered' off the end of the `donuts` array, and returns the element that has been removed

powdered

Splice
- arrayName.splice(start, deleteCount, item1, ..., itemX);
  - start Mandatory argument. Specifies the starting index position to add/remove items. You can use a negative value to specify the position from the end of the array e.g., -1 specifies the last element.
  - deleteCount Optional argument. Specifies the count of elements to be removed. If set to 0, no items will be removed.
  - item1, ..., itemX are the items to be added at index position start
  - Returns the item(s) that were removed.

Array Loops

for or while loop

var donuts = ['jelly donut', 'chocolate donut', 'glazed donut'];
// the variable `i` is used to step through each element in the array
for (var i = 0; i < donuts.length; i++) {
    donuts[i] += ' hole';
    donuts[i] = donuts[i].toUpperCase();
}

forEach()

var donuts = ['jelly donut', 'chocolate donut', 'glazed donut'];

donuts.forEach(function(donut) {
    donut += ' hole';
    donut = donut.toUpperCase();
    console.log(donut);
});

The function passed to the forEach() method can take up to three parameters: element, index, and array. It always returns undefined.

words = ['cat', 'in', 'hat'];
words.forEach(function(word, num, all) {
    console.log('Word ' + num + ' in ' + all.toString() + ' is ' + word);
});

Word 0 in cat,in,hat is cat

Word 1 in cat,in,hat is in

Word 2 in cat,in,hat is hat

map()

The map() method takes an array, performs some operation on each element of the array, and returns a new array.

var donuts = ['jelly donut', 'chocolate donut', 'glazed donut'];

var improvedDonuts = donuts.map(function(donut) {
    donut += ' hole';
    donut = donut.toUpperCase();
    return donut;
});

Objects

var sister = {
    name: 'Sarah',
    age: 23,
    parents: ['alice', 'andy'],
    siblings: ['julia'],
    favoriteColor: 'purple',
    pets: true,
    paintPicture: function() { return 'Sarah   paints!'; }
};

// two equivalent ways to use the key to return its value
sister['parents'] // returns ['alice', 'andy']
sister.parents // also returns ['alice', 'andy']

sister.paintPicture();

References

Intro to JavaScript

Git Basics

2020-10-05T00:00:00+08:00

Terminology

Working Directory
Staging Area / Staging Index / Index

Basic Commands

Create or Clone a Repository

Check the repository’s status
- git status
Initial a local repository
- git init NAME
Clone a remote repository to local (default branch: master, default remote name: origin)
- git clone URL

Review a Repository’s History

List all commits
- git log
  - --oneline
  - --graph
  - --all
  - -p or --patch
  - --stat
List specific commit
- git show SHA

Add Commits to a Repository

Add
- Add files to staging area
  - git add FILE1 FILE2
- Add all changed files to staging area
  - git add .
Commit
- Record changes in staging area to the repository
  - git commit
- Use the given message as the commit message
  - git commit -m MESSAGE
Diff
- git diff

Working Directory      <------+-------+-------+
        |                     |       |       |
        |                     |       |       |
        V                     |       |       |
    "git add"                 |       |     diff
        |                     |       |       |
        |                     |       |       |
        V                     |       |       |
      Index      <----+-------|-------|-------+
        |             |   diff HEAD   |
        |             |       |       |
        V             |       |       |
  "git commit"  diff --cached |   diff HEAD^
        |             |       |       |
        |             |       |       |
        V             |       |       |
      HEAD       <----+-------+       |
        |                             |
        |                             |
        V                             |
previous "git commit"                 |
        |                             |
        |                             |
        V                             |
      HEAD^            <--------------+

Good Commit Messages

Explain what the commit does in the first line
Explain why in the body
No how

Tag, Branch and Merge

Tag
- Create tag
  - git tag TAG
- Create tag with annotation
  - git tag -a TAG or git tag --annotate TAG
- Delete tag
  - git tag -d TAG
Branch
- Create branch
  - git branch BRANCH
- Delete branch
  - git branch -d BRANCH
- Switch branch or restore working tree files
  - git checkout BRANCH/TAG/SHA
- Create a branch and switch to it
  - git checkout -b BRANCH
Merge
- git merge BRANCH/TAG/SHA

Undoing Changes

Relative Commit References
- ^ indicates the parent commit
- ~ indicates the first parent commit
Replace the tip of the current branch by creating a new commit
- git commit --amend
Revert an existing commit
- git revert SHA
Reset current HEAD to the specified state
- git reset SHA
  - --mixed
  - --soft
  - ---hard
  - Video

Git Collaboration

Working With Remotes

Remote
- git remote
  - -v
  - add REMOTE URL
  - rename OLD NEW
  - remove REMOTE
Update remote refs along with associated objects
- git push
Download objects and refs from another repository
- git fetch
Fetch from and integrate with another repository or a local branch
- git pull = git fetch + git merge

Working On Another Developer’s Repository

Fork repository
Summarize ‘git log’ output
- git shortlog
  - -s
  - -n
  - --author=NAME
  - --grep=REGEX

Staying In Sync With A Remote Repository

Pull request
Stay in sync with source project
- origin
- upstream
Reapply commits on top of another base tip
- git rebase -i BASE

References

GitHub & Collaboration

A New PB for Mini-Marathon in HUST 🏅

2019-11-24T00:00:00+08:00

The weather this morning was as cold as usual, but I was one of them at the entrance of Huazhong University of Science and Technology. This is the third mini-marathon I participated in. With my previous experience, I arrived at the starting point very early. The usual training gave me more confidence, and the final result did not disappoint me.

This is a new personal best, and I achieved a huge leap compared to the previous two competitions. Although I was a little tired when I was running, I knew that it was far from my limit. I hope that I can enter the top 20 next time.

Completed Another Online Running

2019-11-15T00:00:00+08:00

From October 11th to November 10th, I ran 353.39 kilometers in a month and completed another online running of HUST. I finally got another shiny bookmark today 🔖.

I also finally collected the bookmarks for the 4th to 6th online running.

I am looking forward to next year’s event.

Set Up Visual Studio Code for Markdown and Jekyll

2019-11-15T00:00:00+08:00

In the end, I switched from Sublime Text back to Visual Studio Code 😂. I think I should not go back anymore. The reason I gave up the Visual Studio Code before was that it would make my computer overheat, but I found that I can solve this problem by uninstalling or disabling unnecessary extensions.

Visual Studio Code is very friendly to Markdown and has a very good experience even after installation without any customization. I mainly use Markdown to write my blog and README documents. The following settings are mainly based on my two needs.

Markdown Linting

This is a feature that is not built into Visual Studio Code, which is the only I have to install an extension. The name of the extension is markdownlint, the same as the package for Sublime Text.

After installation, you only need to set the rules in the Visual Studio Code’s Settings according to your writing habits. My settings are:

"markdownlint.config": {
    "MD003": { "style": "atx" },
    "MD004": { "style": "dash" },
    "MD007": { "indent": 4 },
    "MD029": { "style": "one" },
    "MD046": { "style": "fenced" }
}

Snippets for Jekyll

Visual Studio Code also supports snippets. Since I put all my Jekyll projects under the Blog folder, I create a folder snippets through Code -> Preferences -> User Snippets -> New Snippets file for 'Blog'..., it’s located in /Blog/.vscode/markdown.code-snippets.

{
    "Markdown link": {
        "scope": "markdown",
        "prefix": "link",
        "body": "[$1]($2)"
    },
    "Markdown post link": {
        "scope": "markdown",
        "prefix": "post",
        "body": "[$1]({{ site.baseurl }}{% post_url $2 %})"
    },
    "Markdown post anchor link": {
        "scope": "markdown",
        "prefix": "anchor",
        "body": "[$1]({{ site.baseurl }}{% post_url $2 %}#$3)"
    },
    "Markdown image": {
        "scope": "markdown",
        "prefix": "image",
        "body": "![$1]({{ site.baseurl }}/assets/images/$2)"
    },
    "Markdown video": {
        "scope": "markdown",
        "prefix": "video",
        "body": "{% include youtube.html id=\"$1\" %}"
    }
}

Auxiliary Script

I haven’t found an extension like Jekyll yet, so I wrote a few scripts to make my life easier.

Create New Post

#!/bin/bash
set -euo pipefail

date=$(date +"%Y-%m-%d")
title=$(echo "$@" | tr "[:upper:]" "[:lower:]" | tr " " -)

cat >> "$date-$title.md" << EOF
---
title: $@
tags: []
---
EOF

It will create a file with the beginning of the current date, followed by the parameters of the script, where the parameters are the title. The file contains a simple template with the post’s title. For example, you can use newpost Hello World (the script is saved as newpost) to create file 2019-11-15-hello-world.md

Build Site with Docker

I created a Docker image to make it easy for me to build Jekyll site based on light-blog. It’s very convenient to use, as long as you install Docker, execute the following script in your site’s root directory, Docker will automatically pull the image, and then build your site.

#!/bin/bash
set -euo pipefail

rm -f Gemfile.lock
docker run --rm -p 4000:4000 -v $(pwd):/site lynn9388/github-pages-docker

Switch IP Quickly

2019-09-27T00:00:00+08:00

I usually need to access different networks through different network settings, such as accessing the campus network via DHCP and using static IP to access the server in the lab. So I need a way to switch IP quickly.

For macOS

macOS supports saving multiple network settings for different locations. You can see the settings in System Preferences -> Network -> Location.

Add New Locations

You just need to click Location -> Edit Locations... -> +, and set a name for the untitled new location. For example, I set two locations, Automatic and lab. The former uses the default network settings to enable Wi-Fi to automatically obtain IP, while the latter will set a static IP, which allows me to access resources on the LAN.

Switch Locations

After you add a new network, you will find a new option in the menu of the Apple logo in the upper left corner of the screen. All you need to do is switch between different locations when you need to change the IP quickly.

For Windows

Windows users could quickly configure the network through Network Shell (Netsh). For convenience, you can create a batch file and choose to execute different commands when you need to switch IP.

Create Batch File

You can create a batch file (such as config-ip.bat) based on the code below (You can also view the source file here).

REM Please update the variables below before you run it
SET ethernet-adapter-name=Ethernet
SET wifi-adapter-name=Wi-Fi
SET ethernet-static-ip=192.168.1.90
SET wifi-static-ip=192.168.1.90

@echo off
cls
color 0A

:check_Permissions
fsutil dirty query %systemdrive% >nul
if %errorLevel% == 0 (
    goto loop
) else (
    echo ######
    echo #     # #      ######   ##    ####  ######    #####  #    # #    #      ##    ####
    echo #     # #      #       #  #  #      #         #    # #    # ##   #     #  #  #
    echo ######  #      #####  #    #  ####  #####     #    # #    # # #  #    #    #  ####
    echo #       #      #      ######      # #         #####  #    # #  # #    ######      #
    echo #       #      #      #    # #    # #         #   #  #    # #   ##    #    # #    #
    echo #       ###### ###### #    #  ####  ######    #    #  ####  #    #    #    #  ####
    echo=
    echo    #    ######  #     # ### #     # ###  #####  ####### ######     #    ####### ####### ######     ### ###
    echo   # #   #     # ##   ##  #  ##    #  #  #     #    #    #     #   # #      #    #     # #     #    ### ###
    echo  #   #  #     # # # # #  #  # #   #  #  #          #    #     #  #   #     #    #     # #     #    ### ###
    echo #     # #     # #  #  #  #  #  #  #  #   #####     #    ######  #     #    #    #     # ######      #   #
    echo ####### #     # #     #  #  #   # #  #        #    #    #   #   #######    #    #     # #   #
    echo #     # #     # #     #  #  #    ##  #  #     #    #    #    #  #     #    #    #     # #    #     ### ###
    echo #     # ######  #     # ### #     # ###  #####     #    #     # #     #    #    ####### #     #    ### ###
    pause
    Exit
)

:loop
echo 1 DHCP %ethernet-adapter-name%
echo 2 Static %ethernet-adapter-name% (%ethernet-static-ip%)
echo 3 DHCP %wifi-adapter-name%
echo 4 Static %wifi-adapter-name% (%wifi-static-ip%)
echo 5 Show IP Configuration
echo 6 Exit
echo|set /p=Please choose a option:

set/p sel=
if "%sel%"=="1" goto DHCP-Ethernet
if "%sel%"=="2" goto Static-Ethernet
if "%sel%"=="3" goto DHCP-Wifi
if "%sel%"=="4" goto Static-Wifi
if "%sel%"=="5" goto Show-IP-Configuration
if "%sel%"=="6" EXIT
echo=
echo Please choose a valid option
goto loop

:DHCP-Ethernet
netsh interface ip set address name=%ethernet-adapter-name% source=dhcp
netsh interface ip delete dns %ethernet-adapter-name% all
ipconfig /flushdns
goto Show-IP-Configuration

:Static-Ethernet
netsh interface ip set address name=%ethernet-adapter-name% source=static addr=%ethernet-static-ip% mask=255.255.255.0 gateway=192.168.1.1
netsh interface ip set dns name=%ethernet-adapter-name% source=static addr=192.168.1.1
ipconfig /flushdns
goto Show-IP-Configuration

:DHCP-Wifi
netsh interface ip set address name=%wifi-adapter-name% source=dhcp
netsh interface ip delete dns %wifi-adapter-name% all
ipconfig /flushdns
goto Show-IP-Configuration

:Static-Wifi
netsh interface ip set address name=%wifi-adapter-name% source=static addr=%wifi-static-ip% mask=255.255.255.0 gateway=192.168.1.1
netsh interface ip set dns name=%wifi-adapter-name% source=static addr=192.168.1.1
ipconfig /flushdns
goto Show-IP-Configuration

:Show-IP-Configuration
netsh interface ip show addresses %ethernet-adapter-name%
netsh interface ip show addresses %wifi-adapter-name%

echo=
goto loop

Note that before you run the batch file you should update the contents of the file at the start based on your network adapters and IP. If your settings for LAN are different from mine, you may need to modify other network parameters.

Run Batch as Administrator

When you want to switch IP, you only need to run the batch file you created earlier and then choose one option. But be aware that you must run it as administrator, otherwise you will only see one message PLEASE RUN AS ADMINISTRATOR !!.

BTW, you can avoid manually select Run as administrator from context menu by following steps below

Create a shortcut for this batch
Click Properties from the context menu to open Shortcut Properties
Click Advanced from the Shortcut tab
Check Run as administrator in the pop-up window
Save and close pop-up windows

After that, you only need to double-click the shortcut to run the batch file as administrator. Enjoy!😃

Switch Global Proxy Quickly

2019-09-23T00:00:00+08:00

Unlike the Google Chrome, Safari uses the system proxy by default and does not provide proxy API, so there is no extension like SwitchyOmega. Since I set my default browser to Safari, the tool to quickly switch proxy has become a necessary tool for me to access Google.

For macOS

I use SpechtLite.

A rule-based proxy app for macOS.

Install SpechtLite

Just download the zip file from here, then move the unzipped application into Applications folder.

Configure Proxy Server

Before you start using it, you need to add a configuration file (Filename can be set freely) into the profile folder (.SpechtLite folder within the root directory), which is /Users/lynn/.SpechtLite for my Mac.

You could configure your own proxy server according to the demo configuration file. But if you follow my settings for Shadowsocks local client, you can configure it like this:

port: 9090
adapter:
  - id: heroku
    type: socks5
    host: 127.0.0.1
    port: 1090
rule:
  - type: all
    adapter: heroku

Up and Running

Click Reload config after launching SpechtLite. Finally, start proxy by click the name of your configuration name, and check Set as system proxy. When you want to stop the global proxy, just click Stop proxy server.

For Windows

It’s hard to find a socks global proxy open source alternative for Windows that is as easy to use as Proxifier. But if one is not, we can use two instead 😂.

If you can access google with Shadowsocks and Heroku, you already have a Socks5 proxy. The open source tool Shadowsocks for Windows has build-in global proxy options, then all we have to do is convert the Socks5 protocol to the Shadowsocks protocol.

Tools

shadowsocks-heroku
- Connect to Shadowsocks server running in Heroku with WebSocket, and provide Socks5 proxy in local.
glider
- Provide Shadowsocks proxy in local, and forward requests to a Socks5 proxy.
Shadowsocks for Windows
- Connect to a local Shadowsocks proxy, and provide global proxy for Windows.

You should already have the first tool, so you only need to download the last two tools.

Convert Socks5 to Shadowsocks

After you download glider, you can see a command line tool called glider.exe.

To launch glider, you only need to run the following command in the Command Prompt after launching shadowsocks-heroku local client

glider -listen ss://CHACHA20-IETF:PASSWORD@:8388 -forward socks5://127.0.0.1:1090 -verbose

But you can also create a batch file (named as start.bat) next to the glider.exe, just run that file when you want to launch glider, without having to manually enter the command each time.

@ECHO OFF
CLS
COLOR 0A

glider -listen ss://CHACHA20-IETF:PASSWORD@:8388 -forward socks5://127.0.0.1:1090 -verbose

Configure Shadowsocks for Windows

The last thing before you start the global proxy is to add the Shadowsocks proxy server provided by glider to Shadowsocks for Windows. You need to right click on the icon after launching Shadowsocks for Windows, then click Servers -> Edit Servers...

Set Global Proxy

It’s time to enable global proxy for Windows, you just need to click System Proxy -> Global in Shadowsocks for Windows (If the global proxy does not work, check your firewall settings). If you want to disable the global proxy, just click System Proxy -> Disable.

Create a Lite Windows 10

2019-09-06T00:00:00+08:00

Since I usually use macOS, in some specific situations, such as using the full version of the Office, I need to temporarily use the Windows. My solution is to use a Windows virtual machine, but the image is one of the most simplified version.

Tools

We need an official Windows 10 image (you can find the official download URL from TechBench by WZT) and several other tools to rebuild that image.

Rebuild Windows 10 Image

Find a Windows PC to complete the following steps.

Remove Redundant Windows Versions

If the Windows image contains multiple versions, we can reduce the size of the image by removing the extra versions.

Open the Windows ISO image from UltraISO using File -> Open...
Extract install.win from sources folder using Extract To...
Open install.win from Dism++ using File -> Open Image File
Extract the smallest image using Export image (Choose Max in Save as type)
Replace the original install.win with the new extracted small installation image in UltraISO using Actions -> Add Files...
Save the Windows image using File -> Save

The new image (the first) is a few hundred megabytes smaller than the original image.

Remove Redundant Windows Components

Next, we need to remove the extra Windows components to further reduce the storage after the operating system is installed.

Extract downloaded ToolKit archive file
Copy your new Windows ISO image to ToolKit’s ISO folder
Run Start.cmd as administrator
Agree to ToolKit’s EULA by pressing A key
Press Enter key to continue
Extract the source image using Source -> Extract Source from DVD ISO Image menu
Select the source image using Source -> Select Source from <DVD> Folder menu
Cleanup the source image using Apply -> Cleanup Source Images menu
Remove all required Windows components using Remove -> Remove Windows Components menu (This could take hours depends on how many components you want to remove)
Cleanup the source image using Apply -> Cleanup Source Images menu
Apply & save changes to source image using Apply -> Apply & Save Changes to Source Images menu
Rebuild source image using Apply -> Rebuild Source Images menu
Export source image to a ISO image Target -> Make a DVD ISO Image menu

You will find the new ISO image (the second) in ToolKit’s ISO folder which is much smaller than the original image (the third).

Test in VM

I create two virtual machines with the original image and the new lite image, then compare their resource usage. I choose Windows 10 Home N for the original version of Windows 10 virtual machine which is the same Windows version in the lite image.

Result

We can see from the picture below that virtual machines created with the lite image take up less storage and use less memory at runtime.

This is mainly because the system only contains the necessary system applications.

As you can see from the comparison, the lite virtual machine is indeed lighter and certainly faster.

Upgrade of Keep Grade — KG.11 🎉

2019-08-22T00:00:00+08:00

From 5 kilometers, 10 kilometers, to the half-marathon, after 237 days I finally upgraded to the KG.11 on August 18, which is very exciting for me, and I look forward to the arrival of KG.12.

Then I received a free key ring yesterday 😂

Set Up Sublime Text for Markdown and Jekyll

2019-07-27T00:00:00+08:00

Sublime Text might be the first and most used code editor during my undergraduate stage. I have also tried Atom when they released the stable version, but I finally gave up after a short trial because it was too slow, especially after installing a lot of packages. After the official release of Visual Studio Code, I immediately chose it, it has good performance, easy-to-use extensions, and most importantly, it integrates with Git.

Visual Studio Code has been working very well all the time, but a week ago, I found that it always caused my computer to be hot, even if I didn’t do anything, maybe because it was based on Electron (which uses Chromium, that’s also why I started to set Safari as my default browser instead of Chrome). Then I started to miss Sublime Text. After I opened its website, I found that it also started to integrate Git 👍, which is exactly what I want.

I have switched back to Visual Studio Code.

Precondition

After you install Sublime Text 3, you should probably also install Package Control, which makes it easier to manage other packages.

In the latest version of Sublime Text 3, you only need to click Tools -> Install Package Control menu item.

For Markdown

Sublime Text 3 has provided good syntax highlighting for Markdown, but we also need some packages and update the settings to make it more suitable for writing Markdown.

Automatic Completion

I have introduced the syntax of Markdown, which is pretty simple, so in fact, you can use the built-in automatic completion function directly. But if you want more advanced features, you can try MarkdownEditing, I have tried it, but I don’t like it.

Markdown Linting

I am used to checking my Markdown file with markdownlint. After you install it, you need an easy way to use it in Sublime Text instead of calling it from the terminal each time.

Configure Markdownlint

According to Mdl configuration, Creating styles, and Rules, we need to create ~/.mdlrc and a style file (like ~/.mdl-rules.rb).

My settings for ~/.mdlrc:

show_kramdown_warnings true
ignore_front_matter true
style "/Users/lynn/.mdl-rules.rb"

We need to set an absolute directory for style, which is /Users/lynn/.mdl-rules.rb for ~/.mdl-rules.rb in my computer, but you should set it based on the path in your computer.

My settings for ~/.mdl-rules.rb:

all

rule 'MD003', :style => :atx
rule 'MD004', :style => :dash
rule 'MD007', :indent=> 4
rule 'MD029', :style => :one

exclude_rule 'MD002'
exclude_rule 'MD013'
exclude_rule 'MD041'
exclude_rule 'MD046'

According to your Markdown writing style and rules, you can set different lint rules.

Configure Sublime Text

Sublime Text provides build systems to allow users to run external programs. Examples of common uses for build systems include: compiling, transpiling, linting, and executing tests.

We can create a new build system with Tools -> Build System -> New Build System... menu.

My setting for Markdown Lint.sublime-build (You could change the file name):

{
    "cmd": ["mdl", "$file"],
    "selector": "text.html.markdown",
    "file_regex": "([ \\w-]+\\.md):(\\d+): ([^\\n]+)",
    "quiet": "true"
}

After you set the build system, click Tools -> Build in the Markdown file you opened to check the Markdown format according to the rules you set.

Markdown Preview

We need two packages for the feature:

After you install them, you need to enable LiveReload, just search LiveReload: Enable/disable plug-ins in Tools -> Command Palette..., and choose one plug-in that you like, my choose is Simple Reload with delay(400ms).

You can also configure the settings of Markdown Preview in Sublime Text -> Preferences -> Package Settings -> Markdown Preview -> Settings, mine is:

{
    "enabled_parsers": ["github"],
    "github_mode": "gfm"
}

When you want to preview a Markdown file, just search Markdown Preview: Preview in Browser in Command Palette, and it will show like this:

For Jekyll

I write Markdown for my blog, which is powered by Jekyll and light-blog. Since I always need to create posts, insert references and image resources, I need to enter the date and some specific code in Markdown. Fortunately, Sublime Text and the community provide the corresponding features and package to meet my requirements.

Snippets

I said earlier that syntax of Markdown is simple, but it’s boring to type links and multimedia elements. So I create several snippets in Tools -> Developer -> New Snippet..., that let me type in a few keywords and press the tab key to type the duplicates for me.

For example, I create Markdown Anchor Link.sublime-snippet to help me type the image element:

<snippet>
    <content><![CDATA[
![]({{ site.baseurl }}/assets/images/)
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>image</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown</scope>
</snippet>

After I add it, I can insert an image like this:

Jekyll

This package helps me to create a post and insert images. Like other packages, all I need to do is install it and configure its settings in Sublime Text -> Preferences -> Package Settings -> Jekyll -> Settings - User, then call the functions it provides via Command Palette.

My settings for it is:

{
    "jekyll_posts_path": "/Users/lynn/Documents/Writing/Blog/lynn9388.github.io/_posts",
    "jekyll_drafts_path": "/Users/lynn/Documents/Writing/Blog/lynn9388.github.io/_drafts",
    "jekyll_templates_path": "/Users/lynn/Documents/Writing/Blog/lynn9388.github.io/_templates",
    "jekyll_auto_find_paths": false,
    "jekyll_uploads_path": "/Users/lynn/Documents/Writing/Blog/lynn9388.github.io/assets",
    "jekyll_uploads_baseurl": "",
    "jekyll_default_markup": "Markdown",
    "jekyll_markdown_extension": "md",
    "jekyll_send_to_trash": true,
    "jekyll_date_format": "%Y-%m-%d",
    "jekyll_datetime_format": "%Y-%m-%d %H:%M:%S",
    "jekyll_debug": false,
    "jekyll_utility_disable": false
}

Through all the settings above, I finally got a satisfactory writing editor for my blog 🎉.