写给迈入江湖的少年

最近经常听到 愿你历经千帆,归来仍是少年 到了毕业季,很多朋友也都不得不离开陪伴过青春的学校。前些天叫写给好友毕业的寄予,自己果断的选择了: Follow your heart. Keep Learning. Follow your heart 这句话是来自 李开复的《世界因你而不同》 。第一次读到就喜欢上这句话。经常喜欢把步入社会,换作江湖。大概少年儿时都有过江湖梦,其实江湖多变,每个人都会面临诸多的选择。很少人可以预测对未来几年的变化,如同步入校园的你,很难猜对毕业时的你做着什么工作。你会发现自己会不断的面临着多种多样的选择。所以做选择的时候,多问问自己,想要的是什么? 也就是自己理解的 Follow your heart. 其实步入社会的很多毕业生,也会像刚刚迈入校门的自己,都会迷茫。人在迷茫的时候,时常想想最初的想法,这样或多或少可以帮助你慢慢找回自己。,找回那个志气慢慢的少年。 Keep Learning 这句话是来自Facebook 上市招股书里,小扎阐述 The hacker way 里的一个要点。学习永远都是提高自己的一种手段,不因所做的工作而有差异,学习的范围也不限于知识的范围。对于周围的前辈,同事, 详情 »

查看详情

iTerm 2 需要熟记的快捷键操作

