梦想就在眼前，看能否有一颗必胜的心。老是徘徊于此，只能白白的浪费时间，还有整整一年。要用汗水与努力去换取。点滴之行，可以穿石。自己要变得更加冷静，更加执着，不再走似晃似糊的道路，而是一条踏实的道路。 为了ZD而奋斗，一定不能输给... ====== 这是成都零诊之后开始写的第一篇，几乎自己所有大的考试后都有写感想，写在了笔记本的最后一页。这是第一次参加高三的模拟考试，那还是一个暑假，其实这个时候是高三的起点。所以写的都是些比较积极的话，当然也晒了目标。 ZD其实是浙江大学，那个时候自己还是希望有一个比较高的目标。 现在想想，看着曾经目标也唏嘘不已，杭州后面虽常去，但是浙江大学，却始终成为了曾经的一个梦想而谈。 理想很美好，现实很残酷。 详情 »
在flat design(扁平化的设计)中，Long Shadow （长投影）被看着屡试不爽的设计技能。比如下面这张，非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效果， 在自然界中，长投影发生在黄昏的时候，太阳接近地平线时，水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果，模拟阳光从西北角上射来，从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法，你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种，通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片， 大致原理就是 你复制一个当前图层，选中图层样式，填充黑色，然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移，友移一个单位和下移一个单位。 然后，我们再复制这个图层，再平移一次。然后合并这两个阴影图层 然后我们再重复动作，即把这个图层复制一次，向下移和向右移动2个单位。再执行合并。依次类推复制，移动偶数倍单位，合并，然后再重复。 当然你用滤镜->其他->位移会更加方便 大致就是这样的效果，然后最后设置下透明度就好。 上面说的是设计，前端如何通过css代码来实现这样的效果？大家第一时间想到就是css3已经支持的text-shadow 首先我们给背景添加一种比较突出的颜色吧，自己强烈安利flatcolors这个网站，里面有很多配色方案，随取随用。 详情 »
原文地址： https://bitsofco.de/optimising-gifs/ @ireaderinokun 和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播 不过我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb。最近自己在阅读很多别人的文章时候，也发现，由于自己文章存在gif导致网站加载过慢。gif的使用了无损的算法，每一帧都是一张gif图片，这意味着在图片压缩时候，不会存在信息丢失，这也就是为什么gif这么大。 为了解决这样的问题，我们需要做一些事情。 使用html5 video 感觉惊喜的是采用视频的格式mp4活着webM都所用的文件大小都小于使用无损压缩的 gif正因如此，一个解决方法就是，替换掉gif采用mp4活着webm格式的视频，使用自动播放和循环，这样让人会有gif的样子。 通过给video设置一些属性，我们可以让video去模拟gif播放的效果： autoplay 自动播放，用户无需点击 loop 无限循环播放 muted 尽管gif没有音轨，但是ios自动播放还是需要设置这个属性 playsinline ios safari上确保视频不会全屏 poster 制定视频下载时候的显示的图片 如同下面这个 “视频” 居然 1m不到 😂 将gif 转换成webm你可以到CloudConvert进行转换。 详情 »
在不久前，我们把vue-core-image-upload 发布了2.0 。这次我们保持了完整的api迁移到了react上。支持了header 定义，支持了 file change 的自定义事件，更新了更加详细的文档。 react-core-image-upload 项目地址 Demo 快速开始 使用 npm npm install react-core-image-upload --save-dev 使用 yarn yarn add react-core-image-upload 使用ES6 进行开发 import React from 'react'; import ReactCoreImageUpload from 'react-core-image-upload'; let App = React.createClass({ //... render() { return( <div> <ReactCoreImageUpload text="Upload Your Image" class={['pure-button', 详情 »
webpack dev server 2.0 配合着下新版本的webpack2面世，最近项目的配置也在迁移到webpack2上来的。推荐阅读 Migrating from v1 to v2 webpack dev server在这次升级中发生了很多变化，下面罗列一些和你开发相关围绕紧密一些更新点: 只能配合weexpack2使用，所以升级请把相关依赖全部升级上去. inline 命令现在默认放到了命令行支持中，如果需要取消加上--no-inline 取消掉一些不必要的console输出,比如当服务器关掉后，还一直出现error信息。 clientLogLevel 允许你控制你设置console 输出的信息 8080端口被占用了，现在不用担心了，新的体系会自己寻找可以使用的端口 开始支持web-worker 以及非web平台的使用比如(Electron) 对于http2 的支持。 关于更多relaese 的更新可以关注changelog 更多阅读 What’s new in webpack dev server 2.0 getting-started-with-webpack-2 What's new in webpack 2 详情 »
2月中旬会配合着发布新版本的博客主题Vanthink-Theme.也就是当前博客的主题。主要是几个优化和新特性: slide可能改变，不再用svg的这种了。 字体会换成svg的形式 文章内容的字体和一些文本样式的修改 更换文章推荐的图标 顶部导航栏样式更新 另外一个项目是七牛上传的项目，希望支持markdown的 惰性图片加载和上传，这样把图床切回来。 参考效果文章 详情 »
大概今年春节后开始，自己得每月发运营的月报，一是为了制定自己的目标，而是看自己的一些运营策略。 截止2017年2月19日 微信账号： 关注用户： 15位。（13 + 2） 13位是朋友，实际上即使是朋友对这块也不是全部都有兴趣。非常惊喜的是在知乎上的软文（https://www.zhihu.com/question/22532884/answer/147238023?group_id=816775938556723200）还是有作用成功吸引了2位不认识的小伙伴。 发布消息： 4条，总阅读量95，点赞12。 这次统计忽略掉不同时段的数据，下次发布的时候一定带上，便于数据分析。 详情 »
原文地址: https://www.facebook.com/notes/mark-zuckerberg/building-global-community/10154544292806634/ 2017年2月17日，Facebook的CEO小扎发布了一篇《Building Global Community》文章，表达自己对未来的期待。文章比较长，但用词简单，推荐挑战下阅读英文全文。 To our community, On our journey to connect the world, we often discuss products we're building and updates on our business. Today I want to focus on the most important question of all: are we building the 详情 »
不知不觉到北方第三年了。看了微博当初信誓旦旦的说要呆满五年。不知不觉就过去一大半。也希望未来自己和北京的小伙伴越来越顺利。相见难，别亦难。 今天去理发，听到店主和店员使用韩语沟通，瞬间起了好奇心，难道这是专门给韩国人的理发店，不过店主的中文也很流利。于是决定去体验一把，后面了解他们是朝鲜族人，也是北漂。128一次，我也是遇见了，头一次这么贵的，下次是真不会去了😂。 vue-core-image-upload过100 star了，从去年9约6日的提交，也就半年时间，不过自己明白了几点： 给官方的插件也提issue 注重用户反馈，及时回馈issue 完善的文档和邮件沟通 在社交媒体的宣传和文章有助于插件被搜索 详情 »
WEEX在今年一月份宣布在web端对vue渲染的支持，也就是说，今后你可以用写vue的的方式去写weex 项目。在升级新版的weex的时候大家一定记得去官网看下diff [Weex 和 Vue 2.x 的语法差异]https://weex-project.io/cn/references/migration/difference.html。 如果我们在开发第三方插件的时候，我们同样需要注意对与插件写法上的差异。 第三方组件 老版本我们在第三方组件的时候，大致是这样的: // 设置 标签属性 const attr = { // ... } // 设置样式 const style = { // ... } // 设置事件响应 const event = { // ... } // 初始化函数 function init (Weex) { const Component = Weex.Component const extend = Weex.utils.extend // the component's constructor function Hello (data) { Component.call(this, 详情 »
