趁你还年轻的博客

主要包括前端，NodeJS，运维和随想。文章在issues。目前主要从事前端开发工作。

• 前端
  • HTML
  • CSS
  • JavaScript
  • 前端存储
  • 前端通信
  • 前端安全
  • 前端框架
  • 前端面试
  • 前端性能
  • 前端测试
  • 前端工程化
  • 前端多媒体
• 数据结构和算法
• NodeJS
  • node基础
  • node框架
  • 安全
  • 数据库
• 运维
  • Git
  • Linux
  • CI/CD
• 随想

前端

HTML

• 深入理解inline元素，block-level元素和display属性
• 一些低调的HTML标签
• 一些低调的HTML属性
• 一些低调的HTML事件
• 如何理解语义(semantic)化？
• DOM那些事儿
• 如何为DOM创建自定义事件？
• DOM进阶之EventTarget
• DOM进阶之Node
• DOM进阶之Element和NodeList
• DOM进阶之querySelector和querySelectorAll
• 一次简单的Virtual DOM实验
• 富文本编辑器复制拖拽图片
• 深入理解slot算法和shadow DOM
• 一些好用的模板引擎库
• 如何理解Range和Selection对象？
• 关于WAI-ARIA那些事儿
• [译]HTML进阶之Content categories
• [译]HTML进阶之Data attributes
• [译]如何隐藏DOM元素？
• [译]HTML Timers

CSS

• 你真的理解浏览器盒模型吗？
• 我不知道的CSS，你知道吗？
• 简单理解CSS layout和Flex布局
• CSS进阶之Grid布局
• Scoped CSS是什么？
• Sass的父选择器&
• CSS动画之timing functions
• CSS动画之transition
• CSS进阶之CSS变量
• CSS进阶之getComputedStyle()
• CSS函数之计算函数calc()
• [译]CSSOM（CSS Object Model）介绍和指南

JavaScript

• 你真的理解==和===的区别吗？
• 深度剖析0.1 +0.2===0.30000000000000004的原因
• 如何解决0.1 +0.2===0.30000000000000004类问题
• 从规范去看Function.prototype.apply到底是怎么工作的？
• 从规范去看Function.prototype.call到底是怎么工作的？
• Javascript对象的深浅拷贝
• 为什么typeof null→"object" ?
• IIFE(立即执行函数)那些事儿
• es6+ 常用语法
• es6必会之let && const
• es2015引入的元编程是什么
• 前端String那些事儿
• JavaScript之typed arrays那些事儿
• ResizeObserver是什么？
• IntersectionObserver是什么?
• MutationObserver是什么？
• es6之rest parameters和spread syntax
• [译]ES8发布及主要新特性介绍
• Javascript中的Map类
• es6必会之arrow functions
• js中的of和in那些事儿
• TypeScript入门
• es6 class 之 static
• es6 class 之 super
• 深入理解JSON.stringify()
• js数组高级函数之reduce()
• 如何理解Object.defineProperty()
• JavaScript实际使用中的细节记录
• 浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务
• 深入理解Array.prototype.sort()
• [译]如何理解并发模型(concurrency model)和事件循环(event loop)？
• [译]如何理解任务(task)和微任务(microtask)？
• [译]异步JavaScript之通用异步编程概念

前端存储

• 浅析前端上传
• blob URL那些事儿
• localStorage，sessionStorage存储限制是多大？

前端通信

• HTTP之强缓存和协商缓存
• 物联网宠儿mqtt.js那些事儿
• 前端通信那些事儿
• 请求串行控制和并行控制
• 前端URL那些事儿
• 什么是resquest／response拦截器？
• 什么是Web Workers?
• 一次失败的用web worker提升速度的实践
• 如何处理浏览器的断网情况?
• 那些闻所未闻的前端通信API
• ServiceWorkers那些事儿
• 如何理解same-origin policy？
• 协议小册
• HTTP小册
• 精读趣谈网络协议

前端安全

• 记一次简单的DOM XSS攻击实验
• 网站防嵌套猜想及实验验证
• web安全之敏感数据格式HAR
• 前端cookie总结
• 前端唯一标识那些事儿
• [译]Introduction to JSON Web Tokens
• [译]md5的salt是什么

前端框架

• 如何理解vue中的key？
• 如何理解vue中的v-model？
• 如何理解vue中的v-bind？
• 如何理解vue的computed？
• Vue踩坑记录
• Vuex那些事儿
• vue的重中之重之h(createElement)函数
• vue源码中"好的写法"
• AngularJS踩坑记录
• React踩坑记录
• 异步优先队列$nextTick的踩坑
• [译]Presentational and Container Components

