关于segmentfault-技术周刊:SegmentFault-思否技术周刊-这份前端大杀招接住

1次阅读

共计 3101 个字符,预计需要花费 8 分钟才能阅读完成。

前端即网站前台局部,运行在 PC 端、挪动端等浏览器上展示给用户浏览的网页。前端技术个别分为前端设计和前端开发,前端设计个别能够了解为网站的视觉设计;前端开发则是网站的前台代码实现,是创立 WEB 页面或 APP 等前端界面出现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生进去的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。

前端开发追随挪动互联网倒退带来了大量高性能的挪动终端设备利用。HTML5,Node.js 的广泛应用,各类 UI 框架,JS 类库层出不穷,开发难度也在逐渐晋升。

热门文章

《CSS 实现可拉伸调整尺寸的分栏布局》

实现这个成果须要借助 resize 个性,能够人造的实现元素拉伸个性。最常见的就是 textarea,默认就是能够拉伸的

<textarea></textarea>

不过,咱们这里须要的不是 textarea,而是一般的元素。一般的元素要实现这样的成果也很容易,只须要在overflow 不是 visible 的状况下,增加 resize 属性就行了

.resizable {
  resize: both;
  overflow: scroll;
}

《Sass 利用之实现主题切换》

背景:实现主题切换有几种不同的计划,比方应用 CSS 变量,应用 JavaScript 动静加载对应的主题款式文件等。本文次要讲的是如何应用 Sass 实现主题切换。

实质:Sass 作为 CSS 预处理器,须要编译成 CSS 后,能力被浏览器辨认和解析。因而无奈在浏览器中间接应用 Sass 实现相似 CSS 变量那种动静切换。实质上来说,我的项目中有几个主题就要提前定义好几份主题款式并全副引入。

《玩转 AbortController 控制器》

绝大部分状况,网络申请都是先申请先响应。然而某些状况下,因为未知的一些问题,可能会导致先申请的 api 后返回。最简略的解决方案就是增加 loading 状态,在所有申请都实现后能力进行下一次申请。
但不是所有的业务都能够采纳这种形式。这时候开发者就须要对其进行解决以防止渲染谬误数据。

《前端监控的搭建步骤,别再一头雾水了!》

在入手实现之前,首先脑子里要有一个整体脉络,明确搭建前端监控具体的流程步骤有哪些。因为前端监控零碎实际上是一个残缺的全栈我的项目,而并不仅仅是前端,甚至次要的实现都是围绕在数据方面的。

当然了,还有一点阐明,本篇的实现次要是面对一般业务,面向中小厂自研的方向。我看过大厂做的监控零碎,非常复杂能力也十分强,动不动就是亿万级别的数据,最初整还到了大数据的方向。我只介绍如何实现次要性能,如何解决问题。

《搭建前端监控,如何采集异样数据?》

异样数据,是指前端在操作页面的过程中,触发的执行异样或加载异样,此时浏览器会抛出来报错信息。
比如说你的前端代码用了个未声明的变量,此时控制台会打印出红色谬误,通知你报错起因。或者是接口申请出错了,在网络面板内也能查到异常情况,是申请发送的异样,还是接口响应的异样。
在咱们理论的开发场景中,前端捕捉的异样次要是分两个大类,接口异样 和 前端异样,咱们别离看下这两大类异样怎么捕捉。

《JSONP 跨域原理及实现》

同源策略(英文全称 Same origin policy)是浏览器提供的一个平安性能。
MDN 官网给定的概念:同源策略限度了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在歹意文件的重要平安机制。
艰深的了解:浏览器规定,A 网站的 JavaScript,不容许和非同源的网站 C 之间,进行资源的交互,例如:
无奈读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无奈接触非同源网页的 DOM
无奈向非同源地址发送 AJAX 申请

《前端我的项目简单的包治理不晓得怎么办, 来看这篇就够了》