越来越多的前端开发者开始使用 Macbook 进行项目开发。iTerm 2 作为一款非常方便的软件也成为装机必备了。而在使用这些命令行工具一些常用的快捷键可以非常有效率的帮助你进行对 Terminal 的内容进行处理。 内容输入快捷键 移动到头部 Control + a 移动到尾部 Control + e 移动到上一个字母 Control + b 移动到下一个字母 Control + f 撤回 Control + - Tab 操作 新开一个Tab Cmd + t 切换下一个 Tab Cmd + Shift + ] 切换前一个 Tab Cmd + Shift + [ 对当前窗口的操作 分割左右两个区域 Cmd + d 分割上下区域 Cmd + Shift + d 其他 清空内容 Cmd + k 搜索内容 Cmd + f 查找下一个 Cmd + g 详情 »

查看详情

裸婚时代

最近花了20多天补完了《裸婚时代》。其实这部剧播出的时候还是很火的,寝室飞一直在追。不过那个时候自己到没有怎么关注。只是觉得这个时候可以看一看。一方面确实近几年的电视剧质量远不如以前,二是确实这个话题也是不得不面对的话题。 细节打败爱情 这是她们两个离婚时候的聊天,文章说的这句话。其实喜欢的时候都是单纯的,没有那么多问题考虑,然而一旦决定在一起时候,不得不去面对双方家庭,经济,以及文化性格等诸多问题。双方的父母在处理同一件事情的态度和方式极易造成矛盾。其实电视剧里有些比较俏皮的就是刘易阳于童佳倩吵架的时候,吵着吵着就会牵着到父母,一牵扯到父母矛盾自然就升级。其实从小的家庭成长环境,突然变化后自然会迎来很多考验和适应。童佳倩和刘易阳的离婚,其实双方都是有问题的。童佳倩的适应没做好,没能够积极适应这种生活的变化,任性。刘易阳死要面子,再困难也要自己扛,“大男子主义”,也是任性。确实矛盾都是一件件小事情积累的。比如刘易阳加班,童佳倩希望刘易阳给孩子喂牛奶那件事情。很明显那个时候双方的矛盾都是来源于内心已经不在那么的去体谅对方了。于双方而言,双方都“累了”! 其实在一起后面更长的路,离不开包容。其实这无关经济,无关家庭,两个人热恋的时候,男方心里始终处于一个去主动理解,而女方也习惯了这种“溺爱”。然后过日子确实是另一种状态。所以“门当户对”,自古以来流传下来的一句话,确实是有他的道理。这可以在起步阶段消除一些不必要的矛盾。刘易阳最后说,现在我有了车子,有了钱, 详情 »

查看详情

在自己的网站或者博客嵌入浏览器支持情况(howcaniuse)

相信大家很多在写前端的博客或者专题时候,都会涉及到兼容性的问题。也就是我们会去 caniuse 查找兼容性的浏览器支持情况。感谢 IreAderinokun 开发了一个开源项目 : caniuse-embed 你可以将浏览器的支持情况直接插入到你的网站或者文章中,而不用大家截图或者链接说明。 如何使用 使用非常简单,你可以前往 http://caniuse.bitsofco.de/ 勾选你希望显示的特性: 接着点击 Generate 按钮,会生成一段 html 代码 然后将这段代码贴到你的文章或者页面里面。 当然别忘记了引入这段脚本在页面底部: <script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script> 然后就大功告成了! 一些参考效果: CSS Feature Queries Can I Use css-featurequeries? Data 详情 »

查看详情

【译】2017年值得学习的 3 个 CSS 新特性

原文地址: https://bitsofco.de/3-new-css-features-to-learn-in-2017/ @ Ire Aderinokun 新的一年笔者计划学习一些新的东西,自己对下面这三个非常感兴趣。 CSS 特性查询(Feature Queries) 不久前,我单独写过了这篇文章the one CSS feature I really want 提及到自己期期待 CSS 特性。如今它受到了大多数浏览器的支持除了 IE 。特性查询你只需要使用 @support , 它允许我们嵌入css的表示式进行条件判断,如果支持的浏览器则会执行 包含的语句。一个经常想到的便是 判断对于 flex 的支持。 @supports ( display: flex ) { .foo { display: flex; } } 除此之外,使用 and 以及 not 我们可以实现更加复杂的查询语句。举个例子,我们可以判断这个浏览器是不是只支持老板 flex 语法。 @supports ( display: flexbox ) and ( not 详情 »

使用 line-clam 控制段落行数

在2016年3月谷歌率先支持了 line-clam 用于控制一段文字的行数显示。这个时候实现省略号的方式有多饿一种。 先查看下目前的浏览器支持的情况: 也就是说如果在移动端浏览器上支持已经非常广泛,可以在移动端的页面大胆实现在PC上我们还需要考虑降级。 我们需要在装文本内容的部分设置如下样式: overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 效果如下: See the Pen KmOzOd by Jack Pu (@Jack_Pu) on CodePen. 其中 line-clam 表示需要显示的行数。而 display 和 -webkit-box-orient 则需要是盒子类型和以及子元素的排列方式。其中末尾的符号与 text-overflow 的设置相关。如果你设置了 ellipsis 那么末尾就是常见的 省略号了。 如果你使用 sass 或者 less 等 预编译系统,的话如果 -webkit-box-orient 被移除掉了,你可以参考 https: 详情 »

查看详情

微日记-20170527

天气微风。 已是深夜,并不代表没有睡觉,好久没有失眠。写写近况,似乎很久没有连载了。 最近在YK那边,其实圈子氛围挺好的,既然我们过去就肯定是希望带来一些 change的,改变或多或少是痛苦,但是谁TM叫A买了。自己买的东西总不能让它自由生长吧,自己不方便谈论战略性的问题,但是未来会证明,于这个团队,于自己,这样的做法,很残酷,但是会有收益的。 近日的工作强度确实很大,但按理也不会失眠。近日和同事聊天的一句话,确实触动到了。 “耽搁”。 或许这个词语包含了对于过去的种种遭遇的遗憾。其实换个词语可以表达另一种意思: “执念”。 或许这背后还是来源于性格的不成熟。对于过去的遗憾,对于未来的不确定,自己也一直处于一种徘徊的状态。到了A厂确实不知不觉在性格上有些改变还是环境的变化,稍微开始愈发主动的去做一些事情,这个和才步入社会的自己完全是两种对立面。机会是有限的,必须得去适应和争取。工作是,感情也是。 这周天回长沙。好想念那里的味道,好像再吃小炒肉。父母来京的事情,也基本敲定了。所以自己没有修年假,准备留在暑假。或许每个家庭都有曾想过在天安门合影的照片。这次终于可以实现了。 最近小扎在哈佛做了毕业演讲,这的挺燃的,它不是一个擅长演讲分享的,但是确实可以感受到他对于未来的期待: 里面它非常强调一件事情,便是行动。很多人都会想,但是idea只是一个想法, 详情 »

查看详情

实现日本网站字体模糊动画效果

如果经常浏览日本的网站,你会看到日本网站经常会实现在页面中字体添加从模糊到正常的特效。 推荐两个网站,浏览效果: koshiki-stay,是一家提供旅游的网站 houjyuen, 一家园林网站 当然还有很多网站使用了类似效果,你可以 iiiimg 查看一些比较漂亮和充满创意交互的站点。 基本实现 想到模糊,目前前端有两种基本实现 canvas canvas 你需要写一个模糊算法,你可以参考 Codepen 的想法, 关于算法,你还能自行搜索实现。底层原理就是对像素的操作。 css3 filter:blur() 现在移动端和PC的主流浏览器都开始对 CSS Filter 进行支持了,详情可以参考 浏览器的兼容性情况 filter 可以支持很多效果函数: blur contrast opacity url 这里我们主要是用到 blur 这个函数,它可对当前元素进行高斯模糊,效果如下; See the Pen Blur Filter by GRAY GHOST (@grayghostvisuals) on CodePen. 基本样式 详情 »

查看详情

《转》主流视频格式介绍

原文地址: http://www.cnblogs.com/wind128/p/4437675.html 现在存在各种视频太多了,工作需要,所以将它们都记录下来,至少也该知道它到底是怎么一回事,虽然没有办法去理解所有视频使用的算法,但是了解一下还是有必要的。 MPEG Moving Picture Expert Group,即运动图像专家组格式,是以下MPEG-1、MPEG-2等视频格式的总称,VCD、SVCD、DVD就是这种格式。MPEG格式是运动图像 压缩算法的国际标准,它采用了有损压缩方法从而减少运动图像中的冗余信息。 MPEG的压缩方法保留相邻两幅画面绝大多数相同的部分,而把后续图像中和前面图像有冗余的部分去除,从而达到压缩的目的。 MPEG-1 常用扩展名:.mpg、.mlv、.mpe、.mpeg、.dat 常用领域:电脑视频、影碟 简介:MPEG-1标准制定于1992年,它是针对1.5Mbps以下数据传输率的媒体资源设计,是数字存储媒体运动图像及其伴音编码而设计的国际标准。MPEG-1相信是大家接触得最多的了,因为目前其正在被广泛地应用在 VCD 的制作和一些视频片段下载的网络应用上面,大部分的 VCD 都是用 MPEG1 格式压缩的 详情 »

查看详情

React-core-image-upload V2.2 is released

React-core-image-upload is a really light-weight plugin for react.js developers to upload his images. Now you could also compress and crop image via this plugin. The xhr2 help us to gain more ability to handle files. Last two days, we were trying to migrate Vue-core-image-upload to react.js one. And all the new features of Vue-core-image-upload 详情 »