Daily 15

2025 年 5 月 19 日星期一(已编辑)

38

Day 1 Common front-end job vocabulary

Word	中文释义	示例句子
implement	实现	I implemented dark mode using Tailwind CSS.
optimize	优化	I optimized the bundle size by removing unused code.
scalable	可扩展的	We designed a scalable layout system.
reusable	可复用的	Created reusable form components with Vue.
maintain	维护，管理	I maintained the dashboard project for 2 years.
collaborate	协作	I collaborated with backend developers remotely.
rendering	渲染	Improved rendering speed by using virtual lists.
responsive	响应式的	The site is fully responsive across devices.
performance	性能	Performance improved after lazy loading assets.
deploy	部署	We deploy via CI/CD to Vercel.
migrate	迁移	Migrated from Vue 2 to Vue 3 smoothly.
asynchronous	异步的	Used asynchronous requests with Axios.
component-based	基于组件的架构	Our app is built with a component-based architecture.
code review	代码审查	I regularly do code reviews for the team.
refactor	重构	Refactored the legacy code for better maintainability.

Day 2 Performance Optimization & Engineering Practice

Word	中文释义	示例句子
lazy load	懒加载	We lazy load images to improve performance.
debounce	防抖	The search input uses debounce to reduce API calls.
throttle	节流	We throttle the scroll event handler.
memoization	记忆化缓存	We used memoization to cache function results.
bundle size	打包体积	Reducing the bundle size improved load times.
tree shaking	摇树优化（移除无用代码）	Tree shaking removed unused exports from libraries.
code splitting	代码分割	Code splitting allows loading only necessary code chunks.
compression	压缩	Assets are compressed with Brotli for faster delivery.
critical CSS	关键 CSS	We inlined critical CSS for better first paint.
minify	压缩（代码）	All scripts are minified in the production build.
sourcemap	源映射文件	Sourcemaps help us debug the production code.
environment variable	环境变量	We use environment variables for staging and production.
continuous integration	持续集成	We set up continuous integration with GitHub Actions.
deployment pipeline	部署流程	Our deployment pipeline includes linting and tests.
version control	版本控制（Git）	All changes are tracked using version control.

Day3 Debugging & Browser Tools

英文词汇	中文释义	示例句
debug	调试	I used Chrome DevTools to debug the layout issue.
breakpoint	断点	Set a breakpoint to inspect variable values.
console.log	打印调试信息	We added console.log to trace the error.
stack trace	堆栈追踪	The stack trace shows where the error occurred.
source map	源映射	Sourcemaps map minified code to the original source.
network tab	网络面板	The Network tab helps analyze API performance.
performance tab	性能面板	We used the Performance tab to check render time.
lighthouse	谷歌性能分析工具	We ran Lighthouse to audit page performance.
memory leak	内存泄漏	We debugged a memory leak in the infinite list.
watcher	监视器	Added a watcher to observe variable changes.
call stack	调用堆栈	The call stack revealed recursive function calls.
XHR	XMLHttpRequest	XHR requests are visible in the Network tab.
request payload	请求负载	I inspected the request payload in DevTools.
response headers	响应头	We checked CORS issues in response headers.
console error	控制台错误	The console error pointed to a null reference.

Day 4: HTML & Semantics

英文词汇	中文释义	示例句
semantic HTML	语义化 HTML	Using semantic HTML improves accessibility.
aria-label	ARIA 标签	aria-label helps screen readers understand the content.
alt attribute	alt 属性	Always include alt text for images.
form element	表单元素	The login form uses proper form elements.
fieldset	字段集	Used a fieldset to group related inputs.
legend	图例	The legend describes the purpose of the group.
button type	按钮类型	Set button type to 'submit' to avoid unintended behavior.
label	标签	Each input should have an associated label.
placeholder	占位符	The placeholder shows example input.
tabindex	焦点顺序	Tabindex controls the focus order for keyboard users.
heading structure	标题结构	Maintain a logical heading structure.
main tag	`<main>` 标签	Put the main content in a `<main>` tag.
footer tag	`<footer>` 标签	The footer tag contains copyright info.
section	段落块	The page is split into sections.
article	`<article>` 标签	Each blog post is wrapped in an `<article>`.

英文词汇	中文释义	示例句
screen reader	屏幕阅读器	Tested our app using a screen reader.
keyboard navigation	键盘导航	We ensured keyboard navigation works well.
focus trap	焦点陷阱	Modals use a focus trap to keep focus inside.
skip link	跳过链接	Added a skip link to bypass nav bar.
aria-hidden	隐藏 ARIA 内容	Use aria-hidden on non-visible modals.
alt text	替代文本	Descriptive alt text improves accessibility.
contrast ratio	对比度比率	The text meets the required contrast ratio.
accessible name	可访问名称	Buttons must have an accessible name.
role	角色	Set role='dialog' on modal elements.
focusable	可聚焦的	Interactive elements should be focusable.
announce	朗读提示	Use aria-live to announce updates.
color blindness	色盲	We used patterns to support color blindness.
responsive font	响应式字体	Font sizes adjust for readability.
WCAG	无障碍标准	We follow WCAG 2.1 guidelines.
accessibility tree	无障碍树	Screen readers read from the accessibility tree.

