手机下 marquee 滚动长度问题

小问题,简单记一下 今天用 marquee 标签做滚动的时候,在 Chrome 下看效果没有问题,但是后来发现在手机微信上,每当内容滚动过 marquee 宽度的距离以后,就会重置重新从头滚动,这一点让我着实蛋疼了一下。。。。 然后后来排查的时候发现,是因为我在样式里给 marquee 设置了宽度(因为不想整个屏幕宽度滚动,所以就设置了一下宽度),然后就出现了问题,这个宽度被继承到 marquee 里面的滚动块上了,所以导致当滚动过这个距离以后,marquee 会以为滚动内容结束了,从而又重新滚动。 那么,当我们确实需要改变 marquee 的宽度的时候怎么办呢? 哈哈,给它外面加上一个 div,然后给 div 指定宽度就可以了 <style> #marquee{ width: 300px; ... } </style> <div id="marquee"> <marquee behavior="scroll" direction=&q...

sass 中使用 calc 传入变量无效

是的,我又用上 sass 了,新公司在用,所以就又写 sass 了。 然后今天遇到的小问题,随手记一下 当我们用 sass 写如下代码的时候 .class{ $padding: 5px; width: calc(100% - $paddding * 2); } 嗯嗯,看上去好像很正常。。。 错!! 编译完了之后,你会发现这段代码是这样的 .class{ width: calc(100% - $padding * 2); } 然后浏览器就无情的忽略掉这一行谜一样的样式了 这尼玛是什么呀?! 摔! 好吧,看样子 sass 在编译的时候,把括号里面的变量当做字符串处理了。 所以我们该怎么办呢? 哈哈哈,对!还记得 sass 怎么在字符串里拼接变量么? 就是它! .class{ $padding: 5px; width: calc(100% - #{$paddding * 2}); } OK,解决!

关于 js 的 event loop 的再研究

事件起因源于对我之前写的一个小工具的再优化,工具遇到的场景大概是这样的: 工具需要在用户点击完按钮后做大量的循环操作(这里暂时没有算法层的优化),大概有 6 万次,然后与此同时,界面上还需要显示出当前循环进行的程度,百分比。大概是这样的: setInterval(function() { // trigger progress... }, 16); for(var i=0; i<60000; i++) { // do something... } 这里在之前就遇到一个问题,就是当 js 去在一个函数里进行循环操作时,js 会被卡住,因为是一个同步过程,所以界面的更新事件会在循环进行完以后再触发执行,这当然不是我们想要的。然后后来,我就把它变成了下面这种递归模式: function loop() { // do something ... setTimeout(loop, 0); } 这样的话,就把每次循环变成了一个异步事件,等上次循环执行完后,再把下次循环的事件挂到事件队列上,等待下次 ...

修复 npm 权限问题(翻译)

好吧,没啥,就是他们最近在迁移服务器的时候,安装 npm 包的时候又遇到 Please try running this command again as root/Administrator. 这个问题了,然后就准备把这个问题记一下,方便为遇到同样问题的同学参考吧 原文地址: https://docs.npmjs.com/getting-started/fixing-npm-permissions 当你安装一个包到全局的时候可能会遇到一个 EACCES 错误,这是因为你没有 npm 存储全局包的目录的写权限。 你可以通过两种途径来修复这个问题: 修改 npm 默认目录的权限 修改 npm 默认目录到其他目录 在进行一下操作之前,请先备份一下你的电脑 方法1:修改 npm 默认目录的权限 找到 npm 默认目录的路径 npm config get prefix 对于大多数的系统来说,应该是 /usr/local 注意: 如果你显示的路径是只是 /usr,请使用 方法2 修改 npm 目录所有者为当前用户 sudo chown ...

CentOS 6 升级 gcc 小记

在内网搞了个测试机,但是装 node 的时候提示 gcc 版本太低,要升级到 4.8 以上 好吧,那就升级呗~ 中间遇到好多蛋疼是事情,这篇就简单记一下升级过程,备忘,备忘~ 先下载源码包~ http://ftp.gnu.org/gnu/gcc/ 解压,进入文件夹,然后在下载编译所需要的依赖 cd gcc-4.8.2 ./contrib/download_prerequisites OK,编译安装~ configure --enable-checking=release --enable-languages=c,c++ --disable-multilib --prefix=/usr make make install 安装成功~ 大概就是这个样子~ 先这样啦~

让我们愉快的使用 letsencrypt 吧

先说一声:新年快乐! 嘿嘿,但是并没有红包。 今天早上看到群里有学弟(其实是大神)说把网站添加了 https 的支持,突然想起来自己也该把我折腾证书这回事儿分享一下了,嗯嗯,开工! 话说自己网址支持 https 是在去年,那时候用过 startssl,还有国内的沃通,嗯~ 其实都还好吧,然后那时候也知道 letsencrypt,但是由于机器配置太太太低(编译都通不过好么),所以也就没用。再后来换了机器,嗯嗯,终于可以玩玩儿这货啦~(翻身农奴把歌唱,亚拉索~),不扯了,进入正题 先来安装 git clone https://github.com/letsencrypt/letsencrypt cd letsencrypt ./letsencrypt-auto --help 不多扯了,文档在这里 嗯嗯,生成证书 ./letsencrypt certonly 然后就会出现一个 UI 界面,按照提示填写就好了 再然后配置一下 nginx ssl_certificate /etc/letsencrypt/live/DOMAIN/fullchain...

CentOS 关闭 3306 端口

好吧,其实是因为自己老忘,然后这次迁移又忘记了,所以就顺手记一下吧 vim /etc/my.cnf 在[mysqld]下添加 skip-networking 一般都是被注释掉的,去掉注释就好了 然后重启 mysql 就好了 嗯嗯,大概就是这样吧~ 有点儿困,晚安~

React 动态组件

好久之前遇到的,一直没有时间记录下,今天记录一下 贴个代码 import Component1 from "./component1.jsx"; import Component2 from "./component2.jsx"; 这时候我们想要在 render 的时候动态判断,然后加载不同的组件,怎么办呢? 试试这个: render() { let Comp = choose1 ? eval(Component1) : eval(Component2); return ( <Comp prop1={data1} prop2={data2} /> ); } 嗯嗯,大概就是这样~ 很简单吧~ 好啦,就这样吧,晚安~ ----------- 2016.08.31 更新 ---------------- 好久没有写 react 了,最近又开始写的时候,发现已经不需要这么麻烦了 大概这个样子就可以 render() { let Comp...

lnmp 重置 MySQL 的密码

昨天遇到的问题,公司的一个lnmp环境的机器忘记了 MySQL 的root密码,然后就呵呵呵呵呵。。。 下面其实就是记一下重置的过程 1.停掉LNMP lnmp stop 2.修改MySQL配置文件 vim /etc/my.cnf 在[mysqld]后面加入一行,停到密码验证 skip-grant-tables 3.重新启动LNMP lnmp start 4.修改密码 mysql update user set Password = password ( '123456' ) where user = 'root'; 5.重启LNMP lnmp restart 大功告成~

给 Nginx 添加 HTTP/2 支持

周末了解了一下HTTP2.0相关的一点儿东西,然后就迫不及待的在博客上搞一下试试。 博客是用的 Nginx 1.6 比较老的版本,然后 Nginx 在 1.9.5 的版本已经加入了 HTTP2.0 的扩展模块,之前的版本可以使用 SPDY 扩展模块来实现 SPDY 协议。 先不扯了,搞起搞起~ 先升级一下 Nginx,下载最新的 Nginx 版本,现在最新是1.9.7,然后要下载最新的SSL模块,接下来就是编译安装啦 进到你的 Nginx 源码目录,配置要添加的模块,需要至少 http_v2_module 和 http_ssl_module 两个模块 ./configure --with-openssl=../openssl-x.x.x --with-http_v2_module --with-http_ssl_module 然后 make 替换 nginx mv /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.old cp objs/nginx /usr/local/ng...