搜寻文章标签:unsorted

钥匙符号

了解「验证」和「授权」的差别

验证(Authentication)与授权(Authorization)是存取控制中两个常被混淆的概念,背后分别代表两种问题:你是谁?你被允许做哪些事?同时也将介绍几种常见的授权模式,例如 RBAC 与 ABAC 管理授权。

早餐土司符号

从网页演进看 Jamstack 如何解决传统架构的痛点

要了解 Jamstack 架构解决什么问题,需要先回顾网页演变的历史,从静态档案到动态伺服器渲染再到客户端渲染,Jamstack 的核心概念是强调预先生成静态页面并解耦商业逻辑与内容,以提高网站效能、弹性与安全性。适合大多数动态资料不多的网站。

移動方塊

通过渐变伪元素淡入淡出可滚动内容

近期预览我的线上履历时发现阅读体验有点生硬,甚至最糟的情况下会裁到文字行间,导致没有任何提示指明可以继续往下滑动,这篇文章描述如何透过 CSS 伪元素达成卷动元素淡入的样式。这个样式我应用于自己的线上履历或 CodePen 范例可以参考看看。

手指移动符号

实作可拖动 DOM 元素增添网站互动与趣味性

最初是看到 Glitch 网站 图示像冰箱磁铁可以随意挪动的功能觉得充满趣味,背后是使用 react-draggable 套件制作。不过考虑到速度与维护性,部落格不打算因为一页特效就引入额外套件,所以从头用 DOM API 手刻了相关功能。

数据库符号

设置 Drizzle ORM 连接 Postgres 为例

单纯透过 SQL 与关联式资料库直接沟通,可能会带来开发效率与安全性的问题,因此挑选一款合适的 ORM 多一层抽象是常见的选择,而 Drizzle ORM 是我最常使用也是接触 ORM 的起点。它在 TypeScript 生态中有出色支援,虽然相对新颖,但社群活跃,值得一试。

代码方框符号

初学 Docker 并轻松构建 Postgres

刚接触后端时我还不清楚如何有效重现服务供其他开发者使用,直到遇见 Docker 才大幅简化各种设施的维护与重现的工作,是一项非常高回报的实用技能,本篇从实做角度透过 Docker 建构 Postgres 服务,了解它的便捷快速。

文件夹符号

与关系数据库对话:SQL vs SQL Builder vs ORM

开发网站无可避免的会和关联式资料库打交道,而互动的方式有三种:SQL、SQL Builder、ORM。这三者有着不同的使用方式、优缺点与适用场景,了解它们的差异能帮助我们做出更适合专案需求的技术选择。分享我在 Node.js 的学习经历。

公文包

挑战改善 104 人力银行网站清单载入体验

近期很频繁使用到台湾最知名的求职平台:104 人力银行,其中个人资料选单的体验有潜在的问题值得挖掘。就目前 104 的体验对我来说没什么好抱怨的,就是最少这个 `0` 如果能改成 `-` 或 `载入中` 代表无资料都清楚得多阿!就和 `0` 与 `null` 一样,它们相近的意义是不同的。

合作符号

有效面對冲突的方式:不同意但致力

在团队中冲突是不可避免的,发现遇到太多次需要解释对于团队冲突的看法:「不同意但致力(Disagree and Commit)」,所以特别重复习一次并写成文章推广。 1. 鼓励讨论 2. 设立决策停损点 3. 不要事成定局后,方才提出意见或办法。

游戏控制器符号

有限与无限游戏看待电子阳痿

为了厘清自己电子阳痿或对事情提不起兴趣的念头,一直回忆起某天偶然读到一本书的推荐《有限与无限的游戏》,里面提到世上有两种游戏的概念发现对于梳理看待「游戏观」是有帮助的。不幸的是,时间确实在流逝。时间飞快地流逝。过去在增加,未来在减少。可能性在减少,遗憾在增加。

翻译符号

多语言网站当中的 hreflang 是什么?

在打造多语系网站时,许多人会关注翻译的准确度或切换体验,但往往忽略了一个对 SEO 非常关键的设定:`hreflang`。正好最近把部落格和个人网站模板的多语系都调整完成,它们都是需要重视 SEO 的静态内容网站类型,其中的经验我纪录于这篇文章当中。

检测性能符号

