前端开发

等灯等灯~在干货系列无数次被催更之后，渡老师的前端工具小课堂又开课啦！ 小渡在后台留言中发现同学们最近对前端CSS的热情很高嘛，最懂你的小渡今天就带着CSS预处理器跟大家见面啦，想学好前端？先来了解一下这些CSS预处理器叭！ 了解css的大家可能都知道，我们可以用它来写网页样式，但是却不能用它来编程。在程序员眼里，css是一件很麻烦的东西。 它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。所以，就有人就开始为css加入编程元素，然后就取个名字叫做"css预处理器"。 什么是css预处理器 通俗的说，css预处理器定义了一种新的语言。 基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的css代码的编写过程的同时，它能让你的css具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。 css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。 什么是Sass Sass是一门高于css的元语言。 它能用来清晰地、结构化地描述文件样式，有着比普通css更加强大的功能。 Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。也就是我们上面说的一种预处理器语言，反正就是可以让我们风骚的定义css。 Sass优缺点 它在css的语法基础上增加了变量（variable

转眼间2020年已经过去了近两个月，在祈祷疫情尽快消散的同时，大家也不要忘了学习啊！ 众所周知前端开发是一个综合性比较强的编程工作，前端开发人员不仅需要一定的审美观和设计观，同时还需要精通诸如HTML、CSS、JavaScript等错综复杂的技术。因此，在前端开发工作中，借用一些开发框架往往能达到事半功倍的效果。 今天的文章小渡为大家搜罗了数十款目前最受程序员欢迎的前端CSS框架，其中有的霸榜已久，也有不少后起之秀，有的是单纯的CSS框架，也有的结合了JavaScript以提供更丰富的功能。一起来看看有没有你的菜吧！ 01Bootstrap Bootstrap无疑是目前使用最广泛的CSS框架，GitHub上近14万的Star数就足以说明问题。 Bootstrap是一款由Twitter推出的开源CSS框架，它的核心是由一系列用于Web前端开发的工具包组成。Bootstrap基于HTML、CSS和JavaScript，是一款非常适合敏捷Web开发的CSS框架。 它的优点有很多，比如响应式设计，可以智能识别客户端浏览器的类型，从而构造适应当前设备前端布局，这一切都是全自动的。还比如拥有海量资源且简单易学。无论你是高级的前端设计师，还是普通的程序员，都能够很快地掌握Bootstrap的开发流程和开发方式。 不过也有人吐槽Bootstrap稍显臃肿，而且在使用人数太多且不定制化的情况下

在大多数人眼里，互联网前端开发是一个有着高薪水、高职业荣誉感的行业。没错，随着互联网大环境的快速崛起，HTML5的发展，绝对属于既有“钱景”还有前景的的朝阳行业。 高收入、前景光明，即使对前端开发的要求越来越高，也还是有许多新人愿意来一试身手，纷纷打破头往这个行业里面涌。 都说一入前端深似海，从此节操是路人。 想实现从小白到前端大神的华丽转身吗？ 接下来告诉你在学习前端的过程中不得不跨过的这些坑！（从学习的大方向开始说起） 一定要学好英语，虽然英文不好也可以学会前端。但你一定会遇到比英语好的人更多的困难。因为你只能看中文的教程和书籍，学习框架和工具只能依赖中文文档，交流问题只敢去中文社区。而前端99%的工具框架都是歪果仁发明的，这就显得很尴尬了。。。 很多新手学编程都喜欢看视频，每次看完都似乎仿佛好像可能理解里面讲的是什么了。回头你让他写代码，他一行都写不下去。记得要多翻阅前端有关的书籍，看书是主动学习，看视频是被动学习。通过看书你可以自主把握获取知识的速度和节奏。当然我也不是说完全摒弃看视频的学习方式，从视频中你也可以获取到文档书本中获取不到的信息。 主抓基础，避免盲目，花了太多时间学习那些不是特别需要的东西上。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段

