知行社的前端早讀課 第7期

當一個軟件工程師宣稱他已經(jīng)完成了 90% 的工作,意思是他還需要相同的時間來完成剩下的 10% 的工作。

《用程序?qū)⒁惶斓那岸宋恼掳搓P(guān)鍵字分類》

背景

在這個信息爆炸的時代,每天都會產(chǎn)生大量的信息。那如何快速的知道,某個行業(yè)今天大概發(fā)生了什么,以及找到自己感興趣的呢?

概要

介紹了用程序?qū)⒁惶斓那岸宋恼掳搓P(guān)鍵字分類的實現(xiàn)思路和具體的代碼實現(xiàn)。

閱讀地址: http://www.itdecent.cn/p/0bb5cd5bb567

早讀課第1次推薦自己寫的文章,哈哈哈~

下面是運行程序輸出的結(jié)果:

抓取今天在掘金網(wǎng)上最新發(fā)布的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篇),構(gòu)造函數(shù)(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篇),跳轉(zhuǎn)(1篇),微信小程序(1篇),Webpack(1篇),插件(1篇)。

詳情如下:

標簽:JavaScript

JS不靠譜系列之枚舉出時間段和對應(yīng)的分鐘數(shù)

前言 今天遇到一個需求,是把選擇時間段轉(zhuǎn)為分鐘數(shù)提交上去的; 所以想手動寫個數(shù)組一一映射,提交的時候遍歷下匹配的值提交. 比如 : 00:00 為 0分鐘或者1440分鐘; 00:10為30分鐘; 具體看下面的 效果圖 實現(xiàn)思路 一天的分數(shù)很容易換算出來: 24 * 60 = 1…

閱讀地址: https://juejin.im/post/598c32dcf265da3e3d12557d

JavaScript 專題之如何判斷兩個對象相等

JavaScript 專題系列第十二篇,講解如何判斷兩個參數(shù)是否相等 前言 雖然標題寫的是如何判斷兩個對象相等,但本篇我們不僅僅判斷兩個對象相等,實際上,我們要做到的是如何判斷兩個參數(shù)相等,而這必然會涉及到多種類型的判斷。 相等 什么是相等?在《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 的平凡之路--學習人氣眼中的效果(中)

這一節(jié)簡單的模仿一下人氣眼中的無重疊彈幕效果,也不賣關(guān)子了,下一節(jié)模仿頭部的標簽切換效果 一、簡介 一談到彈幕相信大家多不陌生,平時看直播,那彈幕可是看的很歡啊。 人氣眼中的彈幕可能數(shù)量比較少的原因,是一種不重疊的彈幕。先看一下實現(xiàn)的效果: 無重疊彈幕效果 當你決定看下文之前,…

閱讀地址: https://juejin.im/post/598063335188254ae92091f0

JavaScript專題之jQuery通用遍歷方法each的實現(xiàn)

JavaScript 專題系列第十一篇,講解 jQuery 通用遍歷方法 each 的實現(xiàn) each介紹 jQuery 的 each 方法,作為一個通用遍歷方法,可用于遍歷對象和數(shù)組。 語法為: jQuery.each(object, [callback])回調(diào)函數(shù)擁有兩個參數(shù)…

閱讀地址: https://juejin.im/post/5982837bf265da3e3d123a60

標簽:CSS

CSS入門指南-4:頁面布局

這是《CSS設(shè)計指南》的讀書筆記,用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數(shù)元素它們的默認值通常是 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 組件庫實踐和設(shè)計

現(xiàn)在前端的快速發(fā)展,已經(jīng)讓組件這個模式變的格外重要。對于市面上的組件庫,雖然能滿足大部分的項目,但是一些小型細節(jié)方面和使用方面,或者UI庫存在的一些bug,會讓人很頭疼。 那我們應(yīng)該如何面對解決這些問題。俗話說自己動手豐衣足食。有些組件不用刻意去造。應(yīng)該考慮如何去打造一個快速,兼…

閱讀地址: https://juejin.im/post/598965bd5188256da941872c

基于文本相似度算法,分析 Vue 是抄出來的框架嗎?

