DEV Community: Luis A.

The Almost-Gusto Chronicles: A Frontend Dev's Tale of Hopes, Code, and Plot Twists 🎢

Luis A. — Fri, 07 Feb 2025 14:51:08 +0000

Sup tech fam! Grab your favorite energy drink and settle in, because I'm about to spill all the tea about my wild ride interviewing at Gusto. You know Gusto - the folks making payroll sexy (is that even possible? Apparently yes!).

The LinkedIn DM That Started It All

Picture this: January 8th, 2025. There I was, mindlessly scrolling LinkedIn between debugging sessions when ping - a message slides into my DMs. Usually, I treat recruiter messages like I treat JavaScript errors - ignore them and hope they go away (I'm kidding... about the errors). But this one caught my eye. Gusto? The payroll unicorn? Okay, you have my attention.

The Take-Home Saga: A Sunday Well Spent

After acing the initial screening (read: successfully hiding my impostor syndrome), they hit me with the take-home assignment. On a SUNDAY. The audacity!

But like any good dev who's watched too many Marvel movies, I suited up for battle. The mission? Build a data table with filtering and pagination. Easy peasy, lemon squeezy... right?

// My magnum opus: A data table that would make Marie Kondo proud
const DataTable = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  // This caching function is definitely not copied from StackOverflow 
  // (Narrator: It absolutely was)
  const cacheResults = useMemo(() => {
    return {
      store: (key, data) => {
        // Magic happens here
        // And by magic, I mean basic localStorage operations
      }
    };
  }, []);

  return (
    <div className="please-hire-me-container">
      {/* Components that sparked joy */}
    </div>
  );
};

The Technical Deep Dive with Oz: When Reality Hits

First up was Oz, the code whisperer. We dove into my take-home project like it was a Christopher Nolan movie - layer by layer. There I was, trying to explain my caching function like I wrote it in my sleep (spoiler: I didn't write it at all), when Oz dropped the accessibility bomb. Did you know Chrome DevTools has built-in accessibility features? Mind. Blown. 🤯

The Plot Twist: Schedule Shuffle

Just when I thought I had my interview prep schedule sorted (like my npm dependencies - narrator: they were not), they pulled a fast one. "Hey, can you chat with our PE... like, tomorrow?" Sure, why not? It's not like I needed those extra days of prep or anything... nervous laughter

The PE Interview: When Keeping It Real Goes Right

Plot twist within a plot twist - the PE interview with Sadik turned out to be my jam! We vibed like React and JSX. Talked about team dynamics, remote work, and the future of frontend development. Pro tip: Sometimes the best prep is just being genuinely curious and not trying to sound like you swallowed a technical documentation.

The Design Round: The Great Head Nod

Then came Tommy and his silent sidekick for the design collaboration chat. Y'all, Tommy was nodding so much during our conversation, I thought he was at a rock concert. My design collaboration philosophy? "I trust designers to design, and they trust me to code." Simple as that. No ego, no drama, just vibes.

The Architecture Round: When the Difficulty Setting Suddenly Changes

Then came the moment. The big one. The architecture round with Matt. You know in video games when you're cruising through on normal mode, feeling pretty good about your skills, and suddenly the game throws you into a Dark Souls-style boss fight? Yeah, that was this interview.

// My loadout during the interview:
const battleLoadout = {
  start: "Equipped: Next.js Shield of Comfort +5",
  middle: "WARNING: Next.js Shield removed from inventory",
  end: "Searching for: Vanilla React Legendary Weapons..."
};

The mockups looked like early-game content at first. But then Matt started asking questions that made me realize I'd wandered into an end-game zone without my usual gear. State management, caching strategies, type systems, routing - all without my trusty Next.js armor set.

Each question felt like discovering a new challenging game mechanic. And unlike my usual gaming sessions, I couldn't just Google the walkthrough mid-battle!

The Final Call: Plot Twist Central

Around 5 PM, my recruiter called. After some small talk about his sick baby (which, btw, is the cutest way to soften a blow), he dropped the truth bomb: I was more L3 than L4. Talk about a birthday week surprise!

But here's the kicker - while an L3 at Gusto makes a sweet $180k, that L4 role came with an even sweeter $225k package.

Yet beyond the salary numbers, here's the thing - and this is important - making it this far in the interview process at a pre-IPO startup like Gusto? That's like making it to the bonus levels in a game you thought was out of your league. Sure, I didn't beat the final boss, but I proved I could hang in the advanced dungeons.

The Real Victory: Leveling Up IRL

Looking back, I realized something profound (and not just that I should grind more architecture XP). My character stats are actually way higher than I'd been giving myself credit for. Here I was, trading combo moves in discussions about complex frontend systems, joining raid parties with senior engineers, and getting "Great Success" feedback across multiple rounds.

This wasn't just an interview process - it was a progression check. A benchmark showing that FAANG-level companies aren't just some impossible achievement - they're the next unlockable content in my career. With some targeted skill tree investments in architecture and system design, that L4 position isn't just a legendary item - it's my next achievement to unlock.

The Road Ahead

Six months from now? Who knows - I might be writing a very different blog post. One where the architecture round is my speed-run category, not my challenge run. The gap between where I am and that L4 position isn't as wide as it might seem. It's not about completely respeccing my character - it's about optimizing my build and mastering a few new mechanics.

To all my fellow devs out there grinding through interviews and leveling challenges - keep farming that XP. Sometimes being "not quite there yet" just means you're in the middle of your character development arc.

Now, if you'll excuse me, I've got some system architecture skill trees to explore and some vanilla React side quests to complete. This L4 achievement isn't going to unlock itself! 💪

Styling Your React App: Exploring CSS-in-JS with Styled Components

Luis A. — Wed, 21 Jun 2023 13:17:12 +0000

Hey there, fellow React enthusiasts! 👋 In this post, we're going to dive into the wonderful world of styling your React app using CSS-in-JS with the awesome Styled Components library. Get ready to level up your styling game and add some pizzazz to your components! Let's get started. 💃

Introduction

Styling is like the fashion show for your React app.

It's where you make your components shine and strut their stuff. But forget about old-school CSS files or clunky class names. We're diving into the world of CSS-in-JS, where our styles live right alongside our components, in perfect harmony. And the star of the show today is none other than Styled Components! 🎉

Getting Started with Styled Components

To kick things off, let's get Styled Components up and running in your React project. It's as easy as snapping your fingers and summoning some magical styles.

Just install the library, import it into your component, and you're good to go! No need to fuss with external stylesheets or worrying about class name collisions. It's like having a personal stylist for your components. 😎

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: pink;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
`;

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to my stylish app!</h1>
      <StyledButton>Click me, fabulous darling!</StyledButton>
    </div>
  );
};

Styling Props and Dynamic Styles

Now, let's talk about adding some flair to our styles with the power of props. With Styled Components, you can easily create dynamic styles based on the props passed to your components. It's like giving your components a wardrobe change with every prop update. Talk about flexibility, right? 😍

const StyledButton = styled.button`
  background-color: ${props => (props.primary ? 'pink' : 'lightgray')};
  color: ${props => (props.primary ? '#fff' : 'black')};
  padding: 10px 20px;
  border-radius: 5px;
`;

// Usage
<StyledButton primary>Primary Button</StyledButton><StyledButton>Secondary Button</StyledButton>

Global Styles and Theming

When it comes to styling, sometimes you need to think big and go global. With Styled Components, you can define global styles that apply across your entire app. It's like setting the fashion trends for the entire runway! And if you want to add some thematic vibes to your app, you can easily create a theme and apply it everywhere. Who said your app can't be stylish from head to toe? 🌎

import { createGlobalStyle, ThemeProvider } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${props => props.theme.background};
    color: ${props => props.theme.text};
    font-family: 'Roboto', sans-serif;
  }
`;

const theme = {
  background: 'lightgray',
  text: 'black',
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {/* Your components go here */}
    </ThemeProvider>
  );
};