web的起源 给大家讲一个故事，在很久以前，互联网还没有出现，电脑虽然可以与另一台电脑通信，但是也就只能做一些发发邮件或者是用FTP传输一些文件的事情。 有个喜欢每天捣鼓新技术的程序员，名字我们暂且叫他小强吧。小强是一个球迷，每天都要看一些关于NBA球赛的新闻，而且搜集了很多有关球队介绍的资料保存在电脑的硬盘上。硬盘上的球队资料大概就是下图的效果。 这样的文件有成百上千个，小强每天都要打开这些文件来欣赏各个球队的风采。有一天晚上，小强打开了“洛杉矶湖人队.txt”，文件中在介绍球队的时候，出现了一个词“科比·布莱恩特”，他灵机一动：这几个字上要是有个链接该多好啊！这样只需要轻轻一点，“科比·布莱恩特.txt”这个文件就能打开了，省的在硬盘上找来找去那么麻烦。对于程序员小强来说，这并不是什么难事，经过思考终于有了解决方案。 定义一个协议，让这些文件之间可以通过一些词链接起来，比如原来的文本是这么显示的：洛杉矶湖人队曾打造出两个“湖人王朝”，明星队员有科比·布莱恩特、奥尼尔等。 现在给这个纯文本的文字加一些标记： 洛杉矶湖人队曾打造出两个“湖人王朝”，明星队员有<a href='科比·布莱恩特.txt'>科比·布莱恩特`</a>、<a href='奥尼尔.txt'>奥尼尔</a>等。 上面这些标记虽然能读懂，但是显示出来没什么用，于是小强就开发了一个软件

使用CSS自定义属性和Web存储API更改站点的布局和颜色。 CSS自定义属性（通常称为CSS变量）一直在稳步进入浏览器一段时间。随着3月份微软Edge 15的发布，现在所有主流的现代浏览器都支持它。 这意味着对于不需要支持诸如Internet Explorer之类的传统浏览器而不负担的项目，可以考虑使用CSS变量（所有意图和目的） - 安全使用。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 编写更好CSS的指南 许多开发人员已经使用具有诸如Sass或Less之类的预处理器的变量作为减少代码重复的手段。本机CSS变量的工作方式大致相同，但不需要任何额外的构建步骤，像常规CSS属性一样级联，最重要的是在运行时可用。 这些优点使本机CSS变量成为其预处理器兄弟姐妹的一个优势，为开发人员打开了大量有趣的事情，而且代码少得多。 在本教程中，我们将探索如何使用CSS变量实现网站建立到名为NoteApp的模拟Web应用程序。这将涉及编写CSS和JavaScript以允许用户更改颜色方案并切换显示的列数。然后，我们将利用Web Storage API来确保为将来的会话保存任何更改。 获取教程文件 首先，从Web Designer的FileSilo下载项目文件。要做到这一点

  以前早就想在csdn上写些技术类的文章来分享，却总是没心思和时间去做这件事，现在由于疫情的影响，就有时间和心思了，我也打算把这件事给做下去。技术分享还是很重要的，对于我们做技术的来说，这样既能提升自己，也能帮助他人解决问题，对于行业的发展也是有积极的作用。   先来简单的介绍下我自己吧，我呢是做java开发的，入行有几年了，前端也会，前端虽然比不上专业的，但是写写还是没问题的。无论是在自己学习还是平时工作中都遇到过很多的问题，可惜的是没有把这些问题的出现和解决方案给详细的记录并分享出来，不过问题不大，在后面的时间我会把我遇到的问题都分享出来。   聊聊java开发的感受吧，对于java基础一定要了解，这对后面进阶有十分重要的作用，面向对象的思想，io，反射，多线程要熟悉，对基本的数据结构要理解并熟悉，还有开发过程中编码规范很重要，就像作品一样，好的代码一眼过去令人愉悦，那种乱七八遭的命名，冗长无用的代码，没有注释的代码会让人不容易看懂，或者就看不懂，一定要注重代码的简洁，这点对我来说我觉得是很重要的。还有要多向别人学习，向比你能力高的同事学习，还有要学会自我学习，我觉作为程序员，每天至少要学习一个小时，就像朗朗曾经说过：”我一天没练，就相当于在慢性自杀＂，作为技术开发人员，也要保持持续的学习，现在互联网发展很快，自身的技术很容易跟不上它的发展。   那就说这些吧

为什么Web页面的加载速度如此重要？在这个信息化的时代，如果一个网站的加载时间过长，大部分用户会极其不耐烦地选择“关掉”！这让辛辛苦苦熬夜敲代码的程序员们情何以堪，不管网站功能如何强大，用户根本都没来得及看一眼，结果网站访问量越来越少，粉丝转化率越来越低，最后，程序员可能就要下岗了。 了解前端开发的程序员都知道，影响网站性能的因素有很多，例如，HTTP请求数量，臃肿的代码，繁重的媒体文件等。如何编写CSS以及如何在浏览器中加载样式表都会对加载时间造成重大影响，接下来推荐五款针对CSS的性能提升工具，以帮助广大前端开发程序员创建一流的网站。 TestMyCSS TestMyCSS是一款免费的在线优化工具，具有很多功能。它可用来检查代码冗余，验证错误，未使用的CSS和寻求最佳做法。程序员只需将网址输入网站的CSS文件，就可以立即开始使用，TestMyCSS可以发现需要改进的所有项目。不仅如此，程序员还可以看到一些有用的提示： 如何简化复杂的选择器 需要去掉的重复的CSS属性和选择器 代码中存在的重要声明的数量 不必要的类特异性 不必要的IE修复 不需要供应商前缀的CSS属性 具有标签名的类或ID规则，例如a.primary-link 通用选择器使用不当 Stylelint 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答

什么是xss攻击？ XSS，即（Cross Site Scripting）中文名称为“跨站脚本攻击”。 XSS的重点不在于跨站攻击而在于脚本攻击。攻击者可以利用 web应用的漏洞或缺陷之处，向页面注入恶意的程序或代码，以达到攻击的目的。 通俗的来说就是我们的页面在加载并且渲染绘制的过程中，如果加载并执行了意料之外的程序或代码（脚本、样式），就可以认为是受到了 XSS攻击。 XSS的危害 通过 document.cookie 盗取 cookie中的信息 使用 js或 css破坏页面正常的结构与样式 流量劫持（通过访问某段具有 window.location.href 定位到其他页面） dos攻击：利用合理的客户端请求来占用过多的服务器资源，从而使合法用户无法得到服务器响应。并且通过携带过程的 cookie信息可以使服务端返回400开头的状态码，从而拒绝合理的请求服务。 利用 iframe、frame、XMLHttpRequest或上述 Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作，并且攻击者还可以利用 iframe，frame进一步的进行 CSRF 攻击。 控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力。 XSS攻击分类 XSS 根据攻击是否持久，可以分为 “反射型XSS”与“存储型XSS”两种。 “反射型XSS

我做web前端开发将近6年的时间了，现在月薪可以接近30000已经算知足了，但是距离我年薪百万的目标还有很长的路要走，而以后靠的不能仅仅是技术，更是一些管理和带人方面的知识和头脑。因为曾经自己自学web前端的时候走了不少的弯路，今天想做下总结： 弯路一：盲目的去学 当初我在对于web前端这个行业什么都不了解的情况下，比如：不知道未来发展趋势，不知道学习web前端应该注意哪些初始问题，不知道具体的学习规划学习路线等等，一味的买书看书，看视频，到了中期阶段萌生放弃的想法，和主要是因为觉得自己越学越迷茫，也知道自己这样学找不到工作，这是初学者最大的误区。 弯路二：孤军奋战 当初在学web前端的时候，从来都没有跟别人交流过，就感觉活在自己的世界里，总认为自己什么都可以搞定，而且很多知识不会了，直接就过去了，并没有深究，而这种学习态度也注定了我的学习是失败，学习前端一定要有讨论的过程，只有跟不同的交流才能了解到你自己不知道的东西。 弯路三：没人指点 web前端对于我来说是从来不了解的行业，而我当时从来没有想过找一个这个行业比较厉害的人去请教下，现在我终于认识到了一点什么叫“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本是一致，而对于一个什么都不懂的初学者根本不会知道怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点，如果感觉自己找不到人

JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中)，后将其改名ScriptEase(客户端执行的语言)。 Netscape(网景)接收Nombas的理念,( Brendan Eich) 在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言。Sun和Netscape共同完成，后改名叫JavaScript。 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript。 为了统一三家,ECMA( 欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。 ECMA-262 是 JavaScript 标准的官方名称。 ECMAScript 年份 名称 描述 1997 ECMAScript 1 第一个版本 1998 ECMAScript 2 版本变更 1999 ECMAScript 3 添加正则表达式 添加tru/catch ECMAScript 4 没有发布 2009