当一个软件工程师宣称他已经完成了 90% 的工作，意思是他还需要相同的时间来完成剩下的 10% 的工作。
《用程序将一天的前端文章按关键字分类》
背景
在这个信息爆炸的时代，每天都会产生大量的信息。那如何快速的知道，某个行业今天大概发生了什么，以及找到自己感兴趣的呢？
概要
介绍了用程序将一天的前端文章按关键字分类的实现思路和具体的代码实现。
阅读地址： http://www.jianshu.com/p/0bb5cd5bb567
早读课第1次推荐自己写的文章，哈哈哈~
下面是运行程序输出的结果:
抓取今天在掘金网上最新发布的50篇前端文章，概要：JavaScript(5篇),CSS(2篇),Vue(2篇),1.0(2篇),RxJS(2篇),cli(1篇),工程化(1篇),Nuxt(1篇),Alfred(1篇),ReactNative(1篇),Weex(1篇),Angular(1篇),构造函数(1篇),DOM(1篇),Sass(1篇),初识(1篇),HTML5(1篇),橡皮擦(1篇),文本编辑(1篇),wepy(1篇),Canvas(1篇),AE(1篇),React(1篇),API(1篇),Vue.js(1篇),Node.js(1篇),canvas(1篇),自制(1篇),model(1篇),跳转(1篇),微信小程序(1篇),Webpack(1篇),插件(1篇)。
详情如下：
标签：JavaScript
JS不靠谱系列之枚举出时间段和对应的分钟数
前言 今天遇到一个需求,是把选择时间段转为分钟数提交上去的; 所以想手动写个数组一一映射,提交的时候遍历下匹配的值提交. 比如 : 00:00 为 0分钟或者1440分钟; 00:10为30分钟; 具体看下面的 效果图 实现思路 一天的分数很容易换算出来: 24 * 60 = 1…
阅读地址: https://juejin.im/post/598c32dcf265da3e3d12557d
JavaScript 专题之如何判断两个对象相等
JavaScript 专题系列第十二篇，讲解如何判断两个参数是否相等 前言 虽然标题写的是如何判断两个对象相等，但本篇我们不仅仅判断两个对象相等，实际上，我们要做到的是如何判断两个参数相等，而这必然会涉及到多种类型的判断。 相等 什么是相等？在《JavaScript专题之去重》…
阅读地址: https://juejin.im/post/598a701b6fb9a03c5b04bb14
翻译 | 一行 JavaScript 代码的逆向工程
原文地址：Reverse Engineering One Line of JavaScript 原文作者：Alex Kras 译者：李波 校对者：冬青、小萝卜 几个月前，我看到一个邮件问：有没有人可以解析这一行 JavaScript 代码 <pre id=p><script>n…
阅读地址: https://juejin.im/post/5988411251882526185d634a
JS 的平凡之路--学习人气眼中的效果（中）
这一节简单的模仿一下人气眼中的无重叠弹幕效果，也不卖关子了，下一节模仿头部的标签切换效果 一、简介 一谈到弹幕相信大家多不陌生，平时看直播，那弹幕可是看的很欢啊。 人气眼中的弹幕可能数量比较少的原因，是一种不重叠的弹幕。先看一下实现的效果： 无重叠弹幕效果 当你决定看下文之前，…
阅读地址: https://juejin.im/post/598063335188254ae92091f0
JavaScript专题之jQuery通用遍历方法each的实现
JavaScript 专题系列第十一篇，讲解 jQuery 通用遍历方法 each 的实现 each介绍 jQuery 的 each 方法，作为一个通用遍历方法，可用于遍历对象和数组。 语法为： jQuery.each(object, [callback])回调函数拥有两个参数…
阅读地址: https://juejin.im/post/5982837bf265da3e3d123a60
标签：CSS
CSS入门指南-4：页面布局
这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级…
阅读地址: https://juejin.im/post/598c4d93f265da3e2c70fbc0
[译] 渐进增强的 CSS 布局：从浮动到 Flexbox 到 Grid
原文地址：Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者：Manuel Matuzović 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/go…
阅读地址: https://juejin.im/post/5987acfd6fb9a03c502288f3
标签：Vue
Vue 组件库实践和设计
现在前端的快速发展，已经让组件这个模式变的格外重要。对于市面上的组件库，虽然能满足大部分的项目，但是一些小型细节方面和使用方面，或者UI库存在的一些bug，会让人很头疼。 那我们应该如何面对解决这些问题。俗话说自己动手丰衣足食。有些组件不用刻意去造。应该考虑如何去打造一个快速，兼…
阅读地址: https://juejin.im/post/598965bd5188256da941872c
基于文本相似度算法，分析 Vue 是抄出来的框架吗？
本周一篇指摘 Vue 抄袭 Angular 的文章一石激起千层浪。为此，笔者作为中立吃瓜的 React 用户，分析了 13 个主流前端框架版本上万个变量的命名风格，应用自然语言处理中的文本相似度算法进行了分析，以对这一论点的有效性做出客观的评价。 思路 在分析书籍抄袭、论文查重等…
阅读地址: https://juejin.im/post/5985abf9f265da3e345f4f97
标签：1.0
腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面
Omix 1.0 https://user-gold-cdn.xitu.io/2017/8/8/bbe2ce1c1e7e925005df0f1cc8938374 今天，腾讯正式开源发布 Omix 1.0， 让开发者使用 JSX 或 hyperscript 创建用户界面。 Gith…
阅读地址: https://juejin.im/post/59892e5cf265da3e277803c8
腾讯 AlloyCrop 1.0 发布
写在前面 AlloyCrop 这个项目是8个月前发布的，作为AlloyFinger 的典型案例，发布之后被BAT等其他公司广泛使用。但是发布之后，有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太小，是否可配？ pinch双指放大的时候，放大的中心不是双指中心，是否可以优化？…
阅读地址: https://juejin.im/post/5981433f6fb9a03c5022783a
标签：RxJS
[译] RxJS: 白话 Subjects
原文链接: https://netbasal.com/rxjs-subjects-for-human-beings-7807818d4e4d 本文为 RxJS 中文社区 翻译文章，如需转载，请注明出处，谢谢合作！ 如果你也想和我们一起，翻译更多优质的 RxJS 文章以奉献给大家…
阅读地址: https://juejin.im/post/5982989e6fb9a03c3a25b371
RxJS入门
RxJS是什么？官方：RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流在异步编程应用中的库。RxJS 是 Reactive Extensions 在 JavaScri…
阅读地址: https://juejin.im/post/597fe587518825563e037bd3
标签：cli
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面： 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考，喜…
阅读地址: https://juejin.im/post/5986f5c8f265da3e0e1053cf
标签：工程化
【上海线下活动】Web前端工程化架构实践 -- 沪江技术沙龙
报名链接：http://www.huodongxing.com/event/5399668594900 Web前端工程化历经了：2011年的Shell＆(YUICompress || Google Closure Compiler)；基于Node.js的前端工具浮现，2013年G…
阅读地址: https://juejin.im/post/598bc9625188257d86430dea
标签：Nuxt
美团点评点餐 Nuxt.js 实战
一、背景在今年年初我开始接触vue的时候，就发现在vue官方文档中“服务端渲染”的一节中提到了Nuxt.js框架，SSR这种方式对于首屏的加载时间优化显而易见，同时还可以方便的进行SEO。美团点评的点餐业务中，数据平台因为其数据量大的特点，首页加载时间很长，非常适合进行SSR改造…
阅读地址: https://juejin.im/post/598aabe96fb9a03c335a8dde
标签：Alfred
用 Node.js 把玩一番 Alfred Workflow
本文首发在个人博客：http://muyunyun.cn/posts/4c23be51/ 插件地址(集成Github、掘金、知乎、淘宝等搜索) 作为 Mac 上常年位居神器榜第一位的软件来说，Alfred 给我们带来的便利是不言而喻的，其中 workflow(工作流) 功不可没…
阅读地址: https://juejin.im/post/598a3203f265da3e213effd8
标签：ReactNative
ReactNative学习笔记十三之布局详细解析
又是一周过去了，似乎上周我只更新了一篇文章，最近工作实在太忙，望大家见谅。今天要讲的还是布局相关的，之前已经对布局中主要属性做了介绍，这次，会对布局中其他属性进行介绍。 alignSelf alignSelf是指相对于父容器，自身的位置，有auto,flex-start,flex…
阅读地址: https://juejin.im/post/59898948f265da3e282bd030
标签：Weex
Weex 从入门到放肆图文视频教程
文章说明：这篇文章每周更新3节，大约18-20节，所有更新都会在此文章中进行，不新起文章了，所以有追看的小伙伴请收藏或点心。文章不仅有文字和图片，也有视频，由于不会在掘金中插入视频，所以观看视频请到我个人博客中观看。(视频观看点击这里)第01节：课程介绍WEEX是什么？WEEX…
阅读地址: https://juejin.im/post/597f27fe51882555e95af190
标签：Angular
解密 Angular WebWorker Renderer (一)
本文主要介绍Angular中的黑科技之WebWorker Renderer，使用Worker线程渲染如何渲染页面？从源码的角度切入，带领带大家看个究竟。先来做个对比开发框架版本：Angular 4.x项目地址：Charway/angular-webworker-renderer-…
阅读地址: https://juejin.im/post/598952a96fb9a03c4300952c
标签：构造函数
回顾Javascript构造函数
长期更新文章 喜欢的start下 start https://github.com/asd0102433/blog 构造函数已经是老生常谈的事情了。这里讲一些比较基础的东西。 先看下一个例子 function Book(name) { if (!(this instanceof…
阅读地址: https://juejin.im/post/598c02e66fb9a03c4e18c2c8
标签：DOM
如何实现一个基于 DOM 的模板引擎
题图：Vincent Guth 注：本文所有代码均可在本人的个人项目colon中找到，本文也同步到了知乎专栏 可能你已经体会到了 Vue 所带来的便捷了，相信有一部分原因也是因为其基于 DOM 的语法简洁的模板渲染引擎。这篇文章将会介绍如何实现一个基于 DOM 的模板引擎（就像…
阅读地址: https://juejin.im/post/59892b656fb9a03c445ddafe
标签：Sass
常用 SCSS 总结（持续更新）
//伸缩盒（旧） @mixin box{display: -webkit-box;display: box;} @mixin pack-c{@include box;-webkit-box-pack:center;box-pack:center;} @mixin align-c{…
阅读地址: https://juejin.im/post/59891d1e51882525d45c05d3
标签：初识
初识RxJS
什么是Rx.JS? Rx.JS是英文 Reactive Extensions for JavaScript 的缩写.翻译成中文就是:JavaScript的响应式扩展.其主要的功能就是利用响应式编程的模式来实现JavaScript的异步式编程. 相对于JavaScript中其它的异…
阅读地址: https://juejin.im/post/5988ad175188250f7e00cd5c
标签：HTML5
从HTML5与PromiseA+规范来看事件循环
写在最前 本次分享一下从HTML5与PromiseA+规范来迅速理解一波事件循环中的microtask 与macrotask。 欢迎关注我的博客，不定期更新中—— ## 先来看段代码 setTimeout(function() { console.log('setTimeout1…
阅读地址: https://juejin.im/post/598c595d6fb9a03c5f0c80e9
标签：橡皮擦
canvas 基础系列（一）之实现抽奖刮刮卡（橡皮擦）
笔主最近一个多月以来 “深入“ 研究了 canvas 的实现原理，一口气读完了 《HTML5 Canvas 核心技术》这本书；而这一切以及这篇文章的诞生，都源于笔主公司的一位实习产品经理~ 这位实习生拥有刚毕业时的血气方刚，以及天马行空的想象力；他从未考虑过项目的实际需求，以及…
阅读地址: https://juejin.im/post/59881ced51882525bd3562ab
标签：文本编辑
人人都会写的富文本编辑器
这个本来是给 vm-manager 写的一个富文本编辑器，后来觉得独立出来维护比较方便，就单独分离出来放到NPM。之所以说人人都会写, 是因为这个组件实现起来确实比较简单，不需要很厉害的Js水平, 基本是对document.execCommand()指令的绑定。在此将过程分享给大…
阅读地址: https://juejin.im/post/5987c4a66fb9a03c5539cfce
标签：wepy
深入wepy小程序组件化框架
wepy是一个优秀的微信小程序组件化框架，突破了小程序的限制，支持了npm包加载以及组件化方案，并且在性能优化方面也下了功夫，不管之后项目是否会使用到，该框架组件化编译方案都是值得学习和深入的。 本文同步于个人博客 http://www.imhjm.com/article/597…
阅读地址: https://juejin.im/post/5987370e6fb9a03c42430a30
标签：Canvas
一个少女心满满的例子带你入门 Canvas
canvas入门 本文首发于我的个人博客：http://cherryblog.site/ github项目地址：https://github.com/sunshine940326/canvasStar 项目演示地址：https://sunshine940326.github.io…
阅读地址: https://juejin.im/post/5986d6e1f265da3e241e8cdb
标签：AE
用视频软件AE + bodymovin制作网页动画
我们知道，做动画有多种形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画，像过度、加载的动画，对于一些比较复杂的，可能会做成gif，或者是用Canvas，使用Canvas的控制粒度可以很细，同…
阅读地址: https://juejin.im/post/5986d4575188256dcf65cd5a
标签：React
聊聊 React Router v4 的设计思想
React Router v4 发布已经有几个月了，但好像并没有得到太多人的青睐，大家（包括我们团队自己）还是习惯使用v2、v3版本。这一方面是因为v4版本是一次破坏性的升级，从v2、v3 升级到v4，必需要大量重写原有的路由相关的代码，对于已经稳定的项目，一般是不会轻易尝试这种…
阅读地址: https://juejin.im/post/5986d1456fb9a03c3f405bd2
标签：API
捋一捋容易被忽略的API用法
Date 获取某月的天数 下一月的第0天就是当前月的最后一天。 function daysInMonth(year, month) { let date = new Date(year, month + 1, 0); return date.getDate(); } // 注意在…
阅读地址: https://juejin.im/post/5985d7aef265da3e1727b0ab
标签：Vue.js
手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]
写在前面： 使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇搭建环境的教程，每一步尽量详细解析。需…
阅读地址: https://juejin.im/post/597eee92f265da3e2e56e37c
标签：Node.js
带你用 Vue 全家桶和 Node.js 完成一个聚合应用
平时会经常浏览一些网站充电，但是老是需要切换网站也很麻烦，所以就有了做这个小项目的想法。通过爬虫抓取一些网站，然后整合在一个应用中。虽然是个简单应用，但是五脏六腑俱全，适合 Vue 的新手学习。 项目地址 项目技术栈 Vue 全家桶 语言：ES6 UI：这里使用了Element…
阅读地址: https://juejin.im/post/59857c616fb9a03c5c6ffa91
标签：canvas
基于canvas实现波浪式绘制图片
写在最前 本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。 欢迎关注我的博客，不定期更新中—— PS:请在本地服务器中打开页面，因谷歌浏览器中…
阅读地址: https://juejin.im/post/598471e3f265da3e2a2f8147
标签：自制
自制前端框架之依赖追踪器
依赖追踪机制是 Vue 的核心之一，那么依赖追踪算法如何工作呢？在 30 行内我们就能实现它🤓 Reactive 基础 说起依赖追踪，就不能不提数据绑定的概念。前端最常见的重复劳动之一就是把数据绑定到 HTML 模板上，这时数据绑定能够实现数据更新时模板的自动更新。简单的三行伪…
阅读地址: https://juejin.im/post/5982e6bc5188253d7821e8f9
标签：model
v-model指令在组件中怎么玩
作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com 备注：文章内容和案例均基于Vue2（具体版本为Vue2.3.4） 笔者最近在写组件的时候，遇到了 v-model 的使用问题…
阅读地址: https://juejin.im/post/598bf7a3f265da3e252a1d6a
标签：跳转
关于购物车下单-订单跳转及返回问题解决方案
问题描述： 通过商品或者购物车进入下单页面 下单页面确认信息 提交订单 进入订单页面 在订单页面点击返回按钮 返回至下单页面 导致的问题： 在下单页面 如果是购物车中的商品 因为购物车中商品已经提交订单了，所以会提示购物车信息无效 解决方案： 第一种解决方案： 如果是通过下单页进…
阅读地址: https://juejin.im/post/59805735f265da3e1f54a14c
标签：微信小程序
微信小程序开发深入解读
下面结合开发文档以及个人开发经验对微信小程序关键部分进行解读（不是入门教程，具体入门读者可以看官网），希望看完的读者对微信小程序有大概的认识或者有所启发。 本文同步于个人博客 http://www.imhjm.com/article/5971c1cc7dd03248a2e8d57…
阅读地址: https://juejin.im/post/597fd242f265da3e142a3115
标签：Webpack
学习 webpack 前，你需要了解的那些概念
wepback作为前端最热门的打包管理工具之一，学习一下是很有必要的，关于webpack的学习教程很多，并且官方也有对应的中文文档，所以本篇文章不再讲解如何使用webpack，而是重点讲解学习webpack前需要了解的一些概念。 什么是webpack 关于什么是webpack，…
阅读地址: https://juejin.im/post/597f508f5188255694568924
标签：插件
基于 Vue.js 的消息气泡插件
之前介绍了一款基于vue的文本折行显示组件ellipisis-plus，今天介绍一款仿照QQ消息气泡的插件vue-bubble，演示地址在这里。 仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们，看到他们在安卓平台实现了这种效果，所以想迁移到web上。在这里要感谢他们。 先放张…