Styling Nested Components and Extending Styles

Sometimes, you need to style individual elements within a component, like a div or a span. With Styled Components, you can easily nest styles and target specific elements. It's like having a set of Russian nesting dolls, but for styling! Just wrap your component with another styled component and unleash your styling powers.

const StyledCard = styled.div`
  background-color: lightblue;
  padding: 20px;
  border-radius: 10px;

  h2 {
    color: navy;
  }

  p {
    font-size: 16px;
    margin-top: 10px;
  }
`;

const MyComponent = () => {
  return (
    <StyledCard>
      <h2>Styled Card Title</h2>
      <p>This is a fancy card with nested styles. So chic!</p>
    </StyledCard>
  );
};

And guess what? Styled Components even lets you extend existing styles to create new components. It's like giving your styling superpowers an upgrade! Just call upon the extend method and let the magic unfold.

const StyledButton = styled.button`
  background-color: pink;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
`;

const StyledPrimaryButton = styled(StyledButton)`
  background-color: hotpink;
`;

const MyComponent = () => {
  return (
    <div>
      <StyledButton>Normal Button</StyledButton>
      <StyledPrimaryButton>Primary Button</StyledPrimaryButton>
    </div>
  );
};

Conclusion

And there you have it, folks! We've taken a stylish journey into the realm of CSS-in-JS with Styled Components. We've unleashed the power of dynamic styles, explored global styles and theming, and even delved into the world of nested components and style extension. Now it's your turn to unleash your creativity and make your React app the belle of the ball. 💃 So go forth, my stylish friends, and let your components shine!

Remember, when it comes to styling, the only limit is your imagination. So grab your favorite text editor, put on some good music, and start crafting the most stylish app the world has ever seen. Happy styling! ✨

Stay fabulous,
Your friendly neighborhood React enthusiast

Boosting Performance with Code-Splitting in React.js

Luis A. — Thu, 04 May 2023 21:41:21 +0000

Ahoy, React developers! Feeling weighed down by your massive bundles? 🏋️‍♂️ Fret not, because today we'll talk about code-splitting in React.js. In this chill and laid-back post, I'll show you how to slim down those beefy bundles, and make your app run faster than Usain Bolt on Red Bull. 🏃‍♂️💨

I. Introduction

Code-splitting is like an all-you-can-eat buffet for your app. 🍽️ Instead of loading everything at once, it allows your app to load only what it needs when it needs it. Less time waiting for loading screens = happier users. So let's get the party started and learn how to split that code like a banana! 🍌

II. The Problem: Large Bundle Sizes

Picture this: you've built an awesome app, and you're excited to share it with the world. But there's a problem – users are complaining about slow loading times. That's because your app is like a sumo wrestler trying to sprint. 🏃‍♂️💨 Code-splitting helps your app lose that extra weight and run faster than ever.

III. React.js and Code-Splitting

Luckily, React.js has got our backs with built-in support for code-splitting. It's like having a personal trainer for your app! 🏋️‍♂️🚀 Two key players in this game are React.lazy() and React.Suspense. Let's break 'em down.

A. React.lazy()

React.lazy() is like a ninja, loading components only when they're needed. 🥷

Here's how it works:


import React, { lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Your other components */}
      <LazyComponent />
    </div>
  );
}

B. React.Suspense

Now, meet React.Suspense, the sidekick that catches your component when it falls. 💥

Check out this cool move:


import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

IV. Implementing Code-Splitting in React.js

Time to get our hands dirty and actually split that code! Follow these steps like a recipe for delicious, performance-boosting cake. 🍰

Identify components to split: Look for large, independent components or those loaded infrequently.
Use React.lazy to load components: Replace import with React.lazy() like we did in the example above.
Wrap components with React.Suspense: Don't forget to catch your components with React.Suspense and provide a fallback for loading states.

Best Practices and Recommendations

Split components at the route level, so only the needed route's components are loaded.
Preload components when you can predict user interaction.
Keep it simple, sailor! Don't go overboard with splitting. ⚓

V. Advanced Code-Splitting Techniques

Feeling adventurous? Try these advanced techniques to level up your code-splitting game. 🎮

A. Route-based code-splitting

React Router makes route-based splitting a breeze. Check it out:


