14个代码展示网站

本文列出的这些网站可以分享和展示你的代码。它们都提供在线预览功能,所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”或者“沙箱”。

它们不仅仅提供简单的代码展示功能,还提供很多代码协作和实际编程过程会用到的功能。例如,当你需要别人帮你调试源代码的时候,可以使用这些网站分享你有问题的代码,然后把链接分享给帮助你的人。这使得他们可以方便的查看你的源代码并提供解决方案。

1.CodePen

在CodePen上,你可以演示被称作 pens 的代码。Pen 由 HTML、CSS和JS组成。Codepen有很多方便你展示代码的功能。例如,它支持 SASS 和 LESS 语法,可以快速的添加常用的JS库如jQuery、Angular等。这里可以查看该网站上流行的Pens。

Mac下WebStorm高效快键键

快捷键太多,还是学一个添加一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

shift + Enter 软回车 ,无论在前一行代码的什么位置,都能定位到下一行.

command + option + l 代码格式化

command + r 替换文本

command + Shift + Up/Down 代码向上/下移动

command + e 打开最近打开的文件或者项目 (直接支持文件名搜索)

command + shift + v 选择粘贴剪切板上的内容

command + d 复制当前行到下一行

command + 退格键 合并下一行

command + option + 左右箭头 定位到上次编辑的位置

command + f 当前页搜索

command + / 注释/取消注释

control + tab 切换上次打开的文件

command + b 跳到变量声明处

command + x 剪切行

command + shift + u 切换大小写

ctrl + ~ 切换主题

WebStorm更换主题和修改字体样式

因为习惯了Sublime的Spacegray主题,而webstorm的默认的几个主题都不喜欢,而webstorm刚好也有这个主题,换完之后感觉很不错,效果看下面。

首先,到选择一个自己喜欢的皮肤,Webstorm皮肤网址:

http://phpstorm-themes.com/

然后,选中你喜欢的皮肤,把.xml后缀的文件下载后,根据不同的操作系统,将其copy到不同的webstorm安装目录中。

1.Mac系统

2016.10.28更:最新版的主题文件变成icls后缀,但下面步骤差不多。

QQ20161028-0.png


复制下载的xml theme文件,使用shift+command+g键进入:

~/Library/Preferences/WebIDE10/colors/

如果为版本4,则为以下目录:

~/Library/Preferences/WebIde40/colors/

将xml文件复制到此文件夹。

CSS布局-圣杯布局vs双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:
圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div,少用大致4个css属性(圣杯布局中间divpadding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4),个人感觉比圣杯布局思路更直接和简洁一点。

简单说起来就是”双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了。

Linux流量监控工具-iftop

一、iftop是什么?

iftop是类似于top的实时流量监控工具。

官方网站:http://www.ex-parrot.com/~pdw/iftop/

二、iftop有什么用?

iftop可以用来监控网卡的实时流量(可以指定网段)、反向解析IP、显示端口信息等,详细的将会在后面的使用参数中说明。

三、安装iftop

安装方法1、编译安装

如果采用编译安装可以到iftop官网下载最新的源码包。

安装前需要已经安装好基本的编译所需的环境,比如make、gcc、autoconf等。安装iftop还需要安装libpcap和libcurses。

CentOS上安装所需依赖包:

yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel

用shadowsocks加速git clone

因为在天朝,用git clone 下载 github上的仓库的时候,速度很慢,才几十k每秒,稍微大点的仓库,要等到猴年马月。
利用shadowsocks的socks5代理,配置好后明显加速。用下面两条命令配置好后,保持shadowsocks客户端开启就行了。

1
2
git config --global http.proxy 'socks5://127.0.0.1:1080' 
git config --global https.proxy 'socks5://127.0.0.1:1080'

shadowsocks的本地端口默认是1080

上面设置只是开启https://代理

git协议开启代理可以查看这里

git仓库有的在国内有的在国外,国内的有gitcafe coding.net 开源中国git
所以用国内的就没必要设置了,反而会慢。

WordPress博客网站搬家和换域名方法

第一步:备份网站根目录下所有文件并转移到新主机;
第二步:备份网站数据库文件并在新主机上建立数据库,进行导入;
第三步:修改wp-config.php文件,确保网站文件与数据库通信正常;
第四步:在新主机上绑定域名,域名解析到主机。
第五步:在数据库更换网址。

在 Sublime Text 3中编译和运行Java程序[Windows,Mac]

Windows篇:

1.配置java环境变量

JDK下载地址

1)、这台电脑>属性>高级系统设置>环境变量,在用户变量里新建一个名为JAVA_HOME的变量,变量值为安装jdk时的路径,比如我的为C:\Program Files\Java\jdk1.8.0_45,点击“确定”
第一步很重要,默认安装路径就是上面的,更改了安装目录的话变量值就要更改为对应的目录

2)、在用户变量里新建一个名为CLASSPATH的变量,变量值为 .;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar;,点击“确定”

3)、找到并选中用户变量的“Path”变量,点击“编辑”,在后面添加;%JAVA_HOME%/bin;%JAVA_HOME%/jre/bin,点击“确定”,如果原来没有变量值的话,就去掉前面的;

最后在“环境变量”上点击“确定”,完成环境变量的配置.

亚马逊AWS更改LINUX为ROOT权限密码登陆

我的AWS VPS的LINUX版本是UBUNTU 14.04,首先用AWS证书验证的账户登录.

1、修改ROOT密码

sudo passwd root

2、修改sshd_config文件

sudo vim /etc/ssh/sshd_config

PermitRootLogin
这行改为
PermitRootLogin yes

PasswordAuthentication no
上面的no改为yes
UsePAM yes
上面的yes改为no
修改完保存退出。

3、重启AWS VPS,就可以使用root正常登陆了。