x
x
50.19.34.*

最新文章 Latest Blogs

2018-01-08 YHSPY 共  213 个不明生物围观

今天听了银奎老师分享的最近火热技术圈的 Meltdown 漏洞的基本原理,才知道原来底层系统的世界是如此的丰富多彩。Meltdown 漏洞的 POC 实现基于了一种名为 “Flush & Reload” 的黑客攻击技术,这项技术的基本原理是利用 Memory 和 Cache 之间的关系,同时利用统计学的置信程度来筛选关键信息的。

2018-01-04 YHSPY 共  164 个不明生物围观

最近花了一些时间来读《重新定义团队:谷歌如何工作》这本书,在这里记录一下书中提出的关键点。怎样才能发挥团队的最大效能,同时让团队中的成员保持高涨的激情,这些都是在团队管理中会经常遇到的问题。

2017-12-24 YHSPY 共  142 个不明生物围观

最近在读《重新定义团队:谷歌如何工作》,学习谷歌在技术团队管理上的一些思考和方式。同时上周也刚刚从杭州 D2 前端技术论坛回来。在会上,来在360和阿里的技术主管也分享了各自在团队管理上的多年经验,特此整理一下会上和自己对技术团队管理的一些思考。

2017-12-17 YHSPY 共  144 个不明生物围观

一般来说,一项新技术是否会随着时代的推进而被快速地迭代和发展,要看这项技术所应用在的实际业务场景中是否有相应的技术需求,毕竟没有任何技术是会被凭空创造出来的。技术决定了业务需求的多样性,而业务需求的多样性又推动着技术不断向前发展,两者相辅相成最终才能推动行业整体的发展和进步。

2017-11-12 YHSPY 共  162 个不明生物围观

如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS)。12-Factor 为构建如下的 SaaS 应用提供了方法论。这套理论适用于任意语言和后端服务(数据库、消息队列、缓存等)开发的应用程序。

2017-11-09 YHSPY 共  224 个不明生物围观

本篇将讨论 Docker 用于构建微服务的相关实践。如何将 Docker 用于生产环境,并且构建一个更复杂的多容器应用?同时利于链接和卷等 Docker 特性来管理 Docker 中的应用,以及 Docker 集群的管理等。

2017-11-07 YHSPY 共  196 个不明生物围观

接着上一篇文章,我们继续深入了解并学习关于 Docker 的基础知识以及相关基于 Docker 实现的典型架构解决方案。Docker 在协调线下/上多环境开发等场景下有其独特的优势。

2017-11-04 YHSPY 共  273 个不明生物围观

Docker 改变了人们日常从开发到部署的工作流方式。不仅如此,Dokcer 在云计算、大数据处理甚至深度学习基础系统架构等方面都有其用武之地和独到之处。Docker 开发的一个目的就是为了加强开发环境与部署环境的一致性。

2017-09-30 YHSPY 共  311 个不明生物围观

随着云计算、深度学习和区块链技术的发展和普及,人们对“运算力”的需求变得越来越迫切。大型公司可以通过横向扩展机房的形式来增加自己的“运算力”,但这种从物理上扩展机器的方式对一些初创的小公司来说是一笔不小得开销负担。

2017-09-07 YHSPY 共  364 个不明生物围观

