前言 进入公司6个月后被安排到该项目中，据说该项目规模很大，而拆分到公司的就只是二十来个页面，而我就负责其中的3个页面和其他页面的脚本代码，后来负责项目的性能优化工作。至于业务逻辑方面确实没什么可说的，就是CRUD。由一个很好沟通的前辈和我们6个新人一起来搞。这里有两项内容很值得总结，它们都让我技术上增进不少。 目录 1.页面控件数庞大，页面加载极慢，一步
我相信大家首先想到的思路就是在useEffect中通过getBoundingClientRect()获得对应传入元素(id)的位置，然后通过定位增加一个类似的弹窗效果。
在 Playwright 之前，我一般会使用 Selenium 或者 Puppeteer 来进行浏览器自动化操作。然而，Selenium 经常会有一些奇怪的 bug, Puppeteer 则是没有官方 Python 版，非官方版本也只有 async 版本，并且也是有一些奇怪的 bug. 另外，众所周知，Python 的 Async API 并不是那么好使。
Webpack不认识CSS（无法直接处理），就需要先由Loader加工一遍（预处理）
使用 markdown 来给程序写文档是非常方便的，自从用顺了 markdown 之后，都很久没打开过 Word 了。 既然是程序的文档，少不了需要插入一些示例代码，而对代码进行语法高亮渲染并配以合适的颜色主题，会让文档显得更炫，也更便于阅读。 要实现文档代码高亮渲染其实并不难。 实现方法 首先，把 markdown 文件加载为 vue 组件，这需要一个合适的 loader，自己目前使用 vue-markdown-loader。webpack 配置的 module.rules 中进行如下配置： {
Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ，那么这里的 is 到底是什么呢？ 官网介绍的太分散了，这里尽量全面的列举出来。如果有遗漏欢迎补充。
由于微信不允许外部链接，你需要点击页面尾部左下角的阅读原文，才能访问文中的链接。 距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难以下是正文。 管理资源 如果看过之前的系列文章，应该会有一个学习项目webpackStudy，可以从文章下方找到之前的链接。官网给出的示例都是在一个项目中的html页面、package.json和webpack.config.js中进行修改。我为了保留每一小节的代码，并没有按照官网给出的方案处理，而是重新新建的配置文件。可以通过腾讯云开发
Chrome 算是程序员的标配了，从全球的市场份额来看，它在全球市场的份额已经超过 60%。
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel等属性 。
仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候，经常遇到一些很特别的问题。例如：刚刚添加的样式不起作用、jQuery 的代码老是不起作用等等，这些问题往往是不关注细节导致的。而今天我要谈的这个细节，就是关于网页中代码的顺序。没错，代码也是有顺序的，顺序不对有可能会出现一些意外的情况。
我叫小风，是Windows帝国一个普通的上班族。上一回说到因为一个跨域请求，我差点丢了饭碗，好在有惊无险，我的职场历险记还在继续。
emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，引起了不小的讨论：Why We're Breaking Up with CSS-in-JS
对YUI一直很有好感，最近开始看了看YUI CSS GRID，发现这个理念非常好，非常有利于我们工作效率的提高，特别是熟悉了这套CSS之后，我们就不必每一个项目自己都去写一些CSS。其实，我想有心的朋友或多或少的都会收集一些自己常用的CSS，在不同的项目间使用，但是能够做到像YUI CSS这样有逻辑性、模块清楚的，恐怕还比较少见。
本文翻译自：http://www.mbsd.jp/blog/20160921.html ,有改动 原作者：プロフェッショナルサービス事業部 寺田 健 译者：Holic (知道创宇404安全实验室) 0x00 漏洞概述 漏洞简介 URL重定向漏洞有时会造成与上下文变量有关的漏洞，其导致的XSS便是常见的例子之一。本文所描述的漏洞在一年前提交至苹果官方，对应CVE-2016-4585，下面介绍这个漏洞的相关细节。 漏洞利用点 操纵请求中的Host头 Origin Confusion XSS 此外还可以盗取敏感
Monaco Editor 是 VS Code 中使用的开源代码编辑器， 拥有代码高亮和代码自动补全的功能，Monaco Editor 支持的语言有很多，所以使用的时候不需要将全部语言都支持，我们只需要按需加载需要支持的语言就可以了，过官网的例子我们知道 Monaco Editor 有 2 种加载方式，分别是 amd 和 esm，也就是 Requirejs 和 ES Modules。
如果您没有从工作目录中关注此codelab，则可能需要安装step-05文件夹或当前工作文件夹的依赖项。从你的工作目录中运行下面的命令：
作者曾所在我司广告事业部，广告承载方式是以刮刮卡、大转盘等活动页进行展示，然后用户参与出广告券弹层。
KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。
起因是网友给 FixIt 提了一个 issue hugo-fixit/FixIt#411，说图片比例异常，我一回想，最近没动过图片的代码，于是用 Safari 和 Edge 试了一下，发现没问题，那么基本可以确定是 Chrome 新版的问题了。
Hello小可爱们，今天我们又要回到学习主题咯，前面学习了HTML和CSS的用法，今天我们就要为Web页面注入生命啦，那就是JavaScript，通过JavaScript我们可以让我们的页面动起来，这也是Web开发中的一座大山。
即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如animate,hide,show,比如获取元素等/
昨天又有一个同学反馈，跟着视频写代码，一样的代码，但是为啥我这的autocomplete light就不生效。第一个同学反馈我以为是autocomplete light的版本问题，再次有人反馈，那可能是哪不太对劲。
从应用场景来看，类似于于Android的WebView，外部对嵌入页面的控制权较大，包括CSS/JS注入、资源拦截等，而嵌入页面对外部的影响很小，是个相对安全的沙盒，例如仅可以通过一些特定方式与外部通信（如Android的addJavascriptInterface()）
在博客上，CSS 相关的文章却不多。那就结合 CSS 与性能这两大主题，为大家带来一篇文章吧。
CSS对于呈现页面至关重要 - 在找到，下载和解析所有CSS之前，浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都会影响我们的“开始渲染”并让用户看到空白屏幕。
前言：写前台真的是我不擅长的东西...所以学习和写了很久很久...前台页面大概开发了两天半就开发好了，采用的静态的html和bootstrap来写，写后台的时候纠结住了...怎么说呢，写页面真的是头疼... 前序文章链接：SpringBoot技术栈搭建个人博客【项目准备】：https://www.jianshu.com/p/0293368fe750 前序文章链接：SpringBoot技术栈搭建个人博客【后台开发】：https://www.jianshu.com/p/91c6c9fc67c4 Boo
CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些 .css， .scss或者 less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in-JS不是一种很新的技术，可是它在国内普及度好像并不是很高，它当初的出现是因为一些 component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案。
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
相信很多人都听过nginx，这个小巧的东西慢慢地在吞食apache和IIS的份额。那究竟它有什么作用呢？可能很多人未必了解。 说到反向代理，可能很多人都听说，但具体什么是反向代理，很多人估计就不清楚了。摘一段百度百科上的描述： Html代码 反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。 这里讲得很直白。反向
Webpack已升级为v4版本，优化之后性能提升好几倍，请移步这个 webpack4项目配置Demo，以及 这篇升级优化点
上一个版本主要是测试一下我的想法，也是熟悉一下jQuery，代码这个东东不动手写一下是很难弄明白的。 有想法，写代码，出现错误，修改错误 = 不断进步。 带着问题去学习，动力就很大了。上一个版本能够看到了，但是还要修改URL，没看一篇都要改一下也太麻烦了。能不能点里面的连接，然后就直接看了呢？试了一下，很不幸又跳到那个郁闷的页面了。 怎么办呢？这就是问题。如何解决呢？修改连接，就是改一下a标签。点了之后不进行跳转不就行了吗？那我们还是来replace。 replace(/href=\"/
先吐槽一句..写页面是真的不擅长，然后限于时间的问题，我开始考虑换用Bootstrap来完成页面的编写，因为时间有限（我得在实习完之前把所有页面开发完），学习Vue对于我来说还是存在一些学习成本的，虽然之前已经通过文档博客之类的学得七七八八（emm..三三四四吧...）的样子，但我还是想尽可能的写好...还是用自己熟悉的Bootstrap来完成吧...
经过三个月的从拉钩实习僧各种投简历基本无果到现在拿到了心仪一家的主管给的口头offer，发一波面经回馈一下。 先说下这几个月结果。第一个月唯一面的一家跟我说实习生没有工资的，不信你去问问，都是这样的，能接受就来。然后我出了他的大门就跟室友开始骂娘。。 之后开始做各种校招的笔试，一开始是做一家挂一家，无果，直到第一家笔试过了的是京东，到了hr面面完，之后收到了感谢信。 后面四月底五月初又面了几家小公司，都是在实习僧、拉勾上投的，不是对团队不满意就是对工资不满意，都就拒了。 然后再过的笔试是51信用卡，和今天面
笔者开源了一个小项目code-run，类似codepen的一个工具，其中代码编辑器使用的是微软的Monaco Editor，这个库是直接从VSCode的源码中生成的，只不过是做了一点修改让它支持在浏览器中运行，但是功能基本是和VSCode一样强大的，所以在笔者看来Monaco Editor等于VSCode的编辑器核心。
周末肛了一下0ctf，发现自己依旧那么菜。一道题也没解出来，成功的再一次拖了队伍后退。 今天发现国外大佬们已经开始放wp了。于是自己学习一波，复现一下。 先吐槽一波 h4x0rs.club1 Flag is biography of the administrator. There are more than one way to get this flag. h4x0rs.club-https://h4x0rs.club/game/ backend_www got backup at /var/www/h
在近日的 Rails World 大会上，Ruby on Rails 之父、37signals 联合创始人兼首席技术官 DHH（David Heinemeier Hansson）发表了观点称，最快的打包工具就是没有构建 (No Build)，有了 HTTP/2 以及浏览器原生支持 ES Modules ，前端根本不需要构建。
（1）立即执行函数的定义 立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数。
本期精读的文章是：The broken promise of Web Components
随着等保2.0的实施，传输过程中加密变的必要了，很多APP或者手机浏览器端逐步加密了一些加密的措施来解决这个问题,比如以下这样的数据包。
如图，上面是一个同学聊天记录。 这其实就是从未知到已知的过程，不懂、不明白、不理解，到理解、明白、总结、掌握。往大了说，人类的整个现代科学大厦就是近二百年来这么一点点积累起来的。说前端开发是搬砖的，我觉得这说法一点都没错，一砖一瓦的把自己的技术体系搭建起来，从无到有，从零开始。 学一个东西， 第一要有方向，“你要学的是什么？”； 第二要有目的，“你用它要做什么？”； 第三要有一个起点，“从哪里开始？”； 第四，“开始搬砖”...，十年如一日 我个人主观以为，这四个步骤就是一个完整的“思路”，学习任何东西
在此之前我们已经编写了 Blog 的首页视图，并且配置了 URL 和模板，让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们仅仅在首页返回了一句话：欢迎访问我的博客。这是个 Hello World 级别的视图函数，我们需要编写真正的首页视图函数，当用户访问我们的博客首页时，他将看到我们发表的博客文章列表，就像 演示项目 里展示的这样。 首页视图函数 上一节我们阐明了 Django 的开发流程。即首先配置 URL，把 URL 和相应的视图函数绑定，一般写在 urls.py
前端的构建打包工具很多，比如grunt，gulp。相信这两者大家应该是耳熟能详的，上手相对简单，而且所需手敲的代码都是比较简单的。然后webpack的出现，让这两者打包工具都有点失宠了。webpack比起前两者打包工具，对于前端程序员JS编程能力的要求还是挺高的。不过需要兼容ie8及以下的小伙伴们，就不要考虑webpack了，他很傲娇地不兼容！
编者按 / 相对于HTTP2，HTTP/3的优先级更加简单，浏览器厂商更可能实现统一的优先级策略。本文来自老朋友Robin Marx，已获授权转载，感谢刘连响对本文的技术审校。 翻译 / 核子可乐 技术审校 / 刘连响 原文链接 / https://calendar.perfplanet.com/2022/http-3-prioritization-demystified/ 如果大家做过Web性能调优，可能会听说过HTTP资源优先级。这波趋势从去年开始风头愈劲，因为Chromium通过新的fetchpr
WordPress博客的加速可以说是老生常谈了，在这里我分享一下我博客的分享技术。 我采用的加速技术主要是wordpress的缓存插件，动静分离和腾讯云CDN。
阅读优秀源码的好处有好多，如能学习一些技术知识，编码技巧，组织代码的方式，提高理解能力等等。
在网页开发中，我们通常会遇到需要对网页上的元素，尤其是图片进行布局和尺寸调整的情况。在 HTML 中，我们可以利用一些内置的属性来帮助我们完成这项工作，而 sizes 就是其中之一。
引入魔改样式的方法很简单，自建一个css文件，然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。
docsify 终于算是弄完了，简单记录下。然后发现一个问题，相比 Hexo，Hugo 这些页面加载很慢，鱼与熊掌不可兼得，运行时生成只能这样了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
