Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active August 7, 2022 14:24
Embed
What would you like to do?
So You Think You Know Astro Quiz

So You Think You Know Astro

Ahoy, me celestial companions of coding! It be me, your humble gentlenaut of fortune, Cosmo, at ye service.

( An’ perhaps to some snooty static site scallywags an Ex-Sailor of the Astro Expanse... )

So, y’ think ye know Astro, do ye? Aye, then consider this cosmic challenge from ye ol’ quainty matey, Cosmo.

I will asks my riddles. Ye will gives ye answers.

But be warned! This be a quiz only for those who claim or wish to be experts in the syntax of Astro.

( An' then any all else who 'as too much time on their 'ands... )


What Does That Tag Do?

The Lowercase X

---
const x = 'b'
---
<x>hi</x>
  • A.: <x>hi</x>
  • B.: <b>hi</b>
  • C.: <x>hix>
  • D.: It throws.

The Uppercase X

---
const X = 'b'
---
<X>hi</X>
  • A.: <X>hi</X>
  • B.: <b>hi</b>
  • C.: <X>hiX>
  • D.: It throws.

The X Object

---
const X = { Y: 'b' }
---
<X.Y>hi</X.Y>
  • A.: <X.Y>hi</X.Y>
  • B.: <b>hi</b>
  • C.: <X.Y>hiX.Y>
  • D.: It throws.

The JavaScript Underscore

---
const _ = 'b'
---
<_>hi</_>
  • A.: <_>hi</_>
  • B.: <b>hi</b>
  • C.: <_>test_>
  • D.: It throws.

The JavaScript Dollar

---
const $ = 'b'
---
<$>hi</$>
  • A.: <$>hi</$>
  • B.: <b>hi</b>
  • C.: <$>hi$>
  • D.: It throws.

The Dollar Object

---
const $ = { Y: 'b' }
---
<$.Y>hi</$.Y>
  • A.: <$.Y>hi</$.Y>
  • B.: <b>hi</b>
  • C.: <$.Y>hi$.Y>
  • D.: It throws.

Back to the top


What Does That Attribute Do?

The Aria-Hidden Attribute

<b aria-hidden>hi</b>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden=true>hi</b>
  • C.: <b aria-hidden="true">hi</b>
  • D.: It throws.

The Aria-Hidden Attribute ala Component

---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>
---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden>hi</Bold>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden="true">hi</b>
  • C.: <b aria-hidden=true>hi</b>
  • D.: It throws.

The Aria-Hidden Boolean Attribute

<b aria-hidden={true}>hi</b>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden="true">hi</b>
  • C.: <b aria-hidden=true>hi</b>
  • D.: It throws.

The Aria-Hidden Boolean Attribute ala Component

---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>
---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={true}>hi</Bold>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden="true">hi</b>
  • C.: <b aria-hidden=true>hi</b>
  • D.: It throws.

The Aria-Hidden Boolean False Attribute

<b aria-hidden={false}>hi</b>
  • A.: <b>hi</b>
  • B.: <b aria-hidden="false">hi</b>
  • C.: <b aria-hidden=false>hi</b>
  • D.: It throws.

The Aria-Hidden Boolean False Attribute ala Component

---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>
---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden={false}>hi</Bold>
  • A.: <b>hi</b>
  • B.: <b aria-hidden="false">hi</b>
  • C.: <b aria-hidden=false>hi</b>
  • D.: It throws.

The Aria-Hidden Empty String Attribute

<b aria-hidden="">hi</b>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden="">hi</b>
  • C.: <b aria-hidden="true">hi</b>
  • D.: <b aria-hidden=true>hi</b>
  • E.: It throws.

The Aria-Hidden Empty String ala Component

---
// ../components/Bold.astro
---
<b {...Astro.props}><slot /></b>
---
import Bold from '../components/Bold.astro'
---
<Bold aria-hidden="">hi</Bold>
  • A.: <b aria-hidden>hi</b>
  • B.: <b aria-hidden="">hi</b>
  • C.: <b aria-hidden="true">hi</b>
  • D.: <b aria-hidden=true>hi</b>
  • E.: It throws.

The Single Quote Quoted Attribute

<b quote='"oh"'>hi</b>
  • A.: <b quote='"oh"'>hi</b>
  • B.: <b quote="'oh'">hi</b>
  • C.: <b quote='&quot;oh&quot;'>hi</b>
  • D.: <b quote='&#34;oh&#34;'>hi</b>
  • E.: It throws.

The Double Quote Quoted Attribute

<b quote="'oh'">hi</b>
  • A.: <b quote='"oh"'>hi</b>
  • B.: <b quote="'oh'">hi</b>
  • C.: <b quote='&apos;oh&apos;'>hi</b>
  • D.: <b quote='&#34;oh&#34;'>hi</b>
  • E.: It throws.

Back to the top


What Does That Attribute Expression Do?

The Cool Variable

---
const cool = 'cool'
---
<b {cool}>hi</b>
  • A.: <b {cool}>hi</b>
  • B.: <b cool="cool">hi</b>
  • C.: <b cool="[string String]">hi</b>
  • D.: It throws.

The Cool Object

---
const cool = { be: 'cool' }
---
<b {cool}>hi</b>
  • A.: <b {cool}>hi</b>
  • B.: <b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>
  • C.: <b cool="[object Object]">hi</b>
  • D.: It throws.

The Cool Object with a JSON To-String

---
const cool = {
  be: 'cool',
  toString() {
    return JSON.stringify(this)
  }
}
---
<b {cool}>hi</b>
  • A.: <b {cool}>hi</b>
  • B.: <b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>
  • C.: <b cool="[object Object]">hi</b>
  • D.: It throws.

The Cool Object with a Custom To-String

---
const cool = {
  be: 'cool',
  toString() {
    return 'be="excellent" to="each other"'
  }
}
---
<b {cool}>hi</b>
  • A.: <b {cool}>hi</b>
  • B.: <b cool="{&quot;be&quot;:&quot;cool&quot;}">hi</b>
  • C.: <b cool="{&#34;be&#34;:&#34;cool&#34;}">hi</b>
  • D.: <b cool="be=&quot;excellent&quot; to=&quot;each other&quot;">hi</b>
  • E.: <b cool="be=&#34;excellent&#34; to=&#34;each other&#34;">hi</b>
  • F.: <b be="excellent" to="each other">hi</b>
  • G.: <b cool="[object Object]">hi</b>
  • H.: It throws.

The Cool Function

---
const cool = () => 'runnings'
---
<b {cool}>hi</b>
  • A.: <b {cool}>hi</b>
  • B.: <b cool="runnings">hi</b>
  • C.: <b cool="() => &quot;runnings&quot;">hi</b>
  • D.: <b cool="() => &#34;runnings&#34;">hi</b>
  • E.: <b cool="[function Function]">hi</b>
  • F.: It throws.

The Cool Running Function

---
const cool = () => 'cool=cool'
---
<b {cool()}>hi</b>
  • A.: <b {cool()}>hi</b>
  • B.: <b cool="cool">hi</b>
  • C.: <b cool="cool=cool">hi</b>
  • D.: <b cool="cool=&quot;cool&quot;">hi</b>
  • E.: <b cool="cool=&#34;cool&#34;">hi</b>
  • F.: <b cool()="cool">hi</b>
  • G.: <b cool()="cool=cool">hi</b>
  • H.: <b cool()="&quot;cool&quot;">hi</b>
  • I.: <b cool()="&#34;cool&#34;">hi</b>
  • J.: <b cool="[function Function]">hi</b>
  • K.: It throws.

Cantankerous Cosmo’s Too Cool Combo

---
const cool = () => ({
  cool: 'cool',
  toString() {
    return 'cool=cool'
  }
})
---
<b {cool()}>hi</b>
  • A.: <b {cool()}>hi</b>
  • B.: <b cool="cool">hi</b>
  • C.: <b cool="cool=cool">hi</b>
  • D.: <b cool="cool=&quot;cool&quot;">hi</b>
  • E.: <b cool="cool=&#34;cool&#34;">hi</b>
  • F.: <b cool()="cool">hi</b>
  • G.: <b cool()="cool=cool">hi</b>
  • H.: <b cool()="&quot;cool&quot;">hi</b>
  • I.: <b cool()="&#34;cool&#34;">hi</b>
  • J.: <b cool="[function Function]">hi</b>
  • K.: It throws.

Back to the top


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment