Node.js - Intro & Install


`JavaScript`没有二进制数据类型，`buffer`是`Node.js`提供的专门用来存放二进制数据的缓存区。

## 创建 buffer

```js
// 创建10字节的未启动的缓存区
var buf = Buffer.alloc(10)

// 从数组创建缓存区
var buf = Buffer.from([10, 20, 30, 40, 50])

// 从字符串创建缓存区
var buf = Buffer.from('Node.js', 'utf-8')
```

## 写入 buffer

语法：`buf.write(string[, offset[, length]][, encoding])`

```js
var buf = Buffer.alloc(256)
len = buf.write('Node.js')
console.log(len) // 7
```

## 读取 buffer

语法：`buf.toString(encoding,start,end)`

- `encoding`：使用编码，默认`utf-8`
- `start`：读取初始索引位置
- `end`：读取结束位置

```js
buf = Buffer.alloc(26)
for (var i = 0; i < 26; i++) {
  buf[i] = i + 97
}

console.log(buf.toString('ascii')) // 输出: abcdefghijklmnopqrstuvwxyz
console.log(buf.toString('ascii', 0, 5)) //使用 'ascii' 编码, 并输出: abcde
console.log(buf.toString('utf8', 0, 5)) // 使用 'utf8' 编码, 并输出: abcde
console.log(buf.toString(undefined, 0, 5)) // 使用默认的 'utf8' 编码, 并输出: abcde
```

## 将 buffer 转换为 json 对象

语法：`buf.toJson`

```js
const buf = Buffer.from([0x1, 0x2, 0x3, 0x4, 0x5])
const json = JSON.stringify(buf)

// 输出: {"type":"Buffer","data":[1,2,3,4,5]}
console.log(json)

const copy = JSON.parse(json, (key, value) => {
  return value && value.type === 'Buffer' ? Buffer.from(value.data) : value
})

// 输出: <Buffer 01 02 03 04 05>
console.log(copy)
```

## buffer 合并

语法：`Buffer.contact(list,totalLength)`

- `list`：用于合并的`Buffer`对象数组列表
- `totalLength`：合并后`Buffer`对象的总长度

```js
var buf1 = Buffer.from('Hello')
var buf2 = Buffer.from(' World!')
var buf3 = Buffer.concat([buf1, buf2])

console.log(buf3) //<Buffer 48 65 6c 6c 6f 20 57 6f 72 6c 64 21>
```

## buffer 比较

语法：`buf.compare(..)`

返回数字，0 表示相同，小于 0 表示 buf 在 bufToCompare 之前，大于 0 则相反

```js
var buf = Buffer.from('Hello')
var bufToCompare = Buffer.from('hello')

var result = buf.compare(bufToCompare)
console.log(result) // -1
```

## buffer 拷贝

语法：`buf.copy(target,targetStart,sourceStart,sourceEnd)`

- `target`：要拷贝的`Buffer`对象
- `targetStart`：默认 0
- `sourceStart`：默认 0
- `sourceEnd`：默认 0

```js
var buf = Buffer.from('Hello')
var bufToCopy = Buffer.from('World')

bufToCopy.copy(buf, 2)
console.log(buf.toString()) //HeWor
```

## buffer 切片

语法：`buf.slice(start,end)`

- `start`：切片初始位置，默认 0
- `end`：切片结束位置，默认为`buffer.length`

```js
var buf = Buffer.from('Hello World')
var result = buf.slice(0, 5)
console.log(result.toString()) //Hello
```