import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
const Contact = lazy(() => import('./components/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

B. Preloading components

Want to impress your users with lightning-fast loading? ⚡ Preload those components like you're a psychic predicting their next move.


const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  useEffect(() => {
    setTimeout(() => {
      LazyComponent.preload();
    }, 1000);
  }, []);

  return (
    <div>
      {/* Your other components */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

C. Dynamic imports and code-splitting

Take code-splitting to the max by dynamically importing components based on user interactions. It's like having a magic wand! ✨


import React, { useState, lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  const [showComponent, setShowComponent] = useState(false);

  return (
    <div>
      <button onClick={() => setShowComponent(true)}>Show Component</button>
      {showComponent && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

VI. Analyzing Bundle Size and Performance

You've split your code, but how do you know it's working? 🤔 Use these tools to get some insight into your bundle size.

A. Webpack Bundle Analyzer

This bad boy will give you an interactive treemap visualization of your bundle. It's like a video game for your code!

B. Source Map Explorer

Another cool tool to help you understand your bundle size and dependencies. It's like having x-ray vision for your code! 🦸

VII. Conclusion

So there you have it, folks! With code-splitting, you can now turn your sluggish app into a lean, mean, loading machine. 🚀 So go on and split that code like it's nobody's business!

Got more questions? Need a new workout routine for your code? 🏋️‍♂️ Check out these resources for further learning and exploration:

Happy coding, and may the performance be with you! 🌟

Flexbox Magic: Design Patterns to Boost Your Projects 🚀

Luis A. — Wed, 03 May 2023 15:06:36 +0000

What's up, fellow web wizards? 🧙‍♂️ Ready to flex your flexbox skills and create some magical layouts? Today, we're gonna dive into three flexbox design patterns that'll make your layouts pop like a unicorn's bubblegum 🦄🍬. And the best part? Two of 'em don't even need media queries! So, let's get this flexbox party started! 🎉

Design Pattern 1: Even Stevens Columns

First up, let's talk about Even Columns. It's like sharing pizza slices 🍕 with your friends – everybody gets an equal piece, no matter how much they can eat! Even if the content within each column is different, they'll all be the same size. Ain't that cool?


.even-columns {
  display: flex;
}

.even-columns > * {
  flex-basis: 100%;
}

Just slap on display: flex to the container, and it's flexin' time. Then, use flex-basis on each direct child to make 'em all equal. Set it to 100%, and you're good to go! Easy peasy lemon squeezy. 🍋

Design Pattern 2: Grid-ish Goodness

Next up is Grid-ish! It's like a grid that went on a diet – it behaves like one, but without the carbs (aka CSS Grid Layout module)!


.gridish {
  display: flex;
  flex-wrap: wrap;
}

.gridish > * {
  flex-basis: calc((100% / 3) - 20px);
  margin: 10px;
}

First, we make it a flex container with display: flex and tell it to wrap using flex-wrap: wrap. Then, use flex-basis on each direct child to make 'em equally wide. We use calc() to do the math – just divide the width into three parts, and subtract 20px to account for the margin. Easy as pie! 🥧

Design Pattern 3: Holy Grail Layout, Batman!

Introducing the legendary Holy Grail Layout! It's got a header, footer, and three columns – a classic combo, just like Batman and Robin. 🦸‍♂️


.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-main {
  display: flex;
  flex: 1;
}

.holy-grail-sidebar {
  flex-basis: 200px;
}

.holy-grail-content {
  flex: 1;
  margin: 0 20px;
}

Start with display: flex on the container, and use flex-direction: column to stack 'em vertically. Add min-height: 100vh to fill the viewport.

Wrap the main content with .holy-grail-main, and make it flex too! Use flex: 1 to grab all the space it can.

Give the sidebar a fixed width with flex-basis, and use margin on the main content to create a neat gutter between columns. Voilà! 🎩

Bonus Tip: Space Jam 🏀

Wanna space elements evenly like a pro? Use justify-content: space-between on the container, and you'll be jammin' like Michael Jordan in Space Jam! 🏀🌌

And that's a wrap, folks! With these flexbox design patterns in your toolbox, you'll be slayin' layouts like a boss! 🕶️ So go ahead and flex your newfound powers, create some mesmerizing designs, and make your projects shine like the stars! ✨

Ready for more flexbox fun? Keep exploring, and may the flex be with you! 🌠

State Management in React.js: How useState Makes Your Life Easier 🎉

Luis A. — Tue, 02 May 2023 14:22:30 +0000

Hello, fellow React enthusiasts! Are you tired of dealing with the clunky state management in class components? Do you crave the simplicity and elegance of functional components? Well, buckle up, because today we're diving into the magical world of useState. You're about to find out how this little React Hook is going to change the way you manage state forever!

Prerequisites: A basic understanding of React, its components, and some familiarity with ES6 JavaScript.

1. React State Basics 🏁

Before we dive into useState, let's do a quick recap of state in React:

State: The internal data storage for your components. It's like the memory bank of your component's brain 🧠.
Class components: State management with this.state and this.setState(). A bit clunky and old-school, but it gets the job done.
Functional components: Before Hooks, these bad boys didn't have built-in state management. But who needs state when you're just a pure function, right? 😇

2. Introduction to React Hooks 🎣

Enter the world of Hooks! These game-changers were introduced in React 16.8 and brought state management to functional components. Now, you can have your cake and eat it too! 🍰

Hooks follow some rules, though:

Only call Hooks at the top level.
Only call Hooks from React functions.

Now that we've laid the groundwork, let's talk about our star of the show: useState.

3. Understanding the useState Hook 🧩

Using useState is like switching from a flip phone to a smartphone. It's sleek, modern, and oh-so-easy to use. Check out the syntax:


const [state, setState] = useState(initialState);

It's like magic! ✨ You get the current state and a function to update it, all in one line of code. Plus, useState works with objects and arrays, too!

4. Practical Examples of useState 🛠️

Enough theory, let's see useState in action!

4.1 Counter App 🧮


import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

Boom! We've got ourselves a fully functioning counter app. It's like we've unlocked a new level in the game of React state management. 🕹️

4.2 Todo List App 📝


import React, { useState } from 'react';

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

Behold the mighty Todo List App! With just a few lines of code, we've got a fully functional to-do list. It's like we're the masters of the React universe! 🌌

4.3 Form Input Handling 📋


import React, { useState } from 'react';

const FormApp = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormApp;

And just like that, we've got a form that handles input like a champ! 💪 Now we're really cookin' with useState!

5. Optimizing Performance with useState 🚀

Ready for some useState optimization tips? Here they come!

Lazy initialization: Pass a function to useState if your initial state is computationally expensive.
Functional updates: If your new state depends on the old state, pass a function to the state setter.
Use useCallback: If you need to memoize a callback function, combine useState with useCallback.

6. Combining useState with Other Hooks 🤝

Who said useState has to be a one-trick pony? Combine it with other hooks for even more React magic!

useEffect: Manage side effects, like fetching data or setting up subscriptions.
useContext: Share global state with the Context API.
Custom Hooks: Build your own reusable state logic. It's like creating a useState superpower! 💥

7. Tips and Best Practices for Using useState 🌟

Before we wrap up, here are some useState pro tips:

Keep state variables focused and minimal.
Stick to clear naming conventions for state variables and setters.
Avoid unnecessary re-renders.

Conclusion 🎉

And there you have it! We've explored the wonderful world of useState, and now you're ready to make your React apps more efficient and elegant than ever. Go forth and conquer with your newfound useState knowledge! 🦸‍♀️🦸‍♂️

Remember: with great power comes great responsibility. So, use your useState skills wisely, my friends. Happy coding! 🤓

How I use utility classes to write more efficient CSS

Luis A. — Mon, 01 May 2023 19:45:21 +0000

Yo, web peeps! 🕸️ Today, I'm gonna spill the beans on my secret sauce for CSS. I've been honing this wicked method for over a decade, and it's been a game-changer in building and maintaining dope websites and apps. So buckle up, buttercup, and let's dive in! 🚀

Styling elements #

I usually go for the big guns when I want all elements of a certain type to look the same. You know, like a one-size-fits-all kinda deal. So, for example, if I want all my input, select, and textarea elements to be full-width and have a little margin at the bottom, I just style 'em directly. Easy peasy, lemon squeezy! 🍋

input,
select,
textarea {
    display: block;
    width: 100%;
    margin: 0 0 0.5em;
}

Same thing goes for elements like tables. I want every table to rock the same look. 🎸

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    max-width: 100%;
    width: 100%;
}

I could use a class for these things, but why bother? It's just extra code in my HTML for the same result. Ain't nobody got time for that! 🙅‍♂️

Classes for components #

Now, where I do bring out the big guns of classes is when I have a component that doesn't have a native element and uses a div or span styled a specific way. Grid layouts are the perfect example. Check out the HTML for a grid with three equally sized columns in my sites. 📏

<div class="row">
    <div class="grid-third">1</div>
    <div class="grid-third">2</div>
    <div class="grid-third">3</div>
</div>

I'm all about clear, obvious class names that scream what they do. As I always tell my co-workers, readability is the real MVP, not brevity. 🏆

And here's what the CSS for that bad boy looks like:

.row {
    display: flex;
    margin-left: -1.4%;
    margin-right: -1.4%;
    justify-content: space-between;
}

.grid-third {
    margin-left: 1.4%;
    margin-right: 1.4%;
    width: 33.33333%;
}

I'm using flexbox here, but CSS Grid would also be a killer choice, depending on what you're trying to do. 💪

Modifier classes #

Sometimes, I have a typical presentation for a component, but every once in a blue moon, I need to modify it slightly. That's when I whip out modifier classes. 🌙

For example, maybe I want the columns in my .row to have a specific markup order, but be displayed visually in reverse in the UI. I'd create a .row-reverse class for that and use it with my .row class.

<div class="row row-reverse">
    <div class="grid-third">1</div>
    <div class="grid-third">2</div>
    <div class="grid-third">3</div>
</div>

In this case, the columns are displayed as 3 2 1 in the UI, but are written as 1 2 3 in the source code. Sneaky, huh?

.row-reverse {
    flex-direction: row-reverse;
}

I use modifier classes for elements, too, not just components. For example, I style my table elements directly, but I've got this rad .table-striped class I can use to add zebra stripes to them. 🦓

<table class="table-striped">
    <!-- ... -->
</table>

The CSS for it looks a little something like this:

/**
 * Adds zebra striping
 */
.table-striped tbody tr:nth-child(odd) {
    background-color: #e5e5e5;
}

Modifier classes are designed to work with specific elements or components and usually won't work if applied to other parts of the design. But hey, they've got their own charm, right? 🌟

Utility classes #

Utility classes are the unsung heroes of my CSS. I use them to nudge-and-tweak my designs in very general ways for a variety of elements or components. They're like the Swiss Army knives of web design! 🗡️

They typically do things like…

Modify margin or padding
Adjust font-size
Center and align things

For example, the .margin-bottom class adds or adjusts the bottom margin on an element.

<div class="row margin-bottom">
    <!-- ... -->
</div>

The CSS for it looks like this:

.margin-bottom {
    margin-bottom: 1em;
}

This could be used on a wide variety of elements and components, not just my grid layouts.

If I wanted to align my text to the right and display it in all-caps, I might do this:


<p class="text-right text-capitalize">Hello, world!</p>

And the utility classes used here look like this:

.text-capitalize {
    text-transform: capitalize;
}

.text-right {
    text-align: right;
}

I could create element or component styles to do the same thing, but these are little adjustments that I'd likely make across a wide range of stuff in my design. Utility classes help me keep my CSS lean and mean while maintaining design consistency. 💼

One last little trick! #

Using the right heading element is crucial for accessibility. If your last heading was an h2 and you're using a heading to show some content that's a subsection of it, you should use an h3.

<h2>Hip-Hop</h2>
<p>...</p>

<h3>Top 10 best rappers of all time</h3>
<p>...</p>

<h3>Bad rappers who are for some reason popular anyways</h3>
<p>...</p>

But sometimes, you want a heading that looks like a different heading level than it should be semantically. For example, I might want headings that look like h5 level headings, even though semantically they need to be h3.

Heading levels should never be used for style. They always convey semantic meaning.

I define heading classes alongside my element styles. Every heading level has a matching class.


h1,
.h1 {
    font-size: 1.5em;
    padding-top: 0.5em;
}

h2,
.h2 {
    font-size: 1.3125em;
    padding-top: 1em;
}

h3,
.h3 {
    font-size: 1.1875em;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-size: 1em;
}

h4,
.h4 {
    font-size: 0.8125em;
        text-transform: uppercase;
}

Thanks to classes having more specificity than elements, I can use them to modify the appearance of a heading element while keeping its semantic meaning intact. It's like having your cake and eating it too! 🍰


<h2>Hip-Hop</h2>
<p>...</p>

<h3 class="h5">Top 10 best rappers of all time</h3>
<p>...</p>

<h3 class="h5">Bad rappers who are for some reason popular anyways</h3>
<p>...</p>

What is this approach called? #

I don't have a cute name for how I write CSS, but I should probably come up with one! Any suggestions? Drop 'em in the comments below. I'll give you a virtual high-five if I pick yours! 🙌

And that's a wrap, folks! I hope my little CSS adventure has given you some food for thought and inspires you to try new things in your own projects. Keep it real, and happy coding! 🎉

JavaScript DOM: A Complete Guide for Web Developers

Luis A. — Thu, 06 Apr 2023 14:41:00 +0000

Introduction

Hey there, fellow web devs! If you're anything like me, you've had your fair share of DOM struggles. But fear not, I'm here to save the day with this ultimate guide to DOM manipulation in JavaScript. Let's dive into this magical world like we're Harry Potter and the DOM is our Hogwarts! 🧙‍♂️

I. Basics of the DOM

A. What's DOM and why should you care?

The DOM, or Document Object Model, is like the blueprint of your web page. It's the heart and soul (or the HTML and JavaScript) that lets you interact with the page elements. If the DOM were a character from Friends, it'd totally be Ross. Yeah, it can be annoying sometimes, but you can't have a webpage without it.

B. Structure of the DOM

The DOM is organized as a tree structure, with various types of nodes (elements, attributes, and text). It's like a family tree, but for web pages. So, let's meet the fam:

Elements: These are the HTML tags that make up the page. They're like the cool cousins you hang out with at family gatherings.
Attributes: Attributes are the properties of the elements. They're like the name-tags your aunt insists on wearing.
Text nodes: These are the actual content within the elements. They're like the embarrassing stories your family tells at every reunion.

II. Accessing and Manipulating DOM Elements

A. Selecting elements like a pro

Need to grab an element from the DOM? JavaScript has got your back with some rad methods to help you out:


// getElementById: The OG method for grabbing that one special element.
const myElement = document.getElementById("myId");

// getElementsByClassName: This method lets you hang out with all the cool kids.
const myClassElements = document.getElementsByClassName("myClass");

// getElementsByTagName: All the elements of a specific tag, united!
const myTagElements = document.getElementsByTagName("div");

// querySelector: The Swiss Army knife of element selection.
const firstElement = document.querySelector(".myClass");

// querySelectorAll: Because sometimes you just want to select 'em all.
const allElements = document.querySelectorAll(".myClass");

B. Modifying element content like a boss

Now that you've got your hands on some sweet elements, let's get down to business and start modifying them:


// innerHTML: Change the entire content of an element, like a content ninja.
myElement.innerHTML = "<h1>Hello World!</h1>";

// textContent: Just want to change the text? No problemo!
myElement.textContent = "Hello World!";

// outerHTML: If you want to go all-out and replace the entire element, this is your guy.
myElement.outerHTML = "<h1>Hello World!</h1>";

C. Attributes? We got this!


// setAttribute: Add or change an attribute like you're Picasso with a paintbrush.
myElement.setAttribute("data-superpower", "invisibility");

// removeAttribute: Get rid of attributes like you're Marie Kondo.
myElement.removeAttribute("data-superpower");

// getAttribute: Just want to see what's up with an attribute? We gotchu.
const superpower = myElement.getAttribute("data-superpower");

III. DOM Traversal

DOM traversal is like playing a game of "Where's Waldo?" but with web elements. You can navigate through the DOM by using the parentNode, childNodes, firstChild, lastChild, nextSibling, and previous sibling properties. So let's get our magnifying glass and start the search!


// parentNode: Meet the parent of your element. It's like a "meet the parents" movie, but less awkward.
const parent = myElement.parentNode;

// childNodes: Get all the kiddos of an element. It's like having a playdate!
const children = myElement.childNodes;

// firstChild and lastChild: Meet the firstborn and the youngest of the family.
const firstChild = myElement.firstChild;
const lastChild = myElement.lastChild;

// nextSibling and previousSibling: Say hello to the neighbors. They might even let you borrow some sugar.
const nextSib = myElement.nextSibling;
const prevSib = myElement.previousSibling;

IV. Creating, Adding, and Removing Elements

Think you can be the Frankenstein of the DOM? Well, grab your lab coat and let's create, add, and remove some elements!


// createElement and createTextNode: Unleash your inner mad scientist!
const newElement = document.createElement("div");
const newText = document.createTextNode("I'm alive!");

// appendChild and insertBefore: Add your creation to the DOM. Welcome to the family, little one!
parent.appendChild(newElement);
parent.insertBefore(newElement, nextSib);

// removeChild and replaceChild: Sometimes you just need to say goodbye or swap out elements like a game of musical chairs.
parent.removeChild(myElement);
parent.replaceChild(newElement, myElement);

V. DOM Events

If the DOM were a party, events would be the DJ! Let's crank up the volume and start listening to some events.


// addEventListener: RSVP to the event, and get ready to party!
myElement.addEventListener("click", function() {
  console.log("Clicked!");
});

// removeEventListener: Party's over? Time to head home.
myElement.removeEventListener("click", myFunction);

VI. Conclusion

And that's a wrap! We've explored the magical world of the DOM like we're DOMbledore and his army of web-dev wizards. Now go forth and conquer the DOM like the code-slinging web warrior you are! And if you ever feel lost in the DOM forest, just remember: this guide is your Marauder's Map. Mischief managed! 🧹

Mastering Higher-Order Components in React JS: A Comprehensive Guide 🚀

Luis A. — Sat, 01 Apr 2023 16:22:52 +0000

What's up, React developers? Ready to level up your React game and make your code more reusable, modular, and just plain cool? Then buckle up, because today we're diving into the wonderful world of Higher-Order Components (HOCs) in React JS. If you've been craving some code sorcery, you're in the right place!

Prerequisites: A basic understanding of React, its components, and some familiarity with ES6 JavaScript.

1. React Component Basics 🏁

Before we jump into HOCs, let's do a quick recap of React components. Remember, React is all about breaking our UI into smaller, reusable chunks called components. We have two types of components:

Functional components: Simple, stateless, and all about that function life.
Class components: A bit more complex, stateful, and rocking the class keyword.

And let's not forget our friends state and props, which help us manage data within and across our components.

2. Understanding Higher-Order Components (HOCs) 🧙‍♂️

Enough chit-chat, let's get down to business. Higher-Order Components (or HOCs, as cool kids call them) are basically functions that take a component and return a new, enhanced version of that component. It's like getting a superhero upgrade! 🦸‍♀️

HOCs offer some sweet benefits:

Code reuse: Because who wants to copy-paste code like it's 1999?
Separation of concerns: Keepin' it clean, focused, and modular.
Prop manipulation: Adding or modifying props like a boss.

And just in case you're wondering how HOCs stack up against other React patterns, they're kinda like cousins to Render Props and Hooks. They all get along, but they have their own unique superpowers.

3. Creating a Simple Higher-Order Component 🔧

Let's create our very own HOC, shall we? Picture this: We have a bunch of components that display text, but we want to give them all the same fancy style. Instead of repeating ourselves, we'll use a HOC to make our components fabulous in a snap. 💅

Here's the magic recipe:

const withFancyText = (WrappedComponent) => {
  return (props) => {
    const fancyStyle = { fontStyle: "italic", fontWeight: "bold" };
    return (
      <div style={fancyStyle}>
        <WrappedComponent {...props} />
      </div>
    );
  };
};

Let's break it down:

withFancyText is our HOC function. It takes a WrappedComponent as an argument.
We create a new functional component with some fancy styling.
We render the WrappedComponent inside our fancy div, passing along all the original props using the {...props} syntax. Voilà!

Now, we can use our HOC to enhance any text component:

const TextComponent = (props) => <p>{props.text}</p>;
const FancyTextComponent = withFancyText(TextComponent);

Boom! Our FancyTextComponent is now an italic, bold version of TextComponent. Talk about a glow-up! ✨

4. Common Use Cases for Higher-Order Components 🎯

You might be thinking, "That's cool, but what else can HOCs do for me?" Well, my friend, HOCs are like the Swiss Army knife of React components, with a tool for nearly every situation! The possibilities are virtually endless! 🇨🇭🔪

Here are some real-life scenarios where HOCs shine:

Authentication and Authorization: Control access to certain parts of your app based on user roles or permissions. HOCs can be your bouncer, keeping unwanted guests out of the VIP area. 🚧
Data fetching and state management: Centralize data-fetching logic and manage component state like a pro. HOCs are like your personal assistant, handling all the data-related chores for you. 📚
Error handling and logging: Keep your app running smoothly by catching and handling errors gracefully. HOCs are like your app's superhero sidekick, saving the day when things go wrong. 🦸‍♂️
Analytics and performance tracking: Monitor user interactions and app performance with ease. HOCs can be your app's private investigator, tracking down all the juicy details. 🕵️‍♀️
Theming and styling: Apply consistent theming or styling across your components without repeating yourself. HOCs are like your app's personal stylist, making sure everything is on fleek. 💃

5. Best Practices for Using Higher-Order Components 🏆

Ready to start using HOCs like a boss? Keep these best practices in mind:

Naming conventions: Use the with prefix to make your HOCs easily recognizable, like withAuth or withErrorHandler.
Maximizing HOC composability: HOCs can be combined to create even more powerful components. It's like building a React Voltron! 🤖
Avoiding prop name collisions: Be mindful of prop names when using multiple HOCs to avoid overwriting important data. Communication is key! 🗣️
Stateless HOCs and pure components: Keep your HOCs stateless and pure for maximum reusability and performance. Less baggage, more fun! 🎒
Ref forwarding: If you need access to the wrapped component's instance, use React's forwardRef to pass refs through your HOCs. No more broken chains! 🔗

6. Debugging Higher-Order Components 🐛

Even the best developers encounter bugs, but fear not! Here are some tips for debugging HOCs:

Identifying common issues and pitfalls: Keep an eye out for prop collisions, missing or incorrect prop types, and improper use of refs.
Using React Developer Tools: Inspect HOCs like a pro by using the React DevTools browser extension. It's like having x-ray vision for your components! 👓
Unit testing HOCs with Jest and Enzyme: Write tests to ensure your HOCs are working as expected. Trust but verify, my friend. 🧪

7. Integrating HOCs with Other React Patterns 🧩

HOCs can play nice with other React patterns too! Here's how:

Combining HOCs with Context API: Use HOCs to consume context values and pass them as props. It's like your HOCs are getting VIP access to all the cool data! 🎫
Utilizing HOCs alongside Render Props: Mix and match HOCs and Render Props to get the best of both worlds. It's like having a React toolbox full of awesome gadgets. 🔧
Integrating HOCs with React Hooks: While Hooks are great, sometimes you still need HOCs. Combine them to build a truly flexible and powerful app. It's like having the ultimate React super team! 🦸‍♀️🦸‍

Conclusion 🎉

Well, that's a wrap, folks! We've covered the basics of Higher-Order Components, created our very own HOC, and explored some common use cases and best practices. Now, it's time for you to go forth and enhance your React components like never before! Remember, with great power comes great responsibility, so use your newfound HOC skills wisely. 😉

To infinity and beyond! 🚀

References and Further Reading 📚

Ready to dive even deeper into HOCs? Here's a list of resources to get you started:

Follow Me on Twitter 🐦

If you enjoyed this guide and want more tips, tricks, and insights on React, web development, or just some good ol' geeky humor, be sure to follow me on Twitter: @acidsupreme. Let's connect, share ideas, and level up our coding game together! 🎉👩‍💻👨‍💻

State Management in React.js: How useState Makes Your Life Easier

Luis A. — Tue, 28 Mar 2023 21:05:33 +0000

Howdy React developers! Are you tired of dealing with complex state management in your React projects? Well, buckle up, because today we're diving into the wonderful world of the useState hook, which makes state management as easy as binge-watching your favorite series on Netflix. 🍿

I. Introduction

If you're here, you probably know that React is the real MVP when it comes to building dynamic and interactive user interfaces. But what's an app without state management? That's like Batman without Robin, peanut butter without jelly, or a burger without fries. 😱

II. What is State Management?

Before we jump into the magic of useState, let's get a quick refresher on what state management is all about in React.

A. What is state in a React application?

State in a React app is like the memory of a goldfish—constantly changing and updating. It's the data that drives the app's behavior and appearance. It's responsible for making your app feel alive and responsive, just like your favorite TikTok dance challenge. 💃🕺

B. The role of state management in maintaining application state

State management is like the puppet master pulling the strings behind the scenes, making sure that the state of your application stays consistent and up-to-date. This is crucial, as it ensures a smooth user experience and helps avoid any unexpected glitches or issues.

C. Traditional state management using class components and setState

Back in the days before Hooks came along (yeah, I know, ancient history, right? 🦖), we had to rely on class components and setState for state management. This could lead to verbose code and a tangled mess of state updates. But fear not! Hooks are here to save the day.

III. The useState Hook

A. Introduction to React Hooks

React Hooks are like a breath of fresh air for developers, bringing a ton of new and simplified ways to work with state and side effects in functional components. They're the superheroes we didn't know we needed, but now we can't live without. 🦸‍♀️🦸‍♂️

B. The useState hook and its benefits

useState is the simplest and most straightforward Hook to handle state in a functional component. It lets you manage state like a boss, without the need for a class component. Say goodbye to the this keyword and hello to a cleaner, more efficient way of handling state! 🧹

C. Syntax and usage of useState

Using useState is like learning the lyrics to your favorite song - it's catchy and sticks with you. Here's the basic syntax:

const [state, setState] = useState(initialState);

**state**: The current state value.
setState: A function to update the state.
initialState: The initial state value.

It's as easy as pie! 🥧

IV. Streamlining State Management with useState

A. Simplicity and readability improvements over class components

With useState, managing state becomes a walk in the park. No more bulky class components or confusing this keywords. Just a simple and clear way to manage your state, like your favorite celebrity couple: low-key and drama-free. 🌟

B. Reducing boilerplate code

You know what's better than writing less code? Writing even less code! With useState, there's no need to deal with constructors or bind methods. It keeps your codebase lean, mean, and ready to take on the world. 💪

C. Enhanced modularity and maintainability

useState makes it super easy to separate concerns and create reusable, modular components. This means you can spend more time working on new features and less time debugging and refactoring. It's like having a well-organized wardrobe: you know exactly where everything is, making it easy to mix and match. 🧥👖👗

V. Examples of Using useState

A. Simple counter example

Let's build a simple counter app together, shall we? It's like making the perfect sandwich: simple, yet delicious. 🥪


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times!</p><button onClick={() => set Count(count + 1)}>
Click me!
</button>
</div>
);
}

export default Counter;

Voilà! Just like that, we have a fully functional counter using useState. Ain't that a piece of cake? 🍰

B. Managing complex state objects

Don't worry, useState has got your back even when dealing with more complex state objects. Let's say you want to keep track of a user's first and last name. No sweat, useState can handle that! 🕶️


import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState({ firstName: '', lastName: '' });

  const handleChange = (e) => {
    setName({ ...name, [e.target.name]: e.target.value });
  };

  return (
    <div>
      <input name="firstName" value={name.firstName} onChange={handleChange} />
      <input name="lastName" value={name.lastName} onChange={handleChange} />
      <p>Hello, {name.firstName} {name.lastName}!</p>
    </div>
  );
}

export default NameForm;

Just like magic, we can manage complex state objects without breaking a sweat! 🧙‍♂️

C. Combining useState with other React Hooks (e.g., useEffect)

You can also mix useState with other Hooks like useEffect to create more powerful components. It's like adding hot sauce to your favorite dish: they're great on their own, but together they're a flavor explosion! 🌶️

Let's create a component that fetches data from an API and displays it:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((fetchedData) => {
        setData(fetchedData);
        setIsLoading(false);
      });
  }, []);

  return (
    <div>
      {isLoading ? (
        <p>Loading data, please wait... 💤</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataFetcher;

And there you have it! A powerful combo of useState and useEffect to fetch and display data like a pro. 🚀

VI. Best Practices for useState

A. When to use useState and when to consider alternatives (e.g., useReducer)

useState is awesome, but sometimes you need something with a bit more oomph, like **useReducer**

For complex state logic or when you need to handle multiple related actions, useReducer might be your best bet. It's like choosing between a scooter and a motorcycle: both are great, but one packs a little more punch. 🛵

B. Tips for optimizing performance

To keep your app running smooth as butter, only update state when necessary. Avoid unnecessary re-renders by memoizing components with React.memo or useMemo. It's like taking care of a plant: a little TLC goes a long way! 🌱

C. Strategies for handling side effects in response to state changes

Sometimes, you'll need to perform side effects in response to state changes. useEffect is your BFF in these scenarios. Just remember to specify the dependencies in the dependency array, and you'll be golden. 🏆

VII. Conclusion

So there you have it, folks! We've explored the wonderful world of useState and how it can make your life easier when managing state in React. It's like finding the perfect pair of jeans: once you've found them, you'll wonder how you ever lived without them. 👖

Now go forth and use useState in your React projects, and may your state management be as breezy and carefree as a day at the beach. 🏖️

Fetch This! How to Make API Calls So Dope, Even Your Dog Will Be Impressed 🐶🚀

Luis A. — Sun, 26 Mar 2023 12:41:24 +0000

What's up, code wranglers? 🤠 Get ready for some paws-itively mind-blowing JavaScript knowledge! 🐾 Today, we're diving into the fetch() method, a super cool way to make API calls that'll leave your doggo howling with envy. 🐶🚀 So, buckle up, and let's fetch ourselves some awesome API skills!

In my pervious post, we explored the wild world of JavaScript Promises. Now, we're gonna put those Promises to work, using the fetch() method. By the end of this article, you'll be making API calls so slick, even your four-legged friend will be impressed! 🐕💨 So, let's get our paws dirty and dig in! 🦴

What's fetch()? 🤔

The window.fetch() method is a rad way to make Ajax requests, like calling an API or snagging a remote resource or HTML file from a server. Pretty dope, huh?

For this lesson, we'll be using JSON Placeholder to make some real API requests. 😎

Let's say you wanted to get a list of posts from the API using the https://jsonplaceholder.typicode.com/posts endpoint. First, you'd pass that into the fetch() method as an argument.


fetch('https://jsonplaceholder.typicode.com/posts');

The fetch() method gives us back a Promise. We can deal with API responses by chaining Promise.then() and Promise.catch() methods to it. Let's pass the response object into our Promise.then() callback function, and log it to the console.

fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) {
    // The API call was successful!
    console.log(response);
}).catch(function (error) {
    // There was an error
    console.warn(error);
});

If you peep at the response in the console, you'll see that the response.body ain't usable text or JSON. It's something called a ReadableStream. The fetch() method is all about those streams.

To get our API data as text or a JSON object, we can use one of two methods native to the Fetch object: Body.text() and Body.json(). The Body.text() method gets the body data as a text string, while the Body.json() method gets it as a JSON object. Both return a Promise. Noice! 😎

In most cases, you'll probs want JSON data. Call the method on the response object, and return. We can then work with the actual response JSON in a chained Promise.then() method.

fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) {
    // The API call was successful!
    return response.json();
}).then(function (data) {
    // This is the JSON from our response
    console.log(data);
}).catch(function (error) {
    // There was an error
    console.warn(error);
});

