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

大佬谈谈越来越难做的前端，为什么很多人低下了头；2017 前端大事件和趋势回顾，2018 何去何从？；如何实现一个Web Server；Vue SPA 首屏加载优化实践；浅究Vue响应式原理；【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件；关于Web应用和容器的指纹收集以及自动化软件的制作；Javascript 杂谈：熟悉基本概念

大佬谈谈越来越难做的前端，为什么很多人低下了头我接触前端的时间不长也不短，12 年入门，14 年初在百度实习，14 中正式参加工作，掐指一算 5 年整。然而这五年间前端的变化已经让很多人摸不着头脑。昨天还发了一条状态，调侃 jQuery 是一个坚韧的社区，有人留言问我为什么这么说。记得刚入前端这个坑时，jQuery 异常火爆，图书馆的相关书籍俯拾皆是，博客园上的文…
2017 前端大事件和趋势回顾，2018 何去何从？ 2017 年，前端开发继续飞速发展。以下是在过去的一年中非常值得关注的一些事件和趋势整理，主要参考了国内外的一些报道和文章，希望能对大家在思考 2018 年的趋势和走向上有所帮助。欢迎指正、评论和补充。 1、React 16 和 MIT 许可证 2017 年，React 继续在前端领域占据主导地位，备受期待的 React 16 也正式…
如何实现一个Web Server最近一鼓作气重构了去年造的一个轮子 Vino。Vino 旨在实现一个轻量并且能够保证性能的 Web Server，仅关注 Web Server 的本质部分。在重构过程中，Vino 借鉴了许多优秀开源项目的思想，如 Nginx、mongoose 和 Web…
Vue SPA 首屏加载优化实践本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案！我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用element-ui ， ajax方案选用 axios , 并引入 vuex ，使用 vuex-router-sync 将 router 同步到 store ，服务器使用本地Nginx服务。构建项目 vue-init webpack vue-spa-s…
浅究Vue响应式原理摄于2017年11月24日 09:02:42 By OnePlusA5000 in HangZhou Vue最明显的特性之一便是它的响应式系统，数据模型即是普通的 JavaScript 对象。而当你修改它们时，视图便会进行更新。这也给开发者提供了极大的方便来绑定和渲染数据，文章简要阐述下其实现原理，如有错误，还请不吝指正。响应式data <div id =…
【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件，当时想实现用户资料的头像上传功能，并且能够预览图片，和对图片进行简单的裁剪、旋转，花了不少时间才看到了这个插件，感觉功能…
关于Web应用和容器的指纹收集以及自动化软件的制作 *本文作者：0d9y，属于FreeBuf原创奖励计划，未经许可禁止转载。一次对Web应用的渗透，九成都是从信息收集开始，所以信息收集就显得尤为重要。关键信息的收集可以使你在后期渗透的时候更加的得心应手，把渗透比喻成走黑暗迷宫的话，那信息收集可以帮你点亮迷宫的大部分地图。信息收集涉及的点特别…
Javascript 杂谈：熟悉基本概念 Javascript 杂谈：熟悉基本概念 1. 信息、变量、数据类型和变量对象 1.1. 看不见的信息 1.2. 客观的数据
Webpack3.0小案例躺坑资源处理、服务器启动和打包优化 webpack3.0小案例系列，抛砖引玉，希望大家多提意见，一起学习： webpack3.0小案例webpack初体验 Webpack3.0小案例躺坑css处理与ES6编译前两节文章我们手把手搭建了一个基于webpack的前端开发工程环境，并讲解了一些常用插件及loader的基本用法，包括代码分割、模板读取、文件清理、ES6编译及css处理等等，这…
Webpack飞行手册
vayne：基于 vue-cli 的 webpack 全局安装的命令行工具 vayne vayne 基于 vue-cli 的 webpack 全局安装的命令行工具, 全局安装依赖，可以省去每个项目安装开发依赖的麻烦。同时以避免多个项目需同时维护多个webpack 配置的痛苦, 同时会同步vue-cli 的webpack 配置，当有新的配置时只需升级vayne 即可享受。当然核心是无需在关心繁琐的webpack 配置。几分钟开始你的项目开…
Parcel：一个快速、零配置的 Web 应用打包工具宣布 Parcel：一个快速，零配置的 Web 应用打包工具原文： Announcing Parcel: A blazing fast, zero configuration web application bundler 译者：neal1991 welcome to star my articles-translator , …
简易制作贝塞尔曲线动画（JS+css3+canvas）贝塞尔曲线：什么是贝塞尔曲线？用过PS的就知道，那破钢笔工具就是，什么，没用过？自行百度用法。需要的工具 ctrl+c、ctrl+v 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style&g…
javascript中模块的发展历程一、模块的重要性 Javascript不是一种模块化编程语言，它不支持”类”（class），更别说”模块”（module）了。开发者们做了很多努力，在现有的运行环境中，实现”模块”的效果。没有模块的日子里 fu
手写一个自己的 JavaScript Promise 类库终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持；如何使用 Promise 在讲具体实现之前我们还是先了解下我们如何使用 Promise 在我们的代码中。 function getData() { return new Promi…
React填坑记（二）：服务端渲染
#前端开发那些事#【编写强健可扩展 CSS 架构的 8 条规则】详见：本文分享了编写可扩展的 CSS 架构需要了解的相关知识点。（译者：乌龟怕铁锤）
#前端技术#【Web 自适应布局你需要知道的所有事儿】详见：本篇总结了关于 Web 自适应布局常见的套路，以及需要注意的地方。一起来看看。有这样一个问题。请说说你知道的所有web布局方式？一般来说，有以下这些布局方法：浮动 float:left|right inline-block display:inline-block flexible box display:flex grid d
译｜调整JavaScript抽象的迭代方案原文作者：Kaloyan Kosev 原文链接：https://css-tricks.com/adapting-javascript-abstractions-time/ 翻译译者：小溪里校对：华翔、小冬即使还没有读过我的文章《在处理网络数据的 JavaScript 抽象的重要性》…
「大前端」Weex在达人店的一年实践 Weex在达人店的一年实践本文来自尚妆移动端团队路飞发表于尚妆github博客，欢迎订阅！尚妆达人店接入weex也一年的时间了，在此期间，也陆陆续续出了一些文章：「Android」详细全面的基于vue2.0Weex接入过程（Android视角）
JavaScript 机器学习指南来自德国的 Robin Wieruch 近日发布了一系列使用 JavaScript 构建机器学习的教程，本文将主要介绍使用 JavaScript 实现神经网络的方法。
前端不止：Retina 屏幕下两倍图一起来复习下屏幕、像素那些事儿~
无需每个项目都下载依赖的基于 webpack 全局安装的命令行工具 zls-cli 是基于 webpack 的全局安装的命令行工具, 因为强迫症，所以使用 zls-cli 可以省去每个项目安装开发依赖的麻烦。同时以避免多个项目需同时维护多个webpack 配置的痛苦, 几分钟开始你的项目开发。
CSS：潜藏着的 BFC 在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而 BFC 就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到 BFC 的神奇之处。
webpack 3 零基础入门教程 #12 – 如何使用模块热替换 HMR 来处理 CSS 模块热替换是什么意思？以前我们使用的 webpack –watch 或 webpack-dev-server 的功能是监听文件改变，就自动刷新浏览器，而这个模块热替换不用刷新浏览器，它是只让修改到的模块，才会在浏览器上发生相应的变化，就是生效，而不是重新刷新浏览器。为什么要这么做呢？有时候模块越多，改得频繁，刷新起来还…
【前端工具】Chrome 扩展程序的开发与发布 — 手把手教你开发扩展程序关于 chrome 扩展的文章，很久之前也写过一篇。清除页面广告？身为前端，自己做一款简易的chrome扩展吧。本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。   什么是 chrome 扩展程序扩展程序
记一次 Weex 的 iPhone X 适配 iPhone X 上市也一月有余了，「齐刘海」的设计给全世界的 iOS 和 m 站开发人员出了一道兼容题目，默认效果问题虽不严重，但是足以逼疯强迫症患者。
机器学习，Hello World from Javascript 导语 JavaScript 适合做机器学习吗？这是一个问号。但每一位开发者都应该了解机器学习解决问题的思维和方法，并思考：它将会给我们的工作带来什么？同样，算法能力可能会是下一阶段工程师的标配。本文旨在通过讲解识别手写字的处理过程，带读者了解
简解Css3 – linear-gradient # 概念 CSS linear-gradient() 函数创建一个表示颜色线性渐变的。简单的说，元素只要用了linear-gradient，它等同于一张图片。即: background：linear-gradient(…params) ~= b
JS基础篇–JS实现数组去重方法整理前言我们先来看下面的例子，当然来源与网络，地址《删除数组中多个不连续的数组元素的正确姿势》我们现在将数组中所有的‘a’元素删除： {代码…} 只要相邻的‘ a’ 元素，都没被删除，splice不但可以删除元素本…