Web 开发技术分析，前端开发学习历程。
279 篇文章Facebook 近年大招频出。Yarn是Facebook最近发布的一款依赖包安装工具。 项目地址 官方介绍里有这么一句话： Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry. 关键意思就是，快速,安全,可靠。你下载的包将不再重新下载。而且确保在不同系统中可以正常工作。 快速安装 MacOS 在Mac上安装比较方便，使用初始化脚本即可 curl -o- -L 详情 »
今日用npm test在 /travis-ci中运行时，找不到CHROME_BIN。自己用的karma + Jasmine测试模块功能。 在代码传上去的时候于是乎看了这样的错误: ERROR [launcher]: Cannot start Chrome Can not find the binary google-chrome Please set env variable CHROME_BIN 当然这种问题肯定前人也遇到过，所以解决起来思路很重要，我大概就是还是不动karam的配置修改.travis.yml,文件，添加几句脚本即可。 - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start 其实你还可以通过修改karam.conf.js中的broswers这个选项来实现，比如你可以修改至 phantomjs. 当然修改后你就可以看到build 详情 »
其实算法对于很多前端，或者更小范围的工程师，比如（非班科出身）的我，而言，其实还算一个很难的挑战。 最早接触算法还算是大一下期学习C++（好蛋疼的日子，全班挂的差不多，感觉学习外语一样）。接触了一些基本的算法，比如找闰年啊，排序等。但是由于专业不在这个方向，后面就再无接触了。大四要找工作的时候，发掘得开始恶补了，于是乎也买了本数据结构与算法(c语言)的，也看的模模糊糊，但是数据结构却开始了解的相对深刻一点。后来的工作其实验证了算法和数据结构对于解决问题的帮助还是很大的。所以无论是出于应试目的，还是工作所需，对基础的算法和数据结构一定要有所理解和深入。一定是受益匪浅的。 自己最近开始重温算法，也把代码放到JavaScript-Algorithm-Learning.自己也算督促自己把最基本的算法有所理解并实现吧。 前端需要掌握的基本的内容大致有：树，排序，图论算法，贪婪算法等。 详情 »
Medium 是全球非常知名的阅读平台，允许用户多人协作，并将自己的内容发布到平台上，让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章，有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧： 其实我们可以看到在在那些文章中的图片，我们可以看到起初是一张非常小的并且模糊的图片，随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求，就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ，然后将他的padding-bottom设置成百分比，从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图(eg:20%)，实际上这是直接在代码中写了 img标签的，浏览器会正常请求； 一旦图片加载了，它们会开始绘制一个canvas标签，图片的数据会传递给自定义的blur函数，这个函数与StackBlur有点相似，但不完全，这个同时，网络开始请求大图。 大图加载完毕后，于是区域便展示大图，而canvas则会隐藏掉。 我们会使用transition从而让整个效果变得更加流畅。 基本结构 基本的html结构如下： <figure> <div> <div/> <!-- this 详情 »
提及编辑器，可能类似与语言之争，什么vim才是最好的编辑器等等。其实自己用的顺手熟练才好，毕竟作为一门工具，效率第一，而且现在总多的编辑中，你所需要的常规功能都已经具备了。 Adobe Brackets 是Adobe公司推出的一款编辑器，可谓名门之后。或许还在几年前，有的朋友也还用着他家的Dreamwearver写完了自己的第一个网页。 而Brackets相对Adobe Dreamweaver，我们将它定义为一款编辑器，它身上完全看不出Dreamweaver那样繁重的功能，而它诞生的目的就是: With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. 简而言之，就是提升开发效率，让开发者少走一些路， 详情 »
[项目地址](https://github.com/Vanthink-UED/vue-core-image-upload) 最近把jquery.core.image.upload迁到了vue的版本。当然Angular的版本还在写。 改的过程中，有的时候还在纠结要不要写个状态去维护对一些值的操作。后来到测试的时候才发现，各有优势吧。Vue目前交给了移动组的同事再弄，自己只参与了这次插件的改写，毕竟jQuery版本是自己维护的。有趣的是，发现代码量相对jquery少了很多，比如移动和拖拽，以前是依赖jquery.ui新的版本完全脱离这些，但是目前还是将其独立封装成一了一个类，但是写法还并非Vue的写法,因此后期可能还会有些变动吧。参数这些没有太多变化，还是和jquery的那个版本的功能保持一致。当然目前测试还没有添加进去。需要后面更新。 使用 npm i vue-core-image-upload --save Code Example (ES6) import VueCoreImageUpload from './vue.core.image.upload.vue'; new Vue({ el: '#app', components: { 'vue-core-image-upload': VueCoreImageUpload }, data: 详情 »
提起Pinterest，大家第一印象可能是图片社交网站，里面有很多用户上传的各式各样的图片。从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析上 Pinterest上另外一项非常值得借鉴图片加载细节。 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。 效果体验 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧). 实现步骤 接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路) 我们先定义下基本的html结构 <!--一个post当作一个单位--> <div class="post"> <div class="image-bg" style="background-color:#141646"> < 详情 »
随着谷歌开始支持对Ajax站点应用的抓去，那么Angular,Vue或者其他单页应用(SPA) 网站的seo将变得容易得多。但是 # hashbang 符号有着一定的限制。或者那些执着于伪静态url的追求的话，一定是想尽办法去掉这个符号。修改完成之后大家可以参考这个站点fadeit.dk 如何转换为静态路由以及开启html5 mode 前面的例子，大家可以明显看到url中失去了＃，我们看下angular中的代码吧: angular.module('main', []).config(['$locationProvider', function($locationProvider) { ... $locationProvider.html5Mode(true); ... }); 如果你使用的是Apache，则你需要添加重写规则的文件.htcaccess。 RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ 详情 »
先放运行截图说明做什么吧， react-native-percentage-circle 项目地址 最近需求需要一个显示百分比的加载条。然而去搜索了很久，没能发现比较满意的组件，只好自己解决了。当然对于大多数前端而言，这个并不是特别难的，可能思路众多，然而面对React Native似乎就有点相形见绌了。解决这样的问题，我们还是得回归前端本身，看看有什么可以嫁接的方案没。 前端常规制作进度条方法 前端实现相对容易点，我们可以用canvas去绘制圆，也可以用SVG去绘制. 使用SVG <svg style="width:2.8rem" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 详情 »
原文地址: http://www.cnblogs.com/itfly8/p/5043435.html 作者 @ ITFLY8架构师之家 面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等，当单机容量达到极限时，我们需要考虑业务拆分和分布式部署，来解决大型网站访问量大，并发量高，海量数据的问题。 从单机网站到分布式网站，很重要的区别是业务拆分和分布式部署，将应用拆分后，部署到不同的机器上，实现大规模分布式系统。分布式和业务拆分解决了，从集中到分布的问题，但是每个部署的独立业务还存在单点的问题和访问统一入口问题，为解决单点故障，我们可以采取冗余的方式。将相同的应用部署到多台机器上。解决访问统一入口问题，我们可以在集群前面增加负载均衡设备，实现流量分发。 负载均衡（Load Balance），意思是将负载（工作任务，访问请求）进行平衡、分摊到多个操作单元（服务器，组件）上进行执行。是解决高性能，单点故障（高可用），扩展性（ 详情 »