自建 Lighthouse 服务器实现持续监控网站最佳实践

在先前的文章提到如何使用 Lighthouse 这款工具监控前端大大小小的最佳实践,例如:效能、SEO、适用性……等能被客观测量比较的数值,虽然很方便但你可能会希望自架 Lighthouse 服务,以便实现:搜集与管理自己的隐私资料、持续性监控同个网站的检测资料、减少依赖第三方伺服器服务。

工具箱符號

设置 Uptime Kuma 监控服务在线状态

随着服务增多也出现了维护上的困难,要如何知道自己与第三方的伺服器有好好在运作?可以额外再开设一个伺服器再去专门监控其他伺服器的状态,而 Uptime Kuma 就是一款开源免费的监控工具。我用它来监控所有对外的服务确保在第一时间出问题或服务时好时坏时能得知并着手修理,算是一个简单但实用的好工具,展开监测服务的第一步。

码表符号

面试时不懂应该猜答案吗?为什么?

近期在面试考一些常见逻辑测验题目而在与朋友对谈到这件事的过程中,发现一种观点是「时间到也宁愿留白也不要乱填」,以免被发现了仰赖运气不懂装懂又要解释。我很讶异自己当过多年的学生,却是第一次反思这项行为背后的动机与取舍。人的偏见不是那么轻松就能够改变的,但透过思考能更明白自己是否知行合一。

检测性能符号

使用 Edge Function 生成 OG 图,构建时间缩短 90%

随着博客文章逐渐增多,静态生成压力也随之上升,例来说在日常开发会需要近 10 分钟的时间,大多是生成图片占据大多时间,建构预览图的数量是:`(语言 x 文章数量)`。延续最大程度的静态渲染是合理的选择,而针对 OG 图片渲染可以包成 Serverless Function 在需要时呼叫。

旋转符号

n8n 几个初学最重要的概念

近期在尝试 n8n 时碰上了不少麻烦,但在问题解决后觉得其实也不是什么太大的问题但就是莫名的卡住流失了许多时间,我踩过的坑或许也是你踩过的坑。这篇文章适合像我一样没特别看文件直接跳进去玩的开发者,后续细读文件反省把问题都列出来。

箭頭融合符號

整合不同 Git 仓库在一起(符号链接、Git 子模块)

网页东东至今仍完全以本地为主,所有代码、字体、图片影片与文章内容都记录于 Git 当中,并通过 Git LFS 来管理大文件。这样的决定有好有坏,其中一个问题便是内容与代码的耦合高,任何一个想维护的人要把我撰写的几百篇文章连带抓下来 😅,随着项目成熟我决定要将两者分离。

旋转符号

n8n Human in the Loop 替 AI 流程建構反饋

近期在琢磨刚玩上手的 n8n 的各式功能,其中在制作 AI 流程时发现如果其中一个环节不如预期整个流程重来十分的耗费时间与金钱,这时候我们就可以添加上人类的反馈,重复的修改提示词直到满意为止。在制作文章研究生成 AI 时我也运用了相关功能来达成与 AI 沟通动态调整需求的目的。

文章上有箭頭符號

简单自架 n8n 回馈表单小试水深

近期在熟悉 n8n 流程自动化的工具,发现值得推荐给任何人(特别是软件工程师)n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。

图表图示

使用 Mermaid 通过文字快速生成图表

近期工作顺代研究到使用 Mermaid 来快速生成图表,这是一个很方便的工具,可以快速生成各种图表,例如流程图、心智图、圆饼图……等,你能想到的图表基本都有支援。大致纪录一下选择这项技术的原因以及使用上的心得。 Mermaid 与 AI 结合完美的免去了复杂度,让我们能够更专注在内容上,而不是花太多时间在制作图表上。

简报符号

Slidev:基于网页的简报创作方案

近期工作研究到使用 Slidev 来呈现简报,一个基于 Vite + Vue3 的简报工具整合了大大小小的套件方便用网页创作简报,主要以 Markdown 来撰写内容,这样的方式让我们可以专注在内容上,而不用花太多时间在花俏的简报软体操作。

清单符号

使用 Details 与 Summary 制作原生手风琴 (含收合动画!)

手风琴是一种常见的网页 UI 模式,通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯,在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能,并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。

星星符号

如何架构一个超赞的前端专案于 2025 年 (feat. Vue)

随着前端演进,我们时常需要依靠现成的框架轮子协助,而其中Vue 又是继React 外第二热门且成熟的选项,但很少有教学提到一个完整的专案该如何建构,以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案,在 2025 年!

盾牌符号

写给网页开发者的 CORS 理解

CORS (Cross-Origin Resource Sharing) 跨来源资源共享,是一个机制用来决定网页是否能够存取其他来源的资源,能有效防止不同来源之间的不正当资源存取。透过 CORS,可以在保护用户资料的同时,允许合法的跨来源请求。

盾牌符号

写给网页开发者的 CSRF 理解与防范

无论如何都不轻易相信用户请求即能最大程度防范 CSRF。最近在碰一些资安的东东,发现自己对于这一块知识都比较薄弱,身为前端工程师资安通常并不是首要关注的职责,但一但有漏洞保证后果不堪设想,于是近期来补足一下这方面的知识。

盾牌符号

写给网页开发者的 XSS 理解与防范

总结是无论如何都不轻易相信用户输入即能最大程度防范 XSS。最近在碰一些资安的东东,发现自己对这一块知识都比较薄弱,身为前端工程师资安通常并不是首要关注的职责,但一旦有漏洞保证后果不堪设想,于是近期来补足一下这方面的知识。现代齐全的工具与文件帮助下意外执行用户提供的恶意脚本的概率已经大幅降低。

工具箱符號

如何管理工具函数

近期维护项目时发现有许多通用的函数散乱的分布在项目当中,于是趁有空时整理出一个统一的结构规则以便团队使用。很多时候我们对这些通用工具函数的印象只停留在要抽离到某个文件夹,至于要怎么管理或是维护这些函数就没有太多想法,导致许多乱象产生,像是:过度抽象、意义不明的命名、神级函数。

桶子符号

什么是桶文件(Barrel File)模式?

我之所以调查这个主题,是因为目前所在的团队大量使用这种模式,但 Vite 在开发中不进行 Tree Shake,导致每次开发环境都有大量无用代码被打包,严重影响开发体验。因此研究一下这种方法的理念与优缺点以架构更好的项目。

温度计符号

为什么要替软件进行测试?

近期我对自己看待撰写程式这件事有更高的期许,除了最基本的效能、阅读性、扩充性……之外还有一个非常重要的领域就是:测试。不过程式好端端的能动就代表测试没有必要了吗?在我刚工作时实际上做了一段时间的自动化 QA 工程一段时间,不过那时候的我其实也并不明白写测试的原因,就是有程式就拿来自动化测试,并没有想太多。

不高興表情符號

为什么项目时间预估这么难?具体可以如何解决时程预判问题

发现身为初阶打工人其实通常只是看见问题并拼命解决它,但换个角度思考:“如果现在手上项目烧起来,主管定个超乎预期的时程但你也没有自己一套说法,要如何交代?”,最贴近实作的人其实是最能开出真实预估的人。参考:The work is never just “the work” - Dave Stewart 文章。

层级符号

具体来说可以怎么建立与管理产品的设计令牌或变量

近期执行的专案在进行翻新包含了整体的视觉设计,因此前端也面临要如何同步管理产品视觉的问题。先说痛点,先前专案并没有具体的规范应该如何定义 UI 当中的数值,导致魔法数字(没有规范与描述的值)流窜于整个产品当中,造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。

选色器符号

用正确的方式制作深色模式(或任何网站风格)

先前提到「添加深色模式要考虑的代价」无可避免的会增加比预想中还要多的成本,但如果能在一开始用正确的方式制作网页风格,那么可以有效的避免掉许多问题。如果你希望制作不同风格的数字产品都可以参考本篇文章,用更省力的方式定义风格。

升级符号

来看看 Nx 如何解决套件框架更新的问题 - nx migrate

近期将公司的新 Nx Monorepo 架构专案透过 GitHub Action 添加了自动更新套件的功能,会想实践该功能是因为旧专案疏于更新导致吃了非常多的苦头,希望在新架构下可以有更轻松且自动化的方式去执行更新。其中 Nx 有专属的 nx migrate 指令帮助我们达成这件事,并且背后有些非常有趣的机制与理念。

深色模式符号

添加深色模式需要考虑的代价

