DEV Community: Kyle McKell

Setting Custom Bracket Colors with VSCode

Kyle McKell — Fri, 04 Feb 2022 09:31:49 +0000

I love Bracket Pair Colorizer

And I was extremely excited when VSCode picked it up to be included with no extensions! However... they changed the way that you set it up.

Here's an example snippet of my current bracket pair settings in my settings.json:

{
  // enables colors
  "editor.bracketPairColorization.enabled": true,

  // define what colors you want
  "workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#dfbaff",
    "editorBracketHighlight.foreground2": "#bae1ff",
    "editorBracketHighlight.foreground3": "#baffc9",
    "editorBracketHighlight.foreground4": "#ffffba",
    "editorBracketHighlight.foreground5": "#ffd3a1",
    "editorBracketHighlight.foreground6": "#ffb3ba"
  }
}

And here's what these specific colors look like:

What it looks like in your editor with some code:

In case anyone is wondering, I use Nord theme and Hasklig font with font ligatures on.

Hope this helps anyone else who is looking to add some customization into their VSCode!

Finishing Up On My Next.js AeroPress Coffee Helper App

Kyle McKell — Sun, 09 Jan 2022 22:08:44 +0000

Heya friends!

I've been workin' hard on my AeroPress Tracker app, and I've reached a point that I feel like it's nearing completion!

You can check out my first post on it here, and I'm happy to report that I've made an intense amount of progress... it's a lot for only having one total devlog.

So here are a few things that I've worked on:

Dark Mode

The first feature that I devoted my time over to was implementing a dark mode... for the sake of my eyes, and the eyes of my users!

