橘子味雪糕

产品价值 小程序带来的更大的价值就是它的产品价值，它帮助例如微信这种超级app构筑了更加完整的生态，扩充了更多的业务场景，这才是小程序最最重要的价值。当然它也在技术上带来了很多价值，我们后面都会讲。其实不论什么技术，最终都是要为业务服务的，技术本省不存在优劣，只存在是否适合。 发展历程 17、18年是小程序的发展初期，这个阶段最早由微信开始进行探索。17年1月小程序正式发布，这个时候小程序就有了很高的关注度，但这个时候还没有完全对个人开发者开发，到3月份，小程序正式面向个人开发者开放，自此，小程序数量进入爆发期，4月份最重要的带来了称为小程序码的新型图形码，为什么说小程序码很重要。因为它的到来真正能够让线下场景和线上小程序沟通串联起来。9月份支付宝小程序也开始了公测，标志着各大厂竟相进入到小程序领域开始竞争，因为围绕着小程序各大超级app能够构筑和丰富独属于自己的生态。12月份轻度游戏，小游戏上线，跳一跳风靡一时，不知道大家都有没有玩过，进入18年，小程序在1月份带来了打开app的能力， 这也标志着小程序为其他引流功能的功能开放 同时在18年，百度小程序，qq小程序、头条小程序（ ...

Web 多媒体历史 Flash ios 不支持 flash 开始走下坡路 HTML5 原生只支持 mp4 等一些基本格式 所有的视频相关的东西全被浏览器接管，我们无法控制 Media Source Extensions API 支持多视频格式播放 可以控制视频相关的 API 基础知识 编码格式 图像基本概念 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个：一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。 视频基本概念 分辨率 每一帧的图像分辨率 帧率 视频单位时间内包含的视频帧的数量跳动青训 码率 就是指视频单位时间内传输的数据量般我们用kbPs来表示，即千位每秒。 I帧、P帧、B帧 I帧 又称帧内编 ...

什么是数据可视化 任何可以将数据转换为可视化表示的东西(比如图表、图表、地图，有时甚至只是表格) 数据可视化分类 本文主要介绍信息可视化 科学可视化 科学实验数据的直观展示 信息可视化 对抽象数据的直观展示 可视分析 对分析结果的直观展现，及交互式反馈，是一 个跨领域的方向 为什么要可视化 记录信息 分析推理 证实假设 交流思想 下面第一个图的数据，很难看出他们的区别，但是第二个图使用图表展示，很直观的就能发现他们的区别 数据可视化设计原则和方法 糟糕的可视化 可视化设计原则 能够正确地表达数据中的信息而不产生偏差与歧义 准确地展示数据 Show the data,and tell the truth 节省笔墨 Use the least amount of ink 节省空间 Don’t waste space 消除不必要的“无价值”图形 Eliminate non-essentials and redundancies 在最短时间内传达最多的信息 Give the viewer the greatest number of ideas ...

一、Webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。 1.2 webpack 五个核心概念 Entry 入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Output 输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。 Loader Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解 JS) Plugins 插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。 Mode 模式(Mode)：指示 webpack 使用相应模式的配置。 选项 描述 特点 ...

Node基础 Node.js 是什么 Node.js 诞生于 2009 年，由 Joyent 的员工 Ryan Dahl 开发而成, 目前官网最新版本已经更新到 12.0.0版本，最新稳定的是10.15.3。Node.js 不是一门语言也不是框架，它只是基于 Google V8 引擎的 JavaScript 运行时环境，同时结合 Libuv 扩展了 JavaScript 功能，使之支持 io、fs 等只有语言才有的特性，使得 JavaScript 能够同时具有 DOM 操作(浏览器)和 I/O、文件读写、操作数据库(服务器端)等能力，是目前最简单的全栈式语言。 这里我们可以简单理解Node.js是一个内置有chrome V8引擎的JavaScript运行环境，他可以使原本在浏览器中运行的JavaScript有能力跑后端，从而操作我们数据库，进行文件读写等。 目前市面上高密集的I/O模型，比如 Web 开发，微服务，前端构建等都有做Node.js的身影。不少大型网站都是使用 Node.js 作为后台开发语言的，比如 淘宝 双十一、去哪儿网 的 PC 端核心业务等。另外我们一些前端工具譬 ...

