WebFamily

Hi there, I'm Jeskson! 👋

• 😄 前端开发工程师
• 🏡 作品：达达前端 | 求星星 ✨
• 🌱 热爱分享 1024bibi.com
• 😺 趣讲技术：掘金 魔王哪吒 | infoQ : infoQ 魔王哪吒
• 💬 微信：xiaoda0423
• 🤔 有问题欢迎私聊
• 👬 QQ 千人编程交流群2：634382181
• 💬 向我询问：如有问题可以点击（Ask me about）
• 📫 如何联系我wx: xiaoda0423（How to reach me）
• ⚡ 有趣的事实： 我一直在倡导学习（Fun fact）

WebFamily 【每日学习打卡come on】一份涵盖大部分Web前端开发程序员所需要掌握的核心知识。前端技术博客仓库，Vue 源码解析，React 深度实践，TypeScript 进阶艺术，工程化，性能优化实践…… Leetcode 【Suggest 👍 ‍💻 Leetcode brush question & answers】leetcode题解，记录自己的leetcode解题之路……

已阅

vue实现预览功能（包括doc，pdf，图片，视频）https://www.cnblogs.com/lhy-555/p/10839750.html

• vue-pdf 通过文件流预览pdf文件
• vue-pdf预览和下载，后台返回文件流(blob)

2021.8.9

• this.$refs.audio.play is not a function

2021.7.28

• vue-cli打包配置不同的开发和生成环境
• vue中有关.env;.env.development,.env.production的相关介绍
• vue el-upload上传控件一直报跨域问题 post请求变成get请求

2021.7.22

• 史上最走心webpack4.0中级教程——配置之外你应该知道的事

2021.7.21

• html meta no-cache不缓存数据

2021.7.18

• ts 数组的类型

2021.7.15

• vue实现PC端分辨率适配

1. 项目基础配置使用 vue-cli2 生成
2. 自适应方案核心： 阿里可伸缩布局方案 lib-flexible
3. px转rem：px2rem，它有webpack的loader px2rem

2021.7.14

• Vue中使用keepAlive不缓存问题（已解决）

2021.7.13

• ts 中的declare 具体用法
• git config 查看配置信息
• GIT配置信息

2021.7.12

• JS 在已知的日期基础之上加N个月

2021.7.8

• Compilation issue with newer version of SASS
• Sass: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0 #4751
• Does not work with Vue 2.5.18
• vue版本依赖包（[email protected] ） （[email protected]）不匹配问题
• Unable to resolve signature of class decorator when called as an expression

2021.7.5

• vue-cli3.0 吃过的坑
• vue中watch高级用法（deep和immediate）
• Vue.js中 watch(深度监听)的最易懂的解释
• 通过配置 VS Code 来提高生产力
• Vue ts 中的@watch,@ prop的用法

2021.7.1

• 超级详细的Vue-cli3使用教程
• vue-cli3.0 + typescript 构建项目
• 【原】npm 常用命令详解
• 样式穿透::v-deep

2021.6.30

• 使用Vue脚手架构建项目时Runtime + Compiler和Runtime-only的区别
• vue init webpack Travel bash: vue: command not found
• Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别
• vue脚手架搭建项目
• yarn 环境安装依赖报错解决方法（info [email protected]: The platform “win32“ is incompatible with this module.）
• npm install报错（The platform “win32“ is incompatible with this module）
• 记一次npm安装依赖奇怪的gyp报python错误
• npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
• vue-property-decorator用法

2021.6.29

• 项目中使用package-lock.json锁版本问题
• Nuxtjs vuetify 抛出大量Using / for Division 已弃用，将在 Dart Sass 2.0.0 中删除。
• Semver：波浪号和插入符号
• Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Languages and Tools:

⚡ Technologies

These are some of the technologies and tools that I work with:

【web面试+web学习指南】

一份涵盖大部分Web前端开发程序员所需要掌握的核心知识，是一个为开发者提供免费的学习资源整合社区。

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