Don't worry light mode lovers, it's still supported! (Although I'll never understand you)

I implemented a cute little theme switching button, it's a moon in dark mode:

And a sun in light mode!

I implemented this using useDarkMode and TailwindCSS. It was simple to implement, and the code for the button was pretty simplistic as well:

interface Props {
    toggleDarkMode: () => void;
    isDarkMode: boolean;
}

const ThemeSwitchButton = ({ toggleDarkMode, isDarkMode }: Props) => {
    return (
        <button
            onClick={toggleDarkMode}
            className="self-center text-neutral-700 dark:text-neutral-100"
        >
            <VisuallyHidden>Toggle dark mode</VisuallyHidden>
            {isDarkMode && <Icon id="moon" strokeWidth={2.5} />}
            {!isDarkMode && <Icon id="sun" strokeWidth={2.5} />}
        </button>
    );
};

Dealing with the flicker

In my last post, I mentioned how I was dealing with the flicker with a SessionMounter component.

I've since dropped said component because I think it created an awful user experience, things just take forever to load!

So I've opted into hydrating the page on the client side after validating the Session. I had to reimplement the buttons a little bit, but I'm happy how it turned out, and any flicker that does occur isn't backbreaking or horrific to look at.

Updating the UI

The UI has gotten a huge overhaul from before. From adding a bit more of a design to the BrewCard:

To making the form look much nicer:

Everything is coming together in a much better way to make an infinitely nicer app to use!

As far as Tailwind goes, I'm enjoying it, but also finding it mildly frustrating. While I do love the capabilities that Tailwind provides, I find myself missing writing raw CSS. Luckily for the sake of this project I haven't had to get into the weeds of Tailwind too much (as I'd imagine making things such as grids with grid-template-areas is a bit of a pain), but if I ever have a really complicated UI, I think I might reach back over to my good pal Styled Components.

So what now?

This app is nearing what I'm wanting for it, so I'm going to take a step away from it for a bit to update my portfolio page and maybe move onto a different project

That being said, there are still a few features which will be implemented in the future:

Pagination
Editing a brew
Adding comments to brews after creation
Sorting

For the time being, I see these as somewhat optional. However, as the app grows in scale, and if the userbase increases, they are necessary additions. A day or two of work would definitely solve these issues, however, I'm more excited to get a few other things going for the time being, and the app is at a place that I'm happy about.

Hope you all enjoy using the app, and I'd love to hear what you think about it! It was a fun learning experience to utilize some technologies that I haven't leveraged much in the past, and I'm looking forward to utilizing this stack again!

Have fun and code on! 👩‍💻

Making an AeroPress Tracking App

Kyle McKell — Mon, 27 Dec 2021 20:34:55 +0000

Hey Everyone!

It's been a bit, but I'm happy to report that things have been well

I'm currently working on an app, and I'm pretty excited for it to come into fruition, so I wanted to update my progress on here incrementally (not going to make any promises on how often 🤣) to give some insight on what I'm doing.

What's the project?

Listen... I'm a coffeehead (some would even say a coffee snob), and one of my favorite methods of brewing coffee is with the AeroPress!

An app idea that I've always had is to create an application which allows its users to add in their favorite coffee roasts, and different methods, and then combine them together to make different brews for them to refer back to each and every morning.

I began working on that idea earlier this year, but I realized that the scope of the project was out of control, and I didn't really even know where to start.

... Enter AeroPress Tracker

I figured that if I could cut down to just one method (in this case the AeroPress), I could very easily create an application which would help people with making an ideal AeroPress brew.

(Disclaimer: this application is still in the VERY early phases. There are lots of missing features, it does work, however!)

Here's a link to the GitHub Repo, in case you're curious on the code.

How to Use

Right now the homepage isn't operational (I guess you can log in... lol), but if you navigate over to the Create a Brew Page you can put in your info for your brew you want to make.

Currently you'll notice it's pretty barebones. As an example, I'm only collecting time in seconds right now, and I hope to give it capabilities to take in both minutes and seconds (and then store it as seconds in the backend).

Once you put in a brew, navigate over to its page with its id (there should be a link created after you make the brew at the bottom of the page) and you'll have a timer which you can start up to make your brew! Alternatively, head over to the Brew Page and check out what others have done!

(As a note: It is likely that I am going to be doing a LOT with this app over these coming weeks. It is not out of the question that I will be deleting all data in the database as more features get added or modified. I'm not married to anything yet and I don't want people to start using this with the expectation that everything is going to be permanent)

I'd love if people could give it a shot and let me know what you think!

The Stack

This application is being built with Next.js, Prisma, PostgreSQL and TailwindCSS. I've been wanting to build a site utilizing these tools for a little bit now, so I'm excited to report that I'm... conflicted about it?

Listen... I love all of these techs. Especially Next and Prisma (Postgres is nice too, but at the end of the day it's just an SQL database lol). However, I'm really conflicted on how to feel with Tailwind...

Tailwind

On one hand I love Tailwind, it's super nice to work with and the development flow is FAST. However, debugging styles, or wanting to write custom styles, especially when working with CSS grid or wanting to make clamp values, the framework seems iffy.

I feel like my ability to create robust and safe CSS is lessened from Tailwind, while also being bolstered? It's weird to explain, but it's like a superpower that is just so much to handle that I can't exactly control all of it. I have had moments of "WOW! I love Tailwind!" and moments of "Ugh... why did I choose Tailwind?"

I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.

I guess I'll give an example on what I'm running into:

I really dislike code duplication, so when I run into something that I need to repeat a few times, I make a component, as most people do. However, what I'm realizing, is these components are only holding styles. At that point, I'm just wishing that I was using styled components, as then I can use straight CSS syntax and it's clearer on what the component is accomplishing, as it's not an entire component, but rather just one that has styles applied from styled components. I could make a variable which holds the styles together, but then I don't get the autocompletion from Tailwind. I'm sort of at a loss on what I want to do. As I do really feel the "this is weighing down my markup" when using Tailwind, especially once I start messing with media queries.

If anyone has any tips for getting over this, or just generally with Tailwind, I'd love to hear them. I really enjoy the workflow Tailwind provides, but the shortcomings make the entire experience watered down for me, if you will.

Next.js

I am enjoying my time with Next a lot! The Routing is wonderful, I feel like I'm learning how to make full stack apps in a comfortable environment. And while I definitely am not an expert with it at all, I'm excited to learn more about it.

However, I have ran into one problem which I have yet to decide on how I want to solve... the flicker.

At the moment I'm using Static Site Generation with the revalidate props (making the site run on Incremental Static Regeneration). However, due to this my application was flickering when you visit and you are currently logged in.

At the current moment. My solution is to have a component which prevents the page from hydrating whatsoever until the session state is known. This causes the site to load SLOW in some cases, which isn't ideal. However, I also dislike having the site flicker on the log in button.

Frankly, I think I'm going to get rid of the "SessionMounter" (what I've called my component) and opt for just accepting the flicker and adjusting the UI to be less jarring when it happens. It'll likely take some UI work and creativity, but I think it'll provide a better user experience than preventing a load for a tiny bit to all the way up to a few seconds. I would love to hear how you have fixed the flicker yourself in your Next.js SSG projects, as it's something that is the ever present plight of front-end development.

Here is the code for the mounter:

import { useSession } from 'next-auth/react';
import React, { useEffect, useState } from 'react';

interface Props {
    children: React.ReactNode;
}

const SessionMounter = ({ children }: Props) => {
    const { status } = useSession();
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        if (status !== 'loading') {
            setMounted(true);
        }
    }, [status]);

    return <>{mounted && children}</>;
};

