20180519 前端开发日报-前端开发博客

前端响应式布局基础——rem；腾讯通用 Web 组件化框架 Omi 正式开源；可能是github上第一款Vue全家桶+Typescript的完整项目；前端反思录（一）：技术就是核心竞争力；Node JS爬虫：爬取瀑布流网页高清图；JavaScript 中的 undefined；基于Webpack搭建React开发环境；Guess.js：Google的数据驱动改进前端体验的工具库

前端响应式布局基础——rem 什么是rem? rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。响应式布局的准则响应式布局的要求（摘自知乎
腾讯通用 Web 组件化框架 Omi 正式开源 Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript. Omi 基于 preact 二次开发，把 preact 的 dom 模块更加抽象了针对浏览器和向 native 发指令。相对于 react，preact 代码尺寸更小，速度更快，jsx里的约定更贴合web的习惯，通过 preact compat 几乎百分百兼容react，在一些方…
可能是github上第一款Vue全家桶+Typescript的完整项目基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. :point_right:项目演示地址欢迎star:sparkles: ps: 服务器不在内地,加载可能慢点… 建议直接添加到主屏幕(ios端体验差一些). 前言 1.为什么做这个项目？学习vue全家桶，本人很长一段时间在用React。利用PWA…
前端反思录（一）：技术就是核心竞争力 3 月末完成了工作的转变，同时也从面试者的身份转向了面试官。在整个的面试过程中，经历了太多，也思考了很多。5 年了，是时候反思了。这里，我不得不提一下「一万小时定律」：人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。怎么理解呢？要成为某…
Node JS爬虫：爬取瀑布流网页高清图原文链接： Node JS爬虫：爬取瀑布流网页高清图静态为主的网页往往用get方法就能获取页面所有内容。动态网页即异步请求数据的网页则需要用浏览器加载完成后再进行抓取。本文介绍了如何连续爬取瀑布流网页。在知乎提到 python 就必有一大帮人提起爬虫，咱 Node JS 爬虫也是非常简单的，和 python 相比仅仅是“异步…
JavaScript 中的 undefined Undefined 是 JavaScript 中的一种基本数据类型，该类型有一个唯一值 undefined 。 6种基本类型： Undefined Null Number String Boolean Symbol // typeof 操作符指示操作数的类型 typeof undefined; // "undefined" typeof 2; // "number" 使用通常情…
基于Webpack搭建React开发环境前几天一直在学习webpack，总算比之前学习的时候有了点收获，所以在昨天发布了一篇webpack入门笔记，今天继续使用webpack练了练手，搭建了一个React开发环境，如果还不熟悉的童鞋可以看一下昨天发布的笔记：入门webpack笔记一、初始化项目文件夹在任意目录下，新建一个文件夹作为你的项目文件夹，命名随意…
Guess.js：Google的数据驱动改进前端体验的工具库 Google 在 I/O 大会上推出了 Web 数据驱动工具包 Guess.js，它是在 Web 上用于实现数据驱动提升用户体验的库和工具的集合。
记一次使用 vue-admin-template 的优化历程前言公司有好几个项目都有后台管理系统，为了方便开发，所以选择了 vue 中比较火的后台模板作为基础模板进行开发。但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有 770k 的体积（下图是基础模板，什么都没加打包后的文件信息）： …
拥抱渐进式 Web Ten years ago, when smartphones were the new thing, the message went out that you needed to have a stand-alone app to run on the p
前端工程师的技术进阶点在哪里? 前端不该只写页面，node 也只是基本技能，最重要的一点，技术要驱动商业，否则没有任何价值。你是一个工程师，征途是星辰大海，何苦给自己设限？
WebGL 入门与进阶（三）前文已经大概讲解了一些基础知识，涵盖了WebGL创建，着色器，着色器编程以及缓存区等知识，一些简单的点面效果即可以基于此来完成，接下来让我们绘制一下如下的效果：让我们先准备一下前期的WebGL内容,首先让我们来创建一个可以接受参数的着色器，（如果不清楚具体要怎么创建可以参考上一章教程内…
那些年我们泡过的Promise 时间就好比一把杀猪刀，就一个promise折腾了我们大半个青春。第一次邂逅，回调之美当我们第一次遇到回调的时候，觉得她是个神奇的东西。就跟看到心动的姑娘一样，想接近她，认识她，交接她，然后拿下她。然而一切才刚开始。。。我们可以先给故事的场景布置场景故事1：什么
vue生命周期详解前言最近在写业务的时候，总是会遇到一些和vue的生命周期相关的问题，比如：你用ajax请求数据，然后将数据props到子组件的时候，因为ajax是异步的，然后会发生没有数据。然后查找原因还是自己对这个东西理解不够深入。生命周期图生命钩子函数什么是生
听说你懂个J？——前端发展闲聊刚好周末和朋友聊起“前端从受鄙视到变得重要”这个话题，感慨前端这四年来的发展，遂有本文。 1. 前情提要毋庸讳言，在我刚工作的时候，前端是还是一个不受重视的岗位。切图狗，写网页的这种侮辱性绰号绑在前端开…
深入跨域问题(3) – 利用 JSONP 解决跨域阅读目录深入跨域问题(1) – 初识 CORS 跨域资源共享；深入跨域问题(2) – 利用 CORS 解决跨域深入跨域问题(3) – 利用 JSONP 解决跨域（本篇）深入跨域问题(4) – 利用代理服务器解决跨域什么是跨域，在这篇文章内部就
OkHttp源码分析OkHttp源码分析在现在的Android开发中，请求网络获取数据基本上成了我们的标配。在早期的Android开发中会有人使用HttpClient、HttpUrlConnection或者Volley等网络请求方式，但对于如今（2018年）而言，绝大多数…
Babel知识体系浅谈核心包 // 暴露babel.transform方法来编译source code babel-core // 语法字符串解析parser babylon // 结合plugins遍历AST语法树 babel-traverse // 生成最后的编译字符串 babel-generator babel编译流程 input string -> babylon parser -> AST -> babel-traverse //使用plugin…
Google I/O 2018：Web 系列参会笔记在 Google I/O 上，今年 Web 内容核心是用户体验，PWA 和 AMP 占据了很大篇幅，除此之外还有 Web Assembly、Web VR&AR 等。
CSS 中最全的换行处理方式这篇文章主要简单的介绍了 CSS 中几个处理超常文本溢出容器的处理方式。比如说，单词被打破折断换还；还是整个单词在容器边缘整体换行；或者说单词打破，但打破处添加连接符。
Mina 的 WebSocket 问题排查项目的客户端需要重构，探讨后决定客户端与服务器的交互使用WebSocket协议。后端的网络层框架是Mina，在现有基础上增加对WebSocket的解析即可完成无缝迁移。正好Apache讨论组上有人提供Mina的WebSocket过滤器代码。下载后添加到项目，扔到服务器上一切正常。今天前端同事反馈说请求某个接口会导致客户端立马报错…
github repository可视化 Github Visualization / Github 数据可视化网站链接: https://ssthouse.github.io/github-visualization/ github链接: https://github.com/ssth
【20180518 前端开发日报】冒泡算法 — js之实现；确认过眼神，你就是我的Promise~~；选择排序–js实现算法；JavaScript 是如何工作的：CSS 和 JS 动画背后的原理 + 如何优化性能；面试官问你有没有了解过 vue-cli 构建的打包工程；换个角度学 Web…详情→
Node.js 集群：扩展你的 Node.js 应用 https://medium.freecodecamp.org/scaling-node-js-applications-8492bd8afadcmedium.freecodecamp.org Node.js 中的扩展性并不是事后才想出来的事情。是融合到运行时核心的东西。Node 被命名为 Node 强调 Node 应用应该包含多个相互之间通信的小型分布式节点。你运行过包含多个节点的 Node 应用吗？…
前端基础面试题@JS篇说说Js的数据类型都有哪些基本类型 String Number Boolean null undefined symbol 引用类型 object 说说Http状态码 1** 信息，服务器收到请求，需要请求者继续执行操作(101，升级为websoc
settimeout(fn 0)与Promise的执行顺序有这么一道题： setTimeout(function() {   console.log(1) }, 0); new Promise(function(resolve, reject) {   console.log(2) &
⚛ React 状态管理工具博物馆这篇文章是了解复杂的状态管理系统的罗塞塔石碑（关键所在）。一个打包列表应用中使用的状态管理库基本如下： setState React 16.x Context Redux — by Dan Abramov MobX — by Michel Weststrate unstated — by Jamie Kyle MobX-State-Tree — by Michel Weststrate again …
使用Immutable js的一点体会项目中一直在使用Immutable js，最开始使用Immutable js，我的内心是抗拒的，简单的对象操作整得那么复杂，有必要吗。随着后面开发对数据操作非常频繁的项目后，渐渐发现了Immutable的闪光点；现在就总结下使用Immutable时的一些体会