本周一篇指摘 Vue 抄襲 Angular 的文章一石激起千層浪。為此,筆者作為中立吃瓜的 React 用戶,分析了 13 個主流前端框架版本上萬個變量的命名風格,應(yīng)用自然語言處理中的文本相似度算法進行了分析,以對這一論點的有效性做出客觀的評價。 思路 在分析書籍抄襲、論文查重等…

閱讀地址: https://juejin.im/post/5985abf9f265da3e345f4f97

標簽:1.0

騰訊發(fā)布 Omix 1.0 - 用 JSX 或 hyperscript 創(chuàng)建用戶界面

Omix 1.0 https://user-gold-cdn.xitu.io/2017/8/8/bbe2ce1c1e7e925005df0f1cc8938374 今天,騰訊正式開源發(fā)布 Omix 1.0, 讓開發(fā)者使用 JSX 或 hyperscript 創(chuàng)建用戶界面。 Gith…

閱讀地址: https://juejin.im/post/59892e5cf265da3e277803c8

騰訊 AlloyCrop 1.0 發(fā)布

寫在前面 AlloyCrop 這個項目是8個月前發(fā)布的,作為AlloyFinger 的典型案例,發(fā)布之后被BAT等其他公司廣泛使用。但是發(fā)布之后,有兩個問題一直沒有抽出時間去解決: 裁剪圖像的分辨率太小,是否可配? pinch雙指放大的時候,放大的中心不是雙指中心,是否可以優(yōu)化?…

閱讀地址: https://juejin.im/post/5981433f6fb9a03c5022783a

標簽:RxJS

[譯] RxJS: 白話 Subjects

原文鏈接: https://netbasal.com/rxjs-subjects-for-human-beings-7807818d4e4d 本文為 RxJS 中文社區(qū) 翻譯文章,如需轉(zhuǎn)載,請注明出處,謝謝合作! 如果你也想和我們一起,翻譯更多優(yōu)質(zhì)的 RxJS 文章以奉獻給大家…

閱讀地址: https://juejin.im/post/5982989e6fb9a03c3a25b371

RxJS入門

RxJS是什么?官方:RxJS 是 Reactive Extensions for JavaScript 的縮寫,起源于 Reactive Extensions,是一個基于可觀測數(shù)據(jù)流在異步編程應(yīng)用中的庫。RxJS 是 Reactive Extensions 在 JavaScri…

閱讀地址: https://juejin.im/post/597fe587518825563e037bd3

標簽:cli

在 vue-cli 腳手架中引用 jQuery、bootstrap 以及使用 sass、less 編寫 css [vue-cli配置入門]

寫在前面: 本文是vue-手摸手教你使用vue-cli腳手架-詳細步驟圖文解析之后,又一篇關(guān)于vue-cli腳手架配置相關(guān)的文章,因為有些文章步驟不夠清晰,當時我引入JQuery、bootstrap的時候頗費了一番功夫,所以本文的步驟會盡量詳細一點。有需要的朋友可以做一下參考,喜…

閱讀地址: https://juejin.im/post/5986f5c8f265da3e0e1053cf

標簽:工程化

【上海線下活動】Web前端工程化架構(gòu)實踐 -- 滬江技術(shù)沙龍

報名鏈接:http://www.huodongxing.com/event/5399668594900 Web前端工程化歷經(jīng)了:2011年的Shell&(YUICompress || Google Closure Compiler);基于Node.js的前端工具浮現(xiàn),2013年G…

閱讀地址: https://juejin.im/post/598bc9625188257d86430dea

標簽:Nuxt

美團點評點餐 Nuxt.js 實戰(zhàn)

一、背景在今年年初我開始接觸vue的時候,就發(fā)現(xiàn)在vue官方文檔中“服務(wù)端渲染”的一節(jié)中提到了Nuxt.js框架,SSR這種方式對于首屏的加載時間優(yōu)化顯而易見,同時還可以方便的進行SEO。美團點評的點餐業(yè)務(wù)中,數(shù)據(jù)平臺因為其數(shù)據(jù)量大的特點,首頁加載時間很長,非常適合進行SSR改造…