export default SessionMounter;

Other Tech notes

I have been reaching a lot for libraries. As is the React way I suppose. Currently I'm utilizing SWR for my data fetching, utilizing react-hook-form to assist with the creating a brew form, utilizing react-timer-hook for my timer, using next-auth to handle authentication (only through Google right now), and using react-feather for icons. While these are plentiful, all of them serve a purpose for problems which I could build out (and may later). However, currently my goal is to get this project shipped out and completed, and these libraries are pretty awesome for accomplishing that goal.

What I'm working on now

Right now the biggest priority is getting the modal created so you can actually log in on mobile devices. This also goes in tandem with giving the Home Page some more functionality so URLs don't have to be directly accessed. The Header needs to gain links to different pages as well, allowing for easier navigation.

All of these things should be pretty easy to implement, and should be up and running soon!

The next goal is adding in a cleaner functionality. Right now the app is basically just a glorified timer. I want to make it more definitive between different brews. Whether that be making it so more specific steps can be added, or making the UI reflect the differences between brews better, is left to be decided. I'll have to do some thinking on what I feel is the best course of action.

Also, for the pages which list a lot of different brews, currently I believe it fetches every single brew in the entire database. This is fine for now, but is something that I'll have to address with either pagination or an infinite scroll (or some other solution).

Conclusion

It's been fun working on an app which I plan to use on a weekly basis! I hope you guys are excited to see what happens with it, and if you know anyone who loves to brew with an AeroPress, I'd love to hear their feedback for features which they'd like to have in a timer app.

That's all for now, have a great one, and code on! 👩‍💻

Creating a Plan for a React UI Component Library Project

Kyle McKell — Sun, 14 Mar 2021 11:30:39 +0000

Hello again everyone! 🙋‍♂️ I hope your weekend is treating you well!

In one of my previous posts, I outlined my goals for planning out my future projects, and now the time has come for the long awaited, much anticipated, once and a lifetime experience...

Putting it into practice! 🙌

For my first project, I intended to create a UI library that I could then utilize for the rest of my applications. My plan is to make a basic UI library utilizing colors from the wonderful Nord theme by ArcticIceStudio. ❄🧊

Let's remind ourselves what the steps were from before:

What's the objective/goal of the project (The Why) 🥅
Who am I making this for? (The Who) 👨‍👩‍👧‍👦
What's the core feature of the project? (The What) ✨
What technologies am I going to use? (The How, The Where) ⚙
What is my deadline? (The When) 📅

Great! Now let's begin:

1) What's the objective?

With making a UI library, my primary objective is to create an attractive, repeatable UI experience to use between multiple apps. Additionally, I feel as if my current UI skills are slightly lacking in strength, so creating a UI library is a perfect way to focus on improving that part of my development.

2) Who am I making this for?

This project is primarily for my personal usage. However, I would like to make it so anyone can utilize it, as I'll be uploading the final product to NPM.

3) What's the core feature of the project?

My biggest goal for this project is to create an overall cohesive modern experience. One large feature I want to add is an easily switchable light and dark mode.

4) What technologies am I going to use?

I've had to do a little bit of research for this one, as I've never created a UI library before, only full applications.

Since this is a React UI Library, I will be utilizing React to create my UI.

But I encountered a problem, how am I going to test my UI Library? I'm not creating an application, I'm simply making UI components.

After much research, what I've settled on is Storybook for testing my UI library. (Check out my previous post about it here!) Storybook is very robust, easy to use, easy to set up, and very scalable. I'm excited to use it

I would also like to use TypeScript, as I love when other libraries have typing support.

5) What is my deadline?

