Forem: Breeana Payton

You Should Make Templates

Breeana Payton — Mon, 13 Sep 2021 11:36:03 +0000

One of the first lessons most developers learn in improving their code is the DRY (Don't Repeat Yourself) standard. Simply put, if you have to write that same component twice but with different content, you need to refactor. The problem I see is that most developers only apply this to the code and not their processes. This is where templates come in. Here are 3 immediate improvements to your project process if you take time to template your most used designs and components.

Increased Speed

How many times have you retyped an entire Navbar/Hero Section/Sidebar in a new project? Wouldn't it have been easier to copy that Navbar from the last project and make small changes. If in React, you could style the component, add props for customization (background color, font-size, etc.), save it to a "favorite components" folder, and import those components when needed. This cuts down future build time significantly.

Easy Practice

Consistent practice is one of the harder parts of learning to code. This is sometimes because developers burn out on Javascript challenges or building entire projects. What if you only have 20 minutes today? Building a styled footer that you can use for your next project should take just that amount of time. It's a creative break from the "logic grind" and still productive.

Develop A Signature Style

Imagine having a library of 25 custom Bootstrap Cards to choose from? What if you displayed them on a site as a project show to recruiters or clients? It would be an easy way to say "This is my style of design" and would show your ability to create reusable components. As a bonus, this would also show your dedication and passion to code.

Overall, templating code can greatly improve your process by making it more seamless while also creating practice for the core elements of Frontend Development.

I hope this convinces you to store some of your favorite elements today. If you have some that you'd like to share, comment your GitHub profile below. I'd love to see!

VS Code Shortcuts

Breeana Payton — Wed, 11 Aug 2021 15:02:04 +0000

I remember starting out with HTML and hating when I had to code a list.

<ul>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <li>Question</li>
    <!-- And so on... -->
</ul>

Though you could use copy and paste I couldn't imagine that developers would use such a slow method when it is their passion to make software more efficient. So I did some research and here are 3 of the shortcuts I came across that I now use everyday.

Copy the Line Without "Ctrl (Windows)/Command (Mac) + C"

You can copy a line of code without having to highlight, copy, and paste. Put your cursor on the line of code you want to copy, hold Shift + Alt/Option and press the down or up arrow key if you need to copy the line above or below. It looks like this:

Edit Multiple Lines at Once

What if you needed to change that list of questions to now be a list of answers? Instead of highlighting line by line you can now select multiple lines by holding Alt (Windows)/Option (Mac):

Use Emmet Abbreviations

So I've made my list, but now I realize that they all need an id if I want to be able to manipulate them individually in Javascript. IDs have to be unique. Do I need to edit line by line? What if there were 100 of these?

This issue could have been prevented using Emmet, a tool built into VS Code (and a lot of other code editors) that includes a ton of code shortcuts for some basic languages. The shortcut that would solve my problem looks like this:

Now that first line looks a bit insane:

ul>li#question${Question}*5

Let me break it down:

"ul": Letting Emmet know I want an unordered list
">": This is a "child" signifier. Whatever element follows will be the child of the ul.
"li": I want a li element inside the ul.
"#": The symbol for the id attribute (like in CSS) the text that follows is the value of id. So #question is id="question".
"$": This is tells Emmet "I want this numbered". By default it starts with 1.
"{}": This is a "text" signifier. This will add text to the nearest element.
"*(number)": This is a "multiplication" signifier. This tells Emmet you want the current element repeated "number" of times. We could replace the 5 in the example with a 20 if we had 20 questions.

For more Emmet Abbreviations you can visit here.

Hopefully these can help you speed up your coding a little. If you have any questions about Emmet feel free to comment below. I'm happy to help.

What Is a CRUD App?

Breeana Payton — Wed, 11 Aug 2021 12:59:25 +0000

This is a common interview question for Jr. Developer roles and honestly just something all developers should know. Here's a secret though, interviewers aren't looking to see if you know the definition. They want to see how you explain it. This question test your technical communication skills. The interviewer wants to know, "Can you clearly present a project to developers and clients?" Here's how you can knock this question out.

Basic Definition Is the Roadmap

A CRUD App is an application that lets users Create, Read, Update, and/or Delete content.

Simple and sweet but only the beginning. At this point the interviewer knows you can memorize a Google definition. Now you need to show understanding.

Tell A Story. Paint a picture.

So let's say you have a blog. You as a user can Create/Publish a post, Read/Show your post, Update/Edit your post and Delete your post. Blogs are classic CRUD apps.

Now the interviewer knows you understand the concept but we can take this one step further to make the answer more complete.

Tie It Back To The Job

In web development CRUD functionality is tied to API calls that updates the user's information in a database. Create is tied to a POST request, usually through a submit or publish button. Read ties to GET requests. Update ties to PUT and PATCH requests. Delete ties to DELETE requests.

There you have it. Now we have answered the question, shown that we understand our answer, and shown that we know why it was asked in the first place. If you have an interview coming and don't understand something I've written here, feel free to leave a comment and I'll discuss this with you.

Copying VS Understanding Code

Breeana Payton — Wed, 11 Aug 2021 02:55:59 +0000

You need to build a countdown timer for your project. You remember something about setInterval but can't quite place it. You open a tab and see Google staring back. There is a choice here. Do you type "setInterval documentation" or "javascript countdown timer"?

One of these teach you the answer while the other will simply give it to you.

Making Sure You Learn

If you googled the javascript countdown timer one of the first links you'll come across is from Stack Overflow and you'll find a function that looks like this:

function timer(){
    var sec = 30;
    var timer = setInterval(function(){
        document.getElementById('safeTimerDisplay').innerHTML='00:'+sec;
        sec--;
        if (sec < 0) {
            clearInterval(timer);
        }
    }, 1000);
}

When coding for companies or bootcamps there will be a code review and you will have to explain your functions. Here are 3 ways that you can prove that you understand the code and make sure that you're learning:

Can you test the code?

Looking back on that timer function could you write a test for
it right now? Which testing library would you use? What would
a fringe case look like? Do you need any extra resources to
test it?
Can you apply the code within a framework/other language?

How do you implement this code within React, Angular, or Vue?
What does this look like in jQuery or Typescript?
Can you explain this function using comments or documentation?

This is a crucial skill to have when contributing to larger
code bases and for debugging. Can you break this code up line
by line and describe what's happening?

If you can answer most of these questions congrats! You are leveling up. If not, congrats! You have a new goal to chase. I am still building my skills in these areas as all developers are. I'm just letting you know what I wish my bootcamp teachers would have told me. If you need any help with these questions feel free to comment below. I'm here to help.

How To Center A Div Within A Div

Breeana Payton — Wed, 11 Aug 2021 01:17:19 +0000

I don’t think I’ve met a single soul working in web development who hasn’t googled this more than once. Whether you’re new and trying to finish that first project, or like me and immediately forget everything you’ve learned once you start a project, this is just one of those concepts that takes a while to stick. Either way I won’t judge nor will I waste your time. There are a ton of ways to accomplish this task. I’ll keep it simple and show you my go-to.

Hello Flexbox 👋

Since the goal of most web pages is to make them responsive, using flexbox cuts down on a lot of the work when working on media queries.

Prerequisites

Make sure the height CSS property of both the body and HTML is set to 100%
Make sure the display CSS property of your parent container is set to flex

Now we can apply some CSS and HTML as follows:

HTML

<div id="flex-container">
    <div>
        I am centered
    </div>
</div>

CSS

html, body {
    height: 100%:
    margin:0;
}

#flex-container {
display: flex;
height: 100vh;
background-color: #31493C;
justify-content: center;
align-items: center;
}

#flex-item {
background-color: #FCA311;
}

The result:

And when you resize the window:

Simple. Now if you’re a beginner I want you to think about something. There is a line in this code that could give you problems if the “flex-container” isn’t the outermost container. I did this because you shouldn't copy code you don’t fully understand. Tell me which line is the potential issue in the comments below… or yell at me about it. I accept both.