04 2022 档案
摘要:前言 我几乎闪过了那几年的 Modular 混乱时代. CommonJS 火的时候, 我没有用 Node.js AMD, CMD 火的时候, 我的项目还小, 加上用了 AngularJS 自带模块功能. 后来 UMD SystemJS 火了, 我在用 Angular 了, 从此开启 TypeScri
阅读全文
摘要:前言 既然写了 JavaScript – ES Module, 也就顺便些 CommonJS 呗, 建议先看 ES Module 那篇. 参考 Youtube – Require vs Import Javascript Youtube – Node and Express.js Fundament
阅读全文
摘要:前言 关于 JavaScript Modular 的多种版本和历史看这篇. 参考: 阮一峰 – Module 的语法 阮一峰 – Module 的加载实现 Export 语法 逐个 export 在想要 export 的 var, function, class 前面加上 export 关键字即可.
阅读全文
摘要:前言 上一篇 TypeScript – Get Started 使用了命令 tsc index.ts --module es2015 很少人会在命令时给写 config, 更正规的做法是创建一个 tsconfig.json 把所有 config 写到里面去. 类似 webpack.config.js
阅读全文
摘要:前言 我学 TypeScript 的时候是 Angular 2.0 beta 的年代... 现在 Angular 都快 14 了. 但由于已经有 1 年半没有写 Angular 和 TypeScript 了, 所以特地写来复习 warm up 一下, 也把这些年零零散散的知识集中写一下做个记入. 参
阅读全文
摘要:前言 之前写过 HTML & CSS – Responsive Image 响应式图片 (完整版), 里面解释了原理和一些具体做法, 但是并不是以真实场景作为例子带入. 由于 RWD Image 挺复杂, 所以特地再写一篇以实战的角度来解释. 建议先阅读之前的相关文章: CSS – RWD (Res
阅读全文
摘要:前言 记入一些冷门的知识. Custom content-type var fileExtensionContentTypeProvider = new FileExtensionContentTypeProvider(); fileExtensionContentTypeProvider.Mapp
阅读全文
摘要:前言 一直没有写过关于互联网和网站运作的原理相关文章. 这篇就稍微介绍一下它们. 1. 电脑文件 网站是由许多网页组成的, 网页就是电脑里的 file. extension 是 .html 类似于 .mp3 = 歌曲, mp4 = 视频, .html = 网页 2. HTML player 想听歌就
阅读全文
摘要:前言 这个非常基础, 我在学 W3Schools 之前就已经会了, 所以之前一直没用记入起来. 但偶尔遇到一些场景时还是会被坑到. 所以特别写这一篇, 提升记忆. width / height auto & percentage width / height initail value 都是 aut
阅读全文
摘要:效果 参考 Youtube – Create a pulsing animation with CSS 重点 在背后做一个一样大的 div border 然后 animation scale up. HTML <button> <i class="fa-solid fa-play"></i> </b
阅读全文
摘要:效果 参考: Youtube – Create a Simple Popup Modal Youtube – Create a Modal (Popup) with HTML/CSS and JavaScript HTML – Native Dialog Modal Boostrap Modal A
阅读全文
摘要:效果 重点 1. 一张图片, 一个 content 定位居中作为一个 slide 2. slider 用了 JavaScript Library – Swiper 3. 当 slide active 的时候做一个 animation 把 content 划出来. Swiper & Layout HT
阅读全文
摘要:前言 之前介绍 Native Form 的时候有提及过 method="dialog", 但由于它太新了, 所以没去研究. 这篇就介绍一下. Dialog 也好 Modal 也好, 都有人叫, 我的理解是 Modal 更抽象一点, Dialog 按 Material Design, 应该是要有 ac
阅读全文
摘要:效果 show more 是很常被使用的效果, 因为空间总是不够的丫. 比起 scroll, show more 的体验通常会好一些, 尤其在手机, 它有更好的引导. 实现思路 1. 卡片需要一个 max-height 限制内容, 同时 overflow: hidden 2. 做一个 overlay
阅读全文
摘要:前言 这篇想整理一下在网页开发中, Spacing (间距) 和 Layout 排版是如果被处理的. Spacing 介绍 东西密密麻麻会给人一种很恐怖的感觉. 只要加上一点空间 (间距), 整体感觉立马就会变好很多. 在网页开发中, padding, margin, gap, line-heigh
阅读全文
摘要:前言 官网已经有很好的教程了, 这篇只是记入一些我用过的东西和冷门知识. 参考 官网安装 官网 Demo 安装 yarn add swiper JS import Swiper from 'swiper'; // core js import { Navigation } from 'swiper/
阅读全文
摘要:前言 Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template). 这篇来介绍一下基本的 table styling. 参考 Youtube – Styling HTML tables wit
阅读全文
摘要:前言 Float 是上古时代的东西, 它的效果已经基本被 Flex, Grid 取代了. 但是还是可以了解它一下. 就当学习历史呗. 参考 Youtube – HTML & CSS for Beginners Part 18: How Floats and Clears work 图片和文字 hor
阅读全文
摘要:效果 一个按钮, 点击以后中间出现 loading, 然后旋转. 思路 1. 监听点击, hide text, show loading 2. loading 定位中心 3. loading 是通过 border + radius 做出来的, 然后 animation 让它无限 rotate 难点
阅读全文
摘要:前言 以前就有写过了 Asp.net core 学习笔记 (操作 URL 和 Query), 但很乱, 这篇作为整理. Uri 介绍 结构: [Scheme]://[Host]:[Port][/Path][?Query][#Fragment] 对应: [https:]//[www.stooges.c
阅读全文