DEV Community: Maegan Wilson

3 ways to make better pull request descriptions

Maegan Wilson — Fri, 20 May 2022 14:03:17 +0000

A pull request, aka merge request, is crucial in the git workflow when working on a team. If your project has CI/CD setup, it is usually the piece that needs to be merged to trigger code to production. This post outlines three ways to make your pull request descriptions better.

1. What and Why

Make sure you are clear about what your code does and why it’s essential. Explain what it does and include whatever is necessary to show what it does. GitHub allows images and gifs in the pull request description, so if those would help illustrate you’re point, then do it. Including a why lets the code reviewer know the purpose of the pull request.

How does What and Why differentiate

The what and why of a pull request might seem similar, but they are quite different. The what of the pull request explains what the code does, and the why defines the pull request's impact.

Example

I want to submit a PR that updates ESLint.

## What

This PR adds a new ESLint rule to adjust the import order

## Why

It makes the code easier to read and easier to follow by organizing imports in a predictable way. It also groups imports by siblings and parents.

In the example above, the what says what the code does and the why explains how the pull request is necessary.

2. How to determine if this PR is good to merge

Mention how the reviewer is supposed to test the pull request works in the description. Explicitly stating how the code reviewer is supposed to evaluate the code will make it easier for them.

Example

Building on the above example:

## What

This PR adds a new ESLint rule to adjust the import order

## Why

It makes the code easier to read and easier to follow by organizing imports in a predictable way. It also groups imports by siblings and parents.

## How to test

1. Open a JavaScript file
2. Change the import order
3. Save file and see how it changed

The above example is a great start, but a way to take it up a level would be to actually give before code and after code in the description like this.

✉️ Get articles directly to your email.

3. Create a template

If you have a structure to your pull request, you should create a template. A template gives pull requests structure since it guides the author on what they should include. It also ensures that all the necessary pieces to the pull request are there.

A sample template might look like this:

## What

Describe what this PR does

## Why

Describe the impact that this PR makes

## How to test

Describe how to test that this PR does what it says it does

## Checklist

- [ ] Ran all tests locally
- [ ] There are no credentials stored in the code
- [ ] Has this been signed off by PM or designers or any other stakeholders?

Here are links to making a pull or merge request template on GitHub, GitLab, and BitBucket. I found these by googling “How to make pull request template on {platform}” so if your platform isn’t here, then you can probably find it using the exact search.

If you have any comments about this post, then make sure to let me know on Twitter, @maeganwilson_ and follow me there.

☕ Support my articles by buying me a coffee

How to use the @FocusState property wrapper in SwiftUI

Maegan Wilson — Fri, 29 Apr 2022 16:12:57 +0000

Here’s how to make TextFields focused and not let a form close until the proper fields are filled out by the user.

This article is also a video

WWDC 2021 introduced the property wrapper @FocusState. It can be used to set which textfields are in focus pretty easily. I’m going to open this form for adding a new bag of coffee an app I’m working on.

Notice how when I click on save it just closes the form and doesn’t dismiss the keyboard. The @FocusState can help fix that. First thing that needs to be added is an enum with the fields that we want to be required.

private enum Field {
    case name
    case style
    case roaster
}

The enum needs to conform to the Hashable protocol so you can either force conformance by adding : Hashable or as long as the cases don’t have a value assigned you should be good since Swift will do that “automagically”.

Now, we need to add a variable with the property wrapper @FocusState private var focusField: Field
Then on the TextFields, add the focused modifier and what field it should be equal to

TextField("Name", text: $beans.name)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .name)
TextField("Style", text: $beans.style)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .style)

TextField("Roaster", text: $beans.roaster)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .roaster)

Next, let’s put some logic in to make sure these fields are filled and set the next focusedField

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
    }
}

Also, after a successful save, we should set the focusedfield to nil and dismiss the keyboard

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
      focusedField = nil
    }
}

Now, let’s run through the form one more time to just show it all together.

Hopefully that showed you how to use the @FocusState property wrapper. If you have any questions, then please drop a comment below.

Want my posts directly to your inbox?
Great! Sign up here!