I would like to have my first iteration done by the end of this week, which is 03/20/2021. This would include many HTML tags from buttons, to headers, etc.

I would like to have it completed by the end of the month, 3/31/2021. The full completion would have the capabilities of theme switching, and likely a few specific components to the library, such as a few animations to clean things up.

Plan Set!

Alright! That wasn't so bad. While this plan is pretty simple, is flexible for change, and is more of a guideline than a rule, I still believe that it is helpful to outline. By creating simple plans such as this, we can be more directed with our goals and not have to make as many on the fly decisions.

Thanks for tuning in, I hope you look forward to the future of this project! I'll see you guys tomorrow with an update!

Code on! 👨‍💻

How to Easily Set Up a React Storybook App

Kyle McKell — Sun, 14 Mar 2021 10:28:08 +0000

One of the greatest parts about React is the giant ecosystem of components created by thousands of devs all over the world.

I'm sure you've wondered at some point, how can I contribute something of my own to this? Is it simple? How can I share only my components without just pasting raw code? I suppose I could just have a project with no UI, but then how would I test my components? 😕

I'm going to go over how to create and test your UI library. Here we go! 🚀

Enter Storybook 📕

Storybook is an open source tool that makes creating UI libraries extremely easy. Let's get your Storybook project up and running! 🏃‍♀️

🧶Note: I am going to be using yarn throughout this tutorial, however, any package manager works

Let's head over to our terminal and set up a new yarn project

# Creating a new directory to put our project into
mkdir storybook-demo

# Changing our current directory to our project directory
cd storybook-demo

# Setting up a yarn project (feel free to use the -y flag)
yarn init

# Opening our directory in our text editor (I use VSCode)
code .

Now let's open up our package.json that was created in our directory, if you're using yarn it'll look like this:

