Frossky 发布的文章

有时,为了设计美观的关系, 需要字体留一定空隙, 使用css属性letter-spacing, 如下代码:

<div style="text-align: center;">
    <div style="font-size: 88px;color: #f7517f;">loading</div>
    <div style="font-size: 28px;letter-spacing:45px;color:#806d92">&#x5450;&#x558A;Pro</div>
</div>

显示效果如下:

loading
呐喊Pro

然而, 却会发现, 下面的文字和上面的没有letter-spacing的文字对不齐.
用鼠标选择下面的文字, 你会发现letter-spacing的45px空间是加在每一个字符后面的, 这样字符都会靠左一点点.
怎么解决呢? 有的网友建议在前面加空格, 当然是转义的空格了:

&nbsp;

代码改为:

<div style="text-align: center;">
    <div style="font-size: 88px;color: #f7517f;">loading</div>
    <div style="font-size: 28px;letter-spacing:45px;color:#806d92">&nbsp;&#x5450;&#x558A;Pro</div>
</div>

显示效果如下:

loading
 呐喊Pro

然而加上空格你又会发现,由于空格还是占用了空间, 整体字符又会靠右一点点...

css的问题还是要回到css的方法上解决, 正确的姿势之一是增加text-indent, 如下:

<div style="text-align: center;">
    <div style="font-size: 88px;color: #f7517f;">loading</div>
    <div style="font-size: 28px;letter-spacing:45px;text-indent: 45px;color:#806d92">&#x5450;&#x558A;Pro</div>
</div>

显示效果如下:

loading
呐喊Pro

除了text-indent方案以外,应该还可以使用padding-left. 不过, 能在text的css属性内解决的, 就不要放到box的属性去解决, 所以text-indent的方式要更优雅一些吧

  • 正常情况下的一个function
    写法一

    f = function(){}

或者写法二

function f(){}
  • 为new以后的新对象提供属性的function
function F(){this.x = 1; this.obj_f = function(){}}
var o = new F()
o.x
o.obj_f()
  • 为所有new以后的新对象提供公共属性的function

写法1

function F(){F.prototype.pub_x = 1; F.prototype.pub_f = function(){} }
var o1 = new F()
var o2 = new F()
o1.pub_x === o2.pub_x
o1.pub_f === o2.pub_f

写法2

function F(){}
F.prototype = {pub_x : 1, pub_f : function(){} }
var o1 = new F()
var o2 = new F()
o1.pub_x === o2.pub_x
o1.pub_f === o2.pub_f
  • 不需要new直接使用的function
function F(){}
F.F_pub_f = function(){}
  • 综上所述的F, 自己既是一个function, 又是一个object, 又能给别人new. 可以为new的对象提供单独的属性, 公共的属性, 以及不需要new也能使用的属性.
function F(){} //F是一个函数
function F(){this.x = 1; this.obj_f = function(){}}  //F可以给别人new了. 提供单独的属性x, obj_f. 如 var f = new F()
F.prototype = {pub_x : 1, pub_f : function(){} }  // F可以给new出来的对象提供公共的属性pub_x, pub_f
F.F_pub_x = 1
F.F_pub_f = function(){}  //不需要new也能直接访问的F的属性F_pub_x, F_pub_f.

获取dom元素的实际宽高,而不是style里面设置的宽高, 使用offsetWidth/offsetHeight.例如:

<div id="element">test</div>
<script>
console.log(element.offsetWidth, element.offsetHeight)
</script>

首先安装android studio
下载安卓的几个插件包,sdk,ndk等等.
被Wall了? 找个hosts. 我发现223.255.227.170作为developer.android.com, 74.125.28.121作为tools.android.com似乎速度还不错.
最后的ant属于单独安装的. 里面的ant.cmd在编译时需要用到.

我都是默认安装, 几个系统环境变量如下

NDK_ROOT
C:\Users\Jac\AppData\Local\Android\Sdk\ndk-bundle\

ANDROID_SDK_ROOT
C:\Users\Jac\AppData\Local\Android\Sdk

ANT_ROOT
C:\r\apache-ant-1.9.7-bin\apache-ant-1.9.7\bin

今天打算修改一下hosts文件, 却发现文件不能修改. 上网查一下windows可否知道哪个进程锁定了文件? 貌似并没有方法. 需要借助其他软件.

  • 首先用下载 unlocker
    用unlocker看了一下,并没有什么锁定它.

  • 关掉所有的软件.只保留一个administrator权限的cmd窗口.

  • cmd下使用ren命令重命名hosts,发现可以, 然而很快就被某个进程创建一个新的hosts文件, 里面只有一句话:

    192.168.0.143 windows10.microdone.cn

这是什么鬼?
这首先说明了, 创建这个的不是windows的系统行为.因为微软就算升级了系统要锁定hosts也不可能指向一个莫名其妙的.cn地址.
那么问题来了, 到底是哪个进程创建了hosts?

解压缩打开procmon.exe后, 创建filter, 先通过下拉菜单选择event class is File System ,再选择 operation is CreateFile

确定后, 在输出的窗口搜索hosts, 发现一个可疑的对象UPService.exe

中毒了? 搜索发现这个对象是银联的软件... 我用银联吗? 不用, 删掉它!

然后发现hosts已经不会被自动创建了.

改好hosts, 用attrib +R hosts 先给加个只读属性, 以防哪个家伙修改. 当然这个级别的保护还是比较低的. 要升高保护, 可以再加上+S属性, 以及设定访问权限.

根据gamelook文章VR眼镜盒月出货超2000万,单台利润仅1毛,以及其他一些VR发展的历史事件, 猜测VR发展已过了The chasm裂口.

技术成熟度曲线和技术采纳周期

  • 2012年-2014年, Innovator阶段,如果这次VR技术的发展, 以2012年Oculus成立和众筹作为起点的话, 那么2014年7月, Oculus以20亿美元卖给Facebook, 同年谷歌发布VR盒子原型Cardboard, 暴风魔镜以及一批VR创业公司集中进入VR盒子开发领域, 意味着2014年到达VR发展的超高期望顶点(Peak Of Infacted Expectation)

  • 2014-2016年初, Early Adapters阶段, 同时也是裂口阶段The Chasm. 正如gamelook文章中所言: "2014年团队是淌着血过来的，每月尽亏80万", 而到了"去年(2015年)12月以后，销量开始往上蹭蹭地涨". 暴风的VR团队在今年也爆出大幅裁员的新闻.

  • 2016-今后3-5年, Early Majority阶段, 除了上述的VR盒子销量暴涨外, HTC Vive于2016年4月上市, 6月北美上市. HTC同时携steam带来超过100款游戏作品. HTC之后, Oculus有些乱了手脚, 先发后至, 发货之间到了5-8月之间. SONY PSVR以及适配PSVR的"PS4.5"版本PS4 Pro也同期发布, 同期上线30余款游戏. 由于VR设备昂贵, 深圳地区出现多家Vive体验中心, 多为初创公司创建.

参考文章:
* VR眼镜盒月出货超2000万,单台利润仅1毛
* Technology Adoption Cycles

快速迭代，快速试错似乎成为敏捷思想带给葫芦娃啊不互联网经济的灵丹妙药，经典图式常常拿一张蒙娜丽莎的画举例，你不应该做的是:画面分成五块，每一块填完色才画下一块;你应该先快速勾一个蒙娜丽莎的轮廓，哪怕很丑，但能立刻让别人知道你画的是什么，然后再修轮廓，描细线，画背景，最后上色。

敏捷不推荐的画法

敏捷推荐的画法

如果上面的图破了, 在bing.com搜索mona lisa agile

然而这不是万能的。这适用于做一些功能性应用，并且有一些创新的核心点需要快速早期验证的情况。但这不适合做艺术品，比如蒙娜丽莎。因为达芬奇不可能希望拿一个只描了轮廓丑不拉几的画作给世人看，更不可能问世人这么画对不对你喜不喜欢不喜欢我另画？你画这样我能喜欢吗？
对于另一些需要按时间依次浏览的艺术形式，如长篇小说，电视剧，和章节式游戏，有时可以先试试大家的兴趣。然而，发一个粗制滥造的框架或者只是讲述一下提纲，并不能说明你这是个好作品。而是应该一部分一部分的去向读者和观众呈现一个精雕细琢的作品，正如敏捷方法一开始所反对的那样。观众看完一部分，反馈的意见有用吗，或许有，但有时并不那么重要。极端情况，也许像中国网络小说最赚钱作者唐家三少所说，故事我一开始就想好了，读者的意见并不能改变我。

这儿以debian/ubuntu系统举例

1. 安装samba

在debian下当然是:
sudo apt-get install samba

我遇到了安装不成功的情况, 说是get文件的时候404(找不到), 用如下方式解决:

  • 更新了一个网易的apt源
esp8266@esp8266-VirtualBox:~$ vim /etc/apt/sources.list

添加了如下内容

deb http://mirrors.163.com/ubuntu/ precise main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ precise-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ precise-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ precise-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ precise-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ precise main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ precise-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ precise-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ precise-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ precise-backports main restricted universe multiverse

保存后, 更新apt-get

sudo apt-get update

再次使用sudo apt-install samba安装成功.

2. 查看是否启动了samba服务

esp8266@esp8266-VirtualBox:~$ service samba status
 * nmbd is running
 * smbd is running

俩都是running就OK啦.

3. 配置共享文件

用这个命令
sudo vim /etc/samba/smb.conf

在最后面加上:

[share]
    comment = Ubuntu File Server Share
    path = /home/esp8266/r
    browsable = yes
    guest ok = yes
    read only = no
    create mask = 0755

解释:
[share]是共享目录的名称
path是共享的目录路径
comment无所谓了.

最好吧要共享的目录r改一下访问权限
sudo chmod -R 777 /home/esp8266/r

4. 重启samba服务

sudo service samba restart

5.测试

在linux下找个文件浏览器, 用smb://IP地址的方式进行测试.

默认vim配色的注释居然黑底深蓝字, 完全看不清写的什么...

1. 先查看一下vim的配色方案, 在这个目录下:

esp8266@esp8266-VirtualBox:~$ ls /usr/share/vim/vim74/colors/
blue.vim      delek.vim    evening.vim  murphy.vim     README.txt  slate.vim
darkblue.vim  desert.vim   koehler.vim  pablo.vim      ron.vim     torte.vim
default.vim   elflord.vim  morning.vim  peachpuff.vim  shine.vim   zellner.vim

上面这些.vim结尾的都是啦!

2. 然后在用户根目录~下编辑.vimrc, 上面的方案选一个

vim .vimrc

内容例如:

colorscheme darkblue

:wq保存退出, 完成.

当你使用passwd给linux设置自己的用户密码时候, 如果密码不够复杂, linux是不让你使用的.
可是有时候你就是想用一个简单的密码, 比如我只是装个虚拟机用用而已, 怎么办呢?
用这个命令就可以了

sudo passwd <username>

这时候提示输入的密码不再会检查密码强度.

以前有一个颇受欢迎的替代"我的电脑"和"资源管理器"的软件Totalcommander, 不过是收费的. 这儿推荐免费软件FreeCommander(以下简称FC),同样十分强大.

1. 中文

原生支持数十种语言. 默认安装是英文的? 并不需要担心. 在Tools>Settings->General->Language中选择Chinese_s.lng即可.

2. 快速调用CMD命令行.

软件开发经常需要在当前目录使用命令行. 虽然windows自带Win+R -> cmd回车的方式, 不过调出的命令行是在用户根目录下.
在FC中按Ctrl+D就可以调出当前目录下的命令行, 十分方便.

3. 快速编辑文本

软件开发经常需要打开各种文本格式的代码文件查看, 选中指定文件按F4即可调出默认编辑器, 哦, 默认的是notepad? 没关系, 可以在 "工具>设置>程序>编辑器"中更改. 我用的是Sumlime Text, 将程序改为C:\Program Files\Sublime Text 3\sublime_text.exe即可. 注意不需要加双引号.

4. 收藏目录

Windows有快捷键Win+E调出资源管理器,可是要进入常用目录还需要自己点点点. 最新的Win10做了改进, 可以添加"快速访问"并从左侧进入. 不过,如果用FC替代呢?在地址栏右侧有一个图标是带有❤标志的文件夹, 点击就可以收藏了.

5. 复制目录路径

常常需要在其他软件中, 打开指定路径下的某个文件, 这时候文件路径复制粘贴可能是最快的方式之一. 资源管理器是选中->Ctrl+C的方式, 在FC中, 可以点击地址栏最右侧的小图标即可复制.

1. 快速开始

通过electron quick start项目开始是个不错的主意. 需要注意的是, electron体积巨大, 100M~200M, 在我朝使用主意用镜像, 或者使用淘宝的cnpm,替代下面的npm install.

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

这时候你应该能看到一个helloworld 和一个打开的chrome dev tools.

2. 最主要的文件和关系

在根目录下, 有main.js ,index.html, renderer.js几个文件,以及node_modules文件夹,还有package.json文件.
首先, electron主要有两块:

a) 与操作系统的一些原生API通讯, 这主要通过main.js调用系统的一些方法和界面.比如显示个菜单, 调起一个打开文件对话框之类的.
b) 建立软件的界面和逻辑, 这主要通过index.html,renderer.js以及其他html架构的文件(以下简称为html架构). 但在这儿不能直接调用系统的资源, 如逆向调起一个打开文件对话框就不行.

是否以main.js为入口, 在package.json中配置, 里面有一行:

 "main": "main.js",

当然, 也只有这一个文件,不涉及复杂的文件管理的话, 这个一般也不会去改它.

是否以index.html为入口, 在main.js调起window的时候定义:

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

上面的index.html可以使用相对路径调起其他的html文件, 相对路径的起点为main.js所在的目录.
至于renderer.js, 是通过index.html中的script标签引用的, 这个就熟悉了,不多说了.

3. 在html架构中调用系统资源的第一种方式: 发送事件消息