由于 V8 的 "full-codegen" 编译器在解析 AST 之后生成的机器码十分冗长,因此会大量占用 V8 的堆内存。V8 为了减少生成的机器码以缓解内存的压力,尝试了大量“延迟解析和编译(Lazy parsing and compiling)”的工作。比如对于一段代码,这段代码中的函数如果没有在初始化时被调用,则该调用过程会被“延迟”,直到第一次调用时再编译该函数的代码。

    文章日期索引 Date Index

    文章类别索引 Type Index

    文章主体 Detail

    探索Shadowsocks,基于AWS

    今天本来想写一篇关于 JQuery 最佳实践的文章,但是写到中途手滑没有保存,遂留到日后再写好了。今天要写的一篇文章是关于 Shadowsocks 在 AWS 上的实践文章。通过本文所述的实践操作,大家可以熟悉 AWS 的常用操作,并逐渐了解 Shadowsocks 的核心原理。同时,这也是一次记录与整理。

    Shadowsocks 是什么这里就不过介绍了,简单的理解就是一个代理服务。我们要做的就是在 AWS 的海外 EC2 服务器上设置 Shadowsocks 服务,这样在本地我们既可以通过连接这台海外的 EC2 服务器作为正向代理服务器来访问外部网络。当然这整个的配置过程并不是十分的傻瓜,还需要对服务器以及 Linux 操作有基本的了解。

    一、注册以及配置 EC2 服务器

    现在的 AWS 新注册用户可以享用一年的免费“t2.micro” 类型的云主机使用权,而且 AWS 的所有 EC2 主机都会自带有默认的外网 DNS 解析,所以我们这里只需要申请一台这样的免费主机即可。请注意,在AWS上注册用户时需要提供信用卡信息,而且是必需的。我这里申请的是加利福尼亚北部的 EC2 服务器,顺带一句,按照付费方案计算的话,弗吉尼亚北部的 EC2 机群是最便宜的。当全部注册流程结束后会来到下图所示页面来创建和启用 EC2 服务器。具体的步骤这里不多讲,直接按照提示选择并且下一步即可,选择“AMI”和“实例类型”时请注意选择带有“免费”字样标志的实例类型。当实例申请配置进行到最后一步时,AWS 会让用户为该实例选择或创建一个密钥对,这个密钥对的私钥(.pem)文件会被用户下载下来用来登陆 SSH 终端,这里请妥善保管该私钥,因为只能下载一次。

    EC2 实例启动后我们来到控制面板的“安全组”选项卡,这里可以配置 EC2 服务器的安全策略,比如允许的进网IP,协议等等。我们这里可以修改已有的安全组协议或者创建新的自定义安全组协议。主要配置项为“入站”的安全设置,如下图所示,将访问设置设置成允许来自所有协议的所有流量。

    二、配置 Shadowsocks 服务端

    接下来便要开始配置服务器端的 Shadowsocks 服务了,使用之前生成的私钥文件通过 SSH 客户端连接到我们的 EC2 服务器,EC2 服务器的外网 DNS 可以通过在“实例”选项卡点选我们的 EC2,在其下方的信息栏中找到。由于我们这里的 EC2 服务器使用的是 Ubuntu 系统,所以可以直接按照 Shadowsocks 在 Github 上的 Wiki 文档进行配置。

    Shadowsocks Wiki

    请阅读上文给出的 Wiki 页面,直接按照 Install 章节的指南进行安装即可。Shadowsocks 的核心服务由 Python 语言编写,所以直接通过 pip 安装一下即可使用,省去了编译链接的过程。下面给出的链接是 Shadowsocks 在 Python Package Management 的官方链接。

    Shadowsocks - Python Package Management

    三、开始使用 Shadowsocks 客户端

    服务端的工作全部结束之后既可开始使用 Shadowsocks 的客户端工具链接我们的 EC2 代理服务器了。Windows 版本的 Shadowsocks 客户端由 C# 编写,并提供了本地负载均衡,PAC(代理自动配置)等高级功能,自带的流量监控功能也十分好用(如上图所示)。可以通过以下给出的 Github 链接查看详细的说明。

    Shadowsocks Windows Client Wiki

    对于 MacOS 和 IOS 系统上的客户端,笔者还没有进行尝试,可以通过上述第一个 Wiki 页面查找相关的信息。

    四、Shadowsocks 源码解析

    我们可以直接从 Github 或者上述给出的 Python 包管理页面直接下载 Shadowsocks 的服务端源码。

    发布时间 : 2016-08-16 23:24:45 作者 : YHSPY 类别 : WEB后端 Linux
    查看评论
    点击已评论用户的用户名可以@他

    一语浏览 Detail

    其他 Others

    JWT(JSON WEB TOKEN)

    可用作分布式系统的单点登录验证系统(SSO)。由于 Token 中的 Signature 部分是由前两个字段和一个密钥一起进行加密后得出来的,因此前端无法擅自修改 Token 中的信息,得以保证信息的获取不会被滥用。同时由于 JWT 的 “self-contained“ 特性,原始 Session 中的信息被全部放到了 Token 中,后端不需要存储任何信息,保证了服务的无状态化,提高了可扩展性。

    数据结构:

    交互模式:

    前端 Javascript

    this 实例:

    1、非 ES5 严格模式下,函数调用的默认 this 指向 window,严格模式下指向 undefined

    2、对象中函数的 this 指向调用方;

    
    var person = {  
      name: "Jason",
      say: function(thing) {
        console.log(this.name + " says hello " + thing);
      }
    }
    person.say("world"); // "Jason says hello world"
    
    var iSay = person.say;
    iSay("world"); // "undefined says hello world"
    

    3、使用 bind 来固化 this

    
    var boundSay = person.say.bind(person);  
    boundSay("world") // "Jason says hello world"
    
    前端工程化

    GitFlow 工作流:

    1、主分支只用于 Hotfix 和发布后的发布分支合并;

    2、专门的 Develop 分支用于 Feature 分支的合并;

    3、从 Develop 分支拷贝的发布分支,发布分支只有 Hotfix 合并,发布后合并回主分支和 Develop 分支;

    4、Hotfix 分支合并回主分支和 Develop 分支;

    5、每一次到主分支的合并都需要打 Tag 以便追踪记录;

    前端 HTTP

    HTTPS 通信流程:

    前端 HTTP

    浏览器常用缓存策略流程:

    计算机原理 CP

    HTTP1.1存在的问题:

    1、TCP连接数有限(最多6-8个),导致分片(Sharding)技术滥用,一个网站的所有资源被分布在多个主机上;

    2、线头阻塞(Head of Line Blocking)问题,服务器处理请求需要按顺序进行,即发送请求时可以多个请求放到一个 TCP 连接中(Pipelining),但接收需要按顺序一个一个来处理;

    3、可选细节过多,标准过于庞大;

    4、重复的头部内容;

    HTTP2的优势:

    1、多路复用的流,可以通过单一的 HTTP2 请求来发起多重的请求-响应消息,即请求发送和接受均并行,且不需要多个 TCP 连接;

    2、使用 HPACK 算法来压缩首部内容;

    3、服务端推送:浏览器发送一个请求,返回多个相关资源的响应;

    4、二进制分帧层:位于传输层和应用层之间,首部信息被封装到 HEADER 帧中,请求体被封装到 DATA 帧中。通过单连接多复用来解决 TCP 连接到慢启动问题;

    SPDY 与 HTTP2 的区别:

    大部分特性与 HTTP2 保持一致,包括服务器端推送,多路复用和帧作为传输的最小单位。但 SPDY 的头部压缩使用的是 DEFLATE 算法,而 HTTP2 使用的是 HPACK 算法,压缩率更高。

    另一种协议 QUIC(Quick UDP Internet Connections):“HTTP2 on UDP”

    1、使用 QPACK 代替 HPACK;

    计算机原理 CP

    内存对齐主要遵循下面三个原则:

    结构体变量的起始地址能够被其最宽的成员大小整除;

    结构体每个成员相对于起始地址的偏移能够被其自身大小整除,如果不能则在前一个成员后面补充字节;

    结构体总体大小能够被最宽的成员的大小整除,如不能则在后面补充字节;

    前端 Javascript

    在某些情况下,JS 引擎的优化 Pre-Parse 过程会被浪费。比如某些在 JS 文件加载时就运行的函数在进行 Pre-Parse 之后还需要再进行一次 Full-Parse,之前的 Pre-Parse 阶段完全浪费。这种情况下可以使用 IIFE 来省去这个 Pre-Parse 阶段(V8 支持)。

    
    var constants = (function constants(){
        function sayHi(name){
            var message = "Hi " + name + "!"
            print(message)
        }
    
    sayHi("Sparkle")
    })()
     
    前端 Javascript

    日常开发如果遇到后端接口传过来大整数,比如订单号,由于 JS 最大安全数位数有限,所以可能会发现解析出的数据与和传过来的字符串数据值不相符。可以通过正则进行对应字段的替换,讲数字类型替换成字符串(注意标准 JSON 格式是双引号)

    
    replaceNumberToStringInJson(fields, json) {
      let result = json
      fields.forEach((field) => {
        result = result.replace(new RegExp(`"${field}":\\s([\\d.]+)`, 'g'), `"${field}": "$1"`)
      })
    
      return result
    }
     
    前端 Javascript

    使用npm check来检查 NPM 包的更新状态。

    
    npm check -u -g  # 检测全局依赖
    npm check -u     # 检测当前项目的依赖
    

    代码库 Code Depot

    React 实例 - 单一数据源原则
    
    const scaleNames = {
      c: 'Celsius',
      f: 'Fahrenheit'
    };
    
    function toCelsius(fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }
    
    function toFahrenheit(celsius) {
      return (celsius * 9 / 5) + 32;
    }
    
    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }
    
    function BoilingVerdict(props) {
      if (props.celsius >= 100) {
        return <p>The water would boil.</p>;
      }
      return <p>The water would not boil.</p>;
    }
    
    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
      }
    
      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature}
                   onChange={this.handleChange} />
          </fieldset>
        );
      }
    }
    
    class Calculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature: '', scale: 'c'};
      }
    
      handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
      }
    
      handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
      }
    
      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    
        return (
          <div>
            <TemperatureInput
              scale="c"
              temperature={celsius}
              onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
              scale="f"
              temperature={fahrenheit}
              onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict
              celsius={parseFloat(celsius)} />
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Calculator />,
      document.getElementById('root')
    );
    

    使用方法:浏览器。

    代码说明:完整的 Reactjs 代码片段。

    一个完整的 React 实例
    
    // sub-component
    function ListItem(props) {
      // Correct! There is no need to specify the key here:
      return <li>{props.value}</li>;
    }
    
    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        // Correct! Key should be specified inside the array.
        <ListItem key={number.toString()}
                  value={number} />
    
      );
      return (
        <ul>
          {listItems}
        </ul>
      );
    }
    
    class Clock extends React.Component {
      constructor(props) {
        // 确保 props 能够正确传入;
        super(props);
        // Bind this
        this.handler = this.handler.bind(this);
        this.state = {
          date: new Date(),
          counter: 0,
          showWarning: true
        };
      }
      // 生命周期 Hook 函数;
      componentDidMount() {
        // 不需要在 View 中显示的属性不需要放到 State 中;
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
    
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
    
      tick() {
        this.setState({
          date: new Date()
        });
      }
      
      handler() {
        this.setState({
          counter: this.state.counter + 1
        });
      }
    
      render() {
        const numbers = [1, 2, 3, 4, 5];
        // JSX 中的 Callback 函数需要在构造函数中绑定 this 指针;
        return (
          <div>
            <NumberList numbers={numbers} />
            <h1 onClick={this.handler}>Hello, {this.props.user.toString()}!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            <h2>Counter: {this.state.counter}</h2>
            <p>{this.state.counter > 2 && <WarningBanner warn={this.state.counter} />}

    </div> ); } } ReactDOM.render( <Clock user="YHSPY"/>, document.getElementById('root') );

    使用方法:浏览器。

    代码说明:完整的 Reactjs 代码片段。

    Node8 之 Util.promisify 常见用法
    
    var util = require('util')
    
    const wait = (delay, callback) => {
      const id = setInterval(() => {
        const rand = Math.random()
        if (rand > 0.95) {
          callback('Got data successfully!', null)
          clearInterval(id)
        } else if (rand < 0.1) {
          callback(null, 'Sorry, something wrong!') 
          clearInterval(id)
        } else {
          console.log("Waiting...")
        }
      }, Number(delay))
    }
    
    /*
      wait(1000, (data, err) => {
        if (err) {
          throw new Error(err)
        }
        console.log(data)
      })
    */
    
    // Use util.promisify
    util.promisify(wait)(1000).then(data => {
      console.log(data);
    }).catch(err => {
      console.error(err);
    })
    
    // Use async/await instead
    waitAsync = util.promisify(wait)
    let asyncFunc = async () => {
      let result;
      try {
        result = await waitAsync(1000);
      } catch (err) {
        return console.error(err);
      }
      return console.log(result);
    };
    asyncFunc().then(data => {
      // undefined
      console.log(data)
    })
    

    使用方法:Node8 命令行下直接运行。

    代码说明:Node8 新增的函数可以直接 Promise 化一个特定格式的函数,函数的回调函数需要符合 Node 的标准回调函数格式 。

    Leetcode - 169.Majority Element HashMap基础解法
    
    public static int majorityElement(int[] nums) {
        if (nums.length == 0)  // 如果数组长度为0则返回-1
        	return -1;
        
        int arrLen = nums.length;
        Map<Integer, Integer> map = new HashMap<>();
        for (int i = 0;i < arrLen; i ++) {
        	int currentVal = 0;
        	if (map.containsKey(nums[i]))  // 如果HashMap中存在该值对应的元素则使用该值
        		currentVal = map.get(nums[i]);
    
        	if (currentVal > arrLen / 2) {  // 如果满足条件则返回该元素
        		return nums[i];
        	} else {
        		map.put(nums[i], currentVal + 1);  // 否则对应元素值加一
        	}
        }
        
        return -1;
    }
    

    使用方法:Eclipse新建工程,直接复制到主类里,通过类名静态调用即可。

    代码说明:本段代码为Leetcode题目“169.Majority Element”的实现代码,算法类代码建议先做题,再参考。题目详情请参考文章《Leetcode每日一题 - 169.Majority Element》。

    Leetcode - 219.Contains Duplicate II 窗口检测解法代码片段
    
    public static boolean containsDuplicateOptimizeFurther(int[] nums) {
        Set<Integer> set = new HashSet<Integer>();  
        int start = 0, end = 0;  // 定义窗口的首尾指针
        for(int i = 0; i < nums.length; i++) {   // 开始遍历
            if(!set.contains(nums[i])) {    
                set.add(nums[i]);   
                end++;   // 如果Set中没有此元素则加入,尾指针后移
            } else { 
                return true;   // 有则返回True
            }
            
            if(end - start  > k) {  // 保持首尾指针距离不大于k  
                set.remove(nums[start]);    //如果大于则移除首指针元素
                start++;   // 移除后首指针后移
            }  
        }  
        return false;
    }
    

    使用方法:Eclipse新建工程,直接复制到主类里,通过类名静态调用即可。

    代码说明:本段代码为Leetcode题目“219.Contains Duplicate II”的实现代码,算法类代码建议先做题,再参考。题目详情请参考文章《Leetcode每日一题 - 219.Contains Duplicate II》。