Web前端开发的思考与感悟入门知识_前端小白指南

最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,也曾看到过有人对前端市场人才的稀缺这样吹捧过:现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样

Web前端开发的思考与感悟入门知识

最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,也曾看到过有人对前端市场人才的稀缺这样吹捧过:

Web前端开发的思考与感悟入门知识_前端小白指南

不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛、供不应求的香饽饽。

对于这样的吹捧,不反对也不支持。因为由于每个人的位置,经历的不同,对事总会有不同层面的理解。而作为一个从成都的菜鸟,蜕变成一名北京厉害一点的菜鸟,也来谈谈自己对于前端的理解。

一、地域差异

在成都的大部分公司,有一种专门负责切图排版的网页工程师。他们需要懂一些PS,然后会使用HTML与CSS排版。而这类人往往是刚参加工作不久的毕业生,响应式布局对他们来说是一种高大上的技能。很荣幸,我也曾经是他们的一员,也正因为如此,我掌握着熟练的切图技巧,而这个层次,可能就是外人认为的入门容易吧,然而实际上还差很远很远。

另外一种,就是比较厉害一点的程序员。他们会js+一门后端语言,比如php,jsp。但是他们会会更加偏向后端一点,他们将 html,css,js当成一种很基本的东西,更多的逻辑都使用后端语言来处理,并不会那么清晰的将html页面与后端语言分离开来。所以我们常常会看到有的页面以.php,.jsp结尾。

来了北京之后,才算是见识了真正的web前端。以至于常常会有一种恨自己为什么不早一点来的感觉,恍如隔世。随着学习的慢慢提升,会感觉到北京的前端更加具有明确的方向。

我们会真正的注重用户体验,所以每个页面都会响应式布局,从PC端适配到最小320px宽度的移动端,更加注重html5/css3的相关知识的运用,也会为了用户体验做很多功能之外的更加合理的处理。会真的很认真的考虑面试中常常会问的如何优化前端性能。因此我们使用gulp+require来构建前端代码,压缩,打包,上传cdn。

总的来说,在北京,前端更加专业与明确一点,发展更加好一点。

二、兴趣是否重要?

我曾经很认真的思考过这个问题,很多前辈大神告诉我,“兴趣很重要。”可是我经过仔细分析自身的情况之后,却得出了一个相反的结论。因为我并没有发现什么东西是我感兴趣、并且能让我能够混口饭吃的。然后现在我也觉得只要我能够这样慢慢努力下去,在前端这个行业里,还是能够拥有一席之地。现实一点来说,只要你能够进下心来不排斥它,你就可以选择它。毕竟人都是要吃饭,要养活自己的,我想大多数人都是没办法指着自己的兴趣过活的。

《一万小时天才理论》告诉我们,在某一个方向专注一万小时,你就能够成为这个方向的专家。我认为,这个道理,在前端也同样适用,专注,比兴趣更加重要。

三、什么心态会影响自己的进步?

不坚定。

至少我现在可以肯定的是,前端方向,并不是一个糟糕的选择。在最初的时候,时常会在UI设计与前端之间摇摆不定。我认为我对UI设计更加感兴趣一点。特别是参与了电信一个视频播放app的设计之后,更是认为自己未来是有机会成为一名优秀的UI设计师。但是我另外又觉得自己在前端方向会更加快一点提升自己。于是在很长一段时间里就纠结在这个问题上摇摆不定,停滞不前。其实不管坚定的选择哪一个方向,在目前的互联网行业里,都是很热门的选择,都有出头之日。而最大的错误就在于,犹豫不决。

浮躁。

如果我最终没能成为一名优秀的前端工程师,那么最大的原因肯定就是心态的浮躁。

谁都想要在短期内成为一名学识渊博,经验丰富,德高望重的前端工程师。我也想,这是很难避免的一个心态问题,别人高额的薪水与自己的困境总是那么轻易的扰乱心神。所以一个月从入门到精通,3个月从入门到精通之类的宣传标语,都是非常受欢迎。然而事实上,这并不可能。打着这些宣传标语的培训机构,最多只能带你入门。甚至很有可能一位在前端行业沉浮好几年的老同学都不敢说自己已经在这个行业算得上优秀了。并不是说几年的时间没办法变得优秀,而是能够静下心来潜心修炼的人确实凤毛麟角。所以其实实际情况是慢慢来,才最快