How social media helped my career as a software engineer

Maegan Wilson — Thu, 28 Apr 2022 14:23:52 +0000

In this post, I'm going to discuss what it means to work in public, what are the positives from working in public, how it actually has helped me and why I think you should use Social Media if you come from a non-traditional background.

What does it mean to actually work in public?

Working in public means sharing what you're working on with other people. That could be a blog, an Instagram account, YouTube, or other social media. It doesn't matter how you're sharing, just that you share with other people besides yourself. Working in public is not keeping your work siloed in private GitHub repos or even in public ones if you don't link to it anywhere. You have to be sharing your progress or what you're working on in some way, shape, or form.

Where do I share?

I share my work on Instagram, Twitch, YouTube, and my website. I chose platforms that I was interested in creating content for so that I would be more inclined to post. Going live on Twitch and making a video on YouTube are a lot easier for me to discuss what I'm working on for a few reasons:

It's easy to turn on a camera
I can show my screen instantly
I don't have to spell check

Making a well-performing video on YouTube takes more effort than those 3 points, but it's usually more effortless than a blog post.

What are the positives that can come from this?

The number one positive outcome of using social media to show your work as a software engineer is networking. Meeting other people who can help you in your career and life is invaluable. I was able to take on my first freelancing project because I connected with someone in my live stream chat, and we chatted over Instagram messages also. I have received a lot of helpful advice about Swift, advancing my career, and just life from people in my YouTube and Instagram comments.

Another positive of my YouTube channel and blog is that future employers or freelance clients can see that I know what I claim to do on my resume. This "proof" is essential since my background is not in tech. I went to school for technical theatre, and I worked in the industry for five years. My previous work history does not show that I know iOS app development or web development, even though I have studied them and released two apps in the last four years. My videos and posts show that my resume is correct.

Should you share in public?

I believe you should be sharing the work you've done. It can be a simple blog post explaining a tool you've used or a photo of some code with an explanation of the project it belongs to.

If you have any comments about this post, then make sure to let me know on Twitter, @maeganwilson_!

Want my posts directly to your inbox?
Great! Sign up here!

How to add a swift package to iOS App using the Swift Package Manager

Maegan Wilson — Thu, 14 Oct 2021 12:43:38 +0000

I'm going to show you how to add a swift package to your iOS app using the Swift Package Manager.

First how to add a package to your app

To add a package you will need a repository’s URL or if the package is hosted on GitHub or GitHub enterprise and you’re logged in you can just search for the package.

There’s actually two ways.

Here is way number 1:

Navigate to the target’s general pane
Click the + button in the Frameworks, Libraries, and Embedded Content
Click on Add Other
Choose Add Package Dependecy

Here is way number 2:

Open the project
Go to the File Menu
Choose Swift Packages and enter the repo URL

How to use the dependency?

To actually use the dependency, you will need to first import the package and then call the property you want.

How to delete a package from your app

Navigate to the swift packages pane in the Project settings
Select the package to delete
Hit the - button

When should you reach for an external dependency?

An external dependency aka package can make your life easier as a developer. Sometimes they can save you hours of coding and figuring out how something works.

I use one in iHog for OSC a network protocol that I have no idea how to actually implement in Swift. OSCKit allowed me to focus on other parts of the app and for the package to actually handle all the OSC communication between the app, the iOS device, and the Hog controller.

If you are finding these posts and videos useful, then please share this post or buy me a coffee.

Want my posts directly to your inbox?
Great! Sign up here!

Git GUI vs Command Line

Maegan Wilson — Wed, 07 Apr 2021 13:19:34 +0000

Git GUI vs Command Line

In the past couple of posts, I’ve been using the command line to interact with Git, but you don’t have to do that! You can actually use an application to do git commands. If you haven’t guessed it by now, today, we are going to talk about using an app for git versus using the command line.

Now, you might be wondering, why would you want to use an app to interface with Git instead of the command line?

Well here are some reasons:

Graph view of commits
Graph view of branches
See the changes and explore them more

It’s really nice to be able to see all of this in a more user-friendly way. Yes, you can see this all through the command line, but it can be a bit easier to read in an app also might be a bit easier to use. Especially because you don’t have to remember the commands.

