Web 开发技术分析，前端开发学习历程。
280 篇文章越来越多的前端开发者开始使用 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 详情 »
相信大家很多在写前端的博客或者专题时候，都会涉及到兼容性的问题。也就是我们会去 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: 详情 »
如果经常浏览日本的网站，你会看到日本网站经常会实现在页面中字体添加从模糊到正常的特效。 推荐两个网站，浏览效果: 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 也就是 可视区域 详情 »
原文地址: 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 详情 »
