Teraflopst

Teraflopst 查看完整档案

广州编辑广东工业大学  |  环境科学 编辑  |  填写所在公司/组织 Teraflopst.github.io 编辑
编辑

简书 Jianshu
GitHub Articles

var Teraflopst = {
    name: "He Wenwei",
    email: "wentgd@gmail.com",
    github: "https://github.com/Teraflopst"
}

个人动态

Teraflopst 发布了文章 · 2016-08-21

GitHub:技巧集合

列出所有文件

仓库 URL + find/分支名称,例如:https://github.com/onestark/learn-css/find/master

Raw 文件

在浏览器中以 text/plain 查看原始文件。

例如,GitHub 文件原链接:

https://github.com/onestark/alfred-workflows/blob/master/README.md

可通过以下几种 URL 查看 raw 文件:

https://raw.githubusercontent.com/onestark/alfred-workflows/master/README.md
https://github.com/onestark/alfred-workflows/raw/master/README.md
https://github.com/onestark/alfred-workflows/blob/master/README.md?raw=true

文件下载

不支持 Raw 查看的文件,在浏览器中输入或点击上述查看 raw 文件的 URL 时,会对文件进行下载。因此可以通过这个特性,在 GitHub 上直接提供文件的下载功能。

支持 Raw 查看的文件,可在浏览器打开 raw 页面,直接 另存为... 保存即可

展示 Demo

GitHub 仓库开通 GitHub Pages 后,其中的 HTML 文件就可以被浏览器正确渲染了,因此这个功能不仅可以作为项目的展示页,也可以展示各种 HTML demo 文件。

RawGit

When you request certain types of files (like JavaScript, CSS, or HTML) from raw.githubusercontent.com or gist.githubusercontent.com, GitHub serves them with a Content-Type header set to text/plain. As a result, most modern browsers won't actually interpret these files as JavaScript, CSS, or HTML and will instead just display them as text.

RawGit 作为一个缓存代理,提供的功能是缓存 GitHub 中 raw 文件并添加上正确的 Content-Type header,从而使文件能被浏览器正确渲染。

RawGit 对未开通 GitHub Pages 的项目中的任意 HTML/CSS/JS 文件以及 Gist 代码的渲染展示提供了方便。

使用方法:https://rawgit.com/https://raw.githack.com/

添加 LICENSE

  • 创建项目时,有添加 LICENSE 选项;

  • 创建项目后,添加新文件,输入文件名 LICENSE 时右侧会出现 LICENSE 模板选项。

查看原文

赞 0 收藏 2 评论 0

Teraflopst 发布了文章 · 2016-08-12

CSS:布局 - 水平垂直居中

1. 绝对定位 + 负 Margin

原理:首先利用 absolute 定位把容器块 左顶角 对准浏览器中心,然后再使用 负 margin 把容器块向左移动自身宽度的一半,向上移动自身高度的一半,即可以把容器块的中心移到浏览器中心。

优点:兼容性好
缺点:需要知道宽高,不够灵活

.container {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-left: -300px;    /* 宽度的一半 */
    margin-top: -200px;     /* 高度的一半 */
}

2. 绝对定位 + Transform

原理:首先利用 absolute 定位把容器块 左顶角 对准浏览器中心,然后再使用 CSS3 transform 的 translate(x,y) 把容器块向左(x)移动自身宽度的一半,向上(y)移动自身高度的一半,即可以把容器块的中心移到浏览器中心。

优点:不需要知道宽高,灵活
缺点,兼容不好,在移动设备上建议使用

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 自身尺寸的一半 */
}

3. 绝对定位 + 自动 Margin

原理:浏览器自动计算绝对定位的容器块上下左右外边距。
优点:灵活切兼容性好(IE8+)
缺点:适用于本身有尺寸的元素(比如图片),对于段落等必须显式设置其宽高

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

4. CSS3 Flexbox

优点:不需要知道宽高
缺点:兼容性不好,在移动设备上建议使用

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

