内容来自于国外的《[30 seconds of code](https://www.30secondsofcode.org)》，只翻译了其中的标题和简短描述，可对其做个整体了解，内容可用 Google 翻译，大体都能看懂。

与 [Underscore.js](https://underscorejs.org/) 和 [Lodash.js](https://lodash.com/docs/) 不同，30 seconds of code 中的代码片段都是各自独立的，可直接引用，也更容易吸收学习。

## JavaScript

## JavaScript Array Tricks

## JavaScript Algorithms

## CSS
#### 1）动画
1. [图像悬停菜单](https://www.30secondsofcode.org/css/s/image-hover-menu)（悬停图像时显示菜单覆盖）
2. [悬停图像叠加](https://www.30secondsofcode.org/css/s/image-overlay-hover)（在悬停时显示图像叠加效果）
3. [交错动画](https://www.30secondsofcode.org/css/s/staggered-animation)（为列表的元素创建交错动画）
4. [弹跳装载机](https://www.30secondsofcode.org/css/s/bouncing-loader)（创建一个弹跳加载器动画）
5. [高度过渡](https://www.30secondsofcode.org/css/s/height-transition)（当元素的高度未知时，将其高度从0转换为自动）
6. [图像在悬停时旋转](https://www.30secondsofcode.org/css/s/image-hover-rotate)（在悬停时为图像创建旋转效果）
7. [旋转卡](https://www.30secondsofcode.org/css/s/rotating-card)（创建一个在悬停时旋转的双面卡片）
8. [Tip: CSS缓动变量](https://www.30secondsofcode.org/blog/s/css-easing-variables)（了解如何使用缓动函数的cubic-bezier()类并创建引人注目的精美动画）
9. [Tip: CSS过渡的完美持续时间](https://www.30secondsofcode.org/blog/s/perfect-css-transition-duration)（了解如何在用户与页面上的元素进行交互时使CSS过渡完美）
10. [悬停下划线动画](https://www.30secondsofcode.org/css/s/hover-underline-animation)（当文本悬停在上方时，创建动画下划线效果）
11. [按钮边框动画](https://www.30secondsofcode.org/css/s/button-border-animation)（在悬停时创建边框动画）
12. [脉冲装载机](https://www.30secondsofcode.org/css/s/pulse-loader)（使用 animation-delay 属性创建脉冲效果加载器动画）
13. [甜甜圈加载器](https://www.30secondsofcode.org/css/s/donut-spinner)（创建一个甜甜圈加载器，可用于指示内容的加载）

#### 2）交互
1. [鼠标光标渐变跟踪](https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking)（悬停效果，其中渐变跟随鼠标光标）
2. [水平滚动捕捉](https://www.30secondsofcode.org/css/s/horizontal-scroll-snap)（创建一个可水平滚动的容器，在滚动时将捕捉到元素）
3. [垂直滚动捕捉](https://www.30secondsofcode.org/css/s/vertical-scroll-snap)（创建一个可垂直滚动的容器，在滚动时将捕捉元素）
4. [带前缀输入](https://www.30secondsofcode.org/css/s/input-with-prefix)（创建带有视觉，不可编辑前缀的输入）
5. [专注于](https://www.30secondsofcode.org/css/s/focus-within)（如果窗体的任何子项都处于焦点状态，则更改窗体的外观）
6. [汉堡按钮](https://www.30secondsofcode.org/css/s/hamburger-button)（显示一个汉堡菜单，该菜单在悬停时转换为十字按钮）
7. [弹出菜单](https://www.30secondsofcode.org/css/s/popout-menu)（显示悬停/焦点上的交互式弹出菜单）
8. [拨动开关](https://www.30secondsofcode.org/css/s/toggle-switch)（仅使用CSS创建切换开关）
9. [淡出兄弟元素](https://www.30secondsofcode.org/css/s/sibling-fade)（淡出悬停位置的兄弟元素）
10. [禁用选择](https://www.30secondsofcode.org/css/s/disable-selection)（使内容无法选择）

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

#### 4）视觉
1. [带有浮动标题的列表](https://www.30secondsofcode.org/css/s/floating-list-titles)
2. [在悬停时显示其他内容](https://www.30secondsofcode.org/css/s/hover-additional-content)（创建一个卡，在悬停时显示其他内容）
3. [导航列表项的悬停和焦点效果](https://www.30secondsofcode.org/css/s/navigation-list-item-hover-and-focus-effect)（使用 CSS 变形为导航项创建自定义悬停和焦点效果）
4. [带有粘滞标题的列表](https://www.30secondsofcode.org/css/s/sticky-list-titles)
5. [25个 CSS 渐变](https://www.30secondsofcode.org/blog/s/25-css-gradients)
6. [如何为暗黑模式创建自定义响应图标？](https://www.30secondsofcode.org/blog/s/responsive-favicon-dark-mode)
7. [全屏](https://www.30secondsofcode.org/css/s/fullscreen)（在全屏模式下将样式应用于元素）
8. [溢出滚动渐变](https://www.30secondsofcode.org/css/s/overflow-scroll-gradient)（向溢出元素添加渐变，以更好地指示还有更多内容要滚动）
9. [图片文字叠加](https://www.30secondsofcode.org/css/s/text-backdrop-overlay)（使用覆盖图在图像上方显示文本）
10. [动态阴影](https://www.30secondsofcode.org/css/s/dynamic-shadow)（根据元素本身的颜色创建类似于 box-shadow 的阴影）
11. [漂亮的文本下划线](https://www.30secondsofcode.org/css/s/pretty-text-underline)
12. [蚀刻文字](https://www.30secondsofcode.org/css/s/etched-text)（使文本看起来被“蚀刻”或雕刻到背景中）
13. [系统字体](https://www.30secondsofcode.org/css/s/system-font-stack)（使用操作系统的本机字体来接近本机应用程序的感觉）
14. [斑马条纹列表](https://www.30secondsofcode.org/css/s/zebra-striped-list)（创建具有交替背景颜色的条纹列表）
15. [自定义滚动条](https://www.30secondsofcode.org/css/s/custom-scrollbar)
16. [顶部三角形的边框](https://www.30secondsofcode.org/css/s/border-with-top-triangle)（创建一个内容容器，顶部带有一个三角形）
17. [计数器](https://www.30secondsofcode.org/css/s/counter)（创建一个自定义列表计数器来说明嵌套列表元素）
18. [棋盘背景图案](https://www.30secondsofcode.org/css/s/checkerboard-pattern)
19. [Drop cap](https://www.30secondsofcode.org/css/s/drop-cap)（使第一段的第一个字母大于文本的其余部分）
20. [圆点背景图案](https://www.30secondsofcode.org/css/s/polka-dot-pattern)
21. [曲折背景图案](https://www.30secondsofcode.org/css/s/zig-zag-pattern)
22. [自定义文字选择](https://www.30secondsofcode.org/css/s/custom-text-selection)（更改文本选择的样式）
23. [条纹背景图案](https://www.30secondsofcode.org/css/s/stripes-pattern)
24. [渐变文字](https://www.30secondsofcode.org/css/s/gradient-text)
25. [圆](https://www.30secondsofcode.org/css/s/circle)（使用纯CSS创建圆形）
26. [三角形](https://www.30secondsofcode.org/css/s/triangle)（使用纯CSS创建三角形）
27. [重置所有样式](https://www.30secondsofcode.org/css/s/reset-all-styles)（仅使用一个属性将所有样式重置为默认值）

#### 5）居中
1. [Flexbox](https://www.30secondsofcode.org/css/s/flexbox-centering)（使用 Flexbox 将子元素在父元素中水平和垂直居中）
2. [Grid](https://www.30secondsofcode.org/css/s/grid-centering)（使用网格将子元素在父元素内水平和垂直居中）
3. [Transform](https://www.30secondsofcode.org/css/s/transform-centering)（使用CSS transform将子元素在其父元素内垂直和水平居中）
4. [Table](https://www.30secondsofcode.org/css/s/display-table-centering)（使用 display:table 将子元素在其父元素内垂直和水平居中）

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

## React
#### 1）Hooks
1. [usePersistedState](https://www.30secondsofcode.org/react/s/use-persisted-state)（返回持久存储在localStorage中的状态值，以及用于更新它的函数）
2. [useSSR](https://www.30secondsofcode.org/react/s/use-ssr)（检查代码是否在浏览器或服务器上运行）
3. [useAsync](https://www.30secondsofcode.org/react/s/use-async)（处理异步调用）
4. [useNavigatorOnLine](https://www.30secondsofcode.org/react/s/use-navigator-on-line)（检查客户端在线还是离线）
5. [useFetch](https://www.30secondsofcode.org/react/s/use-fetch)（以声明的方式实现 fetch）
6. [useUnload](https://www.30secondsofcode.org/react/s/use-unload)（处理beforeunload窗口事件）
7. [useDebounce](https://www.30secondsofcode.org/react/s/use-debounce)（Debounce 给定的值）
8. [useClickInside](https://www.30secondsofcode.org/react/s/use-click-inside)（处理在包装的组件内部单击的事件）
9. [useClickOutside](https://www.30secondsofcode.org/react/s/use-click-outside)（处理在包装的组件外部单击的事件）
10. [useMediaQuery](https://www.30secondsofcode.org/react/s/use-media-query)（检查当前环境是否匹配给定的媒体查询并返回适当的值）
11. [useCopyToClipboard](https://www.30secondsofcode.org/react/s/use-copy-to-clipboard)（将给定的文本复制到剪贴板）
12. [useTimeout](https://www.30secondsofcode.org/react/s/use-timeout)（以声明的方式实现 setTimeout）
13. [useComponentDidMount](https://www.30secondsofcode.org/react/s/use-component-did-mount)（挂载组件后立即执行回调）
14. [useComponentWillUnmount](https://www.30secondsofcode.org/react/s/use-component-will-unmount)（在卸载和销毁组件之前立即执行回调）
15. [useInterval](https://www.30secondsofcode.org/react/s/use-interval)（以声明的方式实现 setInterval）
16. [usePrevious](https://www.30secondsofcode.org/react/s/use-previous)（存储先前的 state 或 props）
17. [useToggler](https://www.30secondsofcode.org/react/s/use-toggler)（提供一个布尔状态变量，可以在其两个状态之间切换）

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

#### 3）Rendering
1. [React 渲染基础](https://www.30secondsofcode.org/blog/s/react-rendering-basics)（深入了解React的渲染过程，并了解流行的JavaScript框架背后的基础知识）
2. [React 渲染优化](https://www.30secondsofcode.org/blog/s/react-rendering-optimization)（深入研究React的渲染过程，并了解如何进行小而强大的调整以优化性能）
3. [React 渲染状态](https://www.30secondsofcode.org/blog/s/react-rendering-state)（深入研究React的渲染过程并了解Context API和Redux在其中的作用）

#### 4）Testing
1. [一种测试有状态 React 组件的方法](https://www.30secondsofcode.org/blog/s/testing-stateful-ui-components)
2. [测试使用React Testing库异步更新的 React 组件](https://www.30secondsofcode.org/blog/s/testing-async-react-components)
3. [使用React Testing Library测试Redux连接的组件](https://www.30secondsofcode.org/blog/s/testing-redux-connected-components)