Most Apps will also let you set up your remote server account like GitHub or GitLab so that you can clone from the app which also avoids the command line.

There are so many options when it comes to using an application for Git. The three that I’ve used are

Fork
GitKraken
Tower

They all work on Windows or Mac and can be used together if you want. Each app offers something a little bit different, so I highly suggest you try them out and see which one you like best. I like Fork the best since it can handle private repositories for free. To support development, the developers do charge around $50, but you can bypass that if you want.

Now, how does the app workflow compare to the command line?

Well, the workflow is the same. You still add your files, commit the changes with a message, and push them to the remote server. There are just some buttons to hit instead of typing the commands. Let’s look at how Fork does it since that’s what I use as my client.

First, we need to go to the repo.

Then to add files, Fork actually has us check them to acknowledge the change and then stage them.

Now, we add our message and hit commit!

That’s pretty easy to do on the command line even, but where I think Git Clients/Apps/GUIs whatever you wanna call them really shine is when you need to do something a bit more complex like switching branches and adding tags, which I use a lot in my workflow.

If you need a reminder on how to switch and create branches via the command line, check out this post about branching strategies.

Here’s how I’ll create a branch in Fork. It’s relatively similar to all the other apps.

Right-click on the current branch
Choose create branch
Give a branch a name
Click create

Now, isn’t that pretty easy?

These are some of the niceties that come from an app.

Which should you choose?

Well, that’s not really a question I can answer for you, but I can say I still use the command line regularly even if I have an app installed. It’s a “what tool will do the right job” type answer. If you have a preference, then let me know in the comments below!

If you got something out of this post, make sure to let me know in the comments below!

The Git-ing Tree: Git Branching and Merging Strategies

Maegan Wilson — Wed, 17 Mar 2021 11:59:28 +0000

Hey yall! Let’s grab a cup of coffee or whatever your beverage of choice is and talk about git branches and merging.

What is a branch

A branch is the area where edits and commits are stored. If you watched my last video about git remote servers, then I was actually pushing to a branch already, the main branch.

By default, a git repo is on a master or a main branch. There has been a push for repos to have a main branch, but that's a topic for a different video or maybe even just a blog post. Just know, I’ll be using main in the rest of this video.

Branches can be created whenever you need one, which we will talk about in just a minute. Creating a branch will give you a new area to work in that doesn’t adjust your main branch.

When a branch is created, you create a fork in your git repo. This is what a repo looks like with commits.

And this is what it looks like when you create a branch

Why branch your code?

There are two main reasons to create branch are

Keep changes isolated from your main code base
Work on different modules at the same time

Keeping changes isolated from your main code is the main benefit here if you are a solo developer. This allows you to keep potentially breaking code away from working code.

Working on different modules at the same time is really useful for teams, so that someone can work on feature A while another person works on feature B and someone else can fix issue number 512. All 3 can have their own branch and don’t have to worry about breaking changes, until bringing the code back together.

Creating a branch

To create a branch in the code, you need to run a command

git branch <name of branch>

Now to start working on that branch, you need to run a checkout command. The checkout command is used to switch between versions of the repo and by specifying the branch name, then git will grab the branch

git checkout <name of branch>

Once you’ve checked out the branch, you can now make changes on that branch just like normal.

git add <file name>
git commit -m <Message>
git push

How to get the code back together

Now, the code has been split into branches, what happens when you want to get the branches back to s ingle point. That’s where the merge command comes into play.

To merge the branch back to main run the following commands.

git checkout main
git merge <branch name>
# optional - delete the old branch now that it is in main
git branch -d <branch name>

You might run into conflicts, but those can be resolved in your text editor. Once you resolve the conflicts, you can add, commit, and push your resolution like any other change.

My Use Case of Branches

I use branches for each release of my apps. You can see that with iHog’s GitHub Repo. There is a master branch and then the version I'm currently working on, 2021-2

Master or Main Branch is always the latest release

I keep master or main as a release branch. Meaning, that it’s not in development. This is the code used that is currently on the app store.

