摘要: Web前端技术由 html、css 和 JavaScript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理, 阅读全文
posted @ 2020-12-09 20:12 酷儿q 阅读(630) 评论(0) 推荐(0)
摘要: 文件上传漏洞及危害 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器上,当开发者没有对该文件进行合理的校验及处理的时候,很有可能让程序执行这个上传文件导致安全漏洞。大部分网站都会有文件上传的功能,例如头像、图片、视频等,这块的逻辑如果处理不当,很容易触发服务器漏洞。这种漏洞在以文件名为 UR 阅读全文
posted @ 2020-12-09 20:06 酷儿q 阅读(221) 评论(0) 推荐(0)
摘要: 无障碍 Web “Accessibility”,在 Web 发展的初期,人们习惯把它翻译成“无障碍”,因为它主要考虑如何让残障人士更容易地访问 Web 内容。诸如有行动障碍的人难以完成需要用鼠标进行的精确手部动作,他们更多的需要靠键盘;有视觉障碍的人(低视力、色盲、失明)需要使用屏幕放大镜(物理放大 阅读全文
posted @ 2020-12-09 20:04 酷儿q 阅读(171) 评论(0) 推荐(0)
摘要: 这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章,它介绍了如何在网页中使用css、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后,我想挑战一下,尝试使用纯css来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个 阅读全文
posted @ 2020-12-09 20:00 酷儿q 阅读(1201) 评论(0) 推荐(0)
摘要: 移动端app分类 1、Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、Web App 基于Web的app手 阅读全文
posted @ 2020-12-09 19:53 酷儿q 阅读(247) 评论(0) 推荐(0)
摘要: css 动画主要分为css 动画分类和CSS 常用动画库简介与js 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与js 动画主要是Animate. 阅读全文
posted @ 2020-12-09 19:48 酷儿q 阅读(172) 评论(0) 推荐(0)
摘要: 1、通过window.open()打开新页面下载文件 window.open(`url`, '_self') 使用场景:下载excel文件,后端提供接口,接口返回的是文件流,可以直接使用window.open(),最简单的方式。 优点:最简洁; 弊端:当参数错误时,或其它原因导致接口请求失败,这时无 阅读全文
posted @ 2020-12-09 19:45 酷儿q 阅读(1434) 评论(0) 推荐(1)
摘要: Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOcss OOCSS 意为面向对象的CSS。这种方法有两种主要 观点: 结构与设计分离 容器和内容分离 使用这套结构,开发者能得到可以在不同地方使用的一般类。 在这一步,会存在两点(通常就好 阅读全文
posted @ 2020-12-09 19:43 酷儿q 阅读(339) 评论(0) 推荐(0)
摘要: 每天,数以百万计的开发人员使用 npm 或 yarn 来构建项目。运行npm init或npx create- response -app等命令几乎构建js项目的首选方式,无论是为客户端或服务器端,还是桌面应用程序。 但是npm不仅仅是初始化项目或安装包。在本文中,我们将会介绍 npm 的13个技巧 阅读全文
posted @ 2020-12-09 19:41 酷儿q 阅读(322) 评论(0) 推荐(0)
摘要: 在开发者的弹药箱里,命令行是最具生产力的工具之一。掌握它们可以给你的工作流程带来非常积极的影响。因为,许多日常任务都可以用一条命令然后按回车来解决。 在本文中,我们为你准备了一系列常用命令,帮你充分利用你的终端。这其中有些命令是系统内置的,另外的一些则是需要另外安装的免费工具,不过这些免费工具是经历 阅读全文
posted @ 2020-12-09 19:39 酷儿q 阅读(160) 评论(0) 推荐(0)
摘要: 在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示。 一、图片懒加载 其实图片懒加载的核心思想很简单: 通过预先将图片的src资源指向一张小图片或空,并通过 data-src 来记录其实际图片地址。 通过 阅读全文
posted @ 2020-12-09 19:38 酷儿q 阅读(370) 评论(0) 推荐(0)
摘要: 我们将使用纯css打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值,以查看用户是否已经选中或取消选中该checkbox。我们都知 阅读全文
posted @ 2020-12-09 19:35 酷儿q 阅读(1104) 评论(0) 推荐(0)
摘要: 最近接触了很多前端的小伙伴,和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。 在交流中我发现了一个很有意思的现象,大家同样是入门不足三年,一部分感觉前端是一个很有前途的职业,甚至一部分两年经验的前端同学透露年薪已经30W以上了,而另一部分则表示前端薪资水平不高,技术体系庞杂,迭代速 阅读全文
posted @ 2020-12-09 19:33 酷儿q 阅读(454) 评论(0) 推荐(0)
摘要: 我们都有这样的经历:当学习了一种前端技术的时候,同时会有几种新的前端技术诞生。 还有,你选择的那种前端技术,也许已经过时了。然而我们似乎也从来没有关注为什么会这样。 典型的解释似乎是 web 开发者天生不耐烦,永远追求最前沿的技术,赶时髦。总的来说:前端技术更迭如此之快是整个开发者社区的不明智(而你 阅读全文
posted @ 2020-12-09 19:29 酷儿q 阅读(224) 评论(0) 推荐(0)
摘要: 于页面相应时间,有一条著名的“2-5-8原则”。当用户访问一个页面: 在2秒内得到响应时,会感觉系统响应很快;在2-5秒之间得到响应时,会感觉系统的响应速度还可以;在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但可以接受;而超过8秒后仍然无法得到响应时,用户会感觉系统糟透了,进而选择离开这个站 阅读全文
posted @ 2020-12-09 19:27 酷儿q 阅读(344) 评论(0) 推荐(0)
摘要: 除了使用 js 追踪用户,现在有人提出了还可以使用 css 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁,且 不好屏蔽,值得尝试一波 我们可以用它来做什么 我们可以收集关于用户的一些基本信息,例如 屏幕分辨率(当浏览器最大化时)以及用户使用的什么浏览器(引擎) 此外,我们可以监测用户 阅读全文
posted @ 2020-12-09 19:25 酷儿q 阅读(82) 评论(0) 推荐(0)
摘要: 在过去的几星期里,随着 Martin Fowler 博客上,那篇 Cam Jackson 写的微前端的文章发布,到处都在讨论 Microfrontend。作为一个微前端 “专家”,我也分享一下:如何去落地微前端。 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单 阅读全文
posted @ 2020-12-09 19:21 酷儿q 阅读(122) 评论(0) 推荐(0)
摘要: 埋点方案的确定,业界的埋点方案主要分为以下三类: 代码埋点:在需要埋点的节点调用接口,携带数据上传。如百度统计等;可视化埋点:使用可视化工具进行配置化的埋点,即所谓的「无痕埋点」,前端在页面加载时,可以读取配置数据,自动调用接口进行埋点。如开源的Mixpanel;无埋点:前端自动采集全部事件并上报埋 阅读全文
posted @ 2020-12-09 19:19 酷儿q 阅读(425) 评论(0) 推荐(0)
摘要: css3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 css 预处理器,比如 SASS,以上示例你或许 阅读全文
posted @ 2020-12-09 19:17 酷儿q 阅读(297) 评论(0) 推荐(0)
摘要: 互联网有数不清的网页,且不断在以指数级速度产生新内容。到 2022 年,整个互联网创建和复制的数据将达到 44 ZB,也就是 44 万亿 GB。这么大体量内容的背后也带来了丰富信息源,唯一的问题是怎么在这浩如烟海的信息中检索到你想要的信息并带来价值。 直接解决方案就是使用 Web 挖掘工具 。Web 阅读全文
posted @ 2020-12-09 19:15 酷儿q 阅读(570) 评论(0) 推荐(0)