Learn Alpine, Ampt and Astro

 "Build a Full Stack Blog with Astro" is a hands-on course that cuts straight to the chase, offering developers a practical approach to building a fully functional blog website. Throughout this course, you'll get to grips with Astro, a modern web framework designed to help you create fast content websites with a modern development experience.

Here's what you'll be tackling:

- **Styling and Layout**: You'll learn how to style Astro pages, exploring a variety of ways to make your site look good without compromising on performance.
- **Astro Components and Static Assets**: Get comfortable creating reusable components and managing static assets like images.
- **Content Publishing System**: Delve into managing blog content with Astro’s content collections, with type safety included with Zod to keep your data structured and error-free.
- **Dynamic Features**: Implement pagination and dynamic pages to make your content discoverable and your site easy to navigate.
- **SEO Essentials**: Tackle SEO fundamentals with **`astro-seo`**, ensuring your site ranks well and reaches the right audience without the guesswork.
- **React and Vanilla JS**: Enhance your site with interactive components, first using React, then refactoring with Vanilla JS for optimal performance.
- **Backend Integration**: You'll dive into back-end functionality, creating custom API endpoints, and interfacing with a database using Drizzle ORM to manage your content behind the scenes.
- **Dynamic OG image generation**: Every content website needs decent OG images for social sharing. You’ll learn how to dynamically generate the OG images for your pages and blog articles.

By the end of this course, you won't just have a theoretical understanding — you'll have a live, deployable full-stack blog that reflects current best practices in web development. You’ll also gain valuable and easily-transferrable skills for working with databases and containerizing and deploying full-stack web apps. This course is about building something tangible that you can use as a springboard for more complex projects down the line. So, let's learn how to build great content websites!

Astro is a flexible web framework that allows you to build fast websites to suit your needs.

By default, Astro will build your site using Static Site Generation (SSG). This means the data in your site is loaded at build time so that the end-user gets served static pages that load quickly.

While Astro defaults this way, it also has Server-Side Rendering (SSR) that you can enable if you have more serverful needs in your application.

Along similar lines, Astro utilizes HTML and the browser as a default but when you need more flexibility you can opt into an Astro Island. Islands use React, Vue, Angular, or any frontend JavaScript framework you are used to enhance the user experience in your site.

astro

Build a Full Stack Blog with Astro

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

In this lesson, we see how the `x-model` directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an `x-bind` directive for the input value, as well as an `@input` event listener which, thanks to an access to the browser's native events via the `$event` magic property, sets the state value to `$event.target.value`.

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

In this lesson, we learn how the `x-init` directive in Alpine JS lets us run a JavaScript expression once the component has initiated.

We see the nuances that allow us to trigger that code before Alpine performs initial DOM updates, or after these updates have been made.

Focus in input field on page load with `x-init` in Alpine JS

In this lesson, we define a "count" state value with the `x-data` directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the `x-text` directive, which updates an element's `innerText` value.

We also hook up buttons with click event listeners with `x-on:click`, which allows us to modify the count value as desired.