閱讀地址: https://juejin.im/post/598aabe96fb9a03c335a8dde

標簽:Alfred

用 Node.js 把玩一番 Alfred Workflow

本文首發(fā)在個人博客:http://muyunyun.cn/posts/4c23be51/ 插件地址(集成Github、掘金、知乎、淘寶等搜索) 作為 Mac 上常年位居神器榜第一位的軟件來說,Alfred 給我們帶來的便利是不言而喻的,其中 workflow(工作流) 功不可沒…

閱讀地址: https://juejin.im/post/598a3203f265da3e213effd8

標簽:ReactNative

ReactNative學習筆記十三之布局詳細解析

又是一周過去了,似乎上周我只更新了一篇文章,最近工作實在太忙,望大家見諒。今天要講的還是布局相關(guān)的,之前已經(jīng)對布局中主要屬性做了介紹,這次,會對布局中其他屬性進行介紹。 alignSelf alignSelf是指相對于父容器,自身的位置,有auto,flex-start,flex…

閱讀地址: https://juejin.im/post/59898948f265da3e282bd030

標簽:Weex

Weex 從入門到放肆圖文視頻教程

文章說明:這篇文章每周更新3節(jié),大約18-20節(jié),所有更新都會在此文章中進行,不新起文章了,所以有追看的小伙伴請收藏或點心。文章不僅有文字和圖片,也有視頻,由于不會在掘金中插入視頻,所以觀看視頻請到我個人博客中觀看。(視頻觀看點擊這里)第01節(jié):課程介紹WEEX是什么?WEEX…

閱讀地址: https://juejin.im/post/597f27fe51882555e95af190

標簽:Angular

解密 Angular WebWorker Renderer (一)

本文主要介紹Angular中的黑科技之WebWorker Renderer,使用Worker線程渲染如何渲染頁面?從源碼的角度切入,帶領(lǐng)帶大家看個究竟。先來做個對比開發(fā)框架版本:Angular 4.x項目地址:Charway/angular-webworker-renderer-…

閱讀地址: https://juejin.im/post/598952a96fb9a03c4300952c

標簽:構(gòu)造函數(shù)

回顧Javascript構(gòu)造函數(shù)

長期更新文章 喜歡的start下 start https://github.com/asd0102433/blog 構(gòu)造函數(shù)已經(jīng)是老生常談的事情了。這里講一些比較基礎(chǔ)的東西。 先看下一個例子 function Book(name) { if (!(this instanceof…

閱讀地址: https://juejin.im/post/598c02e66fb9a03c4e18c2c8

標簽:DOM

如何實現(xiàn)一個基于 DOM 的模板引擎

