DEV Community: Christian Smith Mantas

React-stories for Mere Mortals

Christian Smith Mantas — Tue, 30 Jan 2024 22:02:06 +0000

React Stories for Mere Mortals

Once upon a codebase, in the mystical land of React, there emerged a hero... or rather, a heroic component: react-stories.

In the realm of web development, where the epic sagas of user interfaces unfold, react-stories has carved its niche. It's not just another React component; it's a beacon of storytelling in an ocean of static content.

What's This Heroic Component About?

React-stories is the Gandalf of React components, guiding developers through the enchanted forest of creating story formats similar to what you'd see on Instagram or Facebook. You know, those little circles that your friends click on, and voila! A montage of their day in bite-sized pieces.

But why, you ask? Because stories are not just for social media giants anymore. They've become a staple in engaging users, showcasing products, and sharing content in an interactive, fleeting fashion. React-stories brings this power to your React applications, allowing you to wield the might of stories with the ease of a few lines of code.

The Magical Tech Stack

Crafted in the forges of modern technology, react-stories is built with a stack as mighty as the component itself:

React: The backbone, because, well, it's a React component.
TypeScript: For the spell of strong typing, keeping bugs at bay.
Storybook: The mystical tome where components are visualised in isolation.
Jest & React Testing Library: The guardians ensuring the component's robustness through trials and tests.

This ensemble doesn't just make react-stories a piece of code; it turns it into a reliable, scalable, and maintainable ally for developers.

How It Was Forged

Creating react-stories wasn't like a stroll in the Shire. It involved thoughtful design and meticulous crafting. The process went something like this:

Identify the Quest: Recognising the need for an easy-to-use story component in React.
Gather the Tools: Choosing TypeScript for type-safety, Storybook for component documentation, and Jest for testing.
The Forging: Writing the code, with each line tempered like a blacksmith crafting a sword.
Trials by Fire: Testing, because what good is a sword if it breaks at the first orc?
Enchantment: Adding features like customisable styles and controls, making it not just functional but also delightful to use.

In the Developer's Arsenal

So, how do mere mortals (aka developers) use this celestial gift? Simple:

Install the Component: With a chant (or command) as simple as npm install @casm101/react-stories.
Implement the Stories: Add the <ReactStories/>component in your app, feed it a list of stories, and behold the magic.
Customise Your Tales: Style it, control it, make it your own. React-stories is flexible enough to match your application's theme and design.

Here is a simple example:

import React from 'react';
import { StoryViewer } from '@casm101/react-stories';

const stories = [
  {
    url: 'path/to/image.jpg',
    type: 'image',
    duration: 5000
  },
  {
    url: 'path/to/video.mp4',
    type: 'video'
  }
  // ...more stories
];

const MyComponent = () => (
  <ReactStory stories={stories} />
);

export default MyComponent;

A Storyteller's Conclusion

React-stories is more than just a component; it's a storyteller's tool in the digital age. Whether you're a seasoned wizard in web development or a hobbit taking your first steps, react-storiesoffers an enchanting way to engage your audience.

Remember, in the end, every application is a story, and react-stories helps you tell it in an interactive, captivating way. So, go forth and let your React applications tell their tales!

Check out the react-stories component here.

Disclaimer! The images in the post are generated using AI technology (Dall·e 3) but the article is all mine!

HTTP Verbs for mere mortals

Christian Smith Mantas — Wed, 03 Jan 2024 01:41:46 +0000

Welcome, dear mortals, to the mystical and slightly quirky world of HTTP verbs! Yes, in the grand kingdom of web development, these aren't just any verbs. They are the superheroes of the internet, the silent sentinels standing guard over your web requests, making sure that what you ask for is what you get – quite literally!

So, buckle up as we embark on an epic journey to decipher these enigmatic yet essential elements of the web. From the valiant GET, always ready to fetch and retrieve, to the diligent POST, tirelessly delivering data to its destined server. We'll explore each of these verbs with a sprinkle of humor, a dash of simplicity, and, fear not, absolutely no convoluted technical jargon that sounds like it's been concocted in a mad scientist's lab.

Remember, while the world of HTTP might seem like an arcane script written in an alien language, it's really more like a secret club with a surprisingly straightforward handshake. So let's decode these handshakes, one step at a time!

Before we get started...