Catching errors with the Fetch API 🎣💥

Since it returns a Promise, the Fetch API deals with errors using the Promise.catch() method.

However, the Promise only goes bonkers and triggers the Promise.catch() method if the request fails to resolve. If there's a response from the server, even if it's a 404 or 500 error, the Promise.then() methods still run. Sneaky, huh? 🕵️‍♀️

For example, in this request below, I've goofed and misspelled /posts as /postses, causing a 404 error.

fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {
    // The API call was successful
    // (wait, it was?)
    console.log(response.status);
    return response.json();
}).then(function (data) {
    // This is the JSON from our response
    console.log(data);
}).catch(function (error) {
    // There was an error
    console.warn(error);
});

If you try this yourself, you'll notice that an empty JSON object is logged, and our warning doesn't show in the console. 😒

The response.ok property 👌

The Response.ok property returns a boolean, with a value of true if the response has a status code between 200 and 299, and false if it does not.

If the response.ok property is true, we can return response.json() just like before. If not, we can throw response to trigger the Promise.catch() method.

fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {

    // If the response is successful, get the JSON
    if (response.ok) {
        return response.json();
    }

    // Otherwise, throw an error
    throw response.status;

}).then(function (data) {
    // This is the JSON from our response
    console.log(data);
}).catch(function (error) {
    // There was an error
    console.warn(error);
});