{
  "name": "storybook-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Let's head back to our terminal and add React to our project

# Add react and react-dom to devDependencies
yarn add react react-dom -D

Now your package.json should look something like this:

{
  "name": "storybook-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

Sweet! Now let's create an src folder.

# create an src folder
mkdir src

Cool, we'll mess with the folder structure a little more, but this is sufficient to reliably set up Storybook in our project.

Go ahead and run this in your terminal:

npx sb init

📝Note: Make sure you have react in your project before running this command, storybook uses information provided in your package.json to initialize itself

As you wait for this to work its ✨magic✨, you can take a trip over to the Storybook docs to read a little more about it.

One that finishes, you'll notice some differences to your project, let's start by going into our package.json

{
  "name": "storybook-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@storybook/addon-actions": "^6.1.21",
    "@storybook/addon-essentials": "^6.1.21",
    "@storybook/addon-links": "^6.1.21",
    "@storybook/react": "^6.1.21",
    "babel-loader": "^8.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "dependencies": {},
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

Great! Storybook has recognized that we have react in our project (as seen with the @storybook/react dependency). Also take note of the two new scripts that have been added to our project, we'll look more at the first one later.

If you've never used storybook before, feel free to run this command and explore!

# for yarn
yarn storybook

# for npm
npm run storybook

If you look at your file structure, you'll also notice two new folders have been introduced: .storybook and src/stories

For the means of this tutorial, we are going to leave .storybook alone, as all of the default configurations suit our needs. Refer to the docs if you find the need to change things up.

But let's take a look into the src/stories folder

You'll see something looking like this:

src/stories
| /assets
| button.css
| Button.js
| Button.stories.js
| header.css
| Header.js
| Header.stories.js
| Introduction.stories.mdx
| page.css
| Page.js
| Page.stories.js

Take note of how this is structured, as this is entirely viable Storybook code! However, I think we can make something more robust and more easily scalable by bettering the file structure of our project

So let's delete the contents!

# change to stories directory
cd src/stories

# remove the contents
rm -rf *

We'll come back to that later... let's set up a UI component! We'll be making a simple button, but feel free to make whatever you would like

# change to our src directory (assuming you're in src/stories)
cd ..

# create a components directory
mkdir components

# change to our components directory
cd components

# create a Button.js file in our components directory
touch Button.js

# open Button.js in our editor
code Button.js

For the sake of simplicity, we're going to keep this component pretty barebones, we can iterate more on this later.

// src/components/Button.js
export const Button = () => {
    return <button>I am a Button!</button>;
};

Now we need to set up a story for our Button. Let's create a file:

# Go to stories dir (if you're still in src/components)
cd ../stories

# Create a Button.stories.js in our stories directory
touch Button.stories.js

# Open it in our editor
code Button.stories.js

Still with me? Now let's put in some code to test out Storybook

We can think of our story as a mini React project. We'll walk through the basics of making a story, but you can check out the docs on a more in depth explanation of what a story is here

Go ahead and put this into your Button.stories.js file:

// Button.stories.js

// import React and stories from storybook
import React from "react";
import { storiesOf } from "@storybook/react";

// import our Button component
import { Button } from "../components/Button";

// create our stories
const stories = storiesOf("Button Test", module);

// add to our stories
stories.add("Button", () => {
    return <Button />;
});

This simple story is going to just display our Button component that we created earlier, as to maintain simplicity

Also! Since our story behaves like a React app, we need to import React. This also applies if we choose to use hooks.

Now let's see if our story works!

# for yarn
yarn storybook

# for npm
npm run storybook

You should see something like this pop up in your browser:

Great! Now everything is up and running. We can do just about anything we want with our storybook, from creating an entire UI library, to testing out how our different UI components work together.

I'll give a quick (albeit very very simple) example with the Button component that we made. After that I'll send you off on your own! ✈

// src/components/Button.js
export const Button = ({
    bgColor = "lightblue",
    children = "Button",
    ...props
}) => {
    return (
        <button style={{ backgroundColor: bgColor }} {...props}>
            {children}
        </button>
    );
};

This simple Button component takes in a bgColor prop, it's children, and then also passes it's rest of its props (for instance 'onClick')

Now let's make this do something within our story!

// src/stories/Button.stories.js

import React from "react";
import { storiesOf } from "@storybook/react";

import { Button } from "../components/Button";

const stories = storiesOf("Button Test", module);

stories.add("Button", () => {
    const handleClick = () => {
        alert("You clicked the button!");
    };

    return (
        <Button bgColor="white" onClick={handleClick}>
            This is the Button's children
        </Button>
    );
});

I added in an onClick handler, a prop for our bgColor, and filled in the Button's children with some generic text.

And with our Storybook magic, we've created this! 🎉

I hope this tutorial was helpful to you! I personally plan on using Storybook for creating any UI based libraries I make, what about yourself?

Until then, code on! 👩‍💻

PS: Here's the source code

The Plan for Better Project Planning

Kyle McKell — Thu, 11 Mar 2021 00:03:10 +0000

Hello everyone! 👋 I hope everyone's Monday went well!

In my last post, I outlined a little bit on short term goals for the next little while. Here's what I outlined:

Website Styling 💅
Optimizing my apps 🏃‍♂️
Planning and completing projects 📑✅

At the end of the post I mentioned how in order to accomplish these goals I need to iterate a little more on what I intend to accomplish, as setting these arbitrary goals with no concrete actions to do will only lead to the goals flying away 🛫

So let's plan! (On how we plan to plan)

I have committed to doing 4 different projects, each of which I feel will accent a specific part of what I want to work of:

React UI Component Library
Project Organizer (Likely using similar concepts to this blogpost)
Instructional Coffee Site
Portfolio Page

(Granted, these may change in favor of different projects)

Obviously, I'm keeping all these vague here, as I'm going to dedicate a post to each of them as I plan out how I want them to work, what technologies I want to use, how I want to organize them, the timeline and deadlines I give myself, the goals of the project, what I need to learn to accomplish them, and...

As you can see, there's a lot of planning to do for each project. And each one is going to have it's own bevy of postings, but we need a place to start.

Which is what this post is all about!

Let's create an easy to follow plan that can help us be more concise on our vision for each of these projects.

This isn't going to go into the step by steps of planning the projects technical details, per say, but rather setting up a base plan and vision to go off of throughout the development lifetime of a project, which will create an easier to follow and more focused development experience.

I've decided to structure these in the Who, What, When, Where, Why, and How, much like what we all learned back in elementary school 🏫

Here we go!

5 Steps for Planning a Project

1) What's the objective/goal of the project. 🥅 (Why?)

One thing that I've always found when making any of my projects, is that I don't have a focused objective. However, I think this leads to taking longer on each project, and having a higher likelihood of not finishing a project to its end.

A goal of a project should remain simple and concise. For instance, my goal for my UI Library is to learn how to style my websites better. There will be sub-goals underneath this, but in the end, what matters to me most is to create something that will put into practice my styling skills and lead to faster development time in the future for myself.

This step may include some market research, looking at apps that are similar to your creation, and perhaps creating some diagrams to really get to the core of what you're developing.

2) Who am I making this for? 👨‍👩‍👧‍👦 (Who?)

By defining who our target audience for our project is, we can understand more on the true purpose of a project. Are we making something for our own usage? Great! We can tailor our development to that. Are we intending to release this product to a broader audience? We'll likely have to focus on making a better user experience and creating documentation, and maybe even interviewing a potential user on what they'd like to see.

This step isn't to be skipped, as if we're undirected in this step, we may end up taking too much time focusing on things that don't matter, or we may end up realizing that we should've spent more time upfront creating a better experience for our target audience.

3) What's the core feature of the project? ✨ (What?)