You need to know a couple of things before we embark on our quest, these calls into battle are known in tow fashions, they can be both safe and idempotent (don't get that last one wrong, it can still "get it up").

Safe calls are read-only, meaning you need not worry about destroying data when making your requests.

As for Idempotent, these calls "into action" mean you can make multiple requests of the same type, but do not expect to GET wink wink the same response.

What are HTTP verbs anyway?!

Put in mere mortal terms, GTTP verbs are our way in communicating with a server, giving it instructions on how to handle the information sent along with the URL, so let's get started.

The basics

Our basic calls compose an acronym of sorts (even though they don't line-up) called CRUD, which stands for: Create, Read, Update and Delete.

POST

POST is the bustling postman of the HTTP world. It doesn't just knock on doors to deliver mail, it pushes through the data you send and makes sure it gets to where it needs to be. Think of POST as your own personal digital courier, braving the wilds of the internet to get your precious packages (a.k.a data) safely to their destination. Just don't expect it to bring your morning tea (coffee is for chumps).

Get

GET is the grand old duke of HTTP verbs. It’s like your reliable old friend who goes to fetch your groceries. You ask, and GET delivers, no questions asked. Need some data? GET's on it. Want to retrieve that lost cat picture? GET's got your back. It's like a well-trained retriever, but for data - loyal, dependable, and always returning with what you throw, or request for that matter.

PATCH and PUT

In the realm of HTTP verbs, we encounter the curious case of PATCH and PUT – almost like twins separated at birth. They both seem to do the same trick – updating data – but with their own little quirks. It's like having two chefs in a kitchen, both capable of making a sandwich, but each with a distinct style.

Imagine PUT as the chef who insists on making your sandwich from scratch every time. Want to change the cheese in your sandwich? PUT says, “Sure, but let me rebuild that sandwich from the ground up!” It’s thorough but a bit overzealous. PUT ensures everything is exactly as you specify, but it’ll replace your whole sandwich to change a single ingredient.

Enter PATCH, the more laid-back sibling. It's like the chef who says, “Oh, just want to swap the cheese? No problem, I’ll just open up that sandwich and replace that one part.” PATCH is your go-to for a quick fix, a little tweak here and there. It's the efficient editor, updating only what needs to be changed without bothering the rest of the data sandwich.

In the end, whether you choose PATCH or PUT, depends on whether you need a complete makeover or just a quick touch-up. Just remember, in the world of HTTP verbs, it's always good to have options – even if it feels like choosing between two flavours of the same ice cream!

Delete

DELETE, the solemn executioner of the HTTP verbs, wields its power with a quiet dignity. When it's time to say goodbye to that piece of data, DELETE steps in, gives a respectful nod, and makes it vanish into the digital void. It's not cruel, just necessary. Like a gardener pruning dead branches, DELETE keeps your digital garden flourishing by removing what no longer serves a purpose.

Diving deeper into the occult verbs

Absolutely, here's a brief introduction for the lesser-known HTTP verbs:

Diving Into the Hidden Gems: HEAD, CONNECT, OPTIONS, and TRACE

Welcome to the less-trodden paths of the HTTP verb forest, where the lesser-known yet equally intriguing verbs like HEAD, CONNECT, OPTIONS, and TRACE reside. These are the unsung heroes of the HTTP world, often overshadowed by their more famous counterparts but holding their unique charm and utility.

Head

HEAD is the stealthy ninja of HTTP verbs. It sneaks up to a server, takes a quick peek at what’s there, and reports back without actually grabbing anything. It’s like checking if the milk in the fridge is fresh without taking the carton out. HEAD asks the question, "What's there?" but stops short of saying, "I’ll take it." It’s perfect for those who love window shopping on the web.

Connect

CONNECT is the great unifier, the builder of bridges in the HTTP world. Imagine it as the social butterfly at a party, introducing guests to each other. In technical terms, it establishes a tunnel between the client and the server, making sure that everyone can chat securely through a proxy. CONNECT is your go-to when you need to whisper secrets over the web.

Trace

TRACE plays the role of the web detective. It’s like sending out a digital echo into the abyss and listening for the echoes. TRACE retraces the steps of a web request to its origin, helping you understand the path it took. It’s the verb you use when you want to shout into the canyon and hear your own voice come back, revealing the twists and turns of the internet’s pathways.

Options

And last but not least my personal favourite, OPTIONS is the informative tour guide of HTTP verbs. It’s like walking up to an information kiosk and asking, "What can I do here?" OPTIONS gladly tells you all the actions you can perform at a particular URL, handing you a menu of web methods. It's essential for those moments when you're pondering, "What are my options?".

Conclusion

And there you have it – a whirlwind tour through the vibrant landscape of HTTP verbs, from the famous to the unsung heroes. We've laughed with GET, hustled with POST, touched up with PUT, and even remixed with PATCH. Not to forget our brief yet insightful encounters with the likes of HEAD, CONNECT, OPTIONS, and TRACE.

As we conclude this journey, it's clear that each HTTP verb, whether a headliner or a hidden gem, plays a crucial role in the intricate ballet of web communication. They're more than just commands; they're the gears that keep the vast engine of the internet running smoothly.