15 posts tagged with "前端"

View All Tags

噢!原来这就是 TypeScript

峰华

峰华

前端工程师 / B站UP主

简介

我第一次使用 TypeScript 是 16 年在读研的时候,学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言,没想到还能这么通用。后来在写作业的时候,发现 TypeScript 也并不是特别难,只不过是给 JavaScript 加上了类型信息,让代码不那么容易出错,并且支持高级的面向对象编程范式,让 JavaScript 变得跟 Java/c# 差不多。接下来,这篇文章就给你揭开 TypeScript 的面纱,对它来一个宏观上的认识,然后介绍一下如何编写并运行 TypeScript 程序,如何定义类型,另外假设你有 JavaScript 基础。

前后端通信之 HTTP 协议

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

简介

前后端数据的交换一般是基于 HTTP 协议。

HTTP 协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端。

在 HTTP 中,数据称为资源,可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。

5个技巧助你成为 CSS 大神

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

简介

作为一名前端工程师,经常在写完 HTML 以后,才觉得真正的噩梦要开始了,啊,写 CSS 的时候,面对满屏乱飞的组件,真想手动给他们挪到该在位置上……

都说 CSS 很难掌握,最愁给页面编写样式,其实都是因为还没有形成一个对 CSS 宏观的了解,只要有了正确的学习方法、设计思维,再通过不断的积累,就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下,让你在以后编写 CSS 的时候不再发愁。

样式调整

CSS 最基本的功能就是调整 HTML 的样式,可以设置元素的宽高、字体的颜色、大小和间距、背景颜色或图片等。这些跟传统的富文本编辑器比如 word 是一样的效果。有些属性可以一次性设置多个项目,比如background可以同时设置:

  • background-color
  • background-image
  • background-origin
  • background-position
  • ...等等

action

业余时间经常到像 mdn 之类的文档网站上去查它们的用法,能长不少见识。

CSS Flexbox 布局教程 2020 最新版

峰华

峰华

前端工程师 / B站UP主

在 CSS flexbox 布局出现以前,如果要控制 HTML 元素的布局,要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐,稍一不注意,就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了:要么手动计算高度然后算出中心点,要么用 line-heightheight 的结合,要么用十之八九不生效的 vertical-align 属性等等等等。自从 flex-box 出现以后,一切似乎就豁然开朗了,水平垂直各种花式对齐,空间分配由你做主。当然,要用好它,用对它也不是一件容易的事,今天就给你说说 flex-box 布局,看完之后你也能熟练的运用它!(博客中的示例都是真实的 HTML 代码,可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例,在小屏幕下会有横向滚动条)

CSS 选择器优先级(特异性、权重)详解

峰华

峰华

前端工程师 / B站UP主

在写 CSS 的时候你一定遇到过有些样式明明写对了,也选择了正确的 html 元素去应用这些样式,可是就是不生效,这是为什么呢?因为在选择同一个 HTML 元素的时候,不同的选择器有不同的优先级,优先级低的选择器的样式会被优先级高的覆盖。

什么是 CSS 选择器优先级

CSS 选择器优先级,也叫特异性,是指在给 HTML 元素应用样式时,如果有多个 CSS 选择器同时指向了这个元素,那么优先级高的选择器的样式会最终应用到这个元素上。

制作渐变背景生成器 - React State和Event教程

峰华

峰华

前端工程师 / B站UP主

Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state,状态管理,还有事件处理。

你将学到的

这个小工具提供了两个颜色选择器,分别可以选择渐变的两个颜色,渐变的角度是 75 度,线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。

效果演示:

源码:Github - React-Examples

示例和视频

State 简介

首先看一下什么是 state,上篇文章讲了 props:

  1. 用来给组件传递参数,组件会根据这些 props 来控制它自己生成的 html
  2. 它的值不会发生变化,只要传给他的一个固定的值,那么它就会永远是这个值。

