BFC

BFC 是 Block Formatting Context 的简写，它会创建一个特殊的区域，在这个区域中，只有 block box(指 display 属性为 block、list-item、table、run in box 的元素) 参与布局。而 BFC 的一套特点和规则就规定了在这个特殊的区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用。这个特殊的区域不受外界影响。

创建 BFC 的条件

MDN 总结如下：

根元素或其他包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
具有 overflow 且值不是 visible 的块元素
表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
display: flow-root 的元素
column-span: all 的元素

BFC 内的特殊规则

边距折叠
清除浮动
自适应多栏布局

内部的 box 将会独占宽度，且在垂直方向，一个接一个排列
box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象
每个 box 水平方向上左边缘，与 BFC 左边缘相对齐，即使存在浮动也是如此
BFC 区域不会与浮动元素重叠，而是会依次排列
BFC 区域内是一个独立的渲染容器，容器内元素和 BFC 区域外元素不会形成任何干扰
浮动元素的高度也参与到 BFC 高度的计算当中

Refs

RFC2616

前端: JavaScript: ES5 类继承方式

原型链继承 (Prototype Chain)
构造函数盗用 (Constructor Stealing)
组合式实现 (Combination Inheritance)
原型式实现 (Prototypal Inheritance)
寄生式 (Parasitic)
寄生组合式继承 (Parasitic Combination)

[2019-4-27] ~~**这些组合就是抬杠~ 就两种继承方式: 1. 原型链 2. class-extends**~~

[2020-5-19] **这些组合就是抬杠~ 就一种继承方式: 原型继承

算法: 排序: 用JavaScript实现N大排序算法

N大排序算法, 用js实现

冒泡排序
选择排序
插入排序
快速排序
基数排序
希尔排序
堆排序
归并排序
计数排序
桶排序

HTML5的Canvas

HTML Element
非常有限的 methods & attributes
提供 CanvasRenderingContext2D, 该对象是神

1. HTML Element

<body>
    <canvas id="target">你的垃圾浏览器不支持Canvas, 赶紧换</canvas>
</body>

2. 非常有限的 methods & attributes

Methods	Description
getContext()	...
toDataURL(type, quality)	...
toBlob(cb, type, args...)	...

Attributes	Description
width	...
height	...

2. CanvasRenderingContext2D, 这是canvas里的神

const canvas = document.querySelector('#target');
const ctx = canvas.getContext('2d')

2dContext的 methods 和 attributes

methods	Description
beginPath	...
closePath	...
lineTo	...
moveTo	...
fill	...
stroke	...
fillText	...
clearRect	...
arc	...
---	---
getImageData
putImageData

Attributes	Description
canvas
---	---
fillStyle
strokeStyle
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
---	---
font
textAlign
textBaseline
---	---
lineCap	butt, round, square
lineWidth	1
lineJoin	miter, bevel, round
miterLimit
---	---
globalAlpha
globalCompsiteOperation

前端: JavaScript: 防抖与节流--debounce & throttle

用简单方式实现防抖和节流函数, 可作为utility函数用在前端页面控制用户行为上~ 避免引入underscore

前端: 框架: Vue.js: 对 VirtualDOM 的理解

JavaScript: 作用域与作用域链, scope & scope chain

简介

作用域: 规定了变量和函数的有 效范围 和 访问规则. (全局作用域, 函数作用域和块级作用域) .
作用域链: 作用域由大到小的顺序连成的一个链状结构, 查找时按由小到大沿着这个链状结构进行. 它是变量/函数访问时的查找线索.
函数在预解析时会创建 VariableObject, 其中有个属性 scopes, 它表示作用域链. 函数执行时 VariableObject -> ActiveObject, 当某个函数/变量在当前作用域找不到时, 就会沿着作作用域链逐层向上级作用域查找, 直到找到或者报错 Uncaught ReferenceError: XXX is not defined.

情境

