09月05, 2017

小撸网站暂时恢复HTTP

问题

由于最近证书认证次数太多,导致一直刷新认证时间不成功...暂时先恢复 HTTP 访问~

nginx 之前由于配置了 301 的永久跳转,如果还会重定向到 https 网站,那么请清理下缓存吧 = = 服务器不是特别熟悉,很抱歉,不过讲道理 https 那边应该是 404 ~以后都先用 302 用稳定了再使用 301。

遇到两个问题记录一下

一、多次重定向,提示清理 Cookie

nginx 由于浏览器的记忆功能,今天产生过 http <=> https 反复重定向的问题,主要的解决方案是在 nginx.conf 中配置一个临时的 rewrite 规则,我的配置是:

rewrite ^(.*)$ http://<your_domain>.com$1?http;

这样就可以防止跳转死循环,然后欺骗之前的重定向行为过后,再删除这条配置,重新 reload 一下配置即可。

二、reload: Job is not running: nginx

这个主要是 nginx 进程占用的问题,需要先 kill 掉关联的任务。主要需要执行下面的命令:

// 1. 注意是要对应端口号
sudo fuser -k 80/tcp
sudo fuser -k 443/tcp

// 2. 测试下配置
sudo nginx -t

// 3. 重启下 nginx,这里使用服务的方式
sudo service nginx restart

// 4. reload 一下测试一下,没有直接输出就对了
service nginx reload

// 5. 看下上次返回
echo $?

参考的地址:

多次重定向

nginx reload fail

阅读全文 »

07月30, 2017

Typedoc

Typedoc 这是一个 TypeScript 项目的文档生成工具,类比 jsdoc。下面使用一个简单的例子来介绍一下这个工具。如果不想看文章的可以直接看下代码配置其实就能理解了~不过后面有介绍一些配置过程中的问题。栗子代码

阅读全文 »

04月03, 2017

React + Rx 模仿 Angular 模式

一、前言

其实对于软件开发模式来说,Angular 有着整套的一条龙服务,而 React 只是单纯的解决 View 层的问题,如果只是使用 React 开发项目会或多或少有点麻烦。下面主要讨论下数据层的东西,之前出了一个 mobx 来解决这个问题,但是这里想换个思路套用一下。其实 mobx 主要是声明了 @action, @computed, @observable 等元素来做到将 Store 作为一个可监控的源头,自动做到 VM 的效果,下面我也是,不过我采用 Rx 来做这个事情,简单利用下这种思想,能不能不污染我的原始数据(因为如果是双向的一种数据结构,那么就会被包装成监听类型的数据结构),这样我们调试的时候依然看到的是清晰的数据,并且还可以解决最初 Flux 库的一些麻烦,经过 Rx 改造的结果,可能比 mobx 的可测试性更好一些,具体就不说了,先谈 DEMO。

如果不想看文章的可以直接看代码 GitHub

阅读全文 »

03月03, 2017

Rx 的编程方式(一)

1. Observables & Reactive

先来一个简单直观的例子:

const { Observable } = require("rxjs");

const source$ = Observable.of([1, 2, 3]);
source$.subscribe(x => console.log(x));

过滤器节点:subscribe

2. Declarative Transformation( 声明式转换 )

如果我们想要平时开发的数据转换功能,可以使用一些类似管道的工具来做。

Observable.of(1, 2, 3)
    .map(n => n * 2)
    .subscribe(x => console.log(x));

过滤器节点:map、subscribe。我所理解的就像一条溪流流动的水,然后 map 这类 API 就像水桶,将水装入进行加工,当然,其他 map 的特性先不用细致了解。

3. Lazy Transformation( 懒执行透明特性 )

Observable 能够在流动的过程中进行选择,所谓的懒特性就是不会像 Promise 一样,给了一个数据承认,就一定会让你接受,你可以选择不接受或者现在不接受,先这样子理解。

阅读全文 »

02月16, 2017

编程

Everybody in this country should learn how to program a computer, because it teaches you how to think. - Steve Jobs