Update a count state value with the x-on event listener directive in Alpine JS

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`.

We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.

We then iterate through an Array of Objects with the `x-for` directive in Alpine JS. We use a `<template>` tag to wrap the HTML element we want to repeat for each item, and put the `x-for` directive on that template tag.

We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.

Iterate through data with the `x-for` attribute in Alpine JS

In this lesson, we smoothen the transitions between tabs by applying a `transition` modifier to our `x-show` directive.

We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our `x-show` directive.

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

In this lesson, we learn how to retrieve a DOM element via the `x-ref` directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the `$refs` object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the `.focus()` method.

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the `$watch` property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the `debounce` modifier on the `x-model` property to avoid firing an API call on each keystroke.

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Series Intro - Beginner Level Alpine JS

A blog isn't worth much if you don't have a place to put your content. In this lesson we'll dive deep into Astros content collections API which is a feature for organizing all of your content and ensuring when you create your content you add the proper data to your front matter.

To do this we'll create a content folder that contains a `config.ts` inside that config we'll use `defineCollection` from `astro:content` to declare what our blog data will look like. From here you can set a `schema` property and use zod to declare the shape of the data you'd like your content to be in. 

When actually creating content, Astro will throw errors if you miss an attribute in your frontmatter that was set in your schema.

Astro also gives you an easy way to grab all the content you have with the `getCollection` function. We'll use this function to add links to our latests blog posts on the home page.

Create Astro Content Collections with Zod for a Typesafe Blog

We'll set up our initial Astro blog using Houston, Astro's official CLI.

After stepping through the CLI options you'll get a tour of the generated files that Astro includes in a new project. You'll see what file structure you are working with and also get an introduction to the `.astro` file type where we will be doing a lot of the work in this course.

Create an Astro Project and Set up the Dev Environment

From laying down the foundation to adding advanced features, this course walks you through creating your own personal blog website with Astro. Explore backend integration, optimization techniques, and deployment strategies.

In this course, you'll create dynamic OG images, RSS, sitemap, and database all while shipping minimal JavaScript for a blazing-fast user experience.

Intro: Build a Full Stack Blog with Astro

RSS feeds are a way for others to consume your content in their own feed without having to go to your website every time you publish a piece. 

Astro gives you a package `@astrojs/rss` that helps you create such a feed. On the Astro side, this will be an API route which we haven't touched on yet in this course but just know this is a route that others can hit to give them data, in this case a feed of all your posts.

Here we'll export a GET function that will return an RSS feed. RSS feeds require a certain shape to their data which is what we will provide the function. We'll give it a title, description, site, and items.

The items we'll grab from a call to `getCollection` and each will have a title, description, publication date, link, and content. For the content, we are rendering the full post as html. To do this safely we will need to packages: `markdown-it`, and `sanitize-html`. `markdown-it` will take our markdown and produce html and `sanitize-html` will strip out any unnecessary HTML.



Generate an RSS Feed for an Astro Blog with @astrojs/rss

Astro provides a sitemap integration to make it easy for you to set up your websites sitemap. 

Sitemaps are important for allowing search engines to efficiently crawl and index the pages of your website. 

To add the sitemap integration you just need to run `npx astro add sitemap` and add the integration to the integrations array in the config.

From there you can configure your sitemap how you'd expect. You can filter out any pages you don't want in there, add custom pages, adjust the change frequency, modify date, and priority.

You can also serialize your urls (e.g. remove the trailing slash) and add localization properties.

Generate a Sitemap in Astro with the sitemap Integration

Layouts are the way to create a consistent user experience across different pages within our application.

By default, Astro ships with a `<Layout>` component that wraps the pages that are generated using the CLI. We'll look at what is already in our page layouts and add a nav and footer to them as well. We'll see that the layout has a `<slot />` element which is very similar to Reacts `children` which is where the html of nested pages will get placed when you use that layout.

Layout's are not automatically applied to pages in an application so we will also see what it looks like to add a layout to the about page that we created before. 


Create and Apply a Layout to Astro Pages

Astro uses file-based routing to generate routes within the project that you are working on. That means every folder and file you create under `/pages` will result in a route that reflects that file.  

Here you can see how different pages will map to different routes in astro:
```
./src/pages/index.astro  -> /
./src/pages/about.astro  -> /about
./src/pages/index.astro  -> /blog
./src/pages/hello.astro  -> /blog/hello
```

Create Static Pages in Astro Using File Based Routing

Now it's time to actually render the contents of our blog. To do this we need to leverage Astro's dynamic pages API because the pages that are rendered depend on what we add to our blog folder.

To do this we'll create a `[slug].astro` file that will handle rendering the pages. Because all pages are statically generated at build time we will tell Astro to build our pages exporting a `getStaticPaths` function from this file. 

We will utilize `getCollection` again to grab all the posts in our blog.

In `getStaticPaths` we need to return an object that has two properties: 

- params
- props

Params will be the dynamic portion of the page, in this case the slug of the post. Props will be the data that is passed to that dynamic page, we'll use post.

Each post comes with a `render` function so we can destructure the `Content` from the post that we will use in the template of the page.

## Challenge

You learned how to render content onto a dynamic blog post page but it doesn't look very good. This is because there are no styles applied to your content. Your challenge is to style the blog post content to look like the screen shot down below.

You can do this by utilizing Tailwinds typography package and use it's prose class or apply your styles with your own CSS. One thing to note is that `Content` lives in a different scope than the page so any styles you add here will need to be marked as global for Astro to pick them up.

![blog page](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183730/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page.png)

Additionally, blogs typically have an index page of all the blog posts they contain. Add a proper blog index page and utilize the code that we wrote on the home page in the index page. This would be a great time to extract that code into an Astro component to reuse.

![blog index](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698183729/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/07-render-blog-page-blog-index.png)

Render an Astro Blog Post Page with getStaticPaths


**Note:** I'm setting the page's type by directly assigning it
(`const page: Page<CollectionEntry<'blog'>> = ...`)

That won't work in recent versions of Astro because if we don't define `type Props`, Astro.props will be a record of type `Record<string, unknown>` and we can't cast an `unknown` to the `Page` type.

To fix this, we need to define `type Props` and set the page type in it, instead of casting the `page` constant to it. [See the code here.](https://github.com/nikolovlazar/egghead-personal-blog-astro/blob/lesson-10/src/pages/blog/%5Bpage%5D.astro#L22-L24)

---

When you have tens or hundreds of posts in your blog it can be a good user experience to paginate posts so they can be browsed.

Astro gives us an API to implement pagination easily. To do this we will convert our index page to a dynamic page by renaming to `[page].astro`. 

Now that you have a dynamic page, you'll need to export a `getStaticPaths` function that will define what pages are rendered. When we utilize the `GetStaticPaths` type on this function you'll notice that Astro gives us a `paginate` function we can use. 

We'll return a call to `paginate` from `getStaticPaths` and set the blog posts and page size we want to paginate on. This will return a page to us from `Astro.props.page` that will have all the necessary controls for building pagination like next and previous urls as well as the current pages data. 

To see all the data available to you on the page you can pull in the `Page` generic type from Astro and pass in `Page<CollectionEntry<'blog'>>`. From here we'll use this data to render the proper amount posts with conditionally rendered pagination control down below.

Implement Pagination in a Dynamic Astro Index Page with getStaticPaths and paginate

There are two ways that Astro gives us to serve static content to our users. The first unoptimized way is to just put your assets in the public folder of your application. This will make your assets publicly available. If you had `asset.png` stored in your public folder you would access in your code with `/asset.png`.

When you use the public folder, however, you don't get any optimization and Astro will just serve what is in there no matter what. If you'd like to optimize your assets Astro gives you an `assets` folder that you can use inside `src`. Moving your asset there in tandem with the `Image` component from `astro:assets` will give you an optimized webp version of the image you want to load. You'll also be able to control the width/height and quality that is loaded.

## Challenge

It's time for you to test what you know so far. You've learned about Astro pages, components, styling, and static images. 

Use your knowledge to modify the home and about pages to look like the screenshots below. 

If you get stuck you can check the code linked on the lesson page. 

![astro home page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-home.png)

![astro about page screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698182477/course-resources/build-a-full-stack-blog-with-astro/lesson-challenges/05-render-images-about.png)

Render Images to Pages with Astros Static Serving and Static Assets

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results