Day 6: CSS Concepts & Tailwind

英文词汇	中文释义	示例句
utility class	工具类	Tailwind provides utility classes like p-4 and text-xl.
responsive design	响应式设计	We used breakpoints for responsive design.
flexbox	弹性盒	Flexbox helped align items horizontally.
grid layout	网格布局	CSS Grid is great for two-dimensional layouts.
z-index	堆叠顺序	z-index fixed the overlapping dropdown.
position absolute	绝对定位	The tooltip uses position: absolute.
pseudo-class	伪类	We styled hover states with pseudo-classes.
media query	媒体查询	Media queries apply styles based on screen size.
dark mode	暗黑模式	Dark mode is toggled with a class.
rem unit	rem 单位	We use rem for scalable font sizing.
line-clamp	行数限制	Tailwind line-clamp prevents text overflow.
aspect-ratio	宽高比	Set aspect-ratio for responsive images.
animation	动画	Used Tailwind animation utilities.
custom theme	自定义主题	Tailwind config allows custom themes.
hover effect	悬停效果	We added hover effects for buttons.

Day 7: JavaScript Fundamentals

英文词汇	中文释义	示例句
closure	闭包	Closures allow inner functions to access outer variables.
promise	Promise 对象	A Promise represents a value that may be available later.
async/await	异步等待	Async/await simplifies asynchronous code syntax.
event loop	事件循环	JavaScript runs on a single-threaded event loop.
callback	回调函数	We passed a callback to handle the response.
hoisting	变量提升	Function declarations are hoisted to the top.
scope	作用域	Variables declared inside a function have local scope.
this	this 关键字	The value of 'this' depends on how a function is called.
prototype	原型	JavaScript objects inherit from a prototype.
arrow function	箭头函数	Arrow functions have lexical 'this' binding.
destructuring	解构赋值	Destructuring makes extracting values cleaner.
spread operator	扩展运算符	We used ... to copy an array.
rest parameter	剩余参数	The rest parameter collects remaining args.
typeof	类型检查	typeof null returns 'object' (a known bug).
NaN	非数字	NaN is the result of invalid number operations.

Day 8: State Management

英文词汇	中文释义	示例句
state	状态	We store form input in component state.
useState	React 状态钩子	useState lets you add state to function components.
useReducer	状态管理钩子	useReducer is useful for complex state logic.
global state	全局状态	We store user info in global state.
context	上下文	React Context shares data without props.
Redux	Redux 状态管理	Redux helps manage global state in large apps.
store	状态存储	All Redux state is in a single store.
dispatch	派发动作	We dispatch actions to update state.
selector	选择器	Selectors help read specific parts of state.
middleware	中间件	Redux middleware can intercept actions.
immer	不可变处理库	Immer simplifies immutable state updates.
Zustand	Zustand 状态管理库	Zustand is a minimalist state library for React.
snapshot	快照	We used a snapshot to store temporary state.
devtools	开发工具	Redux DevTools help inspect state changes.
persistence	状态持久化	Persisting state helps users resume sessions.

Day 9: API & Networking

英文词汇	中文释义	示例句
REST API	REST 接口	Our app interacts with a REST API.
GraphQL	GraphQL 接口	GraphQL allows flexible queries from clients.
fetch	获取数据	We used fetch to call the backend API.
axios	axios 请求库	Axios simplifies handling HTTP requests.
GET	获取数据方法	GET requests retrieve data from the server.
POST	提交数据方法	Use POST to send data securely.
status code	状态码	A 404 status code means 'Not Found'.
response body	响应体	The response body includes JSON data.
CORS	跨域资源共享	CORS errors occur when origins mismatch.
headers	请求头	We added authorization headers to the request.
token	令牌	JWT tokens are sent with each API call.
rate limit	请求限制	We hit the API rate limit.
retry	重试机制	The app retries failed API calls.
webhook	网络钩子	The server sends data via a webhook.
throttling	限流	Throttling prevents too many requests.

Day 10: TypeScript Essentials

英文词汇	中文释义	示例句
type	类型	We defined a custom type for the user.
interface	接口	Interfaces define the shape of an object.
enum	枚举类型	Enums help represent a fixed set of values.
union	联合类型	Union types allow multiple possible types.
literal type	字面量类型	We used a literal type for button variants.
type inference	类型推导	TypeScript infers types when possible.
type assertion	类型断言	We used 'as' for type assertion.
optional	可选属性	Optional props use a question mark.
readonly	只读属性	Readonly prevents accidental mutations.
generic	泛型	Generics allow reusable, type-safe functions.
extends	类型扩展	We extended the base interface.
Record	Record 类型	Record maps keys to values.
Partial	Partial 类型	Partial makes all properties optional.
any	任意类型	Use 'any' sparingly to avoid losing type safety.
unknown	未知类型	unknown is safer than any for unknown values.

Day 11: React Patterns & Performance