While that triggers the Promise.catch() handler, the error parameter is the response object. Sometimes the response.status code or the response.statusText are all you need. But often, details about the error are in the response.body.

Instead of immediately running throw, you can instead return response.json() or response.text() with a chained Promise.then() function. Inside its callback function, throw the parsed JSON or text to trigger the Promise.catch() method, with the error data as the error argument.


fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {

    // If the response is successful, get the JSON
    if (response.ok) {
        return response.json();
    }

    // Otherwise, throw an error
    return response.json().then(function (json) {
        throw json;
    });

}).then(function (data) {
    // This is the JSON from our response
    console.log(data);
}).catch(function (error) {
    // There was an error
    console.warn(error);
});

Some APIs return a simple string error message instead of an object. If that's the case, you'll get a JSON error in the console. 🙄

For APIs that don't return an error object, use response.text() instead of response.json().


// Otherwise, throw an error
return response.text().then(function (msg) {
    throw msg;
});

Tomorrow, we'll look at the async and await keywords, and how they can make Promises a bit easier to work with. It'll be like a magic trick for your code! 🧙‍♂️

In conclusion, the fetch() method is a super useful tool for making API calls and handling remote resources. By using Promises and chaining .then() and .catch() methods, we can handle successes and errors with style. Remember to check the response.ok property to avoid any sneaky false positives, and you'll be well on your way to mastering the JavaScript fetch method. 🚀

