用神奇的 form 验证 API 来优化你的表单验证
2021-06-29
阅读 6 分钟
3.6k鱼头曾在 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证功能 。虽然仅仅依赖 CSS 是无法满足我们的日常开发需求的，但是配合着各种原生的 form 验证 API ，情况又不一样了。
你不知道的 CSS 进度条
2021-01-18
阅读 7 分钟
7.1k作者：陈大鱼头github： KRISACHAN进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。常规版 — div 一波流这是比较常规的实现方式，先看效果：源码如...
让Vue3 Composition API 存在于你 Vue 以外的项目中
2020-12-14
阅读 7 分钟
9k不仅在 Vue 中，在其他的框架或原生 JS 也可以很好地被使用，下面我们就选取几个比较重要的 Composition API ，通过一些简单的例子来看看如何在其他项目中使用。
『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能
2020-09-06
阅读 5 分钟
2.8k作者：陈大鱼头github： KRISACHAN去年的时候写过一篇文章 纯CSS实现表单验证 ，在发表之后不久就有网友跟鱼头说，打算拿我这篇文章作团队内部分享。当时听到这个消息之后，在屏幕前的鱼头笑咧了嘴，但这位童鞋的下一段内容，就让我马上笑不起出来了。不过因为初始化状态是这样的：所以希望我能够改一下，改成这样：只有...
『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。
2020-07-21
阅读 13 分钟
5.2kCSS 选择器也是如此，然而如今也已经发布了第四版 —— CSS Selectors Level 4 ，这一版最早的草案发布于2011年09月29日，最后更新是2018年11月21日。
二营长，快掏个CSS出来给我画个井字棋游戏
2020-07-14
阅读 12 分钟
6.1k作者：陈大鱼头 github： KRISACHAN 前言 不知道大家小时候有没有玩过一款游戏叫『井字棋』的。 它长这样： （我赢了，快夸我 ~o(´^｀)o） 上面的就是本次文章的最终结果，一个用纯CSS实现的AI井字棋游戏，Mmmm，虽然看起来有点蠢。。。 地址在此： [链接] 游戏的规则比较简单，就是在一个九宫格（据说十六宫格，二十五...
从ES6到ES10的新特性万字大总结（不得不收藏）
2020-07-01
阅读 25 分钟
14kECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
像监听页面一样监听戈多的动态
2019-11-27
阅读 6 分钟
1.5k不知道各位童鞋有木有看过 《等待戈多》 这部出名的荒诞戏剧 。其剧情大概就是 戈戈 与 狄狄 等待 戈多 的过程中发生的一些琐事，一共两幕。等了这么多年，也不知道 戈多 现在在哪，赴约了没有。
我的<input />不可能这么可爱
2019-09-03
阅读 7 分钟
1.8k<input /> 标签是我们日常开发中非常常见的替换元素了，但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性，选择器都没怎么用过，所以就开篇文章来整理一下一些比较有趣或者实用的知识点。
提升开发幸福感的10条JS技巧
2019-07-29
阅读 4 分钟
1.7k以上十个技巧都是我在日常开发中经常用到的一些代码片段，善用这些技巧，可以大大减少我们的开发时间。如果此时正在看文章的你也有类似的技巧心得，不妨在下方留言来分享给大家。
JS数组中那些你知道或不知道的
2019-07-22
阅读 6 分钟
1.4kecma-262中的定义：Array对象是一种特殊对象，它会对数组索引属性键进行特殊处理。 每个Array对象都有一个不可配置的length属性，其最大值是232 - 1。
『多图警告』手撕排序算法 - 前端进阶必备
2019-07-22
阅读 14 分钟
2.2k作者：陈大鱼头 github：[链接] 算法是什么？ 算法（Algorithm） 已经是一个老生常谈的概念了，最早来自于数学领域。 算法（Algorithm） 代表着用系统的方法描述解决问题的策略机制，可以通过一定规范的 输入，在有限时间内获得所需要的 输出。 如下图示便是算法： 算法的好坏 一个算法的好坏是通过 时间复杂度 与 空间...
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
2019-07-22
阅读 4 分钟
1.7kThe CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.CSS盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型(visual formatting model) 所生成的矩形盒子。
纯CSS实现表单验证
2019-07-22
阅读 3 分钟
1.3k作者：陈大鱼头 github： KRISACHAN 关于表单验证 在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下一步的操作。 例如这样：（以下例子来自优秀的开源UI库，element） {代码...}...
【Hello CSS】第九章-如何画一个体验更好的动画？
2019-07-22
阅读 7 分钟
1.8k在CSS中，animation 、 transition 跟 transform 使我们常用于制作动画的属性，我们先来大致地来了解下这三个属性。
【Hello CSS】第八章-CSS图形
2019-07-22
阅读 2 分钟
1.3k其实也有小伙伴答对了，原因就是因为 currentColor 是作为 SVG 的属性值存在，因此在 CSS 里就保留了这个驼峰写法，顺便提一个冷知识：“ currentcolor 这种全小写的方式也是允许的。 ”
【Hello CSS】第七章-CSS的继承与可变性
2019-07-22
阅读 6 分钟
1.6k继承（英语：inheritance） 是面向对象软件技术当中的一个概念。在 CSS 中与 层叠（英语：Cascade） 一起描述了如何设置样式规则，并为所有元素的所有属性赋值。这两个属性同属规范 “ CSS Cascading and Inheritance Level ”。CSS中的 继承 实际上是父级元素对子元素的影响。
【Hello CSS】第六章-文档流与排版
2019-07-22
阅读 6 分钟
1.6k作者：陈大鱼头 github： KRISACHAN 正常流 什么是“正常流”？其实就是我们日常所说的“文档流”。在W3C官方文档里对应的是“normal flow”。 正常流的盒子属于格式化上下文(FC)，在CSS2.2中可以是表格、块或内联。在CSS3中引入了flex跟grid，当然以后会引入得更多。 块级盒子(block-level boxes) 与创建 块级格式化上下文(BF...
【Hello CSS】第五章-CSS的选择器与函数
2019-07-22
阅读 5 分钟
2.1k在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟CSS选择器（CSS Selectors）相关的内容，有兴趣的请继续往下看。
【Hello CSS】第四章-HTML的标签与语意
2019-07-22
阅读 9 分钟
3k作者：陈大鱼头 github： KRISACHAN 上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。 我们在序章的开头就简单的讲解了HTML的诞生历史，本篇不作详细讲解，有兴趣的可以去看wikipedia。 HTML大事记 首先我们简单地来看一下HTML的发展历程...
【Hello CSS】第三章-浏览器的视图与坐标
2019-05-07
阅读 8 分钟
3k作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 现在各位看官有答案了吗？ 因为上一篇中有提到过CSS 逻辑属性的变革，从物理概念跳跃到了逻辑概念，也...
【Hello CSS】第二章-CSS的逻辑属性与盒子模型
2019-05-07
阅读 8 分钟
1.6k作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的渲染流程。本篇则会分享CSS的逻辑属性以及盒子模型。 首先开篇之前先提个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 先不要急着往下翻...
【Hello CSS】第一章-CSS的语法与工作流
2019-05-07
阅读 5 分钟
1.5k在上一篇【Hello CSS】的序章CSS起源中介绍了CSS的诞生原因以及发展历史，了解了CSS的存在意义。从正篇篇开始将会正式开始介绍CSS这门语言的特点与功能。本篇则主要介绍CSS的语法与CSS是如何工作的。
【Hello CSS】序章-起源
2019-03-13
阅读 8 分钟
1.4k在1991年3月，Tim Berners-Lee把HTML介绍给了给他在CERN(欧洲核子研究中心) 工作的朋友，当时网页浏览器被其世界各地的成员用来浏览CERN庞大的电话薄。