作为乔帮主的粉,很认同他对于自己产品热爱的那份情感。对于编程也一样,如果没有兴趣是肯定不行的,但是兴趣又是培养的,在编程过程中体验乐趣是很重要的。

读书的时候老师会教你程序设计的课程,我们这里把它叫做编程。比如可以抽象是:

Programs = Algorithms + Data Structures

I. 对于数据结构,可以用一个简单的例子来理解一下。

一堆书有两种简单放的方式:

  1. 重叠放
  2. 摊开放

语言的表达太淡,来个简单的图:

解释图

阅读全文 »

01月17, 2017

为什么需要 KeyMirror

前言

今天有朋友问了 “KeyMirror” 这个库有什么用的问题,其实这个问题并不难,这里扫一下盲区。

会按照下面这个逻辑来展开,彻底理解一下:

  1. KeyMirror 有什么用?
  2. Google Closure Compiler 是什么?
  3. KeyMirror 解决了什么问题,好处是什么?
  4. KeyMirror 的源码是什么样子?
  5. 用 Gulp 配置一个压缩任务,测试一下 Google Closure Compiler.

阅读全文 »

12月10, 2016

Angular 组件交流方式

以下的测试例子都可以在 github 找到,但是最近好像不太稳定。 其实 ng2 在这方面做得挺好的,用起来也很简单,所以看完基本就可以动手写一写。强大并不止是这一方面,在写这些的过程中,通过一些配置,让开发很纯粹,有时间再录一个新手入门的开发教程。

(1) 父组件向子组件流入数据

这种方式是最简单的,在 ng2 中处理得非常完美,通过在子组件中标记 @Input() 输入接口的方式进行接收父组件的值,我下面的 demo 主要分了几种场景,尽可能的多覆盖不同情况吧。

基本上例子中覆盖了常见的情况:

  • 直接传入一个字符串的情况,不需要绑定父组件的一个变量
  • 绑定父组件变量的情况,然后可以在父组件中不断修改
  • 输入别名的情况,可以在子组件中对输入的变量名进行重新设置
  • ngOnChanges() 在子组件中监听属性的修改
  • 特殊情况下,我们需要对父组件传入的数据进行过滤
  • @ViewChild() 注解的跨多层子组件的观察方式

阅读全文 »

12月01, 2016

二叉🌲🌲两三下

一、前言

树和图一样,是常用的数据结构模型,但是我的理解树是图的一个用于更具体的数据结构。今天温习的是树中比较简单、常用的二叉树。因为一个简单固定的结构更有利于查询,所以有了二叉查找树的概念。

简单介绍下🌲

研究依然以点-线模型的分析理解,不过树是从一个方向顺势的分支结构。这里可以是自上向下,也可以自下向上。

阅读全文 »

11月22, 2016

Roller,✨✨

看到个好玩的~哈哈,小志前辈写的,原文地址

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Roller,✨✨</title>
    <style type="text/css" media="screen">
    div, input {
      margin: 0;
      padding: 0;
    }
    .demo {
        width: 100px;
        height: 20px;
        overflow: hidden;
    }

    .star_ctrl {
        float: left;
    }

    input {
        float: right;
        width: 20px;
        height: 20px;
        -webkit-appearance: none;
        border: 0 none;
        background: url(http://ww3.sinaimg.cn/large/006tNbRwgw1fa10606xkoj300k01fdfl.jpg) no-repeat 0 -32px;
        outline: 0 none;
        -webkit-transition: all 100ms linear;
    }

    input:checked,
    input:checked ~ input {
        background-position: 0 0;
    }

    .demo_2 input {
      float: left;
    }
    </style>
</head>

<body>
    <div class="demo demo_1">
        <div class="star_ctrl">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
            <input type="radio" name="demo_1">
        </div>
    </div>

    <div class="demo demo_2">
        <div class="star_ctrl">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
            <input type="radio" name="demo_2">
        </div>
    </div>
</body>

</html>

左转转,右转转 ^-^

阅读全文 »