我会认真去写这个系列，很多细节的点，可能想得不是很完善，大家可以去【公众号】(程序员哆啦A梦)获取或者加我【微信】提意见(别忘记Star哟)。

技术交流群：添加我微信 xiaoda0423 备注【姓名-工作年限/学校】即可

📚1024bibib.com文章

• vue-axios-vuex-全家桶

📚力扣 (LeetCode)题目

• 两数之和,有效的括号,两数相加
• 合并两个有序链表,删除排序数组中的重复项,JavaScript笔记
• 力扣 (LeetCode)-最大子序和,JavaScript数据结构与算法（数组）
• 力扣 (LeetCode)-栈,括号生成 ｜刷题打卡
• 力扣 (LeetCode)-加一，队列 ｜刷题打卡
• 力扣 (LeetCode)-合并两个有序数组,字典,散列表｜刷题打卡
• 力扣 (LeetCode)-对称二叉树,树｜刷题打卡
• 力扣 (LeetCode)-104. 二叉树的最大深度，图｜刷题打卡
• 排序，搜索，算法模式，算法复杂度 | 数据结构与算法综合笔记
• 力扣 (LeetCode)-28. 实现 strStr()
• 力扣 (LeetCode)-14. 最长公共前缀
• 力扣 (LeetCode)-13. 罗马数字转整数

📚ES6篇

• let 和 const 命令
• 变量的解构赋值
• Promise对象

📚掘金文章

• 一个合格的中级前端工程师需要掌握的技能笔记（中）
• 一个合格的中级前端工程师需要掌握的技能笔记（上）
• 已阅冴羽大佬文章
• 前端日常总结
• 一份不可多得的TypeScript系统入门整理
• JS葵花宝典秘籍笔记，为你保驾护航金三银四
• TypeScript趁早学习提高职场竞争力
• 前端模拟面试字数过23477万内容
• JavaScript数据结构之链表 | 技术点评
• JavaScript的数据结构-集合 ｜技术点评
• 这是我的第一次JavaScript初级技巧
• 一个合格的初级前端工程师需要掌握的模块笔记
• 【初级】个人分享Vue前端开发教程笔记
• localStorage和sessionStorage本地存储
• HTML5中的拖放功能
• 挑战前端知识点HTTP/ECMAScript
• 前端170面试题+答案学习整理（良心制作）
• 必学必会-音频和视频
• 前端HTML5面试官和应试者一问一答
• Vue.js笔试题解决业务中常见问题
• 前端面试必备ES6全方位总结
• 考前复习必备MySQL数据库（关系型数据库管理系统）
• 长篇总结之JavaScript，巩固前端基础
• 学习总结之HTML5剑指前端（建议收藏，图文并茂）
• 前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通信功能
• 【建议👍】记录一次BAT一线互联网公司前端JavaScript面试
• Web页面制作基础
• 【思维导图】前端开发-巩固你的JavaScript知识体系
• 【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系
• 【高能笔记】如何获得令人心动的前端offer | 掘金技术征文
• 11期前端冲刺必备指南-执行上下文/作用域链/闭包/一等公民
• 12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题
• 13期前端冲刺必备指南-this/call/apply/bind（万字长文）
• 14期-连肝7个晚上，总结了计算机网络的知识点！（共66条）
• 熬夜总结了 “HTML5画布” 的知识点（共10条）
• 16期-熬夜7天，我总结了JavaScript与ES的25个重要知识点！
• 17期-什么是MySQL数据库？看这一篇干货文章就够了！
• 18期-后端逆袭，一份不可多得的PHP学习指南
• 19期-当你在百度搜索关键字的时候，哪个网站会排在最前面？今天给大家科普一下“网站SEO”
• 前端学习总结，经验分享，项目经验分享过程 | 掘金技术征文-双节特别篇
• 写给前端程序员的英文学习指南 | 掘金技术征文-双节特别篇
• 【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系（上）
• 【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系（下）
• 【思维导图】前端开发JavaScript-巩固你的JavaScript知识体系
• (一)熟练HTML5+CSS3，每天复习一遍
• 面试官一上来就问我Chrome底层原理和HTTP协议（万字长文）
• 2020 年「我与技术面试那些事儿」| 掘金年度征文
• 【进阶】面试官问我Chrome浏览器的渲染原理（6000字长文）| 掘金年度征文
• 2020年小程序开发-云开发技术总结 | 掘金年度征文
• 腾讯位置服务开发应用 | 创作者训练营
• 达达前端个人web分享92道JavaScript面试题附加回答 | 创作者训练营
• 【这一年收到的书籍，感谢赠予！】一起回顾 2020，展望 2021 | 掘金年度征文
• 哪吒闹海，席卷图文学习前端Flex布局-七日打卡
• 针对CSS说一说｜技术点评
• 原来也没有那么难！Vue商城开发 | 技术点评

