Optimizing Next.js Build Performance: Strategies for Faster Web Apps

How to Build a Responsive Image Slider with Html, CSS and JavaScript: Step-by-Step Guide

How to Build a Random Color Flipper with Vallina Javascript

How to Build an Accordion Menu 3 Simple Ways

After Hacktoberfest 2023: What's Next?

Understanding the Open Source Community: A Guide For The Newcomers

Hacktoberfest Etiquette and Best Practices: A Guide for First-time Contributors

Making Your First Open-source Contribution: A Beginner's Guide

Finding Your First Hacktoberfest Project: A Step-by-Step Guide

Getting Ready for Hacktoberfest: Preparing for Your Open Source Journey

Best Practices for Securing Your React Application

Introduction to Hacktoberfest: A Celebration of Open source

Embarking on Your Open Source Adventure: A Beginner's Guide to Hacktoberfest 2023

How to Fork a Repo on GitHub using your Mobile Device

What is a CAPTCHA And How To Bypass CAPTCHAs

Using Captcha Solvers to Improve Web Accessibility & Work Productivity

Guide to CSS logical properties

How to analyze Next.js app bundles

Build customized data tables with PrimeReact

How to Debug React Code: Tips and Tricks for Developers

Why Choose Next.js for Your Next Web Development Project in 2023

How to Create React Search Component Using React Hooks

Creating smoother CSS transitions with Animate CSS Grid

When and how to use CSS will-change

Top Features in Next.js 13

How to Build a Real-time Chat App with React and Firebase

Deep dive into the CSS :where() and :is() functions

How CSS Methodologies can enhance Code Efficiency

The Dangers of Using !Important in CSS: Why It Should Be Avoided

Understanding Technical Debt in Software Development

Understanding Vue.js touch events for Android and iOS

My Journey Through 2022: From Surviving to Thriving

Creating responsive images with image-set

Improving Next.js app performance with BlurHash

Building a draggable slider in React

Using the v-model in Vue 3 to build complex forms

Build a React theme switcher app with styled-components

Open source with SheCodeAfrica at Moja Global ContributhonbySCA

How I learned NextJs in 2 days

How to create your own custom Code Snippets right in your Code Editor

Tech Roadmap: Everything you need to help you choose and learn a career in Tech

Why my React App Failed To Compile

21 no-code tech jobs: You don't need to write code to become a Tech Sis/Bro.

all vs root vs html vs body selectors

Using CSS Variables like a Pro

Resources that helped me on my Frontend Development Journey

How to fork a repo in GitHub using Your Mobile Device

### These are my headings

# This is a h1 Heading

## This is a h2 Heading

### This is a h3 Heading

#### This is a h4 Heading

##### This is a h5 Heading

<hr />

### These are my paragraphs in different styles:

This is a paragraph.

**This is a bold sentence.**

_This is an italic sentence._

~~This is a strikethrough sentence.~~

This is a <sparklyText>sparklyText</sparklyText> element.

Here is an `inline code`.

<hr />

### This is link:

[I am a link](https://example.com)

<hr />

### This is a blockquote:

> I am a blockquote

<hr />

### This is a table:

| Name  | Age |
| ----- | --- |
| John  | 20  |
| Peter | 30  |

<hr />

### This is an ordered list:

1. Item 1
2. Item 2
3. Item 3

<hr />

### This is an unordered list:

- Item 1
- Item 2
- Item 3

<hr />

### These are some nested list:

1. Item 1
   - Item 1
   - Item 2
2. Item 2
   1. Item 1
   2. Item 2

- Item 1
  - Item 1
  - Item 2
- Item 2
  1.  Item 1
  2.  Item 2

<hr />

### This is a summary:

<details>
  <summary>Click me</summary>
  <p>Here is the details</p>
</details>

<hr />

### These are info cards:

<infoCard title="Critical info/warnings" color="red">
  Use red color along with an exclamation mark icon (❗❗) to emphasize critical
  information or warnings. This combination signals urgency and draws immediate
  attention to important cautions.
</infoCard>
<infoCard title="Less critical info/warnings" color="yellow">
  Apply yellow color and pair it with a warning icon (⚠️) to highlight less
  critical warnings or a light bulb icon (💡)to bring attention to insightful
  ideas and suggestions.
</infoCard>
<infoCard title="Positive or successful outcomes" color="green">
  Utilize green color in conjunction with a checkmark icon (✅) to highlight
  positive or successful outcomes, achievements, or recommended practices.
</infoCard>
<infoCard title="Tips, hints, ideas" color="blue">
  Opt for blue color and complement it with an information circle icon (🛈) to
  emphasize tips, hints, or important notes that provide additional insights or
  guidance.
</infoCard>
<infoCard title="Announcement, general info" color="grey">
  When you want to make information stand out without indicating a specific
  level of importance, use a neutral color with an exclamation mark icon (📣).
</infoCard>

<hr />

### This is an image:

![alt text](..https://res.cloudinary.com/denkuysrh/image/upload/v1699794255/Cover%20Images/Articles/draft-cover-image_erf1ug.png)

<figcaption>The image caption</figcaption>

<hr />

### This is a youtube video:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/7CqJlxBYj-M"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

<figcaption>The video caption</figcaption>

<hr />

### This is my disclamer widget:

<disclaimer />

<hr />

### This is my Connect With Me widget:

<connectWithMe />

### This is my bye bye widget:

<byeBye />

<hr />

### This is my subscribe widget:

<subscribe />

<hr />

### Here are some code blocks:

```html
<div>
  <h1>Hello World!</h1>
  
</div>
```

```css
/* accordion card */
.accordion2-card {
  width: 280px;
  border: double goldenrod;
  background-color: white;
}
```

```jsx
import React from "react";

export default function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}
```

<hr />

### This is my sandbox:

<codePlayground
  template="react"
  files={{
    "/App.js": `
import React from 'react';
import './index.css';
\n\
export default function App() {
\n\
  const [count, setCount] = React.useState(0);
  console.warn("I am a warning!");
\n\
  return (
    <div>
    <h1>Hello World!</h1>
    {/* this is a comment */}
     <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
    </div>
  );
}
    `,
    "/index.css": `
h1 {
  color: tomato;
}
`,
  }}
/>

<hr />

### This is a codepen:

<p
  className="codepen"
  data-height="300"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-slug-hash="QWaWEoY"
  data-editable="true"
  data-user="timonwa"
  style={{
    height: "300px",
    boxSizing: "border-box",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    border: "2px solid",
    margin: "1em 0",
    padding: "1em",
  }}
>
  <span>
    See the Pen{" "}
    <a href="https://codepen.io/timonwa/pen/QWaWEoY">
      Build and Accordion with HTML and CSS: Example 1 [T's Notes]
    </a>{" "}
    by Timonwa (<a href="https://codepen.io/timonwa">@timonwa</a>) on{" "}
    <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

My Custom Components