近期维护的项目希望引入深色模式,但分析后我认为实现这个需求并不是一个划算的选择,本文将讨论原因。如今许多网站和应用程序默认提供深色模式,这是一种将背景色转为深色,前景色转为浅色的设计手段,具备各种功能性和情感上的特点,例如:节省设备电力、降低眼睛疲劳……

警告符号

@ts-ignore 与 @ts-expect-error 的使用时机差异

近期在替项目做大型重构,其中就有将技术转换为 TypeScript 与 Monorepo,途中一些还没有头绪如何解决的类型问题,就会使用 `@ts-ignore` 或 `@ts-expect-error` 来先行忽略,但这两者的使用时机有所不同,这篇文章就来谈谈这两者的差异。

键盘图示

我如何选择自己键盘的故事

我是一个物欲非常低的人,日常东西就是用到坏才换新,直到某天常用的薄膜键盘坏了才开始寻找新的键盘。在挑选新键盘的过程中让我想到选择键盘的一些故事促使写下这篇文章。作为软件工程师不外乎每天接触到的硬件生产力工具大概就是:键盘、鼠标、电脑、屏幕、椅子、笔电、大水杯(喝水非常重要),其中键盘绝对是情感最深厚的一一个。

複製貼上符號

无聊的 UI 是好的 UX,为什么现在的网站都长得差不多?

为什么如今网站大多数都长得差不多,就连体验也差不多?我们时常会联想设计网页是一门富含创意创新的工作,但对使用者来说创新并不全然是一件好事。本篇文章希望引导读者了解网页发展的经历并推导出为什么「无聊的使用者介面是好的使用者体验」这个结论。

有惊叹号的卡片的符号

建构正确的网页 UI 不应该是个麻烦的问题

身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上,并不是说花时间制作这些层面的事情就很逊,它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构,例如有许多要留意的事:性能、适用性、可维护性、可测试性、搜索引擎优化、跨平台兼容性、多语言……

机器人图示

如何在 AI 时代保障未来

AI 并不会离开我们的生活,并且只会越来越普及,这也意味着我们的生活将受到影响。什么事情是人类能 AI 不能的?未来的工作会是怎么样?人们能做什么来保证未来?什么事情是人类能 AI 不能的?未来的工作会是怎么样?人们能做什么来保证未来?思考以上问题。

文章搜寻符号

使用 Pagefind 替任何静态网站添加搜寻功能

不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求,恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind,分享如何在任何静态网站上加入搜寻功能。

爱心符号

什么是 Shadcn UI?为什么在前端圈这么火爆?

近期工作接触使用 Shadcn for Vue 来打造网页 UI,这是一款基于 Tailwind 可弹性客制化的组件组合,让我们可以快速建立出符合需求的网页界面。本文将介绍现有样式库的问题及 Shadcn UI 的特色,以及为什么在前端圈这么火爆。

警戒符号

如何处理 TypeScript 抛出的错误?

JavaScript 有 try...catch 语法用于捕捉程序中的错误情境,在需要时使用 throw 语法来抛出「任何错误」,通常建议会抛出 JS 默认的错误对象,但在 TypeScript 要怎么做才能确保抛出的错误的类型?

打勾框符号

TDD 测试驱动开发超赞可以试试看(附实际操作范例)

TDD 测试驱动开发是一种开发方法论,先写测试再实践代码,应该如何撰写测试?或许听过 TDD 但不清楚与单纯写测试差别在哪?这篇文章详细描述 TDD 的优势与实际操作范例快速了解 TDD 为什么这么赞。TDD 目的便是打造一个工作流程能够验证代码的行为,让开发者能够更有信心的重构、更动代码。

三个星星符号

软件工程师可以具备的三种优良美德

观察并厘清什么样的「品格」是一位软件工程师可以具备的,以及普遍工作环境和社群带给我的感受,总结出几点可以解决问题的模式,在日常也作为我自己参考与努力的依据。有耐心、能沟通、跳脱框架是我理想中软件工程师可以具备的美德,不知道你是不是也认同这样的想法?

文件检查符号

2 种方法验证 JSON-LD 是否正确运作?

JSON-LD 是一种夹带更多资料以描述网页内容的方式之一。通常不太留意它,直到真正实施后也不知道有无用处?该如何检验搜索引擎是否正确抓到这笔资料?这篇文章分享我的经验以及让你实际验证 JSON-LD 是否和规范且被正确解读。