📚😋Java文章

• 【2021年】小哪吒入门学习Java的第一天打卡

📚文章

• 刚刚，发布Webpack中级教程系列

🚩其它

• 录屏神器
• 录屏神器
• UI
• https://figmachina.com/
• http://www.sketchcn.com/
• https://uizard.io/

Vue.js	前端框架	https://vuejs.org/
Vue-router	路由框架	https://router.vuejs.org/
Vuex	全局状态管理框架	https://vuex.vuejs.org/
Nuxt.js	创建服务端渲染 (SSR) 应用	https://zh.nuxtjs.org/
Element	前端ui框架	https://element.eleme.io
Axios	前端HTTP框架	https://github.com/axios/axios
Echarts	图表框架	www.echartsjs.com
CKEditor	富文本编辑器	https://ckeditor.com/
Highlight.js	代码语法高亮插件	https://github.com/highlightjs/highlight.js
Vditor	Markdown编辑器	https://github.com/Vanessa219/vditor
vue-cropper	图片裁剪组件	https://github.com/xyxiao001/vue-cropper
vue-image-crop-upload	vue图片剪裁上传组件	https://github.com/dai-siki/vue-image-crop-upload
vue-emoji-comment	Vue Emoji表情评论组件	https://github.com/pppercyWang/vue-emoji-comment
clipboard.js	现代化的拷贝文字	http://www.clipboardjs.cn/
js-beautify	美化JavaScript代码	https://github.com/beautify-web/js-beautify
FileSaver.js	保存文件在客户端	https://github.com/eligrey/FileSaver.js
SortableJS	功能强大的JavaScript 拖拽库	http://www.sortablejs.com/
vue-side-catalog	目录导航栏	https://github.com/yaowei9363/vue-side-catalog
uniapp	移动端跨平台语言	https://uniapp.dcloud.io/
colorUi	专注视觉的小程序组件库	https://github.com/weilanwl/ColorUI
showdown	用Javascript编写的Markdown 到Html转换器	https://github.com/showdownjs/showdown
turndown	用JavaScript编写的HTML到Markdown转换器	https://github.com/domchristie/turndown

技术论坛

• 思否，原创作者多，问答机制强
• 掘金，创作者，读者数量多，文章质量高
• Stackoverflow，技术提问好去处,锻炼英语的好机会
• 遇到技术问题,最应该先去这里

打包工具

• webpack - 打包项目。
• rollup - 打包 npm 库。
• parcel - webpack 竞品，但发展前景不乐观，再观察一段时间。
• systemjs - 针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等。
• microbundle - 基于 rollup，简化配置。
• bili - 基于 rollup，同上。
• father - 组件打包工具，提供 babel 和 rollup 两种打包方式。
• vue-cli - vue 命令行工具。
• create-react-app - react 官方脚手架。
• prepack - 通过预先执行的方式优化打包结果。
• lebab - 把 es5 代码转成 es6，反向 babel。
• esm-to-cjs - 把 esm 转成 cjs。
• tsdx - Zero-config CLI for TypeScript package development.

