DEV Community: James Cox

TIL - HTML Progress Bar

James Cox — Fri, 28 May 2021 20:36:39 +0000

#TIL

Today I learned HTML has a native progress bar.

The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

I like this element because you can do a lot of things with it.

Want a visual display for some sort of count-up or count-down experience on your site? Wire it up to a progress element.
Want a native loader? HTML's progress bar has you covered!
Want to show a user how many remaining characters are available in an input or textfield? You guessed it!
I'm sure there are plenty of use-cases, so if you can think of others, plop them down in the comments.

The Demo

I demonstrated what I thought is the easiest: using a progress bar to represent the amount of characters remaining in an input field. Check it out:

Start typing away in the textfield and watch the progress bar increase or decrease depending on how many characters you add or delete. Pretty cool huh?

The Code

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [chars, setChars] = useState(0);
  const [text, setText] = useState("");

  const handleCharsAndText = (e) => {
    setChars(e.target.value.length);
    setText(e.target.value);
  };

  const clearText = () => {
    setChars(0);
    setText("");
  };

  return (
    <div className="App">
      <h1>HTML Progress Element</h1>
      <label htmlFor="textarea-progress">Characters typed</label>
      <progress id="textarea-progress" max="100" value={chars} />
      <span className="char-span">{chars}/100</span>
      <form className="form-wrapper" action="/action_page.php">
        <label className="textarea-label" htmlFor="textarea">
          Start typing below...
        </label>
        <textarea
          type="text"
          id="textarea"
          name="textarea"
          rows="6"
          maxLength="100"
          value={text}
          onChange={handleCharsAndText}
        />
      </form>
      <button onClick={clearText}>Reset</button>
    </div>
  );
}

Breaking It Down

Let's start with the essential parts

<label htmlFor="textarea-progress">Characters typed</label>
<progress id="textarea-progress" max="100" value={chars} />

A progress element must have a max attribute, which is the number at which the bar reaches "100%".

max
This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

A progress element must also have a value attribute, which is where the bar is visually represented in progress at the moment.

value
This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

My progress bar has a max="100", but it could be ANY number. It could be 1,000,000 or 3. But in this case I want the meter to be full when it reaches 100 characters. 1 character for each percent of the bar.

value={chars} is how many characters the user has currently typed in, handled by state:

const [chars, setChars] = useState(0);

...
const handleCharsAndText = (e) => {
  setChars(e.target.value.length);
  setText(e.target.value);
};

And then to make sure the user can't type any more characters when the progress bar is 100% full, I give my <textarea> element a maxLength="100" property, which doesn't allow a user to type more than 100 characters.

Wrapping Up

And that's pretty much it! You can get as creative as you want with the progress element.

In fact, I DID.

Do you want to see my Mini Tweets Codesandbox I made? I wanted to explore if styling a progress element was possible, and I kind of got carried away, mimicking the behavior of a Tweet form and how it warns when you you're getting close to the maximum 140 characters.

BONUS CODE - Mini Tweets

Here's the full React component:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [open, setOpen] = useState(false);
  const [chars, setChars] = useState(0);
  const [tweet, setTweet] = useState("");
  const [tweets, setTweets] = useState([]);

  const openModal = () => {
    setOpen(true);
  };

  const closeModal = () => {
    setOpen(false);
  };

  const charCount = (e) => {
    setChars(e.target.value.length);
    setTweet(e.target.value);
  };

  const handleSubmit = (e) => {
    const now = new Date().toUTCString();
    if (tweet === "") {
      e.preventDefault();
    } else {
      e.preventDefault();
      setTweets([{ text: tweet, date: now }, ...tweets]);
      setTweet("");
      setChars(0);
      setOpen(false);
    }
  };

  return (
    <div className="App">
      <h1>Mini Tweets</h1>

      <button className="tweet-btn" onClick={openModal}>
        Add Mini Tweet
      </button>

      {open && (
        <>
          <div className="overlay" />
          <div className="add-tweet-card">
            <button className="close-btn" onClick={closeModal}>
              <span aria-label="close tweet form">X</span>
            </button>
            <form className="form-wrapper" action="/action_page.php">
              <label className="textarea-label" htmlFor="tweet">
                Whats on your mind?
              </label>
              <textarea
                type="text"
                id="tweet"
                name="tweet"
                rows="4"
                maxLength="80"
                value={tweet}
                className={chars > 70 ? "red-text" : null}
                onChange={charCount}
              />
              <progress
                aria-label={`${80 - chars} remaining characters`}
                id="tweet-progress"
                max="80"
                value={chars}
              />
              <span className="char-span" aria-label={`${chars}/80`}>
                {chars}/80
              </span>
              <input
                type="submit"
                value="Tweet!"
                onClick={handleSubmit}
                className="tweet-btn"
              />
            </form>
          </div>
        </>
      )}

      {tweets.length > 0 && <h2>Your Tweets</h2>}
      {tweets.map((t, index) => (
        <div key={index} className="tweets-card">
          <p>{t.text}</p>
          <p className="tweet-time">{t.date}</p>
        </div>
      ))}
    </div>
  );
}

And the full CSS file:

body {
  background-color: rgb(19, 19, 19);
}

textarea {
  width: 10rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  background-color: rgb(3, 3, 26);
  color: white;
}

progress {
  margin-top: 1rem;
  border-radius: 2px;
  width: 10rem;
  height: 1rem;
}
progress::-webkit-progress-bar {
  background-color: #1da1f2;
  border-radius: 2px;
}
progress::-webkit-progress-value {
  background-color: rgb(25, 25, 59);
  border-radius: 2px;
  box-shadow: 1px 1px 3px 3px #2ba6f1cc;
}

