DEV Community: Katherine Peterson

How to Contribute to Your First Open Source Project

Katherine Peterson — Mon, 19 Apr 2021 16:35:42 +0000

Last week, I open sourced one of my projects, https://readme.so. It is now up to 14 contributors, and many of them were contributing to an open source project for the first time.

For many developers, the idea of contributing to an open source project for the first time is intimidating. However, it builds valuable skills and is extremely rewarding. In this post, I'll give a step-by-step guide to contributing to your first open source project.

I will use my github repo (https://github.com/katherinepeterson/readme.so) as an example, but it is the same for any open source project.

1. Fork the Repo

Navigate to the GitHub repo that you want to contribute to and click Fork in the upper right-hand corner.

This will create a copy of the repo under your GitHub username.

2. Clone Your Fork

When you fork the repo, it will take you to your copy of the repo in GitHub. Now you want to clone your fork.

Click the green Code button and copy the URL.

Go to your terminal and navigate to the directory where you want to clone the project.

Run the following command with the URL you copied above.

git clone <url>

Cd into the folder that was just created.

cd <project-name>

3. Create a Branch

Create a branch where you can make your changes.

git checkout -b <your-branch-name>

4. Make Your Changes

Open the project in your favorite editor and make your changes.

5. Commit and Push Your Changes

Next, you want to stage, commit, and push your changes to your fork.

git add .
git commit -m "your commit message here"
git push -u origin head

6. Open a PR

Navigate back to the original repo from which you forked, and you will see a prompt to open a new Pull Request from the branch you just pushed to.

Click Compare & pull request, add a description describing the changes you made, and open the PR.

The owners of the repo can now review your changes and decide whether to approve and merge, request changes, or decline your pull request.

If you need to add more changes to this pull request, you can just keep pushing to the same branch and it will automatically update the PR.

Bonus: Keeping Your Fork in Sync

If changes have been made to the original repo since you forked it, you are going to want to pull those changes into your fork. Here are the steps to do this.

1. Navigate to the Main Branch of Your Local Fork

git checkout main

2. Add the Original Repo as the Upstream Remote

Navigate to the original repo, click the green "Code" button, and copy the URL as if you were going to clone the repo.

In your project, run

git remote add upstream <url>

Now you have a pointer to the original repo, called upstream, and a pointer to your forked repo, called origin.

3. Pull the Latest Changes from Upstream

Pull the latest changes from the main branch (or whatever the default branch is called) of the upstream repo.

git pull upstream main

4. Push the Changes to Your Fork

Now you have the upstream changes locally, but not in your remote origin. To push to your forked repo, run

git push origin main

Now you are in sync! To make another contribution, you can create a new branch and repeat the process.

That's it! If you run into any issues or have questions, feel free to reach out to me on Twitter.

Resources to Get Better at Design

Katherine Peterson — Sun, 28 Mar 2021 21:39:37 +0000

I have never considered myself great at design. I could always recognize good design vs bad, but I couldn't put into words what made a good design good. Creating a good design from scratch was even harder.

So I posted a Twitter thread asking for recommendations for resources to get better at design. I got a ton of responses with awesome recommendations. To save you the time of going through the replies, I compiled a list here of the best/most popular recommendations.

Refactoring UI by Adam Wathan and Steve Schoger

Price:

$79 - Essentials: Book PDF, 3 Video Tutorials

$149 - Complete Package: Essentials + Component Inspiration Gallery, Color Palettes, Curated Font Showcase, Exclusive Icon Library

Description:

This was the book that inspired me to make this Twitter thread because it changed the way I related to design. I highly recommend this book for developers who don't consider themselves naturally great at design and want to learn some concrete tactics to improve the look and feel of their designs. I personally read the whole thing in one day, and the concepts still stick with me months later.

Also, it is written by the creator of TailwindCSS. This book will help you understand the reason they designed Tailwind the way they did and why it is such an awesome system for creating good designs.

Design for Developers by Sarah Drasner

Price:

$39 monthly Frontend Masters subscription

Description:

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation. Also, understand the rules for designing to become a better collaborator to design team members and better able to execute the creation of complex and beautiful front-end experiences!

Sarah is awesome and this one got a lot of +1's in the replies. I'll definitely be checking it out soon!

Don't Make Me Think by Steve Krug

Price:

$40 Paperback

Description:

Five years and more than 100,000 copies after it was first published, it's hard to imagine anyone working in Web design who hasn't read Steve Krug's "instant classic" on Web usability, but people are still discovering it every day. In this second edition, Steve adds three new chapters in the same style as the original: wry and entertaining, yet loaded with insights and practical advice for novice and veteran alike. Don't be surprised if it completely changes the way you think about Web design.

This was another that was recommended multiple times.

UI Design for Developers by Meng To

Price:

$19 per month subscription

Description:

In this course we'll learn how to use design systems, set up break points, typography, spacing, navigation, size rules for adapting to the iPad, mobile and web versions, and different techniques that translate well from design to code.

The UI Design Bootcamp by Gary Simon

Price:

$132 annual subscription to Scrimba

$19 monthly subscription to Scrimba

Description:

This massive UI design course teaches you to build beautiful and well-functioning user interfaces using HTML and CSS. It's filled with interactive tutorials to ensure that the knowledge sticks with you. Created by Gary Simon, the most popular online instructor on this subject.

shiftnudge.com

Price:

$199 - Core

$299 - Pro

Description:

The all–new online learning experience for designing beautiful and functional interfaces.

Unfortunately, enrollment is closed until mid to late 2021. You can sign up to get notified by email when it's open.

Uxcel.com

Price:

Free - Basics: First level of all courses, Weekly challenges, Arcade games, Basic search, Save favorites, Uxcel icon set, Professional Profile

$120 annual subscription - Basic + Access all courses, Weekly challenge archive, Advanced search, Certificates of completion, Arcade hard training, Complete Uxcel UI Kit, Community Slack Group

Description:

The world’s best professional platform to assess, learn, and showcase your UX/UI design skills.

The Ultimate Three.js Course by Bruno Simon

Price:

$95

Description:

Have you ever wanted to create stunning 3D websites?
Whether you are a beginner or a more advanced developer,
Three.js Journey is the only course you need to learn WebGL with Three.js.

This is the course for you if you want to design in 3D. Plus, if you've seen Bruno's porfolio site, you know he's the guy to teach it.

Design for Hackers by David Kadavy

Price:

$33 Paperback

$24 Kindle

Description:

If you want to learn to create great design yourself...there simply is no way to do so with lists of rules. Instead, I want to provide you with a new set of eyes through which you can see the world anew.---DAVID KADAVY
WHY DID MONET NEVER USE THE COLOR BLACK IN HIS PAINTINGS?
WHY IS THE GOLDEN RATIO NOT ALL IT'S CRACKED UP TO BE?
WHY IS COMIC SANS SUCH A HATED FONT?
It's amazing what you can learn about great web design by asking questions like these. Award-winning designer David Kadavy uses this reverse-engineering process in Design for Hackers to deconstruct classical design principles and techniques from web designers. Using an eclectic array of reverse-engineered examples, ranging from Twitter's latest redesign, to Target's red shopping carts, and ancient graffiti from the walls of Pompeii, he explains:

The Design of Everyday Things by Don Norman

Price:

$14 Paperback

$13 Kindle

Description:

The Design of Everyday Things shows that good, usable design is possible. The rules are simple: make things visible, exploit natural relationships that couple function and control, and make intelligent use of constraints. The goal: guide the user effortlessly to the right action on the right control at the right time.

Mismatch by Kat Holmes

Price:

$22 Hardcover

$15 Paperback

$15 Kindle

Description:

Sometimes designed objects reject their users: a computer mouse that doesn't work for left-handed people, for example, or a touchscreen payment system that only works for people who read English phrases, have 20/20 vision, and use a credit card. Something as simple as color choices can render a product unusable for millions. These mismatches are the building blocks of exclusion. In Mismatch, Kat Holmes describes how design can lead to exclusion, and how design can also remedy exclusion.

HackDesign

Price:

Free

Description:

An easy to follow design course for people who do amazing things.

How to Visualize Value

Price:

$297

Description:

The playbook to creating meaningful visual communication, teaching you how to make your point in a concise, creative and compelling way.

DesignAcademy.io - Design Fundamentals

Price:

$299 - Starter: 28 videos, lifetime access, unlimited updates, private Slack community, worksheets and cheatsheets, 6 week accountability

$499 - Starter + UI Component LIbrary, 2 full icon sets, Illustration library

Description:

The goal of this course is to give you a solid design foundation to start building upon. It’s not going to teach you everything under the sun about design but it’ll teach you the most important things you can do to improve your designs today -- no matter how “artistic” you are (or, more likely, aren’t!)

Build Better UX

Price:

$39

Description:

To show you the power of user experience design and how it can take your app from being just an interface to being a living, breathing experience that your users will love.
Using words, diagrams and narratives, I want to get you thinking more like a designer without overloading you with complex jargon.

The Non-Designer's Design Book by Robin Williams

Price:

$16 eTextbook

$22 Paperback

Description:

THIS ESSENTIAL GUIDE TO DESIGN WILL TEACH YOU
The four principles of design that underlie every design project
How to design with color
How to design with type
How to combine typefaces for maximum effect
How to see and think like a professional designer
Specific tips on designing newsletters, brochures, flyers, and other projects

About Face: The Essentials of Interaction Design

Price:

$30 - Kindle

$26 - Paperback

Description:

This comprehensive guide takes the worldwide shift to smartphones and tablets into account. New information includes discussions on mobile apps, touch interfaces, screen size considerations, and more. The new full-color interior and unique layout better illustrate modern design concepts.

Practical Applications for Regex

Katherine Peterson — Sat, 13 Mar 2021 22:00:06 +0000

Regular expressions can be hard to understand and difficult to learn. However, they are extremely powerful and have many use cases in the real world. In this post, I will explore some practical applications of regex.

Form Field Validation

One of the most common use cases for regex is validating form fields such as emails, usernames, credit card numbers, phone numbers, dates, password strength, etc.

The following example is a regex that validates the format of an email.

const emailValidatorRegex = /^[^@\s]+@[^@\s]+\.[^@\s\.]{2,}$/

function isValid(email) {
    if emailValidatorRegex.test(email) {
        return true
    } else {
        return false
    }
}

isValid('dummyemail@gmail.com') // true 
isValid('dummyemail@gmail') // false

Find and Replace

Regex can be used to write complex find and replace functions. You can even use regex to find and replace inside editors like VSCode.

The following example takes all normal javascript function declarations and replaces them with arrow functions.

const normalFunction = `
function add(x, y) {
    return x + y
}
`

const arrowFunction = normalFunction.replace(/function\s*(\w+)\s*\(([^\)]+)\)/g, "const $1 = ($2) =>")