如果想让一个属性根据条件发生变化的话。那么这里就要用 state 状态。状态就是说这个组件可能在某一个时间或者是发生了什么事件之后,会发生一些变化,就拿这个例子来说,咱们要展示一个渐变的背景,那么这个背景颜色就要根据用户所选择的颜色来发生改变,这个颜色因为是变化的,所以说它就要定义成一个 state,它的值是在用户选择完颜色之后来进行更新的。

使用 State 跟普通 JavaScript 相比,它的好处是:

  • 在组件内部管理状态,代码封装性好,出错的话也容易定位到问题组件。
  • 数据和展示分离,只需要修改 state 的值,就能更新对应的组件。
  • state 可以通过 props 向下传递给其他组件,只要 state 改变,所有使用它的组件都会刷新。

接下来看一下这个例子怎么实现。

一组美丽的按钮 - React Props 教程

峰华

峰华

前端工程师 / B站UP主

你在写 HTML 页面的时候肯定知道,html 标签的属性都是固定的,比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的,不方便扩展和复用。而用 React 创建组件的话,可以给它定义一些更符合语义和逻辑的属性,比如颜色、尺寸等。这些属性在 React 里边叫做 props,你可以自己定义这些属性将会影响到组件的哪些部分。这样的一个组件,通过给它一个合适的名字,比如 Button,那么所有按钮的展现都可以用它来实现,只需要改变它的属性就可以展示为不同的样式。那今天我就教你定义一个这样的按钮组件,它有默认的背景色、文字颜色、还有实心和线框样式,后边通过属性,props,来控制它是蓝色、红色还是黑色,然后利用另一个属性来控制它是实心的背景还是线框的。好,那咱们开始吧。

你将学到的

上一张效果图:

带你走进React的大门 - 你为什么应该学React?

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

Hello! 今天来带你走进 React 的大门!我第一次听说 React 是我在美国读研的时候,室友选了 web programming 这节课,然后遇到了关于 react 的好多问题,就是总也配置不好。我看他那个时候 React 的配置特别麻烦,要引入一堆依赖,像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业,问了我一个问题,大概是有一个组件显示不出来,结果看了半天我也不知道是怎么回事啊,因为我也没学过。后来他自己研究出来了,是因为这个组件在使用的时候没有大写。我当时就觉得这个 React 好复杂呀,然后就决定,我可不学他,后来我在暑假里面就学了 vue,但是回国之后呢,因为某些原因我就没有找后端的工作,转向了前端,当时又看这个 react 已经变得特别方便了,有一个 create react app 工具,就能省好多事儿,而且 react 的生态圈又特别的庞大,就决定学了 react。因为我觉得这个 react 开发大型的前端应用特别方便,尤其是它出了 hooks 之后。所以,我今天想给你分享一下。这个 react 到底是什么东西?它有什么好处?

超简单!使用 Docusaurus 搭建个人博客(二)

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

如果你看了上期视频的话,那么你应该学会了怎么在本地搭建一个 docusaurus 博客,但是你不能只在本地来看这个博客吧,得让全世界来欣赏你的杰作,所以说咱们得把这个博客部署到服务器上。部署有两种方式:

  • 部署到国外,是免费的。
  • 部署在国内,需要自己购买一个域名,还有服务器,大概有个 300 来块钱就差不多了。

超简单!使用 Docusaurus 搭建个人博客(一)

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

历史迷茫

我以前总也找不到一个满意的博客系统,wordpress 这个程序又大,然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台,后来发现了一些静态的网站生成器,像 hexo 这种,但是发现上面的主题又不好看,又懒得自己去写。后来就有一阵子我就直接把博客就发布在了其他的第三方的博客平台上。现在发现了这个 docusaurus, 它的主题跟我之前看到的一个大佬 Dan Abramov,它的 overreacted.io 博客,风格是一模一样的,因为他是 react 的作者之一,估计这个他们这个样式都是互相借鉴,它这个主题可以切换暗黑和白天模式,比较好看。安装和部署也特别简单,我的博客也是用它这个搭建的。