英文词汇	中文解释	示例句子
component	组件	We built a reusable Button component.
props	属性	Props let you pass data to components.
state lifting	状态提升	We lifted the state up for sharing.
memoization	记忆化	React.memo helps prevent unnecessary re-renders.
useCallback	缓存函数钩子	useCallback avoids recreating the same function.
useMemo	缓存值钩子	useMemo caches expensive computations.
lazy loading	懒加载	We used lazy loading for large components.
suspense	挂起机制	React Suspense handles async component loading.
error boundary	错误边界	Error boundaries catch render-time errors.
pure component	纯组件	Pure components render only when props change.
controlled component	受控组件	Controlled inputs derive their value from state.
custom hook	自定义钩子	Custom hooks abstract shared logic.
virtual DOM	虚拟 DOM	React uses a virtual DOM to optimize updates.
key prop	key 属性	Always set a unique key when mapping lists.
fragment	片段	Fragments let you group children without extra nodes.

Day 12: Testing Frontend Code

英文词汇	中文解释	示例句子
unit test	单元测试	We wrote unit tests for the button component.
integration test	集成测试	Integration tests check interactions between components.
end-to-end (E2E)	端到端测试	E2E tests simulate real user behavior.
Jest	Jest 测试框架	Jest is used for unit testing in React.
Testing Library	测试库	React Testing Library focuses on user behavior.
mocking	模拟	We mocked the fetch API for testing.
snapshot test	快照测试	Snapshot tests catch unintended UI changes.
coverage	测试覆盖率	Test coverage helps track what's tested.
describe	测试描述块	We grouped tests with 'describe' blocks.
beforeEach	测试前置函数	We reset state in beforeEach.
assertion	断言	Assertions check expected outcomes.
render	渲染函数	render() simulates the component in tests.
fireEvent	事件触发	fireEvent simulates user interactions.
async testing	异步测试	We waited for async DOM updates.
CI pipeline	持续集成流程	Tests run automatically in the CI pipeline.

Day 13: Frontend Security Basics

英文词汇	中文解释	示例句子
XSS	跨站脚本攻击	We sanitized user input to prevent XSS.
CSP	内容安全策略	CSP headers mitigate XSS risks.
CSRF	跨站请求伪造	CSRF tokens protect POST requests.
input sanitization	输入清洗	We sanitize input before rendering.
output encoding	输出编码	Encoding output helps prevent injection.
authentication	身份验证	Users must authenticate before accessing data.
authorization	权限控制	Authorization ensures users can only access allowed data.
JWT	JSON Web Token	JWTs are used for secure token-based auth.
https	安全传输协议	Always use HTTPS in production.
captcha	验证码	CAPTCHA helps prevent bot abuse.
rate limiting	速率限制	We implemented rate limiting for API security.
session hijacking	会话劫持	Secure cookies help prevent session hijacking.
secure headers	安全头	Set security headers like X-Frame-Options.
cookie flags	Cookie 安全标志	Use HttpOnly and Secure flags for cookies.
content spoofing	内容欺骗	Avoid unescaped user content in the UI.

Day 14: Remote Work Collaboration Tools

英文词汇	中文解释	示例句子
version control	版本控制	We use Git for version control.
pull request	拉取请求	Submit a pull request for code review.
issue tracking	问题跟踪	We use GitHub Issues to track bugs.
code review	代码审查	Every feature must go through code review.
Slack	Slack 通讯工具	We use Slack for async communication.
Notion	Notion 文档工具	Notion organizes our documentation.
Zoom	Zoom 视频会议	Daily standups are done via Zoom.
Trello	Trello 看板工具	Tasks are managed in Trello boards.
time zone	时区	Remote teams coordinate across time zones.
async update	异步同步	We prefer async updates over meetings.
meeting notes	会议纪要	We share meeting notes after calls.
daily standup	每日站会	Each member posts daily updates.
merge conflict	合并冲突	Resolve merge conflicts before merging.
documentation	文档记录	Clear docs reduce onboarding time.
screen sharing	共享屏幕	We debugged the issue via screen sharing.

Day 15: Deployment & Monitoring

英文词汇	中文解释	示例句子
CI/CD	持续集成与部署	Our project uses GitHub Actions for CI/CD.
build script	构建脚本	The build script compiles the frontend app.
static hosting	静态托管	We deployed to Vercel for static hosting.
Docker	Docker 容器	The frontend is packaged in a Docker image.
environment variables	环境变量	API keys are stored as environment variables.
log	日志	We inspected the deployment logs for errors.
error tracking	错误追踪	Sentry helps track frontend exceptions.
uptime monitoring	在线监控	We use Pingdom for uptime monitoring.
performance monitoring	性能监控	Lighthouse and New Relic track performance.
rollback	回滚	We rolled back to a stable version.
hotfix	热修复	A hotfix was deployed for the bug.
cache	缓存	CDN caches improve load speed.
invalidate	缓存失效	We invalidated the cache after deploy.
domain	域名	The site is hosted on a custom domain.
SSL certificate	SSL 证书	SSL ensures encrypted connections.

使用社交账号登录