查看详情

Mac 下 UC 浏览器调试

UC 的webkit内核还偏老，很多属性和Api支持不太好，因此有可能你也会如同Po主一样需要调试一下。其实UC浏览器由于受众多，因此官方有至此开发版的UC浏览器： 下载地址 Mac 下需要准备安装ADB开发工具。 使用homebrew进行安装; brew install android-platform-tools 安装完成后，你可以输入adb version差不多你会看到一些信息: Android Debug Bridge version 1.0.32 Revision eac51f2bb6a8-android 然后确定你的手机是打开开发模式的，允许USB调试。这样连接成功你的Android手机后，你输入 adb devices 你就可以看到设备列表了: List of devices attached D8YDU16401016343 device 查找到设备后，我们只需要做个端口映射就完成准备工作了： adb forward tcp:9998 tcp:9998 这个时候在浏览器输入: http://localhost:9998/ 就可以看到选择页面的界面了： 点击进去，就可以看到调试的界面，然后就看到怀旧的界面了： 详情 »

查看详情

使用yarn 制作一个webpack + react 种子

前言 很早以前写过使用React-router和Webpack快速构建一个react程序。很多网友发现版本太老，于是乎最近又重新组织了下结构，使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上，这样大家也可以有个直接参考。 Github 项目地址 初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令： yarn init yarn 如果没有安装，全程用 npm代替也没问题。 项目会初始化 package.json ,然后填写一些基本信息即可。 接下来我们开始安装依赖项，再 package.json 的添加下面内容 "dependencies": { "react": "^15.4.0-rc.4", "react-dom": "^15.3.2& 详情 »

修复 RCTWebSocket - Ignoring return value of function declared with warn_unused_result attribute

最近升级了Mac OS，Xcode打开一个React Native老项目时，build 一直错误; RCTWebSocket - Ignoring return value of function declared with warn_unused_result attribute 心情一下就😂了，这个又要搞事情啊。不过好在这个问题早早有人提交了，修改也比较方便： 具体的issue看这里： https://github.com/facebook/react-native/issues/8584 详情 »

查看详情

Yarn 的安装与使用

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 详情 »

解决karma 在travis 找不到CHROME_BIN的问题

今日用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 是如何优化图片加载的

Medium 是全球非常知名的阅读平台，允许用户多人协作，并将自己的内容发布到平台上，让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章，有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧： 其实我们可以看到在在那些文章中的图片，我们可以看到起初是一张非常小的并且模糊的图片，随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求，就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ，然后将他的padding-bottom设置成百分比，从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图(eg:20%)，实际上这是直接在代码中写了 img标签的，浏览器会正常请求； 一旦图片加载了，它们会开始绘制一个canvas标签，图片的数据会传递给自定义的blur函数，这个函数与StackBlur有点相似，但不完全，这个同时，网络开始请求大图。 大图加载完毕后，于是区域便展示大图，而canvas则会隐藏掉。 我们会使用transition从而让整个效果变得更加流畅。 基本结构 基本的html结构如下： <figure> <div> <div/> <!-- this 详情 »

查看详情

前端神器 Adobe Brackets 使用心得

提及编辑器，可能类似与语言之争，什么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. 简而言之，就是提升开发效率，让开发者少走一些路， 详情 »

Vue-Core-Image-Upload 一款Vue轻量级的图片裁剪上传插件

[项目地址](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，大家第一印象可能是图片社交网站，里面有很多用户上传的各式各样的图片。从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析上 Pinterest上另外一项非常值得借鉴图片加载细节。 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。 效果体验 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧). 实现步骤 接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路) 我们先定义下基本的html结构 <!--一个post当作一个单位--> <div class="post"> <div class="image-bg" style="background-color:#141646"> < 详情 »