Astrois in the Application Development Tools Industry

Astro

astro

Sheriff continues his quest to conquer the JS ecosystem. Sheriff extends support for Astro. This release introduces support for , thanks to libraries, and . Astro.js ota-meshi eslint-plugin-astro astro-eslint-parser The integration is provided out-of-the-box, meaning nothing has to be configured on the user side. Sheriff will automatically detect Astro projects and run the appropriate rules. All you have to do is upgrade Sheriff to this version. This integration presented significant challenges, as the pertinent ESLint plugins are still in experimental status and also because this integration provides JSX-relevant ESLint rules inside files, meaning that we are now parsing files (in a Typescript-aware way) and provide Astro and React relevant rules inside them. This has not been trivial. .astro .astro Sheriff meets Algolia The Sheriff documentation website now has a full-text search powered by , generously provided for free by the open-source projects sponsorship by . The documentation is now easier than ever to navigate. Algolia Docsearch Algolia Instead, the “Ask AI” feature didn’t make it in this release. There aren’t yet solid solutions in this space, for now. Sheriff integrates Fsecond Finally, as the last treat, my newest , was integrated in Sheriff. eslint-plugin fsecond Fsecond adds 2 new rules: : enforce placing optional parameters to the end of the function signature as destructured objects fsecond/prefer-destructured-optionals : enforce using a utility function instead of methods, or, optionally, you can disable that behaviour and the rule will just warn against incorrect usage of addEventListener methods fsecond/valid-event-listener useEventListener addEventListener What’s Next The commitment to improving Sheriff remains strong. Here’s a glimpse of what’s on the horizon: Performance Improvements: Potential performance enhancements will be analyzed to ensure that Sheriff runs even smoother, even on lower-end devices. Website Codebase Update: Plans are in place to update the website to Docusaurus 3.0, modernizing the docs website codebase. Expanded Library Support: Support for additional libraries is under consideration, with potential candidates for integration including GraphQL, MDX, and Vue. Conclusion As always, if you feel like contributing, feel free to propose suggestions or pull-requests. And if you just want to show appreciation, leave a star on GitHub. Sheriff is actively dedicated to becoming even more adaptable and feature-rich. Stay tuned for further updates and enhancements! Also published . here

Sheriff Release v16 is Here With Support for Astro.js

Astro has — a way to take an element or component as a prop. dynamic tags I had trouble finding the feature because the React community calls this pattern the "polymorphic as prop". Because we enjoy our pseudo-computer-science bullshit artisinally. Dynamic tags are simple to implement in Astro. No-fuss implementation Take a prop as a local variable. capitalized Element Render that prop as a template tag. Take and spread rest-props. Render children using Astro's un-named . <slot /> ---
const { Element, ...props } = Astro.props;
---
<Element {...props}><slot /></Element> Destructure and rename the element prop (for convenience or convention) Uppercase prop names can look out of place in templates. Destructure and rename the prop in one to provide a more ergonomic/conventional authoring experience. Element ---
const { as: Element, ...props } = Astro.props;
---
<Element {...props}><slot /></Element> Astro templates require that dynamic tags be capitalized. Renaming the element prop is a convent way to follow that requirement while providing a more conventional API to consumers. Accept and de-duplicate classes with class:list Astro has a directive for orchestrating dynamic classes. Provide the directive an array with both and classes. class:list class:list provided component is smart and automatically removes duplicate classes. class:list ---
const {
  as: Element = "div",
  class: providedProps,
  ...props
} = Astro.props;
const componentClasses = "prose prose-slate dark:prose-invert";
---
<Element {...props} class:list={[componentClasses, providedProps]}>
  <slot />
</Element> needs to be renamed when destructured because values can not be assigned to reserved words. Note: class Complete with TypeScript interface This is my completed component, with the TypeScript interface. Yours needs will likely vary. ---
interface Props {
  as?: "body" | "main" | "article";
  class?: "string";
}
const {
  as: Element = "div",
  class: providedProps,
  ...props
} = Astro.props;
---
<Element {...props} class:list={[componentClasses, providedProps]}>
  <slot />
</Element> BEWARE: dynamic tags don't honor hydration client directives Astro provides for hydrating client-side UI. Those don't work with dynamic tags. client directives If you're using dynamic tags for static layouts — like me — this isn't an issue. Takeaways Astro supports the "polymorphic as prop" pattern popular in React. And the additional standard tooling of TypeScript and directive make it even easier to consistently implement. class:list Also published . here

Implementing Dynamic Tags in Astro

There’s no first-class integration for . But making a custom one isn’t too hard. Lucide Astro This is the component I made to do the job: ---
const { icon, ...props } = Astro.props;

const [, attributes, children] = icon;

const componentChildren = children
  ?.map(
    ([shape, attributes]) =>
      `<${shape} ${Object.entries(attributes)
        .map(([k, v]) => `${k}="${v}"`)
        .join(" ")} />`
  )
  .join("");

const componentAttributes = {...attributes, ...props}
---

<svg
  {...componentAttributes}
  set:html={componentChildren}
/> If this component looks reasonable to you, copy it and go forth. If you’d like to learn how it works, let’s get it! Our goal For this build, our goal is to render icons directly into an Astro site — converting Lucide’s JSON files to inline s at build time. <svg> This — the one that fits my needs best. is just one of many ways to add Lucide icons to a site Initial setup Add the package. lucide pnpm install lucide In the standard package, icons are exported as JSON arrays with the following contents: lucide : : element attributes : children [0] "svg" [1] [2] [
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    width: 24,
    height: 24,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": 2,
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  [
    ["circle", [Object]],
    ["path", [Object]],
    ["path", [Object]],
    ["path", [Object]],
    ["path", [Object]],
  ],
]; We need to import these JSON files and render their data as . HTML Render a single icon To render a single Lucide icon: Import any icon lucide Destructure and array items from that icon attributes children Reduce children nodes to HTML string Render an component <svg> Spread directly on the element attributes Apply with the directive childElements set:html ---
// 1. Import any `lucide` icon
import { Accessibility } from "lucide";

// 2. Destructure the `attributes` and `children` array items
const [, attributes, children] = Accessibility;

// 3. Reduce children nodes to HTML string
const componentChildren = children
  ?.map(
    ([child, attributes]) =>
      `<${child} ${Object.entries(attributes)
        .map(([k, v]) => `${k}="${v}"`)
        .join(" ")} />`
  )
  .join("\n");
---


<svg
  {/* 4.1. Spread `attributes` directly on the element */}
  {...attributes}
  {/* 4.2. Apply `childElements` with the `set:html` directive */}
  set:html={childrenElements}
/> Extract component LucideIcon Now that we can render icons let’s extract this code as a reusable component. Move the relevant code to src/components/lucide-icon.astro Refactor to as a prop icon Take rest so HTML and SVG attributes can be applied at the call site ...props Merge icon and component attributes props Apply munged attributes-props to exported element svg ---
// 1. Take `icon` as a prop
// 2. Take rest `props`
- import { Accessibility } from "lucide";
+ const { icon, ...props } = Astro.props;

const componentChildren = children
  ?.map(
    ([child, attributes]) =>
      `<${child} ${Object.entries(attributes)
        .map(([k, v]) => `${k}="${v}"`)
        .join(" ")} />`
  )
  .join("\n");

// 3. Merge `attributes` and `props`
+ const componentAttributes = {...attributes, ...props}
---

<svg
  {/* 4. Apply munged `componentAttributes` to svg */}
-  {...attributes}
+  {...componentAttributes}
  set:html={childrenElements}
/> Use the component LucideIcon To use our new component, import it along with any icon. Provide the icon JSON to using the prop. LucideIcon lucide LucideIcon icon ---
import LucideIcon from "@components/lucide-icon.astro";
import { Accessibility } from "lucide";
---

<LucideIcon icon={Accessibility} /> Apply attributes to LucideIcon The receives props that it merges with the default values. Use these to change SVG attributes like , , , and . Or apply common attributes like and . LucideIcon lucide height width fill stroke-width class id ---
import LucideIcon from "@components/lucide-icon.astro";
import { Accessibility } from "lucide";
---

<LucideIcon icon={Accessibility} width="56" height="56" stroke-width="4" /> Taking it further My preference is to keep icon importing and SVG rendering separated. But you may find this cumbersome. If so, create a facade for that exposes your favorite icons via interface. LucideIcon string This could look something like this: ---
import {
  Github as github,
  Youtube as youtube,
  Twitter as twitter,
  Instagram as instagram
} from "lucide";

const icons = {
  github,
  youtube,
  twitter,
  instagram
}

const { name = "github", ...props } = Astro.props;

if !(icons[name]) { return null }

const [, attributes, children] = icons[name];

const componentChildren = children
  ?.map(
    ([child, attributes]) =>
      `<${child} ${Object.entries(attributes)
        .map(([k, v]) => `${k}="${v}"`)
        .join(" ")} />`
  )
  .join("\n");

const componentAttributes = {...attributes, ...props}
---

<svg
  {...componentAttributes}
  set:html={childrenElements}
/> Go further with TypeScript does not expose its type for external use. lucide IconNode So, if you want to use in TypeScript, you’ll need to get clever. my code above Import just the type of any component. Infer the for that icon in the type declaration. IconNode LucideIcon Add any optional attributes you’d like to support. (e.g., , , , , etc.) svg height width fill stroke-width src/components/lucide-icon.astro ---
// 1. Import just the type of any component.
import type { Accessibility } from "lucide";

type Props = {
  // 2. Infer the `IconNode` for that icon in the `LucideIcon` type declaration
  icon: typeof Accessibility;
};
--- That’s it! I hope that you found this useful in building an Astro site. If you’d like to see more Astro tips and tricks, bug me on Twitter/X or Discord. 😄

Creating an Astro Site: Add Lucide Icons to Astro

"If you're using Astro, you should build components with the extension". astro That was my initial thought when I started using Astro. But after a couple of months building with Astro, my thinking has changed. I no longer build most of my components with files. astro I mostly use Svelte files instead. This article explains why. Three reasons why I don’t build components with astro files Reason 1: I use Svelte as my framework of choice This reason is pretty obvious — I have to write Svelte files if I want to use ! Svelte I chose Svelte after evaluating the major three frameworks ( , , and Svelte) and I found that Svelte has a better raw developer experience. React Vue I can share more about why that’s the case, but I’ll have to do that in another blog post since that will be a long one. Reason 2: the main reason The main reason is this: Astro can import framework files But framework files cannot import Astro files Many commonly used components can be written in Svelte, so they can be imported into both Astro and Svelte files. Here are some examples: A Button component An SVG component that searches the project for an SVG icon. If build these components in Astro, we won’t be able to use them inside Svelte files — and this eventually forced me to rewrite these components in Svelte. Reason 3: Better syntax I say better syntax because I find it easier to read Svelte markup over React’s and Vue’s markup — especially when there are if statements or loops. This might have been because I’ve been using nunjucks for a long time, so the syntax is much easier for me to read. Sometimes I choose to write components in Svelte precisely to take advantage of this syntax difference. When to use Astro files I only choose the file extension for my component files when I need to use Astro’s API like content collections, which is not available in other frameworks. Astro What if a component requires both Astro APIs and JavaScript? I encountered this a couple of times. When this happens, I typically do two things: I build an Astro component that retrieves stuff I need with Astro’s API. And I build a Svelte component that uses this information. Usually, I would give both components the same name because it helps me remember that they are directly related to each other. Wrapping up Use the following guidelines if you’re deciding which extension when we build components in Astro: Build the component in your framework of choice whenever possible Only use Astro components when you need Astro’s API (or it’s heavily file-system related) If you need both Astro’s API and JavaScript, feel free to build components with both extensions. Just remember to give them appropriate names so you know they’re related to each other! . Originally written on my blog The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "software development”. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