博客有啥用?

首先先弄清一个问题,为什么要有一个自己的博客?,博客的好处就是对于咱们程序员来说:

它可以当成是咱们的副业。如果咱们在写代码的时候遇到了问题,或者是在学习一个新的技术的时候,咱们可以把这些学到的东西都给整理成博客,然后发表出来,这样的话呢,既可以能巩固咱们的知识,检测咱们这个技术有没有学懂,然后呢还能让其他想学这些东西的人也能看见,等这些分享的人多了之后,你就会慢慢攒一些粉丝,那这样你的博客就可以成为你的一个品牌,有了这个品牌之后,你再去面试或者是干嘛的,你就可以把它拿出来,然后大家可以看到你的作品,这样的话对于你以后的职业发展还是很有发财升官都有帮助。现在你也了解这个博客的好处了吧,那咱们开始用这个 Docusaurus 搭建一个博客

程序员如何提升英语水平

峰华

峰华

前端工程师 / B站UP主

本篇文章适合所有想提升英语尤其是阅读能力的人,因为我自己程序员,所以我来拿自己的亲身经历来帮助大家发现自己提高英语技能的方法。

一点历史

先说在中学时,虽然一开始我对英语很有兴趣,而且也考过几次高分,但是到了后来就慢慢的不喜欢学习了,高考的时候英语正好卡在 90 分的及格线上,然后高考分数只够上了一个专科,开始了程序员之路。

动机

其实我学英语的动机并不是因为技术文档都是英文的,那时候还只知道阅读别人翻译好的中文文档,有错误和疏漏有时候都不知道。当时工作的时候,我突然决定读一个专升本,于是报考了北大的网络教育学院,然后顺利入学了。第二学期,我们都需要考学士学位英语俗称英语三级,才能拿到学位证,满分 100 分拿到 60 分及格才过关,这个到毕业前每学期都可以考一次。我第一参加考试时是裸考,以为比四级会简单些,谁知多年不用的英语水平早就下降了,结果只考了 56 分。我就看着这差 4 分的成绩到干瞪眼!为嘛老天爷对我这么不公平,差这么一点点(可能比 59 好点吧)。然后就突然激发起了我的斗志,我要努力学英语!

11个前端工程师必备的网站

峰华

峰华

前端工程师 / B站UP主

好多小伙伴有疑问,就是说有哪些值得去关注的前端网站,我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站,把咱们的这个知识给误导了。这里呢我准备了几个我经常关注的一些网站,一部分是国外的,然后有一部分是国内的,因为国内的好多的都是质量参差不齐,但国外的话普遍的质量比较高(事实如此)。不过呢,咱们国内的也有一些比较好的平台,我在这里给咱们一共准备了 11 个可以关注的网站。

2020年最新前端学习路线

峰华

峰华

前端工程师 / B站UP主

这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始,然后一路升级到高级工程师该掌握的技能,层层相扣,让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。

俗话说知己知彼百战不殆,要成为一名前端大神,首先知道它是做什么的。单纯从工作角度看,无非就是写写前端样式,连接下后台 api,解析解析数据,然后显示给用户,核心逻辑是这样没错,只是这中间掺杂着无数个边边角角的问题,比如框架选择、性能优化、兼容性调整、工程化等等。不过呢,这些并不需要一次性掌握,随着一次一次完成工作任务,解决 bug,这些自然而然就学会了~

在正式开始之前,咱们先把心态放平,就像玩游戏,游戏满级也不是一天两天的事,满级之后也才是一个新的开始。。。无尽的追求完美~。时间上,掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间(看自己的意志力和上进心),之后就是在工作实践中不断的提升自己,时刻关注业界新闻,保持在科技的最前沿。工作是一个长期的事情,咱们静下心来慢慢学。