b3log / 30 Seconds Zh_cn
📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。
Stars: ✭ 1,233
Labels
Projects that are alternatives of or similar to 30 Seconds Zh cn
Gold Miner
🥇掘金翻译计划,可能是世界最大最好的英译中技术社区,最懂读者和译者的翻译平台:
Stars: ✭ 29,872 (+2322.71%)
Mutual labels: translation, frontend
Gremlins.js
Monkey testing library for web apps and Node.js
Stars: ✭ 8,790 (+612.9%)
Mutual labels: frontend
Frontend Notes
An attempt to document what's happening on the client-side
Stars: ✭ 76 (-93.84%)
Mutual labels: frontend
Web Apps Old
The frontend for ONLYOFFICE Document Server which builds the program interface
Stars: ✭ 77 (-93.76%)
Mutual labels: frontend
Thing Translator
📷 🗣 Point your camera at things to hear how to say them in a different language
Stars: ✭ 1,231 (-0.16%)
Mutual labels: frontend
Web Apps
The frontend for ONLYOFFICE Document Server which builds the program interface
Stars: ✭ 73 (-94.08%)
Mutual labels: frontend
React Native Picker Select
🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
Stars: ✭ 1,229 (-0.32%)
Mutual labels: frontend
Nuxt Chat App
Frontend of real-time chat application built using nuxtjs, socket.io. Check the backend at https://github.com/binbytes/chat-app-server.
Stars: ✭ 77 (-93.76%)
Mutual labels: frontend
Seed Rs Realworld
Exemplary real world application built with Seed
Stars: ✭ 77 (-93.76%)
Mutual labels: frontend
Iwanttoworkatnuveo
Você é pessoa desenvolvedora? Quer trabalhar com Inteligência artificial? Esse repositório é pra você!
Stars: ✭ 76 (-93.84%)
Mutual labels: frontend
Localizationprovider
Database driven localization provider for .NET applications (core assemblies)
Stars: ✭ 77 (-93.76%)
Mutual labels: translation
Axentix
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. The easy layout control and grid system makes it one of the most easy to learn framework.
Stars: ✭ 75 (-93.92%)
Mutual labels: frontend
Localizationkit ios
Realtime Dynamic localization translation delivery system for iOS and Mac OSX in Swift. Create and update texts from localization.com without needing to recompile or redeploy. Cocapod for iOS devices (iPad, iPhone, iPod Touch and Mac)
Stars: ✭ 1,206 (-2.19%)
Mutual labels: translation
每天 30 秒系列
前端精选问题集,每天仅需 30 秒
明日 30s - 监听 DOM 的修改 advanced
今日 30s - 节点列表转换为数组
昨日 30s - 标签页是否正在被浏览 HTML
目录
精选常见面试题,帮助您准备下一次面试
精选常见交互,帮助您拥有简洁酷炫的站点
精选有用的 React 片段,帮助你获取最佳实践
精选常见代码集,帮助您提高打码效率
整理前端界的最新资讯,邀您一同探索新世界
每天 30 秒系列之前端面试
精选常见面试题,帮助您准备下一次面试
HTML
- 图片标签中的 alt 有什么作用?
- 清缓存的目的是什么,如何实现?
- HTML 中可以包含多个
<header>
或者<footer>
元素吗? - 简单描述 HTML5 语义元素中
<header>
、<article>
、<section>
、<footer>
的正确用法 - 简述
<script>
标签中的 defer 和 async 属性 - 什么是 DOM?
- HTML 规范和浏览器实现存在什么区别?
- XHTML 和 HTML 有什么不同?
rel="noopener"
应在什么场景下使用,为什么?- 什么是 HTML5 存储?解释一下
localStorage
和sessionStorage
- 解释 MIME type 及其作用
CSS
- 介绍一下 CSS 的 BEM
- CSS 预处理器有什么优势?
- 使用 flexbox,创建一个 3 列布局,其中每列占据容器的 col-{n} / 12 比率
- 简述一下
@media
的媒体类型 - 描述 CSS 盒子模型布局并简要描述其每一个部分
- focus 有什么效果?应该怎么正确处理他们?
em
和rem
有什么区别?- CSS sprites 的优点及如何使用?
+
和~
选择器有什么区别?- CSS 优先级是如何计算的?
JavaScript
- ['1', '7', '11'].map(parseInt) 的输出结果是?
- 等于操作符 `==` 和 `===` 有什么区别
- 后置递增 `i++` 和前置递增 `++i` 操作有什么区别?
Promise
有哪些状态?- 根据食谱和已有食材计算可烹饪的最大次数
- 实现一个功能和
Function.prototype.bind
相同的函数 - 请举例说明什么是回调?
- 如何克隆一个 JavaScript 对象?
- JavaScript 中如何对比两个对象?
- CORS 是什么?
- 介绍事件委托及其优点,并说明如何使用?
- JavaScript 的表达式和语句有什么区别?
- JavaScript 中的真值和假值是什么?
- 生成一个包含 n 项的斐波那契数列
0.1 + 0.2 === 0.3
的计算结果是什么?- 数组方法
map()
和forEach()
有什么区别? - 变量提升
- 提升在 JavaScript 中是如何工作的?
- 立即执行匿名函数的原因是什么?
- 词法作用域和动态作用域的区别?
- 使用星号替换字符串且显示后四位
null
和undefined
有什么区别?- 参数和 arguments 有什么区别
- 列举几种创建对象的方法,并说明每种方法的使用场景
- JavaScript 通过值还是引用传递?
- 什么是 Promises?
- 原型继承和经典继承有什么区别?
- 原始值和引用值的比较
- ASI (automatic semicolon insertion) - 自动插入分号
- JavaScript 是否需要分号?
- 在 JavaScript 中同步和异步代码有什么区别?
- JavaScript 中的短路计算是什么?
- typeof
- 什么是 JavaScript 数据类型?
var
、let
、const
和没有关键字的声明有什么区别?- 什么是大 O 符号?
- 什么是闭包?请给出一个有用的示例
- 什么是事件驱动编程?
- 什么是函数式编程?
- 命令式编程和声明式编程有什么区别?
- Memoization 是什么?
- 对比 Mutable 和 Immutable 及 Mutating 和 Non-Mutating
- JavaScript 中唯一自己不等于自己的值是谁?
- 复合函数
- 什么是纯函数?
- 解释递归及其使用场景
- 静态方法和实例方法的区别
- 解释
this
关键字并介绍他是如何工作的? - React, Vue, Angular, Hyperapp 等 JavaScript UI 库或框架的目的是什么?
use strict
的作用- 虚拟 DOM 是什么,库或者框架中为什么要使用他?
React
- 什么是内联条件表达式?
- React 和 HTML 的事件处理有什么不同?
- React 中的元素和组件有什么不同?
- 状态提升在 React 中的作用
- React 中如何在 JSX 树中写注释
- React 中什么是有状态的组件?
- 什么是无状态组件
setState
使用回调函数作为参数的目的是什么?- 为什么 React 要使用 className 来代替 HTML 中的 class?
- key 是什么?列表中使用时有什么优点?
- React 生命周期的方法有哪些?
- React 组件生命周期有哪些不同的阶段?
- 如何将参数传递给事件处理或回调函数?
- allback refs 和 findDOMNode() 之间哪一个更好?
- 什么是
children
属性? - React 中的 context 是什么?
- 什么是 React 中的错误边界?
- fragments 是什么?
- 什么是高阶组件?
- 在 React 组件类中如何保证
this
为正确的上下文? - React 中的 portals 是什么?
- React 中如何使用 prop 检查?
- 介绍 React 中的 Refs 及其使用场景?
Node
Security
每天 30 秒系列之 CSS
精选常见交互,帮助您拥有简洁酷炫的站点
布局
- 清除浮动
- 重置 box-sizing
- 宽高保持一致
- table 居中显示
- 平均分配子元素
- 盒子模型居中
- 垂直小技巧
- 网格居中
- 最后一个元素占满剩余可用高度
- 使用 transform 进行居中
- 多行文本截断
- 文本截断
视觉
- 圆
- 自定义滚动条
- 自定义文本选中样式
- 渐变阴影
- 文本风化效果
- 图片适配
- 全屏
- 文本渐变
- 细而明显的边框
- :not 选择器
- 逃离屏幕
- 对溢出的内容进行渐变
- 漂亮的下划线
- 重置所有样式
- 带形状的分割线
- 系统字体栈
- 三角形
- 斑马条纹列表
动画
交互
其他
每天 30 秒系列之 React
精选有用的 React 片段,帮助你获取最佳实践
Array
Hook
Input
- input 传值给父组件
- 限制 textarea 输入的长度
- 单词个数限制
- 多选列表向父组件传值
- 显示密码框内容
- 下拉列表向父组建传值
- 滑动元素向父组件传值
- 文本输入框向父组件传值
- 输入框向父组件直接传值
Visual
- 手风琴 advanced
- 提示组件
- 文本自动转链接 advanced
- 轮播组件
- 折叠组件
- 时钟倒数计时器 advanced
- 文件的拖拽
- 旋转加载组件
- 邮件发送组件
- 弹窗组件
- 带波浪效果的按钮
- 星级比率组件
- Tab 组件
- 自动计数器
- 可切换组件
- 信息提示组件
- 树视图组件 advanced
每天 30 秒系列之 JavaScript Code
精选常见代码集,帮助您提高打码效率
🔌 适配器
- ary
- call
- collectInfo
- flip
- over
- overArgs
- pipeAsyncFunctions
- pipeFunctions
- promisify
- rearg
- spreadOver
- unary
📚 数组
- all
- allEqual
- any
- arrayToCSV
- bifurcate
- bifurcateBy
- chunk
- compact
- countBy
- countOccurrences
- deepFlatten
- difference
- differenceBy
- differenceWith
- drop
- dropRight
- dropRightWhile
- dropWhile
- everyNth
- filterFalsy
- filterNonUnique
- filterNonUniqueBy
- findLast
- findLastIndex
- flatten
- forEachRight
- groupBy
- head
- indexOfAll
- initial
- initialize2DArray
- initializeArrayWithRange
- initializeArrayWithRangeRight
- initializeArrayWithValues
- initializeNDArray
- intersection
- intersectionBy
- intersectionWith
- isSorted
- join
- JSONtoCSV advanced
- last
- longestItem
- mapObject advanced
- maxN
- minN
- none
- nthElement
- offset
- partition
- permutations advanced
- pull
- pullAtIndex advanced
- pullAtValue advanced
- pullBy advanced
- reducedFilter
- reduceSuccessive
- reduceWhich
- reject
- remove
- sample
- sampleSize
- shank
- shuffle
- similarity
- sortedIndex
- sortedIndexBy
- sortedLastIndex
- sortedLastIndexBy
- stableSort advanced
- symmetricDifference
- symmetricDifferenceBy
- symmetricDifferenceWith
- tail
- take
- takeRight
- takeRightWhile
- takeWhile
- toHash
- union
- unionBy
- unionWith
- uniqueElements
- uniqueElementsBy
- uniqueElementsByRight
- uniqueSymmetricDifference
- unzip
- unzipWith advanced
- without
- xProd
- zip
- zipObject
- zipWith advanced
🌐 浏览器
- 数组转换为 HTML 列表
- 底部是否可见
- 拷贝到剪切板 advanced
- 计数器 advanced
- 元素的创建
- 创建一个事件中心
- 获取当前链接
- 设备检测
- 父元素中是否包含子元素
- 元素在屏幕中是否可见 advanced
- 表单转对象
- 获取图片地址
- 获取滚动位置
- 获取样式
- 是否包含 class
- 使用 SHA-256 创建一个 hash advanced
- 隐藏元素
- https 重定向
- 在元素尾部插入 HTML
- 在元素前插入 HTML
- 标签页是否正在被浏览
- 节点列表转换为数组
- TODO
⏱️ 日期
- TODO
🎛️ 函数
- TODO
➗ 数学
- TODO
📦 Node
- TODO
🗃️ 对象
- TODO
📜 字符串
- TODO
📃 类型
- TODO
🔧 工具
- TODO
❓ 其他
- TODO
每天 30 秒之前端资讯
整理前端界的最新资讯,邀您一同探索新世界
TypeScript
Vue
鸣谢
部分翻译自以下项目,在此对这些项目的贡献者们致敬!若有翻译不恰当之处请向我们反馈,非常感谢 ❤️
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].