The Frontier

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS - Examples

Sam Phillips — Mon, 05 Sep 2022 16:20:55 GMT

Introduction

I previously posted about using HTML and CSS to create banner images on the fly without the use of any tooling other than chrome.

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS

It seemed to garner a fair amount of interest, so I thought I would extend it with some base examples of banners I have used in the past.

All examples are set to 1600x840 as that is the recommended resolution for cover images on hashnode, all examples can be tweaked to your preferences easily.

Slightly more in depth than the original article, but the same simple principle 👍

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Bannertitle>

        <style>
            /* Perform the ritual sacrifice to the gods of W3C */
            *, *::before, *::after {
                box-sizing: border-box;
            }

            .banner {
                /* Desired width */
                width: 1600px;

                /* Desired height */
                height: 840px;

                /* A nice looking gradient at a 45deg angle because i'm edgy */
                background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

                /* White text seems appropriate */
                color: white;

                /* Some padding to help text wrap nicely */
                padding: 5rem;

                /* Chrome supports Segoe UI out of the box and it's usually good enough for banners */
                /* Easy to import a custom font though! */
                font-family: Segoe UI;

                /* And finally just use flex-box to center the text vertically */
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .text {
                /* Center the text horizonally too */
                text-align: center;

                /* Font size set to whatever looks best */
                font-size: 80px;
            }
        style>
    head>
    <body>
        <div  class="banner">
            <div class="text">Create <strong>Beautifulstrong> Banners and Other <strong>Graphicsstrong> Easily Using <strong>HTMLstrong> and <strong>CSSstrong>div>
        div>
    body>
html>

Using the power of transform to rotate a div on the x and y axis looks really nice when combined with the perspective function and can create real depth. This example uses the same gradient as before, but you can do what you like! Throw in a background image, and it can look amazing!

If you use React, check out Create Beautiful 3D Perspective Images Easily Using React and CSS to really have some fun with perspective transforms!

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Bannertitle>

        <style>
            *, *::before, *::after {
                box-sizing: border-box;
            }

            .container {
                width: 1600px;
                height: 840px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .banner {
                /* Whatever width and height seems good for the card within the banner space */
                width: 1200px;
                height: 680px;
                background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
                color: white;
                padding: 5rem;
                font-family: Segoe UI;

                display: flex;
                justify-content: center;
                align-items: center;

                /* Perspective magic */
                transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale3d(1,1,1);

                /* Make it pretty */
                border-radius: 18px;
                box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

                /* Perspective transform can offset the element, this is just to move it back to a more centered origin */
                position: relative;
                left: -60px;
            }

            .text {
                /* Center the text horizonally too */
                text-align: center;

                /* Font size set to whatever looks best */
                font-size: 60px;
            }
        style>
    head>
    <body>
        <div class="container">
            <div  class="banner">
                <div class="text">Create <strong>Beautifulstrong> Banners and Other <strong>Graphicsstrong> Easily Using <strong>HTMLstrong> and <strong>CSSstrong>div>
            div>
        div>
    body>
html>

Using ::before on the same element, we can use blur filter in CSS to create a glow effect behind the card with the same gradient background! 👍

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Bannertitle>

        <style>
            *, *::before, *::after {
                box-sizing: border-box;
            }

            .container {
                width: 1600px;
                height: 840px;
                display: flex;

                /* A little padding to make sure the glow is not occluded */
                padding: 30px;
            }

            .banner {
                /* Whatever width and height seems good for the card within the banner space */
                flex: 1 1 auto;
                background: linear-gradient(45deg,#0575e6,#00f260);
                color: white;
                padding: 5rem;
                font-family: Segoe UI;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 18px;

                /* Explicitly specify relative position so glow::before binds to it as an absolute pseudo element */
                position: relative;
            }

            .glow::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                background: linear-gradient(45deg,#0575e6,#00f260);
                z-index: -1;
                filter: blur(20px);
            }

            .text {
                text-align: center;
                font-size: 70px;
            }
        style>
    head>
    <body>
        <div class="container">
            <div  class="banner glow">
                <div class="text">Create <strong>Beautifulstrong> Banners and Other <strong>Graphicsstrong> Easily Using <strong>HTMLstrong> and <strong>CSSstrong>div>
            div>
        div>
    body>
html>

This follows on from the glow effect, and extends it to show a white background for the content and uses mix-blend-mode as a mask to show the gradient in the text itself!

This could probably be simplified, but considering it's just a simple banner to generate an image from, it's of little consequence.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Bannertitle>

        <style>
            *, *::before, *::after {
                box-sizing: border-box;
            }

            .container {
                width: 1600px;
                height: 840px;
                display: flex;

                /* A little padding to make sure the glow is not occluded */
                padding: 50px;
            }

            .banner {
                /* Whatever width and height seems good for the card within the banner space */
                flex: 1 1 auto;
                background: linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
                /* color: white; */
                font-family: Segoe UI;

                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 18px;

                /* Explicitly specify relative position so glow::before binds to it as an absolute pseudo element */
                /* Also for the absolute text element */
                position: relative;
            }

            .glow::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                background: linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
                z-index: -1;
                filter: blur(20px);
            }

            .text {
                display: flex;
                align-items: center;
                text-align: center;

                font-size: 80px;

                /* Set the text element to fill its containers space */
                position: absolute;
                inset: 0;

                /* Set the same border-radius as the container, overflow may cause issues */
                border-radius: 18px;

                /* Set the background color of the text element to hide the gradient background of .banner */
                background-color: white;

                /* Set the color to black and then mix-blend-mode to lighten it to the background gradients color */
                color: black;
                mix-blend-mode: lighten;
            }
        style>
    head>
    <body>
        <div class="container">
            <div  class="banner glow">
                <div class="text">
                    <span>Create <strong>Beautifulstrong> Banners and Other <strong>Graphicsstrong> Easily Using <strong>HTMLstrong> and <strong>CSSstrong>span>
                div>
            div>
        div>
    body>
html>

Conclusion

That's it for now! I'll most likely keep adding to this article in the future with some more examples as I create more for my own use cases.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

The Best Tool to Accelerate Your Career as a Software Engineer

Sam Phillips — Thu, 25 Aug 2022 17:55:17 GMT

Introduction

I left university at 23 years old, and got my first job for that same university earning around £23k a year, I have been in full time employment ever since and by the age of 29, was earning over £90k. In the US, that would be graduate salary to 6 figures in 6 years!

I attribute this success to one thing and one thing only, my brain.

(I know that sounds pretentious, but trust me, please keep reading).

I was initially attracted to quick hacks, got sucked into a cycle of trying to make my way through my career, choosing the fasted path to success. The key takeaway I internalized from reading posts like “Move fast to get paid more, the secret to getting a raise as a software engineer”, was to get a different job within 2 years to get your pay increases faster. I applied to many roles that paid more money, went to interviews, and got offered jobs. The only problem with this was that the money they offered was about the same as I was paid now, or I was simply rejected.

I began to realize that the issue wasn't the process, it was me. What I had read and learnt wasn't working. The advice I had taken to heart was probably not good advice.

In this article, I offer my thoughts on what I think can craft a path to success in the shortest time possible, without relying on luck, or anything else other than yourself.

Quick hacks never work

The internet and social media is full of quick hacks, “this one tool can save you time, make you money, get you a job” (okay maybe that last one might help).

People selling guides and courses on how to get rich quick, mastering drop-shipping, etc. These are all things that can be very attractive to software engineers, as there is always the thought in our heads that we could automate that with software. It is true that these processes can be automated, the issue is the processes themselves don't work in the way they advertise.

Courses to master a particular aspect of software development are fine, courses that are created by academic institutions for the purpose of learning are great (Stanford University has a free machine learning course, and it is amazing)!

However, courses that allude to being able to master anything in a short period of time, will probably be too good to be true.

Software boot camps can be great, but the surrounding marketing is very misleading. They focus their messaging around getting you a job very quickly, but miss out the part that they only teach you exactly what you need to get through the door. You will have to learn the fundamentals, and the vast expanse of knowledge required to progress in that job long term, on the go (not that that's especially a bad thing).

Take responsibility for yourself

If there is one message you internalize from this article, let it be this one. Take responsibility for yourself. Don't blame others for your shortcomings. Not being able to get a job after getting a degree, is not the universities fault. Not being able to make a sale, is not the Udemy course on closing sales fault. Deploying a bug to production is not the CI/CD pipelines fault, or whoever reviewed the codes fault. It is unequivocally your fault, always, and that's okay!

If you have any habit of laying blame on anything other than yourself for things instigated by you, stop. If you even find yourself subconsciously looking for an excuse, stop. The faster you accept that something you did, didn't pan out, was because of you, the faster you can get on with learning from that mistake.

The better you get at identifying when you could have done better, the faster you will trigger the learning process that comes from it. Without doing this, you will never trigger the learning process, and will never improve.

The art of compounding knowledge

Just like investment profits that is re-invested into a fund. Experience, and knowledge, compounds over time. It can be hard to explain this, but I will give it a shot.

A lot of knowledge acquisition is driven by the desire to gain that knowledge. When you get stuck during a learning process, you will often get unmotivated, and procrastinate on continuing to learn it. This is simply human nature, and eventually if you are determined, you will pick it back up and push through the hard parts.

Now, let's imagine you want to get better at maths. You are working through a course, but end up dropping it halfway through due to some problem you can't figure out. You start a different course that focuses on other aspects of maths, you hit a similar issue and get demotivated and move on to yet another course. The third course explains a concept that can be used to solve the problems you were stuck on in the previous courses. The light bulb moment hits, and you are immediately hit with dopamine and are suddenly super motivated to continue on with all three courses and complete them.

Now take this concept and apply it to all knowledge you have about everything you know. The more you know, the greater chance there is for learning something new to connect more dots. The more light bulb moments you have, the higher the chance of the next light bulb moment opening more doors.

If you feel you have a better way of explaining what I have just explained above, please let me know, I don't think this explanation is very good 😂

Reduce the noise when learning

If you are trying to learn something, give that thing your undivided attention. Having TV on in the background whilst reading an article will distract you enough for the information to go in one ear and out the other.

By making a habit of focusing solely on consuming the information you need to consume, the quality of that information goes through the roof, and you will retain that information for much longer.

It can be very easy to get distracted in today's world, your phone is pinging you every 2 minutes with a text message, or new YouTube video recommendation. It's so easy to divert your attention from what you are reading, even just for a second. Take the time to isolate yourself from these distractions before consuming the information you want to consume.

If you grow tired and demotivated with what you are reading or watching, just stop, and come back to it. Having distractions can make it easier to keep going with what you are trying to consume, but by the end, will you have really consumed, and understood it? Or did you just waste your time?

Learning how to learn

This is something that only you can answer. It's important to understand yourself, and how you learn best. If you can watch and understand everything you watch without a break for hours, but can only read a book for 5 minutes without getting distracted, you should focus on visual/auditory learning materials. If you are a bookworm but get restless watching TV, buy books on the topics you are trying to learn.

This may sound simple, but I have found when I really analyze my learning habits, that in some situations, there is no point in trying to learn at all, and I might as well save time and go do something I actually want to do.

Try to pay attention to yourself in different situations and acknowledge when you are excited, or bored, interested or demotivated. Try to analyze why you feel that way in those moments, and capitalize on what you can infer.

Master the tools and skills at your disposal

Everything you do requires a skill set that you may not even think about when you do it. When you read, you use the skill of reading. When you write code, you use the skill of typing, and the toolset provided to you by your text editor.

I have found the speed in which I do things, like writing code, is not limited by my ability to think of what code to write, but my ability to get the code on the screen. I still get frustrated knowing what I need to implement, but can't just make it just appear and need to spend an hour getting it all typed out.

Did you know in VS Code, you can select multiple of the same word with ctrl+d? Did you know if you hold ctrl+alt and press down arrow you can create multiple cursors on multiple lines? Hell, you can do that anywhere just by holding alt and clicking multiple places in the code! These are just a few examples. There are literally hundreds of shortcuts that would take an implementation from hours to minutes. Extensions that provide snippets, so you don't have to write the same boilerplate of a React component ever again. Extensions that auto format your code to your specification every time you save the file.

You get the idea. The faster you can get through the parts where you aren't learning anything, the faster you can get to learning more (if this were a motivational speech, I would start looping back to the art of compounding knowledge, but let's crack on).

Getting even more granular, reading and typing is a skill that, as a software engineer, you use constantly. Have you ever thought to spend time actually honing these skills that underpin everything you do? If you could do these two things twice as fast, would you not be able to do pretty much everything twice as fast?

I try to assign an hour or so a week to enhancing these skills, and it turns out it can be really fun! Personally, I got really addicted to The Typing of The Dead on Steam and ended up just playing it for fun! There are lots of free typing games too!

Just like typing, there are lots of free and paid games and apps out there that aim to help you improve your reading speed. There are also tools to help you read faster by highlighting parts in every word. There are techniques like “Bionic Reading” and chrome extensions like SwiftRead that take alternative approaches. These really do improve reading speed and can help immensely if this is a major flaw for you, like it is for me.

Conclusion

Your brain is the best tool you will ever have, listen to it, and use it to your advantage!

That's it! I hope this helps you to look at yourself, listen to yourself, and hone what's already there to accelerate your career!

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Lessons Learned From Conducting Junior Software Engineer Interviews for Small Companies

Sam Phillips — Thu, 18 Aug 2022 15:07:39 GMT

Introduction

I have worked for smaller software companies most of my career, and from what I can gather, the interview process can range from overly formal, to overly informal. Every small company is different, and generally will conduct interviews based on the direct influence of whoever is actually doing the interview.

However, having conducted interviews for quite a few small companies, I have found amid the vastly varying criteria, there are a few common principles that usually lead to a successful hire. In this article, I will be doing my best to give you an insight into what can be the deciding factor when interviewing for a position at a small company.

Why join a small company?

Getting a job as a software engineer can be far more fulfilling than working for a larger company, if you find the right fit.

Pay can be just as high, if not more

You can be paid just as much as working at a larger company, although you may have to expect a smaller wage packet to start with. Doing well in a small company is far more likely to result in immediate returns in the form of bonuses or pay rises. Whereas in a large company, there will be a far more formal policy in place to review and reward.

You may have more autonomy

Depending on the type of work the company does, you may be given a lot more autonomy. This is especially true when given greenfield projects to work on, small companies rely on you taking ownership of your work to move forward quickly.

You will most likely have more impact on the direction of projects

With smaller teams, and less management and design overhead, the responsibility of where a product goes, and harvesting user feedback falls to you. This is a great opportunity to sink your teeth into other aspects of the design process by interacting directly with users.

You may have more creative freedom

Along with autonomy, you may find you are also free to use the technologies and languages you are comfortable with. Or at least have a stronger weight to your opinion on what technologies are best to solve this particular problem.

What does a small company look for in a junior engineer?

Unlike larger companies that will usually have a formalized onboarding path for you, smaller companies will most likely play it by ear. The people hiring you will not know for certain what you will need to know before hiring you, so will most likely take a more general approach when it comes to finding out how technically competent you are. You may find that they simply start conversations flowing based on your previous experience that resonates with them.

Technical testing will mostly be informal too, baseline questions to prove you weren't lying on your CV/resume, along with more advanced questions to test you on your claimed experience.

Now, this all may sound like a normal interview at any company, but I assure you a lot of is designed beforehand with a hidden underlying mission. This underlying mission will be slightly different fore every small company, and is usually curated based on experiences they have had hiring poor performing engineers, or people that ended up not being a great culture fit.

Junior developers have so much to learn, and are known to be sponges that can be moulded into what you need them to be. This is why, after trial and error, I found the one thing I required from a candidate when interviewing, was to be interested in learning, that's it.

I would take this as far that I would ask many questions covering a very broad spectrum of technologies, knowing that they couldn't be proficient in all of them. I did this not only to get a gauge of their experience, but to see if they would respond with “I don't know” or “I don't know, what's that?”. There is a massive difference between the two, and consistently asking about the topic I have brought up is what I looked for. If the candidate is eager to understand everything they come across, they are likely to grow quickly and succeed!

What YOU should look for in a small company

An interview is a two-way street, a double-edged sword. Just as you may not be a good fit for a company, a company may not be a good fit for you! You have to understand this and come to an interview prepared to ask questions that give you an insight into the company culture.

Some questions to consider asking

Do any employees do anything outside of work together?

This lets you get a sense of the company culture, if you are a bookworm that likes to game online, you may not like to work in an environment where you are expected to go binge-drinking with the sales guys twice a week.

How many experienced engineers does the company employ?

This lets you gauge your growth potential. Self learning can be good for you, but having multiple experienced engineers at your fingertips will catapult your progress.

Who would I be interacting with on a daily or weekly basis?

This allows you to get a head count of the people you would be working closely with. You will also want to be meeting the majority of them, if not all of them, prior to accepting a job offer, as you may not like the environment otherwise.

Who would be training me? If I had a problem I was struggling with, who would I be able to go to for support?

Onboarding can be a pretty hectic experience in smaller companies, and knowing that they have already addressed who will on-board you and provide ongoing support will give you some peace of mind that the experience will be a good one.

What would I do for me to be considered successful in this role?

This one was requested by Victor Eke and originally proposed by Danny Thompson!

This is a great question to ask if you are still unsure about the scope of the roles you would be expected to perform. It may also uncover aspects of the job that you didn't realize were expected of you, and you may not like them!

Conclusion

That's it! I hope this article helps land a job at a smaller company if you are considering it. Some of my best years in the industry have been at small companies! Take the time to consider what you want from your career as a software engineer, and don't just jump onto the first boat you find, because it may already be sinking!

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

React Hooks You Will Love ♥

Sam Phillips — Tue, 16 Aug 2022 16:16:20 GMT

Introduction

If there is one this I love, it's doing more, with less.

useState is the bread and butter of React. And it's simplicity offers many use cases. However it's simplicity comes at the cost of having to implement various complexities outside of the hook that could be included in the hook itself.

In this article I offer a few abstractions that you can use and extend to help tackle some of the common use cases you may come across when building an application in React.

useValue

useValue is the simplest in this list. All it adds to useState is a utility function that resets the value to whatever you specified as the default value. This however is deceptively useful in situations where you need to clear text boxes and can create a better user experience.

const useValue = (defaultValue) => {
    const [value, setValue] = useState(defaultValue);

    const resetValue = () => {
        setValue(defaultValue);
    };

    return [value, setValue, resetValue];
};

Here it is in action:

const [value, setValue, resetValue] = useValue("Test");

return (
    <>
        <input
            value={value}
            onChange={(ev) => setValue(ev.target.value)}
        />
        <button onClick={resetValue}>Resetbutton>
    
);

useCounter

useCounter does exactly what it says, it counts. However with a little extra logic around allowing the specification of min, max and step parameters, it becomes everything you need to implement paging, or anything that would require incrementing or decrementing a number.

I would use this as a base in a usePaging hook for paging logic that fits my specific use case on that page.

const useCounter = (defaultValue, step = 1, min, max) => {
    const [value, setValue] = useState(defaultValue);

    const resetValue = () => {
        setValue(defaultValue);
    };

    const setCount = (newValue) => {
        newValue = typeof max === "number" ? Math.min(newValue, max) : value;
        newValue = typeof min === "number" ? Math.max(newValue, min) : value;
        setValue(newValue);
    };

    const increment = () => {
        setValue(
            typeof max === "number" ? Math.min(value + step, max) : value + step
        );
    };

    const decrement = () => {
        setValue(
            typeof min === "number" ? Math.max(value - step, min) : value - step
        );
    };

    return [value, setCount, resetValue, increment, decrement];
};

Here it is in action:

const [
    count,
    setCount,
    resetCount,
    incrementCount,
    decrementCount
] = useCounter(1, 5, 0, 400);

return (
    <>  
        <input
            value={count}
            onChange={(ev) => setCount(Number(ev.target.value))}
        />
        <button onClick={incrementCount}>Increment Countbutton>
        <button onClick={decrementCount}>Decrement Countbutton>
        <button onClick={resetCount}>Reset Countbutton>
    
);

useObject

useObject saves so much boilerplate code over time and can be used in some really sophisticated use cases elegantly. The main use case for it is simply filling out a form of many values that you eventually need to validate and send off to an API. I use this constantly and it has saved me so many keystrokes!

const useObject = (defaultObj) => {
    const [obj, setObj] = useState(defaultObj);

    const updateObj = (updateObj) => {
        setObj({ ...obj, ...updateObj });
    };

    const resetObj = () => {
        setObj(defaultObj);
    };

    return [obj, setObj, updateObj, resetObj];
};

Here it is in action:

const [
    person,
    /* setPerson not needed */,
    updatePerson,
    resetPerson
] = useObject({});

return (
    <>  
        <input
            value={person.name || ""}
            onChange={(ev) => updatePerson({ name: ev.target.value })}
        />
        <input
            value={person.country || ""}
            onChange={(ev) => updatePerson({ country: ev.target.value })}
        />
        <button onClick={resetPerson}>Resetbutton>
        <p>{JSON.stringify(person, null, 2)}p>
    
);

useArray

useArray is another one that blew me away when I first used it! You can extend this hook to expose any array operations you like and never have to do another shallow clone in you component to get the changes to reflect ever again! Need a map function? Throw it in there!

const useArray = (defaultArray) => {
    const [arr, setArr] = useState(defaultArray);

    const push = (value) => {
        setArr([...arr, value]);
    };

    const unshift = (value) => {
        setArr([value, ...arr]);
    };

    const pop = () => {
        const current = [...arr];
        const deleted = current.pop();
        setArr(current);
        return deleted;
    };

    const shift = () => {
        const current = [...arr];
        const deleted = current.shift();
        setArr(current);
        return deleted;
    };

    const concat = (newArr) => {
        setArr([...arr, ...newArr]);
    };

    const inverseConcat = (newArr) => {
        setArr([...newArr, ...arr]);
    };

    const splice = (index) => {
        const current = [...arr];
        current.splice(index, 1);
        setArr(current);
    };

    const reset = () => {
        setArr(defaultArray);
    };

    return [
        arr,
        setArr,
        {
            push,
            unshift,
            pop,
            shift,
            concat,
            inverseConcat,
            splice,
            reset
        }
    ];
};

Here it is in action:

Note the use of useValue for the input allowing me to easily clear it when push or Unshift are clicked 😉

const [
    people,
    /* setPeople not needed */,
    {
        push: pushPeople,
        unshift: unshiftPeople,
        pop: popPeople,
        shift: shiftPeople,
        reset: resetPeople,
        splice: splicePeople
    }
] = useArray([]);

return (
    <>  
        <div>
            <input
                value={name}
                placeholder="Name"
                onChange={(ev) => setName(ev.target.value)}
            />
            <button
                onClick={() => {
                    pushPeople(name);
                    resetName();
                }}
            >
                Push
            button>
            <button
                onClick={() => {
                    unshiftPeople(name);
                    resetName();
                }}
            >
                Unshift
            button>
            <button onClick={() => popPeople()}>Popbutton>
            <button onClick={() => shiftPeople()}>Shiftbutton>
            <button onClick={() => resetPeople()}>Resetbutton>
        div>
        <ol>
            {people.map((p, i) => (
                <li key={i}>
                    {p}{" "}
                    <button onClick={() => splicePeople(i)}>
                        Delete
                    button>
                li>
            ))}
        ol>
    
);

Conclusion

That's it! I hope this article helps you reduce the code you need to write, and gets you thinking about how you can use custom hooks for elegant abstractions 👍

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Create Beautiful 3D Perspective Images Easily Using React and CSS

Sam Phillips — Mon, 15 Aug 2022 15:57:13 GMT

Introduction

Perspective transform looks great and creates a really nice experience for the user. When using a framework like React, implementing something like this becomes super simple only using a few CSS styles 👍

Setup

Lets start with a simple Image component:

const Image = ({ width, height, src, alt }) => {
    return <img width={width} height={height} src={src} alt={alt} />;
};

This just takes our basic props and applies them to an img element.

Now let's add our base styles ready for manipulation, along with the state we will need:

const Image = ({ width, height, src, alt }) => {
    const [scale, setScale] = useState(1);
    const [rx, setRx] = useState(0);
    const [ry, setRy] = useState(0);

    return (
        <img
            width={width}
            height={height}
            src={src}
            alt={alt}
            style={{
                transition: "transform 150ms linear",
                transform: `perspective(1000px) rotateX(${ry}deg) rotateY(${rx}deg) scale3d(${scale},${scale},${scale})`
            }}
        />
    );
};

It may look a little intimidating at first! But it's really not that complex. First we defined scale, rx and ry state variables to handle the state changes we are yet to implement.

Then we added two styles. transition: "transform 150ms linear" applies an animation to any changes on the transform style over 150ms using the ease-out timing function. We also added transform which is where the magic happens. Let's break it down.

The transform style is performing 4 operations. perspective(1000px) is what gives the 3d perspective effect to the image. Without it, the rest of the operations would still apply but it wouldn't give an appearance of depth. The value of 1000px is generally a good value to use and looks good, you can play around with this value to see what it does and can make some crazy effects by setting it really low 😂. rotateX(${ry}deg) is injecting the ry value telling the image to rotate on the x axis, we inverse the x and y axis when applying the values as rotating the x axis tilts the image back and forth not left to right, so its intuitive to the user when moving the mouse over it to inverse these values. The same goes for rotateY(${rx}deg). scale3d(${scale},${scale},${scale}) is applying scale to all 3 axis, this will give a nicer effect when we add our math to make the image a little larger whilst the users cursor is hovering over it.

In most browsers, changing the perspective of an element won't work without specifying a scale3d() function. I'm not sure if this is intentional or not, but for now, even if we don't want to scale an element, we still have to set scale3d(1,1,1).

A Little Math

Let's add in our event handlers and do a little math!

const Image = ({ width, height, src, alt }) => {
    const imgRef = useRef();
    const [scale, setScale] = useState(1);
    const [rx, setRx] = useState(0);
    const [ry, setRy] = useState(0);

    const onMouseMove = (ev) => {
        // Get the bounding rect for the image
        const rect = imgRef.current.getBoundingClientRect();

        // Get the X and Y position of the cursor relative to the image
        const x = ev.clientX - rect.left;
        const y = ev.clientY - rect.top;

        // Funky math to normalize the x/y position of the cursor
        // to between -20 and 20
        // For the effect to work as expected, the X axis need to be inversed
        const nX = 40 - (x * 40) / rect.width - 20;
        const nY = (y * 40) / rect.height - 20;

        // Set rx and ry
        setRx(nX);
        setRy(nY);

        // Set the scale to 1.1 shilst the cursor is over the image
        setScale(1.1);
    };

    const onMouseLeave = () => {
    // When the cursor leaves the image, reset the state back to default values
        setRx(0);
        setRy(0);
        setScale(1);
    };

    return (
        <img
            ref={imgRef}
            width={width}
            height={height}
            src={src}
            alt={alt}
            onMouseMove={onMouseMove}
            onMouseLeave={onMouseLeave}
            style={{
                transition: "transform 150ms linear",
                transform: `perspective(1000px) rotateX(${ry}deg) rotateY(${rx}deg) scale3d(${scale},${scale},${scale})`
            }}
        />
    );
};

Its Alive!

We added an onMouseMove event to handle getting the position of the cursor relative to the image element, and normalized those x/y values to between -20 and 20. This allows us to simply apply those values to the rotateX and rotateY transform functions by setting them into rxand ry!

onMouseLeave simply resets the state for rx, ry and scale to their default values and returns the image to it's default state.

A Little More Flare

This looks great but another great feature that can be used in tandem with all this is box-shadow as perspective transforms render the shadow as well! Better yet, we can swap the shadow out for a glow effect when the user starts hovering over the image to really make it pop 🎉

const BASE_SHADOW = "rgba(0, 0, 0, 0.4) 0px 12px 28px -10px";
const GLOW_SHADOW = "rgb(113,199,236) 0px 0px 15px 5px";

const Image = ({ width, height, src, alt }) => {
    const imgRef = useRef();
    const [scale, setScale] = useState(1);
    const [rx, setRx] = useState(0);
    const [ry, setRy] = useState(0);
    const [shadow, setShadow] = useState(BASE_SHADOW);

    const onMouseMove = (ev) => {
        // Get the bounding rect for the image
        const rect = imgRef.current.getBoundingClientRect();

        // Get the X and Y position of the cursor relative to the image
        const x = ev.clientX - rect.left;
        const y = ev.clientY - rect.top;

        // Funky math to normalize the x/y position of the cursor
        // to between -20 and 20
        // For the effect to work as expected, the X axis need to be inversed
        const nX = 40 - (x * 40) / rect.width - 20;
        const nY = (y * 40) / rect.height - 20;

        // Set rx and ry
        setRx(nX);
        setRy(nY);

        // Set the scale to 1.1 shilst the cursor is over the image
        setScale(1.1);

        // Set the glow shadow effect
        setShadow(GLOW_SHADOW);
    };

    const onMouseLeave = () => {
        // When the cursor leaves the image, reset the state back to default values
        setRx(0);
        setRy(0);
        setScale(1);
        setShadow(BASE_SHADOW);
    };

    return (
        <img
            ref={imgRef}
            width={width}
            height={height}
            src={src}
            alt={alt}
            onMouseMove={onMouseMove}
            onMouseLeave={onMouseLeave}
            style={{
                boxShadow: shadow,
                transition: "all 150ms linear",
                transform: `perspective(1000px) rotateX(${ry}deg) rotateY(${rx}deg) scale3d(${scale},${scale},${scale})`
            }}
        />
    );
};

And here is the final result!

We set a couple of constant values BASE_SHADOW and GLOW_SHADOW, added a new shadow state variable and switched between them in the same way as the other state values. We also added the boxShadow style on the img element, applying shadow.

Notice a small change was made to transition from transform 150ms linear to all 150ms linear, this ensure that the transition animation is also applied to the box-shadow and not just the transition style.

It Doesn't Have to be an Image!

Since this is just using CSS transforms, it can be applied to anything! Here is the same component edited to use a div with some text in it 👍

Conclusion

That's it! I hope this article helped you do fancy things with CSS transforms.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Use setTimeout in React to Defer Logic

Sam Phillips — Sun, 14 Aug 2022 12:19:02 GMT

Introduction

setTimeout is a very commonly used JavaScript function. It is very useful for many things, such as timing how long an alert should show, or debouncing a button to prevent double clicks.

However when using higher level rendering frameworks like React, Angular, Vue etc, it can give you control over the JavaScript runtime itself to make your life easier!

A simple problem

Let's take this simple app as an example:

export default function App() {
  const [text, setText] = useState("This is some text");
  const [pWidth, setPWidth] = useState(0);
  const pRef = useRef();

  const onTextChange = (changedText) => {
    setText(changedText);
    setPWidth(Math.round(pRef.current.getBoundingClientRect().width));
  };

  return (
    <>
      <div>
        <input value={text} onChange={(ev) => onTextChange(ev.target.value)} />
      div>
      <p ref={pRef} style={{ display: "inline" }}>{text}p>
      <p>{pWidth}p>
    
  );
}

This app contains an input that when changed, runs a function to update the text state variable and uses pRef to extract the current width of the p element and set pWidth.

This renders the following:

pWidth is only going to be set when we change the text, so lets delete the text and we should see a width of 0:

Huh? That's not right! It's showing the width of the p element when it had text in it!

This is because when we update text via setText, React hasn't had a chance to set the text in the p element, meaning the width of the p element hasn't changed before we set its width using setPWidth!

setTimeout to the rescue!

We can fix this using setTimeout!

Let's change this line:

setPWidth(Math.round(pRef.current.getBoundingClientRect().width));

To this:

setTimeout(() => {
  setPWidth(Math.round(pRef.current.getBoundingClientRect().width));
});

And check out output when we clear the input:

And like magic it works as expected!

Why does this work?

As we have already ascertained, the issue was that we needed to wait until React had actually rendered the text in the p element before setting the p elements width.

setTimeout solves this problem by deferring setting the width of the p element to the next JavaScript runtime cycle, ensuring that the React has rendered the changes from the previous runtime cycle before running our pending setTimeout call-back function.

Using async/await

This technique can also be used in async functions with the use of a utility function such as:

const waitForRender = () => new Promise(res => setTimeout(res));

Using the example above, waitForRender could be used like this:

const onTextChange = async (changedText) => {
  setText(changedText);
  await waitForRender();
  setPWidth(pRef.current.getBoundingClientRect().width);
};

This produces the same output!

Conclusion

That's it! I hope this helped you learn a new technique to add to your toolset when tackling edge case problems that require waiting for a rendering cycle to pass.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Tailwind CSS Tips to Make Your Life Easier

Sam Phillips — Fri, 12 Aug 2022 15:45:58 GMT

Introduction

Tailwind CSS has won me over, and now if I can get away with using it, I will. However with great power comes great responsibility, and with Tailwind, that mean writing classes in a way that gets you what you need, with as few classes as possible.

General Tips

Here are some tips I've slowly migrated to using regularly that have made mine and others lives easier, and hopefully now yours too!

You can use Tailwind CSS Playground to experiment with any of these examples 👍

X/Y axis

Most of the time when using padding or margins, the spacing you are creating will be the same top and bottom, as it is left and right, so if you see:

<div class="pl-4 pr-4 pt-2 pb-2">div>

Change it to:

<div class="px-4 py-2">div>

If all 4 directions need to be the same, just use p

<div class="p-4">div>

Only vertical margins

Margins are great as it allows you to create space around an element without creating a needless parent with padding. But in complex UI structures, setting margin-left or margin-right can cause all kinds of hell later on as things change as it can push elements causing them to overflow their parent.

Vertical margins on the other hand are usually fine and very rarely cause this issue. So if you see:

<div class="mx-4 my-4">div>

If possible, changing it to:

<div class="px-4">
    <div class="my-4">div>
div>

May save you a headache in the future.

Use inset

When positioning an element using position: absolute or position: fixed and expanding it to fill its parent, its very common to see something like:

<div class="absolute top-0 bottom-0 left-0 right-0">div>

A shorthand for setting each directional anchor is using inset:

<div class="absolute inset-0">div>

This does the exact same thing and saves needless classes!

Responsive grid

Many people still use flex-box for almost all layouts, which can get pretty complex fast. You can use grid to layout the top level responsiveness of key sections/elements in your site, leaving flex-box to deal with the smaller, more manageable elements in isolation.

Here is a simple example of a making a row of 4 divs responsive using only the parent:

<div class="grid sm:grid-cols-2 lg:grid-cols-4">
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
div>

Using sm: and lg: modifiers (which simply relate to pre-configured media queries) you can elegantly define how many columns should be in this grid row. Larger screen widths (more than 1024px under the hood) will show 4 in a row, smaller screen widths (less than 1024px and larger than 640px) will show 2 rows of 2, and finally anything less than 640px will show all 4 divs top to bottom.

Sometimes you may see a default setting defining 1 column for the smallest screen widths:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

In this case defining grid grid-cols-1 has the exact same effect as simply defining grid, as its default column setting is 1. This means using grid-cols-1 is pointless and can be removed.

Selecting children from a parent tag using custom selectors

Let's take a look at the previous example:

<div class="grid sm:grid-cols-2 lg:grid-cols-4">
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
    <div class="h-24" />
div>

It's using grid which is great, but defining class="h-24" on every child div is cumbersome.

Tailwind CSS 3.1+ to the rescue! If you make sure you are on at least version 3.1, you can do this!

<div class="grid sm:grid-cols-2 lg:grid-cols-4 [&>div]:h-24">
    <div />
    <div />
    <div />
    <div />
div>

This does the same thing! You can use [] to define a selector and target all children that match to apply a class to them! In this case we used [&>div]. The & denotes the current element that you are defining the class on. The > is used in CSS selectors to denote direct children, and in this case, we needed to target direct div children.

Change elevation on hover

Tailwind makes elevation super easy and provides nice looking shadow classes out of the box.

Elevated elements are great on their own to show key content in cards etc, adding an extra slightly higher elevation to the element on hover: really makes a users experience that bit more engaging:

<div class="grid sm:grid-cols-3 gap-3">
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all">div>
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all">div>
    <div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all">div>
div>

In this example we have a simple div with border, rounded-md and shadow-md. But as you can see, increasing the elevation using hover:shadow-xl and the size using hover:scale-110 dramatically changes the user experience. And as always, we use transition-all to allow those changes to be animated smoothly instead of changing instantly. 3 classes to drastically improve the user engagement seems worth it to me!

NOTE: Always try to change the size of an element with it's elevation. It's just common sense that if the elevation increases and makes an element look like it's further away from the page, that it would also appear larger to the user!

Honourable mention

Although this goes beyond a general tip and is more of a fully-fledged pattern, I thought I would share this with you as I find my self using it again and again!

Below is an example of a containing div that represents an overlay, with child div that is responsively centred and even becomes scrollable if there is not enough space to show all of it's content!

This example also uses backdrop-blur-sm to blur the pages content if the browser supports it, bringing even more focus to the modals content 👍

<div class="fixed inset-0 bg-[rgba(0,0,0,0.4)] backdrop-blur-sm">
      <div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100%_-_30px)] max-w-lg max-h-[calc(100%_-_30px)] overflow-y-auto rounded bg-white p-4">
            <p class="h-64">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.p>
      div>
