regexlearn.com 游戏化形式学正则
regexlearn是一个学习正则的开源网站，用户能够通过相似闯关的形式学习正则表达式，亲测包教包会！
先来简略看一看它长什么样子 ⬇️
目前站内的外围性能是学习正则表达式，它会通过题目和一句话教学疏导你应用正则表达式匹配指定的词句，难度梯度把握的很好。
更重要的是，这个站，尽管很简略，但真的很难看😍 好喜爱😍 所以咱们先来看看它为什么给人感觉还不错？🤨
UE Design
黑绿配色
它的背景的彩色不是#000的纯黑，而是灰灰的#282c34，前景色则是不同透明度的rgb(95 245 155)，留神，这个绿不是一般的绿，而是王维诗里的绿带点赛博朋克的荧光却不死亡绿。
这两个色彩堪称双双深得程序员本猿的心❤️
交互动效
各种炫酷CSS动效见多了，但它依然是属于难看的那一挂。
认真看看会发现其实也很水，就是一个条纹格的背景图hover后放大移出后放大。能够看看CSS求证求证。
果不其然，class.hover\:bg-\[length\:125\%_125\%\]的hover事件作用就是放大背景尺寸：
.hover\:bg-\[length\:125\%_125\%\]:hover {
background-size: 125% 125%;
}另外，配上一丢丢的动效———？竟然没有css文件，嗯，less也没有，sass也没有，fine。
原来是配上一丢丢的魔法：
- .hover\:bg-[length\:125\%_125\%]
- .duration-300
- .transition-all
- .shadow-sm, .shadow-xl
———下面这些class的款式，实则都是由@tailwind解决。
Tailwind CSS 是一个性能类优先的 CSS 框架，它集成了诸如
flex,pt-4,text-center和rotate-90这样的的类，它们能间接在脚本标记语言中组合起来，构建出任何设计。
在开发中只须要在src/styles/globals.css下增加以下几行代码，即可应用语义化类名（比方下面那四个class）来发明css。
@tailwind base;
@tailwind components;
@tailwind utilities;小小的交互挖出大大的宝藏！逃离手写css的常识又+1啦～
多语言
这其实是个很常见的操作了，许多大型网站都是N语言国际化的。但也正是因为它们往往都是大网站，所以想要看清楚它的多语言解决逻辑反而没那么清晰。这个我的项目体量小、语言多，正好适合～
先来瞅一眼src/pages下的目录构造。
src/pages
|____404.tsx
|_____document.tsx
|_____app.tsx
|____[lang]
| |____index.tsx
| |____learn
| | |____index.tsx
| | |____[lesson].tsx
| |____playground.tsx
| |____cheatsheet.tsx作为一个Next.js我的项目，它的目录构造就是路由构造。中文首页https://regexlearn.com/zh-cn就对应着[lang]/index.tsx文件。
回到src下的一级文件。
src
|____migration.ts
|____context
|____types.d.ts
|____utils
|____styles
|____components
|____shortcuts.ts
|____data
|____pages
|____localization除了pages，还有localization文件夹，上面是各语言的配置文件。以zh-cn为例，各个语言的文件构造都一样。
src/localization
|____zh-cn
| |____lessons.json
| |____general.json
| |____landing.json
| |____index.js
| |____learn.json
| |____cheatsheet.json
| |____lessons
| | |____regexForSeo.json其中index是个入口文件。具体配置的JSON文件，能够浅看一眼lessons.json，都一样。
{
"lessons.regex101.title": "Regex 101 - ZH-CN",
"lessons.regex101.description": "您能够在本教程中学习 Regex 的基础知识。 ",
"lessons.regexForSeo.title": "Regex for SEO - ZH-CN",
"lessons.regexForSeo.description": "在本教程中，您能够理解如何以及在何处应用 Regex 进行 SEO。"
}在应用时，只须要下面文件的将key：lessons.regex101.title作为id传入FormattedMessage组件即可 ⬇️
import { FormattedMessage } from 'react-intl';
// ...
<FormattedMessage id="lessons.regex101.title" />
// ...FormattedMessage组件则来自国际化罕用的react-intl包，齐全不须要你本人操心。如此看来，这一套操作下来国际化还是很简略不便的，MARK☑️。
小小的开源我的项目，简略的动效，简略的语言，还是有不少宝藏可挖挖的！
明天就看到这里，连忙👍🏻三连 + 👀关注今天持续！
发表回复