Learn Astro, Clojurescript and Gulp

 "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

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

Installing and Writing a Default Task with Gulp

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

Bundling Your JavaScript Files with Gulp

ClojureScript is a compiler for Clojure that targets JavaScript. It emits JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

clojurescript

In this lesson I show you how to get and manipulate command-line arguments in Clojure/ClojureScript by writing a small program that greets you by name. I also show how comments are delimited, how to get a value out of a sequence, how to bind a symbol to a value, and how to define a function.

Handle command-line arguments in ClojureScript


Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

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

It's time to get your hands dirty by creating your first Astro component. 

This component will be relatively simple but very handy. You are creating a `Link` component that will take an `href` as well as an `isExternal` boolean telling the component whether or not it's an external link.

All components in Astro follow a similar pattern, you'll create a `Props` interface of all the props you want to pass the component. This will tell Astro what props your component expects and throw errors if it doesn't get those. Then you'll actually destructor those props from `Astro.props`

Finally we'll create some html and conditionally apply `nofollow noopener norefferer external` rel properties. 

You'll also see how `<slot />`s work to accept children that are passed to the component. 

Create an Astro Component for Links

Every site that is serious about increasing traffic needs to consider how it is handling SEO.

In Astro, you can set your meta tags manually but Astro gives you a easy-to-use `<SEO />` component that will set meta tags for you as you give it properties.

In this lesson we'll add the `astro-seo` package and set titles and descriptions on our different landing pages as well as set a default if we forget to do that.

Implement SEO in an Astro Website with astro-seo

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