From 59927f615a9e5111008dbdcd0cc3f09c22f10a64 Mon Sep 17 00:00:00 2001 From: Leonardo Pinho Date: Sun, 8 Dec 2024 09:18:13 -0300 Subject: [PATCH] chore: update post --- content/code-blocks.mdx | 107 ---------------- content/github-markdown.mdx | 193 ----------------------------- content/prop-drilling.mdx | 49 -------- content/react-debug-magic.mdx | 76 ------------ content/react-hooks.mdx | 46 ------- content/react-lifecycle-cats.mdx | 46 ------- content/react-state-management.mdx | 53 -------- content/summon-component.mdx | 45 ------- 8 files changed, 615 deletions(-) delete mode 100644 content/code-blocks.mdx delete mode 100644 content/github-markdown.mdx delete mode 100644 content/prop-drilling.mdx delete mode 100644 content/react-debug-magic.mdx delete mode 100644 content/react-hooks.mdx delete mode 100644 content/react-lifecycle-cats.mdx delete mode 100644 content/react-state-management.mdx delete mode 100644 content/summon-component.mdx diff --git a/content/code-blocks.mdx b/content/code-blocks.mdx deleted file mode 100644 index e496672..0000000 --- a/content/code-blocks.mdx +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Lets see what we can do with rehype pretty code -description: Syntax highlighting, line numbers, line highlights, word highlights -date: 2024-03-04 -tags: ["code", "rehype pretty", "mdx", "kubernetes"] -published: true ---- - -[`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) is a Rehype plugin powered by the -[`shiki`](https://github.com/shikijs/shiki) syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting. - -## Editor-Grade Highlighting - - - Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and - the popularity of its themes ecosystem — use any VS Code theme you want! - - -## Line Numbers and Line Highlighting - -Draw attention to a particular line of code. - -```js {4} showLineNumbers -import { useFloating } from "@floating-ui/react"; - -function MyComponent() { - const { refs, floatingStyles } = useFloating(); - - return ( - <> -
-
- - ); -} -``` - -## Word Highlighting - -Draw attention to a particular word or series of characters. - -```js /floatingStyles/ -import { useFloating } from "@floating-ui/react"; - -function MyComponent() { - const { refs, floatingStyles } = useFloating(); - - return ( - <> -
-
- - ); -} -``` - -## ANSI Highlighting - -```ansi - vite v5.0.0 dev server running at: - - > Local: http://localhost:3000/ - > Network: use `--host` to expose - - ready in 125ms. - -8:38:02 PM [vite] hmr update /src/App.jsx -``` - -Inline ANSI: `> Local: http://localhost:3000/{:ansi}` - ---- - -### Kitchen Sink Meta Strings - -```js showLineNumbers {2-4} title="isEven.js" /console/ caption="Im a caption" -function isEven(number) { - if (number === 1) { - return false; - } else if (number === 2) { - return true; - } else if (number === 3) { - return false; - } else if (number === 4) { - return true; - } else if (number === 5) { - return false; - } else if (number === 6) { - return true; - } else if (number === 7) { - return false; - } else if (number === 8) { - return true; - } else if (number === 9) { - return false; - } else if (number === 10) { - return true; - } else { - return "Number is not between 1 and 10."; - } -} - -// Example usage: -console.log(isEven(3)); // Should return false -console.log(isEven(4)); // Should return true -console.log(isEven(11)); // Should return "Number is not between 1 and 10." -``` diff --git a/content/github-markdown.mdx b/content/github-markdown.mdx deleted file mode 100644 index 882cfd0..0000000 --- a/content/github-markdown.mdx +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Github Flavoured Markdown CheatSheet -description: A markdown cheat sheet for GFM -date: 2024-03-03 -published: true ---- - -# Introduction - -The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/ - -# What is Markdown? - -Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`. - -# Syntax guide - -Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files. - -## Headers - -```mdx -# This is a h1 tag - -## This is a h2 tag - -#### This is a h4 tag -``` - -# This is a h1 tag - -## This is a h2 tag - -#### This is a h4 tag - -## Emphasis - -```mdx -_This text will be italic_ - -**This text will be bold** - -_You **can** combine them_ -``` - -_This text will be italic_ - -**This text will be bold** - -_You **can** combine them_ - -## Lists - -### Unordered - -```mdx -- Item 1 -- Item 2 - - Item 2a - - Item 2b -``` - -- Item 1 -- Item 2 - - Item 2a - - Item 2b - -### Ordered - -```mdx -1. Item 1 -1. Item 2 -1. Item 3 - 1. Item 3a - 1. Item 3b -``` - -1. Item 1 -1. Item 2 -1. Item 3 - 1. Item 3a - 1. Item 3b - -## Images - -```mdx -![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) -Format: ![Alt Text](url) -``` - -![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) - -## Links - -```mdx -http://github.com - automatic! -[GitHub](http://github.com) -``` - -http://github.com - automatic! -[GitHub](http://github.com) - -## Blockquotes - -```mdx -As Kanye West said: - -> We're living the future so -> the present is our past. -``` - -As Kanye West said: - -> We're living the future so -> the present is our past. - -## Inline code - -```mdx -I think you should use an -`` element here instead. -``` - -I think you should use an -`` element here instead. - -## Syntax highlighting - -Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/): - -````mdx -```js:fancyAlert.js -function fancyAlert(arg) { - if (arg) { - $.facebox({ div: '#foo' }) - } -} -``` -```` - -And here's how it looks - nicely colored with styled code titles! - -```jsx -function fancyAlert(arg) { - if (arg) { - $.facebox({ div: "#foo" }); - } -} -``` - -## Footnotes - -```mdx -Here is a simple footnote[^1]. With some additional text after it. - -[^1]: My reference. -``` - -Here is a simple footnote[^1]. With some additional text after it. - -[^1]: My reference. - -## Task Lists - -```mdx -- [x] list syntax required (any unordered or ordered list supported) -- [x] this is a complete item -- [ ] this is an incomplete item -``` - -- [x] list syntax required (any unordered or ordered list supported) -- [x] this is a complete item -- [ ] this is an incomplete item - -## Tables - -You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`: - -```mdx -| First Header | Second Header | -| --------------------------- | ---------------------------- | -| Content from cell 1 | Content from cell 2 | -| Content in the first column | Content in the second column | -``` - -| First Header | Second Header | -| --------------------------- | ---------------------------- | -| Content from cell 1 | Content from cell 2 | -| Content in the first column | Content in the second column | - -## Strikethrough - -Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~. diff --git a/content/prop-drilling.mdx b/content/prop-drilling.mdx deleted file mode 100644 index bd481de..0000000 --- a/content/prop-drilling.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: "Prop Drilling: The Horror Movie - A Tale of React Components" -description: Step into a spine-chilling narrative where React components face the dread of prop drilling. Discover how using Context API or Redux can save your components from the depths of despair in this humorous take on a common React challenge. -date: 2024-02-28 -tags: ["code", "react", "props"] -published: true ---- - -# Prop Drilling: The Horror Movie testing - -In the shadowy depths of a complex React application, a horror story unfolds. Components, innocent and unsuspecting, find themselves ensnared in a terrifying ordeal known as prop drilling. This tale of suspense and survival will take you through the darkest corridors of React development. - -## The Curse of Prop Drilling - -Our story begins in a seemingly ordinary app, where a deep nesting of components lives in harmony. But beneath the surface, a curse lurks: the curse of prop drilling. Props, those precious pieces of data, must traverse through an endless labyrinth of components, each more terrifying than the last. - -```jsx -const Grandparent = ({ terror }) => ; -const Parent = ({ terror }) => ; -const Child = ({ terror }) =>
{`The terror has arrived: ${terror}`}
; -``` - -## The Scream in the Console - -As the props descend deeper into the component tree, strange things begin to happen. Console logs echo like screams in the night, warning of missing or undefined props. The components, panicked and confused, pass the props down with trembling hands, hoping not to be the next to encounter an error. - -## The Heroes Emerge: Context API and Redux - -Just when all hope seems lost, heroes emerge from the shadows: the Context API and Redux. With their powers of global state management, they offer a beacon of light in the dark, illuminating a path to safety for the beleaguered props. - -```jsx -const TerrorContext = React.createContext(); -const TerrorProvider = ({ children }) => { - const [terror, setTerror] = useState("everywhere"); - return ( - {children} - ); -}; -``` - -## The Final Showdown - -Armed with Context and Redux, the components band together to confront the curse of prop drilling. With a mighty refactor, they implement a new architecture, freeing the props from their endless descent and bringing peace to the application once more. - -## Epilogue: Lessons from the Darkness - -As dawn breaks on our tale, the components emerge wiser and stronger. They've learned that with the right tools and patterns, even the most terrifying challenges in React development can be overcome. - -Remember, when faced with the horror of prop drilling, do not despair. The Context API and Redux are your allies in the dark, ready to bring light to your React applications. diff --git a/content/react-debug-magic.mdx b/content/react-debug-magic.mdx deleted file mode 100644 index a3113a8..0000000 --- a/content/react-debug-magic.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: "Debugging React with Wizardry and Magic: A Developer's Spellbook" -description: Enter the mystical world of debugging React applications with a touch of humor. Learn spells and incantations to banish bugs and optimize your code, all while navigating the enchanting forest of React development. -date: 2024-02-27 -tags: ["react", "test"] -published: true ---- - -# Debugging React with Wizardry and Magic - -In the mystical land of React, where components render and state changes abound, even the most skilled developers can encounter nefarious bugs. Fear not, for I have compiled a spellbook to assist you in banishing these foul creatures back to the depths from whence they came. - -## The Spell for Revealing Hidden Bugs - -Hidden bugs are testing like invisible sprites, causing mischief unseen. Use this spell to reveal them: - -Ingredients: - -- 1x careful reading of error messages -- 2x console.log -- A dash of breakpoint magic - -Chant: - -```jsx -console.log("Reveal thyself, bug!"); -``` - -With this spell, the hidden bug will have no choice but to show itself. Remember, the console is your wand; wield it wisely. - -## The Incantation for Smoothing State Changes - -State changes can be tricky, leading to unexpected behavior. Smooth them over with this incantation: - -Ingredients: - -- A pinch of prevState -- A tablespoon of useEffect -- A careful reading of the React docs - -Chant: - -```jsx -this.setState((prevState) => ({ - ...prevState, - newStateValue: "Magically updated!", -})); -``` - -This careful blend of prevState and useEffect ensures that your state changes are as smooth as a wizard's potion. - -## The Potion for Enhancing Performance - -To enhance the performance of your React app, brew this powerful potion: - -Ingredients: - -- 1 part useMemo -- 2 parts useCallback -- A sprig of PureComponent - -Brew: - -Mix these ingredients in your component's cauldron. Use `useMemo` and `useCallback` to prevent unnecessary re-renders, and `PureComponent` to ensure your components only update when truly needed. - -```jsx -const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); -``` - -With this potion, your app will fly faster than a witch on a broomstick during a full moon. - -## Conclusion: The Magic of React Development - -Debugging React apps requires a mix of logic, intuition, and a bit of magic. By applying these spells and potions, you can navigate the enchanted forest of React development with ease. Remember, the true magic lies not just in the spells themselves, but in understanding the principles that make them work. - -Happy debugging, and may your React journey be magical! diff --git a/content/react-hooks.mdx b/content/react-hooks.mdx deleted file mode 100644 index aba5831..0000000 --- a/content/react-hooks.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: "React Hooks: Fishing for Components in the React Sea" -description: Explore the amusing analogy of React Hooks as fishing tools designed to catch components in the vast sea of React development. Learn how to use useState, useEffect, and useContext to manage your catch effectively. -date: 2024-02-26 -published: true ---- - -# React Hooks: Fishing for Components - -In the vast sea of React, where components swim freely and side-effects lurk in the depths, a developer must become a skilled fisherman to catch their desired functionality. This guide will equip you with the React Hooks you need to catch components with precision and grace. - -## The Essential Fishing Gear - -Before we set sail, let's ensure we have all the necessary gear: - -- **useState:** The worm that tempts your components to the surface. -- **useEffect:** The lure that attracts side-effects and keeps them at bay. -- **useContext:** The net that gathers global states together, making it easier to share across your component sea. - -## Setting Sail: Your First Catch - -With our gear ready, it's time to set sail into the React sea. Here's how to make your first catch: - -1. **Bait your hook with useState:** Begin by choosing the right worm. `useState` allows you to add state to your functional components, making them more dynamic and responsive. - -```jsx -const [fish, setFish] = useState("🐟"); -``` - -2. **Attract with useEffect:** Now, use `useEffect` as your lure. This Hook lets you perform side effects in your components, such as fetching data or subscribing to services. It's like casting your line into the water and waiting for a bite. - -```jsx -useEffect(() => { - console.log(`You've caught ${fish}!`); -}, [fish]); -``` - -3. **Gather with useContext:** Finally, use `useContext` as your net. This Hook lets you share state across many components without prop drilling. It's like gathering all your catches in one net for a bountiful harvest. - -## The Catch of the Day - -Congratulations! You've made your first catch in the React sea. But remember, the sea is vast, and there are many more components and hooks to explore. Each project is a new fishing trip, with its challenges and rewards. - -Remember to release any components back into the sea if you don't need them. Keeping your application's waters clean and sustainable is key to a healthy React ecosystem. - -Happy fishing in the React sea! diff --git a/content/react-lifecycle-cats.mdx b/content/react-lifecycle-cats.mdx deleted file mode 100644 index fd1cd0a..0000000 --- a/content/react-lifecycle-cats.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: "The Lifecycle of a React Component, As Told by Cats" -description: A whimsical exploration of the React component lifecycle, with each stage humorously explained through the behavior of cats. Perfect for developers looking to understand lifecycle methods in a more relatable and entertaining way. -date: 2024-02-25 -published: true ---- - -# The Lifecycle of a React Component, Explained by Cats - -Every React component undergoes a series of events from birth to death, known as its lifecycle. Just as cats have their unique behaviors, each phase of a component's lifecycle can be likened to the life stages of our feline friends. - -## Mounting: The Curious Kitten - -The mounting phase is when our component is born into the DOM world. Imagine a kitten opening its eyes for the first time, exploring its surroundings with awe. This is your component, freshly rendered and ready to interact with the user. - -```jsx -componentDidMount() { - console.log('The component has mounted, much like a cat finding its favorite sunny spot.'); -} -``` - -## Updating: The Playful Cat - -As props and state change, our component updates. This is akin to a cat in its playful phase, chasing after laser pointers or pouncing on yarn. Every update re-renders the component, making it respond to user interactions and data changes dynamically. - -```jsx -componentDidUpdate(prevProps, prevState) { - console.log('The component has updated, chasing after new props and state like a cat after a laser dot.'); -} -``` - -## Unmounting: The Lazy Cat - -Finally, when the component is no longer needed and is removed from the DOM, it's like a cat losing interest in its toy and sauntering off for a nap. This phase cleans up any lingering effects or subscriptions the component may have. - -```jsx -componentWillUnmount() { - console.log('The component will unmount, much like a cat wandering off to find a quiet place to rest.'); -} -``` - -## Conclusion: Nine Lives of React Components - -Just as cats live their lives in phases, React components have their lifecycle. Understanding these phases helps you better manage your components, ensuring they perform efficiently and gracefully throughout their lifecycle. - -Remember, the key to mastering React is much like understanding cats: it requires patience, observation, and a bit of love for the craft. Happy coding, and may your components live as richly and interestingly as our feline overlords! diff --git a/content/react-state-management.mdx b/content/react-state-management.mdx deleted file mode 100644 index 3174e62..0000000 --- a/content/react-state-management.mdx +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: "React State Management: An Epic Tale of Love, Loss, and Redux" -description: Embark on a dramatic journey through the realm of React state management. Witness the love triangles, betrayals, and heartaches that components face as they navigate the complex world of state management, with a special appearance by Redux. -date: 2024-02-24 -published: true ---- - -# React State Management: A Soap Opera - -In the grand drama of React development, the saga of state management is one filled with love, jealousy, and occasional heartbreak. This tale unfolds in the realm of an application, where components and states are intertwined in a complex dance of functionality and performance. - -## The Love Affair Between Components and State - -Our story begins with a young component, fresh and eager, falling deeply in love with a beautiful piece of state. This state, so pristine and full of potential, promises to bring the best out of our component, making it dynamic and interactive. - -```jsx -const [love, setLove] = useState("undeniable"); -``` - -## The Jealous Sibling: Prop Drilling test - -But as in any good soap opera, there's a twist. A sibling component, envious of the love affair, desires the state for itself. This leads to the dark practice of prop drilling, passing the beloved state down through layers of components, causing confusion and chaos. - -```jsx -const DramaComponent = ({ love }) => { - return
{`The love is now shared: ${love}`}
; -}; -``` - -## The Arrival of Redux: A New Hope - -Just when all seems lost, a new character enters the scene: Redux. With its powers of global state management, Redux promises to end the jealousy and confusion, allowing state to be shared harmoniously among all components. - -```jsx -const loveReducer = (state = "undeniable", action) => { - switch (action.type) { - case "SHARE_LOVE": - return action.love; - default: - return state; - } -}; -``` - -## The Dramatic Finale: State Reconciliation - -In the dramatic climax, the components learn to embrace Redux, sharing state seamlessly and ending the cycle of jealousy and prop drilling. Love and state are now distributed equally, bringing peace to the application realm. - -## Epilogue: The Moral of the Story - -As our tale concludes, we're reminded of the importance of proper state management in React applications. Whether through hooks, context, or Redux, managing state with care and precision ensures a harmonious relationship between components and their state. - -Remember, dear developers, in the world of React, love (and state) conquers all. Happy coding! diff --git a/content/summon-component.mdx b/content/summon-component.mdx deleted file mode 100644 index 92f7856..0000000 --- a/content/summon-component.mdx +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: "How to Summon a React Component: A Beginner's Guide" -description: Dive into the mystical world of React and learn the incantations needed to summon your very first React component with humor and ease. -date: 2024-02-23 -published: true ---- - -# How to Summon a React Component - -Ever wondered how to summon a React component from the netherworld? Fear not, for I shall guide you through this arcane ritual, combining ancient JavaScript lore with the modern magic of JSX. This guide is perfect for apprentices who wish to embark on the mystical journey of React development. - -## Ingredients - -- 1 cup of JavaScript knowledge, freshly brewed -- A pinch of JSX, for that extra flavor -- 3 tablespoons of patience, aged to perfection -- A sprinkle of creativity (optional but highly recommended) - -## Instructions - -First, prepare your development cauldron (also known as your code editor). Make sure it's clean and ready for brewing a new React component. - -Now, follow these steps carefully: - -1. **Mix the JavaScript knowledge thoroughly** until it's smooth and free of lumps. This forms the base of your component. - -2. **Fold in a pinch of JSX carefully.** This is what brings your component to life, allowing it to render in the browser realm. - -3. **Stir in the patience slowly.** Sometimes, the component might not render correctly on the first try. Patience is key here. - -4. **Add a sprinkle of creativity.** This is what makes your component truly unique. Whether it's a stylish button or a dynamic form, let your imagination run wild. - -5. Finally, chant the incantation below: - -```jsx -class MyComponent extends React.Component { - render() { - return
Hello, World!
; - } -} -``` - -With the incantation complete, your React component should now be summoned successfully. It will serve you faithfully, reacting to user inputs and rendering data dynamically. - -Congratulations, you've now summoned your first React component. Handle with care, or it might turn against you by throwing errors and warnings. Remember, with great power comes great responsibility. Happy coding!