.textarea-label {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.App {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: rgb(221, 221, 221);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-tweet-card {
  position: fixed;
  z-index: 1;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #032f4b;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 15px 5px #2997db88;
}

.overlay {
  position: fixed;
  margin: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(9, 15, 29, 0.9);
}

.progress-label {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.form-wrapper {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tweet-btn {
  margin-top: 1rem;
  color: black;
  background-color: #1da1f2;
  font-size: 1.25rem;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

input[type="submit"] {
  -webkit-appearance: none;
}

.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: rgba(255, 255, 255, 0.33);
  color: black;
  border: none;
  padding: 0.1rem;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.tweet-btn:hover {
  color: #1da1f2;
  background-color: white;
}

.red-text {
  color: red;
  font-weight: bold;
}

.tweets-card {
  margin-bottom: 1rem;
  background-color: #1da1f2;
  padding-left: 2rem;
  padding-right: 2rem;
  border-radius: 0.5rem;
  width: 80%;
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 1.1rem;
  text-align: start;
}

.char-span {
  margin-top: 0.5rem;
}

.tweet-time {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  margin-top: -0.5rem;
}

@media screen and (min-width: 300px) {
  textarea {
    width: 18rem;
  }

  progress {
    width: 15rem;
  }
}

@media screen and (min-width: 600px) {
  textarea {
    width: 18rem;
  }

  .add-tweet-card {
    width: 50%;
  }

  .tweets-card {
    width: 50%;
  }
}

@media screen and (min-width: 1000px) {
  .add-tweet-card {
    width: 25%;
  }

  .tweets-card {
    width: 25%;
  }
}

Styling the <progress> element took some Googling and I found this stackoverflow answer that I used as a guide, tweaking things here and there until I was happy enough.

Conclusion

I hope you learned something about HTML's progress bar; I know I did. The simple version isn't that scary at all, and I hope you feel empowered to try it out for yourself and see what cool and creative things you can make.

Thank you for reading and if you have any questions or insight, just hit me up in the comments below. See you next time!

Job Search Update: 😔

James Cox — Wed, 19 May 2021 15:38:54 +0000

Context

Last year I wrote a Dev.to post entitled How long did you have to wait?.

I detailed my job application experience at the time, having applied to quite a few roles and receiving literally zero calls. It was a rough time, and I received a lot of great feedback from that article.

Update

Fast-forward to now, 15 months after graduating bootcamp, and still unemployed:

Yesterday I received a rejection email from a company I had been interviewing with for several weeks. This one really stung.

I even tweeted about it and was blessed with an incredible amount of support, feedback, and advice.

This company had reached out to me. They wanted to hire several juniors and thought I would be a great fit. I was very transparent with my experience and they were transparent with their hiring process. I loved the company culture and thought this would be an ideal fit for both them and myself.

I had to create a todo app for a code challenge, and I went above and beyond their criteria. I had so much fun with it, I even put it in my portfolio. Check out The Matrix Todo app here:

Yesterday they informed me they wanted more senior developers and that they appreciate my time and effort, but I was no longer in consideration.

Conclusion

Looking for your first developer role can be incredibly stressful. It is a full-time job itself, and in many cases a mentally-draining grind that can often feel like there is no hope.

I want you to know that if you are in a similar situation, I see you. And I am here for you if you need to talk about your experiences or just rant about anything.

This post is meant to both offer insight and support for anyone else struggling to find their first role.

I believe that a big factor in finding your first role is about being in the right place at the right time.

I want to thank everyone who has been so kind and supportive this entire process. Thank you to my community for always being there for me.

If you feel alone, please know you are NOT alone. Reach out to me or someone you trust and I will help you connect with some great people who will embrace your journey and support you however they can.

Let me know in the comments if you have any specific stories or experiences you would like to share. We need to lift each other up in these moments and realize that we are all in this together.

Thank you for reading. Much love and respect ❤️🙏❤️🙏❤️🙏

TIL - HTML Dialog

James Cox — Mon, 17 May 2021 19:02:24 +0000

#TIL

Today I learned that HTML has a native modal, known as the <dialog> element.

The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

AN HTML POP UP? NO WAY! (yes way).

As always, I demonstrate the usage in React.js, which means that some functionality translates directly, and other functionality does not. For example, according to the docs:

The ::backdrop CSS pseudo-element can be used to style behind a element when the dialog is displayed with HTMLDialogElement.showModal(). For example, to dim unreachable content behind the modal dialog.

As you will see in a moment, using a <dialog> in React requires a little bit of a different usage to dim the background. But, truthfully I think it is still easier than with vanilla JS.

The Modal

Looks great, doesn't it? And you will see in just a moment that the necessary code is relatively simple!

The Code

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openDialog = () => {
    setIsOpen(true);
  };

  const closeDialog = () => {
    setIsOpen(false);
  };
  return (
    <div className="App">
      <h1>HTMLs Native Dialog</h1>
      <h2>A simple modal</h2>

      {isOpen && (
        <>
          <div className="overlay" />
          <dialog open>
            <p>BOOM</p>
            <p>And just like that youve got a modal</p>
            <p>
              Easy peezy lemon squeezy{" "}
              <span role="img" aria-label="lemon emojis">
                🍋🍋🍋
              </span>
            </p>
            <button onClick={closeDialog}>Close</button>
          </dialog>
        </>
      )}
      <button className="open-btn" onClick={openDialog}>
        Open Dialog
      </button>
    </div>
  );
}

Breaking it Down

The open or closed state of the modal is handled by the useState hook provided by React and toggled by the openDialog() and closeDialog() functions.

import { useState } from "react";

...

const [isOpen, setIsOpen] = useState(false);

const openDialog = () => {
  setIsOpen(true);
};

const closeDialog = () => {
  setIsOpen(false);
};

The HTML for a <dialog> element looks something like:

<dialog open>
  <p>BOOM</p>
  <p>And just like that youve got a modal</p>
  <p>
    Easy peezy lemon squeezy{" "}
    <span role="img" aria-label="lemon emojis">
      🍋🍋🍋
    </span>
  </p>
  <button onClick={closeDialog}>Close</button>
</dialog>

The most import part of the above code is the open property in the opening <dialog> tag, written as <dialog open>. That's how the browser knows to display the modal.

And the full return statement with the conditional render handled by the isOpen property in state.

return (
    <div className="App">
      <h1>HTMLs Native Dialog</h1>
      <h2>A simple modal</h2>

      {isOpen && (
        <>
          <div className="overlay" />
          <dialog open>
            <p>BOOM</p>
            <p>And just like that youve got a modal</p>
            <p>
              Easy peezy lemon squeezy{" "}
              <span role="img" aria-label="lemon emojis">
                🍋🍋🍋
              </span>
            </p>
            <button onClick={closeDialog}>Close</button>
          </dialog>
        </>
      )}
      <button className="open-btn" onClick={openDialog}>
        Open Dialog
      </button>
    </div>
  );

Why Should I Care?

The cool and most important thing about the <dialog> element is better accessibility. Sure, you can build your own modal, but then you've got to work extra hard to make it available to screen readers and other accessibility tools.

Another cool benefit is not having to add a bunch of z-index properties to your CSS in order to properly display the modal and any overlays you wish to add. "Modal behaviour" is baked right into the <dialog> element.

Added accessibility AND easier styling capabilities? Sounds like a WIN-WIN to me!

The CSS

Curious how I personally styled my modal and overlay? Here is the full CSS file:

.App {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: white;
  background-color: rgb(0, 0, 0);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  background-color: black;
}

dialog {
  margin-top: 8rem;
  width: 75%;
  color: white;
  background-color: black;
  border: 3px solid rgb(72, 70, 224);
}

button {
  background-color: rgb(72, 70, 224);
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
}

button:hover {
  background-color: rgb(66, 247, 207);
  color: black;
}

.open-btn {
  width: 75%;
}

.overlay {
  position: fixed;
  margin: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(9, 22, 39, 0.7);
}

@media only screen and (min-width: 500px) {
  dialog {
    width: 18rem;
  }

  .open-btn {
    width: 10rem;
  }
}

The Overlay

The only thing I added that that doesn't come "baked in" was the overlay. I got creative with my solution, but I would not call it "difficult" or "complex". Inside my conditional render of the <dialog> element I added <div className="overlay" />. And simply styled with CSS:

.overlay {
  position: fixed;
  margin: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(9, 22, 39, 0.7);
}

Think of it as stretching a layer of slightly-transparent color across the entire screen when isOpen is true.

Conclusion

Check out this great Shopify article that features this and other useful HTML native elements. The <dialog> element is number 6 in the article and I really liked tihs part:

Does it work?
The does a slightly more complex thing…and does it well. Browser support is somewhat patchy (notably no Internet Explorer, and Safari is pending at the time of writing), but there is a polyfill.

Is it accessible?
Support is quite good, but it does need a little ARIA support to go to production. What's really good about the element is that most accessibility support is built in, making it a far better starting point than having to create your own fixed inline custom dialog component.

I hope you enjoyed my article on this awesome HTML element! As always let me know if you have any questions, comments, feedback, suggestions, etc!

Thanks again and see you next time!

Update

It appears that the <dialog> element does not behave as intended on iOS. At least not on mobile iOS. I am going to do some further digging and update this article with the relevant information as soon as possible!

TIL - HTML Details

James Cox — Fri, 14 May 2021 22:04:48 +0000

#TIL

Today I learned about HTML's native accordion-like functionality, encapsulated by the details element.

I'm sorry, James. Did you just say HTML has a built-in accordion???

I know! I couldn't believe it either. MIND BLOWN.

The HTML Details Element <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

Let's slow our roll ...

While very cool, it is far from a perfect solution, in my opinion. Support for animation is limited, and requires a decent amount of JavaScript and CSS to work correctly.

There are certainly better options in terms of design and functionality, especially if you are using a design library like Bootstrap, Material UI or something similiar.

With that said, let's see it in action!

The Accordion

The Code

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>HTML Details Element</h1>
      <div className="details-wrapper">
        <details>
          <summary>
            <h2>This is an accordian</h2>
          </summary>
          <div>
            <p>... made only with HTML and a sprinkle of CSS</p>
            <ul>
              <li>First wrap your accordion in a details tag</li>
              <li>
                Then create a summary section with some sort of h1 or p content
              </li>
              <li>
                Then separately inside the details element create another
                element, like a div
              </li>
              <li>
                And if you want to style the accordion, you can create a cool
                effect
              </li>
              <li>Animation is possible, but it will require javascript</li>
            </ul>
          </div>
        </details>
      </div>
    </div>
  );
}

Breaking It Down

Start with a <details> tag.

<details>
</details>

Add a <summary> tag. Whatever you put in the summary tag is what will the user will see when the accordion is closed. You MUST have a <summary> tag for the details element, especially for accessibility purposes.

<details>
  <summary>
    // anything can go in here, but I chose an <h2>
    <h2>This is an accordian</h2>
  </summary>
</details>

Whatever you put inside the <details> element and outside the <summary> element is what will be in the expanded portion of the accordion.

It is definitely helpful to wrap your expanded-content in some sort of HTML element if you want to style your accordion.

<details>
  <summary>
    <h2>This is an accordian</h2>
  </summary>

  // I went with a <div> to reference in my CSS file
  <div>
    ...content will go here when the accordion is open
  </div>
</details>

And that's pretty much it! Of course styling is important, so let's peep that CSS:

/* only referencing the styles that pertain to the <details> element itself */

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

summary {
  cursor: pointer;
}

summary > * {
  display: inline;
}

details > summary {
  text-align: left;
  width: 18rem;
  background-color: rgb(88, 33, 241);
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

details > summary > * {
  display: inline;
}

details > div {
  text-align: left;
  width: 18rem;
  border: 4px solid rgb(88, 33, 241);
  margin-top: 0;
  padding: 1rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

details[open] summary {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

summary[open] {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

Not too bad, huh? If you're interested in seeing the full CSS code, it can be found here.

Conclusion

If you need a quick accordion and do not want to fiddle with a ton of JavaScript and CSS, HTML provides you a handy <details> element.

Thank you for reading and I look forward to hearing any thoughts, questions or feedback you may have!

TIL - HTML Lazy Load

James Cox — Thu, 13 May 2021 18:47:33 +0000

#TIL

Today I learned about HTML's lazy loading property. Once again, HTML provides us another simple solution for a once-difficult problem.

So what is "lazy loading"?

According to this sitepoint article:

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Why Should We Care?

Let's say you visit a site like https://unsplash.com/. They host zillions of high-quality photos, that require a decent amount of resources to load. Without the ability to load them as you need them, you would be saddled with WAY MORE data-usage than you likely would need or want!

In the past, you had a few options to load images on demand, but none of them were intuitive or developer-friendly. Enter the HTML loading="lazy" property.

It looks like this:

<img src={meme.url} alt={meme.name} loading="lazy" />

That's it. 14 characters is all the code required to achieve image-on-demand functionality.

The Effect in Action!

I created both a CodeSandbox and an small app hosted on vercel, https://html-load-lazy.vercel.app/.

In my CodeSandbox I fetch to the Imgflip API, which gives us their 100 current most popular memes. The embedded CodeSandbox here actually shows the lazy loading behaviour really well! Press the Get Memes button, and start scrolling down. You will notice that images near the bottom, coming into view, appear to blink. That's the website loading each image on demand!

For whatever reason, it doesn't work as well in full-browser mode. Well, it does work. However, potentially without the visual cue each image is loading, like you do here with the embed. Possibly because the images are all cached from testing the API already.

The Code

import "./styles.css";
import { useState } from "react";

function shuffle(array) {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

export default function App() {
  const [memes, setMemes] = useState([]);
  const BASE_URL = "https://api.imgflip.com/get_memes";

  const getMemes = () => {
    return async () => {
      try {
        const res = await fetch(BASE_URL);
        if (!res.ok) {
          throw res;
        }
        const memeData = await res.json();
        setMemes(memeData.data.memes);
      } catch (err) {
        alert("Failed to load memes");
      }
    };
  };

  const clearPhotos = () => {
    setMemes([]);
  };

  const shuffledMemes = shuffle(memes);

  return (
    <div className="App">
      <h1>HTML Lazy Loading</h1>
      <div className="btn-wrapper">
        <button onClick={getMemes()}>Get Memes</button>
        <button onClick={clearPhotos}>Clear Photos</button>
      </div>
      {memes.length > 0 &&
        shuffledMemes.map((meme) => (
          <div key={meme.id}>
            <p>{meme.name}</p>
            <img src={meme.url} alt={meme.name} loading="lazy" />
          </div>
        ))}
    </div>
  );
}

I fetch to the API and store the array of images in state, setMemes(memeData.data.memes). I decided to shuffle them with the shuffle() function defined at the top of the App.js component, and map through the shuffledMemes to render both the name of the meme and its corresponding image!

Thanks, HTML, once again you've solved a difficult problem with such poise and elegance.

Bonus Code

As mentioned above, I hosted a small app on Vercel, https://html-load-lazy.vercel.app/ in which I fetch to both Imgflip and the Unsplash API.

Here is the full App.js component:

import "./App.css";

import { useState } from "react";

function shuffle(array) {
  let currentIndex = array.length,
    temporaryValue,
    randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

const ACCESS_KEY = process.env.REACT_APP_ACCESS_KEY;

export default function App() {
  const [memes, setMemes] = useState([]);
  const [photos, setPhotos] = useState([]);
  const MEME_URL = "https://api.imgflip.com/get_memes";
  const UNSPLASH_URL = `https://api.unsplash.com/photos/?client_id=${ACCESS_KEY}`;

  const getMemes = () => {
    return async () => {
      try {
        const res = await fetch(MEME_URL);
        if (!res.ok) {
          throw res;
        }
        const memeData = await res.json();
        setMemes(memeData.data.memes);
        setPhotos([]);
      } catch (err) {
        alert("Failed to load memes");
      }
    };
  };

  const getPhotos = () => {
    return async () => {
      try {
        const res = await fetch(UNSPLASH_URL);
        if (!res.ok) {
          throw res;
        }
        const photoData = await res.json();
        setPhotos(photoData);
        setMemes([]);
      } catch (err) {
        alert("Failed to load memes");
      }
    };
  };

  const clearPhotos = () => {
    setMemes([]);
    setPhotos([]);
  };

  const shuffledMemes = shuffle(memes);
  const shuffledPhotos = shuffle(photos);

  return (
    <div className="App">
      <h1>HTML LAZY LOADING</h1>
      <div className="btn-wrapper">
        <button onClick={getMemes()}>Get Memes</button>
        <button onClick={getPhotos()}>Get Photos</button>
        <button onClick={clearPhotos}>Clear Photos</button>
      </div>
      {memes.length > 0 &&
        shuffledMemes.map((meme) => (
          <div key={meme.id}>
            <p>{meme.name}</p>
            <img src={meme.url} alt={meme.name} loading="lazy" />
          </div>
        ))}
      {shuffledPhotos.length > 0 &&
        photos.map((photo) => (
          <div key={photo.id}>
            <img
              className="unsplash-img"
              src={photo.urls.regular}
              alt={photo.alt_description}
              loading="lazy"
            />
          </div>
        ))}
    </div>
  );
}

Conclusion

I hope you learned something new today! I certainly did. Also, I hope this inspires you to dig more into HTML, a seriously underrated programming language (yes I went there 😈😈😈), that provides us developers with a TON of awesome functionality.

As always, let me know in the comments if you have any questions, concerns, corrections, compliments... you get it.

Thanks for reading and I look forward to sharing my next #TIL post with you!

TIL - HTML Slider

James Cox — Wed, 12 May 2021 16:14:47 +0000

#TIL

Yesterday I wrote about HTML's native color picker. Today I learned about HTML's native slider element, which looks like <input type="range">.

Once again I crafted a nifty Codesandbox to demonstrate how to incorporate a slider into a background gradient generator.

While it is mobile responsive, and works as intended here, it's a better UX on a full screen. Click "Open in New Window" in the upper right-hand corner of the embedded Codesandbox below.

The Code

My input element for the first color slider looks like this.

<input
  type="range"
  min="0"
  max="100"
  value={firstPercentage}
  onChange={selectfirstPercentage}
/>

type="range" is how we define what type of input we want. A slider!
min="0" is the minimum value the slider will allow a user to select.
max="100" is the maximum value the slider will allow a user to select.
value={firstPercentage} is a variable held in state that gets updated by the next line of code:
onChange={selectFirstPercentage} listens for user input and updates state with selectFirstPercentage.

// initialize to 0 based on how CSS gradient is defined
const [firstPercentage, setFirstPercentage] = useState(0);

...

const selectfirstPercentage = (e) => {
  setFirstPercentage(e.target.value);
};

And the code for the second percentage slider is exactly the same, except everything refers to secondPercentage and setSecondPercentage.

// initialize to 100 based on how CSS gradient is defined
const [secondPercentage, setSecondPercentage] = useState(100);

...

const selectSecondPercentage = (e) => {
  setSecondPercentage(e.target.value);
};

...

<input
  type="range"
  min="0"
  max="100"
  value={firstPercentage}
  onChange={selectfirstPercentage}
/>

And I use the slider values of firstPercentage and secondPercentage to update the <div> that holds the actual gradient.

<div
  className="gradient-div"
  style={{ background: `linear-gradient(to ${direction}, ${firstColor} ${firstPercentage}%, ${secondColor} ${secondPercentage}%)`}}
/>

Pretty cool, right?! And not too difficult to use at all!

The Entire Component

import "./styles.css";
import { useState } from "react";

const directions = [
  { type: "Right" },
  { type: "Top" },
  { type: "Bottom" },
  { type: "Left" }
];

export default function App() {
  const [firstColor, setFirstColor] = useState("#1595d5");
  const [secondColor, setSecondColor] = useState("#eb3dbc");
  const [firstPercentage, setFirstPercentage] = useState(0);
  const [secondPercentage, setSecondPercentage] = useState(100);
  const [selectedDirection, setSelectedDirection] = useState("Right");
  const [direction, setDirection] = useState("right");

  const selectFirstColor = (e) => {
    setFirstColor(e.target.value);
  };

  const selectSecondColor = (e) => {
    setSecondColor(e.target.value);
  };

  const selectfirstPercentage = (e) => {
    setFirstPercentage(e.target.value);
  };

  const selectSecondPercentage = (e) => {
    setSecondPercentage(e.target.value);
  };

  const toggleDirection = (e) => {
    setSelectedDirection(e.target.id);
    setDirection(e.target.value);
  };

  return (
    <div className="App">
      <div className="main-wrapper">
        <h1>Gradient Playground</h1>

        <div className="flex-wrapper">
          <div className="color-select-bg">
            <h2 htmlFor="firstColor">First Color</h2>
            <input
              type="color"
              id="firstColor"
              name="firstColor"
              value={firstColor}
              onChange={selectFirstColor}
            />
            <div className="flex-wrapper">
              <input
                type="range"
                min="0"
                max="100"
                value={firstPercentage}
                onChange={selectfirstPercentage}
              />
              <p>{firstPercentage}%</p>
            </div>
          </div>

          <div className="color-select-bg">
            <h2 htmlFor="secondColor">Second Color</h2>
            <input
              type="color"
              id="secondColor"
              name="secondColor"
              value={secondColor}
              onChange={selectSecondColor}
            />
            <div className="flex-wrapper">
              <input
                type="range"
                min="0"
                max="100"
                value={secondPercentage}
                onChange={selectSecondPercentage}
              />
              <p>{secondPercentage}%</p>
            </div>
          </div>
        </div>

        <h2 htmlFor="secondColor">Gradient Direction</h2>
        <div>
          {directions.map(({ type }) => (
            <button
              key={type}
              id={type}
              value={type.toLowerCase()}
              onClick={toggleDirection}
              className={
                type === selectedDirection
                  ? "selected-direction-btn"
                  : "direction-btn"
              }
            >
              {type}
            </button>
          ))}
        </div>

        <div
          className="gradient-div"
          style={{
            background: `linear-gradient(to ${direction}, ${firstColor} ${firstPercentage}%, ${secondColor} ${secondPercentage}%)`
          }}
        />

        <h2>The CSS</h2>
        <div className="css-wrapper">
          <p className="css">
            background-image: linear-gradient(to {direction}, {firstColor}{" "}
            {firstPercentage}%, {secondColor} {secondPercentage}%);
          </p>
        </div>
      </div>
    </div>
  );
}

Conclusion

HTML gives us so many useful tools that solve what can seem like big problems. Learning how to incorporate those into fun and interactive projects like this gradient playground has been a blast! I hope you learned something like I did, and feel empowered to try this yourself!

Thanks for reading and as always, I welcome feedback, corrections, criticism, whatever!

Until next time...

TIL - HTML Color Picker

James Cox — Tue, 11 May 2021 15:21:22 +0000

#TIL

Today I learned that HTML has a native color picker. Super simple to use, and incredibly fun to play around with!

I wired up a quick CodeSandbox so you can see just how easy it is.

Because I am obsessed with React, I threw a couple <input type="color"> into an App.js component and wired them up to a couple useState handlers.

const [color, setColor] = useState("#5CFF9A");
const [background, setBackground] = useState("#272759");

Then I inject color and background into the Darth Vader SVG:

<svg
  className="svg-icon"
  viewBox="0 0 20 20"
  style={{ backgroundColor: background }}
>
    <path
      fill={color}
      d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"
    ></path>
</svg>

And VOILA! A fun, interactive way to make Darth Vader all technicolored and fancy.

The entire App.js component:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [color, setColor] = useState("#5CFF9A");
  const [background, setBackground] = useState("#272759");

  const selectColor = (e) => {
    setColor(e.target.value);
  };

  const selectBackground = (e) => {
    setBackground(e.target.value);
  };

  return (
    <div className="App">
      <h1>DESIGN YOUR DARTH</h1>

      <input
        type="color"
        id="color"
        name="color"
        value={color}
        onChange={selectColor}
      />
      <label htmlFor="color">Color</label>

      <input
        type="color"
        id="background"
        name="background"
        value={background}
        onChange={selectBackground}
      />
      <label htmlFor="color">Background</label>

      <svg
        className="svg-icon"
        viewBox="0 0 20 20"
        style={{ backgroundColor: background }}
      >
        <path
          fill={color}
          d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"
        ></path>
      </svg>
    </div>
  );
}

Conclusion

Discovering dead-simple HTML solutions for problems I thought were much more complex is an awesome feeling. I hope you learned something too.

Please let me know what you think! Do you have any questions? Did I miss something that I should know about?

Thoughts on life? Hit me up in the comments!

Array Methods

James Cox — Wed, 28 Apr 2021 22:08:56 +0000

Introduction

Let's discuss a few common JavaScript array methods seen regularly in React.

But first, who is this post for? If you are new to JavaScript and/or React, and maybe unsure what you need to know to get started. This post is Part II in a series called Essential JavaScript Building Blocks for React, and we will take a look at several array methods, what they do, and how we use them in React.

JavaScript has A LOT of array methods. This handy article by Mandeep Kaur briefly describes 20 different array methods.

This post, however, covers four array methods in more detail:

.map()
.filter()
.find()
.reduce()

And will reference a CodeSandbox that I created specifically for this series, with working examples of each array method.

.map()

Others may disagree, but I use the map() array method more frequently than any other. What does map() do? According to the MDN Web Docs:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Ugh. If you are anything like me, "doc language" isn't the easiest to understand, especially when you're a newbie.

According to me:

map() takes an existing array, does something to each item in that array, and returns an entirely new array of the EXACT SAME LENGTH, a key attribute of map().

Let's perform a map() on this coolArray.



const coolArray = [1, 2, 3, 4, 5]

const newerCoolerArray = coolArray.map((number) => number * 100)

console.log(newerCoolerArray)
> [100, 200, 300, 400, 500]

console.log(coolArray)
> [1, 2, 3, 4, 5]

Notice that when you console.log(coolArray) it still holds the original values [1, 2, 3, 4, 5].

It's important to reiterate that map() always returns a new array of the exact same length as the original.



coolArray.length === newerCoolerArray.length
> true

.map() in React

So how does map() pertain to React? A common pattern you will see with React is "mapping" data to various HTML elements, in order to display information to the user.

Let's check out that CodeSandbox! In App.js I created an array called fruits:



const fruits = [
  "red apple 🍎",
  "green apple 🍏",
  "orange 🍊",
  "strawberry 🍓",
  "kiwi 🥝",
  "banana 🍌",
  "pineapple 🍍",
  "peach 🍑",
  "watermelon 🍉",
  "mango 🥭",
  "pear 🍐",
  "grapes 🍇",
  "cherries 🍒",
  "lemon 🍋",
  "melon 🍈",
  "coconut 🥥"
];

Which I pass down to my array method components, including Map.js.



export default function Map(props) {
  return (
    <>
      <p className="method-header">
        The FRUITS array has been mapped to paragraph tags below
      </p>
      <p className="method-description">
        The .map method iterates over each item in the "fruits" array and applies the same function/logic to each item. Here we are creating a new paragraph with the p tag for each fruit in our array.
      </p>
      <div className="list-card">
        {props.fruits.map((fruit) => (
          <p key={fruit}>{fruit}</p>
        ))}
      </div>
    </>
  );
}

The key part of this component is:



<div className="list-card">
  {props.fruits.map((fruit) => (
    <p key={fruit}>{fruit}</p>
  ))}
</div>

Let's break it down: inside a <div> we grab the fruits array passed down as props from App.js, and perform our map() to iterate over each fruit in the array, creating a new <p> for each item. Remember that map() accepts a function that it applies to each item in the array. In this case the function is simply us returning a <p> tag.

If you navigate to the CodeSandbox link and select the ".map()" button, you will see our <div className="list-card"> populated with a new line for each fruit! Cool, huh?

With map() you can easily render similarly grouped data to your user. If the array updates somewhere else, it will update in your component! Mapping gives you a handy way to display information without having to manually add a new HTML element for each entry.

.filter()

What if you want to display specific items in your array, and not the whole kit and caboodle?

Enter the filter() method, a very powerful JavaScript function that you will see quite a lot.

From the MDN Web Docs (yayyyy):

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

And my definition:

filter() operates on an existing array, evaluates each item in the array, and whichever items meet the criteria that you define, adds those items to a new array.

Welcome back, coolArray!



const coolArray = [1, 2, 3, 4, 5]

const filteredCoolArray = coolArray.filter((number) => number > 3)

console.log(filteredCoolArray)
> [4, 5]

console.log(coolArray)
> [1, 2, 3, 4, 5]

So what is happening here? filter() takes a function (number) => number > 3 and uses that function to check against each item (number) in the array. Our function asks is the current item in the array greater than 3?

If you were to console.log inside the filter() you would see that each item is being evaluated to true or false. Any item that evaluates to true is added to the new array.



coolArray.filter((number) => console.log(number > 3))

> false // 1 is not greater than 3
> false // 2 is not greater than 3
> false // 3 is not greater than 3
> true // 4 is greater than 4
> true // 5 is greater than 4

And it's pretty obvious here, but we still want to highlight that the main difference between map() and filter() is that almost always filter() returns a new, SHORTER array than the orginal.



coolArray.length
> 5

filteredCoolArray.length
> 2

coolArray.length === filteredCoolArray.length
> false

.filter() in React

Take a look at Filter.js. There is a lot going on here, especially if you're new to React. But let's focus on line 20:



const filteredByLength = props.fruits.filter((fruit) => fruit.length > 10);

Inside props.fruits.filter() we pass the function (fruit) => fruit.length > 10 which asks, "Is the current fruit greater than 10 characters long?"



console.log(filteredByLength)
> ["red apple 🍎", "green apple 🍏", "strawberry 🍓", "pineapple 🍍", "watermelon 🍉", "cherries 🍒"]

filteredByLength.length
> 6 // six fruits evaluate to "true" and make it into the new array

From there we can use our favorite map() method on the filteredByLength array to render only the 6 fruits that are longer than 10 characters:



<div className="list-card">
  {filteredByLength.map((fruit) => (
    <p key={fruit}>{fruit}</p>
  ))}
</div>

Next I demonstrate how to combine filter() and includes().

Bonus content!

Let's briefly talk about includes().

From the MDN Docs:

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.



const coolArray = [1, 2, 3, 4, 5]

console.log(coolArray.includes(3))
> true

console.log(coolArray.includes(6))
> false

If any item in a given array satisfies the condition, the return value is true. If no item in the array satisfies the condition, the return value is false.

When you inject this functionality inside of a filter(), each iteration of the filter() method will check against each single item.

If the return from the includes() is true inside a filter(), that specific item is added to the new array generated by filter().

Take a look at this smaller fruits array. The filter() method iterates through the array, checking to see if each item in the array includes() a "w". We can see that 2 items contain a "w".




fruits = ["apple", "pear", "kiwi", "watermelon"]

fruits.filter(fruit => fruit.includes("w"))

> (2) ["kiwi", "watermelon"]

Back to our regularly scheduled programming

Take a look at how I use filter() and includes() in my Codesandbox to find only fruits with the word "apple" in them.



const appleFilter = props.fruits.filter((fruit) => fruit.includes("apple"));

Which gives us three fruits:



red apple 🍎
green apple 🍏
pineapple 🍍

And map() to <p> tags like the filteredByLength array:



<div className="list-card">
  {appleFilter.map((fruit) => (
    <p key={fruit}>{fruit}</p>
  ))}
</div>

Lastly, I wired up a simple form that stores a user's input in local state, query. A function findFruit() is called on submit:



  const findFruit = (e) => {
    e.preventDefault();
    if (query === "") {
      setFilteredFruits([]);
    } else {
      setFilteredFruits(props.fruits.filter((fruit) => fruit.includes(query)));
    }
  };

Now you can see in real time that when you select the filter() tab, there is an input at the bottom. Type in a character or two and hit submit. This is essentially how a search function works!

.find()

Sometimes when you are working with an array, you want only one matching item.

From MDN Web Docs

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

And my defintion:

find() searches through an existing array, checking each item in the array against a function that you provide, and the FIRST item that returns true is returned. At this point find() stops checking for any more matches.

Let's view an example with coolArray.



const coolArray = [1, 2, 3, 4, 5]

const greaterThanTwo = coolArray.find(number => number > 2)

console.log(greaterThanTwo)
> 3

3 is the first item in the array that satisfies the logic number => number > 2.

And confirming that find() returns the first item that satisfies true



coolArray.find((number) => console.log(number > 2))

> false // 1 is not greater than 2
> false // 2 is not greater than 2
> true // 3 is greater than 2 <-- RETURNED
> true // 4 is greater than 2
> true // 5 is greater than 2

.find() in React

When working with React, you often render specific data based on specific needs/requirements. Like we saw with filter(), we rendered <p> tags of fruits that met a certain requirement.

Similarly, you may want to show only the first matching item from an array.

In the Codesandbox, under the ".find()" tab, I copy/paste the input form and functions from Filter.js into Find.js and change the filter() method to find().

Now when a user types in a single character, a few, or the entire matching phrase, only one fruit will ever be returned. The first match will always be whatever comes first in the array.



const fruits = [
  "red apple 🍎",
  "green apple 🍏",
  "orange 🍊",
  "strawberry 🍓",
  "kiwi 🥝",
  "banana 🍌",
  "pineapple 🍍",
  "peach 🍑",
  "watermelon 🍉",
  "mango 🥭",
  "pear 🍐",
  "grapes 🍇",
  "cherries 🍒",
  "lemon 🍋",
  "melon 🍈",
  "coconut 🥥"
];

const findAFruit = fruits.find((fruit) => fruit === "apple")

console.log(findAFruit)
> "red apple 🍎"

Even though three of our fruits contain the characters "apple", "red apple 🍎" is the first matching item in our fruits array.

mental break time

Let's take a moment to enjoy this relaxing gif of a sunset over an ocean pier. We're about to take a look at our final array method, .reduce() and it's a doozy. Take as long as you need. When you are feeling thoroughly relaxed, we'll dive in...

.reduce()

The reduce() method is incredibly powerful, but can be intimidating to beginners. I am STILL intimidated sometimes! The most important thing to remember about reduce() is it operates on every single item in an array, and returns a single value. In other words, it takes all the items in your array and REDUCES them down to one single item. reduce() gives you a lot of control on how you can do achieve the desired end result.

From the MDN Web Docs:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Check out this example with coolArray to reduce all the numbers to a single value:



const coolArray = [1, 2, 3, 4, 5]

const reduceCoolArray = coolArray.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 0)

console.log(reduceCoolArray)
> 15

// Each argument's current value as it steps through the array:
// Pass 1. accumulator = 0, currentValue = 1, return value = 1. 
// Pass 2. accumulator = 1, currentValue = 2, return value = 3. 
// Pass 3. accumulator = 3, currentValue = 3, return value = 6.
// Pass 4. accumulator = 6, currentValue = 4, return value = 10.
// Pass 5. accumulator = 10, currentValue = 5 final return value = 15.

Whew. A lot to unpack here. According to the MDN docs:

The reducer function takes four arguments

Accumulator

Current Value

Current Index

Source Array

Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

For now, we will just focus on the Accumulator and Current Value arguments.

Let's break down the above code snippet:

The 0 at the end of the provided function is the initial value at which the accumulator begins. If we change the initialValue to something else, the accumulator begins at that value and we will receive a different final output value.

(If there is no initialValue, the accumulator initializes as the first item in the array).



const coolArray = [1, 2, 3, 4, 5]

const startAt100 = coolArray.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 100)

console.log(startAt100)
> 115

// The value of each argument during the iteration process:
// Pass 1. accumulator = 100, currentValue = 1, return value = 101. 
// Pass 2. accumulator = 101, currentValue = 2, return value = 103. 
// Pass 3. accumulator = 103, currentValue = 3, return value = 106.
// Pass 4. accumulator = 106, currentValue = 4, return value = 110.
// Pass 5. accumulator = 110, currentValue = 5 final return value = 115.

Notice that the return value from the previous iteration/call becomes the new accumulator value.

.reduce() in React

Okay, time to be honest with y'all. I had a difficult time thinking of a good use case for the reduce() method on our fruits array.

Thankfully my friend Katherine Peterson gave me the idea to transform the array of fruits into a single object with the fruit name as the key and its corresponding emoji as the value.

Kind of like this cuteAnimals object:



cuteAnimals = {
  hedgehog: "🦔",
  chipmunk: "🐿️",
  hamster: "🐹",
}

Navigate to the Reduce.js file and look at lines 6-12.



const fruitsObj = props.fruits.reduce((accumulator, currentValue) => {
  const fruitName = currentValue.slice(0, -3);
  const fruitEmoji = currentValue.slice(-2);
  const obj = { ...accumulator };
  obj[fruitName] = fruitEmoji;
  return obj;
}, {});

Notice the initialValue is set to an object, {}. If you recall, reduce() returns a single value. While an object can contain an infinite amount of information, it is still considered a single object/value.

Let's break it down:



// remove the emoji, keeping only the fruit name
const fruitName = currentValue.slice(0, -3);



// similarly, remove the fruit name, keeping only the emoji
const fruitEmoji = currentValue.slice(-2);



// create an object that updates with each pass of the accumulator
const obj = { ...accumulator };



// set the object's key to fruitName and value to fruitEmoji
obj[fruitName] = fruitEmoji;



// finally return the obj
return obj;

Now we can console.log our fruitsObj object.



> {red apple: "🍎", green apple: "🍏", orange: "🍊", strawberry: "🍓", kiwi: "🥝"…}
red apple: "🍎"
green apple: "🍏"
orange: "🍊"
strawberry: "🍓"
kiwi: "🥝"
banana: "🍌"
pineapple: "🍍"
peach: "🍑"
watermelon: "🍉"
mango: "🥭"
pear: "🍐"
grapes: "🍇"
cherries: "🍒"
lemon: "🍋"
melon: "🍈"
coconut: "🥥"

Woohoo! A single object with fruit names as the properties/keys and their corresponding emojis as the value!

In React you can't just render an object, or you get:



Error
Objects are not valid as a React child

So you have to get fancy with Object.entries() and map().



{`fruitsObj = {`}
{Object.entries(fruitsObj).map(([key, val]) => (
  <p key={key}>
    {key}: "{val}",
  </p>
))}
{`}`}

Giving us:

Cool! But, not very useful on its own.

What if we used fruitsObj to create a "search for emoji" feature? We can search by name, and if there are any matches, we get the corresponding emoji.

I use the same form from both the filter() and find() sections to grab the user's input, query.

I decided to show the keys and values separated by columns in a table.

Check it out:



<table className="table-card">
  <tbody>
    <tr>
      <th>FRUIT</th>
      <th>EMOJI</th>
    </tr>
    {query && atLeastOneTrueQuery ? (
      Object.entries(fruitsObj).map(([key, val]) =>
        key.includes(query) ? (
          <tr key={key + val}>
            <td key={key}>{key}</td>
            <td key={val}>{val}</td>
          </tr>
        ) : null
      )
    ) : (
      <tr>
        <td>No</td>
        <td>Matches</td>
      </tr>
    )}
  </tbody>
</table>

(I know, I know! Nested ternaries! 😱😱😱 Not the prettiest, or easiest to read. If you have a better idea how to refactor this, let me know! But it does the job for now.)

Essentially, if the user has typed in the search bar, query updates with the user's input. If atLeastOneTrueQuery holds at least one matching fruit, then map() and render the fruit(s) and its emoji in the table. Otherwise, render a table section that tells the user "No Matches".

Type in "g" and you can see four fruits contain the letter "g" and now we can grab their matching emojis!

Hopefully this contrived example shows you how useful reduce() can be. There are probably a million better use cases for it. Let me know in the comments below if you've ever worked with reduce() and if you've done anything interesting with it!

Wrapping Up

If you've made it this far, GREAT JOB. And thank you! My hope is you now better understand the array methods we covered, and how you can use them in React.

I learned so much creating these examples and writing this post. The reduce() method was the hardest for me to wrap my brain around, but I feel as though I have a much better understanding when and why to use it, and how it works.

If you enjoyed this article, please like it, save it, share it! Whatever you want to do with it!

Also, follow me on Twitter, where I talk about my development journey, share anything I am working on, highlight other developers and their projects, and sometimes tweet silly memes!

When Part III in the Essential JavaScript Building Blocks for React series is released, come back and check that out!

I welcome your feedback, insight, criticism, ideas, etc! Let me know in the comments what you think!

Thank you again and BE GOOD!

Essential JavaScript Building Blocks for React

James Cox — Wed, 28 Apr 2021 22:06:12 +0000

Recently I had a conversation with my good friend Julio 🌮 about the minimum required JavaScript concepts to get started with React. I realized in that discussion with Julio that I have been building apps with React for over a year now, but I have never considered which JavaScript concepts and patterns are common in React.

With the help of my other good friend Katherine, we came up with the following list:

array methods: map(), filter(), find() and reduce()
template literals (string interpolation)
functions/arrow functions
array destructuring
object destructuring
spread operator
default parameters in functions
conditionals
ternaries
&&, ||, ??
async functions/promises

Feeling a bit like Spongebob and Gary yet??

If you are looking at this list and feeling overwhelmed, I am confident that when you have completed this series, you will feel much more comfortable diving into React.

The purpose of this JavaScript Essentials for React series is two-fold:

Help others trying to break into React. I have strong opinions in favor of learning a framework like React even if your JavaScript isn't as strong as you'd like it to be.
Reinforce my own understanding of these core JavaScript concepts. During my talk with Julio, I quickly realized where my own gaps are. Through the process of looking at documentation and coming up with examples to explain a particular fundamental, I felt as though I learned just as much as Julio!

Disclaimers

This series focuses on ES6 JavaScript
Any examples are templated with Create React App (CRA) or CodeSandbox
All React components/examples will use functional components and Hooks

Final Thoughts

Each concept listed above will receive its own post
I will update this post with a link to each one as they are created
I will make this post Part 1 in the series
I might change the order in which I work through this list, depending on if some topics require knowledge of a previous topic.

As always, THANK YOU SO MUCH for reading my posts and I look forward to creating this series and sharing it with everyone. I know there are probably hundreds of similar posts on this topic, but like I previously mentioned, this series is just as much for me as it is for others!

First up is array methods (map, forEach, filter, find, reduce, etc.)

Alright y'all, its...

How long did you have to wait?

James Cox — Mon, 24 Aug 2020 22:57:58 +0000

QUESTION

How long did you have to wait until you got your first interview?

Background

I graduated from Flatiron School in March. I had a couple projects and not much else to show for my studies, except a tremendous hunger to keep learning and creating as many apps as quickly as I could.

After moving to Austin, Texas in mid-May I have:

sent out over 300 applications
built over 10 new apps and two different portfolio sites
had a few different conversations with recruiters
attended virtual meetups
networked on all the social media platforms
coded consistently every day between 6-10 hours a day

And I have yet to have ONE interview. Is that crazy?

FOLLOW-UP QUESTION

Do you ever wonder what in the world is wrong with you?

I would love to hear YOUR experiences and how you deal with these kinds of obstacles / pressure to stay relevant and hopeful that things will turn around!

I am not a negative guy, but when I look back at all the hard work I've been putting in, I am almost astounded that I haven't even had one interview. Makes you think!

Flexbox Rocks!

James Cox — Mon, 24 Aug 2020 19:17:21 +0000

Introduction

Yesterday I refactored a Codesandbox with Flexbox, which displays cards of "Powerful People", their names, roles, hobbies and a picture.

I wanted to accomplish two things.

structure the card itself using flexbox.
display all the cards in either a responsive row of cards on wider screens, or a single column of cards on narrow screens.

The card.

The cards in flexbox row on wider screen.

The cards in a flexbox column on narrower screen.

This post will attempt to breakdown not only how I did this with CSS and HTML, but also the process of designing the card beforehand.

Step One - Design

I use Excalidraw to mock up elements on a website. Excalidraw lets you quickly see your ideas on the screen and gives you a handy reference when you begin coding.

I came up with this mockup for the card.

And the layout for all the cards.

Looks pretty good. Now the hard hard part is making my cards look and behave like I want.

Flexbox resources

If you have never tried to use CSS flex properties before, I highly recommend playing around with Flexbox Froggy, which sort of makes learning flexbox a game. I promise if you go through the tutorial a couple times, you will have a much better idea of how to use flexbox.

Another great resource is CSS-Tricks' A Complete Guide to Flexbox.

Step Two - Understanding Your Design

I started to understand flexbox when I started to imagine every element on the screen as its own mini screen. For example, the card is its own contained environment. The inner contents of the card do not (have to) care about the elements outside of it. And the layout that ALL the cards live in is ITS own environment. It does not (have to) care about the other elements on the screen.

I think it helps to start with the outermost "environment" (represented by a <div> in your HTML) and work inwards. The outermost environment of my Powerful Person site is represented by the outermost <div> in my HTML.

<div className="App">

CSS

.App {
  text-align: center;
}

The property text-align: center; places the title "Powerful People" in the center.

Next I want to display all my cards in rows. I need to create another "environment" where I can apply the flex properties to my cards and display them in rows.

Take a look at this image to see how I broke down the CSS and HTML:

I create a new CSS class .wrapper that will "wrap" around all my cards and dictate their layout.

.wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
 }

EDIT: It has been pointed out to me that row is the default value for the flex-direction property. Which makes including it in .wrapper redundant. I am going to keep it here so that others can learn from this and I can reference it later if I need to.

Flexbox has a lot of awesome properties, and one of those is flex-direction. You can do rows, columns, reverse rows, and reverse columns. flex-direction: row places the cards in a single, horizontal row.

What is flex-wrap: wrap?

To illustrate, I will comment out that line.

.wrapper{
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: center;
}

Yikes. The cards are over-flowing off the screen.

Well that is just not great. The wrap property sends the last off-screen element down to create a new row within the confines of the parent div.

justify-content: center; is pretty easy to understand. Let's take a look at examples with that line commented out and then when we add it back in.

.wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
}

With justify-content: center; back in.

Shifting Gears - Responsive CSS

This is about the point in time when I realized that I was creating "desktop-first" design, and I wanted to shift to "mobile-first" design practices.

Responsive web design makes websites adjust how they appear on the screen depending on the screen size. This is achieved with CSS "media queries" which the developer defines based on how they want their site to behave. If you are not familiar with CSS media queries, check out these examples from w3schools.com.

CSS media queries are outside the scope of this post (and once I write one, I'll link it here).

However, I must talk about how I refactored my .wrapper class to display my cards in a single column on a mobile device and added a second CSS file responsive.css with media query for my wrapper class to change the flex direction back to rows when the screen is wide enough.

First my refactored, mobile-first CSS .wrapper class.

.wrapper {
  display: flex;
  flex-direction: column;
}

Now all my cards are in a single, vertical column. Whatever the screen size is, my cards now will always be in a single, vertical column.

I want them still be displayed in rows on larger screens. I need a CSS media query.

(Don't forget to import responsive.css into your top-level component. For me that is App.js.)

/* responsive.css */

@media only screen and (min-width: 1100px) {
  .wrapper{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

EDIT: I mentioned above that having flex-direction: row; was redundant, but it is NOT redundant here. This media query is over-riding the flex-direction: column; that I refactored earlier.

I am telling my .wrapper class to change its flex direction back to rows whenever the screen device is 1100px or larger.

Confession

I actually created the cards first. Before I figured out how to display all the cards in rows or columns. Before I switched from a desktop-first design to mobile-first design.

There was a reason for that. At first I was using "dummy data" and only had one card on my screen. I had not yet created my local API. No need for defining a layout.

BUT. It made sense first to talk about the concepts of flex from the outermost environment to the innermost (my cards). If you were creating your own layout, you could easily replace the cards with CSS placeholders if you want to see how elements might appear on the screen.

You could do something like:

.card {
  align-self: center;
  background-color: rgb(20, 20, 20);
  margin: 1rem;
  width: 90%;
  height: 15rem;
}

And then your HTML:

<div className="wrapper">
    <div className="card" />
    <div className="card" /> 
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" />
    <div className="card" /> 
</div>

This will simulate multiple cards mapped and rendered to your screen.

Step 3 (kind of) - Creating the Cards

Take a look at this Excalidraw sketch I made:

Remember my mental model that each element on your page can be considered its own "environment". Each card lives inside the .wrapper environment, but whatever is INSIDE the card will have no idea how to behave until we create a new environment that dictates how to look and act.

Each .card div has its own "wrapper" div called .row.

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

Here we are telling the contents inside our card to display in a horizontal row, next to each other left to right.

Next, each element inside the .row class will be "wrapped" in a div called .column.

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

Now any elements inside the .column class will displayed vertically due to flex-direction: column;.

What is flex: 1?

According to CSS Tricks

flex: positive-number
Equivalent to flex: 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Now anything inside the .column class will respond to display: flex; and we can use flex properties. Take a look at the rest of my CSS which dictates the layout of the card's contents:

.info {
  margin-top: .5rem;
  margin-left: 1rem;
}

h1 {
  align-self: center;
  font-family: 'Bangers', cursive;
  font-weight: lighter;
  font-size: 3rem;
  color: rgb(20, 20, 20);
}

h4 {
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  margin-top: -.5rem;
}

p {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -.5rem;
}

ul {
  margin-top: -.5rem;
}

li {
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

img {
  align-self: flex-start;
  border-radius: 2rem;
  object-fit: cover;
  height: 8rem;
    width: 8rem;
}

You will notice that each HTML element (h1, h4, li, p and img) is utilizing a flex property, text-align or align-self. Because they are inside the .column class, they are responding to the display: flex property.

And finally my full App.js component.

import React from "react";
import "./styles.css";
import "./responsive.css"
import PersonData from './data/personData'

export default function App() {
  return (
    <div className="App">
      <h1>Powerful People</h1>
        <div className="wrapper">
          {PersonData.map(person => {
            return (
              <div className="card" key={person.id}>
                <div className="row">
                  <div className="column">    
                      <img src={person.url} alt={person.name} />  
                  </div>
                  <div className="column">
                    <div className="info">
                      <p>Full name</p>
                      <h4>{person.name}</h4>
                      <p>Profession</p>
                      <h4>{person.role}</h4>
                      <p>Hobbies</p>
                      <ul>
                        {person.hobbies.map((hobby, i) => { 
                          return(     
                            <li key={i}>{hobby}</li>
                          )
                        })}
                      </ul>
                    </div>
                  </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

Notice that the information about each person is an extra class called .info in order to add some extra alignment and spacing between my two columns.

Wrapping Up

Thank you for reading my breakdown of Flexbox and I hope that you walk away feeling a little more confident about how to use flex properties to improve your CSS layout and design skills!

As always, I would love feedback and constructive criticism. I am sure there are tons of things I can still learn and improve. If you see anything I can do or explain better, let me know in the comments!

Thanks again and HAPPY CODING!

I Understand Flexbox!

James Cox — Sun, 23 Aug 2020 23:06:42 +0000

I just want to take a moment and celebrate a pretty big moment for me. I have been attempting to use flexbox on and off for months now, and having some success here and there, but relying more on React component libraries like Material UI (my favorite!) which has a lot of flex properties built in.

Today I opened up a recent Codesandbox and reworked the layout with responsive rows and columns. And it finally clicked!

Do you ever have that moment where something becomes clear in your minds' eye and not just an abtract idea? Now I literally can visualize the CSS for different types of flex layouts.

This card I made below features rows and columns inside the card, and the cards themselves are placed in a series of rows and columns, depending on the screen size.

Tomorrow I am going to write the article about HOW I did it. But today I am going to celebrate my personal victory and enjoy the rest of my evening!!

(A big thank you to Flexbox Froggy for helping me understand and visualize the concepts.)

Be sure to check out my latest post on how I created the layout with Flexbox: Flexbox Rocks!