最近花了些时间，更新博客的一些样式。说说一些小细节。 火影完结 上周四火影完结了，大概这是自己最喜欢的一部动漫，没有之一。这次博客改版，网站的图标和logo都换成了简版的 卡卡西风格。 去掉了iconfont 这次博客去掉了iconfont，把图标全部换成了svg，svg已经成为了主流，而且自己本来对图标的需求就不是那么大。不过自己还是很喜欢themify 这个字体，设计的很漂亮。 更新了slide 和 navigation 之前的slide是svg曲线过度效果，这次换成了旋转的切页效果，参考地址在这里: https://tympanus.net/Tutorials/SlidingHeaderLayout/layout-multi.html 博客内容后增加了个人的社交站点 主要是页是为了各个站点的互通，还有就是为了尾巴的一些友情链接，可以给朋友的站点留些位置 博客主题依旧是免费试用的: 你可以前往这里下载 Ghost-theme。欢迎反馈。 详情 »
写一些react插件，大家会引入CI集成测试。这样有助于开源项目的质量。尤其引入了karma 进行浏览器的自动测试。 自己写react.js的开源组件的时候用的是 Airbnb Enzyme + Karma的测试环境。这个时候我们需要调用chrome测试，通常我们在 karma.conf.js 指定 browsers 参数为['chrome']。但是在CI的测试环境中。会提示 Cannot load browser "[Chrome]": it is not registered! Perhaps you are missing some plugin? 这个时候需要我们对测试环境做个判断重新指定浏览器，参考如下： const path = require('path'); let browsers = ['Chrome']; // trvis env if (process.env.TRAVIS) { browsers = ['Chrome_travis_ci'] 详情 »
这次修洗衣机，感觉把整个初中学的物理知识差不多都用上了，感觉自己也可以去知乎上回答那个经典的问题：什么事情让你觉得读书真有用？ 3月初和13亮到了新的地方，然后当时没有测试。后面才发现洗衣机不能正常工作。感谢梦一童鞋的帮忙和联系，房东打算换一个，但是自己的好奇心😂拆开了洗衣机，才开始以为只是开关坏了，因为其他开关都是好的。拆下来后，发现主开关下面却是有生锈，洗衣机也确实有些岁月了。 确实这次拆开有些费劲，有些螺丝已经生锈了，然后有螺丝刀一拧，整个螺丝钉大头这边开始出现锈迹脱落，只好后面改用平字螺丝刀。勉强弄出来。当然也有由于生锈弄的特别紧了，搞得我都开始怀疑人生，好歹自己是个男生，这必须得给拧出来，然后换了一个力矩大的落实到，终于弄出来。真的，这颗螺丝弄坏了我两个螺丝刀的梅花头(可拆换)。 拆开了电路板，的却很老。但是好奇心还没有止步。自己搜了下信息，说有可能水位开关和入水阀的问题，于是自己又开始拆了。整个机器的盖子几乎全部都拆下来。 然后一路拆下来，确实最后把继电器和入水阀都拆下来了。结果发觉都没什么问题，自己是真的确定没有阻塞住。 确定电路板问题后，就去淘宝找到了同款相比300多的官方更换，感觉自己这次确实是赚到了。因为淘宝只要45，没错就是45.邮寄过来后，要更换电路板。然而由于生锈，线路的插入开关真的又是紧到怀疑人生。好吧自己连杠杆都弄伤了，终于给拆下来了。 好了，电路板没问题了。打开开关可以洗衣服了。 详情 »
《关于我最喜爱的他》 这本书是去年当当折扣时候送的。至于为什么会选择这本书，原因只有一个，因为其他书没得选了。 简单说说吧，故事都是漫画，所以看着都很快，几十分钟可以搞定(可能看漫画比较快)，不同的作者构建出不同的男主角。从女生角度去看不同的男生的态度。故事有甜有虐，到也没有什么值得留下深刻印象的。反而更加推荐《其实他没那么喜欢你》这本书就超级高能了。男同袍一定要读，揭了男生很多短，女童鞋也应该读读，让你知道如何判断渣男。 而我为什么要读，理由如上，这本书也是上次折扣一起送的。最近和大学同学聊，不知不觉就到了相亲的时候，可是也都还没到完全需要的这样地步。不过自己总结了下关于我室友送的几点还是很有用： 和你聊的来的很少，但是她们不一定会是喜欢，也许只是她们想找个人聊聊而已，其实你只要仔细想想和她聊的内容，看有木有她主动问候起你近况和你小时候的事情。 如果觉得感觉对了，就直接进一步吧，没必要想太多，不要以为你不说，对方就知道。 你喜欢就相处，你不喜欢就不想处。不要老是想 他喜不喜欢你，这是个伪命题。 努力可以，切记用力过度。 两个人喜欢和在一起是很长的一段路，不要想着太重，也不要看得太轻。 详情 »
其实很多时候我们都是fork完别人的代码然后快速提交，然后发一个PR过去就好了。但有的时候我们也会遇到需要长期保持我们fork的项目与fork的源保持一致。粗暴一点的做法，就是删掉当前的repository然后再重新fork一个。当然我们还有更好的方法。 下面用自己fork的react-hot-loader作为例子。自己fork了gaearon的 react-hot-loader,然后自己clone了一个项目在本地。这个时候进入项目，我们可以使用git remote -v可以看到我们的clone源。比如过了几天，对方项目新增了分支或者新的代码，这个时候你希望自己的项目也能够保持与原项目代码进行同步。这个时候我们可以这样做: 1 配置远程的upstream 地址 git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git 而我这里的地址也就是我fork的地址 https://github.com/gaearon/react-hot-loader 2 这个时候你可以执行git fetch upstream 进行对upstram的代码更新。 大概你就能够看到一些更新的信息。 3 进行代码合并 这个时候我们可以用git merge合并我们希望从远程更新后的分支或者主干代码。比如: 参考 configuring-a-remote-for-a-fork Syncing a fork 详情 »
梦想就在眼前，看能否有一颗必胜的心。老是徘徊于此，只能白白的浪费时间，还有整整一年。要用汗水与努力去换取。点滴之行，可以穿石。自己要变得更加冷静，更加执着，不再走似晃似糊的道路，而是一条踏实的道路。 为了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 详情 »