webpack 辅助工具、Loader 和插件

• webpack-dev-server - webpack 开发服务器。
• webpack-dev-middleware - webpack 中间件。
• webpack-merge - 合并 webpack 配置。
• webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
• svgr - svg 转 react 组件。
• postcss - CSS 界的 babel。
• autoprefixer - 为 CSS 选择权自动加 prefix。
• cssnano - CSS 压缩，也有类 preset 的概念。
• mini-css-extract-plugin - 提取 CSS 为单独文件。
• webpackbar - webpack 进度条。
• webpack-bundle-analyzer - 构建产物占比分析。
• uglifyjs-webpack-plugin - JS 压缩，产物为 ES5 语法。
• terser-webpack-plugin - JS 压缩，产物为 ES6 语法。
• webpack-manifest-plugin - 生成 manifest.json。
• copy-webpack-plugin - 复制额外的文件到输出目录。
• case-sensitive-paths-webpack-plugin - 大小写敏感检测，能规避一些问题，但构建时性能消耗较大。
• css-hot-loader - CSS 热更新，搭配 mini-css-extract-plugin 使用。
• duplicate-package-checker-webpack-plugin - 重复依赖检测。
• fork-ts-checker-webpack-plugin - ts 语法检测。
• speed-measure-webpack-plugin - 统计 webpack 各阶段耗时。

基础框架

• 用于构建用户界面的 JavaScript 库-React.js
• 渐进式JavaScript 框架-Vue.js
• 一套框架,多种平台移动端&桌面端-Angular.js

框架

• next.js
• nuxt.js
• gastby
• umi - 蚂蚁金服的前端框架
• rekit - IDE and toolkit for building scalable web applications with React, Redux and React-router.
• choo - dva 最初的 API 是参考这个实现的，已经不怎么发展了，再关注一段时间。
• taro - 用 React 写小程序，适配微信和支付宝等。
• after.js
• mint - 提供了语言层方案的框架。
• quasar - 基于 vue，一套代码多处适用。

react 相关库

• preact - 轻量级 React 实现。
• inferno - 轻量级 React 实现。
• react-router - React 路由方案。
• reach-router - React 路由方案，较新，优势是可访问性。
• router5 - 通用的路由方案。
• react-loadable - 按需加载 react 组件。
• ant-design - 蚂蚁金服的 React UI 库。
• material-ui - UI 库。
• react-intl - React 的国际化方案。
• react-dnd - 拖拽实现。
• react-helmet - 修改 html 的 header 内容。
• react-jsonschema-form - A React component for building Web forms from JSON Schema.

跨平台技术

• 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序-Electron
• 使用 React 来创建 Android 和 iOS 的原生应用-React-Native
• 可以快速在iOS和Android上构建高质量的原生用户界面-Flutter
• uni-app 是一个使用 Vue.js 开发所有前端应用的框架-UniApp

基础组件库

• 企业级产品设计体系，创造高效愉悦的工作体验-Ant-Design
• 为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库-Element-UI
• 源自谷歌,Build beautiful products, faster-Material Design
• 一个轻量、可靠的移动端 Vue 组件库,源自有赞-Vant

包管理器

• 快速、可靠、安全的依赖管理工具-Yarn
• Node.js官方推荐依赖管理工具-npm
• 中国 npm 镜像的客户端-cnpm
• 快速，磁盘空间高效的包管理器-pnpm

babel

• babel
• babel-plugin-dynamic-import-node - 有些场景下会需要禁用 import() 语法。
• babel-plugin-macros - 前端文件写 node 逻辑。
• babel-plugin-rawest - React 的 DOM 直出方案。
• babel-plugin-react-require - 自动为 jsx 语法加 react 引用。
• babel-plugin-transform-react-remove-prop-types - 删除 prop-types，生产环境用。

前端解决方案

