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）动画

CSS 居中

1. Flexbox（使用 Flexbox 将子元素在父元素中水平和垂直居中）
2. Grid（使用网格将子元素在父元素内水平和垂直居中）
3. Transform（使用CSS transform将子元素在其父元素内垂直和水平居中）
4. Display 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 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（提供一个布尔状态变量，可以在其两个状态之间切换）

React 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（呈现一个格式设置为呼叫电话号码的链接（电话：链接））

React Rendering

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

React Testing

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