That's all for today, folks! Tune in tomorrow for more JavaScript awesomeness, and keep on fetching! 🎣🤘

JavaScript Promises: Making Sense of the Madness 😤

Luis A. — Fri, 24 Mar 2023 15:00:17 +0000

Hey there, party people! 🎉 If you've ever found yourself scratching your head over Promises in JavaScript, you're in the right place. I've been seeing a ton of questions about this topic, so today I'm on a mission to clear things up and help you master the art of Promises. Get ready for some fun, laughter, and a little bit of learning as we venture into the wild world of Promises! 😎 🎢

What’s a Promise in JavaScript? 🤔

A Promise is a JavaScript object that represents an asynchronous function. It's like your friend telling you they'll buy you a pizza later. You don't know exactly when it's gonna happen, but you trust them to deliver. 🍕

// Create a Promise object
let sayHello = new Promise(function (resolve, reject) {

    // In 5 seconds, resolve the Promise.
    // Pass along "Hi, universe!" to any callback methods
    setTimeout(function () {
        resolve('Hi, universe!');
    }, 5000);

});

In the example above, sayHello() is a Promise that in 5 seconds, something will happen. You can attach functions that should run when the Promise resolves using the Promise.then() method.

// After 5 seconds, if the Promise resolves,
// this will log "Hi, universe!" into the console
sayHello.then(function (msg) {
    console.log(msg);
});