console.log(arrowFunction)
/*
const add (x, y) => {
    return x + y
}
*/

Here is how you could use this to find and replace in VSCode.

HTML Parsing

Another use case for regex is for parsing things like HTML. Maybe you want to extract image sources from some HTML or extract all the URLs from a Google search result.

Let's say you have some HTML, and you want to extract everything that is inside of an <li> and put it into an array. Here's how we could do this.

const markup = `
<html>
  <body>

    <h1>Shopping List</h1>

    <h2>Produce</h2>
    <ul>
      <li>Celery</li>
      <li>Apples</li>
    </ul>

    <h2>Frozen</h2>
    <ul>
      <li>Ice Cream</li>
      <li>Hot Pockets</li>
    </ul>

  </body>
</html>
`

const listParser = /(?<=<li>)(\w|\s)+(?=<\/li>)/gm

const shoppingList = markup.match(listParser)

console.log(shoppingList)
// [ 'Celery', 'Apples', 'Ice Cream', 'Hot Pockets' ]

Conclusion

There is so much you can do with regular expressions. However, they are definitely not the solution to everything. Despite their power and flexibility, they are not the most readable for other developers.

Maybe don't reach for it for something like trimming whitespace from a string. There are string methods or basic functions for this. But for complex search, find and replace, validation, and parsing, regular expressions are a great solution. Plus, they are fun to write!