标签符号

记录如何从头打造数字产品 - 设计令牌篇

设计令牌(Design Tokens)或令牌是一种管理设计属性与数值的方式,用于建构 UI 最细小的元素,适当的使用设计令牌可以让设计系统更加弹性与可扩展,不论是任何职位,只要与设计系统相关的人士都应当了解设计令牌的概念。

选色器符号

记录如何从头打造数字产品 - 颜色篇

近期公司购买了设计相关的课程,期望透过研究改良目前的设计来提升与开发合作的效率,恰好我之前的工作领域也与设计相关,而且我很早就想跨领域多写与网页相关的文章!因此打算特地开一系列文章记录课程笔记以及我自己补充的想法与资源。

节点连接符号

如何优雅的于 Vue 正确的处理数据加载

索取并显示资料对前端工程师来说是家常便饭的事,但随着背后延伸的状态越来越多,就会让整个专案极度混乱,因此想要藉由这篇文章点出现有问题并提出一些可行的方案,纪录寻找更高效解法的过程。在索取资料时连带的有许多状态需要被管理和调整,文章透过 Vue 来探讨如何更优雅的处理这些状态。

文件与放大镜符号

如何替陈旧代码导入 HTML 原生客户端验证的故事

本文描述近期在维护既有代码时的故事,目前的专案中有各式各样前人尚未统一的验证方式,例如:有些是使用 HTML 原生客户端验证、伺服器端验证、第三方套件、自造的验证方法,如何统一规范验证方式是一大问题,同时也要思考:「要如何避免创造更多的陈旧代码?」

一只手操纵触控板符号

简单明确的了解 HTML 表单使用方式

很多时候都会忽略掉 HTML 本身就有很好的支援输入控制与提交,输入选项的功能与介面都可以轻易的透过原生 HTML 标签来完成,只要想要在网页中提交资料,都是使用 HTML 表单的好时机,让我们来了解怎么使用 HTML 表单制作一个无障碍且语意化的输入表单。

文件和齿轮符号

通过导演一部电影来解释 Node Package Manager

NPM 是 JavaScript 开发环境中必不可少的软件包管理器。本文将以导演一部电影为比喻,解释 NPM 的运作方式。编程就像拍摄一部电影,可以亲自设计和管理演员,也可以雇佣他人设计好的演员。NPM 就像一个平台,可以在上面找到许多现成的演员,这些演员就是软件包(Package)。

方框上有代码的符号

null vs undefined vs not defined 差在哪?

avaScript null 与 undefined 两者的意涵非常相近,意思都是「没有东西」,但在根本上它们是截然不同的东西,虽然都代表「没东西」,但一个是「存在没东西」一个是「不存在没东西」,藉由这篇文章我来厘清解释他们两者之间的关系。

重要星型符号

我可以在一个页面里面拥有多个 h1 吗?

通常写多个 h1 都会被教育这是错误的做法,但实际上真的是如此吗?我深入的研究各方面说法。整理 Google 与 MDN 文件的说法,一个页面有很多个「重磅级标题」的情况非常少见的,如果这么写在阅读结构上是合理的话,使用多个 <h1> 在单个页面之中是完全没问题的,此外有许多更值得探讨的细节。

菱形方框中央有加号符号

来聊聊为什么你需要 useEffect 吧!

useEffect 是 react 中一个相当基础常见的 Hook,要真正学会它就必须要对 React 如何运作有基础的认识才行,它是 React 提供的一个 Hook 用于操作副作用,举例来说:送出请求、操纵 DOM、设定监听器……等都是副作用。

圆框中有打勾的符号

为 Astro 设置 ESLint 与 Prettier

我喜欢使用自动化的工具来为专案的代码提供错误检查与整理,因此使用 ESLint 与 Prettier 让撰写的代码更一致无错,还有额外添加 TypeScript 的检查与 VSCode 提示,本篇文章有详细的教学范例引导你在 Astro 中安装 ESLint 与 Prettier 套件。

愛心符號

制作个人前端作品集 - 准备篇

记录一下我是如何制作自己的前端作品集的,随着从大学毕业,很快也要步入社会寻找正职工作,因此急需一个可以展示自己作品的平台,既然身为前端开发者,何不动手制作一个作品集网站呢?制作自己的作品集是必经历的体验,也是一趟很有趣的体验。

