查看详情

前端实用的在线工具推荐系列（一）

caniuse caniuse 是一个在线查看浏览器的对某些特性的支持情况，如果你需要查看某些语法比如新的 ES6 语法 或者 H5 中一些新的 API （web worker, mediaSource等。作者还提供了一些开放的 API 让你将它嵌入到你的页面中。自己之前写过 《在自己的网站或者博客嵌入浏览器支持情况》 有兴趣的可以阅读下。 在线地址 icomoon.io icomoon.io 是一款在线生成 iconfont 或者 SVG sprite 的网站。你可以选择免费或者付费的字体图标（海量），然后会自动生成字体或者 SVG 代码，然后你可以打包下载，非常方便使用，比如自己的网站就采用了它生成的 SVG 图标。 在线地址 uigradients uigradients 是一款在线的编辑或者选择渐变的网站，你可以自定义渐变的色彩也可以从比较流行的渐变中选择一种，你可以获取到它的颜色值以及 css 代码片段。 base64-image base64-image 这个不必多说了，图片进行 Base64 压缩的网站，支持多种格式，包括 详情 »

查看详情

What learned from an open github project

Last year, I have tried to finish an interesting react-native project on my GitHub. React-native-percentage-circle is a component which supports you to define your percent data and draw a circle. And also you can use it as a progress bar and show some data in the circle. It does make a difference to my life. Opearation 详情 »

查看详情

美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式，这时候效果如图: 这个时候我们可以设置它的 border 或者 background 等信息。 如果是 chrome 或者 safari 浏览器，以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式; input[type='range']::-webkit-slider-runnable-track{ background-color: #eee; } 而 firefox 则需要使用 ::-moz-range-track: input[type='range']::-moz-range-track{ background-color: 详情 »

查看详情

《解忧杂货店》

东野圭吾的另一部小说。非常暖的故事，大概人会有烦恼，很大程度上都需要一个人去给出一个指引。如图小说里的故事，很多事情都是冥冥之中，即使作为书信给出的指引，更多还是人很多时候自己都有一个自己事先考虑到的答案。 需要的仅仅是有人可以给予一个肯定。 ⭐️⭐️⭐️⭐️⭐️ 五星推荐~ 这部电影今年已经排成了电影了，贴下预告，国内有望上映~ 详情 »

微日记-20170828

天气晴。北京的天气最低温度已经只有16度，快有秋天的气息。 今日深圳来的大学同学小聚。谈起最多的是迷茫中如何寻找清晰的目标。人会迷茫，但是不要沉迷这种状态，学会打破这样的舒适感，去寻找目标感。 最近 player 项目开始灰度，发现最难的挑战是策略优化。如何提高成功率和缓存优化还有很长的一步路。 今日七夕，不知道为什么去年秀恩爱的人为什么今年都没秀了，😂😂。 详情 »

查看详情

【译】iOS 上 video 标签的 的一些限制

原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发，在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者，iOS 8放宽了这一限制：Safari开始支持 preload="metadata" 属性，允许<video>和<audio> 元素加载足够的媒体数据，以确定媒体的大小，持续时间和可用的轨迹。对于iOS 10中的 Safari，进一步放宽了对静音<video>元素的用户手势要求。 缘由 事实证明，人们很喜欢GIF。但与现代视频编解码器（如H.264）相比，GIF格式的编码方式与编码动画图像非常不具有性价比。我们发现，GIF的带宽可以高达十二倍。 详情 »

查看详情

探测浏览器对 video 和 audio 的兼容性

Detecting browser compatibility for HTML5 video and audio 原文链接 https://www.nomensa.com/blog/2011/detecting-browser-compatibility-html5-video-and-audio 近期接触播放器项目，所以对 video 除了基本的 api 的了解，还需要做好对应的兼容性。Chrome 最早在 11年开始了对于 video 的支持，不同的浏览器当时对于格式支持也是不同。 浏览器对于 video 元素的支持情况* 目前对于 其中对于 MPEG-4/H.264 的支持还是比较广泛的 至于大家比较关心的 webm ，在移动端和 safari 上支持还不是特别理想。 而最新的 HEVC/H.265 的支持情况浏览器方便的支持还是非常不理想。 好在 video 提供了一些列方法让我们能够探测到是否能够对给出的文件进行正常播放。 判断 mimeType 我们需要根据我们视频的类型然后去进行格式的判断以及其获取它的编码格式。 var get_ 详情 »

查看详情

微日记-20170824

昨日处暑。 天气晴~ 已经是八月下旬。昨天提交了工作居住证的材料。今年的一个重要的目标算是要尾声了(如果不出意外)。 最近看了看去年七八月份的日记。发现那个时候的心情动荡很多，自己也不知道是什么缘由开始引起那么摇摆不定的心情。今年相对而言好了很多，自然知道还有那么多目标没完成，也来不得半点的纠结或者畅想。 离职的传染性 昨天看到关于人才的流入率的统计： 无疑切合了自己的实际经历。从去年七月份开始，首先是 LJ 在七月初提出了离职。大概是觉得公司发展偏离预期轨迹（互联网基因缺失），希望换一家公司发展。八月初 Qsir 离职，大概直接原因来源于公司高层的不重视，和对于薪资的不平衡吧。八月底 LX 设计师因为实习期未能达到上面的要求(这块我参与了评判，非常抱歉这么一个决定~)离职。九月中旬，Looper 提出离职，大概是对于后端项目的无力，以及 Alex 加入和他之间交流上的不顺畅，（个人推测还是这个企业已经无法支撑起他对于技术上进一步探索。）。九月下旬，与 Simon 和 Liya 就 word cabulary 项目发生过最为严重的争吵，类似向东走或者向西走。自己随后宣布退出，放弃股权。10月回来的第一周周五，提出 last 详情 »

《那些古怪又让人忧心的问题what if?》

这本书也是今年4月份左右读完的。同样这本书算是科普性质的书籍。只是问题比较夸张，比如我们会问一些看似无厘头的问题，但是解答者会通过科学依据去进行问题的分析。比如其中一些问题: 搅拌加热？ 联邦快递VS互联网 (物理运送数据和网络传输谁更快)？ 疯狂电吹风（在屋子里放着一个电风扇一直吹）？ 这其实背后是物理和天文知识，如果理工科学生读者应该还是会蛮有兴趣的。 ⭐️⭐️⭐️⭐️ 推荐。 详情 »

《最冷最冷的冷门知识》

《最冷最冷的冷门知识》 这本书其实是四月读完的。一直没写，因为这本书算科普性质的，涉及了历史地理科技等领域。虽然有些看似有趣的话题，但本后是能够追本溯源的。当然这些都是有足够的科学依据，并非仅仅博君一笑。正如豆瓣里的推荐: 此书可以拓展屌丝的知识面，可显著改善社交场合中吹牛逼无力、扯淡疲软等症状，在一定程度上提高了与白富美谈笑风生的几率，熟读此书后你甚至可以像谢耳朵那样在各种场合借题发挥，最终遭到羞愤难当的众屌丝群殴。 ⭐️⭐️⭐️⭐️ 推荐。 详情 »