blocSonic.com Built With

After years with the previous PHP powered website that consisted of a hacked together single page app front-end solution, I decided it was time to rebuild the site from the ground up. This time around I wanted the new site to be built utilizing modern technologies and best practices while also making accessibility and performance prime concerns. Below you’ll find a list of the technologies that blocSonic has made use of. I hope you enjoy this shiny, new site.

— Mike Gregoire, Founder/Curator

Astro logo

Astro

Astro is a modern web framework designed to create fast, optimized, content-driven websites. It pioneered the "islands architecture", where interactive components are isolated and loaded only when necessary, leading to better performance. Astro supports multiple front-end frameworks like React, Vue, and Svelte, allowing developers to use their preferred tools. Its focus on static site generation and server-side rendering makes it ideal for building high-performance, content-heavy websites. Additionally, Astro's flexible and developer-friendly approach simplifies the process of creating, maintaining, and scaling web projects.

React logo

React

React is a popular JavaScript library for building user interfaces, developed and maintained by Facebook. It allows developers to create reusable UI components, making the development process more efficient and manageable. React's virtual DOM improves performance by minimizing direct manipulation of the actual DOM, leading to faster updates and rendering. With its component-based architecture, React promotes modular and maintainable code. It also supports server-side rendering and integrates well with other libraries and frameworks, making it a versatile choice for building dynamic and interactive web applications.

We’re using React to handle the interactive islands within Astro. This includes the music player and the search functionality.

YAML

YAML (YAML Ain't Markup Language) is a human-readable data serialization language commonly used for configuration files and data exchange between languages with different data structures. It is designed to be easily read and written by humans, using indentation to represent hierarchical data structures.

We’re using YAML to store the site’s content instead of a database which is parsed and converted during the static site generation.

Pagefind logo

Pagefind

Pagefind is a static search library designed to add full-text search capabilities to static websites. It indexes website content during the build process, creating lightweight, static files that can be easily integrated into the site. Pagefind operates entirely on the client side, meaning it does not require a server to process search queries, which enhances performance and reduces complexity. It is highly customizable, allowing developers to tweak the search experience to fit their specific needs. Pagefind is particularly useful for static site generators and can be used to provide a fast, user-friendly search experience on any static website.

Netlify logo

Netlify

Netlify is a web hosting platform for deploying modern web projects. It is known for its simplicity and speed, providing developers with tools to build, deploy, and manage websites and web applications directly from Git repositories. Netlify supports continuous deployment, automatically updating live sites whenever changes are pushed to the source code. Its serverless architecture allows for the integration of backend functions without the need for traditional server management. Additionally, Netlify offers features such as custom domain management, HTTPS, form handling, and a global CDN, ensuring fast and secure delivery of web content.

Netlify has proven to be the perfect platform for hosting modern static websites such as ours.