20180322 前端开发日报

2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库;做好准备:新的 V8 即将到来,Node.js 的性能正在改变;别人问你http协议,到底是想问什么?;JS进阶(2):人人都能懂的原型对象;我的HTML会说话——从实用出发,谈谈HTML的语义化;带你了解我喜欢Vue的10个方面;Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库;深入了解HTTP/2的前世今生以及Web性能优化总结

  1. 2018 年 3 月 15 个有意思的 JavaScript 和 CSS 库 Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势。这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因。 BasicScroll 该库使你可以在你的设计中添加 parallax 滚动动画效果。你可以直接在你的 CSS 中使用变量和属性,或者使用 JS 来获得更好的动画效果。它运行非常流畅…
  2. 做好准备:新的 V8 即将到来,Node.js 的性能正在改变 原文地址:GET READY: A NEW V8 IS COMING, NODE.JS PERFORMANCE IS CHANGING. 原文作者:Node.js Foundation 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/go
  3. 别人问你http协议,到底是想问什么? 本文是阅读《图解http》之后的总结,可能会很长。PS:这本书通俗易懂,适合前端工程师阅读,是非常优秀的http入门书籍。 当你看到这篇文章,我默认你已经稍微了解什么是http(超文本传输协议),url(统一资源定位符),
  4. JS进阶(2):人人都能懂的原型对象 凡是搞前端开发的或者玩 JavaScript 的同学都知道,原型对象和原型链是 JavaScript 中最为重要的知识点之一,也是前端面试必问的题目,所以,掌握好原型和原型链势在必行。因此,我会用两篇文章(甚至更多)来分别讲解原型对象以及原型链。 在上一篇文章中,我们详细介绍了构造函数的执行过程以及返回值,如果没有看的…
  5. 我的HTML会说话——从实用出发,谈谈HTML的语义化 即使要多写几行css,也最好让html语义化:与同为人类的程序员沟通,帮助程序员快速掌握当前代码。这一点其实是可以通过注释来实现的,不过用上语义化HTML多多少少可以省点注释,哈哈。 与同为代码构筑的系统(例如残疾人士阅读器以及搜索引擎爬虫等)沟通,帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限,因此需…
  6. 带你了解我喜欢Vue的10个方面 我喜欢 Vue。当我在 2016 年第一次接触它时,也许那时我已经对 JavaScript 框架感到疲劳了,因为我已经具有Backbone、Angular、React 等框架的经验,没有太多的热情去尝试一个新的框架。直到我在 Hacker News 上读到一份评论,其描述 Vue 是类似于“新 jQuery” 的 JavaScript 框架,从而激发了我的好奇心。在那之前,我已…
  7. Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库 Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。 Vant 一、关于 1.0 距离 Vant 首次发布 刚好过去了半年时间,在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议,持续对组件进行打磨、优化,使得 Vant 逐渐成…
  8. 深入了解HTTP/2的前世今生以及Web性能优化总结 HTTP/2的出现,无疑对Web性能的提升带来了巨大的助力,改变了Web开发者优化网站的方式,但之前一直对它处于模糊的状态,只知道一些零零碎碎的知识,周末终于静下心来,从HTTP1开始,找到HTTP/2的存在及其存在必然性,整理了一些内容如下,希望能对有需要的
  9. 小尝试腾讯新闻React同构直出的优化实践 为什么做直出 就是为了“性能”!!! 按照经验来说,直出,能够减少20% – 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。 除此之外,有些特定的业务做直出能够弥补前后端分离带来的SEO问题。像这次选取的腾讯新
  10. JavaScript 五大常见函数 在 JavaScript 中有一些问题会被拿出来经常讨论,这些问题每个人都有不同的思路,想要理解这些问题,最好的方法就是自己实现一遍,话不多说,开始正题。 数组扁平化 数组扁平化有很多方法,但最终最好的方法就是递归,实现一个指定深度的扁平化方法,这样基本的套路都会了解。 function flattenDepth(array, depth…
  11. 前端优化系列 – JS混淆引入性能天坑 前言 现在用户手机性能,浏览器性能,网络性能,越来越好,后端逻辑逐渐向前端转移,前端渲染变得越来越普遍。前端渲染主要依赖JS去完成核心逻辑,JS正变得越来越重要。而JS文件是以源码的形式传输,可以在Chrome Devtools上轻易地被修改和调试。我们一般不希望核心业务逻辑轻易的被别人了解,往往会通过代码混淆的方…
  12. 《50道CSS基础面试题(附答案)》中的答案真的就只是答案吗?背景 想想自己为什么要写这个,难道不是因为这篇《50道CSS基础面试题(附答案)》文章最近被转载的多,比较多而凑热闹蹭热点?显然,肯定是因为这样我才打算写的。而且还有就是,我的公众号也很久没有更新了,微…
  13. 认识并使用 Promise 解决了回调地狱问题,不会导致难以维护; 合并多个异步请求,节约时间。 Promise 有三种状态: Pending Promise 对象实例创建时的初始态; Fulfilled 成功时的状态; Rejected 失败时的状态。 二、使用 Promise: Promise.then():用来指定 Promise 对象的状态改变时要执行的操作。 le…
  14. Vue.js中的computed是如何工作的 建议英文还可以的朋友直接读原版: skyronic.com/blog/vuejs-… ,原文不难。如果有朋友觉得不好理解的话读我这篇也可以,我会在文中有些晦涩的地方加上自己的备注( 用行内代码块表示 )方便理解。这是我个人第一次翻译文章,如果有不对的地方还望指正,谢谢! 正文: 这篇文章,我们通过实现一个简单版的和Vu…
  15. JS异步编程的浅思 最近使用egg写一个node项目时,被它的异步流控制震惊的泪流满面。话不多说,先上代码体验一下。 async function pay() { try { let user = await getUserByDB(); if (!user) { user = await createUserByDB(); } let order = await getOrderByDB(); if (!o…
  16. Vuejs——(5)过渡,动画 进入/离开 & 列表过渡 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如
  17. webpack总结 webpack 总结 前端模块化编程打包工具 可以把模块打包成一个文件,提高访问速度,开发速度,优化用户体验 module.exports 导出 require() 导入 安装 windows: npm install webpack -g mac
  18. Electron-vue开发实战3——跨平台的一些兼容措施 前言 前段时间,我用electron-vue开发了一款跨平台(目前支持Mac和Windows)的免费开源的图床上传应用——PicGo,在开发过程中踩了不少的坑,不仅来自应用的业务逻辑本身,也来自electron本身。在开发这个应用过程中,我学了不少的东西。因为
  19. JSX,了解一下? JSX是神马 书写规范 JSX中的{} 属性 children 防止xss 其它注意事项 JSX 与 单入口 JSX 与 模板引擎的区别 JSX是对真实DOM的描述 JSX是神马 JSX是React中特有的东东,全称 Javascriptのxml
  20. 使用import配合React-Router进行code split title: 使用react-router和import Router进行代码分片 date: 2018-03-19 08:58:50 tags: 翻译 本文由林子翔@理工数传翻译自原文链接 代码分片可以让你把应用分成多个包,使你的用户能逐步加载应用
  21. 从 0 开始学习 Three.js : 场景搭建 什么是三维可视化页面 我们常见的网页,比如掘金、知乎、微博等都是平面的,只有长宽两个维度。三维可视化页面增加了一个新的维度–深度,利用 HTML5 的 WebGL 接口,通过 JavaScript 编程, 在网页中展示三维模型。 三维可视化页面的魅力 三维模
  22. 面向Vue新人:使用Vue写一个图片轮播组件 之前一直都没有认真的写过一个组件。以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作
  23. vue-design 桌面端页面可视化构建程序 使用electron构建的桌面端应用 通过简单的配置引入UI组件库 通过可拖拽、可编辑的组件设计页面 可编辑页面css 保存为.vue文件 保存/导入一个项目 :sparkles: 下载 Windows:百度网盘 Mac: 综述 本项目的初衷有二: 是减少中后台应用的开发成本 通过类axure的功能…
  24. JavaScript 社区由一个库引发的“smoosh门”事件到底怎么回事?原文: #SmooshGate FAQ作者:Mathias Bynens smoosh?!发生了什么?! 一项名为 JavaScript 功能的提案 Array.prototype.flatten 证明与 Web 不兼容。在 Firefox Nightly 中发布该功能会导致至少一个受欢迎的网…
  25. 前端虚拟列表【虚拟卷帘】的实现 书接上文,在之前的 聊聊前端开发中的长列表 中,笔者对「可视区域渲染」的列表进行了介绍,并写了一个简化的例子来展现如何实现。这种列表一般叫做 Virtual List,在本文中会使用「虚拟列表」来指代。在本文中,笔者会把上篇文章中的简化例子一步步强化成一个相对
  26. Reactive 编程(二):代码演示 书接上文 Reactive编程 ,我们继续用真实的代码来解释一些概念。我们会更进一步理解Reactive的与众不同以及它的功能。这些例子很抽象,但能够让我们更进一步理解用到的API和编程风格,真实的感受它的与众不同。我们将会看到Reactive的核心元素,学习如何控制数据流,如果需要的话还会用到后台线程进行处理。 建立…
  27. 从零开始实现一个React(一):JSX和虚拟DOM前言 React是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读React:从零开始实现一个React,从API层面实现React的大部分功能,在这个过程中去探索为什么有虚拟DOM、diff、为什么se…
  28. 来,一起来实现一个符合Promise/A+的Promose(1.0.1版本) Promose是什么?(必要的科普) 为解决异步函数的回调陷阱,开发社区不断摸索,终于折腾出 Promise/A+。它的优势非常显著: 不增加新的语法,可以立刻适配几乎所有浏览器 以队列的形式组织代码,易读好改 捕获异常方案也基本可用 这套方案在迭代中逐步完善,最终被吸收进 ES2015。不仅如此,ES2017 …
  29. 如何使用web3部署以太坊智能合约0x00 起始 大多数人在初学智能合约开发的时候,都是选择使用remix进行合约的开发以及部署。remix是集Solidity的编辑器,编译器,部署于一身的集成开发工具,非常方便,也非常好用。之前一直使用Remix或者truffle…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流