青训营 |「小程序技术全解」笔记
终于到了我超期待的一门课~~ 课程目标: 认识和了解小程序的业务产品价值 学习和掌握小程序相关技术原理 # 小程序的发展历程 # 发展历程 # 核心数据 # 小程序生态 # 业务价值 # 与 WEB 的区别 有着固定的语法以及统一的版本管理, 平台可以更方便的进行审核 平台能够控制各个入口,如二维码,文章内嵌,端内分享。入口上也能带来更好的用户体验 小程序基于特殊的架构,在流畅度上比 WEB 更好,有更优秀的跳转体验 # 三大价值 # 渠道价值 便捷导流 由于小程序的便捷性,依托于超级平台,小程序能够充分为很多场景导流,如美团和美团优选微信小程序带来的流量占比分别是 40%...
more...青训营 |「Web多媒体入门」笔记
# Web 多媒体历史 PC 时代:Flash 等播放插件,富客户端。 移动互联网时代:Flash 等逐渐被淘汰,HTML5 出现了,但其支持视频格式等有限 Media Source Extensions ,支持多种视频格式等 # 基础知识 # 编码格式 # 图像基本概念 图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。 图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。 例如,彩色图像每个像素用 R,G,B 三个分量表示,每个分量用 8 位,像素深度为 24 位,可以表示的颜色数目为...
more...青训营 |「小游戏开发」笔记
# 前端场景下的游戏开发 # 开发角色和链路 游戏开发的团队分工 组建一个最小但最完整的游戏开发团队只需要 3 个人:策划、程序、美术。 当然,能力足够强的话可以作为独立开发者。 基本链路 立项阶段 -> 原型阶段 -> Alpha 版本 -> Beta 阶段 -> 运营阶段 #...
more...青训营 |「TypeScript入门」笔记
这节课老师讲了 TypeScript 的用处与基本语法、高级类型的应用、类型保护与类型守卫 # 什么是 TypeScript # 发展历史 2012-10:微软发布了 TypeScript 第一个版本 (0.8) 2014-10:Angular 发布了基于 TypeScript 的 2.0 版本 2015-04:微软发布了 Visual Studio Code 2016-05:@ ty pes/react 发布,TypeScript 可开发 React 2020-09:Vue 发布了 3.0 版本,官方支持 TypeScript 2021-11:v4.5 版本发布 # 为什么是...
more...青训营 |「WebGL基础」
# 本节课重点内容 # Why WebGL / Why GPU? WebGL 是什么? GPU ≠ WebGL ≠ 3D WebGL 为什么不像其他前端技术那么简单? # 现代的图像系统 光栅 (Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。 像素 (Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。 帧缓存 (Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。 CPU (Central Processing Unit):中央处理单元,负责逻辑计算。 GPU...
more...青训营 |「构建Webpack知识体系」
# 本节课重点内容 理解前端 "工程化" 概念、工具、目标 一个团队总要有那么几个人熟悉 Webpack, 某种程度上可以成为个人的核心竞争力 高阶前端必经之路 课程目标: 理解 Webpack 的基本用法 通过介绍 Webpack 功能、Loader 与 Plugin 组件设计,建立一个知识体系 不会事无巨细,介绍 Webpack 所有 也不是深入源码,讲解底层实现原理 # 什么是 Webpack 前端项目由什么构成?—— 资源 旧时代手动管理这些资源,但有以下几个对开发效率影响非常大的缺点: 依赖手工,比如有 50 个 JS 文件……...
more...青训营 |「Web开发的安全之旅」
# 本节课重点内容 安全问题很常见,会危害 用户 公司 程序员(祭天 QAQ) # 两个角度看 web 安全 # 假如你是一个 hacker—— 攻击 # 跨站脚本攻击 XSS (Cross Site Scripting) 注入恶意脚本,完成攻击,后果:泄露用户隐私等 XSS 主要利用了开发者对用户提交内容的盲目信任 特点 通常难以从 UI 上感知(一般都是暗地里执行脚本) 窃取用户信息(cookie/token) 绘制 UI(如弹窗等),诱骗用户点击 / 填写表单 举个栗子 public async submit(ctx) { const...
more...青训营 |「Node.js 与前端开发实战」
# 本节课重点内容 # Node.js 的应用场景(why) 前端工程化 早期的 jQuery 等库都是直接在页面中引入,后来模块化逐渐成熟,Node.js 赋予了开发者在浏览器外运行代码的能力,前端逐渐模块化、 Bundle:webpack、Vite、esbuild、Parcel 等 Uglify:UglifyJS Transplie:babeljs、TypeScript 个人理解:Transplie 就是将 ES6 这样最新的语法转译成低版本的写法,实现浏览器兼容 其他语言加入前段工程化的竞争:esbuild、Parcel 、prisma 等 现状:Node.js...
more...青训营 |「HTTP实用指南」
# 初识 HTTP 输入 url -> browser 进程处理输入信息 -> 浏览器内核向服务器发起请求 -> 浏览器内核读取响应 -> 浏览器内核进行渲染 -> browser 进程页面加载完成 Hyper Text Transfer Protocol (HTTP)超文本传输协议 他是应用层协议,基于传输层的 TCP 协议 请求、响应 简单可扩展(可以自定义请求头,只要客户端服务端之间可以理解) 无状态 # 协议分析 # 发展历程 # 报文结构 #...
more...








