Web 开发技术分析，前端开发学习历程。
282 篇文章现在如果写某些类库的话，非常注重单元测试，从而确保发版质量。大概测试框架也有很多，这里介绍比较常用的 前端测试框架技术选型。 安装 Karma npm install -g karma-cli 然后使用 karma 初始化配置: karma init 如果提醒，安装依赖，你只需输入: npm install karma --save-dev 然后再执行一次就好，系统会提醒你进行一些输入操作，你可以直接跳过。这个时候程序会自动创建 karma.conf.js 。 基本内容是： // Karma configuration // Generated on Wed Jul 12 2017 18:29:58 GMT+0800 (CST) module.exports = function(config) { config.set({ // base path that will 详情 »
随着 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轴 详情 »
越来越多的前端开发者开始使用 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 也就是 可视区域 详情 »