題圖:Vincent Guth 注:本文所有代碼均可在本人的個人項目colon中找到,本文也同步到了知乎專欄 可能你已經(jīng)體會到了 Vue 所帶來的便捷了,相信有一部分原因也是因為其基于 DOM 的語法簡潔的模板渲染引擎。這篇文章將會介紹如何實現(xiàn)一個基于 DOM 的模板引擎(就像…

閱讀地址: https://juejin.im/post/59892b656fb9a03c445ddafe

標簽:Sass

常用 SCSS 總結(jié)(持續(xù)更新)

//伸縮盒(舊) @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的響應(yīng)式擴展.其主要的功能就是利用響應(yīng)式編程的模式來實現(xiàn)JavaScript的異步式編程. 相對于JavaScript中其它的異…

閱讀地址: https://juejin.im/post/5988ad175188250f7e00cd5c

標簽:HTML5

從HTML5與PromiseA+規(guī)范來看事件循環(huán)

寫在最前 本次分享一下從HTML5與PromiseA+規(guī)范來迅速理解一波事件循環(huán)中的microtask 與macrotask。 歡迎關(guān)注我的博客,不定期更新中—— ## 先來看段代碼 setTimeout(function() { console.log('setTimeout1…

閱讀地址: https://juejin.im/post/598c595d6fb9a03c5f0c80e9

標簽:橡皮擦

canvas 基礎(chǔ)系列(一)之實現(xiàn)抽獎刮刮卡(橡皮擦)

筆主最近一個多月以來 “深入“ 研究了 canvas 的實現(xiàn)原理,一口氣讀完了 《HTML5 Canvas 核心技術(shù)》這本書;而這一切以及這篇文章的誕生,都源于筆主公司的一位實習產(chǎn)品經(jīng)理~ 這位實習生擁有剛畢業(yè)時的血氣方剛,以及天馬行空的想象力;他從未考慮過項目的實際需求,以及…

閱讀地址: https://juejin.im/post/59881ced51882525bd3562ab

標簽:文本編輯

人人都會寫的富文本編輯器

這個本來是給 vm-manager 寫的一個富文本編輯器,后來覺得獨立出來維護比較方便,就單獨分離出來放到NPM。之所以說人人都會寫, 是因為這個組件實現(xiàn)起來確實比較簡單,不需要很厲害的Js水平, 基本是對document.execCommand()指令的綁定。在此將過程分享給大…

閱讀地址: https://juejin.im/post/5987c4a66fb9a03c5539cfce

標簽:wepy

深入wepy小程序組件化框架

wepy是一個優(yōu)秀的微信小程序組件化框架,突破了小程序的限制,支持了npm包加載以及組件化方案,并且在性能優(yōu)化方面也下了功夫,不管之后項目是否會使用到,該框架組件化編譯方案都是值得學習和深入的。 本文同步于個人博客 http://www.imhjm.com/article/597

閱讀地址: https://juejin.im/post/5987370e6fb9a03c42430a30

標簽:Canvas

一個少女心滿滿的例子帶你入門 Canvas

canvas入門 本文首發(fā)于我的個人博客:http://cherryblog.site/ github項目地址:https://github.com/sunshine940326/canvasStar 項目演示地址:https://sunshine940326.github.io

閱讀地址: https://juejin.im/post/5986d6e1f265da3e241e8cdb

標簽:AE

用視頻軟件AE + bodymovin制作網(wǎng)頁動畫

我們知道,做動畫有多種形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的屬性形成動畫。我們經(jīng)常使用CSS做一些比較簡單的動畫,像過度、加載的動畫,對于一些比較復雜的,可能會做成gif,或者是用Canvas,使用Canvas的控制粒度可以很細,同…

閱讀地址: https://juejin.im/post/5986d4575188256dcf65cd5a

標簽:React

聊聊 React Router v4 的設(shè)計思想

React Router v4 發(fā)布已經(jīng)有幾個月了,但好像并沒有得到太多人的青睞,大家(包括我們團隊自己)還是習慣使用v2、v3版本。這一方面是因為v4版本是一次破壞性的升級,從v2、v3 升級到v4,必需要大量重寫原有的路由相關(guān)的代碼,對于已經(jīng)穩(wěn)定的項目,一般是不會輕易嘗試這種…

閱讀地址: https://juejin.im/post/5986d1456fb9a03c3f405bd2

標簽:API

捋一捋容易被忽略的API用法

Date 獲取某月的天數(shù) 下一月的第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 可以快速創(chuàng)建 vue 項目,vue-cli很好用,但是在最初搭建環(huán)境安裝vue-cli及相關(guān)內(nèi)容的時候,對一些人來說是很頭疼的一件事情,本人在搭建vue-cli的項目環(huán)境的時候也是踩了相當多的坑,特此寫了一篇搭建環(huán)境的教程,每一步盡量詳細解析。需…

閱讀地址: https://juejin.im/post/597eee92f265da3e2e56e37c

標簽:Node.js

帶你用 Vue 全家桶和 Node.js 完成一個聚合應(yīng)用

平時會經(jīng)常瀏覽一些網(wǎng)站充電,但是老是需要切換網(wǎng)站也很麻煩,所以就有了做這個小項目的想法。通過爬蟲抓取一些網(wǎng)站,然后整合在一個應(yīng)用中。雖然是個簡單應(yīng)用,但是五臟六腑俱全,適合 Vue 的新手學習。 項目地址 項目技術(shù)棧 Vue 全家桶 語言:ES6 UI:這里使用了Element…

閱讀地址: https://juejin.im/post/59857c616fb9a03c5c6ffa91

標簽:canvas

基于canvas實現(xiàn)波浪式繪制圖片

寫在最前 本次的分享是一個基于canvas的更新圖片特效實現(xiàn)。其中主要涉及canvas中g(shù)etImageData()、putImageData()、toDataURL()方法的使用。效果請看下面。 歡迎關(guān)注我的博客,不定期更新中—— PS:請在本地服務(wù)器中打開頁面,因谷歌瀏覽器中…

閱讀地址: https://juejin.im/post/598471e3f265da3e2a2f8147

標簽:自制

自制前端框架之依賴追蹤器

依賴追蹤機制是 Vue 的核心之一,那么依賴追蹤算法如何工作呢?在 30 行內(nèi)我們就能實現(xiàn)它?? Reactive 基礎(chǔ) 說起依賴追蹤,就不能不提數(shù)據(jù)綁定的概念。前端最常見的重復勞動之一就是把數(shù)據(jù)綁定到 HTML 模板上,這時數(shù)據(jù)綁定能夠?qū)崿F(xiàn)數(shù)據(jù)更新時模板的自動更新。簡單的三行偽…