Optimizing Component Development in Astro without Astro Files

You’ve probably seen many websites using cool bullet points instead of plain old-boring ones. How do they do it? Is there an effective and simple way to create fancy bullets while writing really simple code? The answer is there is — with Astro, it's possible. You can simply write markdown and have the outcome be a nicely formatted bullet you made with SVGs. Before we begin I'm going to assume you know how to use and you know how to integrate MDX into Astro. If you don't, don't worry. Just follow through and you should get a basic idea of how things work, then go figure out how to use Astro and MDX. Astro (I'm going to create a course for it soon because Astro is fantastic — it's the best static site generator I've ever used). Steps If you've been using Astro, you can probably infer these steps from the example I showed you above. They are: You create a component that takes in your bullets in the content. <List> <slot> You grab these bullets in the component. <List> You loop through each list item and prepend an SVG before the bullet. Here's what the markup looks like; ---
const { bullet } = Astro.props
---
<ul class='List'>
  {
    listItems.map(item => (
      <li>
        
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> The cool thing about this is you can add extra properties like , , and all sorts of things to change the SVG so it renders with enough uniqueness. fill stroke Here are some examples where I changed the SVG for . fill Magical Dev School I'm going to show you how to build a simple version that lets you insert an SVG you want. We won't be going through the advanced stuff like adding and and other conditions though! fill stroke Grabbing the bullets in Astro Astro lets you get the contents of a element inside your component. <slot> You can get this content by calling a function. You'll see a that contains the which will be created. render string HTML ---
const html = await Astro.slots.render('default')
console.log(html)
--- Next, this is where the magic happens You can parse this HTML string and get the list items — just like doing a standard with JavaScript. document.querySelectorAll To do this, you need to parse the HTML string into a DOM-like structure. There are many parsers you can use here. The one I've chosen to use for my projects is . (Because it's fast). node-html-parser ---
import { parse } from 'node-html-parser'

const html = await Astro.slots.render('default')
const root = parse(html)
--- After parsing the HTML, you can grab the list items by using . querySelectorAll ---
// ...

const listItems = root.querySelectorAll('li')
--- You can then map through the list items and build your fancy list. ---
// ...
---
<ul class='List'>
  {
    listItems.map(item => (
      <li>
         
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> Adding SVGs The simplest way to add SVGs into the component is to use inline SVGs. If you want to switch between different types of list items, you can ask the user to pass in a property. Then, you inline a different SVG depending on the value. bullet bullet ---
const { bullet } = Astro.props
// ...
---

<ul class='List'>
  {
    listItems.map(item => (
      <li>
        { bullet === 'green-check' && <svg> ... </svg> }
        { bullet === 'red-cross' && <svg> ... </svg> }
        { bullet === 'star' && <svg> ... </svg> }
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> Of course, this isn't the best way... Better way to add SVGs The better way is to add an SVG through a component. When you do this, you can simply pass in an SVG and let the SVG component handle the SVG logic. ---
import SVG from './SVG.astro'
const { bullet } = Astro.props
// ...
---

<ul class='List'>
  {
    listItems.map(item => (
      <li>
        <SVG name={bullet} />
        <Fragment set:html={item.innerHTML} />
      </li>
    ))
  }
</ul> The simplest way to build this SVG component is to inline SVG code within it, like in the example shown above. ---
// SVG component
const { name } = Astro.props
---

{ bullet === 'green-check' && <svg> ... </svg> }
{ bullet === 'red-cross' && <svg> ... </svg> }
{ bullet === 'star' && <svg> ... </svg> } But this isn't the best way because you still have to use conditional statements... And SVG can be notoriously big and complex so you'll end up creating something unwieldy instead... The best way to build the SVG component The best way is to: Keep the SVG in an folder svgs Grab the SVG from this folder when you pass the into the component name <SVG> How to do this is best left for another lesson since we'll go deep into another topic. If you'd like to find out how I build the component, along with how I use Astro and Svelte, scroll down and leave your email in the form below. I'd love to share more with you! SVG Fancy Validation What's pretty cool about this approach is you can even use Astro to validate the type of you pass into , the , the , and other properties you want. bullet <List> fill stroke Of course, you can do this with Typescript as well. I'm just showing you that you can use normal JS if you want to keep things simple. const validators = {
  bullet: [{
    type: 'star', 
    fill: ['yellow', 'green', 'red', 'blue'],
    stroke: ['black', 'transparent'],
  }]
}

validate({ ...Astro.props })

function validate () {
  // Check props against validators
} That's it! Hope you learned something new today! Originally published on my . blog Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

How to Building Fancy List Items in Astro

After using for a while, I came to realize that two of Astro's biggest features — islands and slots — both delight and frustrate me. Astro Most people already know what the delights are, so I won't bother writing about them in this article. I'll focus on what frustrates me and how I resolve those frustrations. First, we need to talk about what happens when Astro creates islands and slots. When Astro creates islands and slots Astro creates an tag, along with and tags when you include a component with client directives. astro-island style script ---
import Component from './components/Component.svelte'
---

<Component client:load /> If the component (with client directives) contains a , Astro will create a tag. This will be found within an . slot astro-slot astro-slot astro-island ---
import Component from './components/Component.svelte'
---

<Component client:load>
  <div>Some Slotted Content</div>
</Component> Now, if you include a component without client directives, Astro will not create and tags. astro-island astro-slot ---
import Component from './components/Component.svelte'
---

<Component>
  <div>Some Slotted Content</div>
</Component> What's frustrating about Astro Islands and slots? Since Astro only creates these tags when you include client directives, styling components can become unpredictable — because some components will have client directives while others won't. Problems arise when the DOM contains and . That's because these tags change the document flow, so you cannot pretend that they don't exist. To be more specific, I noticed four extremely frustrating things when and are present in the DOM. astro-island astro-slots astro-island astro-slot Direct descendant selectors no longer work Lobotomized owls no longer work Grid positioning no longer works CSS Nth-child no longer works I'm going to talk about each one in turn, and how to resolve these frustrations. Direct descendant selectors no longer work Direct descendant selectors no longer work when and is in the DOM. astro-island astro-slot This makes sense because the DOM has changed, so direct descendant selectors no longer target the element you wish to target. Imagine you want to have this HTML: <div class="Component">
  <div>Some Content</div>
</div> But Astro creates this HTML because it has slots: <div class="Component">
  <astro-slot>
    <div>Some Content</div>
  </astro-slot>
</div> If you wrote a direct descendant selector, that selector wouldn't work. That's because the direct descendant selector now targets the level children instead of the one you are aiming for. astro-slot /* No longer works */
.Component > div {
  /* Styles here */
} Fixing it in the selector chain. Fixing direct descendant selectors with slots is simple — all you have to do is add astro-slot /* Works */
.Component > astro-slot > div {
  /* Styles here */
} The above code snippets assume you're writing global CSS. If you're using CSS Scoped to the component, you'll have to write the following instead since we're dealing with slots. /* Scoped CSS*/
.Component :global(> astro-slot > div) {
  /* Styles here */
} if the HTML structure allows for it. Another alternative is simply to use descend selectors instead of direct descendant selectors /* Works */
.Component div {
  /* Styles here */
} Let's move on. Lobotomized owls no longer work Lobotomized owl is a way to style things with the sibling universal selectors. in 2014. It was first coined by Heydon Pickering /* Lobotomized owl selector */
* + * {
  /* Your styles here */
} The lobotomized owl selector can be used to style children elements easily — giving them margins, paddings, and other properties as necessary. Here's an example that I commonly use to give some space between elements. .Parent > * + * {
  margin-top: 1rem;
} Unfortunately, these styles won't work on and tags because they use the property. astro-island astro-slot display: content Fixing it Elements with will have their styles ignored, so any styles added to these elements will be ignored. display: contents or . The easy way to fix this is to add the styles to the elements contained in astro-island astro-slot Here's what the CSS looks like. .Parent > * + *,
.Parent > * + :where(astro-island, astro-slot) > *:first-child {
  margin-top: 1rem;
} CSS Grid Positioning no longer works This one is similar to the lobotomized owl one — because Astro islands and slots use , no styles will work on them. display: contents These styles include , . So you will not be able to change the Conponent's positioning with . grid-column grid-row grid-column Here's an example where we laid all items out in a two-column grid. In this example, trying to use set on the and will not work. grid-column astro-island astro-slots ---
import Component from './Component.svelte'
---

<div class='Grid'>
  <Component client:load />
  <Component client:load />
  <Component client:load />
</div>

<style>
  .Grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

  /* Tries to make all grid items span the full width */
  .Grid > * {
    grid-column: 1 / -1;
  }
</style> There are two ways to fix this problem. Fixing it and with the technique mentioned above. The first way is to bypass astro-island astro-slot .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

/* Tries to make all grid items span the full width */
.grid > *,
.grid > :where(astro-island, astro-slot) > *:first-child {
  grid-column: 1 / -1;
} The second way is to put the components in another element. <div class="Grid">
  <div><Component client:load /></div>
  <div><Component client:load /></div>
  <div><Component client:load /></div>
</div> .Grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.Grid > * {
  grid-column: 1 / -1;
} Nth-child no longer works as expected When Astro adds to the DOM, they also add and tags to the DOM at the same time. astro-island style script Since and tags are also considered children elements, you cannot depend on the selector to target the right element anymore. style script nth-child Using the same code examples from above, let's say we have the following HTML. <div class="Grid">
  <Component client:load></Component>
  <Component client:load></Component>
  <Component client:load></Component>
</div> This produces a DOM that looks like this. First element is a tag style Second element is a tag script Next three elements are tags astro-island Astro will only include and tags for the components once in
the DOM. This is why you see only one tag and one instead of
3 tags and 3 tags. style script style script style script If you want to get the first component with , you need to pass in instead of . That's because the first component is now the third element in the DOM tree. nth-child nth-child(3) nth-child(1) /* Style the first component, but it's the third child */
.Grid > *:nth-child(3) > .Component {
  background-color: red;
} Yes, I know it's confusing. There are two ways to fix this confusing problem Fixing it The first way is to wrap the components with another element. You can then use to style with a descendant selector to style the component. nth-child <div class="Grid">
  <div><Component client:load /></div>
  <div><Component client:load /></div>
  <div><Component client:load /></div>
</div> /* Tries to make all grid items span the full width */
.Grid > *:first-child .Component {
  background-color: red;
} and use instead. The second way is to stop using nth-child nth-of-type .Grid > astro-island:nth-of-type(1) > .Component {
  background-color: red;
} A deeper layer of frustrations Things get a little bit more confusing if you need to pass a component into a slot — especially if both components (the parent one and the one in the slot) need JavaScript functionality. ---
import Component from './components/Component.svelte'
import Nested from './components/Nested.svelte'
---

<Component client:load>
  <Nested client:load />
</Component> Astro will create the following layout: in the top level astro-island in the second level (since gets content through a slot) astro-slot Component Another after since needs to have JavaScript functionality as well. astro-island astro-slot Nested I'm not sure whether this level of complexity is necessary though. Most of the time, I just one layer of and a layer of . So this should be an edge case more than anything else. astro-island astro-slot Wrapping up I've just shared with you when and how Astro creates and . I've also shared with you how to overcome the styling frustrations that happen when and elements are present in the DOM. astro-island astro-slot astro-island astro-slot With this, you should now be able to use Astro effectively without encountering further styling issues. Hope you find this useful in your coding journey. If you wish to receive more in-depth articles about Astro, Svelte, and other web development topics, feel free to sign up for my newsletter below. That's it for today. Thanks for reading! Originally published on my blog.

Scaling Styling Roadblocks Caused by Astro Islands and Slots

is a lightweight web framework capable of shipping highly performant websites with minimal (or non-existent) JavaScript bundles. In this guide, we’re going to create our content with Cosmic and retrieve it in our Astro project, allowing for quick and easy content creation and collaboration. The end result will be a clean and composable website that aces the lighthouse scores all across the board. Astro TL;DR Install the Cosmic template. Simple Astro Blog Download the Simple Astro Blog . source code Step 1: Configure your Astro project To create a new Astro project, run .  Astro provides a convenient to set up some boilerplate code and get your project configured quickly. You can choose from a few different templates, but in our case, we’re keeping it simple with the “Just the Basics” option configuring a nice organized directory, a few Astro components to reference, and an Astro config file. npm create astro@latest CLI tool If you are using Cosmic in this guide, make sure you install the : Cosmic NPM package # npm
npm install cosmicjs
# pnpm
pnpm add cosmicjs
# yarn
yarn add cosmicjs Next, we will create two items in our project directory. First, create a folder in the folder, and then create a file. After you’ve created this file, create a in the root of your directory. Here, we will store our environment variables from the Cosmic Bucket we’re about to set up, and in our file we will import the environment variables and create our API calls to retrieve our data. lib src cosmic.js .env cosmic.js Once you’ve created these two items, put them aside for now, as we go on to creating our Content Model in Cosmic. Step 1.5 (Optional): Adding Astro Integrations Astro provides some useful , allowing you to quickly configure your favorite UI libraries, SSR adapters, and other tools like and . For this guide, we encourage using both the and integrations as they will improve website performance and developer experience. integrations Astro Image Tailwind CSS Astro Image Tailwind CSS Using the Astro CLI, we can run the commands and , and Astro will install each individual package and update the file to support the integration. npx astro add image npx astro add tailwind astro.config.mjs Step 2: Configure a Cosmic Bucket What is a headless CMS? With a headless CMS, content is created using a dashboard and then delivered using an API. The content layer is separated from the presentation layer, making content flexible, reusable, and scalable. If you’d like to learn more about what a headless CMS is, we created explaining it. this concise article Create an account If you haven’t already, create a . Then navigate to the dashboard to create a new project. We’re going to start from scratch here, but you choose from a wide variety of templates by selecting “Start with a template” and clicking “Select Template” on the desired template. Name your project and Bucket Environment, then click “Save Bucket.” Cosmic account Creating an Object Let’s create a simple Object, click “Add Object Type” and then you will see that we can now setup our first Object. We’re going to call this Object “Posts”, which will contain multiple blog posts, so go ahead and select “Multiple” then under “Singular Name” type in “Post.” Our default fields will contain the and the , so you can leave these as they are. Slug field Content field Content Model The Content Model is where we design the structure of our content. We can use different like strings, numbers, and even media (images). From this structure, we can craft our API calls to retrieve this specific data and render it onto our application. Metafields Our Object will consist of: An Excerpt (text) A Cover Image (media) Once you’ve created these Metafields, click “Save Object Type.” Let’s create our first Post! Navigate to “Posts” in the sidebar and click “Add Post.” Fill in the , , and with some sample text. Then, upload an image for the and select “Publish.” Title Excerpt Content Cover Image Now that we’ve got our first published Object, we’re ready to tie it all together and get this data into our Astro application. Step 3: Retrieve data from the Cosmic API Before we leave the Cosmic dashboard, we need to grab a couple of things. On the sidebar, click on To make this easier, I’m going to rename the to something like then click “Save Settings” Settings>API Acess. Bucket Slug my-astro-blog . Now we’re going to take the and values and place them into our file in our Astro app. Bucket Slug Read Key .env # .env
PUBLIC_COSMIC_BUCKET_SLUG=my-astro-blog
PUBLIC_COSMIC_READ_KEY=<your_read_key_here> Once set, let’s go into the file we created in Step 1. We will import the Cosmic module, instantiate an variable and import our environment variables. Refer to for setting environment variables in Astro. cosmic.js api these docs // src/lib/cosmic.js
import Cosmic from "cosmicjs";
const api = Cosmic();

const bucket = api.bucket({
  slug: import.meta.env.PUBLIC_COSMIC_BUCKET_SLUG,
  read_key: import.meta.env.PUBLIC_COSMIC_READ_KEY,
}); Now that we’re all set up, let’s write our API call to get the Post we made in our dashboard. // src/lib/cosmic.js
export async function getAllPosts() {
  const data = await bucket.objects
    .find({
      type: "posts",
    })
    .props("title,slug,content,metadata")
  return data.objects;
} Using Cosmic’s , we can the specific type of Object in our API, which is “posts” (the slug of the Object itself), and set the to all of the parameters we set up when we created our Object earlier. In our case, we want to retrieve the , , , and the Cover Image, which lives inside of the chaining methods find props title slug content metadata. Remember that the default parameters are accessible at a higher level than the metadata, and the metadata itself comes from the custom metafields you create within an Object. Grabbing the Cover Image would look like this: . metadata.cover_image.imgix_url Rendering the data Now we can pull in the API call onto one of our Astro pages. By calling the function in the “helmet” of our Astro page or component, we can access all of the content we create in Cosmic. getAllPosts // src/pages/index.astro
import { getAllPosts } from "../lib/cosmic"
const data = await getAllPosts() To render out a list of the posts we make, we can create a minimal Card component like this: // src/components/Card.Astro
---
const { href, title, body } = Astro.props
---
<li class="bg-white rounded-md shadow-md hover:shadow-xl transition">
  <a href={`/blog/${href}`}>
    <div class="flex flex-col h-full gap-y-2 p-6">
      <h2 class="font-semibold text-xl pr-4 pt-2">
        {title}
      </h2>
      <p>
        {body}
      </p>
    </div>
  </a>
</li> Note that this is an Astro component. We can pass props to it by defining a de-structured object to . This functionality is done within the dashes at the top of the component, or the “helmet.” Astro.props Going back to our index.astro page, let’s pass the data from Cosmic and render the card. // src/pages/index.astro
---
import { getAllPosts } from "../lib/cosmic"
import Card from "../components/Card.astro";
const data = await getAllPosts()
---

<section>
    <ul class="grid md:grid-cols-2 gap-8">
      {
        data.map((post) => (
          <Card
            title={post.title}
            href={post.slug}
            body={post.metadata.excerpt}
          />
        ))
      }
    </ul>
  </section> You’ll notice that we are passing the slug of our Cosmic post into the prop. We can generate dynamic routes easily with Astro. We do this using , which will generate dynamic page routes at build time. href getStaticPaths // src/pages/blolg/[slug].astro
---
import { getAllPosts } from "../../lib/cosmic";
import { Image } from "@astrojs/image/components";

export async function getStaticPaths() {
  const data = (await getAllPosts()) || [];

  return data.map((post) => {
    return {
      params: { slug: post.slug },
      props: { post },
    };
  });
}

const { post } = Astro.props;
---

<article>
  <section class="border-b pb-8">
    <h1 class="text-4xl font-bold">{post.title}</h1>
    <div class="my-8"></div>
  </section>
  <Image
    src={post.metadata.cover_image.imgix_url}
    format="webp"
    width={1200}
    aspectRatio={16 / 9}
    quality={50}
    alt=""
    class={"rounded-md shadow-lg my-12"}
  />
  <p>{post.content}</p>
</article> Using , we are generating the path for each “Post” in Cosmic using it’s . This happens at build time and uses the data stored in . We then pass the data for each “Post” through to the and further set the { } object to We can re-use our HTML template below the helmet for each blog post we render. getStaticPaths slug params props post Astro.props. After running a mobile Lighthouse report for the application, we have achieved 100s all across the board with little effort. Conclusion I hope you found this guide helpful to learn how Astro provides ease of use in development, easy integration with a headless CMS, and the capability to achieve high-performing Lighthouse scores out of the box. You can check out the template used in this guide here Also Published Here

Adding a Headless CMS to Astro in 3 Steps

Someone recently asked me how to use with , to which I responded I'll create a small document for this (I'll create a pr to add this to the a little later). FormData Astro Astro docs Getting started I won't go into detail on what is, but here is a short summary FormData [is an] interface [which] provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the or method. It uses the same format a form would use if the encoding type were set to . Source: FormData fetch() XMLHttpRequest.send() "multipart/form-data" MDN - FormData Basically instead of using JSON to send data to and from your server, you'd use , except unlike JSON it supports files natively. FormData For example, // 1. Create or Get a File 
/** Creating a File */
const fileContent = `Text content...Lorem Ipsium`;
const buffer = new TextEncoder().encode(fileContent);
const blob = new Blob([buffer]);
const file = new File([blob], "text-file.txt", { type: "text/plain" });
/** OR */
/** Getting a File */
const fileInput = document.querySelector("#files"); // <input id="files" type="file" multiple /> 
const file = fileInput.files.item(0);

// 2. Create FormData
const formData = new FormData();

// 3. Add File to FormData through the `file` field
formData.append("file", file); // FormData keys are called fields const file = fileInput.files.item(0); is a , which is similar but an array, to work around this you can convert the to an array of 's using fileInput.files FileList not FileList File Array.from For our use case, since we're only trying to upload one file, it'd be easier to select the first in the File FileList Learn more on and MDN - HTMLInputElement MDN - File you can also just directly use instead of using an element Note: FileReader <input /> Usage There are 2 ways to support in ; the easy and the hard way, I'll show you both. FormData Astro : both the easy and hard way require to be configured in mode Note Astro server (SSR) import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
output: 'server',
}); Easy Way The requires you to create a new file that will act as your endpoint, for example, if you wanted a endpoint, you would create a file in . easy way .ts /upload .ts src/pages Read 's official docs on to learn more Astro File Routes Your basic file tree should look like this after creating your endpoint src/
 pages/
   upload.ts
   index.astro Inside your file follow the example I gave above in , on getting up and running. index.astro #getting-started FormData Once you've created an instance of and populated it with the files you'd like to upload, you then just setup a POST request to that endpoint. FormData // ...
const res = await fetch('/upload', {
  method: 'POST',
  body: formData,
});
const result = await res.json();
console.log(JSON.stringify(result)); From the endpoint side you'd then need to export a post method to handle the POST request being sent, Here is where things get complex. I recommend going through Astro's File Routes Docs import type { APIContext } from 'astro';

// File routes export a get() function, which gets called to generate the file.
// Return an object with `body` to save the file contents in your final build.
// If you export a post() function, you can catch post requests, and respond accordingly
export async function post({ request }: APIContext) {
  const formData = await request.formData();
  return {
    body: JSON.stringify({
      fileNames: await Promise.all(
        formData.getAll('files').map(async (file: File) => {
          return {
            webkitRelativePath: file.webkitRelativePath,
            lastModified: file.lastModified,
            name: file.name,
            size: file.size,
            type: file.type,
            buffer: {
              type: 'Buffer',
              value: Array.from(
                new Int8Array(await file.arrayBuffer()).values()
              ),
            },
          };
        })
      ),
    }),
  };
} The basics of what's happening here are fairly simple, but the code all put together seems rather complex, so let's break it down. First, the exported post function handles POST requests as its name suggests, meaning if you send a get request and don't export a get function an error will occur. what?! Yeah, I too recently learned that supports this out of the box, which is awesome. export async function post() { ... } Astro W3Schools cover fairly well, take a look at their article if you're not familiar with POST and GET requests POST and GET Let's first talk about the parameter. As it's name suggests is an instance of the class which includes all the methods that supports, including a method for transforming said request into you can work with. request request Request Request FormData // ...
export async function post({ request }: APIContext) {
  const formData = await request.formData();
  // ...
} Using you can get all the instances of a specific field ( keys are called fields), for example, get all 's in the field. formData FormData File file // ...
export async function post({ request }: APIContext) {
  const formData = await request.formData();
  return {
    body: JSON.stringify({
      // getAll('file') will return an array of File classes
      fileNames: formData.getAll('file'),
    }),
  };
} The problem with this solution is that it will return due to being unable to convert classes to a string {"fileNames":[{}]} JSON.stringify File To deal with this formatting issue we need to format the 's array properly, File // ...
export async function post({ request }: APIContext) {
  const formData = await request.formData();
  return {
    body: JSON.stringify({
      // getAll('files') will return an array of File classes
      fileNames: formData.getAll('files').map(async (file: File) => {
          return {
            webkitRelativePath: file.webkitRelativePath,
            lastModified: file.lastModified,
            name: file.name,
            size: file.size,
            type: file.type,
            buffer: { /* ... */ }
          };
        }),
    }),
  };
} The last part is converting into data that is easy to work with, for this case using arrays to represent buffers works rather well, so we just do some conversion, ArrayBuffers // ...
export async function post({ request }: APIContext) {
  const formData = await request.formData();
  return {
    body: JSON.stringify({
      // getAll('file') will return an array of File classes
      fileNames: formData.getAll('file').map(async (file: File) => {
          return {
            // ...
            buffer: {
              type: 'Buffer',
              value: Array.from(
                new Int8Array(
                  await file.arrayBuffer()
                ).values()
              ),
            },
          };
        }),
    }),
  };
} That's the . Using baked in to act as an endpoint for your . easy way Astro's file routes FormData To actually run with the endpoint all you need is Astro /upload npm run dev You can view a demo of the on , and easy way Stackblitz CodeSandbox GitHub Hard Way The requires you to use the middleware together with , in order to make the integration support requests. hard way multer expressjs @astrojs/node FormData The mostly builds on the , except instead of a file, you would instead use a file in the root directory to define your endpoints, so, your file structure would look more like this, hard way #easy-way src/pages/upload.ts server.mjs src/
 pages/
   index.astro
server.mjs The core of the occurs inside . should look like this by the end of this blog post hard way server.mjs server.mjs import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';
import multer from 'multer';

const app = express();
app.use(express.static('dist/client/'));
app.use(ssrHandler);

const upload = multer();
app.post('/upload', upload.array('file'), function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  // req.files['avatar'][0] -> File
  // req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
  console.log(req.files);
  res.json({ fileNames: req.files });
});

app.listen(8080); When you build an project in mode (e.g. ), will automatically generate a file, it's this file that allows us to build our own custom nodejs server and then run off this server. Astro server (SSR) npm run build Astro dist/server/entry.mjs Astro For this specific use case we are using for the server, and to enable support in we need the middleware, so if you're familiar with at all this should look familiar, express FormData express multer express import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
app.use(express.static('dist/client/'));
app.use(ssrHandler);

// ...
app.listen(8080); The enables to run on the server, for the most part it can be treated like any other middleware and ignored. ssrHandler Astro express express If you're not familiar with the code snippet above, please go through , it'll make the rest of the explanation easier to understand Note: express' documentation The real interesting part is where and meet. multer express By using a POST request handler we are able to recieve POST requests made to the endpoint and respond back with the parsed results, but unlike in the , is able to handle all the formatting allowing responses to be as expected. /upload FormData #easy-way express File // ...
import multer from 'multer';

const app = express();
// ...

const upload = multer();
app.post('/upload', upload.array('files'), function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  // req.files['avatar'][0] -> File
  // req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
  console.log(req.files);
  res.json({ fileNames: req.files });
});

app.listen(8080); Response to POST request express That's the . Using mode together with and to create the endpoint which supports . hard way Astro's SSR express multer /upload formData To actually run you need to do a bit more than you'd need for the Astro #easy-way Install and -> express multer npm install express multer Build handler -> Astro npm run build Run -> server.mjs node server.mjs The may seem easier, but that is due to having done alot of the prep work in the , it is actually more overall work than the easy way. hard way #easy-way You can view a demo of the on , and hard way Stackblitz CodeSandbox GitHub Conclusion There are 2 ways of using with , either the or the . FormData Astro easy way hard way The is to use baked in to act as an endpoint for your POST requests. easy way Astro's File Routes FormData The is to use mode together with and to create a endpoint which supports . hard way Astro's SSR express multer /upload FormData There is no right way, but I will recommend the as it is easier and less confusing to work with overall. easy way by on . Photo Caleb Jack (@hitthetrailjack) Unsplash Originally published on but also on blog.okikio.dev dev.to

Upload Files Easily and Quickly in NodeJS Using Astro

Content Introduction Features Server-side Rendering Initial Load Start Hydration Finish Hydration Performance and User Experience (UX) Partial Hydration Slots Drawbacks Conclusion Introduction Astro is a new framework that takes a different approach to challenge the existing rendering patterns used by many other frameworks (Gatsby, Next.js, and Remix.run to name a few). Even though the framework is still in beta, the features offered by the team are quite impressive so far. It brings many fresh ideas that I think are worth looking into. I can feel that the team really tried to bridge the developer experience (DX) and performance by leveraging their own . Astro compiler In this article, we’ll discuss the key features offered by Astro, then dive into a few of them in detail. Then, we’ll move into Server-side rendering (SSR) from a fundamental level to form a basis for our discussion around the concepts introduced by Astro. Then, move to discuss how Astro does things differently! Finally, we will take a look at some of its drawbacks and what type of application it is most applicable to at this time. Features Out of the box features Templating (via “slots”) Page Layouts Markdown support Code blocks Fetch Filesystem routing convention (similar to Next.js) Astro component ( ) .Astro Supports multiple frameworks (Vue.js, React.js, Svelte, Solid.js, etc) Opt-in interactivity optimization Through the hydration directives ( - provided by Astro compiler) client:* Pagination RSS feed Server-side rendering The use case for server-side rendering is to improve the SEO for search engine crawling. This is because single-page applications, or sites that only run on the client-side, are difficult for search engines to index its data like meta tags and other open graph details. As a result, without the generated HTML which contains these details, it has a big impact on the ranking of the website when users search Google. So, server-side rendering was a solution to this problem. The process goes like this: an HTML file (along with CSS and js) is served to the user on the initial request, then the client-side application will “hydrate” the DOM elements. Finally, once all the previous steps are done, it’ll then be ready to observe the user’s interactions (i.e. Clicks). Let’s take a look at a visualization of this process to better understand it. 1. Initial load (HTML, js, CSS) Initial page load where the user only sees the blank page. 2. Start hydration This is where the Javascript starts attaching the DOM event listeners (ie Click, KeyPress). At this point, the CSS should also be loaded and available. 3. Finish hydration Finally, there will be some time between the start and end of the hydration. If you are using React (<18), then this process happens all at once and it is ”blocking”. Meaning, it’ll hydrate the whole application. Then, only when it is done, will users be able to interact with it. For performance-critical applications, this can make all the difference, especially on low-end devices and when using a slow network connection (ie 3G). Performance and User Experience (UX) Looking at the above steps in another way, it looks like the following on a timeline: As you can see, there is a small period between the (FCP) and (TTI) where the client application is going through the hydration phase. First Content Paint Time to Interactive This impacts the performance; as your bundle becomes larger, the longer it will take for the request to load to hydrate your client-side site/application. In addition, performance is not the only thing impacted, the UX is impacted too. The longer the hydration process takes, the more time it takes for users to be able to interact with your website or web application. This can be frustrating for users clicking on an element on the page while it is still hydrating and having it not do anything at all. Partial Hydration So, how exactly does Astro solve this problem? It does this through partial hydration. As I mentioned in the features section, websites built using Astro are static by default. Meaning, that no JS will be served, and all the JS will be stripped during the process. when we say “no JS” is served, we mean JS from our application and not Astro’s core JS bundles. This is required for things like defer loading and hydrating of components (when it is applicable). ⚠️ Note: You may be asking, “Ok, if JS from our application is stripped, then how do you get click events on buttons?” Great question! Astro provides directives that allow you to explicitly specify which component you’d like to hydrate and when. In addition, Astro follows the “Island Architecture” which has the benefit of: Allowing the components to load independently from each other Allowing the components to render in isolation Hydration process (partial/selective hydration) In this example, while the rest of the page is static, the and components are hydrated on load. <Nav /> <Button /> Benefits The Benefit of this is the following: Serving less JS to the client (smaller JS bundle) Independent “Islands” to load and hydrate the component in isolation rather than the whole application Example of this: Depending on use cases, you can also use , which loads and hydrates the component only when it is visible. There are a few other directives; feel free to check out the documentation. client:visible If you just want to make sure your component gets hydrated on load, then you would add the following directive: <Nav client:load />

<Button client:load /> To me, with Astro, you can really find a good balance between the speed you get from HTML and the dynamism from Javascript. It’s so easy to optimize the code via the provided directive. The compiler handles all the heavy lifting. No additional code needs to be written to handle this. That is a big deal! 📝 Helpful reference: Astro - Hydrate Interactive Components Astro - Island Architecture Astro - Partial Hydration Jason Miller - Island Architecture concept Slots Another feature I found interesting was Astro’s slots. This provides a more powerful primitive compared to react’s and . prop children I felt the slot was more similar to other templating libraries like (Rails) , where you can define where different components go within the layout component and let the templating engine do the work of rendering it in the right place. erb children Example // Card.tsx
import * as React from 'react';

import {
  CardHeading,
  CardWrapper,
} from '~/components';

interface CardProps {};
const Card: React.FC<CardProps> = (props) => {
  return (
    <CardWrapper>
      <CardHeading>
        <slot name="card-heading">
      </CardHeading>
      <CardImageWrapper>
        <slot name="card-image">
      </CardImageWrapper>
      <CardFooter>
        <slot name="card-footer">
      </CardFooter>
    </CardWrapper>
  );
};

// App.tsx
import { Card, Footer } from '~/components';
import * as React from 'react';

interface AppProps {};
const App: React.FC<AppProps> = (props) => {
  return (
    <Card>
      <div slot="card-heading">
        <h2>Suzy</h2>
      </div>
      <div slot="card-image">
        <img src="/images/cat-suzy.png" slot="card-image">
      </div>
      <Footer slot="card-footer" />
    </Card>
  );
}; Astro Component Astro provides its own component which is very similar to svelte (if you have used it before). Everything (HTML, js, CSS) is in one file and it uses the extension . .Astro Inside the Astro component is where you can import and render the different components ( , , , ) 💡 Note: .vue .tsx .jsx svelte Example ---
const title = "this is my title";
---

<h1 class="title">{title}</h1>

<style>
  .title {
    color: grey;
  }
</style> The CSS in the astro component is scoped to the component by default! 💡 Note: 📝 Helpful reference: Astro - Styling Data fetching Within Astro’s script block, common syntax like , , and are supported. await/async typescript fetch Fetching the data is simple as what is highlighted below: ---
interface PokemonResult {
  name: string;
  url: string;
}
interface PokemonResponse {
  count: number;
  next: string;
  previous: number | null;
  result: PokemonResult[];
}
const response = await fetch('https://pokeapi.co/api/v2/pokemon');
const data: PokemonResponse = await response.json();
const result: PokemonResult = data?.result ?? [];
---

<ul>
  {(result) => <li>{result}</li>}
</ul>

<style></style> 📝 Helpful reference: Astro - Data fetching Environment variables Astro offers environment variables via files. The convention it uses is very similar to other frameworks. .env* There are two categories of environment variables Public (on the client-side) - Available at run-time, this can be defined via prefix PULIC_* Private (on server/build) - Available at build time, this is the default ⚠️ All environment variables are Private unless explicitly defined using the PUBLIC_ prefix Usage .env file: UNSPLASH_API_KEY=xxxxxx astro file: ---
const requestUrl = 'https://api.unsplash.com/search/photos?page=1&per_page=15&query=surfing';
const response = await fetch(requestUrl, {
  headers: {
    'Authorization': `Client-ID ${import.meta.env.UNSPLASH_API_KEY}`
  }
});

const data = await response.json();
const results = data?.results || [];
const images = results.map(images => images.urls);
---

<section class="image-section">
  <ul>
    {images.map((imageSizes) => (
      <li class="image-container">
        <img src={imageSizes.small} />
      </li>
    ))}
  </ul>
</section>

<style></style> 📝 Helpful reference: Astro - Environment Variables Astro - Data fetching Drawbacks The only drawback with Astro in this current stage is that its use cases feel a little niched. Many of the out-of-the-box features like code blocks and markdown seem to be very focused on building developer blogs. I am sure this is temporary only to gain developer adoption, and then they will expand to other use cases later. On the point of multiple frameworks being supported, the support for routing and state management has not been mentioned nor does it seem like there is a potential solution. This is understandable as the framework is still in beta. Nevertheless, I am excited to see what the team has planned for upcoming releases. Unfortunately, as impressive as it is so far, I hesitate to build a large application with this just yet because of the lack of tooling and ecosystem. However, it doesn’t mean you shouldn’t jump in and try it out. The documentation is clear and easy to understand. I still believe Astro introduces a lot of interesting new concepts that can be applied regardless if you are using Astro or not. Conclusion To summarize, Astro is a project that has a unique take on building fast websites. It brings many fresh ideas which I feel will likely pollinate to other frameworks — which is a very common thing. In addition, I noticed that there is a real focus on DX within the features provided which I really appreciate. We started a discussion regarding the fundamentals to better understand Server-side rendering (SSR). then broke it down further to understand what exactly Astro does differently that makes it better and how that impacts both the performance & UX. Astro allows you to find a sweet spot between the static (with HTML) and the dynamism (from js) when developing your websites. It does this by layering in advanced techniques, such as static first with selective/partial hydration, where our pages are thought of as isolated “Islands” which are loaded and hydrated independently. Give it a try, and see for yourself. Astro provides many sample applications in their repo which is a great starting point for experimentation! example

An Intro to the Astro Framework: Benefits and Drawbacks

Una introducción a Astro Framework: ventajas y desventajas

This paper is available on arxiv under CC 4.0 license. Authors: (1) Eleonora Alei, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (2) Björn S. Konrad, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (3) Daniel Angerhausen, ETH Zurich, Institute for Particle Physics & Astrophysics, National Center of Competence in Research PlanetS & Blue Marble Space Institute of Science; (4) John Lee Grenfell, Department of Extrasolar Planets and Atmospheres (EPA), Institute for Planetary Research (PF), German Aerospace Centre (DLR) (5) Paul Mollière, Max-Planck-Institut für Astronomie; (6) Sascha P. Quanz, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (7) Sarah Rugheimer, Department of Physics, University of Oxford; (8) Fabian Wunderlich, Department of Extrasolar Planets and Atmospheres (EPA), Institute for Planetary Research (PF), German Aerospace Centre (DLR); (9) LIFE collaboration, www.life-space-mission.com. Table of Links Abstract & Introduction Methods Results Discussion Conclusions Next Steps & References Appendix A: Scattering of terrestrial exoplanets Appendix B: Corner Plots Appendix C: Bayes’ factor analysis: other epochs Appendix D: Cloudy scenarios: additional figures Appendix B: Corner Plots Corner plots for the retrieval runs at the reference R and S/N are shown in this section. We grouped both the cloudy and the clear sky retrievals for each epoch in the same figure, in order to compare the results. Namely: Figure B.1 shows the corner plots of the two Modern Earth scenarios (MOD-CF and MODC); Figure B.2 shows the NOE Earth scenarios (NOE-CF and NOE-C); the GOE Earth scenarios (GOE-CF and GOE-C) are in Figure B.3; finally, the prebiotic scenarios (PRE-CF and PRE-C) are shown in Figure B.4. The models are color-coded according to Table 1. Also, the results for the clear sky retrievals are shown using dashed contour lines, while the cloudy models are represented using solid lines. The table on the top right of each figure shows the expected values for each parameter, together with the estimates and the 1- σ uncertainty for the two scenarios. This paper is available on under CC 4.0 license. arxiv

How We Used Corner Plots in Our Astrophysics Study

This paper is available on arxiv under CC 4.0 license. Authors: (1) Eleonora Alei, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (2) Björn S. Konrad, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (3) Daniel Angerhausen, ETH Zurich, Institute for Particle Physics & Astrophysics, National Center of Competence in Research PlanetS & Blue Marble Space Institute of Science; (4) John Lee Grenfell, Department of Extrasolar Planets and Atmospheres (EPA), Institute for Planetary Research (PF), German Aerospace Centre (DLR) (5) Paul Mollière, Max-Planck-Institut für Astronomie; (6) Sascha P. Quanz, ETH Zurich, Institute for Particle Physics & Astrophysics & National Center of Competence in Research PlanetS; (7) Sarah Rugheimer, Department of Physics, University of Oxford; (8) Fabian Wunderlich, Department of Extrasolar Planets and Atmospheres (EPA), Institute for Planetary Research (PF), German Aerospace Centre (DLR); (9) LIFE collaboration, www.life-space-mission.com. Table of Links Abstract & Introduction Methods Results Discussion Conclusions Next Steps & References Appendix A: Scattering of terrestrial exoplanets Appendix B: Corner Plots Appendix C: Bayes’ factor analysis: other epochs Appendix D: Cloudy scenarios: additional figures 5. Conclusions The Bayesian retrieval framework introduced in Paper III and extended here has delivered insightful answers to the questions introduced in Section 1. These can be summarized as follows: This paper is available on under CC 4.0 license. arxiv

The Conclusion to Our Exoplanet Study: The Future of Astrophysics

The entire market sentiment in December was dominated by the wealth effect, with ORDI’s thousandfold increase in active Inscription. A hundredfold increase was driven by $MOBILE in the DePIN. The Starknet airdrop plan has been continuously mentioned since the beginning of the month. The first two experienced explosions after a long period of silence; Starknet, on the other hand, was already hailed as an L2 star project alongside Arbitrum, Optimism, and zkSync a year ago: Raised $260 million with a valuation of $8 billion; TVL surpassed the $100 million mark, attracting an increasing number of users. Combined with the Optimism airdrop in June last year and the Arbitrum airdrop in March, which brought case after case of financial freedom, people’s expectations for the Starknet airdrop are at an all-time high. On December 1st, the Starknet Foundation announced that they had taken a snapshot for the airdrop and would distribute STRK tokens to past active users and contributors in the first quarter of 2024, unlocking previously distributed tokens. Early entrants are marking their calendars, eagerly awaiting the drawing; some are concerned that their interaction depth may not be enough to receive a substantial airdrop, and there are those who haven’t participated at all. Can outsiders only silently observe the celebration of others? Although Starknet has finalized the snapshot, most of the protocols on Starknet have not yet disclosed their airdrop plans. Based on past experience, most projects on these star ecosystems are likely to issue their own tokens. For example, Astraly, the token distribution platform on Starknet, has explicitly mentioned future airdrop plans in community responses: Official Support + Star Effect Starknet strongly supports projects in its own ecosystem: “Devonomics Pilot Program”: This program will distribute 10% of all transaction operator fees to developers building on Starknet since its launch in November of last year, totaling 1600 ETH. Of this, 8% will be allocated to dApp developers, providing 1280 ETH, and 2% will be allocated to core developers, providing 320 ETH. In the future, allocations will switch to using the Starknet token STRK. With official support and the star effect of Starknet itself, there are countless projects in the ecosystem: How do you find Alpha projects? Projects in the official recommended list have a basic guarantee of quality. However, referring to Starknet’s recommended page, even The Best Starknet Dapps recommended by the official has nearly 100 projects. The time and effort required for interaction with 100 projects are relatively high. How to quickly experience these projects? Solution: task platforms. For projects in need of growth, active project parties will choose to release activities through task platforms to attract users. Compared to well-established Web2 task platforms like Gleam, more and more Web3 platforms are widely adopted because they support the release of on-chain tasks. How extensive is the coverage of these Web3 task platforms? Referring to the recommended cross-chain bridge projects on the Starknet official page, it can be seen that the project coverage on task platforms is relatively high. Although not complete, one website can understand the most recommended projects and directly participate in project activities, saving a lot of time and effort. The wealth effect dominated the entire market sentiment in December. In Galxe, TaskOn, and similar platforms, the main purpose of launching activities is to attract users, so the threshold for tasks is relatively low and easy to complete. Common task configurations include following social media, joining communities, and completing PoW tasks or entry-level on-chain tasks to help users quickly familiarize themselves with the product. For understanding a project, this is the best start. The rewards for these activities are also diverse, including NFTs, whitelist spots, stablecoins, Discord roles, etc. Platforms like Galxe OAT and TaskOn’s CAP offer official NFT credentials, serving as on-chain proof of a user’s contribution to a project’s activity. While you may not become an early participant in the Starknet ecosystem, you can still be an early user of these applications. Starting with task platforms, you can quickly find your Alpha project. Also published . here

Starknet's Astronomical Rise and Potential Airdrop Opportunities with the Starknet Eco

Scientific American, Vol. XXXIX. No. 6. [New Series.], August 10, 1878, by Various, is part of the HackerNoon Books Series. You can jump to any chapter in this book . ASTRONOMICAL NOTES. here ASTRONOMICAL NOTES. BY BERLIN H. WRIGHT. Penn Yan, N. Y., Saturday, August 10, 1878. The following calculations are adapted to the latitude of New York city, and are expressed in true or clock time, being for the date given in the caption when not otherwise stated. PLANETS. H.M. H.M. Mercury sets 8 03 eve. Saturn rises 8 59 eve. Venus rises 2 42 mo. Saturn in meridian 2 58 mo. Jupiter in meridian 10 52 eve. Neptune rises 10 27 eve. FIRST MAGNITUDE STARS H.M. H.M. Alpheratz rises 6 54 eve. Regulus sets 7 29 eve. Algol (var.) rises 8 34 eve. Spica sets 9 24 eve. 7 stars (Pleiades) rise 10 53 eve. Arcturus sets 0 08 mo. Aldebaran rises 0 17 mo. Antares sets 11 24 eve. Capella rises 9 40 eve. Vega in meridian 9 15 eve. Rigel Rises 2 23 mo. Altair in meridian 10 27 eve. Betelgeuse rises 2 08 mo. Deneb in meridian 11 19 eve. Sirius rises 4 24 mo. Fomalhaut rises 9 34 eve. Procyon rises 3 59 mo. REMARKS Mercury is brightest this date, and furthest from the sun August 13. Venus will be at her descending node August 17. Jupiter will be near the moon August 17, 4h. 20m. morning, being the moon's apparent diameter north; this will be an occultation south of the equator. Saturn will be near the moon August 16, being about 7° south. There will be a partial eclipse of the moon August 16, in the evening. The moon will rise more or less eclipsed east of Kansas, west of which no eclipse will be visible. Middle. End. H.M. H.M. Boston 7 24 eve. 8 50 eve. New York 7 12 eve. 8 38 eve. Washington 7 00 eve. 8 26 eve. Charleston 6 48 eve. 8 14 eve. Chicago ———— 7 44 eve. St. Louis ———— 7 33 eve. New Orleans ———— 7 34 eve. The following shows the appearance of the moon when the eclipse is greatest -7·1 digits, or 0·596 of the moon's diameter. The size of the eclipse will be the same for all places. The time of middle and end for any other places may be obtained by applying the difference of longitude from Washington, converted into time, to the Washington time of middle and end, adding if east of Washington, and subtracting if west. An Interesting Astronomical Observation. To the Editor of the Scientific American: While viewing the planet Jupiter, at about 5 minutes past 10 o'clock P.M., a very strange sight presented itself to the observers, who were looking for a transit of one of the satellites. A very dark spot much larger than a satellite was seen on the eastern edge of the disk, as shown in the above diagram. It moved rapidly westward along the upper margin of the northern belt and passed off at 1 o'clock 24 minutes A.M. (12th). From its first internal contact till its last external contact was just 3h. 19m., Pittsburg time. It appeared to be a solid opaque body, truly spherical, very sharply defined, and most intensely black. The transit of the satellite occurred at 15 minutes after 11 o'clock, and had no unusual appearance. Now what was that dark body? We are constant observers of the heavenly bodies, though not deeply versed in the science of astronomy, and are anxious to know if any one can give us some light on the subject. The telescopes used were a 2½ inch and 5 inch achromatic, magnifying 154 and 216 diameters, but the 154 was chiefly used. was chiefly used. Joseph Wampler. James R. Gemmill. McKeesport, Pa., July 11, 1878. Some of Professor Marsh's Recent Discoveries. Mr. S. W. Williston, the assistant of Professor Marsh, has been giving to the Omaha some interesting facts with regard to the great reptilian fossils recently discovered in Wyoming and Colorado. The bones found represent reptiles of many sizes, from that of a cat up to one sixty feet high. The latter, found at Como, Wyoming, belonged to the crocodile order; but the remains give evidence that the animal stood up on its hind legs, like a kangaroo. Another found in Colorado is estimated by Professor Marsh to have been 100 feet long. A great many remains of the same general class, but belonging to different species, have been collected and sent East. Among them from three to four hundred specimens of the dinosaur, and about a thousand pterodactyls, have been shipped from Colorado, Wyoming, and Kansas. The wings of one of the latter were from thirty to forty feet from tip to tip. Seventeen different species of these flying dragons have been found in the chalk of western Kansas. There have also been found six species of toothed birds. Comparatively little has been done toward classifying the late finds, the task is such an enormous one. Great importance is attached to them, however, since nothing of the kind had been found in America until a little over a year ago and great stress had been laid by certain geologists on their absence. Another remarkable feature of the discovery was that the fossils which had been reported as not existing in this country had hardly been brought to light in one locality before thousands of tons of them were simultaneously discovered in half a dozen different places. Bee Trying to Save a Hundred and Fifty Million Dollars a Year. Professor Riley, recently appointed Government Entomologist and attached to the Agricultural Department, reports that specimens of insects injurious to agriculture are constantly being sent to the department from all parts of the country, with requests for information. In every instance, if a proper examination could be made, an effectual remedy could be found, and not less than $150,000,000 saved to the country annually. Recently a worm entirely new to science was sent to the department by an Iowa farmer, whose orchard of several thousand apple trees had been rendered unproductive for several years by the new depredator. For the interests of Western fruit growers this insect should immediately be investigated. Professor Riley asserts that the $5,000 recently voted by Congress for the investigation of the cotton worm, which has sometimes damaged the cotton crop of the South as much as $20,000,000 in a single fortnight, might have been used to better advantage by the department; the salary of the entomologist will use up all the money, leaving next to nothing for experiments for the eradication of the pest. Industrial Education. All are agreed that some education is necessary; but what? The great proportion of those having the direction of our educational system and facilities in charge still cling to a system which was established long before the first mechanical operation came into existence. Before the present system of man's relation to man, socially, industrially, politically, or commercially, was heard of, and notwithstanding the revolutions and advancement in all other things, there is a determined resistance to any attempt at revolution in what shall be considered education. There is an effort to establish compulsory education; but what is the child to be taught? As if in league with the false theories of the rights of labor, these efforts take the apprentices from the shops, force them away from where they would learn something, and confine them inside a school house to learn—what? Certainly nothing of the materials, or tools, or pursuits by which they are to obtain their livelihood. The child knows nothing of when or by whom the compass was discovered, the printing press, the use of powder, electricity, of steam, or of any one of the thousand mechanical operations now controlling every department of life. Does any school boy know how many kingdoms there are in the natural world, or whether an animal, a vegetable and a mineral all belong to the same or to different ones? Will he know that from instinct the young of animals seeks its food and expands its lungs, as by the same instinct the root of a seed sucks up its nourishment from the soil and sends its leaves up to breathe the air? Will he know anything of the nature or requirements of the soils or the plants that grow in them? Will this compulsory education teach the boy anything of the iron furnace, the foundry or rolling mill, or the uses or handling of any of their products? Will it teach him anything of woods and their value, or for what and how they are useful to man? Will this knowledge, for which the powers of the State are to be required to force him to know it—will it teach him anything of the nature or uses of metals, of metal working, or the business depending upon them? Will it teach him anything of gold or silver, copper or brass? Anything of pottery, of bone, ivory, celluloid, etc.? Will he learn anything of hides, leather, or the production of these necessary articles? Will he know whether the word textile applies to anything but a spider's web or the wing of a butterfly? Whether the United States make, import, or grow cotton, wool, silk, flax, and hemp? Will he know anything of commerce, railroads, telegraphs, printing, and the great number of clerk labors in the larger towns? Will he have learned a single thing which will assist him in his work of life? Will not every boy thus taken out of the shop and placed at the compulsory schooling find after he has mastered all it has to give him that he yet knows nothing; that he must then commence where he was and serve his apprenticeship; that instead of compulsory education his past years have been wasted in obtaining but a compulsory ignorance? About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. Various (2013). Scientific American, Vol. XXXIX. No. 6. [New Series.], August 10, 1878. Urbana, Illinois: Project Gutenberg. Retrieved https://www.gutenberg.org/cache/epub/19406/pg19406-images.html This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at , located at www.gutenberg.org https://www.gutenberg.org/policy/license.html

ASTRONOMICAL NOTES

When using Tailwind with Astro, you’ll notice that stop working when you use it with Astro Components or Slots. Tailwind’s space utilities 
<div class='space-y-4'>
  <Component client:load />
  <Component client:load />
</div> The reason is simple. I’ve written about the cause in and how to fix it. a previous article You can read that article for more information, but the gist is: Astro components and slots wrap their contents in a div that has display: contents The selector, which Tailwind uses for its space utilities, cannot target the elements within these Astro components and slots * + * A simple fix Fixing this is simple. We have to modify Tailwind’s space utilities with a plugin — so they can dive one level beyond Astro’s components and slots. I’ve created this plugin and added it as part of Splendid UI. You can install Splendid UI like this. npm install splendid-ui Then you can use the plugin in your Tailwind config file like this: module.exports = {
  plugins: [require('splendid-ui/tailwind/plugins/astro-space.cjs')],
} (I know the path looks long and complicated right now. It's something I'll simplify in the future as Splendid UI becomes more mature. For now, enjoy something that works! 🙃). That’s it! Further Reading Splendid UI Astro Space Utility documentation . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog

Using Splendid AI — A Tailwind Utility for Astro

On the fourth day comes the astrologer from his crumbling old tower up the valley

Off on a Comet! a Journey through Planetary Space by Jules Verne, is part of the HackerNoon Books Series. You can jump to any chapter in this book . THE ASTRONOMER here CHAPTER I. THE ASTRONOMER By the return of the expedition, conveying its contribution from Formentera, the known population of Gallia was raised to a total of thirty-six. On learning the details of his friends’ discoveries, Count Timascheff did not hesitate in believing that the exhausted individual who was lying before him was the author alike of the two unsigned documents picked up at sea, and of the third statement so recently brought to hand by the carrier-pigeon. Manifestly, he had arrived at some knowledge of Gallia’s movements: he had estimated her distance from the sun; he had calculated the diminution of her tangential speed; but there was nothing to show that he had arrived at the conclusions which were of the most paramount interest to them all. Had he ascertained the true character of her orbit? had he established any data from which it would be possible to reckon what time must elapse before she would again approach the earth? The only intelligible words which the astronomer had uttered had been, “My comet!” To what could the exclamation refer? Was it to be conjectured that a fragment of the earth had been chipped off by the collision of a comet? and if so, was it implied that the name of the comet itself was Gallia, and were they mistaken in supposing that such was the name given by the to the little world that had been so suddenly launched into space? Again and again they discussed these questions; but no satisfactory answer could be found. The only man who was able to throw any light upon the subject was lying amongst them in an unconscious and half-dying condition. savant Apart from motives of humanity, motives of self-interest made it a matter of the deepest concern to restore animation to that senseless form. Ben Zoof, after making the encouraging remark that have as many lives as a cat, proceeded, with Negrete’s assistance, to give the body such a vigorous rubbing as would have threatened serious injury to any ordinary mortal, whilst they administered cordials and restoratives from the medical stores powerful enough, one might think, to rouse the very dead. savants Dobryna’s Meanwhile the captain was racking his brain in his exertions to recall what were the circumstances of his previous acquaintance with the Frenchman upon whose features he was gazing; he only grew more and more convinced that he had once been familiar with them. Perhaps it was not altogether surprising that he had almost forgotten him; he had never seen him since the days of his youth, that time of life which, with a certain show of justice, has been termed the age of ingratitude; for, in point of fact, the astronomer was none other than Professor Palmyrin Rosette, Servadac’s old science-master at the Lycee Charlemagne. After completing his year of elementary studies, Hector Servadac had entered the school at Saint Cyr, and from that time he and his former tutor had never met, so that naturally they would well-nigh pass from each other’s recollection. One thing, however, on the other hand, might conduce to a mutual and permanent impression on their memories; during the year at the Lycee, young Servadac, never of a very studious turn of mind, had contrived, as the ringleader of a set of like caliber as himself, to lead the poor professor a life of perpetual torment. On the discovery of each delinquency he would fume and rage in a manner that was a source of unbounded delight to his audience. Two years after Servadac left the Lycee, Professor Rosette had thrown up all educational employment in order that he might devote himself entirely to the study of astronomy. He endeavored to obtain a post at the Observatory, but his ungenial character was so well known in scientific circles that he failed in his application; however, having some small private means, he determined on his own account to carry on his researches without any official salary. He had really considerable genius for the science that he had adopted; besides discovering three of the latest of the telescopic planets, he had worked out the elements of the three hundred and twenty-fifth comet in the catalogue; but his chief delight was to criticize the publications of other astronomers, and he was never better pleased than when he detected a flaw in their reckonings. When Ben Zoof and Negrete had extricated their patient from the envelope of furs in which he had been wrapped by Servadac and the lieutenant, they found themselves face to face with a shrivelled little man, about five feet two inches high, with a round bald head, smooth and shiny as an ostrich’s egg, no beard unless the unshorn growth of a week could be so described, and a long hooked nose that supported a huge pair of spectacles such as with many near-sighted people seems to have become a part of their individuality. His nervous system was remarkably developed, and his body might not inaptly be compared to one of the Rhumkorff’s bobbins of which the thread, several hundred yards in length, is permeated throughout by electric fluid. But whatever he was, his life, if possible, must be preserved. When he had been partially divested of his clothing, his heart was found to be still beating, though very feebly. Asserting that while there was life there was hope, Ben Zoof recommenced his friction with more vigor than ever. When the rubbing had been continued without a moment’s intermission for the best part of half an hour, the astronomer heaved a faint sigh, which ere long was followed by another and another. He half opened his eyes, closed them again, then opened them completely, but without exhibiting any consciousness whatever of his situation. A few words seemed to escape his lips, but they were quite unintelligible. Presently he raised his right hand to his forehead as though instinctively feeling for something that was missing; then, all of a sudden, his features became contracted, his face flushed with apparent irritation, and he exclaimed fretfully, “My spectacles!—where are my spectacles?” In order to facilitate his operations, Ben Zoof had removed the spectacles in spite of the tenacity with which they seemed to adhere to the temples of his patient; but he now rapidly brought them back and readjusted them as best he could to what seemed to be their natural position on the aquiline nose. The professor heaved a long sigh of relief, and once more closed his eyes. Before long the astronomer roused himself a little more, and glanced inquiringly about him, but soon relapsed into his comatose condition. When next he opened his eyes, Captain Servadac happened to be bending down closely over him, examining his features with curious scrutiny. The old man darted an angry look at him through the spectacles, and said sharply, “Servadac, five hundred lines to-morrow!” It was an echo of days of old. The words were few, but they were enough to recall the identity which Servadac was trying to make out. “Is it possible?” he exclaimed. “Here is my old tutor, Mr. Rosette, in very flesh and blood.” “Can’t say much for the flesh,” muttered Ben Zoof. The old man had again fallen back into a torpid slumber. Ben Zoof continued, “His sleep is getting more composed. Let him alone; he will come round yet. Haven’t I heard of men more dried up than he is, being brought all the way from Egypt in cases covered with pictures?” “You idiot!—those were mummies; they had been dead for ages.” Ben Zoof did not answer a word. He went on preparing a warm bed, into which he managed to remove his patient, who soon fell into a calm and natural sleep. Too impatient to await the awakening of the astronomer and to hear what representations he had to make, Servadac, the count, and the lieutenant, constituting themselves what might be designated “the Academy of Sciences” of the colony, spent the whole of the remainder of the day in starting and discussing the wildest conjectures about their situation. The hypothesis, to which they had now accustomed themselves for so long, that a new asteroid had been formed by a fracture of the earth’s surface, seemed to fall to the ground when they found that Professor Palmyrin Rosette had associated the name of Gallia, not with their present home, but with what he called “my comet”; and that theory being abandoned, they were driven to make the most improbable speculations to replace it. Alluding to Rosette, Servadac took care to inform his companions that, although the professor was always eccentric, and at times very irascible, yet he was really exceedingly good-hearted; his bark was worse than his bite; and if suffered to take their course without observation, his outbreaks of ill-temper seldom lasted long. “We will certainly do our best to get on with him,” said the count. “He is no doubt the author of the papers, and we must hope that he will be able to give us some valuable information.” “Beyond a question the documents have originated with him,” assented the lieutenant. “Gallia was the word written at the top of every one of them, and Gallia was the first word uttered by him in our hearing.” The astronomer slept on. Meanwhile, the three together had no hesitation in examining his papers, and scrutinizing the figures on his extemporized blackboard. The handwriting corresponded with that of the papers already received; the blackboard was covered with algebraical symbols traced in chalk, which they were careful not to obliterate; and the papers, which consisted for the most part of detached scraps, presented a perfect wilderness of geometrical figures, conic sections of every variety being repeated in countless profusion. Lieutenant Procope pointed out that these curves evidently had reference to the orbits of comets, which are variously parabolic, hyperbolic, or elliptic. If either of the first two, the comet, after once appearing within the range of terrestrial vision, would vanish forever in the outlying regions of space; if the last, it would be sure, sooner or later, after some periodic interval, to return. From the appearance of his papers, then, it seemed probable that the astronomer, during his sojourn at Formentera, had been devoting himself to the study of cometary orbits; and as calculations of this kind are ordinarily based upon the assumption that the orbit is a parabola, it was not unlikely that he had been endeavoring to trace the path of some particular comet. prima facie “I wonder whether these calculations were made before or after the 1st of January; it makes all the difference,” said Lieutenant Procope. “We must bide our time and hear,” replied the count. Servadac paced restlessly up and down. “I would give a month of my life,” he cried, impetuously, “for every hour that the old fellow goes sleeping on.” “You might be making a bad bargain,” said Procope, smiling. “Perhaps after all the comet has had nothing to do with the convulsion that we have experienced.” “Nonsense!” exclaimed the captain; “I know better than that, and so do you. Is it not as clear as daylight that the earth and this comet have been in collision, and the result has been that our little world has been split off and sent flying far into space?” Count Timascheff and the lieutenant looked at each other in silence. “I do not deny your theory,” said Procope after a while. “If it be correct, I suppose we must conclude that the enormous disc we observed on the night of the catastrophe was the comet itself; and the velocity with which it was traveling must have been so great that it was hardly arrested at all by the attraction of the earth.” “Plausible enough,” answered Count Timascheff; “and it is to this comet that our scientific friend here has given the name of Gallia.” It still remained a puzzle to them all why the astronomer should apparently be interested in the comet so much more than in the new little world in which their strange lot was cast. “Can you explain this?” asked the count. “There is no accounting for the freaks of philosophers, you know,” said Servadac; “and have I not told you that this philosopher in particular is one of the most eccentric beings in creation?” “Besides,” added the lieutenant, “it is exceedingly likely that his observations had been going on for some considerable period before the convulsion happened.” Thus, the general conclusion arrived at by the Gallian Academy of Science was this: That on the night of the 31st of December, a comet, crossing the ecliptic, had come into collision with the earth, and that the violence of the shock had separated a huge fragment from the globe, which fragment from that date had been traversing the remote inter-planetary regions. Palmyrin Rosette would doubtless confirm their solution of the phenomenon. About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. Jules Verne (1998). Off on a Comet! a Journey through Planetary Space. Urbana, Illinois: Project Gutenberg. Retrieved October 2022 https://www.gutenberg.org/cache/epub/1353/pg1353-images.html This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at , located at . www.gutenberg.org https://www.gutenberg.org/policy/license.html

THE ASTRONOMER

The Astronomy

Great Astronomers by Robert S. Ball, is part of the HackerNoon Books Series. You can jump to any chapter in this book here. COPERNICUS COPERNICUS THORN, FROM AN OLD PRINT. The quaint town of Thorn, on the Vistula, was more than two centuries old when Copernicus was born there on the 19th of February, 1473. The situation of this town on the frontier between Prussia and Poland, with the commodious waterway offered by the river, made it a place of considerable trade. A view of the town, as it was at the time of the birth of Copernicus, is here given. The walls, with their watch-towers, will be noted, and the strategic importance which the situation of Thorn gave to it in the fifteenth century still belongs thereto, so much so that the German Government recently constituted the town a fortress of the first class. Copernicus, the astronomer, whose discoveries make him the great predecessor of Kepler and Newton, did not come from a noble family, as certain other early astronomers have done, for his father was a tradesman. Chroniclers are, however, careful to tell us that one of his uncles was a bishop. We are not acquainted with any of those details of his childhood or youth which are often of such interest in other cases where men have risen to exalted fame. It would appear that the young Nicolaus, for such was his Christian name, received his education at home until such time as he was deemed sufficiently advanced to be sent to the University at Cracow. The education that he there obtained must have been in those days of a very primitive description, but Copernicus seems to have availed himself of it to the utmost. He devoted himself more particularly to the study of medicine, with the view of adopting its practice as the profession of his life. The tendencies of the future astronomer were, however, revealed in the fact that he worked hard at mathematics, and, like one of his illustrious successors, Galileo, the practice of the art of painting had for him a very great interest, and in it he obtained some measure of success. By the time he was twenty-seven years old, it would seem that Copernicus had given up the notion of becoming a medical practitioner, and had resolved to devote himself to science. He was engaged in teaching mathematics, and appears to have acquired some reputation. His growing fame attracted the notice of his uncle the bishop, at whose suggestion Copernicus took holy orders, and he was presently appointed to a canonry in the cathedral of Frauenburg, near the mouth of the Vistula. To Frauenburg, accordingly, this man of varied gifts retired. Possessing somewhat of the ascetic spirit, he resolved to devote his life to work of the most serious description. He eschewed all ordinary society, restricting his intimacies to very grave and learned companions, and refusing to engage in conversation of any useless kind. It would seem as if his gifts for painting were condemned as frivolous; at all events, we do not learn that he continued to practise them. In addition to the discharge of his theological duties, his life was occupied partly in ministering medically to the wants of the poor, and partly with his researches in astronomy and mathematics. His equipment in the matter of instruments for the study of the heavens seems to have been of a very meagre description. He arranged apertures in the walls of his house at Allenstein, so that he could observe in some fashion the passage of the stars across the meridian. That he possessed some talent for practical mechanics is proved by his construction of a contrivance for raising water from a stream, for the use of the inhabitants of Frauenburg. Relics of this machine are still to be seen. COPERNICUS. The intellectual slumber of the Middle Ages was destined to be awakened by the revolutionary doctrines of Copernicus. It may be noted, as an interesting circumstance, that the time at which he discovered the scheme of the solar system has coincided with a remarkable epoch in the world's history. The great astronomer had just reached manhood at the time when Columbus discovered the new world. Before the publication of the researches of Copernicus, the orthodox scientific creed averred that the earth was stationary, and that the apparent movements of the heavenly bodies were indeed real movements. Ptolemy had laid down this doctrine 1,400 years before. In his theory this huge error was associated with so much important truth, and the whole presented such a coherent scheme for the explanation of the heavenly movements, that the Ptolemaic theory was not seriously questioned until the great work of Copernicus appeared. No doubt others, before Copernicus, had from time to time in some vague fashion surmised, with more or less plausibility, that the sun, and not the earth, was the centre about which the system really revolved. It is, however, one thing to state a scientific fact; it is quite another thing to be in possession of the train of reasoning, founded on observation or experiment, by which that fact may be established. Pythagoras, it appears, had indeed told his disciples that it was the sun, and not the earth, which was the centre of movement, but it does not seem at all certain that Pythagoras had any grounds which science could recognise for the belief which is attributed to him. So far as information is available to us, it would seem that Pythagoras associated his scheme of things celestial with a number of preposterous notions in natural philosophy. He may certainly have made a correct statement as to which was the most important body in the solar system, but he certainly did not provide any rational demonstration of the fact. Copernicus, by a strict train of reasoning, convinced those who would listen to him that the sun was the centre of the system. It is useful for us to consider the arguments which he urged, and by which he effected that intellectual revolution which is always connected with his name. The first of the great discoveries which Copernicus made relates to the rotation of the earth on its axis. That general diurnal movement, by which the stars and all other celestial bodies appear to be carried completely round the heavens once every twenty-four hours, had been accounted for by Ptolemy on the supposition that the apparent movements were the real movements. As we have already seen, Ptolemy himself felt the extraordinary difficulty involved in the supposition that so stupendous a fabric as the celestial sphere should spin in the way supposed. Such movements required that many of the stars should travel with almost inconceivable velocity. Copernicus also saw that the daily rising and setting of the heavenly bodies could be accounted for either by the supposition that the celestial sphere moved round and that the earth remained at rest, or by the supposition that the celestial sphere was at rest while the earth turned round in the opposite direction. He weighed the arguments on both sides as Ptolemy had done, and, as the result of his deliberations, Copernicus came to an opposite conclusion from Ptolemy. To Copernicus it appeared that the difficulties attending the supposition that the celestial sphere revolved, were vastly greater than those which appeared so weighty to Ptolemy as to force him to deny the earth's rotation. Copernicus shows clearly how the observed phenomena could be accounted for just as completely by a rotation of the earth as by a rotation of the heavens. He alludes to the fact that, to those on board a vessel which is moving through smooth water, the vessel itself appears to be at rest, while the objects on shore seem to be moving past. If, therefore, the earth were rotating uniformly, we dwellers upon the earth, oblivious of our own movement, would wrongly attribute to the stars the displacement which was actually the consequence of our own motion. Copernicus saw the futility of the arguments by which Ptolemy had endeavoured to demonstrate that a revolution of the earth was impossible. It was plain to him that there was nothing whatever to warrant refusal to believe in the rotation of the earth. In his clear-sightedness on this matter we have specially to admire the sagacity of Copernicus as a natural philosopher. It had been urged that, if the earth moved round, its motion would not be imparted to the air, and that therefore the earth would be uninhabitable by the terrific winds which would be the result of our being carried through the air. Copernicus convinced himself that this deduction was preposterous. He proved that the air must accompany the earth, just as his coat remains round him, notwithstanding the fact that he is walking down the street. In this way he was able to show that all a priori objections to the earth's movements were absurd, and therefore he was able to compare together the plausibilities of the two rival schemes for explaining the diurnal movement. FRAUENBURG, FROM AN OLD PRINT. Once the issue had been placed in this form, the result could not be long in doubt. Here is the question: Which is it more likely—that the earth, like a grain of sand at the centre of a mighty globe, should turn round once in twenty-four hours, or that the whole of that vast globe should complete a rotation in the opposite direction in the same time? Obviously, the former is far the more simple supposition. But the case is really much stronger than this. Ptolemy had supposed that all the stars were attached to the surface of a sphere. He had no ground whatever for this supposition, except that otherwise it would have been well-nigh impossible to have devised a scheme by which the rotation of the heavens around a fixed earth could have been arranged. Copernicus, however, with the just instinct of a philosopher, considered that the celestial sphere, however convenient from a geometrical point of view, as a means of representing apparent phenomena, could not actually have a material existence. In the first place, the existence of a material celestial sphere would require that all the myriad stars should be at exactly the same distances from the earth. Of course, no one will say that this or any other arbitrary disposition of the stars is actually impossible, but as there was no conceivable physical reason why the distances of all the stars from the earth should be identical, it seemed in the very highest degree improbable that the stars should be so placed. Doubtless, also, Copernicus felt a considerable difficulty as to the nature of the materials from which Ptolemy's wonderful sphere was to be constructed. Nor could a philosopher of his penetration have failed to observe that, unless that sphere were infinitely large, there must have been space outside it, a consideration which would open up other difficult questions. Whether infinite or not, it was obvious that the celestial sphere must have a diameter at least many thousands of times as great as that of the earth. From these considerations Copernicus deduced the important fact that the stars and the other celestial bodies must all be vast objects. He was thus enabled to put the question in such a form that it could hardly receive any answer but the correct one. Which is it more rational to suppose, that the earth should turn round on its axis once in twenty-four hours, or that thousands of mighty stars should circle round the earth in the same time, many of them having to describe circles many thousands of times greater in circumference than the circuit of the earth at the equator? The obvious answer pressed upon Copernicus with so much force that he was compelled to reject Ptolemy's theory of the stationary earth, and to attribute the diurnal rotation of the heavens to the revolution of the earth on its axis. Once this tremendous step had been taken, the great difficulties which beset the monstrous conception of the celestial sphere vanished, for the stars need no longer be regarded as situated at equal distances from the earth. Copernicus saw that they might lie at the most varied degrees of remoteness, some being hundreds or thousands of times farther away than others. The complicated structure of the celestial sphere as a material object disappeared altogether; it remained only as a geometrical conception, whereon we find it convenient to indicate the places of the stars. Once the Copernican doctrine had been fully set forth, it was impossible for anyone, who had both the inclination and the capacity to understand it, to withhold acceptance of its truth. The doctrine of a stationary earth had gone for ever. Copernicus having established a theory of the celestial movements which deliberately set aside the stability of the earth, it seemed natural that he should inquire whether the doctrine of a moving earth might not remove the difficulties presented in other celestial phenomena. It had been universally admitted that the earth lay unsupported in space. Copernicus had further shown that it possessed a movement of rotation. Its want of stability being thus recognised, it seemed reasonable to suppose that the earth might also have some other kinds of movements as well. In this, Copernicus essayed to solve a problem far more difficult than that which had hitherto occupied his attention. It was a comparatively easy task to show how the diurnal rising and setting could be accounted for by the rotation of the earth. It was a much more difficult undertaking to demonstrate that the planetary movements, which Ptolemy had represented with so much success, could be completely explained by the supposition that each of those planets revolved uniformly round the sun, and that the earth was also a planet, accomplishing a complete circuit of the sun once in the course of a year. EXPLANATION OF PLANETARY MOVEMENTS. It would be impossible in a sketch like the present to enter into any detail as to the geometrical propositions on which this beautiful investigation of Copernicus depended. We can only mention a few of the leading principles. It may be laid down in general that, if an observer is in movement, he will, if unconscious of the fact, attribute to the fixed objects around him a movement equal and opposite to that which he actually possesses. A passenger on a canal-boat sees the objects on the banks apparently moving backward with a speed equal to that by which he is himself advancing forwards. By an application of this principle, we can account for all the phenomena of the movements of the planets, which Ptolemy had so ingeniously represented by his circles. Let us take, for instance, the most characteristic feature in the irregularities of the outer planets. We have already remarked that Mars, though generally advancing from west to east among the stars, occasionally pauses, retraces his steps for awhile, again pauses, and then resumes his ordinary onward progress. Copernicus showed clearly how this effect was produced by the real motion of the earth, combined with the real motion of Mars. In the adjoining figure we represent a portion of the circular tracks in which the earth and Mars move in accordance with the Copernican doctrine. I show particularly the case where the earth comes directly between the planet and the sun, because it is on such occasions that the retrograde movement (for so this backward movement of Mars is termed) is at its highest. Mars is then advancing in the direction shown by the arrow-head, and the earth is also advancing in the same direction. We, on the earth, however, being unconscious of our own motion, attribute, by the principle I have already explained, an equal and opposite motion to Mars. The visible effect upon the planet is, that Mars has two movements, a real onward movement in one direction, and an apparent movement in the opposite direction. If it so happened that the earth was moving with the same speed as Mars, then the apparent movement would exactly neutralise the real movement, and Mars would seem to be at rest relatively to the surrounding stars. Under the actual circumstances represented, however, the earth is moving faster than Mars, and the consequence is, that the apparent movement of the planet backwards exceeds the real movement forwards, the net result being an apparent retrograde movement. With consummate skill, Copernicus showed how the applications of the same principles could account for the characteristic movements of the planets. His reasoning in due time bore down all opposition. The supreme importance of the earth in the system vanished. It had now merely to take rank as one of the planets. The same great astronomer now, for the first time, rendered something like a rational account of the changes of the seasons. Nor did certain of the more obscure astronomical phenomena escape his attention. He delayed publishing his wonderful discoveries to the world until he was quite an old man. He had a well-founded apprehension of the storm of opposition which they would arouse. However, he yielded at last to the entreaties of his friends, and his book was sent to the press. But ere it made its appearance to the world, Copernicus was seized by mortal illness. A copy of the book was brought to him on May 23, 1543. We are told that he was able to see it and to touch it, but no more, and he died a few hours afterwards. He was buried in that Cathedral of Frauenburg, with which his life had been so closely associated. About HackerNoon Book Series: We bring you the most important technical, scientific, and insightful public domain books. This book is part of the public domain. Robert S. Ball (2000). Great Astronomers. Urbana, Illinois: Project Gutenberg. Retrieved October 2022 https://www.gutenberg.org/cache/epub/2298/pg2298-images.html This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org , located at https://www.gutenberg.org/policy/license.html.

Stories, News & Mentions about ASTRO

Astro’s Stories on HackerNoon