查看详情
原文地址: 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. 基本样式 详情 »
查看详情
原文地址: 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 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 详情 »
之前做 weex-svg 的时候，开发者第一次接触 SVG （手写那种，虽然很多情况都有设计师使用 AI 来完成这项工作，但还是不排除需要利用到 svg 的每个 元素）。 才开始，大家都会困惑于 viewBox 和 viewport这两个属性，大家可能也会看到 svg 代码中的千奇百怪。是的，自己也曾为此困惑，宝宝当时内心: 之前自己在做 SVG 学习笔记 的时候，也曾翻译过 Jakob Jenkov 的 关于 [viewport 与 viewbox] (http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) 的区别。 翻译地址: http://events.jackpu.com/svg/#/prop-viewbox-and-viewport 今天再详细的说下这两者的属性。 viewport viewport 也就是 可视区域 详情 »
东野圭吾的另外一部小说。好吧却是读着才开始觉得很一般，觉得也就那样吧。感觉没有太多值得推敲的。知道最后结局，才知道原来布局者是多么牛x。 关于 石神 对 靖子 会有人争论彼此，但是觉得这样的人也有吧，一厢情愿喜欢着，只想看着对方好。不过毕竟是少数，小说还是印证出石神的超高智商。 四星半推荐吧。推理性质的小说，反正读着确实很快。 详情 »
查看详情
原文地址: http://codepen.io/Mamboleoo/post/tunnel-animation-1 @Louis Hoebregts 如果你对下面的效果非常好奇的话，那么今天这篇文章就是要告诉你们如何实现一个类 虫洞的特效动画。 同样我也在 agency’s 2017 使用了这样的效果。而我将在这篇文章中解释其中的原理和基本实现。 我们需要创建一个管道然后在里面会设置一个相机运动。然后我们会丰富我们这个管道的外在样子。 我们使用了 Three.js 来完成基本的动画，如果你对 Three.js 不怎么了解，你可以先阅读 Rachel Smith's posts 来了解一些基本知识。 建立场景 作者使用的codepen编辑，不过这里会补上欠缺的 首先我们加入一些基本 Three.js 代码来实现 一个基本的 Three.js Demo. 在 html 代码中添加 canvas <!DOCTYPE html> <html> < 详情 »
Webpack2 已经出来许久，但是由于配置写法的变化，很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话，关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI。 它可以快速的生成webapack 配置和 进行配置迁移。 快速开始 首先我们得全局安装 webpack-cli： npm install -g webpack-cli 安装完成后我们可以通过使用 webpack-cli init webpack-addons-demo 来初始化一个配置目录文件，文件内容可以看 这里。当然webpack的目录模板也是可以自己开发的。 webpack 迁移 使用 webpack-cli 可以方便的完成我们从 v1 迁移到 v2。 直接使用命令: webpack-cli migrate webpack.config.js webpack 详情 »