痛点:
日常开发中, 往往咱们在我的项目中援用的很多依赖包,然而随之依赖包的降级,咱们的我的项目之间的依赖就越来越难以保护,包与包之间版本的援用也让咱们头疼。
Lerna 包治理:
正如官网所说的,Lerna 是一个管理工具,用于治理蕴含多个软件包(package)的 JavaScript 我的项目,对于应用 git 和 npm 治理多软件包代码仓库的工作流程进行了优化。

《Three.js 打造缤纷夏日 3D 梦中情岛 🌊》

开发之前,须要筹备页面所需的素材,本文用到的海岛素材是在 sketchfab.com 找的收费模型。下载好素材之后,在 Blender 中关上,按本人的想法调整模型的色彩、材质、大小比例、角度、地位等信息,删减不须要的模块、缩减面数以压缩模型体积,最初删除相机、光照、UV、动画等多余信息,只导出模型网格备用。

《如何实现一个能准确同步滚动的 Markdown 编辑器》

unified 是一个通过应用语法树来进行解析、查看、转换和序列化文本内容的接口,能够解决 Markdown、HTML 和自然语言。它是一个库,作为一个独立的执行接口,负责执行器的角色,调用其生态上相干的插件实现具体任务。同时 unified 也代表一个生态,要实现后面说的文本处理工作须要配合其生态下的各种插件,截止到目前,它生态中的插件曾经有三百多个!鉴于数量切实太多,很容易迷失在它宏大的生态里,堪称是劝退生态。
unified 次要有四个生态:remark、rehype、retext、redot,这四个生态下又有各自的生态,此外还包含解决语法树的一些工具、其余构建相干的工具。

《「前端 BUG 录」变更 UI 库主题引发的问题》

通过查看款式咱们发现都是 UI 的款式,并没有咱们手动笼罩的款式。
然而这里有一个异样点有四个失效的款式,失常状况是只会有一个。然而这里我疏忽了这个问题,我认为只是有多余的引入,或者没有 externals、peerDependencies 导致有多个。
看上去款式是失效了只不过成果不对,我就狐疑 theme-p 有问题,然而在文档站显示是失常的。
那咱们只能想方法去排查这个谬误款式是谁引入进来的。

《CSS 穿墙术!太强了》

brightness 属性是用来批改亮度的。值能够是百分比,也能够是数值(0.5 = 50%),默认值是 1,但不能是正数。当值越靠近 0,画面越黑,当等于 0 时,整个画面简直就成纯黑的了;值实践上能够趋于无限大,当大到肯定值时,画面就简直成纯白了
能用来干啥呢?有一个十分常见的成果想必大家都看过

《前端语音转文字实际总结》

最近筹备一个技术分享,看到以前做的一个语音转文字的性能,放在 slides 上落灰了,索性整顿到这里和大家分享下。
从技术选型,到方案设计,到理论落地,能够说把全链路都笼罩到了。
语音转写流程图
PC 端浏览器如何录音
录音结束后语音如何发送
语音发送和实时转写
通用录音组件
总结

热门问答

  • 怎么应用 vue2+el-table 实现甘特图?
  • vue 是否实现向后端一样再部署时动静配置。
  • js 数据处理
  • 编写一个 js 算法,用一次循环将数组中呈现 2 次或者以上的值删掉
  • 在生产环境中 axios 向后端发送申请为什么不必 localhost 呢?
  • 我在 next.js 中应用 plaiceholder 这个插件去模糊化图片的时候,当图片数量比拟多的时候为什么会卡住?
  • 递归和动静布局的区别,应该如何了解?
  • animation 实现无缝滚动动画会空白
  • 如果一次网页操作自身就只会触发一次回流 / 重绘, 那么虚构 dom 还有劣势吗?
  • 如何应用 webapck 解决非凡文件,比方 xx.lock 文件

课程举荐

《前端大数据可视化实战》

课程播种:

  • 把握一项随处可见、日益减少的技术需要
  • 晋升本身技术,拓宽前端视线
  • 增强硬实力,把握降职机会
  • 基于计算机底层,向前端架构迈进

PS:大家想看哪些方面的技术内容,能够在评论区留言喔 ~
如有问题能够增加小姐姐微信~

正文完
 0