daily/article/seconds.md

内容来自于国外的《30 seconds of code》，只翻译了其中的标题和简短描述，可对其做个整体了解，内容可用 Google 翻译，大体都能看懂。

与 Underscore.js 和 Lodash.js 不同，30 seconds of code 中的代码片段都是各自独立的，可直接引用，也更容易吸收学习。

JavaScript

JavaScript Array Tricks

JavaScript Algorithms

CSS

1）动画

1. 图像悬停菜单（悬停图像时显示菜单覆盖）
2. 悬停图像叠加（在悬停时显示图像叠加效果）
3. 交错动画（为列表的元素创建交错动画）
4. 弹跳装载机（创建一个弹跳加载器动画）
5. 高度过渡（当元素的高度未知时，将其高度从0转换为自动）
6. 图像在悬停时旋转（在悬停时为图像创建旋转效果）
7. 旋转卡（创建一个在悬停时旋转的双面卡片）
8. Tip: CSS缓动变量（了解如何使用缓动函数的cubic-bezier()类并创建引人注目的精美动画）
9. Tip: CSS过渡的完美持续时间（了解如何在用户与页面上的元素进行交互时使CSS过渡完美）
10. 悬停下划线动画（当文本悬停在上方时，创建动画下划线效果）
11. 按钮边框动画（在悬停时创建边框动画）
12. 脉冲装载机（使用 animation-delay 属性创建脉冲效果加载器动画）
13. 甜甜圈加载器（创建一个甜甜圈加载器，可用于指示内容的加载）

2）交互

1. 鼠标光标渐变跟踪（悬停效果，其中渐变跟随鼠标光标）
2. 水平滚动捕捉（创建一个可水平滚动的容器，在滚动时将捕捉到元素）
3. 垂直滚动捕捉（创建一个可垂直滚动的容器，在滚动时将捕捉元素）
4. 带前缀输入（创建带有视觉，不可编辑前缀的输入）
5. 专注于（如果窗体的任何子项都处于焦点状态，则更改窗体的外观）
6. 汉堡按钮（显示一个汉堡菜单，该菜单在悬停时转换为十字按钮）
7. 弹出菜单（显示悬停/焦点上的交互式弹出菜单）
8. 拨动开关（仅使用CSS创建切换开关）
9. 淡出兄弟元素（淡出悬停位置的兄弟元素）
10. 禁用选择（使内容无法选择）

3）布局

1. 响应式图像拼接（创建响应式图像马赛克）
2. 什么是CSS变量？在哪里可以使用它们？
3. Flexbox 备忘单（如果您发现自己不断查找语法或其工作方式，那么您只需准备此便捷的备忘单）
4. 屏幕外（在视觉和位置上完全隐藏元素，同时仍允许对其进行访问）
5. 3格布局（使用 display:inline-block 水平对齐项目，以创建3格布局）
6. Clearfix（确保元素自我清除其子级）
7. 砌体布局（创建砖石风格的布局，这在处理图像时特别有用）
8. 截断多行文字（截断长于一行的文本）
9. 使图像适合容器（在保持其宽高比的同时，将图像适当放置在其容器内的位置）
10. CSS单位备忘单（了解有关CSS单位的所有信息）
11. 带有侧边栏的响应式布局（创建带有内容区域和侧边栏的自适应布局）
12. box-sizing 重置（重置盒模型，以使宽度和高度不受边框或填充的影响）
13. 分布均匀的子元素（将子元素平均分配到父元素中）
14. 全屏宽度的图像
15. 截断文字（截断超过一行的文本，并在末尾添加省略号（…））
16. 恒定的宽高比（确保宽度可变的元素将保留比例的高度值）

4）视觉

1. 带有浮动标题的列表
2. 在悬停时显示其他内容（创建一个卡，在悬停时显示其他内容）
3. 导航列表项的悬停和焦点效果（使用 CSS 变形为导航项创建自定义悬停和焦点效果）
4. 带有粘滞标题的列表
5. 25个 CSS 渐变
6. 如何为暗黑模式创建自定义响应图标？
7. 全屏（在全屏模式下将样式应用于元素）
8. 溢出滚动渐变（向溢出元素添加渐变，以更好地指示还有更多内容要滚动）
9. 图片文字叠加（使用覆盖图在图像上方显示文本）
10. 动态阴影（根据元素本身的颜色创建类似于 box-shadow 的阴影）
11. 漂亮的文本下划线
12. 蚀刻文字（使文本看起来被“蚀刻”或雕刻到背景中）
13. 系统字体（使用操作系统的本机字体来接近本机应用程序的感觉）
14. 斑马条纹列表（创建具有交替背景颜色的条纹列表）
15. 自定义滚动条
16. 顶部三角形的边框（创建一个内容容器，顶部带有一个三角形）
17. 计数器（创建一个自定义列表计数器来说明嵌套列表元素）
18. 棋盘背景图案
19. Drop cap（使第一段的第一个字母大于文本的其余部分）
20. 圆点背景图案
21. 曲折背景图案
22. 自定义文字选择（更改文本选择的样式）
23. 条纹背景图案
24. 渐变文字
25. 圆（使用纯CSS创建圆形）
26. 三角形（使用纯CSS创建三角形）
27. 重置所有样式（仅使用一个属性将所有样式重置为默认值）

5）居中

1. Flexbox（使用 Flexbox 将子元素在父元素中水平和垂直居中）
2. Grid（使用网格将子元素在父元素内水平和垂直居中）
3. Transform（使用CSS transform将子元素在其父元素内垂直和水平居中）
4. Table（使用 display:table 将子元素在其父元素内垂直和水平居中）