When you create a Promise, you pass in a callback function as an argument.

Inside the function, you define two parameters: resolve and reject. These are implicit arguments the Promise passes into your callback function.

When the Promise should be considered completed, run the resolve() method. You can pass in arguments that should get passed into the Promise.then() method callback function into the resolve() method.

In the example above, we passed Hi, universe! into resolve(). This was passed along to the Promise.then() method as the msg argument.

Rejecting a Promise 🚫

Similarly, you run the reject() method if the Promise should be considered failed. This is like your friend promising you that pizza, but then they run out of money. Bummer, dude! 😢

You can pass in any error messages or information about the rejection as arguments. You can run a callback when a Promise fails using the Promise.catch() method.

In the next example, let’s modify sayHello() to reject() before the timeout completes.

// Create a Promise object
let sayHello = new Promise(function (resolve, reject) {

    reject('Unable to say hi.');

    // In 5 seconds, resolve the Promise.
    // Pass along "Hi, universe!" to any callback methods
    setTimeout(function () {
        resolve('Hi, universe!');
    }, 5000);

});

Now, we can add a Promise.catch() method to detect this failure and do something about it. (Like ordering our own pizza! 🍕)

// Will warn "Unable to say hi." in the console.
sayHello.then(function (msg) {
    console.log(msg);
}).catch(function (error) {
console.warn(error);
});

