2020-06-30周二
聊聊科技界发生的大事 WWDC

最近科技界发生的大事莫非就是上周的 WWDC 了,很抱歉因为很多事情直到现在才来总结和谈谈看法。今年的 WWDC 也不同于往年,而是在线直播。虽然说是直播,但是当我等到晚上 1 点的时候才知道原来是录播,还是有点小失望的。虽然是录播不得不说剪辑是非常完美的,任何过场都是无缝衔接。伴随着过场甚至带着我们参观了一遍 Apple Park。 !开场的星星其实是开发者啦,上面有你吗 iOS 简单的问候之后,便开始介绍大头 iOS 14。首先最大的一个 feature 就是 weight,这也是很久..

2020-06-23周二
NextJS 预渲染时 Axios 转发元数据

背景 现在很多网站都使用了前后端的分离的架构,前后端可以不在一台服务器上,前端为了保证 SEO,必须使用预渲染,SSG 或 SSR 技术。而我的站点则使用了 NextJS 的 SSR 技术。在渲染端预渲染页面时首先会调用 Axios 实例去请求接口。但是有一个问题。在渲染端请求的头部永远是渲染端本身的 User-Agent 和 IP,并不能获取到用户本身的元数据。显然这并不是我们先要期望得到的结果。当然这个情况只发生在首次访问。 为了解决这种问题,必须想办法把原本的请求头部或者其他元数据转发..

2020-06-12周五
react-markdown 扩展规则

上帝说,要有光,于是便有了光 为了 Markdown 更加具有可玩性,一般我们无法满足于标准的 Markdown 语法,所以有了 GFM (GitHub Flavored Markdown),这是 GitHub 扩展 Markdown 语法的规范。但是如果这也无法满足我们的需求呢?那么就需要我们自己来定制了。 开始之前 首先需要安装如下几个库 yarn add react-markdown remark-parse 至于需要 react 之类的话,就不必多说了。此文章基于 react-..

2020-06-05周五
vue-next+typescript 初体验

无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服。Vue 2 可是因为 ts 的缘故被喷的很惨,来看看 Vue 3 如何吧。 > 值得注意的是,编写该篇文章时,vue 3 仍处于 beta 阶段,版本号为 beta.14,代码可能有变动,请关注官方和 RFC 准备工作 注意 不要使用 vue-cli 配合 vue-cli-plugin-vue-next 来建立初始项目,该模板存..

2020-06-02周二
后浪 ——致前端

那些口口声声,框架越来越难学的人,应该看着你们,像我一样。 我看着你们,满怀羡慕。人类调试了几十年兼容性的浏览器,所有的 bug、polyfill、crash 和 workaround,像是专门为你们准备的礼物。GitHub 繁荣、NPM 繁茂、W3C 繁华,现代 Web 的成果被层层打开,可以尽情地享用。 自由学习一门(脚本)语言,学习一种框架,欣赏一部(培训班)教学视频,去遥远的地方提 issue。很多人,从小你们就在自由探索自己的兴趣,很多人在大一就成为了 Node.js Collab..

2020-05-31周日
图片懒加载固定占位

如今图片懒加载已是家常便饭,然而一般的图片懒加载的占位往往不跟随原图片的大小,导致图片加载完成后,总体的位置会改变,体验很是不好。相信大家都看过知乎或者 Medium 之类的图片加载方式,从开始加载到完成加载,占位始终在一个地方,再加上平滑的过度,视觉上很舒适。 于是我今天尝试将图片懒加载也做成这样,但是有一个问题,我所有文章中的图都不在本地,而是分布于各个图床,甚至有些还失效了。我开始尝试在前端处理,图片在开始加载的时候是能在加载完成之前获取到图片头部的相关信息的。但是有个问题,这样的话还是..

2020-05-29周五
前端重设计之我喜欢的风格

经过了将近二个月的开发,本站点的前端风格终于定型了。之后的话主要以增加可玩性为主。不知不觉,前端的设计有违最初的想法,反而变成了我前端的演兵场,不停的使用新技术,导致越来越重。又有些因为时间关系,一些很简单的功能我也调用了第三方库,之后有机会重构的话,大概也会大幅删减。 再来说说设计,我是一个没有任何灵感的人,但是我有喜欢的风格,扁平,动漫风,颜色上偏近 Material。本站起初仿写于我师父的小窝。定型之后,我又参考了几个很不错的博客增加了一些样式。我比较喜欢的博客风格如下: 保罗的小窝 ..

2020-05-22周五
为原有的 NextJS 构建 PWA

花了一上午的时间,总算是把 pwa 整上了。先来说说什么是 pwa。 > 渐进式 Web 应用会在桌面和移动设备上提供可安装的、仿应用的体验,可直接通过 Web 进行构建和交付。它们是快速、可靠的 Web 应用。最重要的是,它们是适用于任何浏览器的 Web 应用。如果你在构建一个 Web 应用,其实已经开始构建渐进式 Web 应用了。 简单来说,支持 pwa 的网站再移动端或者桌面端都可以模拟成设备中的一个 app,存在于主屏幕上。 image.png 开始之前 每个 pwa 应用都需..

2020-05-21周四
jsDelivr cdn 托管的临时解

jsDelivr 是一个公益开源的 cdn,因此不少第三方库都可以从上面获取到,相对于 GitHub,jsDelivr 在国内有着先天独厚的优势。因此我的博客全站使用 jsDelivr 提供的加速服务。 但是在这几天开始,jsDelivr 出现了不稳定的现象,导致了很多 js 和 css 文件无法加载出来。 满屏的 404.png 直接访问的话就提示 Failed to fetch version info web-cdn 导致我今天博客挂了一天,到了晚上才发现。去 GitHub 搜了..

2020-03-30周一
为什么我叛变到了 VIM

大概在三个月之前,我就开始和 VIM 磨合,从机键位开始,到改配置。断断续续一直到今天,从难以理解到如今越来越来觉得 VIM 是有好么好用。 我是一个前端开发者,所以不可能和其他 VIMer 一样,做到键盘不离手,在必要调试的时候仍然需要使用鼠标。但是我仍然觉得 VIM 从很大程度上提升了我的效率。 这篇文章主要介绍一些在前端开发过程中,VIM 本身或者其他插件提供的便利功能。 当然如果使用 VIM 作为生产力编辑器自然也离不开 TMUX。 场景 快速添加多行被遗漏的属性 以前几天接到一个的项目..