Node.js

1. hashNode（使用SHA-256算法为值创建哈希并返回一个 Promise 对象）
2. isDuplexStream（检查给定的参数是否为双工（可读和可写）流）
3. isWritableStream（检查给定的参数是否为可写流）
4. isReadableStream（检查给定参数是否为可读流）
5. readFileLines（返回指定文件中的行数组）
6. UUIDGeneratorNode（在NodeJS中生成一个UUID）
7. isBrowser（确定当前运行时环境是否是浏览器，以便前端模块可以在服务器（节点）上运行而不会引发错误）
8. JSONToFile（将JSON对象写入文件）
9. Tip: 使用Chrome开发人员工具调试 Node.js
10. colorize（在文本中添加特殊字符以在控制台中以彩色打印（与console.log()组合））
11. isNode（确定当前运行时环境是否为Node.js）
12. isStream（检查给定参数是否为流）
13. hasFlags（检查当前进程的参数是否包含指定的标志）
14. btoa（从String对象创建一个base-64编码的ASCII字符串，其中字符串中的每个字符都被视为二进制数据的字节）
15. untildify（将波浪号路径转换为绝对路径）
16. isTravisCI（检查当前环境是否为Travis CI）
17. atob（解码已使用base-64编码的数据字符串）
18. requireUncached（从缓存中删除模块后加载模块（如果存在））
19. createDirIfNotExists（创建目录（如果不存在））

React

1）Hooks

1. usePersistedState（返回持久存储在localStorage中的状态值，以及用于更新它的函数）
2. useSSR（检查代码是否在浏览器或服务器上运行）
3. useAsync（处理异步调用）
4. useNavigatorOnLine（检查客户端在线还是离线）
5. useFetch（以声明的方式实现 fetch）
6. useUnload（处理beforeunload窗口事件）
7. useDebounce（Debounce 给定的值）
8. useClickInside（处理在包装的组件内部单击的事件）
9. useClickOutside（处理在包装的组件外部单击的事件）
10. useMediaQuery（检查当前环境是否匹配给定的媒体查询并返回适当的值）
11. useCopyToClipboard（将给定的文本复制到剪贴板）
12. useTimeout（以声明的方式实现 setTimeout）
13. useComponentDidMount（挂载组件后立即执行回调）
14. useComponentWillUnmount（在卸载和销毁组件之前立即执行回调）
15. useInterval（以声明的方式实现 setInterval）
16. usePrevious（存储先前的 state 或 props）
17. useToggler（提供一个布尔状态变量，可以在其两个状态之间切换）

2）Components

1. TagInput（标签输入字段）
2. MultiselectCheckbox（渲染一个复选框列表，该列表使用回调函数将其选定的一个或多个值传递给父组件）
3. LimitedWordTextarea（具有字数限制的 textarea 组件）
4. Modal（渲染可通过事件控制的 Modal 组件）
5. Tabs（选项卡式菜单和视图组件）
6. Accordion（具有多个可折叠内容元素的手风琴菜单）
7. TreeView（可折叠内容的JSON对象或数组的树状图）
8. RippleButton（渲染一个按钮，当单击该按钮时可以对波纹效果进行动画处理）
9. Alert（使用 prop 类型呈现警报组件）
10. CountDown（倒计时组件，该计时器在到达零时显示一条消息）
11. FileDrop（文件拖放组件）
12. StarRating（星级评分组件）
13. MappedTable（渲染具有从对象数组和属性名称列表动态创建的行的表）
14. Tip: React 有条件的 className、空字符串和 null
15. Carousel（轮播组件）
16. 如何在React中设置选择输入的值？
17. PropTypes.objectOf() VS PropTypes.shape()
18. Select（一个不受控制的<select>元素，该元素使用回调函数将其值传递给父组件）
19. Toggle（切换组件）
20. LimitedTextarea（具有字符数限制的textarea组件）
21. Loader（渲染旋转加载程序组件）
22. Tooltip（工具提示组件）
23. AutoLink（将字符串呈现为纯文本，并将URL转换为适当的链接元素）
24. Collapse（渲染具有可折叠内容的组件）
25. DataList（从数组中渲染元素列表）
26. ControlledInput（呈现一个受控的<input>元素，该元素使用回调函数来通知其父组件有关值更新的信息）
27. UncontrolledInput（呈现一个不受控制的<input>元素，该元素使用回调函数来通知其父组件有关值更新的信息）
28. Slider（渲染一个不受控制的范围输入元素，该元素使用回调函数将其值传递给父组件）
29. DataTable（可动态创建行的表格）
30. PasswordRevealer（使用显示按钮呈现密码输入字段）
31. TextArea（呈现一个不受控制的<textarea>元素，该元素使用回调函数将其值传递给父组件）
32. Mailto（一个设置为发送电子邮件的链接（mailto：链接））
33. Callto（呈现一个格式设置为呼叫电话号码的链接（电话：链接））

3）Rendering

1. React 渲染基础（深入了解React的渲染过程，并了解流行的JavaScript框架背后的基础知识）
2. React 渲染优化（深入研究React的渲染过程，并了解如何进行小而强大的调整以优化性能）
3. React 渲染状态（深入研究React的渲染过程并了解Context API和Redux在其中的作用）

4）Testing

1. 一种测试有状态 React 组件的方法
2. 测试使用React Testing库异步更新的 React 组件
3. 使用React Testing Library测试Redux连接的组件