If I’m adding a feature in the middle of a version, then I will add a branch for that feature off of the version’s branch and then merge the feature back into the version branch.

This work flow allows me to issue bug fixes without needing to finish the feature if need be.

Thanks for reading! I appreciate it. If you found this useful, then please make sure to share this wherever you can!

Git that Code!

Maegan Wilson — Wed, 10 Mar 2021 14:10:04 +0000

Welcome to "Git that Code!" The 2nd post in my Git series. In this post, I'm going to talk about the popular remote servers, GitHub, GitLab, and BitBucket, how to get your code on the server, and retrieve code from it. Let's get started!

Remote Server Options

There are 3 Git server options that you hear about, well you might actually only hear about the first 2. You could also roll your own, but that's a bit out of the scope here. So, here are some options that are free and offer quite a bit.

GitHub
GitLab
BitBucket

These are just the most "popular" options and each have their pluses and minuses, but here are some general features that each offer on their free tiers.

Free, unlimited private repos (where the code lives)
Issue tracking
Wiki per repo

Now here is what each is mainly known for:

GitHub: Open source software. Most people put their OSS on GitHub for others to contribute to or use
GitLab: Contains more devop options like Continuious Integration and more access levels
BitBucket: Has unlimited private repos and integrates well with JIRA and other atlassian software

In this post, I'll be demoing using GitHub, but it is relatively the same on all 3 platforms.

How to get code to the server

Now, that we know where to store code, let's talk about getting code onto the server. To get code onto the server, you must push the code into a repository.

What I like to do is start the repo in your choice of server, mine is GitHub and then get the repo onto my computer, but in the last post I walked through making a git repo locally, so let's get that repo onto GitHub.

The first thing I need to do is make a blank repository. This repository is going to be where the code will be stored.

Open your browser of choice
Navigate to your server
Sign in
Create a new repository
Don't check any of these boxes, but make sure to give your repo a name.

Now, this is the remote repo that needs to be added to our local repo. GitHub gives us some handy quick setup which is what we are going to follow.

Open your terminal app
Navigate to your local repository
Add a remote url to the local git repository git remote add origin
Now we need to create a branch locally git branch -M main
Then, we push it to the server. basically we are uploading it to the server now. git push -u origin main

Now the code should be in my GitHub repo. Let's refresh and BAM it's there.

After commits have been made, we need to run git push which will push the commits to the remote server.

When do you push your code? All the time. Sometimes I do it after a long session. Sometimes I do it after each commit. Just make sure your code in the remote server is as up to date as possible. In case things go south, you want a way o bring that work back and the history back.

How to get the code from the server

We just talked about pushing code to the server, now let's talk about pulling and cloning code from the server. There are two basic commands to get the code from the server. They are git clone and git pull. Each are used in different scenarios.

git clone is mainly used to get a repository from the server that doesn't exist on the local computer. If you stumble upon a project on GitHub that you want to hack on, then you clone it to your machine.
git pull is mainly used to get changes to a repository that you are working on locally. It can be used if you're working on a team or make a change on the web that you need on your computer.

Let's walk through an example of cloning a repo. I'll clone my hello-world-js repo from forever ago.

Open terminal
Navigate where you want to store the repo for me that'll be my developer folder
Grab the URL to clone from the repo
In the terminal type the command git clone git@github.com:maeganwilson/hello-world-js.git and press enter
DONE!

Now, we can edit the file and push it back.

Alright, cloning was kinda easy, now let's try pulling. Like I said, pulling can only happen when there are changes on the server that you need to git. So, I'm going to make some changes in GitHub.com in the iHog repo.

Now, in my terminal, I'm going to change my directory to iHog and then run git pull.

In the terminal, we see how many changes were made and a bit more.

That's a very basic overview of using a remote server and how to pull and clone code.

In the next post, I'm going to cover branches and not the outside tree kind.

If you want to chat with me and point out some tips and tricks, you can watch me work on iOS apps on Tuesday, Thursday, and Friday mornings at twitch.tv/maeganwilson_ Make sure to drop by and say hi!

Git-ing Started: An intro to Git

Maegan Wilson — Wed, 03 Mar 2021 13:58:17 +0000

Let’s talk about Git. This is the first post in a series of using git. In this post, I’m going to explain these things:

What is Git?
Why you should be using it
How to use it

If you'd rather watch a video than read though, you can do that right here also!

What is it Git?

Git is “Distributed version control” meaning it keeps track of changes made to files and there is a remote server somewhere else in the world that also has those changes. A common remote server is GitHub, which I will talk about in the next video, so make sure to hit that subscribe button and the bell to be notified when I post it.

Basically, it’s like track changes in Word but for files in a repository, or folder, that are stored locally and can be pushed to a remote server if needed. These files can be any type, but it works best with text files.

It’s usually used by developers to track all the changes made in source code and to collaborate on projects since it supports working on different parts of the project and merge them together. Since each computer also gets the full history of the repository, or project, the developers can also go back to another point in time and adjust things there.

Those advantages also stand for being a solo dev, so let’s talk about why you should use it.

Why you should use it?

If you’re not on a team, I still say you should be using git and here are my reasons.

Allows you to see what changes are made
Allows you to easily roll back changes if needed
Allows you to have a backup of your developer environment if using a remote server like GitHub

How does one use git?

We’ve talked about why and what is git, but how do you actually use git? Like what software do you need and what do you do?

First off, download and install git

from git-scm.com

That’s the only “extra” piece of software you need, since git can be ran through the command line

Workflow

Initialize git to the repository or project folder, I’ll call it repo from here on out
Create and or modify folders and files
Add those files and folders to git’s staging area
Commit the changes to git
Push those changes if you have a remote server

All 5 of these steps have commands, so let's work through creating a basic website that has git.

Example:

Creating a folder for the project

Create a new folder, I’m going to be creating it in my ptd folder, but it could really be anywhere on your computer.

Initialize git

Now, we are going to tell git to start tracking this folder.

Open the terminal app or whatever you use to access the command line
Change your working directory to the folder you just created
1. Use cd followed by the path to the directory to change your working directory
2. cd developer/git-website
in the terminal, type git init . Now git is working on this repo

Create an index.html file

Now, let’s create a simple index.html file that just shows “GIT IS THE BEST” and make sure to save it in the git-website folder

Stage the file

Since, the file has been created, we need to actually tell git to track this file and the current state of the file. To do this, we use the command git add {file path}. This will need to happen for any change you want git to store.

git add index.html adds index.html to the staging area.

You can repeat this step for as many files as you need.

Record the changes

Now, to actually tell git to record the changes that were added by committing those files. When committing files, you must specify a message.

git commit -m “Adding the index file”

Push those changes

Again, this step would only happen if a remote was setup, which we didn’t do in this video, but will do in the next one! So make sure to hit that subscribe button and the bell so you don’t mix it.

The command to push the changes is git push

You’ll repeat the git add, git commit, and git push a lot throughout the project so get used to those commands.

That’s the basics of what git is, why you should use it, and how to actually use it.

In the next post, I’ll talk about adding a remote server tool so that you can push your changes to a remote repo.

If you found the post useful, then please share with anyone you think will find this useful.

5 Ways to improve your Xcode workflow

Maegan Wilson — Thu, 11 Feb 2021 00:21:20 +0000

Here are my top 5 tips and tricks for using Xcode! This is a script for a YouTube video I made which is right here!

If you have any tips, then please let me know in the comments cause I would love for them to be shared.

1. Build and Run Shortcuts

First off make use of the short cuts for building and running the app. These are actions you'll do a lot

Command + b = build
Command + r = run

These will save you time in the long run cause your hands are already on the keyboard and don't have to go click the Run button on the toolbar.

If you use the canvas, then make sure to jot down the shortcut to restart the live preview. The canvas will stop it's updating when adjusting anything not in the View it self, so if you add a variable or an environment object, you'll need to restart it. The shortcut is

Command + Option + p

So these three shortcuts are probably my most used short cuts.

The next most used shortcuts are in my next point.

2. Keep the file formatted

How many times do you go back into your code and look for a specific line or are just reading a section to understand what's happening? I know I do it all the time. Having a file with the right indention and is easy to follow cause the formatting is the same makes the world of difference.

Xcode has a way to format a section of your code.

Select the part you want to format and then press Control + i

To do this to a whole file, select all then control + i.

Command + a → Control + i

Another reason to format your file is to easily know if something syntax wise isn't working. Sometimes this is faster than waiting till build time to find the error.

I just talked about keeping the file formatted correctly to help reading a file, but let's shift to navigating your file. Maybe I know exactly where I want to go, well that can be done pretty easily.

My 3rd topic is how to navigating your file like a pro.

3. Navigate your file like a pro

Utilize the drop down menu on the file name to navigate your file. What gets populated there?

Declaration of properties
Declaration of functions
Comments that are MARKED
Comments that are TODOs

You can click on any of these items and immediately be taken to that item. It's useful to get exactly where you need to be and also get a quick glance of what exactly is happening in a specific file.

Number 4 and 5 are how to make your code a bit better with a bit more work on your end.

4. The Add Documentation feature

Sometimes you can Option + Click on a property name and get information about it. Especially when it's a class or function provided by Apple. Well, you can also do this for your code!

Command + click on the class, struct, or method and choose add documentation. You'll then be given a template to fill in! The best part is if you do this on a method or function that requires a property then it also gives those as well.

Let's see this in action by checking out OSCHelper. In here you can see at selectProgrammingObject there isn't any documentation about what this does or when to use it, so I'm going to change that.

Command click on the funciton name
Choose Add Documentation
Fill in the documentation

Now, when I option click on the name, I get the summary and what parameters are needed.

Tip number 5 is another option inside that menu and it's the rename feature.

5. The Rename feature

I'm sure we've all been there when a variable is declared, but then the name doesn't fit what you are using it for but then it's been used in 8 million different places. Well that's where the Rename feature comes in handy.

Command + click on a property name gives some options no matter where you are. It will also go through the project and completely rename all instances of that property, method, or function.

It's a very useful tool that saves me a lot of time and headache.

Hopefully these 5 tips help you out in your app development! If you found these tips useful make sure to hit the like button and drop a comment with some tips I missed! Thanks for watching!

If you want to chat with me and point out some tips and tricks, you can watch me work on iOS apps on Tuesday, Thursday, and Friday mornings at twitch.tv/maeganwilson_ Make sure to drop by and say hi!

How to use Notion as an Issue Tracker

Maegan Wilson — Wed, 27 Jan 2021 14:19:19 +0000

First off, this is a video on YouTube. If you like it and watch it, please head over to YouTube and give it a like.

Alright, if you're reading this it's because you want to read the points in the video. Here are the two major topics:

What is Notion
Why I use Notion as an issue tracker

What is Notion

Notion brands itself as an "All-in-one Workspace" and as a major tool for teams. It's a web app that can be used to create a "wiki" style document. You can add links to other notion documents, photos, and website links as well. YouTube videos can also be put in to the documents, which is pretty neat.

Why I use Notion as an issue tracker

The main reason I like to use Notion as an issue tracker is the database feature. Another reason I like using Notion is that I can share a page quickly to the web.

Databases

This database can be setup with whatever properties you want. The choices I use are:

Text: Enter whatever text you want
Number: I use this to associate to a GitHub issue
Multi-select: Think of these as chain-able tags
Select: Think of these as non-chain-able tags
Links: Put a link to anywhere on the internet

Another bonus to the database feature is that you can have different views to present the data.

Once you create a view, then you can sort and filter the data based on the databse properties. I have a property called progress and a Board view that has the columns based on the progress. The progress is a select since an issue can only be in one state at a time.

Then utilizing filters and sorts you can quickly see specific issues for a release or any other property in the database.

These filters and sorting capabilities make Notion such a great tool for me.

Sharing a web page

You can share a web page with the internet if you need to. Anyone can access it and click on links. This makes it quite easy to make a one page website and share to other places.

Another nice thing is on that page, you can add a linked database that can be filtered and used in the page. In the image below, I have 2 views of the issue tracker. You can click on the image and see it live.