愛心符號

製作個人前端作品集 - 實作篇

Astro 作为一个静态内容为主的生产器非常适合用于打造静态网页,这次我将用自己的作品集为案例教你打造一个实际的静态网站,通过以自己的作品集网站为范例,借助这个机会来展示这个框架好用与强大的地方。只需要有基础的 HTML 与 CSS 知识就能跟着这篇文章创造一个属于自己的作品集。

六角符號

近一年来担任六角学院助教的过程与心得总结

总结在六角学院担任线上助教一年来总结的三大心得以及给同学助教老师们的话。从去年七月至今已在六角学院担任近一整年远端助教,准备在下个月毕业、服兵役并开始下段旅程,打算藉由这篇文章谈谈这段时间的心路历程与未来的规划。期待六角学院未来的发展,培养更多新一代的工程师。

双向箭头符号

什么是 Ajax 以及为什么不是 Ajaj?

「什么是 Ajax 以及为什么不是 Ajaj?」,这个问题一直在脑海中停留许久,有人和我一样思考 Ajaj 之类的称呼的可能性吗?经过一些调查了解背后的原因并写成文章,关于 Ajax 的历史以及名称的由来可以参考看看我的发现。

撰写符号

从我的经历与错误中学会如何经营网站

「为什么想经营网站?」在制作之前要好好想清楚这件事,制作网站与经营网站是完全不同的技能。举我自己的部落格「网页东东」为例,直到近期才比较有「写部落格」这件事究竟是什么的体会,透过探讨分析我自己经营网站内外动力,希望能帮助你重新思考自己经营网站的真正的目标与动机。

插座符号

学习使用 Hoppscotch 测试 API(附图)

Hoppscotch 是一个线上工具,可以让你在浏览器上迅捷的测试后端提供的 API。很常遇到到后端的文件就直接上手写程式,导致在写程式的时候常常疏漏许多问题,像是请求方式错误、少夹带参数、网址错误、资料不存在……等,因此我都会建议先熟悉怎么用现成的工具来测试 API,使用图形化的介面可以更直观的管理API 们。

旋转箭头中间有一颗星星符号

什么是 React Hook?与普通函数有什么不同?

React Hook 是 React 16.8 版本新增的功能,可以让你在不写 class 的情况下使用 React 的功能。 「要如何区分 Hook 与方法的差别?什么情况下在 React 里称为 Hook?什么时候才只能称为方法?」于是写这篇文章来解释清楚。

录影符号

三步走,使用 OBS 录制视频!

OBS 是Open Broadcaster Software 的缩写,是一个在开源社群非常热门的录影软体,由于时常有录制影片的需求,于决定把设定OBS 的过程记录下来,让有需要的人可以依照简单的图示快速上手,从安装到实际录影。

HTML 符號

助教统整 n 个方法帮助你写出更好的 HTML

总结作为六角学院助教一直以来审核作业上最容易碰上的问题,以及可以怎么应对。本篇文章集合了各大 4 个要点与提醒帮助你写出更好的 HTML 结构。了解整篇文章将可以回避掉很多同学最常踩的坑!推荐身为网页开发新手的你看看这篇文章。

代码符号

你没想过 CodePen 具备的超赞小功能

CodePen 是一个线上的模拟开发环境,功能很简单,就是一个网页可以在上面写HTML、CSS、JavaScript,并且可以直接在网页上看到结果,而且还直接分享连结给别人看,对初学者来说介面友好基本没有上手难度,我是非常推荐的。

CSS 符号

助教统整 n 个方法帮助你写出更好的 CSS

总结作为六角学院助教一直以来审核作业上最容易碰上的问题,以及可以怎么应对。了解整篇文章将可以回避掉很多同学最常踩的坑!撰写程式并没有绝对的准则,留意文章可权衡的地方自行判断即可。本篇文章记录我撰写程式以来的经验与原则以及当六角学院助教审核同学时最常发现的问题。

叶子符号

为什么你需要纯粹函数 (Pure Function)?