div>

Conclusion

That's it! I hope this article helped you in some way when using Tailwind CSS, and please let me know if there is anything you would like me to add, especially if it can be done better! 👍

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS

Sam Phillips — Thu, 04 Aug 2022 16:47:18 GMT

Introduction

If you are like me, you like to create graphics using the tools you already know. If I need a banner or graphic for something, I don't want to spend 2 weeks learning Photoshop, Canva, or some other graphic design tool to create a single, simple image for a specific purpose.

Here is a simple way to create any image or graphic you need using the tools you already know, HTML and CSS. I made the banner for this blog post using this very method! And I will use it as an example in this article.

Create an Empty HTML Document

First create a HTML document, doesn't need anything other than enough to open it in chrome and see its content.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>

    body>
html>

You don't need the meta tags, they just get generated when using the VS Code doc snippet.

Next let's create a div with a class to set things up along with some CSS styles for what we need, a cover image for a hashnode blog post is 1600x840 so that's what we will specify for its width and height.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>

        <style>
            .banner {
                /* Desired width */
                width: 1600px;

                /* Desired height */
                height: 840px;

                /* A nice looking gradient at a 45deg angle because i'm edgy */
                background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

                /* White text seems appropriate */
                color: white;

                /* Some padding to help text wrap nicely */
                padding: 4rem;

                /* Chrome supports Segoe UI out of the box and it's usually good enough for banners */
                /* Easy to import a custom font though! */
                font-family: Segoe UI;

                /* And finally just use flex-box to center the text vertically */
                display: flex;
                align-items: center;
            }

            .text {
                /* Center the text horizonally too */
                text-align: center;

                /* Font size set to whatever looks best */
                font-size: 80px;
            }
        style>
    head>
    <body>
        <div  class="banner">
            <div class="text">Create Beautiful Banners and Other Graphics Easily Using HTML and CSSdiv>
        div>
    body>
