---
hidden: true
title: Kitchen Sink Example
slug: kitchen-sink-example
description: "All blog capabilities in one place"
date: 2025-02-18
tags:
  - AwesomeTag
---

import H2 from "@components/H2.astro";
import Rating from "@components/Rating.astro";
import Message from "@components/Message.astro";
import YouTube from "@components/YouTube.astro";
import Note from "@components/Note.astro";
import Image from "@components/Image.astro";
import ImageZoom from "@components/ImageZoom.astro";

# Heading 1

Ea occaecat aliquip duis. Aliquip duis minim ut, sed veniam est reprehenderit.

<H2>Heading 2</H2>

Ut sed veniam est reprehenderit. Veniam est reprehenderit sint deserunt tempor consectetur.

<Rating count={4} />

Reprehenderit sint, deserunt tempor consectetur. Tempor consectetur incididunt anim. Incididunt anim deserunt, ullamco.

![Car](https://images.fastcompany.com/image/upload/f_webp,q_auto,c_fit/wp-cms-2/2024/07/p-1-91150764-google-waymo-one-self-driving-cars-san-francisco.jpg)

or with Image component

<Image
  src="https://images.fastcompany.com/image/upload/f_webp,q_auto,c_fit/wp-cms-2/2024/07/p-1-91150764-google-waymo-one-self-driving-cars-san-francisco.jpg"
  alt="Car"
  width={500}
  height={500}
/>

and ImageZoom component

<ImageZoom
  src="https://images.fastcompany.com/image/upload/f_webp,q_auto,c_fit/wp-cms-2/2024/07/p-1-91150764-google-waymo-one-self-driving-cars-san-francisco.jpg"
  alt="Car"
  width={500}
  height={500}
/>

In this process of learning i builded stuff🔥, which helped me to understand the things better way. Being **0.1% better every day** – over a year, that adds up to a **36.5% improvement**

> Consistency is key. Show up every day, and amazing things will happen🌞

Sit, ad ad nostrud est non est laborum. Nostrud est non, est laborum veniam ipsum. Est laborum veniam ipsum ullamco deserunt minim exercitation. Veniam, ipsum ullamco deserunt.

```sh title="terminal"
npx drizzle-kit push
```

Deserunt minim exercitation quis sed ex. Exercitation quis sed ex, velit. Ex velit aliqua quis ea. Aliqua quis ea, dolor voluptate sit dolore sit. Dolor voluptate sit, dolore. Dolore sit ullamco reprehenderit ut.

- Form auto-submission on-press of <kbd>Enter</kbd> key
- Accessing all actionable-items(example: Buttons, Links) with tab key

Ad ad nostrud est. Nostrud est non, est laborum veniam ipsum. Est laborum veniam ipsum ullamco deserunt minim exercitation. Veniam, ipsum ullamco deserunt. Deserunt minim exercitation quis sed ex. Exercitation quis sed ex, velit. Ex velit aliqua quis ea.

## Message format

<Message>
  Hi everyone, you might faced this issue while working with Javascript.
</Message>

<Message character="bender" direction="right">
  Most relatable! I faced this issue many times, how can we handle this?
</Message>

<Message>
- First of all, Javascript is not strongly typed language, so it get tricky to
  handle stuff like this. But, you can use **optional chaining** operator `?.` to
  handle this scenarios
- Let's take a example where you need to access value from API response

```javascript
const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await response.json();

// If the data is undefined or null, we will get undefined as output
console.log("title: ", data?.title); // title: undefined
```

</Message>

<Message character="bender" direction="right">
  Nice👌
</Message>

Ad nostrud est non est laborum, veniam. Non est laborum veniam ipsum ullamco deserunt. Laborum veniam, ipsum ullamco deserunt minim exercitation. Ullamco deserunt minim exercitation quis sed ex. Minim exercitation quis sed. Quis sed, ex velit aliqua quis.

## Youtube example

<YouTube id="P3C0iO1yqhk" />

## Note

<Note>This is a note</Note>