函数在 预解析 阶段创建 VariableObject, 此时确定了作用域;
函数在执行阶段, 创建 ExecutionContext, 它确定了 this + ActiveObject(VariableObject) + Scopes, 此时确定了作用域链: 当前 ActiveObject 和外层所有 ActiveObject 组成(保证了变量和函数的有序访问，即如果当前作用域中未找到，则继续向上查找直到全局作用域。)
函数执行完时, 弹出执行栈, 函数内部变量会被 gc, 该 ExecutionContext 会被销毁

前端: JavaScript: 原型与原型链--prototype & prototype chain

Refs

RFC2246

选择器分类

SHELL: oh-my-zsh: pyenv: pyenv-virtualenv

key codes

## oh-my-zsh theme
function venv_status {
    if [ -z ${PYENV_VERSION+x} ]; then
        echo 'NOT SET'>/dev/null;
    else
        echo "($PYENV_VERSION)";
    fi
}
## use in prompt
$(venv_status)

## make commands alias
### src => source ~/.zshrc
alias pa="pyenv activate && src"
alias pd="pyenv deactivate && src"

theme code

# ano.zsh-theme

# Use with a dark background and 256-color terminal!
# Meant for people with node, ruby and git.

function prompt_char {
  git branch >/dev/null 2>/dev/null && echo "➤" && return
  echo "➤"
}
function box_name {
    [ -f ~/.box-name ] && cat ~/.box-name || echo ${SHORT_HOST:-$HOST}
}

local node_version='$(node --version)'
#local py_version="py-$(python -V | awk -F ' ' '{print $2}')"
#local ruby_env='$(rvm current)'
local go_version="$(go version | awk -F ' ' '{print $3}')"

local current_dir='${PWD/#$HOME/~}'
local git_info='$(git_prompt_info)'
local prompt_char='$(prompt_char)'


ZSH_THEME_GIT_PROMPT_PREFIX=""
ZSH_THEME_GIT_PROMPT_SUFFIX=""
ZSH_THEME_GIT_PROMPT_DIRTY="$reset_color($FG[200]✘✘✘$reset_color)"
ZSH_THEME_GIT_PROMPT_CLEAN="$reset_color($FG[040]✔✔✔$reset_color)"

function venv_status {
  if [ -z ${PYENV_VERSION+x} ]; then
	echo 'NOT SET'>/dev/null;
  else
	echo "($PYENV_VERSION)";
  fi
}

#PROMPT="──${prompt_char}$FG[040]%n$reset_color@$FG[033]$(box_name) $terminfo[bold]$FG[226]${current_dir} $FG[200]${git_info} $FG[040]${node_env} $FG[001]${ruby_env} $reset_color

#PROMPT="──${prompt_char}$FG[040]%n$reset_color@$FG[033]$(box_name) $terminfo[bold]$FG[226]${current_dir} $FG[200]${git_info} $FG[040]${node_version} $FG[033]${go_version} $FG[040]${py_version} $reset_color

PROMPT="──$(venv_status)$FG[040]%n$reset_color@$FG[033]$(box_name) $terminfo[bold]$FG[226]${current_dir} $FG[200]${git_info} $FG[040]${node_version} $FG[033]${go_version}$reset_color
➤➤"

# ${prompt_char}${prompt_char}${prompt_char}"

# PROMPT="$FG[040]%n$reset_color@$FG[033]$(box_name) $terminfo[bold]$FG[226]${current_dir} $FG[200]${git_info}$reset_color
# ➤➤➤"

Refs

RFC2818

Refs

Tips

-- double-dash:

The double dash "--" means "end of command line flags" i.e. it tells the preceding command not to try to parse what comes after command line options.

Suppose there is a file called main (or master, it is a branch-ish name, easy to mixed with the git branch)
If it has been modified and then we wanna undo that.
Checkout this file from the last commit:

git checkout main # this will lead to checking out the branch of main
git checkout -f -- main # this will do

Also, another example: when -f is the stupid file name

git checkout -f  # Oops....
git checkout -- -f

change branch name and push to github

git branch -m master main
git fetch origin
git branch -u origin/main main

if other one changed branch name, also

git branch -m master main
git fetch origin
git branch -u origin/main main
git remote set-head origin -a

JavaScript: new 后发生了什么

前端: HTML: 缓存

强制缓存 & 协商缓存

