前端
文章平均质量分 92
峰华前端工程师
前端工程师,B站 @峰华前端工程师, 毕业于美国斯帝文斯理工学院。专注于前端与全栈技术分享,html, css, javascript, react, vue, node.js.
展开
-
我是如何从 Java 工程师转型成为前端工程师的
前端作为比较新的技术岗位,涉及范围广泛,市面上也没有成体系的、适用于所有人的学习方法。这篇文章,将分享一下我转型成为前端工程师的经历,以及我在学习前端开发过程中,遇到的问题和总结出来的一些经验,希望对你有所启发。前端工程师的技能要求先看一下前端工程师需要掌握哪些技能。综合大、中、小企业的前端工程师技能需求,实际上前端工程师的职能包含以下职业中的 1 种或多种:网页开发工程师网页设计师(UI)用户体验工程师(UE)最重要的职能是网页开发,包括小程序、APP 等跨端应用界面的开发,虽然它们实现原创 2022-05-09 16:00:48 · 2330 阅读 · 2 评论 -
前端组件化开发实践总结
自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。前端组件化发展历史在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』原创 2021-10-13 12:55:43 · 7178 阅读 · 9 评论 -
2 行 JS 代码实现页面横向滚动特效
在前端这个无奇不有的世界里,有些网站不是正常垂直滚动的,而是横向滚动的:那么在没法把鼠标滚轮横过来的前提下(苹果除外),能否实现网页横向滚动呢?我们来写代码试试。先看一下最终效果,这里我用鼠标的滚轮垂直滚动,页面是横向滚动的。要实现这个功能,只需要一点点的 JS 代码。编写 HTML 结构先看一下 HTML 结构,很简单,就是三个模拟全屏页面的 div,class 都是 page,然后放在一个 class 名为 container 的 div 容器中:<main> <di原创 2021-06-15 16:48:03 · 6294 阅读 · 0 评论 -
使用 font-display 优化 web 字体加载速度
在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通过改变 CSS 中的 font-display 属性,就可以避免这个问题。什么是 Web Fonts在介绍 font-display 之前,先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时原创 2021-04-02 18:05:42 · 1577 阅读 · 1 评论 -
如何把“蚂蚁呀嘿”换脸特效用在前端 WebRTC 视频通话中
因为疫情的原因,线上视频会议软件异军突起,成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来,那我就想了想能不能在视频会议的时候换张脸活跃下气氛?在 Github 上一番搜寻之后发现还真有办法,有一个开源的 Python 人工智能换脸的库,那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能,外加换脸操作。先看一下效果吧:因为有涉及到一点点的后台,所以项目分成了两部分,一个是用于存放前端代码的 frontend 项目和存放后端代码的 backend 项目:项原创 2021-03-15 12:11:24 · 8212 阅读 · 15 评论 -
JavaScript 游戏开发:手把手实现碰撞物理引擎
目录基础结构绘制小球移动小球重构代码碰撞检测边界碰撞向量的基本操作碰撞处理动量守恒定律动能守恒定律非弹性碰撞重力总结年前我看到合成大西瓜小游戏火了,想到之前从来没有研究过游戏方面的开发,这次就想趁着这个机会看看 JavaScript 游戏开发,从原生角度上如何实现游戏里的物理特性,例如运动、碰撞。虽然之前研究过物理相关的动画库,但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎,实现小球的碰撞效果。为什么不用现成的游戏库呢?因为我觉得在了解底层的实现原理之后,才能更有效的理解框架上的概原创 2021-02-26 22:44:46 · 29837 阅读 · 56 评论 -
让微信 8.0 「裂开」「炸弹」的特效代码来了
微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神,我就想看看能不能实现一个类似的特效。折腾许久之后,做出来的效果如下:项目的核心是使用到了 lottie 动画库。Lottie 是 Airbnb 出品的、全平台(Web、Android、IOS、React Native)的动画库,它的特点在于能够直接播放使用 A原创 2021-01-27 22:46:37 · 69127 阅读 · 116 评论 -
5个 JavaScript 怪异行为及其原因
如果你用 JavaScript 写过项目或者参加过面试,那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一,也没有严格的标准,再加上它的语法灵活多样,有些看起来就不正确的代码却能正常执行,一些看起来符合逻辑的代码,运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG,更重要的是,很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题,以及它们出现的原因和解决方法。1、可选分号问题:function f原创 2020-12-19 20:39:51 · 1377 阅读 · 1 评论 -
TypeScript 入门看这一篇就够了!
目录这里写目录标题简介什么是 TypeScript为什么用 TypeScript编写和运行 TS 代码Node TSCDenotsconfig.json基本语法基本类型隐式显式组合类型类型别名对象类型(interface)接口作为函数参数类型数组类型泛型tuple(元组)总结简介我第一次使用 TypeScript 是16年在读研的时候,学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言,没想到还能这么通用。后来在写作业的时候,发现 Ty原创 2020-06-09 22:13:58 · 1676 阅读 · 0 评论 -
5个技巧助你成为 CSS 大神
目录简介样式调整action布局调整响应式布局action形状、特效的拆解与合并action页面组件设计原则actionCSS 模块化学习actions一些学习资源简介作为一名前端工程师,经常在写完 HTML 以后,才觉得真正的噩梦要开始了,啊,写 CSS 的时候,面对满屏乱飞的组件,真想手动给他们挪到该在位置上……都说 CSS 很难掌握,最愁给页面编写样式,其实都是因为还没有形成一个对 C...原创 2020-04-29 21:59:22 · 1237 阅读 · 0 评论 -
一文搞懂 CSS Flexbox 布局 - 2020年最新版
目录开启 Flexbox 布局对齐方式justify-contentflex-startcenterflex-endspace-betweenspace-evenlyspace-aroundalign-itemsstretchflex-startcenterflex-endbaselinealign-content子元素覆盖对齐方式排列方式空间占比Flex-basis缩放flex-growflex...原创 2020-04-06 16:25:24 · 1508 阅读 · 0 评论 -
用一组美丽的按钮来掌握 React Props 用法
目录你将学到的创建 React 工程创建 Button 组件编写 Button 默认样式用 Props 给 Button 不同的样式classnames 组合样式线框样式显示所有按钮样式你在写 HTML 页面的时候肯定知道,html 标签的属性都是固定的,比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的,不方便扩展和复用。而用 React 创建组件的话,可以给...原创 2020-03-18 13:22:22 · 821 阅读 · 0 评论 -
你为什么应该学习React?
Hello! 今天来带你走进 React 的大门!我第一次听说 React 是我在美国读研的时候,室友选了 web programming 这节课,然后遇到了关于 react 的好多问题,就是总也配置不好。我看他那个时候 React 的配置特别麻烦,要引入一堆依赖,像 bower, babel 等等… 还有文档写的也不清楚。有一次他刚开始做一个作业,问了我一个问题,大概是有一个组件显示不出来,结果...原创 2020-03-14 17:30:18 · 757 阅读 · 0 评论 -
超简单!使用 Docusaurus 搭建个人博客(二)
目录发布到 github部署Zeit发布到 zeit部署到国内购买域名购买服务器备案配置主机和域名配置 github actions发布博客B 站视频 - 点击传送如果你看了上期视频的话,那么你应该学会了怎么在本地搭建一个 docusaurus 博客,但是你不能只在本地来看这个博客吧,得让全世界来欣赏你的杰作,所以说咱们得把这个博客部署到服务器上。部署有两种方式:部署到国外,是免费的。部...原创 2020-03-13 22:15:54 · 3430 阅读 · 7 评论 -
超简单!使用 Docusaurus 搭建个人博客(一)
目录历史迷茫博客有啥用?Docusaurus 简介安装运行环境安装 docusaurus运行 docusaurus项目结构配置为博客模式发表第一篇博客B 站视频 - 点击传送历史迷茫我以前总也找不到一个满意的博客系统,wordpress 这个程序又大,然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台,后来发现了一些静态的网站生成器,像 hexo 这种,但是发现...原创 2020-03-05 20:52:56 · 12882 阅读 · 7 评论 -
11个前端工程师必备的网站
好多小伙伴有疑问,就是说有哪些值得去关注的前端网站,我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站,把咱们的这个知识给误导了。这里呢我准备了几个我经常关注的一些网站,一部分是国外的,然后有一部分是国内的,因为国内的好多的都是质量参差不齐,但国外的话普遍的质量比较高(事实如此)。不过呢,咱们国内的也有一些比较好的平...原创 2020-03-02 12:38:21 · 7412 阅读 · 4 评论 -
想成为前端大神秒杀群雄?收下这份2020年最新前端学习路线!
B 站视频版:点击传送这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始,然后一路升级到高级工程师该掌握的技能,层层相扣,让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。俗话说知己知彼百战不殆,要成...原创 2020-03-01 18:21:02 · 25052 阅读 · 68 评论 -
从零实现一个网络科技公司官网 - HTML CSS 前端实战
【持续更新】视频地址:点此观看本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSS Grid布局,支持响应式,有流畅过渡和展现动画。...原创 2020-02-05 18:22:56 · 1187 阅读 · 0 评论 -
利用React 自定义Hooks实现业务逻辑复用实例
目录简介适用读者请求数据的例子需求定义 States加载 Posts加载 Todos展示数据问题用自定义 Hooks 改造useRequest加载 Posts 和 Todos状态隔离扩展总结简介React Hooks 除了可以给函数式组件赋予状态和生命周期管理外,最重要的一点是可以把共用的逻辑处理代码抽离出来给不同的视图组件进行使用,它的目的和 HOC 和 Render Props 基本相同。...原创 2019-12-12 16:19:38 · 3650 阅读 · 1 评论 -
如何把JavaScript Map.keys()转换成数组
最近在写算法题时,发现一个小难处,javascript里的 map.keys() 获取出来的不是一个数组,而是一个 iterator,只能用 interator.next().value 获取值,很不方便,然后来查阅资料发现有两个解决方法:解决方法一let keys = map.keys();let arr = Array.from(keys);解决方法二let keys = map....原创 2019-11-13 20:52:23 · 12783 阅读 · 1 评论 -
用了这么长时间的 React useEffect hook,你用对了吗?
主线什么是 Effect与生命周期的关系运行时机类实际工作的例子 - 抓取数据第二个参数添加其他属性划重点useEffect 是 React Hooks 的核心,要保证理解它的运行机制和正确的使用方法才能避免这样那样的坑。在以前的工作中,因为它我碰到过无数个坑,比如拿到的值是旧的,该执行的时候不执行,不该执行的时候执行了……所以为了避免如上尴尬、节省绞尽脑汁找 bug 的时间、保护咱们的发际线...原创 2019-11-12 12:58:28 · 7064 阅读 · 2 评论 -
React Hooks - useState 的使用方法和注意事项
目录简介适用对象示例useState 使用方法定义状态更新状态状态依赖注意事项useState 的参数状态依赖总结简介在上一篇中介绍了 React Hooks 的基本概念,初识 React Hooks - React 组件定义的变革,这一篇将介绍 useState Hook,使用它可以给函数式组件添加状态支持,另外还会介绍使用它的一些注意事项。适用对象本篇文章适用于以下读者熟悉 Rea...原创 2019-11-09 18:31:16 · 13372 阅读 · 6 评论 -
初识 React Hooks - React 组件定义的变革
目录适用对象什么是 React HooksReact Hooks 作用与 React Class Component 的区别Hooks 的种类接下来React 在 16.8 版本中发布了 hooks 特性,通过本篇文章大家会了解到 hooks 的基本概念、作用和优势,以及与 class 类型的组件的区别。适用对象本文适用于以下读者:有 React 使用经验想了解 React Hooks...原创 2019-11-08 12:19:01 · 1530 阅读 · 2 评论