随着 html5 canvas 的 api支持，我们现在可以轻松的对图片进行一些处理，比如图片的放大，缩小，图片的裁剪和旋转。因为它可以接触到像素级别的操作，进行更加复杂的操作。 绘制一张图片 在 canvas 中绘制一张图片 只需要利用到 drawImage 这个方法就可以实现。 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); drawImage 它可以接受九个参数(不一定全部传入) image: 它可以是一个 图片的 Image 元素，或者 Video ，Canvas 元素。 dx 表示在画布 x 轴的坐标值 dy 表示在画布 y 轴的坐标值 dWidth 表示在画布绘制的长度 dHeight 表示在画布绘制的高度 sx 表示在画布所绘制图片本身的 x轴 详情 »
转眼半年过去~ 不知不觉，来 A 厂半年多。去 YK 2个多月。今天周六，还是去加班上线，结果还是出现意外的故障。忽然感觉这半年人品也真是够了😂😂～如果要给半年评分的话，自己还是愿意打出过去工作三年的最高分。不过还是有些令人遗憾的事情。 年初开始接触做 node cli方面的东西，这个领域是之前没有接触过，也感谢身边黑人 的帮助，让自己代码约束性的设计思想有了很多提高。这些都在后面支援 大剧的工作有了明显的提升。 运营是一件非常需要耐心的事情。大概这是接触 Github 社区 以及公众号的最大感受。在Github社区里你需要和不同国籍，不同技术身份的人去进行沟通，而且国内对于 技术容忍度很低 ,做好被骂的准备。当然骂也不是坏事，因此我们客观的去看待这件事情。因为做开源的事情，很难去满足不同团队的技术需求。做公众号其实需要很多时间的投入，从构思到找资源都是非常耗时的。这个项目在三月底开始暂时告一段落，确实这影响到了工作和技术产出。不过一些非常珍贵的机会是你有机会和很多老外进行交流，在 Apache的邮件里你可以看到很多热心的开发者会去表达自己的困惑和自己的思路。当然今年也写了几片 medium 上的英文文章。对于 Global 化的项目，自己一直坚持有限英文，包括在插件的实现，文档也尽可能会提供英文的内容。而且老外非常喜欢提 PR 详情 »
最近经常听到 愿你历经千帆，归来仍是少年 到了毕业季，很多朋友也都不得不离开陪伴过青春的学校。前些天叫写给好友毕业的寄予，自己果断的选择了： Follow your heart. Keep Learning. Follow your heart 这句话是来自 李开复的《世界因你而不同》 。第一次读到就喜欢上这句话。经常喜欢把步入社会，换作江湖。大概少年儿时都有过江湖梦，其实江湖多变，每个人都会面临诸多的选择。很少人可以预测对未来几年的变化，如同步入校园的你，很难猜对毕业时的你做着什么工作。你会发现自己会不断的面临着多种多样的选择。所以做选择的时候，多问问自己，想要的是什么？ 也就是自己理解的 Follow your heart. 其实步入社会的很多毕业生，也会像刚刚迈入校门的自己，都会迷茫。人在迷茫的时候，时常想想最初的想法，这样或多或少可以帮助你慢慢找回自己。，找回那个志气慢慢的少年。 Keep Learning 这句话是来自Facebook 上市招股书里，小扎阐述 The hacker way 里的一个要点。学习永远都是提高自己的一种手段，不因所做的工作而有差异，学习的范围也不限于知识的范围。对于周围的前辈，同事， 详情 »
越来越多的前端开发者开始使用 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多天补完了《裸婚时代》。其实这部剧播出的时候还是很火的，寝室飞一直在追。不过那个时候自己到没有怎么关注。只是觉得这个时候可以看一看。一方面确实近几年的电视剧质量远不如以前，二是确实这个话题也是不得不面对的话题。 细节打败爱情 这是她们两个离婚时候的聊天，文章说的这句话。其实喜欢的时候都是单纯的，没有那么多问题考虑，然而一旦决定在一起时候,不得不去面对双方家庭，经济，以及文化性格等诸多问题。双方的父母在处理同一件事情的态度和方式极易造成矛盾。其实电视剧里有些比较俏皮的就是刘易阳于童佳倩吵架的时候，吵着吵着就会牵着到父母，一牵扯到父母矛盾自然就升级。其实从小的家庭成长环境，突然变化后自然会迎来很多考验和适应。童佳倩和刘易阳的离婚，其实双方都是有问题的。童佳倩的适应没做好，没能够积极适应这种生活的变化，任性。刘易阳死要面子，再困难也要自己扛，“大男子主义”，也是任性。确实矛盾都是一件件小事情积累的。比如刘易阳加班，童佳倩希望刘易阳给孩子喂牛奶那件事情。很明显那个时候双方的矛盾都是来源于内心已经不在那么的去体谅对方了。于双方而言，双方都“累了”！ 其实在一起后面更长的路，离不开包容。其实这无关经济，无关家庭，两个人热恋的时候，男方心里始终处于一个去主动理解，而女方也习惯了这种“溺爱”。然后过日子确实是另一种状态。所以“门当户对”，自古以来流传下来的一句话，确实是有他的道理。这可以在起步阶段消除一些不必要的矛盾。刘易阳最后说，现在我有了车子，有了钱， 详情 »
相信大家很多在写前端的博客或者专题时候，都会涉及到兼容性的问题。也就是我们会去 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 详情 »
原文地址: 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 详情 »
在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: 详情 »
天气微风。 已是深夜，并不代表没有睡觉，好久没有失眠。写写近况，似乎很久没有连载了。 最近在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. 基本样式 详情 »