Want to learn regex?

Check out my interactive course: https://www.slip.so/courses/regular-expresssions-in-javascript

Follow me on Twitter for updates: https://twitter.com/katherinecodes

Takeaways from Atomic Habits That Can Make You a Better Developer

Katherine Peterson — Sat, 06 Mar 2021 20:07:04 +0000

Atomic Habits by James Clear is filled with actionable advice and research on how to improve your life by building better systems and habits. It's written with all facets of life in mind, but I explored specifically how the ideas from this book can make you a better developer.

The Power of Tiny Habits

Habits are the compound interest of self-improvement.

Good habits compound over time to create positive results, and bad habits compound to create bad results. Learning one new skill won't make you a great developer, but a commitment to lifelong learning will. Not sleeping enough one night might not cause any problems, but consistent lack of sleep can have a huge effect on your productivity and the quality of your work. The kind of developer you become will be a direct result of the habits you build today.

You should be far more concerned with your current trajectory than with your current results.

It's easy to be frustrated and give up when you don't see results right away. Instead of focusing on whether you are getting results immediately, think about if your habits today are putting you on the path to be a better developer a year from now.

Focus on Who You Want to Become

The most effective way to change your habits is to focus not on what you want to achieve, but on who you wish to become.

Your identity emerges out of your habits. Every action is a vote for the type of person you wish to become.