[入门教程](http://nodejs.cn/learn/nodejs-buffers)
[Node.js 文档](http://nodejs.cn/api/buffer.html)


buffer是Node.js提供用来存放二进制数据的缓存区

Node.js - Buffers


## 文档(Documentation)

MDN (Mozilla) JavaScript 参考是带有示例和其他信息的主要文档。

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript.)

## 兼容性(Compatibility tables)

由于 `JavaScript` 是一门持续开发中的语言，所以会定期添加新的特性，其中一些特性可能不会被所有的浏览器或引擎所支持。下面的网站可以帮助你识别哪些功能是由哪些浏览器/引擎或浏览器版本等所支持的。

- [Can i Use](https://caniuse.com/#search=javascript)
- [Compat Table](https://kangax.github.io/compat-table)

## 编辑器(IDE's)

一些比较热门的编辑器

- [Sublime Text](https://www.sublimetext.com/)
- [Atom](https://atom.io/)
- [WebStorm](https://www.jetbrains.com/webstorm/)
- [Visual Studio Code](https://code.visualstudio.com/)

## 教程(Tutorials / Courses)

- [MDN JavaScript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
- [The Modern Javascript Tutorial](https://javascript.info/)
- [Getting Started with JavaScript for Web Development Courses](https://scotch.io/courses/getting-started-with-javascript-for-web-development)
- [ES6-features.org](http://es6-features.org/)
- [JavaScript Tutorial](https://www.javascripttutorial.net/)
- [ES6 Tutorial](https://www.javascripttutorial.net/es6/)
- [Intro to ES6](https://scrimba.com/learn/introtoes6)
- [Tutorials Point - ES6 for beginners](https://www.tutorialspoint.com/es6/index.htm)
- [JavaScript Free Resources](https://www.java5cript.com/)

## 视频(Videos/ Courses)

- [Learn JavaScript - Full Course for Beginners - Video By freecodecamp.org](https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V&ab_channel=freeCodeCamp.orgfreeCodeCamp.orgVerified)
- [ES6 - JavaScript Improved](https://www.udacity.com/course/es6-javascript-improved--ud356)
- [Javascript Essentials](https://www.udemy.com/course/javascript-essentials/)
- [Learning ECMAScript The Next Generation of Javascript](https://www.udemy.com/course/ecmascript2015/)

## 书籍(Books)

- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [Understanding ECMAScript 6](http://superherojs.com/)
- [JavaScript the Good Parts](https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf)
- [Speaking JavaScript](http://speakingjs.com/es5/index.html)

## 练习(Learn JavaScript by building small projects)

- [30 Day Vanilla JS Coding Challenge](https://javascript30.com/)
- [Learn Javascript by building 7 games](https://www.freecodecamp.org/news/learn-javascript-by-building-7-games-video-course/)
- [24days of christmas](https://scrimba.com/learn/adventcalendar/welcome-to-24-days-of-javascriptmas-cg2QbehG)
- [Learn JavaScript](https://scrimba.com/learn/learnjavascript)
- [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
- [Freecodecamp.org](https://www.freecodecamp.org/)
- [Build a Quiz App with HTML, CSS, and JavaScript](https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/)
- [Smarter Way to learn JavaScript](http://www.asmarterwaytolearn.com/js/index-of-exercises.html)
- [30 Days of JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)
- [Learn JavaScript Online](https://learnjavascript.online/)
- [learn-js.org interactive JavaScript tutorial.](https://www.learn-js.org/en/)

## GitHub

- [Javascript Algorithm and Data Structures](https://github.com/trekhleb/javascript-algorithms)
- [33 JS Concepts](https://github.com/leonardomso/33-js-concepts)
- [20+ Web Projects With Vanilla JavaScript](https://github.com/bradtraversy/vanillawebprojects)
- [50 Projects in 50 Days - HTML/CSS and JavaScript](https://github.com/bradtraversy/50projects50days)
- [JavaScript Style Guide](https://blog.kritikapattalam.com/[https://github.com/airbnb/javascript)
- [30 seconds of code](https://github.com/30-seconds/30-seconds-of-code)
- [30 Day Vanilla JS Coding Challenge](https://github.com/wesbos/JavaScript30)
- [Clean Code Javascript](https://github.com/ryanmcdermott/clean-code-javascript)
- [Javascript Questions](https://github.com/lydiahallie/javascript-questions)
- [The Algorithms - JavaScript](https://github.com/TheAlgorithms/Javascript)

## 编程挑战(Programming Challenges)

- [Hackerrank](https://www.hackerrank.com/)
- [Coding Game](https://www.codingame.com/)
- [Leet Code](https://www.hackerrank.com/)
- [Coder Byte](https://coderbyte.com/)
- [Exercism](https://exercism.io/my/tracks/javascript)
- [Elevator Saga](http://play.elevatorsaga.com/)
- [Code Wars](https://www.codewars.com/)

## 在线编辑器(Coding Ground)

- [Codepen](https://codepen.io/)
- [Js fiddle](https://jsfiddle.net/)
- [Tutorials Point Coding Ground.](https://www.tutorialspoint.com/codingground.htm)
- [CodeSandBox](https://codesandbox.io/)

## 博客(Blogs)

- [Dmitri Pavlutin](https://dmitripavlutin.com/)
- [David Walsh](https://davidwalsh.name/)
- [SuperHero.JS](https://superherojs.com/)
- [Medium](https://medium.com/)
- [dev.to](https://dev.to/)
- [Hashnode](https://hashnode.com/)


JavaScript - Ultimate Free Resources


1. 复制`favicon`文件到`public`目录下

![kbo0B5](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/kbo0B5.jpg)

2. 编辑`pages/_app.js`

```js
import Head from 'next/head'

function MyApp({Component, pageProps}) {
  return (
    <>
      {/* the favicon */}
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      {/* the favicon */}
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
```

![eFVnUi](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/eFVnUi.jpg)


Next.js是基于React的框架，具有服务器端渲染功能。

Next.js - Add Favicon


## 通过 nvm 安装 nodejs

## 安装 nvm

```bash
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

或者

```bash
wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

然后：

```bash
source ~/.bashrc
```

## 安装 nodejs

```bash
nvm install stable
```


安装nvm和nodejs


css 选择器规定了 css 规则会被应用到哪些元素上。

## 通用选择器

通用选择器选择命名空间所有的元素，如果未提供命名空间，则选择文档所有元素。

```css
* {
  margin: 0;
  padding: 0;
}

#app * {
  box-sizing: border-box;
}
```

## ID 选择器

ID 选择器选择具有指定 ID 属性的元素。

```css
#app {
  background: #fff;
}
```

## 类选择器

类选择器选择具有特定名称的元素，如果未提供类名，则选择所有元素。

```css
.app {
  color: red;
}
```

## 属性选择器

属性选择器选择具有指定属性的元素。

```css
input[type='text'] {
  border: 1px solid #ccc;
}
```

## 元素选择器

元素选择器选择具有指定名称的元素。

```css
p {
  color: red;
}
```

## 子元素选择器

子元素选择器选择具有指定名称的元素的所有子元素。

```css
#app > a {
  color: red;
}
```

## 伪类选择器

伪类选择器选择具有指定名称的元素，如果未提供伪类名，则选择所有元素。

```css
.app:hover {
  color: red;
}
.app:after {
  content: '.';
}
```

## 组合选择器

组合选择器选择具有指定名称的元素，如果未提供组合选择器，则选择所有元素。

```css
/*选择命名空间所有的div、p*/
div,
p {
  color: red;
}
/*选择命名空间所有的 li*/
ul > li {
  color: red;
}
/*选择临近的p*/
div + p {
  color: red;
}
```


css选择器规定了css 规则会被应用到哪些元素上

css - Selectors


文本和排版（Typography）是网页设计和开发中非常重要的方面。以下是对这两个主题的详细解释：

文本（Text）是指在网页上显示的字母、数字、符号和其他字符的组合。网页设计师和开发人员可以使用 CSS 来控制文本的外观、布局和样式。以下是一些常见的文本属性：

- 字体属性（font）：控制文本的字体、字号、字重和字形。可以使用 Web 安全字体或自定义字体。
- 颜色属性（color）：控制文本的颜色。可以使用命名颜色、RGB 值、十六进制值或 HSL 值来定义颜色。
- 行高属性（line-height）：控制文本行之间的间距。设置行高可以提高文本的可读性。
- 字距属性（letter-spacing）：控制字母之间的距离。
- 文本对齐属性（text-align）：控制文本在其容器中的对齐方式。

排版（Typography）是指使用字体、排版和排版技巧来设计和布局文本。以下是一些常见的排版技巧：

- 字体选择：选择字体可以根据设计要求选择合适的字体，同时，要考虑可读性和可访问性。例如，sans-serif 字体更容易阅读，而 serif 字体通常用于印刷品。
- 行距：设置适当的行距可以提高文本的可读性。
- 段落间距：适当的段落间距可以使文本更易于阅读。
- 列宽：将文本限制在较窄的列宽中，可以使文本更易于阅读和理解。
- 字母大小写：使用适当的字母大小写可以改善文本的可读性和可访问性。
