Forem: Owen Conti 🇨🇦

How I use Calenderio to block time and reconcile my calendars

Owen Conti 🇨🇦 — Tue, 08 Mar 2022 05:07:00 +0000

I have four calendars I manage on a daily basis to organize my time and schedule:

Full time job
Consulting job
Shared family calendar
Personal calendar

Trying to manage and reconcile four calendars can be a challenge. When I schedule an appointment on my personal calendar, I now need to go block off time on the three other calendars to ensure I don't get double booked. Or when I get invited to a meeting at my full time job, I need to block off that time on my consulting calendar and the family calendar. This takes a lot of time and effort to keep up to date on a regular basis.

Rather than manage all of that myself everyday, I now rely on Calenderio to keep all of my calendars in sync. At the time of writing this article, I have six connections setup between various calendars in Calenderio. Let's dive into how I have these connections setup.

Figuring out the logistics of how automatic calendar syncing works is very important when understanding how your connections need to be structured. The key thing to remember is that your events will essentially be duplicated across your calendars. So if you have all four calendars added to your local calendar app, you'll see the same event pop up four times. This is the problem I originally ran into until I decided to create a single, "source of truth" calendar.

I've created a dedicated calendar called "Life" which is what I use for my day-to-day calendar interactions. My personal appointments are scheduled directly into the Life calendar, and the three other calendars (Work, Consulting, Family) are all synced to the Life calendar. So now when I view my Life calendar, it contains the events from all four calendars.

Here's a brief diagram on how my connections are setup:

Full time job    --> Life
Consulting job   --> Life
Family           --> Life

Life             --> Full time job
Life             --> Consulting job
Life             --> Family

You can see above that I have each calendar setup as a two-way sync, meaning events created on the Life calendar are sent to the three other calendars as well. By doing this, it means that an event created on my Work calendar goes through this flow:

Event is created by a team member on my Work calendar, ie: I'm invited to a meeting
Calenderio syncs the event to my Life calendar
Calenderio also syncs the event to my Consulting calendar and Family calendar

Now that event is blocked off on all four calendars that I have to manage. I can rely on my single Life calendar to manage my day-to-day, and my calendar app now looks like this:

If you're interested in a walk-through guide of setting up Calenderio for your own calendar syncing, you can check out the "How to sync your personal calendar to your work calendar" guide published on Calenderio's website.

Why you should be using React Context more often

Owen Conti 🇨🇦 — Fri, 12 Feb 2021 15:10:41 +0000

When people think of context in a React JS app, they often think of global state. "I need to manage the theme my app is set to use, I can use context for this." While this isn't wrong, context can be used for so much more than that use case. I like to think of it as "encapsulated state".

Think of context as a component in your tree that can provide props directly to any child below it. Combine that with hooks, and you can write some clean APIs for your components. Let's take a look at a simple example using a Modal component.

Here's a look at a modal that accepts an onClose prop which should be called to close the modal. The modal manages its own transition system, so when closing the modal, the modal's custom closeModal needs to be called. After the transition is complete, the passed-in onClose prop will be called.

// inside your Modal component...

const Modal = ({
    title,
    onClose
}) => {
    const closeModal = useCallback(() => {
        // Fake code, pretend to start the closing transition
        // and call `onClose` when the transition is done
        startCloseTransition(onClose);
    }, [onClose]);

    return (
        <ModalOverlay closeModal={closeModal}>
          <ModalContent>
            <ModalHeader title={title} closeModal={closeModal} />

            <ModalBody>
              {React.cloneElement(children, { closeModal })}
            </ModalBody>
          </ModalContent>
        </ModalOverlay>
    );
};

Here's the corresponding component that uses the Modal component above:

const SomeComponent = () => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <div>
            <button type="button" onClick={() => setModalOpen(true)}>Open Modal</button>

            {modalOpen ? (
                <Modal title="Some Modal" onClose={() => setModalOpen(false)}>
                    <SomeComponentModalContent />
                </Modal>
            ) : null}
        </div>
    );
};