It's really easy to get carried away with adding more and more features to a project without actually accomplishing the main task at hand. For instance, say you're making a YouTube clone. The core feature of this app is a video player! Nothing else matters if I can't watch a video.

However, if you spend too much time coding how to recommend new videos to users, you'll never have something that you can ship out to the world.

By understanding what is the minimum amount required for a project, it allows you to stay focused, and guides you to at least completing something to show off, rather than having yet another project sit in development purgatory.

4) What technologies am I going to use? ⚙ (How? Where?)

We've all been there. We're excited to start working on a project, so we use Create React App to get the boilerplate going, but then we decide we want to use NEXT, so we delete our previous project, start the NEXT project, realize we actually don't want to use NEXT but rather use Gatsby, so we delete that, start Gatsby, and suddenly we're in a loop of indecision, and we spend so much valuable dev time deciding on how we want to start developing!

I know for myself, if I have a defined list of technologies, APIs, and services that I intend to use for a project, it becomes infinitely easier to stay focused on my code editor and the projects objectives.

Obviously, we may not know everything that we need for a project right at the start, but we should intend to know as much as possible before we springboard ourselves into coding. Asking simple questions such as How am I going to style this? or Where am I going to host this? allow us to make progress on our project much quicker rather than answering those questions when they come up during development.

5) What is my deadline? 📅 (When?)

Setting deadlines for ourselves when working on a project is stressful, trust me, I get it. We tend to doubt our abilities, or on the contrary, sometimes we even overestimate what we can accomplish. This leads to giving up, getting lazy, and not achieving what we set out to do.

However, despite the fact that deadlines do bring stress into the equation, I think this is less of a detriment, but rather, more of a benefit.

By giving ourselves a deadline for a project, it forces us to focus on the previously mentioned main feature of the project, rather than getting sidetracked. If we're realistic when setting our deadlines (which does take practice!) then it will force us to stay focused on our main goal.

And that's it!

While this post may seem simple in nature, I personally believe that taking these steps will lead to better development processes and experiences.

By retaining our focus on what our project is, rather than what it is not, our productivity will rise, and we will be able to focus on what really makes our project important to us in the first place, without getting caught up in making small insignificant features which, realistically, don't even matter until we've actually created something!

So, to reiterate:

What's the objective/goal of the project (The Why) 🥅
Who am I making this for? (The Who) 👨‍👩‍👧‍👦
What's the core feature of the project? (The What) ✨
What technologies am I going to use? (The How, The Where) ⚙
What is my deadline? (The When) 📅

I hope this post was helpful! And I'd love to hear your thoughts on what your process is when starting a new project, or if you'd edit anything that I have on mine.

Best of luck, and keep on coding! 👩‍💻

Settings Goals for the Upcoming Months

Kyle McKell — Mon, 08 Mar 2021 21:08:59 +0000

To say that these past few months have been off and on for me would be an understatement. I've had weeks where I'm hands on the keyboard for hours upon hours, and other weeks where I wake up at 11am, then look at the clock and suddenly its midnight. 🌚

While I do know that some of this is attributed to my 🦋ADHD✨, what I also know is that I cannot use that an excuse to be halting my own progress as a developer, as I have goals and expectations which I have set for myself, and my future employers will have for me.

So I'm going to do something about it 💪

I'm going to share my goals here, and track my progress on a daily basis (give or take a few days off as to prevent burnout). Self accountability, while powerful and important, can only go so far when your goals seem so far away.