强制缓存: Expires -> Cache-Control

Expires 旧石器时代的强缓, 新的用 Cache-Control, 优先级低于Cache-Control(max-age),

格式: Mon, 20 May 2019 01:44 GMT

Cache-Control

max-age: 从 Date 开始算起的秒数s
public / private: private只能目标浏览器可以缓存, 其他网关/代理都不缓存
no-cache: do not serve from cache without revalidate, 需要请求服务器验证(协商缓存);
1. 浏览器不接受缓存的响应, 缓存服务器必须把客户端请求转发给源服务器
2. 缓存服务器不能缓存该资源
no-store: 任何一方都不进行缓存
no-transform: 不改变媒体类型, 防止缓存服务器降低图片质量等...

协商缓存: Last-Modified -> ETag(为了解决last-modified后文件内容没有变更)

If-Modified-Since / If- Unmodified-Since: 如果资源在 Last-Modified 之后有变更/无变更则200下载, 不满足则返回304
If-None-Match: 如果ETag的值跟服务端不符则200, 否则也是304

安全: Kali Linux

读记: TCP/IP详解

Refs

TCP: RFC 793

框架: Koa: 源码解读

读记: TCP/IP Protocol Suite 4E

前端: 浏览器: IndexedDB

前端: 浏览器: reflow & repaint

前端: 浏览器: WebStorage

前端: 自动化: webpack: 关于loader的几个细节

样式: CSS: Functions

样式: CSS: transition

超级简单的过渡动画

transition: <propertyName time/timing-function>[,<propertyName time/timing-function>[,...]];
transition: all time/timing-function;

图形: Three.js:

前端: 浏览器: WebWorker

前端: JavaScript: === & ==, +

Refs

ecma-262

MISC: macOS: readline

brew readline

readline is keg-only, which means it was not symlinked into /usr/local,
because macOS provides the BSD libedit library, which shadows libreadline.
In order to prevent conflicts when programs look for libreadline we are
defaulting this GNU Readline installation to keg-only.

For compilers to find readline you may need to set:

  export LDFLAGS="-L/usr/local/opt/readline/lib"
  export CPPFLAGS="-I/usr/local/opt/readline/include"

For pkg-config to find readline you may need to set:

  export PKG_CONFIG_PATH="/usr/local/opt/readline/lib/pkgconfig"

配置

亮点

4 核 64位 1.5GHz CPU (BCM2711)
4GB 内存
USB3.0, USB2.0各两个
2 路 micro-HDMI 输出, 支持 4k 60 帧
2.4GHz和 5.0GHz 双无线
蓝牙 5.0

Specs

Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.5GHz
4GB LPDDR4-3200 SDRAM
2.4 GHz and 5.0 GHz IEEE 802.11ac wireless, Bluetooth 5.0, BLE
2 USB 3.0 ports; 2 USB 2.0 ports
Raspberry Pi standard 40 pin GPIO header (fully backwards compatible with previous boards)
Gigabit Ethernet
2 × micro-HDMI ports (up to 4kp60 supported)
2-lane MIPI DSI display port
2-lane MIPI CSI camera port
4-pole stereo audio and composite video port
H.265 (4kp60 decode), H264 (1080p60 decode, 1080p30 encode)
OpenGL ES 3.0 graphics
Micro-SD card slot for loading operating system and data storage
5V DC via USB-C connector (minimum 3A*)
5V DC via GPIO header (minimum 3A*)
Power over Ethernet (PoE) enabled (requires separate PoE HAT)
Operating temperature: 0 – 50 degrees C ambient

前端: JavaScript: 普通对象修改原型内属性时存在的tricks

<<JS高程>> 6.3.1-4提到原型链的问题

考虑一下代码, 最终sub和sub2是什么

function Sup() {
  this.age = 0;
  this.name = 'Sup';
  this.isStudent = false;
  this.getName = function() {
    return this.name;
  }
  this.titles = ['SE', 'SM'];
  this.profession = {
    pm: 'C++',
    fe: 'JavaScript'
  };
}

function Sub() { }
let sup = new Sup();
Sub.prototype = sup;

