20200309 前端开发日报

CSS Color、Media Queries、Transforms、Conditional Rules；阿里云服务器部署个人网站(nodejs + mongodb)；一起来看看Babel做了什么；精读《结合 React 使用原生 Drag Drop API》；从零起步，真正理解Javascript回调函数；JS-Web-API（一）：DOM与BOM；如何在JavaScript中使用顶级Await；Web 中文字体处理总结

1. CSS Color、Media Queries、Transforms、Conditional Rules W3C CSS 工作组发布四份规范的首个公开工作草案：CSS Color Module Level 5、Media Queries Level 5、CSS Transforms Module Level 2、CSS Conditional Rules Module Level 4。
2. 阿里云服务器部署个人网站(nodejs + mongodb)更多文章 购买阿里云服务器，选择操作系统，我选的 ubuntu 在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登陆用） 选择远程连接->VNC，会弹出一个密码，记住它，以后远程连接要用 …
3. 一起来看看Babel做了什么在进行Webpack或者Rollup配置的时候，难免会进行Babel的相关配置，因为代码中往往会使用比较新的JS语言的特性，然而可能运行环境并不支持这些特性，这个时候就需要Babel去帮助实现转换。
4. 精读《结合 React 使用原生 Drag Drop API》 作者通过 HTML5 的拖拽 API，结合 React 一些特殊语法，聊了下基于 React 的拖拽方案，短小精悍。
5. 从零起步，真正理解Javascript回调函数总听到这么一个词语：回调函数。对于它的了解，只知道在微信的网页授权用到了回调，以及在Angular中可以用观察者模式进行.subscribe订阅，但对于它原理的理解，却是一团浆糊。直到昨天开会时，突然被问到回调函数…
6. JS-Web-API（一）：DOM与BOM const div1 = document.getElementById(‘div1’) // 获取一个元素 const divList = document.getElementsByTagName(‘div’) // 获取一个元素集合 const containerList = document.getElementsByClassName(‘.container’) // 集合 const pList = document.querySelectorAll(‘p’) // 集合 复制代码 DOM节点的property cons…
7. 如何在JavaScript中使用顶级Await 原文地址： https://medium.com/javascript-in-plain-english/javascript-top-level-await-in-a-nutshell-4e352b3fc8c8 原文标题：How the new ‘Top Level Await’ feature works in JavaScript 在以前，为了使用await，必须在async中使用。这意味着，你不能在其他自然函数中使用await。顶级的await可以让模块表现…
8. Web 中文字体处理总结 本文介绍了在开发字体预览功能时遇到的问题和解决方案。
9. angular文件上传进度显示在本周，潘老师要求对文件上传功能进行一下修改，要求弹出一个弹窗并显示上传进度，开始的时候想着还觉得这是个挺高级的功能，现在才发现前人又一次帮我们铺好了路。
10. 前端使用karma+mocha+babel+istanbul进行单元测试覆盖 先看看项目结构 这是一个vue项目，其中project位于当前项目的根目录下。 废话不多说，先上配置文件 karma.conf.js const webpackConfig = require(‘./build/webpack.test.conf’); module.exports = function karmaConfig (config) { config.set({ browsers: , frameworks: [‘moch…
11. 前端高级进阶：如何更好地优化打包资源 这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，可以从我的 github repo shfshanyue/blog 中找到，如果点进去的话可以捎带~点个赞~，如果没有点进去的话，那就给这篇文章点个赞。。今天的文章开始了 本篇文章地址在 前端工程化系列 …
12. 教你轻松搞定javascript中的正则 1 正则表达式概述 1.1 什么是正则表达式 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在Javascript中，正则表达式也是对象。 正则表通常被用来检索，替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入中文（匹配）。此外，正则表…
13. 开源 | Gitea：一键部署的自助 Git 服务 (Golang) 更多 GitHub 开源项目 项目介绍 Gitea 的首要目标是创建一个极易安装，运行非常快速，安装和使用体验良好的自建 Git 服务。 我们采用 Go 作为后端语言，这使我们只要生成一个可执行程序即可。并且他还支持跨平台，支持 Linux, macOS 和 Windows 以及各种架构，除了 x86，amd…
14. VUE实现Studio管理后台（五）：手风琴式折叠组件（Accordion） 作为一个有目标的人（目标是做一个好用的Bootstrap可视化编辑器，第一个版本已经实现，演示地址： https://vular.cn/rxeditor/ ，代码地址： https://github.com/vularsoft/rxeditor ），工作比较积极，思维也比较活跃，睡眠相对较少。今早6:30就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下： …
15. mongoose-面向对象操作mongodb的Nodejs框架
16. vue前端项目开发环境搭建并用npm方式运行 1.下载node.js http://nodejs.cn/download/ 推荐下载 .mis安装包，下一步下一步… 安装完后，通过cmd控制台输入node -v弹出版本号即成功 2.通过node.js中内置的npm（包/依赖）插件来下载其他开发所需的环境 注意：如设置了代理限制，可通过cmd控制台输入 npm config set proxy= http: //代理…
17. 开发一个 React Loading 组件一直都是用的第三方库的loading组件(ant-design/antd-mobil)，最近一个项目需要用到loading，自己开发了下，总结如下：
18. 深入了解JavaScript执行过程（JS系列之一） JavaScript 执行过程分为两个阶段，编译阶段和执行阶段。在编译阶段 JS 引擎主要做了三件事：词法分析、语法分析和代码生成；编译完成后 JS 引擎开始创建执行上下文（ JavaScript 代码运行的环境），并执行 JS 代码。 编译阶段 对于常见编译型语言（例如： Java ）来说，编译步骤分为：词法分析 -> 语法分析 -&…
19. 基于face-api.js的人脸实时跟踪 疫情期间，公司选择让员工进行远程办公，却又难以监督员工保证他们的工时。所以老板想出了通过摄像头配合人脸识别算法，计算一天内员工在电脑面前的时间占比。 项目的Github地址 通过浏览器开启摄像头 这部分代码是在网上找的，需要兼容多种浏览器： if (navigator.mediaDevices === undefined) { navigator…
20. 【JS】形象生动的观察者和发布订阅模式观察者模式 {代码…} 发布订阅者模式 {代码…} 最大区别 发布订阅者模式需要有一个调度中心 观察者模式可以直接让observer观察到object
21. 15+ JS简写骚操作，让你的代码“秀”起来 译者：王二狗 博客：掘金、 思否 、 知乎 、 简书 、 CSDN 点赞再看，养成习惯，你们的支持是我持续分享的最大动力:kissing_heart: 原文链接： www.sitepoint.com/shorthand-j… 三元操作符 使用三元操作符可以让你的 if…else 多行语句变成一行 简化前： const x = 20; let answer; i…
22. Nodejs调试指南
23. Vuecli2-TabBar封装实现 我给大家分享的是用前端框架vuejs来实现tabbar组件的封装 —— 第一次写文章，写得不好请见谅。 1.首先，为什么要实现tabbar组件的封装呢？ 是因为很多大部分的移动程序都是采用了tabber这种模式的组件，导致了tabber的使用频率特别高，为了方便起见，封装tabber组件，大大解决了时间，每次写项目需要用到tabbar时，直…
24. Node.js CLI 工具最佳实践 原文链接 这是一个关于如何构建成功的、可移植的、对用户友好的Node.js 命令行工具（CLI）最佳实践的集合。 为什么写这篇文章？ 一个糟糕的 CLI 工具会让用户觉得难用，而构建一个成功的 CLI 需要密切关注很多细节，同时需要站在用户的角度，创造良好的用户体验。要做到这些特别不容易。 在这个指南中，我列出了在…
25. 聊一聊JavaScript的诞生和发展 JavaScript的诞生相对于HTML（1991年）和CSS（1993年）要晚一点，它是在1995年由一名美国程序员发明出来的，这名程序员叫布兰登·艾克（Brendan Eich），就是下面这位，我们暂且叫他布兰登大叔。 那么，一开始呢，布兰登大叔是研究物理的，后来才转行学习了计算机科学，最终呢在美国伊利诺伊大学香槟…
26. 一文道尽软件架构及前端架构演进 “软件架构总是伴随着业务功能的发展、系统稳定性、并发性不断发展而不断演进的。结合业务发展的规模，人员的能力，找到最适合你的架构才是最好的架构设计。”
27. flutter webView 使用以及与 js 互操作 仓库地址： github.com/lzyprime/fl… git clone -b flutter_webview_demo https://github.com/lzyprime/flutter_demos.git 复制代码 插件： webview_flutter ， 目前版本：^0.3.19+9 由于要兼顾 Android 和 Ios 两个平台的webView, js 调用native时无法直接返回数据，所以通…
28. 前端进阶十日谈 月影大大前端进阶课程中的全部例子代码。已 star~
29. Vue Router 实现动态路由和常见问题解决方案；17 个场景，带你入门 CSS 布局实现步骤 通过 vue-cli 脚手架工具， 初始化项目， 命名为test_project； 在 components 目录下创建 Header.vue 组件、 List.vue 组件、 Recommend.vue 组件； 在 src 目录先新建 page 文件夹， 在 page 文件夹下…
30. 爱奇艺云剪辑 Web 端的技术实现 “通过结构化的代码分层、严格的流程控制、精细的交互设计，利用 Web 技术实现了复杂的音视频编辑。随着 Web 技术的不断发展与完善，其性能与交互也将越来越接近甚至超越桌面程序。”
31. github项目添加Travis机器人但我们每次写完单元测试都只是跑自己写的测试，而且往往在一个很大的项目中跑一边单元测试要很长时间，而且跑单元测试非常占资源，会很卡。

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多