20170511 前端开发日报

15 个有趣的 JSCSS 库(2017 年 5 月);HTTP 缓存策略解析;JS框架 – 收藏集 – 掘金;Vue SPA(单页应用)首屏优化实践;基于 Vue JS, Webpack 以及 Material Design 的渐进式 web 应用(一);React+AntD 后台管理系统解决方案;JavaScript 面向对象笔记和总结;从零开始搭建vue-ssr系列之二:Client端渲染以及webpack2+vue2踩坑之旅

  1. 15 个有趣的 JS 和 CSS 库(2017 年 5 月) 时光飞逝, 每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月,又准备了哪些优秀的 Web 开发资源呢?前端儿,一起来瞧瞧吧! 1. Buefy 这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件,而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件,例如 modals、t...
  2. HTTP 缓存策略解析 做项目的时候遇到过需要将静态资源长期缓存的情况,因为在我们的需求里,最初一个静态资源上传完毕,针对此链接一次发布终生受益——于是乎,是时候研究一波缓存策略了: 我们都知道缓存状态码:304 Not Modified. 然而实际上,命中缓存也不一定是 304 的。 我们这里先要说明 HTTP Response 头中的cache...
  3. JS框架 - 收藏集 - 掘金关于js、jq零碎知识点 - 掘金写在前面: 本文都是我目前学到的一些比较零碎的知识点,也是相对偏一点的知识,这是第二篇。前后可能没有太大的相关性,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有...
  4. Vue SPA(单页应用)首屏优化实践 1.代码压缩(gzip) 如果你用的是nginx服务器,请修改配置文件(其他web server 类似): sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入: gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types gzip 开启或者关闭 gzip 模块,这里使用 on 表...
  5. 基于 Vue JS, Webpack 以及 Material Design 的渐进式 Web 应用(一) 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应用 译者:neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT 渐进式web应用是大势所趋。越来越多的大公司...
  6. React+AntD 后台管理系统解决方案 重点基于 React+AntD 以及多个模块,集成了一套完整的 react 后台管理系统,是一套很不错的可供参考的解决方案 —— 由叶子浩浩分享
  7. JavaScript 面向对象笔记和总结 自己总结的参考的 JavaScript 面向对象笔记 —— 由XanderHank分享
  8. 从零开始搭建vue-ssr系列之二:Client端渲染以及webpack2+vue2踩坑之旅要实现什么效果? 咱们就实现一个项目中常用并且简单的效果:通过ajax从后端取数据,前端做展示,点列表的每一项,alert出这一项的标题 效果如下: Client端的渲染? 因为Client端的渲染是ssr渲染的一部分,这一...
  9. 100 行代码理解 JavaScript 原型 通过实例代码描述类,实例和原型的相互关系 —— 由lIlIIlllIlIIIlII分享
  10. 微软推荐的 TypeScript-Vue-Starter 微软推荐的 Vue 和 Typescript 模板, 有详细得使用说明 —— 由HopeFE分享
  11. 给熟悉jquery,想使用vue的人的页面搭建建议一直主要用vue做spa,有工程化,可以受益于ES6语法的高效。但是我们还提供开发服务,这里仅通过样例代码说明梗概。 首先你得有个页面,暂命名为index.html {代码...} 引入需要的jquery,vue.js文件后,建立自己的i...
  12. 遇见未知的 CSS 如果对 CSS 有过疑问,不妨看一看 —— 由zhuimengzi分享
  13. 简介我的 Git Work Flow 重要性 我们从重要性说起。 团队开发中要重视有洁癖的人,这种人往往对糟糕的工作流不断提出意见、对 Git 的使用方式提出要求。如果你的团队中这种人正在不断的被忽视,那么你的团队一定出现了管理混乱、代码质量不高等等等等问题。 统一的工作流程是至关重要的,不管对于哪一个行业的作业来说都一样...
  14. JavaScript 异步与 Promise 实现 在阅读本文之前,你应该已经了解JavaScript异步实现的几种方式:回调函数,发布订阅模式,Promise,生成器(Generator),其实还有async/await方式,这个后续有机会会介绍。本篇将介绍Promise,读完你应该了解什么是Promise,为什么使用Promise,而不是回调函数,Promise怎么使用,使用Promise需要注意什么,以及Promise...
  15. ECMAScript6系列之六:对象的扩展一、属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法;属性名为变量名,属性值为变量的值;属性名为函数名,属性值为函数; 二、属性名表达式 两种方法:标识符作为属性名(obj.foo),表达式作...
  16. js图片加载效果(延迟加载+瀑布流加载)主要做了两种图片加载的效果一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间)另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布...
  17. Vue 源码阅读笔记 第一篇 今天又是一个读书的好天气,我打开电脑,总想做些什么,过了一会儿,却又意兴阑珊, 突然想起 Vue,就想着来学习一下。 我去翻了一番,里面的设计思想着实让我的视野开阔了不少,然后赶紧动手把这些东西记下来,就形成了这一篇文章。 Vue 一共九千多行代码,这只是 Vue 源码开头的一个很小的部分。 我打算专门学习一下 Vu...
  18. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]渐进式web应用是大势所趋。越来越多的大公司开始使用这些技术(比如推特:https://Mobile.twitter.com/)。 想象你可以在地铁中浏览一个web应用,这个应用能够向用户推送通知并且提供实时的数据,以及提供类似于a...
  19. Html5 - 收藏集 - 掘金Emoji简介|阮一峰 - 前端 - 掘金一、含义 Emoji 是可以插入文字的图形符号。 它是一个日语词,e表示"絵",moji表示"文字"。连在一起,就是"絵文字"。 Emoji 在上个世纪90年代,由日本电信商引入服务,最早用于在...
  20. koa和egg项目webpack内存编译和热更新实现背景 在用Node.js+Webpack构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果.这个特性webpack本身是支持的, 而且基于koa也有现成的koa-webpack-hot-middleware 和 koa-webpack-dev-middleware...
  21. JS数组去重!!一篇不怎么靠谱的"深度"水文 前言 数组去重,这是一个老梗了...今天我又拿出来说了...我们在考虑全面一点的情况下,数组去重的实现,比如针对NaN,undefined,{};这其中涉及的知识点挺多,不信跟着走一波;这里不考虑浏览器兼容性这些破问题,因为涉及ES5&6 基础版-只
  22. 构建一个 Cache-aware 的 HTTP/2 Server Push 机制 Server Push 让服务器能够在客户端请求一个资源的时候,预先下发另外一个资源。 —— 由彷梓分享
  23. 2017 年 5 月:15 个有趣的 JS 和 CSS 库 今天,程小狮给大家带来了一些 5 月前端 “新鲜货”,速速来尝鲜吧!喜欢的朋友,不妨点个赞咯。 —— 由IT程序狮分享
  24. ES6:spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7 英文连接:ES6: The spread syntax — A concise way
  25. React 教程 - 2. 学习 JSX React 官方文档翻译 - 2. 学习 JSX —— 由缪运泽分享
  26. #前端开发那些事#【Redux 介绍之概述】详见:Redux介绍之概述 跟随源码理解 Redux.(作者:张歆琳)
    Redux 介绍之概述

  27. #css3#【CSS3 calc()是怎么实现计算】CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。本文分析了calc()的计算使用方法及兼容性 #前端开发博客# ​​​
    CSS3 calc()是怎么实现计算
  28. #前端头条#【前端入门参考】结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。 #前端开发博客# ​​​
    前端入门参考

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

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

原创文章:20170511 前端开发日报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-daily-20170511.html)

发表评论

请登录后发表评论: