天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

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

天人合一物我相融,站点升级渐进式Web应用PWA(Progressive Web Apps)实践

见微知著,细节上雕花:SVG生成矢量格式网站图标(Favicon)探究

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

见微知著,细节上雕花:SVG生成矢量格式网站图标(Favicon)探究

当我们进行性能优化,我们在优化什么(LightHouse优化实操)

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

当我们进行性能优化,我们在优化什么(LightHouse优化实操)

Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

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

Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效

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

举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效

石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)

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

石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)

聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传

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

聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传

流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码

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

流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码

一抹凝重的灰色(css3)滤镜(filter)彰显仪式感,整站去色(黑白色)以示哀悼

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

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

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

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)

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

利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)

关于又拍云免费cdn全网加速服务的长期评测(各种踩坑)

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

基于Vue.js2.6结合h5来实现视频播放画中画技术(Picture-in-Picture)

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

为你的网站加上live2d的动态小挂件,博君一晒

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

尝试开发微信公众号消息推送功能并且和小程序关联

    之前写了几篇关于微信小程序的开发实践,总的来说没啥难度,感兴趣的请移步:使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境,这一次我们来尝试开发一下微信公众号,那么公众号和小程序到底有什么区别呢?     首先定位不同     公众号服务于营销与信息传递,小程序面向产品与服务。公众号主要用于信息的传递实现人与信息的连接,借助H5 能够实现简单的交互,主要以营销和信息传递为主简单的......

在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)

    就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简单,这引起了我非常浓厚的兴趣,正所谓技不压身,检验自身技术的手段之一就是拥抱新事物,这一次我们尝试在半小时内开发一款Chrome扩展,因为之前我们做了一个微信小程序的在线面试题题库的项目,所以正好利用这个题库将面试题平移到Chrome扩展上面。     Chrome插件其实和一个普通web......

使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境

    之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建,这一次我们介绍如何将微信小程序如何上线,同时配合weui美化界面。     本次做的微信小程序项目是一个类似在线题库的功能,面试者可以通过小程序来检索笔试题,同时用户输入关键词时同步监听输入行为,不需要点击就可以获取知识要点,后台采用tornado+mongodb+mortor的组合实现异步非阻塞的接口。     首先weui是腾讯团队......

利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)

    究竟什么是暗黑模式?这个概念起初来源于macOS系统,该系统的mojave版本为用户提供两个主题皮肤,即浅色和深色的皮肤。自从有了这个概念之后,很多网站和系统都会用户提供了相应的两套肤色,便于用户根据自己的习惯或爱好进行切换          从科学的角度讲,低对比度的暗色可以降低屏幕对视网膜的刺激,同时还可以让电子设备更加省电。     在过往......

利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)

使用flex弹性布局来为微信小程序写自适应页面

    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦。     于是,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局......