https://developer.mozilla.org/zh-CN/docs/Web/HTTP 初始 HTTP 什么是 HTTP **超文本传输协议（HTTP）**是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的客户端 - 服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应。HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。尽管通常基于 TCP/IP 层，但它可以在任何可靠的传输层上使用，也就是说，该协议不会像 UDP 那样静默的丢失消息。RUDP——作为 UDP 的可靠化升级版本——是一种合适的替代选择。 Hyper Text Transfer Protocol 超文本传输协议 应用层协议，基于TCP协议 请求响应 简单可扩展 无状态 协议分析 发展 报文 HTTP/1.1 Method Safe（安全的） 不会修改服务器的数据的方法 GET HEAD OPTIONS Idempotent（幂 ...

我们分别从攻击和防御2个角度看 web 安全 Hacker-攻击者 Cross-Site Scripting (XSS) 什么是 XSS Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。 XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。 特点 通常难以从 UI 上感知 （暗地里执行脚本） 窃取用户信息（cookie/token） 绘制 UI (例如弹窗)，诱骗用户点击/填写表单 XSS Demo 👿 可以直接提交恶意脚本 Stored XSS (存储型 XSS) Stored XSS 恶意脚本被存在数据库中 访问页面 -> 读取数据 == 被攻击 危害最大，对全部用户可见 Reflected XSS (反射型XSS) Reflected 不涉及数据 ...

关于前端开发 起源、架构、变迁 Suppose all the information stored on computers everywhere were linked. Suppose I could program my computer to create a space in which everything could be linked to everything. -Tim Berners-Lee,inventor of the World Wide Web 假设存储在各地计算机上的所有信息都是连接的。假设我可以给我的电脑编程，创造一个空间，在这个空间里，一切都可以连接到一切。 -蒂姆·伯纳斯·李（Tim Berners-Lee），万维网的发明者 1989年诞生时，Web由三种技术构成： HTML HTTP URL CSS和JavaScript是几年之后才出现的 Web 技术变迁 前端应用领域 To Business (面向企业) To Customer （面向普通客户） To Developer （面向开发者） 浏览器 Desktop Mo ...

深入理解现代浏览器 原文链接 各位，如果你的职业是开挖掘机，你说要不要深入理解挖掘机？通常来说，深入理解你操纵的机器才能最终达到人机一体的境界。 当然，你可以说：不用，因为如果挖掘机不好使，我可以换一台。嗯，也有道理。不过，假如你同时又是一名前端开发者，那你要不要深入理解浏览器呢？注意，身为前端，你不太可能有机会因为浏览器不好使就强迫用户换一个你认为好使的。这时候，你好像别无选择了。 不过也不用害怕，今天我们的现代浏览器深度游会非常轻松、快乐。这首先必须感谢一位名叫Mariko Kosaka（小坂真子，https://kosamari.com/）的同行。她在Scripto工作，2018年9月在Google开发者网站上发表了“Inside look at modern web browser”系列文章。本文就是她那4篇文章的“集合版”。为什么搞这个“集合版”？因为她的4篇文章写得实在太好，更难得的是人家亲手绘制了一大堆生动的配图和动画，这让深入理解现代浏览器变得更加轻松愉快。 好了，言归正传。本文分4个部分，对应上述4篇文章（原文链接附后）。 架构：以Chrome为例，介绍现代浏览器 ...

什么才是好的 JavaScript 代码？ 写好 JS 的一些原则 各司其职 让HTML、CSS和 JavaScript 职能分离 组件封装 好的UI组件具备正确性、扩展性、复用性。 过程抽象 应用函数式编程思想 各司其职 HTML/CSS/JS 各司其责 应当避免不必要的由 JS 直接操作样式 可以用 class 来表示状态 纯展示类交互寻求零 JS 方案 例子 实现一个网站主题切换 版本一 12345678910111213const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => { const body = document.body; if(e.target.innerHTML === '🌞') { body.style.backgroundColor = 'black'; body.style.color = ...