You want to be a great developer, but are your actions aligned with that? Cast votes for the type of developer you want to become. Don't just watch a tutorial, code your own project. Take a second to understand code before you copy-paste. Write tests. Write good documentation. Make that webpage responsive and accessible. Finish what you start. People might not notice right away, but if you are consistent with these actions, people will come to know you as a conscientious and effective developer.

Surround Yourself with People Who Have the Habits You Want

The normal behavior of the tribe often overpowers the desired behavior of the individual. Most days, we’d rather be wrong with the crowd than be right by ourselves.

We tend to imitate the habits of those around us. If you want to be a great developer, surround yourself with great developers. Join online communities or go to meetups and conferences. On days when you don't feel motivated, seeing people around you accomplishing things can be enough to push you to keep developing those habits you want.

The Goldilocks Rule

The Goldilocks Rule states that humans experience peak motivation when working on tasks that are right on the edge of their current abilities.

We tend to lose interest in tasks when they are too easy or too hard. Especially when starting a new habit, you want to make sure it's easy enough that you won't give up, but not so easy that it's boring. You should look for the sweet spot between boredom and failure.

Keep this in mind when deciding what technology to learn or what app you want to build next. Building a portfolio project that uses tech you already know well isn't going to keep you interested. Trying to build a complex SAAS application with multiple new frameworks, tools, and libraries at once is going to be too daunting and challenging to complete. Instead, try building something where you can apply what you already know, plus one or two new things you'll need to learn.

Look for Where the Odds are In Your Favor

Learning to play a game where the odds are in your favor is critical for maintaining motivation and feeling successful.

While it is totally possible to become great at something that is not a natural talent, you're much more likely to stick with a habit that aligns with your natural abilities. For example, Michael Phelps is a great swimmer not only because of all of his consistent hard work and training but also because of his height and build. His body type set him up to achieve success more easily than others, and more success leads to more motivation to keep going. That said, your genetics and natural abilities will only take you so far. The rest requires effort on your part.

Genes do not eliminate the need for hard work. They clarify it. They tell us what to work hard on.

How can you apply this? Ask yourself these questions to find the areas that you are most likely to find success in.

What feels like fun to you, but feels like work to others?
What makes you lose track of time?
Where do you get greater returns than the average person?
What comes naturally to you?

Maybe you notice that a lot of developers really struggle with design, but for you, it is fun and exciting. Or maybe you enjoy writing algorithms to solve complex problems, whereas other developers dread it. Find ways to incorporate your interests and natural abilities into your work. Software development has many career paths. Set yourself up for success by looking for the path that will keep you motivated and loving what you do.