That's what I have about Notion!

Links as a thanks for reading!

I work on iHog live every Tuesday and Thursday at 6:45am CST on my Twitch. Please go check it out and join me for a stream!

I've created a discord for to discuss development topics, technology, and other random things! If you want to join click the image below!

5 VS Code Extensions You Need to be Using in 2021

Maegan Wilson — Wed, 06 Jan 2021 12:57:34 +0000

In this post, I''m going to cover my favorite VS Code extensions, the settings I use, and some other things I like about the text editor!

If you'd rather watch than read the post, then here is the YouTube Video.

What do I use VS Code for? Well, I use it for web development and notes if needed but mainly for web development in React or Vue depending on what I need to accomplish. I also like it for writing in mark down due to it's Mark down preview

What also makes VS Code my favorite Text Editor are the extensions and here are my favorites! You can quickly get all the extensions in this post from my kit.co page.

1. Path Intellisense

Path intellisense is going to auto complete file names for you. This is super useful when trying to link to a custom component or a CSS style sheet in an HTLM file.

2. Better Comments

Now, I like this extension because I love leaving meaningful comments in my code for me or my team mates. It's helpful to know what I was thinking at the time or to know why I chose to pass a specific parameter and Better Comments makes that easy to see and distinguish. It has custom formatting for important notes, questions, todos, and parameters.

Some languages it supports are HTML, CSS, JavaScript which includes React, Swift, Go and so much more.

So, the jist of better comments is to make the code comments be easier to read at a glance.

3. Bracket Pair Colorizer 2

This extension highlights nested bracket pairs by giving them different colors. It also outlines the section of the code in the editor.

This really helps read-ability and edit-ability of the code since brackets can get nested quite fast in React.

4. Prettier

The Prettier extension helps code look better and be more consistent. It keeps me coding in the same style all the time or for specific directories. Another reason I love using formatters because it helps me realize where I make errors. If the code doesn't format, then there is an issue with my code some where.

5. ES7 React/Redux/GraphQL/React-Native snippets

This snippet example is super duper useful. It can save some typing and cause less typos. You type the abbreviation, then hit Enter and then you have the full thing. Here are my favorite snippets:

imr - Imports react
exp - Exports default
imd - Import {destructed module} from 'module'
nfn - Creates a constant function
clg - Console.log

These aren't that hard to type out, but it helps me be consistent.

My Aesthetics

Here's a list of my fonts, icons, and themes.

Fonts

Operator Mono - this stays the same between Xcode and VS Code.
Fira Code - Occasionally I do use Fira Code if I really want ligatures.

Themes

Xcode Default Dark - This is my go to theme so VS Code looks similar to Xcode
Cobalt2 - This is my "I'm feeling crazy and need a change real quick" theme

Icons

Material Icon Theme - Gives cool icon

Get all the extensions from my kit.co page.

Thanks for reading or watching the video! If you enjoyed this post, then share it please!
Feel free to stop by my Twitch stream on Tuesdays and Thursdays at 6:45am CST and say hi! @maeganwilson_
You can also follow me no Instagram @parttimedeveloper_ and subscribe to my YouTube channel parttimedeveloper_.

2/100 Days of SwiftUI

Maegan Wilson — Mon, 04 Jan 2021 13:43:19 +0000

Here are day 2's notes! Have fun and if you have any questions or notice there's an issue, let me know on Twitter, Instagram, or in the comments.

Today's Topics

Arrays
Tuples
Dictionaries
Sets
Enums

Arrays

Arrays are collections of data in a specific order and are stored as a single value.

Example of an Array with my pets

// values for array
let thorgi = "Thorgi Wilson"
let dobby = "Dobby Wilson"
let cairo = "Cairo Wilson"
let sydney = "Sydney Wilson"

// creates the array
let pets = [thorgi, dobby, cairo, sydney]

To retrieve a value from the array, the position of the value is needed. Note, the positions for array start at 0.

Example: get the value of dobby

pets[1] // Dobby Wilson

If trying to get a value from a position that doesn't exist, then Swift will crash.