html>

And here we have it!

You can do so much with so little, here it is with an image and text stroke:

.banner {
    background: url(./background.jpg);
    background-size: cover;
}

.text {
    font-weight: 500;
    -webkit-text-stroke: 1px black;
}

You get the point, you can get as fancy as you like, with minimal effort using HTML and CSS, and you aren't constrained by any tooling, pay walls, or forced sign ups.

Save it as an Image!

Chrome makes it SUPER easy to create an image from what you've made. Once you are happy with your design, you can right-click and inspect the div element to find it in the Chrome Dev Tools Inspector. Chrome gives you an option if you right click the div in the inspector to Capture node screenshot. This saves the div as it's rendered as a PNG image. Done!

Examples

I created a second article dipping into this further, showing some more cool tricks you can use to create some really beautiful banners!

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS - Examples

Conclusion

Use the tools you already know and a little trick in chrome to make your life easier 👍

I hope this helps you save time creating graphics to add a little flare to the content you create.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

Create a Reusable Button Component in React

Sam Phillips — Wed, 03 Aug 2022 16:59:17 GMT

Introduction

Following good practices allows you to write better code, React is no exception, and after writing button components for every project I have worked on, this is, in my opinion, the best approach for a reusable button component.

NOTE: The examples below are written in TypeScript. If you don't use Typescript, it's easy to get started, alternatively simply ignore any type definitions, : string notations after variables, and anything like etc.