前端面试

• 一些特别棒的面试题[0]
• 一些特别棒的面试题[1]
• 一些特别棒的面试题[2]
• 一些特别棒的面试题[3]

前端性能

• CSS3动画卡顿性能优化解决方案
• 如何理解前端BEM？
• 前端性能优化之Performance神器
• 简单前端性能优化之Waterfall
• 前端性能优化之imagebase64
• 如何理解debounce和throttle
• 前端内存泄露浅析
• javascript内存分配
• [译]渲染性能优化之渲染的5个阶段(JS->Style->Layout->Paint->Composite)
• [译]渲染性能优化之JS篇
• [译]渲染性能优化之Style篇
• [译]渲染性能优化之Layout篇
• [译]渲染性能优化之Paint篇
• [译]渲染性能优化之Composite篇

前端测试

• 记一次简单的vue组件单元测试
• [译]单元测试,TDD和BDD之间的区别是什么

前端工程化

• 一次webpack3升级为webpack4的实践
• 前端webpack构建优化
• ES6之使用import()做按需引入
• 实用webpack插件之DefinePlugin
• 实用webpack插件之ProvidePlugin
• 实用webpack插件之webpack-chain
• Webpack那些事儿
• webhook到底是个啥
• PostCSS真的太好用了！
• 如何优雅地使用webpack的devtool进行debug？
• 前端开发神器之ngrok
• 前端工程师必会之ssh命令
• nginx入门
• create-react-app如何使用less/sass和react-css-modules?
• chrome控制台常用高级console指令
• 如何使用Chrome DevTools花式打断点
• 如何引入阿里云ARMS前端监控？
• Jenkins前端项目持续部署
• [译]什么是CSS Modules ？我们为什么需要他们？

前端可视化

• Canvas那些事儿
• 如何理解data URL？

前端音视频

• [译]Web Audio API基本概念

数据结构和算法

leetcode javascript repo：leetcode-js

数据结构

• 发现数据结构之美-栈

算法

• 发现算法之美-时间复杂度
• 发现算法之美-暴力遍历
• 发现算法之美-双指针之对撞指针
• 发现算法之美-排序(冒泡排序、选择排序、插入排序、归并排序、快速排序)

手写系列

• 手写Array.prototype.*

NodeJS

node基础

• 强大的异步专家process.nextTick()
• 关于npm那些事儿
• yarn那些事儿
• 如何理解package.json中的proxy字段？
• 饿了么大前端题目解析：JS基础问题
• node 标准库常用语法
• module.exports和exports shortcut

node框架

• API网关express-gateway初体验
• koa2如何设置和清除cookie
• GraphQL入门

数据库

• 关于MongoDB那些事儿

运维

Git

• 关于Git那些事儿
• Git与ssh秘钥之间的那些事儿
• 如何理解git rebase？
• 如何理解git cherry pick？

Linux

• 环境变量那些事儿
• 常用shell命令集
• shell终端快捷键
• vim 编辑器必知必会
• 原来命令行也是门艺术
• 一些Linux知识点
• centos入门
• [译]Soft and Hard links in Unxi/Linux

CI/CD

• 常用pm2、docker、k8s命令
• docker入门
• 持续集成工具Jenkins初体验
• 创建集群-使用Minikube建立一个集群
• 部署APP-使用kubectl创建一个部署
• 探索App-查看Pods和Nodes
• 公开APP-使用Service来公开你的应用
• 伸缩APP-运行多个APP实例
• 更新APP-执行滚动更新

随想

• 大厂前端技术栈探索和思考
• 字符串base64编解码的多种语言实现
• Something more important than code
• 如何理解scrum？
• 注释那些事儿
• UML那些事儿
• 告别2018喜迎2019
• 一直被忽略的zen-coding
• 如何参与开源项目？
• Chrome Devtool小技巧
• 趁你还年轻的个人简历

working

• [译]HTML5 安全备忘单
• 正则表达式
• Secure Context是什么？
• 离线应用那些事儿
• SVG入门
• 一些有趣的浏览器装逼神器

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

• SegmentFault技术圈:ES新规范语法糖
• SegmentFault专栏：趁你还年轻，做个优秀的前端工程师
• 知乎专栏：趁你还年轻，做个优秀的前端工程师
• Github博客: 趁你还年轻233的个人博客
• 前端开发QQ群：660634678

微信公众号： 人兽鬼 / excellent_developers

努力成为优秀的前端工程师！