The latest articles on DEV Community by Matt Willis (@mattwillis). https://dev.to/mattwillis https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F59284%2F5a95b2a0-fe2d-4c0b-a164-21161335e7f3.jpg https://dev.to/mattwillis en Matt Willis Fri, 07 Feb 2025 02:33:40 +0000 https://dev.to/mattwillis/blasting-off-with-astro-c2p https://dev.to/mattwillis/blasting-off-with-astro-c2p <h2> 3...2...1...Blast Off! </h2> <p>Exciting news, my open source project to fight hate, <a href="https://resistance-toolkit.com" rel="noopener noreferrer">The Resistance Toolkit</a>, now has an official website / web app! </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd0if9gi68q9pbihcr0jz.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd0if9gi68q9pbihcr0jz.gif" alt="NASA rocket on the launchpad blasting off in slow motion." width="480" height="480"></a></p> <p>Quick recap of the events to led to this moment: </p> <ul> <li>I created a GitHub project that lists causes, organizations, and actions to take to support them. This is an effort to counteract all of the hate that has become emboldened in recent days.</li> <li>The project lived in a GitHub repo partly because I didn't feel like I had the time or resources to commit to building out an entire website or app. </li> </ul> <p>I don't know about you, but in my opinion, the Web Dev &amp; Javascript scene has gotten a little out of hand. I often feel paralyzed when I am starting a simple project. </p> <ul> <li>Does my little website need and entire WordPress backend or JS CMS equivalent? </li> <li>Should I choose React (Next.js now?), Vue, Angular, or Svelte? </li> <li>Hmmm, <strong>server side rendering</strong>, but with server-<strong>less</strong> functions?</li> <li>Don't even get me started with the umpteen JS state management libraries...</li> </ul> <p>It's enough to put me off of starting new projects. <strong>Enter Astro!</strong></p> <h2> What is Astro, you ask? </h2> <blockquote> <p><a href="https://astro.build" rel="noopener noreferrer">Astro</a> is a JavaScript web framework optimized for building fast, content-driven websites... It supports every major UI framework. Bring your existing components and take advantage of Astro's optimized client build performance.</p> </blockquote> <p>I decided to give Astro a shot for a couple of reasons:</p> <ol> <li>It's front end framework agnostic. You can use .md, .mdx, .html, .astro, .jsx, .js (pretty much anything) to compile your website.</li> <li>Simple static or server side rendering.</li> <li>Asset handling is a breeze. Astro can handle image optimization, determine quality, and infer size of remote images. </li> <li>Built in view transitions (and the ability to customize them).</li> <li>Easy prefetching. </li> </ol> <p>I was relieved that I could use the markdown files I had already created for the project. I could take my existing files, plop them in the src directory, and <strong>boom</strong> I have the skeleton of my website up and running!</p> <p>However, I needed it to be a little more dynamic. So I added some Astro properties and collections to manage the 15 causes and ~60 organizations listed in the project. I could then create layouts and convert the .md files for individual causes into templates to handle dynamic routing. Example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>src/data //collections and types src/causes.mdx //causes collection page src/cause/[slug].astro //individual cause template </code></pre> </div> <p>I won't go into all of the details (maybe I'll do a walk through in the future) but, this allowed me to rapidly develop out the website. There are also lots of Astro and community developed plugins as well. 🥰</p> <h2> No Excuses </h2> <p>I no longer have an excuse to put off starting a new project! Give Astro a try. There are a few "gotchas" that I had to deal with - like how to use vendor scripts across multiple pages and page loads. But the documentation and forums set me straight quickly. </p> <h2> Shameless Plug </h2> <p>I hope you'll check out <a href="https://resistance-toolkit.com" rel="noopener noreferrer">The Resistance Toolkit</a>. My hope is foster a community that is passionate about fighting hate, one step at a time. </p> <p><strong>Good Night, And Good Luck!</strong></p> webdev news javascript frontend