What makes a React component perfectly reusable

Having default styles to allow for quick prototyping
Styling should be completely configurable by its parent
Should have no dependencies, just drop in and go
Should use as few props as possible, to reduce complexity of use
Functionality should be split out, allowing for use only if needed

So, let's start with a simple button component and work to satisfy these constraints.

import React from "react";

export type ButtonProps = {
    label: string;
    onClick?: () => void;
};

export const Button: React.FC = ({ label, onClick }) => {
    return <button onClick={onClick}>{label}button>;
};

This renders something like this:

Let's get rid of the base styles and add our own simple styles to make it consistent across browsers:

.button-compatibility-styles {
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    fontSize: 1em;
};

Now let's add some simple base styles in case none are provided:

.button-base-styles {
    color: black;
    background: lightgray;
    padding: 0.4em 1em;
    border-radius: 0.2em;
    cursor: pointer;
}

And add them to our component:

export const Button: React.FC = ({ label, onClick }) => {
    let buttonClasses = ["button-compatibility-styles", "button-base-styles"];

    return (
        <button className={buttonClasses.join(" ")} onClick={onClick}>
            {label}
        button>
    );
};

This doesn't allow for overriding the base styles though, so let's add styles and className props, and conditionally apply it to our component, providing the base styles if none are supplied:

export type ButtonProps = {
    label: string;
    onClick?: () => void;
    style?: string;
    className?: string;
};

export const Button: React.FC = ({
    label,
    style,
    className,
    onClick
}) => {
    // Always set the compatibility styles
    let buttonClasses = ["button-compatibility-styles"];

    // If className is provided, append it
    if (className) buttonClasses.push(className);

    // If no styles are provided, provide base styles
    if (!style && !className) buttonClasses.push("button-base-styles");

    return (
        <button
            style={style}
            className={buttonClasses.join(" ")}
            onClick={onClick}
        >
            {label}
        button>
    );
};

We provide the compatibility styles as a CSS class, because if we provided them as React style objects, they would not be able to be overridden by a parent component specifying className!

After all this setup, we have a button that looks about the same as before! 😂

Extra Functionality

Now that we have our base button component, we can add extra functionality that is commonly needed from a button component. However, we want to enable this functionality only if it is specified by the parent component, and allow the parent to override its styling without affecting the rest of the button. We can do this using child components.

Loading Spinner

A loading spinner is a very common requirement for a button and allows for the user to show that something is happening.

A loading spinner should:

Be visible once the user clicks the button
Prevent the user from clicking the button whilst its shown
Not force the parent component to maintain the state of the loading spinner
Not have any dependencies to show the spinner