毕业几年,感觉自己前进道路上最大的阻碍就是这两个心态问题。我希望能够静下心来,将自己学到的东西整理出来,分享给大家,让别人能够更加简单直接的了解自己,二来也锻炼自己的心态。

四、 如何应对新技术层出不穷的现状

很多时候我都会觉得前端对于新人来说其实挺过分的。想要学习一门ui框架,有什么easyui,bootstrap,Foundation等等。想要搞一个自己的静态博客,有什么wordpress,jekyll,hexo等等想要学构建工具,有什么grunt,gulp,webpack等等还有好多传说中都很厉害的库,jQuery,angular,vue,react等等真的眼花缭乱,刚开始怎么分得清谁比谁好啊。一不小心就走一大堆的弯路。

所以这个时候我们就必须明白一个道理。基础的重要性在于,他能够提高我们的学习能力。

bootstrap,angularjs最初于我如传说中的存在,高不可攀。而且很多公司招人都希望员工能够掌握这些技术。所以在基础很薄弱的时候就开始尝试去学习。很显然,效果是几乎没有的。反而会减少我对于前端的自信,会很容易产生动摇,觉得自己不适合。

可是随着基础的慢慢提升,我发现要掌握bootstrap与angularjs似乎也没有那么难。我甚至能够看着文档就有模有样的将这些技术运用起来。这对于以前的我来说,简直就是不可思议。因此,从以前的高不可攀,到现在的触手可及,让我明白了基础的重要性。

而对于最近非常火的react,webpack等,掌握起来也没有当初那种无法触及的感觉。这些技术之所以能火,就说明能够学会的人很多,他并不存在特别难以掌握的瓶颈。如果你的基础够牢靠,你就是这些技术的弄潮儿。

五、前端并没有那么简单

前端不简单的地方,并不在于知识点的掌握,技术的实现,而在于寻找更优解。即使是最简单的页面布局,也存在层出不穷的优秀解决方案,比如在大学的时候,常用table元素来实现几乎所有的页面布局,到现在理解文档流,会运用浮动,各种盒模型,BFC等来实现布局这中间的差距对于一个新人来说是非常巨大的。

从最初的写一大堆js代码,实现一个页面的小功能,到后来发现有的人只需要用几行代码配合html/css就可以控制整个页面的所有动画,这中间的差距,也是非常巨大的。所以前端并不是外界认为的那么简单,甚至并不比掌握好一门后端程序语言那么容易。所以我们要保持敬畏之心。

六、学习方法

在我这个阶段的认识来看,我认为学习最靠谱的方法就是积累。有一个很普遍的假象是,互联网时代似乎获取知识越来越容易,很多人都在担忧所谓的信息过剩的问题。然而实际情况却是,我们更加难以捕捉到对我们来说真正有用的信息。而前端的知识相对而言更加零散与碎片化,并且越来越多样化,所以知识的积累则是一个非常重要的过程。

总的来说,在前端的道路上,遇到过动摇,困惑,迷茫。也因为浮躁的心态停滞不前。好在都一步一步的走了过来。并且可以很把握的告诉自己,这个方向,不会亏待我的付出与努力。

花了很多时间,终于把这篇文章写完了!感悟就是万事开头难,中间难,结尾也难。

海计划公众号
(0)
上一篇 2020/03/24 05:40
下一篇 2020/03/24 05:40

您可能感兴趣的内容

  • 解决页面刷新redux数据丢失问题新手入门_redux零基础入门

    解决页面刷新redux数据丢失问题新手入门 概念 对于目前普遍的“单页应用”,其中的好处是,前端可以从容的处理较复杂的数据模型,同时基于数据模型可以进行变换,实现更为良好的交互操作…

    2020/03/19
  • css环形滚动菜鸟指南内容加载的环形滚动动画效果_动画小白入门

    创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可。 使用的CSS3 特性:transform属性的 rotate,共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为

    2020/04/03
  • vue-element-admin使用攻略_一个后台前端解决方案

    vue-element-admin使用攻略 官方网址:http://panjiachen.github.io/vue-element-admin GitHub:https://gi…

    2020/03/06
  • PHP程序员要掌握的技能使用指南_技能入门攻略

    1. Composer第一点就要提 Composer ,自从 Composer 出现后,PHP 的依赖管理可以变得非常简单。程序内依赖一些类库和框架,直接使用 Composer 引入即可,通过使用 composer update 安装依赖的包。解决了过去加载外部库的各种难题。Composer 也有国内镜像,速度非常快。现在绝大部分 PHP 开源的项目都提供了

    2020/03/29
  • apache反向代理出现502调整小白教程_apache菜鸟攻略

    1、问题描述:项目上线后,会在接口调用时客户端出现502异常,而服务端则对该此请求作出处理。2、问题原因:经过排查后得知是由于请求并发量大,造成超过请求超时间,但是apache中队列已经加载到请求信息,所有会对请求作出处理。3、解决方式:通过配置 timeout=1200000 Keepalive=On 这俩个参数,加大apache请求超时时间,且保持连

    2020/03/31
  • 一文吃透React SSR服务端同构渲染攻略教程_渲染零基础入门

    写在前面前段时间一直在研究react ssr技术,然后写了一个完整的ssr开发骨架。今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人少踩一些坑,让跟多的人理解和掌握这个技术。相信看过本文(前提是能对你的胃口,也能较好的消化吸收)你一定会对 react ssr 服务端渲染技术有一个深入的理解,可以打

    2020/03/24
  • 购买网络自动化工具时应考虑的7个方面入门基础_工具小白教程

    网络自动化这个概念自网络问世以来就存在了;就在不久前,由于许多原因(包括网络工程师的抵制),其采用速度一直很慢。但现在,众多因素共同上演了一场完美风暴,推动企业需要网络自动化工具。一个因素是,越来越多的网络团队开始感受到在快节奏的数字世界中工作的痛苦,而在数字世界,旧方法根本行不通。通过命令行接口(CLI)逐个设备地手动配置和更新路由器和交换机的方法太慢、容

    2020/03/23
  • circles使用教程_基于HTML5 SVG的轻量级Js圆形进度条插件

    circles使用教程 官方网址:https://www.lugolabs.com/circles GitHub:https://github.com/lugolabs/circl…

    2020/03/11
  • 引入CSS样式的三种方式菜鸟指南_样式攻略教程

    1.行内式内容该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。<h2 style="font-size:20px;c

    2020/03/30
  • 在nodejs中怎么返回文件状态?菜鸟教程网_文件基础入门

    在nodejs中可以使用fs模块的stat()方法来返回文件状态,如使用stats.size获取文件大小,使用stats.isFile()判断是否为文件等。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。fs模块返回文件状态的方法如下:var fs = require(“fs”);
    /*读取文件的状态;fs.stat(path,callback);cal

    2020/03/22
  • 项目中常用的git指令菜鸟知识_git菜鸟指南

    1.新建一个本地分支并切换到新建的那个分支:git checkout -b (新分支名)2.从一个分支切换到另一个分支:git checkout 分支名3.将代码恢复到最近的一次commit 时候的状态:git stash4.将代码从最近的一次commit的状态恢复到最新的进度:git stash pop5.将一个本地子分支合并到本地的master分支:先将

    2020/03/31
  • hugo小白常识_静态站点生成器

    hugo小白常识 官方网址:https://gohugo.io GitHub:https://github.com/gohugoio/hugo 简介描述:静态站点生成器 Hugo是…

    2020/03/11
  • es6 比较有用的技巧菜鸟攻略_技巧菜鸟教程下载

    数组去重var arr = [1, 2, 3, 3, 4];
    console.log(…new Set(arr))
    >> [1, 2, 3, 4]数组和布尔有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧var myArray = [1, 0 , undefined, n

    2020/03/29
  • HTML中文乱码怎么解决?基础知识入门_码使用帮助

    HTML文件乱码一般是因为编码格式不匹配造成的,只要匹配好html文件的编码格式就可。下面是一个中文乱码的html:

    标题

    这是一段测试文本!

    效果图:HTML中的编码方式有三个:gb2312,gbk,utf-8;现在大部分浏览器默认编码的是utf

    2020/03/31
  • React 基础知识 es6使用双向锚点,动态生成,也适用单页面路由项目菜鸟教程网_项目

    场景React页面中,不确定有多少个需要定位的块,根据元素块的个数,生成对应数量的锚点,点击锚点后页面滚动到指定的块。 页面滚动到指定的块,对应的锚点高亮。github地址:https://github.com/fyxwanan/author-demo锚点超链接的一种形式,快速定位到想要看的位置,常用在文章目录等位置。实现dom元素方面// dom
    <div

    2020/03/24
  • gulp-book使用教程_Gulp 入门指南

    gulp-book使用教程 GitHub:https://github.com/og/gulp-book 简介描述:Gulp 入门指南 gulp 是基于 node 实现 Web 前…

    2020/03/11