20171222 前端开发日报

如何用 CSS 网格快速做出网站原型;ES6 Promise 用法(我见过最简洁优秀的文章);大前端神器安利之 Puppeteer;JSON最强攻略;20171221 前端开发日报;WebSocket之JavaScript例子;javascript打怪升级–把业务逻辑当练习题做;《深入浅出 Webpack》

  1. 如何用 CSS 网格快速做出网站原型简评:CSS 网格模块是创建网站模型的绝佳工具。它是我尝试过的任何其他系统中最快让你体验布局的工具。 我们的网格 我们将从模仿一个经典网站的非常基本的网格开始: 首先,我将解释我们需要的 HTML 和 CSS 代码...
  2. ES6 Promise 用法(我见过最简洁优秀的文章) 一、认识promise对象         FIREFOX 控制台直接输入  Promise      &nbsp
  3. 大前端神器安利之 Puppeteer Puppeteer(中文翻译”木偶”) 是 Google Chrome 团队官方的无界面(Headless)Chrome 工具,它是一个Node库,提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整(非无头)的 Chrome。Chrome素来在浏览器界稳执牛耳,因此,Chrome Headless 必将成为 web 应用自动化测试的行业标杆。使用P...
  4. Json最强攻略 前言 无论是前端解析后端的数据还是做全栈的技术需要,你都可能多少需要知道些json的技术点,从json的标准格式到json的格式转换与传输,再到中转的处理。本文小编与你一起回顾json的最强知识点攻略。 概念 javascript的对象
  5. 20171221 前端开发日报】2018 年你应该知道的 Vue.js 的 11 个组件库;欢迎来到新时代,HTML 5.2 已成为 W3C 新推荐标准;TypeScript, Angular 和移动端的跨平台开发;可能是最全的Vue-TypeScript教程(附实例代码和一键构建工具);css sprites...详情→ ​​​

    20171221 前端开发日报
  6. WebSocket之JavaScript例子 编辑推荐: 本文来自于cnblogs,文章主要用案例说明,WebSocket通讯详细,代码及数据等方面介绍。 一、详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读。从WebSocket...
  7. javascript打怪升级--把业务逻辑当练习题做1.前言 开发项目和出没社区有一段时间了,会遇上一些比较有印象业务需求。这些业务需求,可能是自己开发项目遇上的,可能是在社区看到的业务需求,或者其他情况接触到的需求,但是这些业务需求的实现逻辑都值得一...
  8. 《深入浅出 Webpack》 评价 Webpack 凭借强大的功能与良好的使用体验,已经成为目前最流行,社区最活跃的打包工具,是现代 Web 开发必须掌握的技能之一。作者结合自身的实战经验,介绍了 Webpack 的使用与常见优化方法、并深入讲解了 Webpack 原理与架构,相信各阶段的 Webpack 用户都能通过本书得到启发。 -- LeanClo...
  9. JavaScript异步编程大冒险: Async/Await Async/Await 也就是大家知道的异步函数,它是一个用来控制 JavaScript 异步流程的一个记号。而在很多现代浏览器上也曾实现过这样的设想。它的灵感来源于C# 和 F#,现在 Async/Await 在ES2017已经平稳着陆。 通常我们认为 async function 是一个能返回 Promise 的 function 。你也可以在 async function ...
  10. [译] 10 个常见的 JavaScript Bug 译者按: 安全起见,在开发中我基本不用==。 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 就算最牛的JavaScript开发者也会犯错。有时候导致程序的执行结果和预期...
  11. GitLab+Jenkins+Rsync+PM2实现Node项目的持续集成与自动部署前言 最原始的软件开发流程是,在本地搭建好环境,进行开发测试,然后去服务器上搭建环境,手动上传代码,运行测试,然后启动服务。实际上,近些年来出现了很多的工具,使得这些步骤可以自动化,大大降低人工出错...
  12. Javascript 之中的 class/构造函数/工厂函数 到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立。现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数。他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择。 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新...
  13. 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式 这两天看了下 react 的文档,准备搭建一套适用的基本 react 开发架子。 由于我一直使用的是 vue ,很少使用过 react 进行项目的开发,因此此构建主要参考的是 vue 的项目经验。 项目主要会涉及到的知识点 webpack 配置及其优化 react-router 升级为4.0之后的使用 react-router-dom react-router-c...
  14. 适用于 Vue 2.0 的功能强大的 Contextmenu 组件 适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览
  15. 我的第一个python web开发框架(18)——前台页面与接口整合 由于我们前后台系统没有分开,所以前台页面调用接口时,可以直接使用后台管理系统已经完成的接口,不过后台管理系统接口的访问加上了登录验证,所以需要将前台要用到的接口进行处理,让它们设置到白名单当中 我们打开main.py文件,在勾子函数中 @hook('before_request') 中找到下面代码 # 过滤不用做任何操作的...
  16. 关于react我的理解与总结 React react认识 有一段解释很透彻: 用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript各自想象为一个岛屿,它们之间用收费桥梁连接,js每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高
  17. RN Webview与Web的通信与调试原文链接:https://mrzhang123.github.io/... React Native Version:0.51 RN 在 0.37 版本中加入了WebView功能,所以想要在使用WebView,版本必须>=0.37,发送的 message 只能是字符串,所以需要将其他格式的数...
  18. SpringBoot+SpringSecurity处理Ajax登录请求最近在项目中遇到了这样一个问题:前后端分离,前端用Vue来做,所有的数据请求都使用vue-resource,没有使用表单,因此数据交互都是使用JSON,后台使用Spring Boot,权限验证使用了Spring Security,因为之前用Sp...
  19. javascript对象不完全探索记录04:小伙子,你对象咋来的?中篇 - 现出你的原型温馨提示:作者的爬坑记录,对你等大神完全没有价值,别在我这浪费生命 在上一篇博文javascript对象不完全探索记录03:小伙子,你对象咋来的?上篇,中大概说了说在js中,比较好理解的对象创建方式,分别是直接定...
  20. 后端工程师入门前端页面重构(一):口诀 大家好,我是 KnewHow,一名前 Java 开发工程师。为什么要说是「前」呢?这要从两周前我加入一家新公司说起。 入职第一天,实习导师告诉我会有一个月的新人引导计划,当时心里还是美滋滋的,觉得这个公司比较人性化,没有把工程师当劳动力使。 但随后,我就被震撼到了。因为面试时就得知公司崇尚的是...
  21. 现代前端:对视觉和交互的探索 今年我作为分享者参与了阿里D2会议,做了一个关于B站近来对视觉和交互方面探索的分享。在这里,我将以一篇文章的方式,将分享里PPT的内容再论述一遍,算是加深印象,也方便未来鞭策自己。 PPT在此:现代前端-对视觉和交互的探索 圈内的大家想必都明白一个现状——现在的WEB前端圈子、尤其是国内的前端圈子,...
  22. webpack3 编译兼容 IE8- 的正确姿势 上一篇中的方法在 webpack 更新后,uglify 缓存地址也发生了变化,需要重新找地址。 后来测试发现不论是 uglify-js2 uglify-js3 都是支持 IE8 兼容处理的。 但在 webpack.optimize.UglifyJsPlugin 中加配置参数却无效。(webpack 的锅) 总不能每次都手动去找 webpack 缓存路径进行...
  23. Git 二分调试法,火速定位疑难Bug你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码、屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样非...
  24. JS维护nginx反向代理,妈妈再也不用担心我跨域了 “跨域了,咋搞啊!” “问你自己啊,我们后台不配合解决的。” “你们写几句话就好了啊,cors、jsonp、header ......” “搞不来!不合法!不安全!......” “卧槽,这接口又跨域了,我CNMLGB” “你TM不会自己url-get、form-post、写nginx代理啊!” ...... 几个月后 “这接口跨域了!” “写反向代理啊,上次你不是...
  25. Angular2+去除url中的# Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格; 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问题; 当你需要使用GA等工具时,由于无法获取#号后的URL,导致每次路由切换都给其发送一个路径; '#'有点...
  26. 遗世独立的组件——Angular应用中的单组件构建 本文内容提取自 《2017成都WEB前端交流大会》 中的主题演讲。 Angular 是一款面向构建工具友好的框架,除了部分特殊场景之外,所有实际应用中都需要将应用构建后再部署发布。大部分时候,我们都会将应用作为整体进行构建,不过,有些时候我们需要单独构建应用的一部分,而不影响应用主体。 例如,在下面这个例子中...
  27. 精读《When You “Git” in Trouble- a Version Control Story》 本期精读的文章是:When You “Git” in Trouble- a Version Control Story 1 引言 git 作为目前最流行的版本控制系统,它拥有众多的用户并管理着数量庞大的实际软件项目。 本文主要通过一个实
  28. 创建无障碍 React 应用 使用 React 库创建可复用的模块组件在项目之间共享是一个非常好的开发方式。但是应该如何确保你的 React 应用适用于所有人?Scott 将通过一个详细且及时的教程来带领我们创建无障碍的 React 应用。 学习 React 时间回到 2017 年 2 月,我从加拿大的金斯顿坐火车到多伦多。为什么我要经受这两小时的长途跋涉?...
  29. #前端技术#【React 新手学习包(英)】详见: 五部分免费视频课程 + 互动式编程示例,助你打开 React 的学习之门。 ​​​

    React 新手学习包(英)

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

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

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