11 小时前 / 九彩拼盘
最近，一个做运维的朋友在学渗透测试。他说，他公司请别人做渗透测试的费用是 2w/ 人天，一共 2 周。2 周 10w 的收入，好香~ 于是，我也对渗透测试产生了兴趣。开始了探索之路~ 什么是渗透测试渗透测试这名字听起来有一种敬畏感，给人一种很难的感觉。渗透测试 (penetration test) 并没有一个标准的定义，一些安全组织达成共识的通用说法是： 渗透测试是通过模拟恶意黑客的攻击方法，来评估计算机网络系统安全的一种评估方法。 简而言之：渗透测试就是测试软件的安全性。 渗透测试执行标准 [1] 介绍了做渗透测试的 7 个步骤： 测试前交互。
2 天前 / 冷星1024
前言 Tree-shaking 这一术语在前端社区内，起初是 Rich Harris[1] 在 Rollup 中提出。简单概括起来，Tree-shaking 可以使得项目最终构建（Bundle）结果中只包含你实际需要的代码。 而且，说到 Tree-shaking，不难免提及 Dead Code Elimation，相信很多同学在一些关于 Tree-shaking 的文章中都会看到诸如这样的描述：Tree-shaking 是一项 Dead Code Elimation（以下统称 DCE）技术。 那么，既然有了 DCE 这一术语，为什么又要造一个 Tree-shaking 术语？存在既有价值，下面，让我们一起来看看 Rich Harris 是如何回答这个问题的。
3 天前 / 九彩拼盘
写测试能减少 bug，提高代码质量。同时，重构测试覆盖率高的代码，不担心改坏以前的功能。 前端的测试可以分为 3 类：单元测试，集成测试 和 UI 测试。 单元测试是对软件的最小单元进行测试。比如：一个函数，一个组件。集成测试，也叫组装测试或联合测试。在单元测试的基础上，将所有模块按照设计要求组装成为子系统或系统，进行测试。UI 测试是对 UI 的呈现效果和交互进行测试。本文主要介绍用 Jest[1] 来写单元测试。Jest 是一款优雅、简洁的 JavaScript 测试框架。
3 天前 / 太空编程
前端项目版本的维护，通常在 package.json 文件中的 version 属性进行配置，当我们要在前端页面中显示的时候，可以按如下操作： import config from '../../package.json'export default {name: 'Footer',data() {return {appVersion: config.version}}}那么项目迭代中，如何来维护我们的版本号？只能手动在 package.json 中修改么？ 其实可以在打包执行命令的时候，通过命令及参数帮助我们实现自动升级版本号的目的。
5 天前 / 王键创生
阅读原文，体验更佳！ 周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。 NewsESLint 8 支持 ES2022。 Class public instance fields and private instance fieldsClass public static fields and private static fieldsClass private instance methods and accessorsClass private static methods and accessorsRegExp match indicesTop-level awaithttps://eslint.org/blog/2021/10/eslint-v8.0.0-released Sanitizer API 把 html 字符串不加处理直接渲染到页面上是很危险的行为，一不小心就会触发 XSS 问题...
6 天前 / yybbb
近年来，阿里数据中台产品发展迅速。核心产品之 Quick BI 连续 2 年成为国内唯一入选 Gartner 魔力象限的国产 BI。Quick BI 单一代码仓库源码突破了 100 万行。整个开发过程涉及到的人员和模块都很多，因为下面讲的一些原则，产品能一直保持在快速的开发状态。 先分享几个关键数据： 代码：TypeScript 82 万行，样式 Sass+Less+CSS 18 万行。（cloc 统计，去除自动生成代码） 协同：Code Review 12,111 次，Commit 53,026 次。
10 天前 / 楼外青山
本文字数：2585 字 预计阅读时间：8 分钟 背景近期团队开发的新产品的官网上线了，随之而来的问题就是如何让网站更快更好的传播出去。当然 SEO 就是最常见的手段之一，对官网的 SEO 工作有利于产品的网络传播和分享。 有的团队会有专人负责 SEO 的工作，那么作为离网站页面“最近”的前端工程师，可以为 SEO 做哪些工作呢？ 为了更好的沉淀 SEO 相关内容，为后续 web 产品提供优化指南，本文就以前端工程师的角度，通过调研沉淀出了前端通用 SEO 技术优化指南。
12 天前 / 九彩拼盘
文章来源于 ELab 团队，作者 ELab.liqiao 深入浅出 Performance 工具 & API 概述 日常开发任务中，对于性能优化或多或少会接触到一些内容，可能也参照过雅虎 35 条军规 [1]进行过相关的性能优化，但是具体的优化结果以及实际的页面速度如何，我们怎么去看呢？以及出现性能问题了，我们如何通过现有工具进行定位 & 解决？也就是今天我要给大家介绍的内容主题了「Performance」，主题偏向工具介绍，主要从下面 4 个方面介绍今天的内容。
15 天前 / 冷星1024
一、背景 痛点某天产品：xxx告主反馈我们的注册不了！天运营：这个活动在 xxx 媒体上挂掉了！ 在我司线上运行的是近亿级别的广告页面，这样线上如果裸奔，出现了什么问题不知道，后置在业务端发现，被业务方询问，这种场景很尴尬。 选择公司存在四个事业部，而每个事业部不下于 3 个项目，这里至少 12 个项目，这里作为伏笔，业务线多。 我们是选择自己做呢，还是选第三方的呢。我们比较一下几款常见第三方。 Fundebug：付费版 159 元 / 月起，数据存在第三方，而数据自我保存需要 30 万 / 年。还是很贵的。
18 天前 / Ryan众乐
首发于分享前端开发的心得写文章登录一顿操作，我把 Table 组件性能提升了十倍黄轶热爱技术，热爱分享 145 人赞同了该文章背景 Table 表格组件在 Web 开发中的应用随处可见，不过当表格数据量大后，伴随而来的是性能问题：渲染的 DOM 太多，渲染和交互都会有一定程度的卡顿。 通常，我们有两种优化表格的方式：一种是分页，另一种是虚拟滚动。这两种方式的优化思路都是减少 DOM 渲染的数量。在我们公司的项目中，会选择分页的方式，因为虚拟滚动不能正确的读出行的数量，会有 Accessibility 的问题。
18 天前 / 字节跳动终端技术
一、背景 字节跳动发展至今，线上已经有数量级庞大的 Web 项目，服务着数以亿计的用户。 随着用户数量的不断增长，对于站点体验衡量的的需求也日益紧迫，用户会将产品和他们每天使用的体验最好的 Web 站点进行比较。想着手优化，则必须先有相关的监控数据，才能对症下药。 性能是留住用户的关键。大量的研究报告已经表明了性能和商业成绩的关系，糟糕的性能会让您的站点损失用户数、转化率和口碑。
19 天前 / 王键创生
阅读原文，体验更佳！ 周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。 Newslayui 即将退出历史舞台 layui 官网将于 2021 年 10 月 13 日进行下线。 https://www.layui.com/ Webpack 5.54.0 发布 Webpack 5.54.0 现已发布，主要更新内容有： Features 改进常量折叠以允许跳过更多 && || 和 分支允许在 webpack 中使用所有的 hashing，用 output.hashFunction 进行配置在模块中使用 eval 时，不再完全从内部图分析中跳出 Bug 修复 force bump enhanced - 解决错误的方法 Performance 减少创建 snapshots 时的分配次数添...
21 天前 / pshu
作为前端开发者不可避免地会接触到一些第三方库，而且这些第三方库大多都是英文命名的。那今天 P 叔就带大家复习下前端开发者容易接触到的单词。 mocha mocha，读作“牟卡”，音译成“摩卡”，是 JavaScript 中几个测试框架比较有名的一个。这个单词作为汉语使用者经常被读作“抹茶”，P 叔曾经一个留过洋的同事就这么读过，被我无情地纠正了（如果这位同事读到了这篇文章，请记得赞赏下）。所以mocha是咖啡，这样大家就好理解为什么它的 logo 是一个咖啡色的徽章，上面放了杯咖啡。 那好奇的小伙伴会继续问，那抹茶是啥啊。
22 天前 / 冷星1024
在我长期的固有认知中：为了收集和上报网站交互过程中 JavaScript 的报错信息和其它相关数据，我们一般会采用自研或者第三方的 SDK，也可以简单理解为埋点。这也是为了方便生产问题的排查，做到可溯源。 但是，在前一段，和隔壁组的同事交流时，我发现了一个有点东西的系统 --Rejouer。这个系统可以做到完整复现用户的操作行为，类似于录屏的功能，起初我还真的以为他们就是给我放了一个录屏，后来发现没那么简单。 本文也是在和这位同事探讨的过程中得到的一些启发。 业务背景不要重复造轮子！这是我一直以来的信念。轮子的出现必定是要为业务服务。
22 天前 / 太空编程
近两年的职场内卷现象越来越严重，996 工作制在各大公司已经很常见，甚至有更甚者，告诉你我们公司的前端是如何内卷的？ 为了数字化转型，公司要为产品平台化打造一个办公协同的在线管理系统，来规范化项目流程管理和数据资料共享。 为了这个目标部门一开始给到的人力资源配置是这样的： 产品经理（一个，其实算半个）后端（一个）前端（一个）为什么说产品经理只有半个，都知道产品经理的职能包括产品需求的整理，产品原型的输出，后面与设计师的对接，而这里的产品经理只提供系统功能的简单梳理然后以思维导图形式给到前端工程师来做出相应的前端页面。