So, what things do I want to IMPROVE

1) Website Styling 💅

As a front-end developer, it's important to be able to be confident and comfortable on styling a websites.

When I first started doing web development, I struggled hard with CSS, I hated it, I burnt out of programming from it, so when I came back to programming, I chose to ignore CSS.

This wasn't a great decision, as now I am behind where I should be in my abilities to stylize a webpage.

I understand how to implement certain items on a webpage, but I haven't given myself the reps to feel confident in making something that I'm proud of show off to others.

Let me give you an example:

This is one of my apps. You can see the live implementation of it here. While the styling of this page isn't horrific, and I don't even think I would say that it is bad, it's definitely not something that I'm proud to be showing off to everyone. It feels basic, it feels a bit sloppy, the sizes feel odd, and while I do like how I have the colors of the background correspond with the Pokémon's types, it just feels... off. 😩

As one of my main projects that I have featured on my portfolio (which I also want to refactor the styling for), I need to hold myself to a higher standard if I'm wanting to be wowing people with my work.

Here is an example of something that I made with TailwindCSS that I'm pretty proud of:

I feel as if this small CSS project really features my ability to be able to create something that looks clean, organized, and like something someone would pay me to create. However, I did this with TailwindCSS, and while I do love Tailwind, I need to learn how to create consistent stylized experiences without it.

I'd also love to learn styled-components better! This blogpost by Josh Comeau is incredible, and inspiring! 🥰 (seriously, check him out!)

2) Optimize my apps 🏃‍♂️

Right now, I have only a couple projects on my portfolio, and the main one (the Pokédex one that I showed earlier), is buggy, and is far from optimized.

One common error that I, and others, seem to run into, is on a fresh page load onto the homepage. Once you've loaded a singular Pokémon (such as the Bulbasaur page from earlier), the rest of the Pokédex seems to load quickly and efficiently. However, in a new browser, it seems to choke up and never load the Pokédex, leading to an error being thrown. 😪

Not only is my error handling underdeveloped, it doesn't solve any problems! By just throwing an alert on the screen, it avoids the real problem and a real solution.

An employer isn't going to take the time to go to a separate Pokémon page if the home page doesn't even work for them. It's an unrealistic ask from me for them to do so. These small problems are things that I personally need to test better and focus on more. While this app was being developed, I never ran into this issue, as I wasn't ever obtaining these fresh loads, however, the problem does persist, so I need to take it into account.

Additionally, I've done a lot of learning since completing this application, it's not a reflection of my current abilities. I just haven't been focused on completing applications, but rather I'm in a sea of uncompletion. 🌊🦈

3) Planning and Completing projects 📑✅

As I just stated. These past couple months have been in toil of not completing things that I start. I either lose interest in a project, or hit a roadblock which seems impassable, so I switch projects. 🧱

This obviously is detrimental for me, and my future employers wouldn't take kindly to this "quirky" trait.

I'm going to take more time to plan my projects beforehand. Find the structure in which they are going to be created, and then execute on those plans. I tend to run into issues where I have coded myself into a wall, where additional features to add are only achievable after a large refactoring of my already existing code. This isn't an efficient way to work, and its no wonder that I end up giving up on my projects (despite this being the worst decision no matter how hard it is).

So basically, I need to make it so my projects are cleanly coded, planned, and then the execution is writing down syntax and bug squashing 🐛. I've done this in the past, and it becomes infinitely easier to complete an application if you have the vision of the end goal before you start, rather than just starting and hoping the bridge will continue appearing before you as you create. (until it inevitably doesn't, and you fall off, whoopsie 🤷‍♀️)

I would also like to learn how to make my projects more TDD oriented. Jest is on my (albeit long) list of things to learn correctly, and by implementing this, I know that my applications will start to be stronger and more robust. 🏋️‍♀️

What is my end goal 🤔

Now, all of this is great, becoming a stronger developer is something we should all seek to be. However, not having a clearly defined end goal is only going to hurt rather than help. Giving too much flexibility, especially with my ADHD, makes it so instead of feeling more free, I feel constricted and stressed on having to make more and more decisions on a daily basis.

My goal is to create 3 projects for my portfolio, each one being something that is styled well, executes well, and was planned and completed to at least a MOP. After this, I want to update my portfolio with a similar vein.