5. Table display

优点:兼容性好
缺点:增加了无用的 HTML 结构

.vertical-wrapper {
    width: 100%;
    height: 100%;
    display: table;
    .vertical {
        display: table-cell;
        vertical-align: middle;
        & > * {
            vertical-align: middle;
        }
        span {
            display: inline-block;
        }
        img {
            display: inline-block;
        }
    }
    &.center {
        .vertical {
            text-align: center;
        }
    }
}
查看原文

赞 1 收藏 6 评论 0

Teraflopst 发布了文章 · 2016-08-10

Sublime Text 3 + LiveReload + Chrome

安装 LiveReload

在 Sublime Text 3 中安装 LiveReload。

macOS 快捷键 + + P,输入 Install Package,搜索 LiveReload 并回车安装。(Windows 快捷键 Ctrl + + P

详情请看:LiveReload for Sublime Text 3

安装 Chrome 扩展

到 Chrome 网上应用商店安装 LiveReload 扩展。为了让扩展访问本地文件,需要勾选扩展的 "Allow access to file URLs"

具体操作:设置-扩展 或 浏览器打开:chrome://extensions/,找到 LiveReload 进行勾选。如下图:

LiveReload

配置 LiveReload

Sublime Text 3 中 Preferences-Packge Settings-LiveReload-Settings-User 设置如下:

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

运行 LiveReload

在 Chrome 浏览器中打开开发中的文件,点击 LiveReload 的扩展图标,当图标中心由空心变为实心即可对此页面进行实时刷新。如下图:

LiveReloadLiveReload

查看原文

赞 1 收藏 7 评论 0

Teraflopst 发布了文章 · 2016-08-08

CSS:理解行高 line-height

行高、行距、半行距

理解行高

从上到下四条线分别是 顶线中线基线底线

行高

指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。
行高数值上等于 字体大小+行距,而行距的一半(半行距)加在顶线上方,一半加在底线下方。

行距

指一行底线到下一行顶线的垂直距离。

半行距

行距的一半。半行距 = (行高 - 字号) / 2
CSS 中的 margin-top 不是从文字的顶线算起的,而是从离顶线半个行距的上方开始算起的。同理,margin-bottom 是从离底线半个行距的下方开始算起的。

继承

line-height 是可以继承的。父元素不同的行高单位影响子元素的继承。例如:

  • 父元素的行高为 24px 时,子元素直接继承此固定的行高

  • 父元素的行高为 150% 或 1.5em 时,会根据父元素的字体大小先计算出行高值然后再让子元素继承

  • 父元素的行高为 1.5 时,根据子元素的字体大小动态计算出行高值让子元素继承。

JSFiddle 源码

line-height的单位和继承

查看原文

赞 2 收藏 10 评论 0

Teraflopst 发布了文章 · 2016-08-06

Mac:更好地工作 - Alfred Workflow 七牛开发者工具 qshell

GitHub | 下载

qshell 是基于七牛 API 参考手册实现的一个方便开发者测试和使用七牛 API 服务的命令行工具。

alfred-workflow-qshell 是一个配合七牛开发者工具 qshell 使用的 Alfred workflow。它使用了可视化流程后台执行 qshell 命令行,使得文件上传、查询等功能更易用和高效。

如果使用七牛作为图床,这个 workflow 将是一个功能全面、使用方便的图片上传、管理、获取链接的工具。

功能 & 特点

功能

  • 支持多文件上传

  • 支持上传文件添加前缀

  • 获取空间文件外链

  • 查看空间文件基本信息

  • 移动、复制、删除、重命名

  • 预览、下载空间文件

  • 完善的文件操作反馈(通知、错误等)

特点

  • curl 下载文件

  • 不支持文件夹上传

  • 要求空间的文件名为不能为空或全为空格

使用

上传文件

  • 默认关键字 fput 搜索本地单个文件,上传文件

  • 搜索文件时使用 Buffer 功能进行文件多选,上传多文件(Buffer 的使用

  • 选中一或多个文件,调出 Actions 文件操作菜单,上传文件

操作文件

  • 默认关键字 fstat 搜索空间文件

  • 移动、复制、删除、重命名、外链、信息、预览、下载

安装 & 配置

要求:qshellAlfred with Powerpack

1. qshell

或前往 GitHub

安装:只需要下载 zip 包之后解压即可使用。Mac 64 位系统只需要解压后的文件 qshell_darwin_amd64。把此文件放到 /usr/local/bin 目录。

配置:从七牛的后台的账号设置中获取 AccessKeySecretKey。配置本地 qshell:

# 设置密钥
qshell account [AccessKey] [SecretKey]
# 查看设置
qshell account

注意:上面的设置命令不需要输入方括号 []

配置 qshell 完毕后会生成 ~/.qshell 文件夹,其中 account.json 文件保存了 AccessKey 和 SecretKey 信息。

2. Alfred

下载 安装包 安装即可。

注意:Alfred 需要购买 Powerpack 才能解锁 workflows 功能。

Todo

  • [x] account,显示当前用户的 AccessKey 和 SecretKey

  • [x] fput,以文件表单的方式上传一个文件

  • [x] stat,查询七牛空间中一个文件的基本信息

  • [x] delete,删除七牛空间中的一个文件

  • [x] move,移动或重命名七牛空间中的一个文件

  • [x] copy,复制七牛空间中的一个文件

  • [x] 查新基本信息时可以获取文件外链

  • [x] 预览功能

  • [x] 下载功能

作者

【GitHub】博客
【SegmentFault】文章
【简书】文章

var OneStark = {
    name: "He Wenwei",
    email: "wentgd@gmail.com",
    github: "https://github.com/onestark",
    homepage: "https://onestark.github.io"
}
查看原文

赞 3 收藏 6 评论 0

Teraflopst 关注了问题 · 2016-07-21

解决使用gulp插件,每次都要打开cmd吗

大家好,想问一下
使用gulp插件,每次都要打开cmd吗,并且要一直打开吗?
我现在主要使用gulp-less插件,启动监听事件后都要一直打开cmd。
而且每天开机都要重新打开cmd启动监听事件,并且要一直打开着,觉得有些小麻烦,就想问问大家有没有更加方便的方法去使用gulp插件。

关注 7 回答 5

Teraflopst 回答了问题 · 2016-07-21

解决使用gulp插件,每次都要打开cmd吗

做开发的 cmd 和 Terminal 比 QQ 还常用吧。

关注 7 回答 5

Teraflopst 发布了文章 · 2016-07-14

PHP:echo、print、print_r() 和 var_dump()

PHP:echo、print、print_r 和 var_dump

echo 和 print

echoprint 都不是函数,而是 语言结构,所以圆括号都不是必需的。两者十分相似,功能几乎是完全一样。

1、echo 可以输出多个字符串,使用 , 连接

echo 'a','b','c';

输出:abc

如果你非要加上圆括号,需要注意

echo ('a','b','c');      //错误
echo ('a'),('b'),('c');  //正确

2、print 只能输出一个字符串

print 'a','b','c';  //错误
print 'abc';        //正确
print 'a'.'b'.'c';  //正确

注意:上面的 'a'.'b'.'c' 并不是多个字符串,而是 PHP 中拼接(concat)多个字符串后的一个字符串。

3、echo 没有返回值,print 有返回值 1

因此 print 能用在表达式中:

$ret = print 'abc';
echo $ret + 1;

输出:abc2

4、echo 输出的速度比 print 快

print_r() 和 var_dump()

print_r() 显示关于一个变量的易于理解的信息。如果给出的是 string、integer 或 float,将打印变量值本身。如果给出的是 array,将会按照一定格式显示键和元素。object 与数组类似。

print_r() 会舍弃掉小数位末尾的 “0”;布尔值 true 输出 1,false 不输出;空字符串 和 null 不输出。如果给出的是 array,将会按照一定格式显示键和元素。object 与数组类似。

var_dump() 方法是判断一个变量的类型与长度,并输出变量的值和数据类型。var_dump() 输出比 print_r() 更详细,一般调试时用得多。两者区别如下:

$arr = array(5, 5.0, 'hello', '', true, false, null);
var_dump($arr);
print_r($arr);

输出:

array(7) {
  [0]=>
  int(5)
  [1]=>
  float(5)
  [2]=>
  string(5) "hello"
  [3]=>
  string(0) ""
  [4]=>
  bool(true)
  [5]=>
  bool(false)
  [6]=>
  NULL
}
Array
(
    [0] => 5
    [1] => 5
    [2] => hello
    [3] => 
    [4] => 1
    [5] => 
    [6] => 
)

题外:如果想捕捉 print_r() 的输出,可添加一个 true 参数。此时 print_r() 将不打印结果,而是返回其输出。

$str = "hello";
$result = print_r($str, true);
echo $result;

输出:hello

参考

查看原文

赞 7 收藏 15 评论 0

Teraflopst 发布了文章 · 2016-07-13

Mac:更好地工作 - Symbolic link

Symbolic link

符号链接(Symbolic link)又叫软链接,是一类特殊的文件,这个文件包含了另一个文件的路径名(绝对路径或者相对路径)。

创建一个符号链接:


┌── 命令
│   ┌── 参数:符号链接
│   │                         ┌── 路径:符号链接
│   │                         │
│   │                   ┌─────┴────────┐
ln -s /path/to/original /path/to/symlink
      └───────┬───────┘
              └── 路径:源文件

用途

符号链接可用于集中同步分散的文件。例如 Dropbox 不支持对本地多文件夹、多文件的同步,当某些应用没有数据同步功能或不支持移动应用数据的位置时,可以把这些分散在各处的文件夹、文件移动到 Dropbox 的同步目录,然后在原来的位置上生成一个符号链接指向同步目录中的文件。

以 Sublime Text 为例子,同步它的 User 文件夹:

1、把 User 源文件夹 ~/Library/Application Support/Sublime Text 3/Packages/User 从原来位置移动到 ~/Dropbox/Sublime 目录;

2、执行命令:

ln -s ~/Dropbox/Sublime/User ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/

此时,真正的文件夹路径就变成了 ~/Dropbox/Sublime/User,Dropbox 可以把它同步到云端,而原来的位置生成了一个同名(User)的符号链接,文件夹图标带有一个黑色的小箭头:

图片描述

而每次 Sublime Text 想要读写 User 文件夹中的数据时,就会根据这个符号链接中包含的路径去访问它的真正路径。可以在此符号链接上右键选择“Show Original”定位到它的真正源文件路径。

查看原文

赞 1 收藏 2 评论 0

Teraflopst 发布了文章 · 2016-07-13

Mac:更好地工作 - 应用内快捷键

应用内快捷键

某个应用中 Menubar 出现的命令,都允许用户自定义快捷键。

设置

1、打开某应用,在 Menubar 中查看某个命令的 名称
2、System Preferences > Keyboard > Shortcuts - App Shortcuts;
3、选择相应的应用(同时提供“全部应用”一选项);
4、填入 “Menu Title” 中,再设置绑定的快捷键。

图片描述

Help

几乎所有应用的 Menubar 都带有 “Help” 一项,它的搜索功能 非常好用
它可以搜索出菜单栏中的每条命令。

图片描述

应用内快捷键默认有一个设置好的 “Show Help Menu”,每当你记不起某些快捷键或者缺乏快捷键的命令时,Help 的搜索功能就可以帮上大忙。

查看原文

赞 0 收藏 1 评论 0

认证与成就

  • 获得 59 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-08-03
个人主页被 443 人浏览