閱讀地址: https://juejin.im/post/5982e6bc5188253d7821e8f9

標簽:model

v-model指令在組件中怎么玩

作者:孫輝,美團金融前端團隊成員。15年畢業(yè)加入美團,相信技術(shù),更相信技術(shù)只是大千世界里知識的一種,個人博客: https://sunyuhui.com 備注:文章內(nèi)容和案例均基于Vue2(具體版本為Vue2.3.4) 筆者最近在寫組件的時候,遇到了 v-model 的使用問題…

閱讀地址: https://juejin.im/post/598bf7a3f265da3e252a1d6a

標簽:跳轉(zhuǎn)

關(guān)于購物車下單-訂單跳轉(zhuǎn)及返回問題解決方案

問題描述: 通過商品或者購物車進入下單頁面 下單頁面確認信息 提交訂單 進入訂單頁面 在訂單頁面點擊返回按鈕 返回至下單頁面 導致的問題: 在下單頁面 如果是購物車中的商品 因為購物車中商品已經(jīng)提交訂單了,所以會提示購物車信息無效 解決方案: 第一種解決方案: 如果是通過下單頁進…

閱讀地址: https://juejin.im/post/59805735f265da3e1f54a14c

標簽:微信小程序

微信小程序開發(fā)深入解讀

下面結(jié)合開發(fā)文檔以及個人開發(fā)經(jīng)驗對微信小程序關(guān)鍵部分進行解讀(不是入門教程,具體入門讀者可以看官網(wǎng)),希望看完的讀者對微信小程序有大概的認識或者有所啟發(fā)。 本文同步于個人博客 http://www.imhjm.com/article/5971c1cc7dd03248a2e8d57

閱讀地址: https://juejin.im/post/597fd242f265da3e142a3115

標簽:Webpack

學習 webpack 前,你需要了解的那些概念

wepback作為前端最熱門的打包管理工具之一,學習一下是很有必要的,關(guān)于webpack的學習教程很多,并且官方也有對應(yīng)的中文文檔,所以本篇文章不再講解如何使用webpack,而是重點講解學習webpack前需要了解的一些概念。 什么是webpack 關(guān)于什么是webpack,…

閱讀地址: https://juejin.im/post/597f508f5188255694568924

標簽:插件

基于 Vue.js 的消息氣泡插件

之前介紹了一款基于vue的文本折行顯示組件ellipisis-plus,今天介紹一款仿照QQ消息氣泡的插件vue-bubble,演示地址在這里。 仿照QQ消息氣泡想法的起源是來自掘金的安卓小伙伴們,看到他們在安卓平臺實現(xiàn)了這種效果,所以想遷移到web上。在這里要感謝他們。 先放張…

閱讀地址: https://juejin.im/post/598832486fb9a03c594587fd

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容