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 由于要兼顾 Androidios 两个平台的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前端日报 订阅精彩文章

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

原文:20200309 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200309.html)