20171126 前端开发日报

美化表单的CSS高级技巧;如何优雅的编写 JavaScript 代码;CSS3 径向渐变语法及辅助理解案例 10 则;前端防御从入门到弃坑:CSP 变迁;CSS3 radial-gradient径向渐变语法及辅助理解案例10则;JSON: 不要误会,我真的不是 JavaScript 的子集;盒子端 CSS 动画性能提升研究;纯 CSS 实现 12 色彩虹渐变圆环

  1. 美化表单的CSS高级技巧 学习一些新的和旧的选择器,你可以根据需求、有效性和更多的方式来美化表单。 表单一直以来对于CSSer来说都是一件不易的事情,很难用CSS处理好表单要样式。但是有一些很少使用的选择器,却赋予我们不一样的能力,可以让我们很好的控制 input 元素和其周边元素的样式,而且是根据功能来调整不同的样式,这些往往都是通…
  2. 如何优雅的编写 JavaScript 代码 非常全面的编写优雅的 JavaScript 代码指南,从代码风格到工程实践都有介绍。
  3. CSS3 径向渐变语法及辅助理解案例 10 则 本文展示了 10 例常见的 radial-gradient 使用案例,相信一定可以覆盖你的使用场景~
  4. 前端防御从入门到弃坑:CSP 变迁 说了一大堆,黑名单配合 CSP 仍然是最靠谱的防御方式。但,防御没有终点…
  5. CSS3 radial-gradient径向渐变语法及辅助理解案例10则 这篇文章发布于 2017年11月23日,星期四,00:23,归类于css相关。 阅读 48 次, 今日 45 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6521 本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。 一、语法细节记不住怎么办? 实际开发的时候,当要使用 radial…
  6. JSON: 不要误会,我真的不是 JavaScript 的子集 一言蔽之,JavaScript 里没有字符串可以包括 U+2028 和 U+2029 字符.
  7. 盒子端 CSS 动画性能提升研究 不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意。

    基于此,对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以提升的方法。

  8. 纯 CSS 实现 12 色彩虹渐变圆环 本文介绍了几种使用纯 CSS 实现的 12 色彩虹渐变圆环的方法。
  9. 4 张动图解释为什么(什么时候)使用 Redux dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣的文章,然后去阅读全文
  10. 从前端工程师到高级 AR 工程师 这篇文章主要讲述图像追踪的原理,以及如何用 JS+WebRTC 实现带追踪的 AR。
  11. RxJS 实践:排序算法排序可视化 使用 RxJS 可视化各种排序算法的排序过程。
  12. WebUSB:一个网页是如何从你的手机中盗窃数据的 总体来说 WebUSB 是安全的,但是像所有新添加的代码一样,它扩大了代码库,因此也扩大了浏览器的受攻击面。
  13. 二叉搜索树的简明实现(ES5 & ES6) 二叉树 & 二叉搜索树二叉树(Binary Tree)是 n(n >= 0)是个节点的有限集合,集合为空集时,叫作空二叉树;不为空时,由根节点及左子树、右子树组成,左子树、右子树也都是二叉树。 从这个描述,可以看出树的结构与递归之间存在密切关系,
  14. 你不懂的JS学习笔记(作用域和闭包) 引语: 你不懂的JS 这本书github上已经有了7w的star最近也是张野大大给我推荐了一波,阅读过之后感觉对js的基础又有了更好的理解。本来我是从来不这种读书笔记的,但是这本书的内容实在是太多太多哪哪都是重点。所以 也就决定记录以下重要的地方便于以后复习方便 如果有错误,感谢指出 第…
  15. 有关 React 你需要知道的一切 ✨ React patterns, techniques, tips and tricks ✨ 中文版的 react-bits
  16. 手 Q 狼人杀探索之路:React Native 按需加载 最近特别火的狼人杀和最近特别火的 React Native 会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景。
  17. Lyft 的 TypeScript 实践 来自 Lyft 的前端工程师介绍了向 TypeScript 转型的过程,说明 JavaScript 类型系统的重要性、为什么选择 TypeScript 以及他们的一些实践经验。
  18. 利用react/redux开发大型项目的一个基本结构的精简demo 这是一个正式项目删减后的demo, 主要展示了项目的目录结构以及初步的一个架构思路 走上这行,没人带领过我,身边缺少同道交流的人,一直都是一个人孤独摸索,对于项目架构方面如果您有更宝贵的建议,不甚感谢
  19. 区块链的 JavaScript 演示 使用 JavaScript 演示区块链的工作原理。
  20. react native快速上手 本文以mac环境为例,快速搭建react执行环境: 前置条件: node xcode 我使用的环境为: $node -v v6.11.2 $xcodebuild -version Xcode 9.0 Build version 9A235如果这些都有了,那
  21. React之Immutable学习记录(十二) 从问题说起:熟悉 React 组件生命周期的话都知道:调用 setState 方法总是会触发 render 方法从而进行 vdom re-render 相关逻辑,哪怕实际上你没有更改到 Component.state this.state = {count: 0} this.setState({count: 0});// 组件 state 并未被改变,但仍会触发 render 方法 为了避免这…
  22. 从 React 到 React Fiber React Fiber 采用的调度策略让开发者对 React 应用有了更细节的控制。开发者可以通过控制不同类型任务的优先级,提高用户体验和整个应用程序的灵活性。
  23. 使用 ClojureScript 开发浏览器插件 随着 Firefox 57 的到来,之前维护的一个浏览器插件 gooreplacer 必须升级到 WebExtensions 才能继续使用,看了下之前写的 JS 代码,毫无修改的冲动,怕改了这个地方,那个地方突然就 broken 了。因此,这次选择了 cljs,整体下来流程很顺利,除了迁移之前的功能,又加了更多功能,希望能成为最简单易用的重定向插件 :-)…
  24. 开发一个加载 vue 远程代码的组件 在我们的 vue 项目中(特别是后台系统),总会出现一些需要多业务线共同开发同一个项目的场景,如果各业务团队向框架中提供一些私有的展示组件,但是这些组件并不能和框架一起打包,因为框架不能因为某个私有模块的频繁变更而重复构建发布。在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中…
  25. CSS Filter 实现的融合动画效果 通过使用 高斯模糊+对比度 滤镜,实现有趣的融合效果,如随机的火焰燃烧效果。
  26. HTML5新特性之localStorage的使用技巧,不看看你可能真的不知道 前言 我们都知道localStorage与sessionStorage是用于本地存储的,那么我们该如何获取本地存储的大小呢? 如何监听storage事件,并作出后续处理呢? 今天这篇我们就一起来看看吧,文中的算法代码,已经放到了github上了,感兴趣的同学可以自取。 https://github.com/zhouxiongking/article-pages/tree/master/art…
  27. Excel转百度坐标系(AngularJS) 最近由于公司要在百度地图和 Echarts 上展示几千个地理位置,但是老大给我的却是一份几千条中文地址的 excel 表格,刚开始的时候打算新建一个数组进行遍历,在输入了10几个数据之后我放弃了,估计光输入就要花一两天,更不要说还要经常统计哪个省份或者城市的数据,这是非常耗时且不易维护的一种解决方案。后来又…
  28. 为什么 ECMAScript 7 添加了 includes 数组方法 虽然我们可以使用 indexOf() 来模拟 includes() 的行为,但是 indexOf() 在语义上无法清晰的描述这个场景。
  29. 分享17点PC浏览器前端优化策略——网络加载篇 PC端优化的策略很多,如 YSlow(YSlow 是 Yahoo 发布的一款 Firefox 插件,现 Chrome 也可安装,可以对网站的页面性能进行分析,提出对该页面性能优化的建议)原则,或者 Chrome 自带的 Audits 等,总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类、缓存类、图片类、架构协议类等几类,下面逐一…
  30. CSS揭秘读书笔记(1,2章) CSS 揭秘阅读 第一章 1.2 css编码技巧 尽量减少代码重复 DRY line-height:1.5  – 表示基于font-size的1.5倍数关系 易维护性 集合属性拆分成独立属性来写,例如’border…

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

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


关注我

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

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

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