写程序久了会发现编写干净的可被维护的程序是一件相当困难的事情,其中​​一个造成维护困难的原因是因为「函数除外并返回结果除了过程中产生变化对其他的程序产生影响」,换句话说问题就是「不需要的结果,让程序变得捉摸不定理解难以」,应该纯粹了解函数的定义以及如何使用,以便更进一步编写干净的代码。

魔力大法师符号

助教统整 n 个方法帮助你写出更好的代码

我相信撰写程式并没有绝对的准则,但绝对有些常见可以权衡留意的地方。这篇文章记录著作为助教在检阅不同人写的代码的时候,留意到的一些潜在的问题……本篇文章主要是经验的浓缩,如果要详细的撰写建议可以参考看看无瑕的程式码,会有更全面的说明与案例。

缩小的方框符号

从动图轻松解题:防抖与节流

防抖与节流是前端效能主题中必定会出现的模式,对用户的输入进行适当的防抖与节流处理,除了有助于提升使用者体验之外,对开发者来说也节省掉许多潜在的资源浪费,透过实际案例还有动画图片一起来了解防抖与节流如何帮助我们提升程式效率。

一条线和一颗球的符号

从动图轻松入门非同步 JavaScript(第一章)

了解单线程的 JavaScript 背后如何运作、并发处理事件背后的奥妙、拆解晦涩难懂的专有名词。浏览器执行环境中的 JavaScript 是单线程的,也就是一次只能执行一件事,如此一来其他事情就都会被搁置在后,让使用者等待。这是非常大的问题,但解决方法也非常的简单:「不要呆呆站在那里等!」。

码表符号

非同步 JavaScript 时间操纵之术: setTimeout 与 setInterval

在介绍到同步与非同步代码时,常常会以 setTimeout 或 setInterval 来模拟程式被非同步执行的状况,这两种「方法」都不算是 JavaScript 的一部分,不过大多主流执行环境都有提供 (浏览器、Node.js),是很好练习非同步处理 JavaScript 的起点,本文将会详细讲解其背后的故事与原理。

节点符号

DOM API 一篇就会!

作为前端必学如何操控网页就需要学习 DOM,用一篇文章快速教你如何程序化的更动网页,一起来学会如何存取、编辑与监听 DOM,还有综合懒人包!如果对 Javascript 对象有一定的了解,代表你已经差不多会操纵 DOM 了,如果还不熟悉,建议可以先了解后再学习 DOM API。

工具箱符号

那些发生在 CSS 之「前」的魔法 —— 预处理器

CSS 预处理器已经深刻地改变了前端开发的方式,成为一项必备工具。但随着时间推移,新标准不断推出,我们还需要它们吗?在前端开发领域,经常会听到一些预处理器 (Pre-processor),比如 Sass、Less、Stylus,这些工具是什么?为什么会存在?本文将主要探讨以下几个重点(附带示例)。

整洁文件夹符号

如何用 BEM 撰写更好维护的 CSS

BEM 是一种管理 CSS 撰写方式的一种规范。撰写小型的网站时通常不需要特别考虑到未来样式的命名与权级的规划,但随着网站的复杂度增长就必须需要一套可预测与可扩充的方式,BEM CSS 由于概念简洁好懂,成效显著,并且有着相对长远的历史被测试与应用过,很适合作为初学者第一套管理 CSS 的办法。

工具箱符號

给前端开发测试的方便小工具

前端开发者在开发过程中一些没有想到过可能存在的小工具与网站,都打包好放在这里,强化网站开发体验!网页总是有太多需要留意的技术细节,需要一个更快速简便的方式来测试网站是某可靠?某项功能是否到位?可以参考底下的工具协助开发。

文件符号

分类好头疼!如何摆脱档案整理恶梦?

我们每天都会囤积大量的文件、笔记、素材、累积下来就像乱糟糟的房间一样需要整理,如果你也同样在困扰这样的问题,这篇文章是为你准备的。本次文章想分享我们团队是如何建立一个系统应对基本的档案分工与备份的流程。好的档案管理是可以被追溯、被规范的,这样才好合作,好在未来被回顾。

文字符號

授权透明、实用的字体哪里找?

字体是版面的灵魂,好的字体能够更好地表达文词间的情绪与情境!本篇文章收集了实用且来源可靠、授权清楚的字体网站并且是我平时设计时会考虑参考的网素材网站,像是:Google Fonts、FontShare……在使用时请务必注意授权范围限制。