Astro Logo 符号

Astro 系列文第四日:基础指令与设置

藉由本系列文章将持续 30 日不间断的更新带领你上手它!今日介绍 Astro 的 CLI 指令与设置 `astro.config` 档案。你可以使用自己喜爱的套件管理器来执行 Astro ,不管是 npm、pnpm、yarn 甚至是 bun。

Astro 标志符号

Astro 系列文第三日:建构新专案

藉由本系列文章将持续 30 日不间断的更新带领你上手它!今日介绍如何从头建构一个专案并且了解资料夹结构。前面提到 Astro 是如何建构页面的,像是将网页拆分成「元件」以及透过 Astro Island 的方式来建构网页,接着本章节就要来实际创建一个 Astro 专案啰!

Astro Logo 符號

Astro 系列文第二日:现有问题与解方

藉由本系列文章将持续 30 日不间断的更新带领你上手它!今天理解到了动态网站与静态网站的区别,关系到了网页「渲染模式」的抉择,而 Astro 就及是一个瞄准生成静态页面为主的框架。要了解 Astro 的优势就需要了解现有的问题,需要进一步了解什么是所谓的「静态网站」什么是「动态网站」。

Astro Logo 符號

Astro 系列文第一日:起飛前置準備

藉由本系列文章将持续 30 日不间断的更新带领你上手它!学习 Astro 将会成为前端开发的一股新气象,事实上也被前端社群评价为:「最喜爱的」、「最期待的」新技术之一,凭借着它极为平缓的学习曲线、活耀的社群、踩到痛点的定位和极高的扩充性,它可以轻易上手成为前端的主力生产力工具之一。

爬山的人符号

当兵二阶段两个月以来的心得

近两个月来在军队中学到的三点重要能力,时隔两年重温的两个月军旅生活说不上会对人生有什么大改变,但让我重新体会到自由的可贵。距离上次当兵已是 2 年前的事,在大学毕业后提前申请入伍进入了桃园杨梅再服役两个月,这篇文章主要想在没文章产出期间分享一下这两个月来的感想与活动。

一只手操纵触控板符号

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

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

进度条错误符号

使用 JavaScript try...catch 来控制程序中的错误

程序中出现错误是必不可少的,有千万个原因可能造成程序出现错误无法运行,这时候在 JavaScript 中就可以使用 try...catch 语法来处理错误情境,除了拦截错误也可以自行定义与抛出错误,让程序中的错误更容易被理解与管理。

文件和齿轮符号

通过导演一部电影来解释 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、设定监听器……等都是副作用。

方框上有代码的符号

如何使用 JavaScript 条件运算子?

流程控制是程式语言中基础不可少的概念之一,除了使用if、else 之外,JavaScript 还提供一个简洁的写法,就是条件(三元)运算子,顾名思义,由三个片段所组成,分别是:「条件、成功流程与失败流程」。用更精简的语法来撰写流程控制,条件运算子是常见且必学的语法之一

双箭头符号

为什么你需要 JavaScript 预设参数?

在 JavaScript 中函式可以使用任意数量的参数与引数,如果参数没有对应的引数将导致该变数成为未定义,参数(占位符)代表一个值你期望函式所接收;引数(实际值)则是函式呼叫时所传递的值,让我们用预设参数来解决这个问题吧!

JS 物件语法符号

为什么你需要 JavaScript 增强版对象字面量?

在 JavaScript 中活用 ES6 带来的增强版对象字面量可以精简代码片段,甚至可以动态计算创建对象内的项目!字面量指的是代表它自己的数值,例如数字 `25` 或 `你好世界`,而增强对象字面量就是在对象中使用的值。

圆框中有打勾的符号

为 Astro 设置 ESLint 与 Prettier

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