let sub = new Sub();
let sub2 = new Sub();

sub.age = 0;
sub.name = 'sub...';
sub.isStudent = false;
sub.getName = function() {
  return 'My name is ' + this.name;
}

sub.titles.push('CTO');
sub.profession.skill = 'Viso';

sub:

而sub的原型sup(new Sup())

所以有了sub2

在实例对象中修改属性对象时要注意, 若它是位于原型对象上的引用类型, 容易改变原型(e.g. b.X.value = 'xxx', 若 X是b原型上的对象).

Object.defineProperty(obj,propName, descriptor);

两类, 根据 descriptor 来确定

accessProperty
dataProperty

descriptor

公共描述

configurable
enumerable

两类差别

accessProperty: get, set
dataProperty: value, writable

详介

configurable
true if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.
Defaults to false.

enumerable
true if and only if this property shows up during enumeration of the properties on the corresponding object.
Defaults to false.
A data descriptor also has the following optional keys:

access property

get
A function which serves as a getter for the property, or undefined if there is no getter. When the property is accessed, this function is called without arguments and with this set to the object through which the property is accessed (this may not be the object on which the property is defined due to inheritance). The return value will be used as the value of the property.
Defaults to undefined.

set
A function which serves as a setter for the property, or undefined if there is no setter. When the property is assigned, this function is called with one argument (the value being assigned to the property) and with this set to the object through which the property is assigned.
Defaults to undefined.

data property

value
The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).
Defaults to undefined.

writable
true if the value associated with the property may be changed with an assignment operator.
Defaults to false.
An accessor descriptor also has the following optional keys:

REFs

MDN:Object.defineProperty

前端: JavaScript: Babel简介

Babel 简介

core
cli
plugin
preset
polifill

算法: 全排列

用递归做全排列, 太耗内存~

function totalOrdering(arr) {
    function cloneArr(arr) {
        let ret = []
        if (arr instanceof Array) {
            arr.forEach(i => {
                ret.push(i);
            })
        }
        return ret;
    }
    let totalArrays = []
    function arrange(arr, segArr) {
        if(arr.length === 1) {
            segArr.push(arr[0]);
            totalArrays.push(segArr);
        } else {
            for(let i = 0, len = arr.length; i < len; i++) {
                let segArr2 = cloneArr(segArr);
                let arr2 = cloneArr(arr);
                let cur = arr2.splice(i, 1);
                segArr2.push(cur[0]);
                console.log(i, arr2, segArr2)
                arrange(arr2, segArr2);
            }
        }
    }
    arrange(arr, []);
    return totalArrays;
}


let a = [1,3,4];
let aaa = totalOrdering(a)
console.log(aaa)
//console.log(totalOrdering(a));

读记: Python: BeautifulSoup 4.2.0

从HTML或XML文件中提取数据的Python库
Web 前端有 jQuery/Zepto, node 技术栈有 Cheerio, python 有 BeautifulSoup

xvno / blog Goto Github PK

blog's People

Contributors

Watchers

blog's Issues

BFC

创建 BFC 的条件

BFC 内的特殊规则

Refs

HTML5的Canvas

1. HTML Element

2. 非常有限的 methods & attributes

2. CanvasRenderingContext2D, 这是canvas里的神

2dContext的 methods 和 attributes

简介

情境

Refs

选择器分类

key codes

theme code

Refs

Refs

Tips

change branch name and push to github

强制缓存 & 协商缓存

强制缓存: Expires -> Cache-Control

Expires 旧石器时代的强缓, 新的用 Cache-Control, 优先级低于Cache-Control(max-age),

Cache-Control

协商缓存: Last-Modified -> ETag(为了解决last-modified后文件内容没有变更)

Refs

超级简单的过渡动画

Contents

Refs

brew readline

配置

亮点

Specs

<<JS高程>> 6.3.1-4提到原型链的问题

Object.defineProperty(obj,propName, descriptor);

两类, 根据 descriptor 来确定

descriptor

公共描述

两类差别

详介

REFs

Babel 简介

用递归做全排列, 太耗内存~

Recommend Projects

Recommend Topics

Recommend Org