• 一个开源的实时错误追踪系统(涵盖所有语言)-Sentry
• Your Form，这才是你想要的Form解决方案-UForm
• 一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景-three.js
• react虚拟列表通用库,解决react中的长列表性能问题-react-window
• 前端目前使用最广泛的对ajax请求封装的库-axios
• 基于 redux、redux-saga 和 react-router 的轻量级前端框架-dva

构建工具

• 一个用于现代JavaScript应用程序的静态模块打包工具-webpack
• Bridging Every Blockchain in a Multi-Chain Future-Vite
• 一个极速零配置、成熟的Web应用打包工具-parcel
• 将开发流程中让人痛苦或耗时的任务自动化,创造更大价值-gulp

脚手架

• 应用最广泛的react脚手架,一键生成项目模板,生态成熟-create-react-app
• 一个应用广泛可插拔的企业级React应用框架-umi
• Vue.js开发的标准工具,目前应用最广泛的Vue脚手架-vue-cli

重学前端

• 从零开始学前端 - HTML
• 从零开始学前端 - CSS
• 从零开始学前端 - JavaScript
• 运行在服务端的 JavaScript
• 深入理解 TypeScript
• ECMAScript 6 入门
• 算法系统学习
• TCP通信协议
• linux系统的系统学习

数据可视化

• 一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景
• 一个基于 JavaScript 的开源可视化图表库
• 兼容 IE6+、完美支持移动端、方便快捷的交互性图表库
• 企业中后台的可视化解决方案(阿里通用图表组件库)
• 最流行的可视化库之一，它被很多其他的表格插件所使用
• 一套基于可视化编码的图形语法，以数据驱动
• 蚂蚁集团全新一代数据可视化解决方案(让数据栩栩如生)

日志记录心得

web前端工作内容

web前端工作内容都有哪些？ 需要再次进步需要学习什么？ 就来讲述一下web前端工作者的工作内容。

职责一：

1、结合页面和系统功能，完成桌面或移动端页面/微信H5/小程序的开发、调试等工作，高效、高质地完成代码编写，确保符合前端代码规范;

2、与后端开发团队紧密配合，完成接口对接，确保前后端有效交互;

3、综合运用客户端和服务器端构建与优化方案、模块化开发等手段，提升开发效率和系统性能;

4、了解并结合业务需求，设计满足用户需要、符合用户习惯、运用大数据分析能力、体现大数据特色的系统。

职责二：

1、根据业务需求，完成产品的前端页面及交互实现;

2、对现有前端开发框架进行深入了解，并参与持续改进;

3、通过开发工具、改进流程，保证前端业务开发的高效性;

4、关注前端技术前沿，及时把新技术转化为业务开发中的生产力;

5、完成业务界面交互和独自设计组件开发。

职责三：

1、根据项目或者产品需求负责实现PC端及移动页面的设计和开发;

2、持续优化前端应用，改善用户交互以及视觉，保证前端网页的兼容性以及页面响应速度并负责前端代码的维护，

3、配合后台开发人员共同完成项目或者产品;

4、负责前端开发文档的编写;

职责四：

1、 根据产品经理和UX/UI设计的关键需求进行前端架构设计工作;

2、 承担前端核心模块的设计、实现工作;

3、 承担主要开发工作，对代码质量及进度负责;

4、 参与进行关键技术验证以及技术架构选型工作;

5、 和产品经理和UE设计师沟通并确定产品开发需求;

6、 与后台开发工程师配合，完成开发任务和上线。

意见反馈

若内容有做得不到位的地方，请及时联系我们进行整改即可，会在第一时间进行处理。

勘误及提问

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

参与贡献

1. 如果您对本项目有任何建议或发现文中内容有误的，欢迎提交 issues 进行指正。
2. 对于文中我没有涉及到知识点，欢迎提交 PR。
3. 如果您有文章推荐请以 markdown 格式到邮箱 [email protected]。

License

所有文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。