To do this we need to create a component that renders the spinner:

.svg-loading-spinner {
    width: 1em;
    height: 1em;
    position: absolute;
    inset: 0;
    margin: auto;

    animation: spin 1s linear infinite;
}

export type ButtonLoadingSpinnerProps = {
    style?: CSSProperties;
    className?: string;
    color?: string;
    backgroundColor?: string;
};

export const ButtonLoadingSpinner: React.FC = ({
    style,
    className,
    color,
    backgroundColor
}) => {
    return (
        <svg
            style={style}
            className={`svg-loading-spinner ${className}`}
            viewBox="0 0 40 40"
        >
            <circle
                cx="20"
                cy="20"
                r="16"
                fill="none"
                strokeWidth={6}
                stroke={backgroundColor || "darkgray"}
            />
            <path
                d="M3,20 a1,1 0 0,0 34,0"
                fill="none"
                strokeWidth={6}
                stroke={color || "black"}
            />
        svg>
    );
};

This is a simple SVG that is spins via a simple CSS animation. It also allows for the parent to override its style, className, color, and backgroundColor.

Putting it all together

Now we just need to provide the component to our Button component, and render it accordingly. We need to do this in a way that facilitates a loading state so its only shown when clicked. BUT:

Should use as few props as possible, to reduce complexity of use