If wanting to give a type to the array, put the type annotation in brackets. The image below shows that calling pets[6] gives an index out of range error since there are only 4 positions in pets.

Sets

Similar to arrays but have two main differences

Items are not stored in an order and may be returned in a different order
All items must be unique

Create a set by using Set() and put a collection of items inside it.

Example:

let westNHLTeams = Set(["Ducks", "Blackhawks", "Coyotes", "Avalanche", "Flames", "Stars", "Oilers", "Wild", "Kings", "Predators", "Sharks", "Blues", "Canucks", "Jets", "Golden Knights"])

If you create a set with duplicate items, then the duplicates get ignored.

// flames and avalanche are duplicated
let westNHLTwo = Set(["Ducks", "Blackhawks", "Coyotes", "Avalanche", "Avalanche", "Flames", "Flames", "Stars", "Oilers", "Wild", "Kings", "Predators", "Sharks", "Blues", "Canucks", "Jets", "Golden Knights"])

print(westNHLTeams)
// ["Blackhawks", "Predators", "Blues", "Stars", "Kings",
// "Avalanche", "Golden Knights", "Coyotes", "Flames",
// "Sharks", "Oilers", "Wild", "Ducks", "Canucks", "Jets"]

print(westNHLTeamsTwo)
// ["Blackhawks", "Predators", "Blues", "Stars", "Kings",
// "Avalanche", "Golden Knights", "Coyotes", "Flames",
// "Sharks", "Oilers", "Wild", "Ducks", "Canucks", "Jets"]

Notice in the two print statements the outputs are the same.

Tuples

Store a several values in one value. Tuples are different from arrays because

Tuples are fixed in size
The type of items in a tuple cannot be changed
Tuple items can be accessed from name or numerical positions. Swift will not let you read numbers or names that don't exist.

var name = (first: "Taylor", second: "Swift")

name.0
name.first

When to use each?

Arrays, Sets, and Tpples are a collection of data. Each of them has a specific use case.

Tuples should be used when each item has a precise position or name
Sets should be used when every value in the collection is unique
Arrays should be use when order matters and or you need duplicates
- Arrays are also the most common data type

Dictionaries

Collections of calues like arrays.

let captains = [
    "penguins": "Crosby",
    "wild": "Spurgeon",
    "sharks": "Couture"
]

If a key doesn't exist, then you get back nil.

captains["penguins"] // Crosby
captains["ducks"] // nil

Adding a default value to ducks could be easier to know what your return type will be.

let captains = [
    "penguins": "Crosby",
    "wild": "Spurgeon",
    "sharks": "Couture",
    "ducks": "unknown"
]

captains["penguins"] // Crosby
captains["ducks"] // unknown

Empty Collections

Empty collections can be made by providing type annotations.

var emptyArray: [String]
var emptyDictionary: [String: Int]
var emptySet = Set<String>()

Enumerations (enums)

Define related values in a way that is easier to use.
Can keep you from using different strings.

let result1 = "failure"
let result2 = "failed"

enum Result {
    case failure
    case success
}

let result3 = Result.failure

result1, result2, result3 are failures but because 1 and 2 are different strings it would be hard to check if it failed. By using the enum for result3, we can always get the same thing back.

Associated values can also have values attached to each case. This allows for cases to be more specific.

enum AppleProducts {
    case iPhone(generation: String)
    case laptop(model: String)
}

let maegansPhone = AppleProducts.iPhone(generation: "12 Pro Max")
let katiesLaptop = AppleProducts.laptop(model: "MacBook Pro")

Enums can have raw values also which allows them to have more meaning.

enum Planet: Int {
    case mercury
    case venus
    case earth
    case mars
}

Swift will automatically give values starting at 0 because the enum type is Int.

print(Planet.earth.rawValue) // 2

If I assign one or more cases a specific value, Swift will generate the rest.

enum Planet: Int {
    case mercury = 1
    case venus
    case earth
    case mars
}

print(Planet.earth.rawValue) // 3

Thanks for reading! Tune back in tomorrow for Day 3!

Make sure to follow my Instagram @parttimedeveloper_ for more development tips, tricks, advice, and updates on my own coding journey!