The Danger of Creating Good Habits

As a habit becomes automatic, you become less sensitive to feedback. You fall into mindless repetition. It becomes easier to let mistakes slide. When you can do it "good enough" on autopilot, you stop thinking about how to do it better.

Once you develop a strong habit, you no longer need to put in conscious thought when performing it. As a developer, this poses some risks. It becomes much easier to make silly mistakes when you're mindlessly writing some code on autopilot. You'll solve a problem the same way you've solved it hundreds of times before, without even stopping to think about if there might be a better way.

To protect yourself from this, occasionally review the things you do mindlessly. Work with other developers and notice what they do that you would have never thought of. Don't let your habits make you inflexible to change. Just because it's the way you've always done it doesn't mean it's the best way.

Look for Your Next 1% Improvement

Can one coin make a person rich? If you give a person a pile of ten coins, you wouldn't claim that he or she is rich. But what if you add another? And another? And another? At some point, you will have to admit that no one can be rich unless one coin can make him or her so.

Think of the most knowledgeable developer you know. Would you have said that they were an amazing developer when they wrote their first line of code? What about the next line? Or the next line? You probably wouldn't. But at some point, they became the person you now think of as an amazing developer.

Writing a few lines of code doesn't feel like much. But eventually, they will add up to you being a much better developer than you are today.

All the Ways to Center a Div

Katherine Peterson — Sun, 28 Feb 2021 21:45:20 +0000

Centering a div is something we need to do all the time as web developers, and yet it still can be a challenge. There are many approaches you can take to accomplish it. Below I'll explore all the ways to center one div inside another.

All of the examples will be using the following HTML:

<div class="outer-div">
  <div class="inner-div"></div>
</div>

Each example has these shared base styles:

.outer-div {
  background-color: red;
  width: 150px;
  height: 150px;
}

.inner-div {
  background-color: blue;
  width: 50px;
  height: 50px;
}

There is a 150x150 red outer div, and a 50x50 blue inner div. The goal is to find all the ways to center the blue div vertically and horizontally inside the red div and get this end result:

1. Flexbox

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-div {
  display: flex;
  justify-content: center;
}

.inner-div {
  align-self: center;
}

2. Absolute Positioning

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3. CSS Grid

.outer-div {
  display: grid;
  place-content: center;
}

.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}

.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}

Try these out yourself in CodePen!

Did I miss any? Let me know below!

4 Must-Have VSCode Extensions for TailwindCSS

Katherine Peterson — Wed, 17 Feb 2021 05:25:39 +0000

TailwindCSS is a utility-first CSS framework that has been rapidly gaining popularity. One of its many advantages is how quickly developers can implement beautiful designs. The following VSCode extensions can make you even more productive with Tailwind.

1. Tailwind CSS IntelliSense

This extension provides autocomplete, syntax highlighting, and linting for Tailwind classes. With this extension, there is no need to memorize the exact spelling of all the utility classes or to spend the time typing them out.

2. Tailwind CSS Explorer

Get a full list of all of the Tailwind classes available in your project in the sidebar of your editor. Click on any of the classes to instantly insert it into your code.

3. Tailwind Docs

Docs are a developer's best friend, and Tailwind has some great ones. Easily search for anything in the Tailwind docs directly from VSCode, and it will open to the exact page of the docs you need.

4. Headwind

Headwind is an opinionated class sorter that automatically organizes your class names on save. We all know utility frameworks come with long lists of class names. This extension will keep your sorting consistent and automatically remove any accidental duplicate class names.

That's all! For my favorite non-Tailwind VSCode extensions, check out my post: My 12 Favorite VSCode Extensions

Let me know in the comments or on Twitter if there are any others that have helped you out.

https://twitter.com/katherinecodes

My 12 Favorite VSCode Extensions

Katherine Peterson — Sun, 14 Feb 2021 00:05:10 +0000

One of the reasons VSCode is such an awesome code editor is the huge library of extensions created by the community that increase developer productivity. Below are some of my favorite VSCode extensions.