We could create a loading prop, and have the parent implement a loading state, but from my experience, this is always used in the same manner, so instead, we are going to extend the Button to dynamically switch to a loading state internally if a loading component is provided, and the onClick returns a promise! 🔥

export type ButtonProps = {
    label: string;
    onClick?: () => void | Promise<void>;
    style?: CSSProperties;
    className?: string;
    loadingComponent?: React.ReactNode;
};

export const Button: React.FC = ({
    label,
    loadingComponent,
    style,
    className,
    onClick
}) => {
    const [loading, setLoading] = useState(false);

    // Always set the compatibility styles
    let buttonClasses = ["compatibility-styles"];

    // If className is provided, append it
    if (className) buttonClasses.push(className);

    // If no styles are provided, provide base styles
    if (!style && !className) buttonClasses.push("base-styles");

    const onClickInternal = async () => {
        if (!onClick || loading) return;

        const prom = onClick();
        if (prom && loadingComponent) {
            setLoading(true);
            await prom;
            setLoading(false);
        }
    };

    return (
        <button
            style={style}
            className={buttonClasses.join(" ")}
            onClick={onClickInternal}
        >
            <span style={{ visibility: loading ? "hidden" : "visible" }}>
                {label}
            span>
            {loading && loadingComponent}
        button>
    );
};