But this seems like a LOT! How are you going to complete all of that, it seems like an unfocused goal

You'd be correct! This is merely the end goal for what I want to achieve, so lets split that up, like into one big ol' programming pizza 🍕👩‍💻

Which I'll cook up in the next post 👨‍🍳. I've got some planning to do!

Why Learning a Second Language Helps with Learning React

Kyle McKell — Wed, 03 Feb 2021 18:37:02 +0000

I started programming 3 years ago. Much like many people, I started my journey with Python, as I had taken a class in my freshman year in High School that had one section about coding in Python. I remembered enjoying making little applications using the turtle library, so I figured it would be a good choice.

I started out by making simple applications, just the basics, like making an app that has a user put in their age and if they've had a birthday this year and it spits out what year they were born, for instance. Very simple applications, but I got my feet wet, at the very least.

At some point during this Python process, I dropped coding altogether, not entirely sure why, but when I picked back up coding I decided that I wanted to devote my time to Web Development, as my job at the time prospected me to potentially start working under them as a developer.

While that never worked out, as I couldn't gain the skills needed to operate in such a codebase, in such a small company, in such a limited amount of time, I did get going with making JavaScript applications, much thanks to the wonderful curriculum at FreeCodeCamp.

Running into a wall

Over time, I found it harder to put my applications together, I was struggling more to understand what I was doing, and so many questions were left unanswered for me due to the abstraction and dynamic typing of JavaScript. I spent hours on CodeWars, and while I was able to solve these problems, I was confused on where to go next, everything seemed daunting and confusing. I felt unprepared for React, but slamming algorithm problems wasn't helping.

This was until I took Comp Sci 1: Java at my local Community College

I fell in love with programming in a whole new light. Java answered so many questions that I had with JavaScript.

The strong typing increased my understanding of how to write better code, and understood just why the strict equality was so important in JavaScript, just to name one benefit.

I eventually took the wonderful curriculum created by JetBrains Academy, since it was free for students at the time, and my knowledge of coding, computer science, and Java accelerated to an all time high.

Now, why does this have anything to do with learning WebDev and React?

Well, learning Java made learning React easier.

Connecting the dots

Java is a class based language, which put simply, separates everything in a type called a class. If you code in JavaScript, you likely are familiar with ES6 classes. These are very similar to how Java treats their classes.

React, before the introduction of hooks, was also class based primarily. If you needed to hold state, or have lifecycle to your components, you had to have a class component. These class components are strikingly similar to classes in Java

Allow me to explain:

Java relies heavily on inheritance, composition, and polymorphism, as it forces its users into an object oriented approach due to its class based nature. This teaches coders to learn best practices on how to not repeat their code, and find associations between different objects.

React is very similar in how it works. The concept of a component based framework (yes, I know React is a library) is to create components which then are reusable in the rest of your code, and to create sub components which are composed of their parents. (React does discourage inheritance, however).

As you can see, this is very similar in how both of these languages are structured. By learning a second language which forces you to accomplish the task needed by another language, you learn how to truly manage your code in a more controlled environment, which allows you to understand how to have your classes, or components, talk to each other.

What not to do

I would like to quickly take a section to mention some confusion which some of my beginner readers may need addressed.

While I do support the learning of a second language, as it helped me infinitely with my knowledge pool of coding, I do not recommend doing so until you run into a wall of questions that need answers, that can only be answered with a lower level language.

An unhealthy obsession that many beginners have is the "end be all" mentality of learning a coding language. They feel as if they need to choose the correct language or their entire career is going to be delayed infinitely, as if what they are learning goes out of "style", they'll be left with nothing.

However, this isn't the case, you should spend time with a language, learn how to make applications, learn how to solve algorithm problems, and learn the basics of programming before moving on to a second language. It is true that learning your second language is infinitely easier than learning your first, as most of the time, you simply have to learn syntax and a few quirks that the language may possess.

That being said, don't be afraid to reach out to a language (specifically lower level, such as C++, Java, C#, if you're learning JavaScript or Python), if you have questions which need to be answered, or you're struggling to write code that you feel is well written, sometimes a fresh slate is what you need to get something into your head.

Conclusion

Learning a second language saved me as a programmer, and helped me understand how to create better applications, and better code.

Do you have any suggestions? Leave them in the comments below, I'd love to hear your feedback.

Happy Coding!

Kyle