一年好景君须记，最是橙黄橘绿时。金三银四，秣马厉兵，没有一个好看的简历模板怎么行？无论是网上随便下载还是花钱买，都是一律千篇的老式模版，平平无奇，味同嚼蜡，没错，蜡都要沿着嘴角流下来了。本次我们基于Html和Css3打造一款独立实现的高颜值简历模板，就像看岛国的爱情片儿一样，也许你会找自己喜欢的主题和类型，但最终，还是要看脸。    身无彩蝶双飞翼    传统简历基本上是由上自下的单体布局方案，本次我们采用双飞翼布局，让简历内容......

    众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。    霓虹灯效应是一种视觉效果，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓虹灯效应的作用在于吸引人们的注意力和增强品牌形象的辨识度，因为这种效果让人印象深刻且易于记忆，本次我们盘点适合暗色模式的网页特效，还是喜欢，暗夜的......

    开篇明义，前端已死？根本就是扯淡。前端技术精微渊深，驳杂宽广，除了基础的 HTML、CSS 和 JavaScript 技术外，前端技术还涉及到许多其他相关技术和工具，比如前端框架、UI 库、自动化构建工具、代码管理工具等等。这些技术并没有死，反而生态圈愈发健壮，但为什么前端已死的论调甚嚣尘上？    前端市场萎靡    前端技术并未消亡，但前端工程师的坑位却逐年减少，为什么？是由于竞争加剧、市场饱和、经济衰退等多种因素导致的。每......

    著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。    玉兔主题元素绘制    成本最低的绘制方式是使用纯CSS，不依赖任何图片和三方库，首先创建绘制容器：<div id="rabbit_box"> ......

    传世经典《菜根谭》中有言曰：“徜徉于山林泉石之间，而尘心渐息；夷犹于诗书图画之内，而俗气潜消。故君子虽不玩物丧志，亦常借物调心。”意思是，徜徉在林泉山石之间，能够摒弃杂念，留意诗词歌画之中，可以尽弃俗见。所以说君子虽然不会玩物丧志，也常常要借一些优雅的小物件来调理情绪，二次元网页小组件(widget)就是这样的小物件，功能上无甚大观，却可以博君一晒。    引入方式    根据官方文档：https://github.com/ds......

    华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。    图片实现        最简单，也最容易理解的实现方式就是使用图片。曾几何时，几乎所有前端特效都需要借助图片来完成。    实现原理很简单，通过不同的关键帧来“拼接”......

    PWA（Progressive web apps，渐进式 Web 应用）使用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序，说白了，PWA可以让我们的站点以原生APP的形式运行，但相比于安装原生APP应用，访问PWA显然更加容易和迅速，还可以通过链接来分享PWA应用。    有许多知名的网络平台已经将 PWA 方案落地，比如Twitter。选择增强的网站体验而不是原生应用。事实上使用PWA也确实从中获得了显而易见的益......

    Favicon是favorites icon的缩写，也被称为website icon（站点图标）、page icon（页面图标）或者urlicon（URL图标）。Favicon是与某个站点或网页相关联的图标，网站设计者可以多种方式建立这种图标，几乎所有浏览器都支持此功能，浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前：    我们定义一个favicon的方法是将一个名为“favic......

    好的互联网产品不仅仅在功能上要高人一筹，在性能层面也需要出类拔萃，否则金玉其外败絮其中，页面是美轮美奂了，结果首屏半天加载不出来，难免让用户乘兴而来，败兴而归。    幸运的是，前端的性能优化有诸多有迹可循的理论和方法，其中相对权威的，无疑是LightHouse。          LightHouse 是一个开源的自动化工具，它作为 Chrome 浏览器的扩展程序运行，提供一套完整的站点......

    曾几何时，SVG(Scalable Vector Graphics)矢量动画图在坊间称之为一种被浏览器诅咒的技术，只因为糟糕的硬件支持(IE)，和没完没了的兼容性调优(Safari)。但是在2022年的今天，一切都不一样了，正所谓三十年河东，三十年河西，微软所研发的采用Chromium内核作为IE替代者的Edge浏览器已经有望超越Safari成为第二大桌面浏览器，而曾经因为不支持关键帧动画被人诟病的Safari也统一了标准，市面上除了老帮菜IE，几乎所有平台(包括移动......

    喜欢看电影的朋友肯定会注意到一个有趣的细节，就是电影出品方一定会在片头的Logo环节做一个小特效：暗影流动之间光泽一闪而过，这样做不仅可以提高Logo的辨识度，还可以提升质感，一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子：    那么，在前端领域，如果使用纯CSS技术，能不能实现类似的特效呢？答案当然是可以的，这次我们以本站的Logo为例子，以一持万、提纲挈领地讲解一下如何使用纯CSS技术实现图片Logo鼠标悬停光......

    我们知道，在前端界有一个共识：速度就是生命，带宽就是金钱。怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题，目前的网络环境中，除了视频，图片仍旧是占用流量较大的一部分，对于app端尤其如此，因此，如何在保证图片视觉不失真的前提下缩小图片体积，对于节省带宽和电池电量都十分重要，因此Google在十年前提出了一种新的图片压缩格式 ：WebP，给图片的优化提供了新的方向。    WebP的优势在于它具有更优的图像数据压缩算法，在拥有肉眼几乎......

    分片上传并不是什么新概念，尤其是大文件传输的处理中经常会被使用，在之前的一篇文章里：python花式读取大文件(10g/50g/1t)遇到的性能问题（面试向）我们讨论了如何读写超大型文件，本次再来探讨一下如何上传超大型文件，其实原理都是大同小异，原则就是化整为零，将大文件进行分片处理，切割成若干小文件，随后为每个分片创建一个新的临时文件来保存其内容，待全部分片上传完毕后，后端再按顺序读取所有临时文件的内容，将数据写入新文件中，最后将临时文件再删掉。大体流程请见下图：&......

    2010年，谷歌正式退出中国市场，无数人扼腕叹息，如今十年过去了，谷歌还有两条重要的业务线并没有完全退出，一个是页面统计业务(Google Analytics)，另外一个则是谷歌广告联盟(Google Adsense)，说起广告联盟，玩儿过网站的朋友应该并不陌生，对于中小型站长、博主来说，要想通过网站的流量取得一些收入，除了和一些线下线上厂商谈包月广告位，更多的可能就是投放广告联盟广告了。但随着网络广告的不断发展，广告形式有了很大的变化，出现了CPC、CPS、CPA、......

    2020年4月4日，几乎所有主流媒体的线上网站网易、搜狐、百度等的配色方案统一切换为灰色，比以往多了一分肃穆，往日的清明节只是一个不痛不痒的三日假期而已，而今年的清明注定不同，原因有三：一是临近清明这一传统哀思、祭奠先辈的节日。二是为国家事业牺牲的先烈，包括近期西昌救火及因新冠病毒牺牲的英雄们表示致敬。三是灰色给人稳重安定感，灰色是我们因哀思的一种沉积，更是蕴意着我们沉积过后，秉承先烈意志的一种奋发有为。    当然了，也有的人......

    每一个应用程序，其实都会有分享的需求，比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台，因为人类是社交动物，而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者，同时，对于网络应用本身，也可以相应的增加该网站的外部链接，比如微博豆瓣等线上粘性用户非常多的社交平台，如果是twitter或者facebook则可以带来一部分来自于国外的流量，对于网络平台来说，这样做即可以分发流量又可以引流......

    现而今，我们纵向的回顾整个大前端的历史，不难发现，人们对前端的审美要求越来越高，越来越严苛，与此同时，人们对追求美的体验是也极致的，从理性到感性，从平面到几何，从现实到虚拟，所以从某种角度来说，作为前端工程师，他们所追求的东西往往和人类软件核心理念南辕北辙，因为人类的终极追求是个性，绝不是共性，换句话说，大家都一样就不好玩儿了。    那么作为web前端，追求个性的手段手段之一就是鼠标指针的更换，早在css2时代，Cursor属性就可以对象鼠标指针......

    之前一篇文章阐述了如何在前端进行网站优化：具体谈谈如何优化前端性能的总结，其中一条重要的优化手段是cdn加速，所谓cdn加速就是采用更多的缓存服务器（CDN边缘节点），布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求          在写那篇文章的时候，我本人还未实际使用过cdn加速，也......

    在开发基于vue.js的在线视频教育平台的时候，我们会注意一个小问题，就是如果用户在观看播放视频的同时，也会往下拖动窗口浏览一些评论，这样视频就会被滚动条覆盖，导致用户无法在浏览评论的同时观看视频，同理，如果想边刷微博边追剧怎么办？想边聊微信边看球赛怎么办？     目前我们可以用h5的技术来解决这个问题，支持HTML5 <video>播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频......

    喜欢二次元的朋友一定对大名鼎鼎的live2d技术并不陌生，live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。     可以看到本站右下角出现了一只可爱的小喵          可以看到这只猫会跟着你的鼠标运动，有着伪3D的感觉......