离开页面弹窗

最近有个需求,要求在部署过程中离开界面与用户有一个交互,询问用户是否离开页面,然后还给出了相应的样式让我实现。我寻思着关闭窗口,意味着页面销毁,执行栈都不存在了,何谈交互呢?于是我果断的拒绝了这个需求,并评论道无法实现。

后来跟同事交流了一下,同事说之前遇到过类似的需求,有相应的回调函数可以做到,去 mdn 找了下,还真有,但是很遗憾,不能自定义样式,而且在不同的浏览器可能表现不一致。跟产品沟通了下,说明了这种情况,能接受,就加上了。

阅读全文

2021 生日寄语

一年一度的破壳日,想写点什么给未来的自己。

人总喜欢用年龄来给自己打标签,什么年龄该做什么,什么年龄不该做什么都有相应的约定俗成的规矩。比如读大学之前,父母会说好好学习,将来考个好大学,选个好专业。出社会之前,父母又会说好好学习,不要想谈恋爱这些杂七杂八的,将来找份好工作。毕业了,父母又会说好好工作,去考个驾照,买个房吧,结婚了父母还会说什么时候要孩子,得趁年轻早点要。诸如此类的父母眼中我们到了什么年纪该做什么,这说的是家里的标签映射。社会上也有标签映射,比如过了三十还不结婚的女性可能会被打上剩女的标签,三十五会被打上中年的标签,随之而来的还有中年危机。那么我们自己呢?很多人也会给自己贴上相应的标签,可能有些自己不自知。我一直的思想是尽量不给自己打标签,客观的看待自己的处境,而这也是我余生需要贯彻的一个思想之一,我不要你觉得,我要我觉得,这并不是说不顾及他人的感受,而是思想上的自我吧。

阅读全文

CSS 实现圆环进度条

圆环进度条是我们工作中经常会碰到的一个需求,首先我们来看看要实现一个圆环我们会怎么做?

<div class="wrapper">
<div class="circle"></div>
</div>

阅读全文

理解 Instanceof

最近发现很多用过的东西过后很容易忘记使用姿势,久了不用就要去翻一翻文档,有一些知道怎么用,但是记忆也很模糊。于是我就想先从一些基础的知识写起,探究知识点背后的运作原理,加深自己对知识的理解。

说到 instanceof,我们大体知道其使用场景,用于检测对象的具体类型。我们一般会怎么用这个操作符呢?

阅读全文

禁止图片拖动

看到张鑫旭大佬的文章讲禁止图片拖动的,我看了看手头的项目,拖了拖一些 icon,拖动会有虚影。于是准备把图片的拖动禁用掉,第一反应是在 App 文件中等视图加载完毕,获取所有的图片,设置为不可拖动,一劳永逸

mounted() {
this.$nextTick(() => {
const imgs = document.querySelectorAll('img');
imgs.forEach((el, i) => { imgs[i].draggable = false; });
});
}

阅读全文

修改滚动条样式的兼容写法

滚动条样式在火狐、ie、chrome 等浏览器的样式是不一致的,工作中我们经常需要根据自己的需要定制滚动条,这里给出一个兼容的写法

/* The emerging W3C standard
that is currently Firefox-only */
* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(14, 77, 136);
}

阅读全文

修改自动填充样式

在 WebKit 内核的浏览器中,当用户的设置中允许表单自动填充,填充后有一个背景颜色,打开控制台的 styles 看到 input:-internal-autofill-selected 设置了背景色和字体颜色,大喜。在 css 中改完发现无效,明明看到覆盖掉了这个的样式,怎么还是有背景色呢?

阅读全文

对技术成长的一些思考

时隔四年,再一次面了阿里,上一次还是大三的时候面淘宝的实习岗位。感觉体验很不错,从项目出发,由浅入深,中规中矩的面试,发现了自己的一些不足之处,末了问面试官他们希望招怎样的人才,面试官回答的要点大致如下:

  • 基础知识扎实

  • 熟悉常用框架的底层原理,能自己实现框架

阅读全文

CSS 常用布局及解决方案

CSS 常用布局包括元素的水平、垂直居中,单栏布局、三栏布局等,本文分析多种情况下的布局方案。

阅读全文

我辞职了

如题,其实想辞职有一段时间了。去年下半年前端老大走了,那个时候其实也是一个职业迷茫期吧,也想辞职,但是因为结婚等种种事宜,一直没有辞职。年底结婚回来发现婚假也扣钱,工资少了很多,说实话当时觉得挺生气的,找老大和行政要说法,无果。

到今年初,我过来的这个组还有整个部门的人也陆陆续续的跑路,整个技术氛围开始变得很奇怪,感觉大家都没什么工作热情了,做事也拖拖沓沓的,各自迷茫,我也在考虑真的得换个环境了,温水煮青蛙,真的会把自己耗死的。

阅读全文