前面说了html架构中不能直接调用系统资源,调用需要通过main.js进行. 和main.js通讯主要是通过发送event消息.
整个过程是:
* renderer.js中ipc.send()发送事件A
* main.js中ipcMain.on()监听事件A, 监听到后,
* main.js中event.sender.send()发送事件B和附加信息
* renderer.js中ipc.on()监听返回的事件B,处理发回的信息

举例如下: 在main.js中通过ipcMain.on()监听html架构中的renderer.js发来的open-file-dialog事件, 并在监听后调用系统事件,如dialog, 然后通过event.sender.send()回馈selected-directory事件,并携带文件路径:

const { ipcMain } = require('electron')
const { dialog } = require('electron')
ipcMain.on('open-file-dialog', function(event) {
    dialog.showOpenDialog({
        properties: ['openFile', 'openDirectory']
    }, function(files) {
        if (files) event.sender.send('selected-directory', files)
    })
})

在renderer.js中, 通过ipc.send()发送open-file-dialog事件, 通过ipc.on()监听返回事件selected-directory, 并可以对返回的文件路径做进一步的处理.

const ipc = require('electron').ipcRenderer
ipc.send('open-file-dialog')
ipc.on('selected-directory', function(event, path) {
    alert(path)
})

4. 在html架构中调用系统资源的第二种方式. remote

上面的简化写法, 可以直接使用remote调用main.js中才能提供的系统资源.
在renderer.js中:

const remote = require('electron').remote    
remote.dialog.showOpenDialog({
    properties: ['openFile', 'openDirectory']
}, function(files) {
    alert(files)
})

哦,好像感觉好用多了...

5. 在main.js中主动发送事件给html框架

这时候没有renderer.js发过来的事件, 也就没有event.sender.send()提供, 可以用mainWindow, 前提是mainWindow已经创建.

mainWindow.send('some-event')

7. 打包软件

首先要有一份electron的可运行文件包, node_modules\electron\dist中可以找到electron.exe, 这个文件夹就是了.打包这个文件夹发布就可以了.
只要把main.js,package.json, node_modules中你用到的模块,以及其他index.html等html框架下的文件复制到上面文件Resources/app目录下. 然后把electron.exe所在的文件夹打包发布就可以了.

8. 更改图标

windows下有个免费软件resource hacker, 下载来可以用来修改图标.
mac下比较简单. 查看electron.app的信息, 里面的图标可以通过'拷贝'/'粘贴'进行修改的.
mac下打包成dmg, 需要预先把electron.app放到一个文件夹里面, 然后可以通过系统自带的'磁盘工具',点击菜单>文件>新建影像>来自文件夹的影像>选择这个文件夹进行打包.

下面是坑

1号坑 使用第三方npm模块

在html框架中最强大的一个地方就是,不但可以通过script标签引入第三方js使用, 可以通过require使用node.js中提供的模块. 但是注意, 要使用npm install安装,不要使用cnpm install安装, 否则打包后的文件会找不到模块. 原因请看前一篇文章.

2号坑 使用asar打包

可以通过npm install -g asar安装asar打包工具, 对app目录进行打包,这样就不会有一大把的分散文件列在哪儿了, 也避免windows复制node_modules总会出现的长文件名问题.
在resource目录下,命令行执行:

asar pack app app.asar

即可, 执行完后asar包使用起来大多数时候像一个普通目录, 但在如下时候会与普通目录不同

  • asar包在运行时是只读的, 所以不能再在运行时修改asar包,比如修改其中的文件, 新建一个文件等,否则你会遇到permission的拒绝的错误.
  • 在windows下,asar包中的文件和文件夹可以复制出来, 并粘贴到系统的某处(使用node模块ncp测试过), 但在mac下却不行,原因也是未知啊. 变通的方式是, 你要复制的文件夹就不要放在asar包里面了.

3号坑 菜单

建立的多个一级菜单, 如果有的一级菜单没有子菜单submenu, 而是直接在一级菜单上触发功能, 那么在windows下将显示正常并且触发正常. 但是在mac下只能显示有submenu的.
因此建议所有的一级菜单都要有submenu, 并且不要在一级菜单上触发功能.
另外, mac下面无论什么样的菜单, 第一个菜单都是挂在系统名称下面的.

4号坑 复制粘贴

在Windows下, input和textarea使用Ctrl+C/Ctrl+V复制粘贴正常, 在mac下使用COMMAND+C/V却没有反应. 原因是mac下必须显式定义复制粘贴. 解题思路在这儿
定义的方式是在菜单中添加复制/粘贴选项.

  1. 1
  2. ...
  3. 70
  4. 71
  5. 72
  6. 73
  7. 74
  8. 75
  9. 76
  10. ...
  11. 79