Because reject() runs before resolve() does, the catch() callback method will run and show the error message that was passed in.

Chaining 🚂

You can chain multiple Promise.then() methods together, and they’ll run in sequence. It's like setting up a domino effect—each one triggers the next. 🎲

Whatever you return from the current Promise.then() method gets passed along to the next Promise.then() method after it in the chain. Let’s create a new Promise called count.

It will resolve() immediately, and pass along 1 as an argument.

// Create a Promise object
let count = new Promise(function (resolve, reject) {
    resolve(1);
});

Now, we can chain some Promise.then() methods together. In each one one, we’ll log num, increase it by 1, and return it to the next argument in the sequence.

In the first Promise.then() method, num is 1. In the second, it’s 2. In the last one, it’s 3.


// logs 1, then 2, then 3, to the console
count.then(function (num) {
    console.log(num);
    return num + 1;
}).then(function (num) {
    console.log(num);
    return num + 1;
}).then(function (num) {
    console.log(num);
    return num + 1;
});

You can attach Promise.then() methods at any time ⏰

One of my favorite things about Promises is that if you assign one to a variable, you can attach Promise.then() methods on it at any time—even after the Promise has already resolved.

If the Promise hasn’t resolved yet, the callback will run once it does. If it has resolved, the callback will run immediately. It's like a pizza that's already been delivered and is just waiting for you to dig in. 🍕

// Create a Promise that resolves immediately
let question = new Promise(function (resolve, reject) {
    resolve(42);
});

// Attach a callback 5 seconds after it's resolved
setTimeout(function () {

    // This will run as soon as the timeout completes, because the Promise has already resolved
    question.then(function (answer) {
        console.log(answer);
    });

}, 5000);

Hope that helps a bit, folks! Tomorrow, we’ll look at a practical use of Promises: the fetch() method. Stay tuned, and don't forget to practice those Promises in the meantime. After all, practice makes perfect...or at least a little less confusing! 😄

One Wizard to Rule Them All: The Magic of Array.prototype.some()

Luis A. — Thu, 23 Mar 2023 15:31:38 +0000

Hey there, code sorcerers! 🧙‍♂️ Are you ready for a spellbinding adventure in the enchanted realm of JavaScript? Today, we're going to explore the mystical world of Array.prototype.some(), a method that can reveal the hidden secrets of your arrays with a mere flick of your wand. 🪄

Join me on this magical journey, and let's unravel the arcane mysteries of this spellbinding method that'll help you find that one special item in your array! 🧙‍♂️✨

A sample array

Suppose we've got an array of wizards. Each item is an object with a name, spells, and tool property. It's like a magical version of Pokémon! 🧙‍♂️✨


let wizards = [
    {
        name: 'Radagast',
        spells: ['Talk to animals', 'Grow plants'],
        tool: 'staff'
    },
    {
        name: 'Merlin',
        spells: ['Dancing teacups', 'Turn into fish'],
        tool: 'wand'
    },
    {
        name: 'Gandalf',
        spells: ['You shall not pass', 'Disappear'],
        tool: 'staff'
}
];

The `Array.prototype.some()` method

The Array.prototype.some() method is like that one friend who's satisfied as long as there's one slice of pizza left at the party 🍕. It accepts a callback function as an argument and will return true if at least one item in the array meets the criteria.


wizards.some(function (wizard, index, arr) {
    // do magical stuff...
});

Inside the callback function, you can test each item in the array and return a boolean value (true or false). If at least one item returns true, the Array.prototype.some() method returns true. Otherwise, it returns false.

Let's look at some examples to show the difference between Array.prototype.every() and Array.prototype.some().

Example 1: check if at least one wizard uses a staff

Imagine we wanna check if at least one wizard in the array uses a staff as their tool. It's like a magical game of "Where's Waldo?" 🧙‍♂️


// returns true
// (Both Radagast and Gandalf use staffs)
let hasStaff = wizards.some(function (wizard) {
    return wizard.tool === 'staff';
});

Example 2: check if at least one wizard has at least one spell

We could also use the Array.prototype.some() method to check if any wizard in the array has at least one spell. After all, what's a wizard without their spells? 🧙‍♂️💫


// returns true
let hasSpells = wizards.some(function (wizard) {
    return wizard.spells.length > 0;
});

A more complex example: checking for a spell

Let's imagine we want to make sure at least one wizard in our array can cast the spell "You shall not pass". Maybe we're planning a surprise party for Balrog, and we need someone to keep him out? 🧙‍♂️🎉

Inside the callback function, we could use the Array.prototype.includes() method on the spells array to look for our spell.


// returns true
let doNotPass = wizards.some(function (wizard) {
    return wizard.spells.includes('You shall not pass');
});

And there you have it, folks! The Array.prototype.some() method is like our magical MVP, making sure at least one item in our array is up to snuff. So the next time you're on a wizard hunt, remember this spell! 🧙‍♂️🔮