Here we have added a loadingComponent prop and wrapped the label in . This lets us toggle its visibility based on our new loading state boolean. We also conditionally show the loadingComponent only if loading is true.

We also added a check that returns when calling onClickInternal if we are already in a loading state, preventing clicks whilst it's loading.

We have also added onClickInternal which wraps the provided onClick prop. If we have onClick, we call it. If it is an async function and it returned a Promise, and we have a loadingComponent, we set loading to true, await the Promise, and finally set loading to false again.

Let's test it!

Just defining the button:

Gives us:

As we might expect. Let's try providing the loading spinner, and an async onClick that resolves after 2 seconds:

Great! Looks like its working nicely, and most importantly:

All styles can be overridden to create any button we like, including the ButtonLoadingSpinner
The ButtonLoadingSpinner can be completely replaced with a completely different indicator if needed
We are not requiring the parent component to needlessly manage any state
We are minimizing the props required to perform the expected functionality

Lastly, let's add a little style to the button and jazz it up a bit:

button.my-custom-button {
    padding: 0.4rem 0.8rem;
    font-weight: bold;
    background-color: lightblue;
    color: #424242;
    border-radius: 4px;
    cursor: pointer;

    transition: all 0.2s linear;
}

button.my-custom-button:hover {
    background-color: rgb(109, 199, 230);
    color: #424242;
    box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.4);
}

This produces:

Conclusion

That's it! I hope this article helped you get a sense of how components can be made reusable in react.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

The Frontier

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS - Examples

Introduction

Simple Gradient Banner

3D Transform Banner

Gradient Glow Banner

Gradient Blend Mode Banner

Conclusion

The Best Tool to Accelerate Your Career as a Software Engineer

Introduction

Quick hacks never work

Take responsibility for yourself

The art of compounding knowledge

Reduce the noise when learning

Learning how to learn

Master the tools and skills at your disposal

Conclusion

Lessons Learned From Conducting Junior Software Engineer Interviews for Small Companies

Introduction

Why join a small company?

Pay can be just as high, if not more

You may have more autonomy

You will most likely have more impact on the direction of projects

You may have more creative freedom

What does a small company look for in a junior engineer?

What YOU should look for in a small company

Some questions to consider asking

Conclusion

React Hooks You Will Love ♥

Introduction

useValue

useCounter

useObject

useArray

Conclusion

Create Beautiful 3D Perspective Images Easily Using React and CSS

Introduction

Setup

A Little Math

A Little More Flare

It Doesn't Have to be an Image!

Conclusion

Use setTimeout in React to Defer Logic

Introduction

A simple problem

setTimeout to the rescue!

Why does this work?

Using async/await

Conclusion

Tailwind CSS Tips to Make Your Life Easier

Introduction

General Tips

X/Y axis

Only vertical margins

Use inset

Responsive grid

Selecting children from a parent tag using custom selectors

Change elevation on hover

Honourable mention

Elegantly responsive modal / overlay

Conclusion

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS

Introduction

Create an Empty HTML Document

Create a Banner

Save it as an Image!

Examples

Conclusion

Create a Reusable Button Component in React

Introduction

What makes a React component perfectly reusable

Extra Functionality

Loading Spinner

Putting it all together

Let's test it!

Conclusion