const SomeComponentModalContent = ({
    closeModal
}) => {
    // `closeModal` is available here because the `Modal`
    // component passes it via the `cloneElement` call
    return (
        <div>
            <p>The content of the modal goes here</p>
            <button type="button" onClick={() => closeModal()}>Close the modal</button>
        </div>
    );
};

Continue reading this post on my website.

Adding Stripe Checkout and Customer Portal to your Laravel application

Owen Conti 🇨🇦 — Tue, 09 Feb 2021 15:32:58 +0000

With the latest version of Laravel Cashier, you can very quickly connect your application to Stripe using Stripe's Checkout feature and Customer Portal feature.

This allows you to get a new application up and running with payments and subscriptions in very little time.

Read the full post on my website or check out the YouTube video below!

How to use GitHub Actions to build, test, and deploy your Laravel application

Owen Conti 🇨🇦 — Sat, 07 Sep 2019 14:48:37 +0000

GitHub Actions is GitHub's take on a CI/CD platform. In this series, we'll learn how we can utilize GitHub Actions to build, test, and deploy Laravel applications.

How to use Laravel Vapor without having to use RDS

Owen Conti 🇨🇦 — Mon, 26 Aug 2019 15:20:45 +0000

You can use Larvel Vapor with an existing MySQL/Postgres instance, just like you did before Vapor!

Watch the video below to learn how we can connect our Vapor applications to existing database instances without having to pay for RDS.

Setting up Custom Domains and HTTPS Certificates with Laravel Vapor

Owen Conti 🇨🇦 — Mon, 19 Aug 2019 14:30:17 +0000

Make sure you watch the previous video in this series: Deploying a Project with Laravel Vapor.

Let's walk through how you can setup a custom domain and HTTPS certificate with Laravel Vapor.

Deploying a project with Laravel Vapor

Owen Conti 🇨🇦 — Sun, 18 Aug 2019 18:29:40 +0000

Deploying your Laravel projects is now as simple as running two commands on your command line.

Find out how easy it is to up and running with Laravel Vapor:

Launching my first side project, Released!

Owen Conti 🇨🇦 — Tue, 04 Jun 2019 14:32:45 +0000

Hi all!

I'm launching my first official side project today, Released!

Released helps you with software versioning, generating release notes, sending notifications, and publishing your application.

There's a free plan available to all users which allows you to import one repository and play around with Released!

Otherwise, for the first week of launch, I'm offering a 50% discount on the yearly plan ($50 USD down from $100!).

Check it out at: https://releasedapp.com

I also have a walk through video of the application you can check out:

Learn Gitlab's CI/CD Service - Course for Developers

Owen Conti 🇨🇦 — Fri, 24 May 2019 18:19:45 +0000

Not many people know how feature packed Gitlab is. Which is why I'm launching a new course this summer on Gitlab's CI/CD service!

This course will help you get started with Continuous Integration, Delivery, and Deployment all on Gitlab's free plan.

Topics I'll be covering:

Overview of Gitlab CI/CD
Understanding Stages during a build
Creating your first CI/CD script
Publishing and downloading Artifacts
Deploying your application with Gitlab
BONUS: Hosting your own Docker image on Gitlab's Registry service

I'll also be previewing various lessons of the course on my YouTube channel: https://youtube.com/owenconti.

If you have ideas on anything else you'd like to see me cover, please let a comment down below!

What the Error? ReactJS: Nothing returned from render

Owen Conti 🇨🇦 — Wed, 22 May 2019 13:57:12 +0000

This is the third video in my new series, What the Error? where I debug and resolve common error messages in web frameworks.

This video covers ReactJS's "Nothing returned from render".

What the Error? ReactJS: Hooks can only be called inside the body of a function component

Owen Conti 🇨🇦 — Mon, 20 May 2019 16:41:28 +0000

This is the second video in my new series, What the Error? where I debug and resolve common error messages in web frameworks.

This video covers ReactJS's "Hooks can only be called inside the body of a function component".

What the Error? ReactJS: Rendered fewer hooks than expected

Owen Conti 🇨🇦 — Sun, 19 May 2019 14:50:17 +0000

This is the first video in my new series, What the Error? where I debug and resolve common error messages in web frameworks.

This video covers ReactJS's "Rendered fewer hooks than expected".