DEV Community: Chrissie

How to use interactive rebase in git

Chrissie — Sat, 26 Jun 2021 09:47:06 +0000

I started my first professional job as a front-end developer a few months ago. It was both scary and thrilling. During that time, I learnt a lot of things and encountered a lot of problems, but one thing that really threw me off was git rebase.

It was my first time using git rebase in any capacity, so I had a lot of trouble getting it to work. I remember spending a whole day learning about git rebase so that I wouldn't have to ask my coworkers for help every time I needed to rebase.

I'll be sharing all I've learnt so far about git rebase with you.

What is git rebase?

Rebasing is the process of moving or combining a sequence of commits to a new base commit. While it is similar to merge the difference between these two commands is that while rebasing combines all modifications made in a branch into one patch while merging takes the changes from a source branch and integrates them with a target branch.

When do you use git rebase?

Below are a several use cases where git rebase might be used. I will go through them in detail in a short while.

Edit commit messages
Remove commits
Combine commits together

Edit commit messages

Let’s say you made a typo in your latest commit messages, the best way to fix that is to use git commit --amend. Git commit --amend is a git command that allows us to modify the most recent commit and we do it like

git commit --amend -m “new commit message”

But what if you want to change multiple commit messages or your fourth commit message?

That’s when git rebase comes into play. Rebasing intervactively allows us to alter individual commits and to do so you type the following command in your terminal git rebase -i HEAD~5.

the -i option is what indicates that we are rebasing interactively

HEAD~5 indicates the number of commits you want to work with. In this case, it means that I'll be working with the last five commits I made

As you can see in this image, after running git rebase -i HEAD~5 I get a list of the last five commits I made in this particular repository.

Now if we want to edit the third and second commit message we have to replace the pick command with the reword command then save and quit the file.

In the editor, you are given a list of commands that you can use while rebasing. Pick is selected as the default option.

Replacing pick with reword indicates that you want to edit the commit message of that specific commit.

Once you save and quit, you will be taken to another editor where you can edit the commit messages. If we once again run git rebase -i HEAD~5 this is the result.

You may have noticed that there are two ways to edit a commit when rebasing. Using the edit command allows you to change both the commit message and the content of the commit while using the reword command only allows you to change the commit message

Remove commits

This is especially useful when you find yourself with unwanted commits in your branch (whether made by you or your colleagues). Rebasing interactively allows us to select which commit we want to remove in our branch and gives us the possibility to remove that commit.

Just like for editing commit messages, what we need to do is to replace the pick command with the drop command on the commit you want to remove.

Once you save and quit your editor the changes will be applied and that commit will be removed along with all changes that had been made on that commit.

Now instead of running the command git rebase -i HEAD~5 you'll run git rebase -i HEAD~4 as you have remove one commit.

As you can see we have removed the third commit.

Be careful when using drop so as to not lose important changes.

Combine commits together

Next would be the squash command. The squash command allows us to combine two or more commits into one commit and write a new commit message to describe the new commit.

We'll replace the pick command with the squash command on the commit you want to combine into the previous one.

Once we save and quit, the second and fourth commit will be merge into the first commit. When you are squashing you're commits together, you merge the latest commits into the older commit which is why it is important to remember that our commits will be squashed from bottom to top.

When you use the squash command, you are given the option to edit the commit messages of the commits you want to squash together. If you want to use only one commit message, you can go ahead and comment the commit messages you don't want and remain with the commit message you want to use.

The fixup command works like the squash command, the only difference is that the fixup command will discard the commit message of the latest commit and remain with the commit message of the commit message of the commit they'll be merged into

Next step

Now the next step would be to push your commits to a remote branch. One thing to keep in mind is that you have rewritten you branch history by using git rebase so if the branch is already published you will have to force push the new changes by using

git push --force origin name-of-the-branch-you-are-working-on

Using force push can cause problems for anyone else working on the branch so unless you are the only one work on that particular branch, it is safer to first check with your colleagues working on that branch before proceeding.

Conclusion

This is it! While this article doesn't cover everything there is to know about interactive rebase in git, it should be enough to get your started.

Leave a comment and share it with your friends if you find it useful and let me know if you want me to cover any topic related to git or front-end.

Stay safe and thanks for reading.

What is semantic HTML and why should you use it?

Chrissie — Tue, 19 Jan 2021 17:07:25 +0000

As a web developer chances are you must have heard of the term semantic HTML at least once. Semantic HTML is an important principle in web development and in this article, you'll learn what's semantic HTML, why you must use it, and the way to use semantic HTML.

What's semantic HTML?

In programing, semantics refers to the purpose or role of a piece of code. Plenty of HTML tags have a semantic meaning, which means that they are defined to have a specific meaning that conveys some information about the sort of content contained between the opening and closing tag. This allow web browsers, search engines, and screen readers to make sense of your markup by adding meaning to it.

For example the <nav> element represent a group of navigation links and the <footer> element represent the footer section of a page.

Why do you have to use semantic HTML?

As I wrote above, semantic HTML allow web browsers, search engines, and screen readers to make sense of your markup by adding meaning to it. This is can be especially important if you wish your website to be maintainable, to be accessible to all your visitors, and to achieve a better SEO ranking.

Maintainability

Maintainability is something that should always be at the forefront of your mind when developing be it a website or a mobile application, it is also a key factor in writing high quality code. Semantic HTML helps us in that clear, easy to read code is more maintainable. It allows you quickly look at your code and know what is going on and in the future allow for easy editing.

Another benefit would be that we don't have a reference our elements with classes or ids, writing semantic HTML allows you to reference all your elements with CSS directly using the tag with the use of classes or ids.

Accessibility

Accessibility is a very important area of the website that cannot be ignored. Semantic HTML plays a big role in increasing the general accessibility of your website and conveys better meaning without compromising the code structure. It provides the guidance needed to properly transcribe your content to your audience, one example can be screen readers.

Screen reader is an assistive technology that converts text and image content to speech and braille. For screen readers to understand your content they have to scan it and this is made easier by using semantic HTML which makes your markup better understandable for the screen reader and thus making your content accessible to users that cannot read.

SEO

Search Engine Optimization is the process of improving the quantity and quality of traffic to a website from search engines. SEO is another section where making your markup easier to grasp for machines comes in play. If a search engine can't read your website, it won't properly rank it and it will probably be flag as low quality.

If you want your website to be seen, it has to be ranked by search engines and the best way to do that is to use semantic HTML to make your content readable by the machine so that the search engine's algorithm can properly rank you website.

How to write semantic HTML

Now that you understand what is semantic HTML and why you should use it when building your website, let's see how you can write semantic HTML. To write semantic HTML the only thing needed is to use the proper HTML tags that conveys information about the type of content contained between the opening and closing tag.

There are HTML elements that are semantic and others that are not. An example of a non-semantic HTML tag would be <div> or <span> as these tags don't convey any information about the content inside.

In the case of semantic HTML, we can divide them into three categories:

Section elements
Text elements
Media elements

Section elements

These are elements that helps you to arrange your document into separate blocks. Section elements are mainly used to create the outline of your webpage.

<header> represents the header container of the web page. It's usually contains navigation links, logo, a search bar, etc.
<main> represents the main content of the web page and can only be used once in a page.
<footer> represents the footer container of the web page. It's usually contains copyright data, author of the section, or links to related documents.
<nav> represents a set of navigation links. It's usually used inside the <header> and <footer> section of the page but can also be used inside the <aside> section.
<aside> represent content that is related to the main content of the web page but isn't part of it. It can also be used to create a sidebar. An example could be a page displaying a blog post, the <aside> element could be used to display links to other related articles to the article inside the <main> element.
<section> represents standalone sections within the web page that don't have a more specific element to represent it.
<article> represents self contained blocks of content such as blog posts which can be reused in other settings.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> represent section heading. <h1> is the highest level and most important one while <h6> is the lowest.

Text elements

These are elements that are used to organize blocks of content, these are important for SEO and accessibility. Some elements in this category can be applied to a single word or line of text.

<blockquote> represents text that is a quotation from another source.
<ol> represents an ordered list, usually displayed as a numbered list.
<ul> represents an unordered list, usually displayed as a bulleted list.
<li> represents an item inside a list.
<p> represents a paragraph.
<hr> represents a break between paragraphs.
<strong> represents content that is given importance or urgency, usually displayed in bold.
<small> represents small prints like copyright, usually displayed in a smaller font-size.
<figure> represents content such as illustrations, diagrams, etc.
<figcaption> represents the caption for a <figure> element.
<cite> represents the reference of a cited work.
<code> represents a short piece of code.
<time> represents a specific period of time.

Media elements

These are elements that are used to identify the different type of media that can be found in a web page.

<audio> represents sound content.
<video> represents video content.
<img> represents an image.
<area> represents a clickable area inside an image map.
<map> represents an image map.

Conclusion

Semantic HTML is should be kept at the forefront of your mind when building a website, there are many more semantic HTML elements not listed in this article but these are enough to get you started and reduce the amount of <div> and <span> elements in your website.

Stay safe and thanks for reading.

A beginners guide to CSS flexbox - part two

Chrissie — Thu, 22 Oct 2020 09:30:27 +0000

In the first part, I wrote about flexbox properties that affected the flex container. In this second part, I'll be giving you flexbox properties that affect the flex items along with how they work.

I'll be using the same pen that I used for part one.

<div class="container">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
   <div class="four">4</div>
</div>

.container{
display: flex;
}

.one, .two, .three, .four {
  background-color: #f5f  
  padding: 2rem;
  font-size: 2rem;
}

The main properties are:

Order
Flex-grow
Flex-shrink
Flex-basis
Flex
Align-self

Order

This property specifies the order in which the flex items will be displayed. By default, the items are displayed in the order in which they were written in the source code but with this property, you can change the order of the items.

.one{
 order: 4
}

Flex-grow

This property specifies how much an item should grow or expand to fit the space available. If you give an item the flex-grow value of 2, that will item will take up twice as much space as the other elements in the container.

.one{
 flex-grow:2
}

Flex-shrink

This property unlike flex-grow will specifies how much an item will shrink to fit the space available.

.one{
 flex-shrink: 5
}

As you can see in this image, the first item is much smaller than the rest of the items.

Flex-basis

This property specifies the initial or default value of an item before the space in the container is distributed.

.one{
 flex-basis: 10rem;
}

Flex

This is the shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

.one{
 flex: 0 0 10rem;
}

The first element will not grow, will not shrink, and will have an initial length of 10rem.

Align-self

This property works like align-items but is only applied to one item instead of the whole container.

.one{
 align-self: flex-start;
}

That's it! This concludes this mini-series about CSS flexbox for beginners. Hope it helped you understand flexbox better. If you have any questions or comments do it down below.

A beginners guide to CSS flexbox - part one

Chrissie — Wed, 07 Oct 2020 16:05:14 +0000

CSS flexible layout module or flexbox for short is a web layout model that helps in designing a flexible layout. It allows items inside a container to be aligned automatically according to the screen size.

In this article, I'll be giving you the main properties of flexbox and showing you how they work. The first part will be about properties that affect the flex container and the second part about properties that affect the flex items.

When using flexbox, items will be displayed following two axes, the main axis, and the cross axis.

The main axis as the name implies is the main axis where items will be displayed. By default, the main axis is horizontal.

The cross axis is perpendicular to the main axis and its direction depends on the direction of the main axis. By default, the cross axis is vertical.

To start using flexbox you have to first declare a container and inside it, we'll add a few divs that'll we'll use as an example.

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
</div>

To make the container flexible, you have to set the container display to flex. We'll also add some styling to the items inside the container.

.container{
display: flex;
}

.item {
  background-color: #f5f;
  border: 2px solid #0000;
  padding: 2rem;
  font-size: 2rem;
}

The main properties of flexbox are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Flex-direction

The flex-direction property indicates the direction in which the items inside the flexbox container will be laid out in.

It has four value:

row
row-reverse
column
column-reverse

1.Row

The row value is the default value and it will align the items horizontally from left to right.

    .container{
    display: flex;
     flex-direction: row;
    }

2.Row-reverse

The row-reverse value will align the items horizontally from right to left.

 .container{
    display: flex;
    flex-direction: row-reverse;
 }

3.Column

The column value will align the items vertically from top to bottom.

  .container{
    display: flex;
    flex-direction: column;
  }

4.Column-reverse

The column-reverse value will align items vertically from bottom to top.

  .container{
    display: flex;
    flex-direction: column-reverse;
  }

Flex-wrap

In case you have a lot of items and they all appear on the same line overflowing of the container, you'll use the flex-wrap property to specify whether a container should wrap or not.

1.Wrap

The wrap value specifies that the items should be broken down into multiple rows so as to prevent any overflow. Any element that would cause an overflow will then be fitted into a new line.

  .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

2.Nowrap

This is the default value and if used will leave the items as is in a single line.

 .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }

Flex-flow

The flex-flow property is a shorthand property for flex-direction and flex-wrap.

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Instead of writing the above, the code will be the following

.container{
display: flex;
flex-flow: row wrap;
}

Justify-content

This property is used to align the items of the flex container along the direction that was previously specified using flex-direction.

1.Flex-start

This is the default value and will align the items at the beginning of the container.

  .container{
    display: flex;
    justify-content: flex-start;
  }

2.Flex-end

This value will align the items at the end of the container.

  .container{
    display: flex;
    justify-content: flex-end;
  }

3.Center

This value will align the items at the center of the container.

 .container{
    display: flex;
    justify-content: center;
  }

4.Space-around

This value will distribute the items evenly in the line with spaces around the items.

 .container{
    display: flex;
    justify-content: space-around;
 }

5.Space-evenly

This value will add equal spacing between two items.

 .container{
    display: flex;
    justify-content: space-evenly;
 }

6.Space-between

This value will display the items evenly along the line. The first element will be at the start and the last element will be at the end of the line.

 .container{
    display: flex;
    justify-content: space-between;
 }

Align-items

This property is used to align the flex items along the cross axis which is perpendicular to the main axis.

To better demonstrate this property, I set the container height to 200px and background color to black.

1.Stretch

This is the default value and will stretch the items to fill the container.

 .container{
    display: flex;
    align-items: stretch;
 }

2.Flex-start

This value will align the items at the top of the container.

 .container{
    display: flex;
    align-items: flex-start;
 }

3.Flex-end

This value will align the items at the bottom of the container.

 .container{
    display: flex;
    align-items: flex-end;
 }

4.Center

This value will align the items at the center of the container.

 .container{
    display: flex;
    align-items: center;
 }

Align-content

This property is used to align the flex lines. This only applies if you have set your container to wrap flex-wrap: wrap and if you have more than one row of flex items.

To better demonstrate this property, I have set the height to 500px and flex-wrap property to wrap.

1.Stretch

This is the default value. It will stretch the existing lines to take up the remaining space.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
 }

2.Flex-start

This value will display the flex lines at the start of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
 }

3.Flex-end

This value will display the lines at the bottom of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
  }

4.Center

This value will display the lines at the center of the container.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
 }

5.Space-around

This value will distribute the lines evenly with space around the lines.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    }

6.Space-between

This value will distribute the lines equally in the container. The first line is at the start of the container while the last one is at the end.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }

This is the first part of a two-post series that I plan to write about CSS flexbox. If you have anything to add or any questions do so in the comments.

Thanks for reading!

How to deploy your website to Github pages

Chrissie — Wed, 02 Sep 2020 12:57:43 +0000

Github pages allow us to easily deploy websites as long as they don't have any backend. In this article, I'm going to show you how I deploy websites using Github pages.

1. Create a repo

You can't deploy on Github pages without a repository that contains all your files so make sure you have the repo ready.

2. Install gh-pages

Next, you have to install the package gh-pages in your repository.

npm install gh-pages

3. Add this script in package.json

In the package.json file add this script.

"homepage": "https://[github-username].github.io/[github-repository-name]"

4. Create a deploy script

Inside the scripts object in package.json file add the following script.

"publish": "gh-pages -d src"

This script will deploy to Github pages anything in the src directory. You can change src to the name of the directory containing the files you want to deploy.

5. Run the script

Next, run the publish script in your command line to deploy to gh-pages.

npm run publish

It may take a bit of time but when it's done you'll see a line that says published.

6. Change the source branch in the repo settings

For your website to be deployed successfully, you'll have to go into the settings of your repository. In the Github pages section change the source branch from master to gh-pages. This branch was created when the publish script was run succesfully.

Once done, go to the url provided and you'll see your live website.

Changelog generator

Chrissie — Wed, 02 Sep 2020 09:29:49 +0000

My Workflow

This workflow will install a changelog generator package into your repository

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

yaml file

name: Changelog generator
on: 
   workflow_dispatch:
    home:
      description: 'location'
      required: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install changelog generator package
        run: |
          npm install
          npm install generate-changelog -D

link to code
https://github.com/chrissiemhrk/changelog-generator

Create a Jekyll website

Chrissie — Wed, 02 Sep 2020 09:04:48 +0000

My Workflow

This workflow is to install a Jekyll website directly into a repository.

Submission Category:

DIY Deployments

Yaml File or Link to Code

Yaml file

name: Create jekyll website
on:
  workflow_dispatch:
    home:
      description: 'location'
      required: false
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-ruby@v1
        with:
            ruby-version: '2.6'
      - name: Create a jekyll website
        run: |
          gem install jekyll bundler
          jekyll new jekyll-website

link to code
https://github.com/chrissiemhrk/create-jekyll-website

Additional info

I got this idea after seeing this entry https://dev.to/dancanetti/create-an-eleventy-site-366a

Markdown cheat sheet

Chrissie — Tue, 18 Aug 2020 09:05:20 +0000

Markdown is a markup language that is used to add formatting elements to plain text. It is easy to learn and use. In my opinion, markdown is a must, not only if you want to start posting here on Dev but also for writing readmes. I'm sure by now you've noticed that readme files have the .md extension, that is the markdown file extension and while you can write a readme in plaintext, to make our readme more appealing and comprehensive you should definitely use markdown.

Here's a list of basic Markdown syntax to get you started:

Heading

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Heading 1

Heading 2

Heading 3

Heading 4

Bold and Italic

**Bold** *Italic*
or
__Bold__ _Italic_

Bold Italic

Link

[Example](https://example.com)

Example

Blockquote

> Lorem Ipsum

Lorem Ipsum

Image

![alt text](image.jpg)

List

1. One
2. Two
3. Three 

- List
- List
- List

One
Two
Three

List
List
List

Code

`Inline` code
{```

} 
    code
{

```}

Inline code

console.log(a)

Without the curly braces

For syntax highlighting

{```

} javascript 
    console.log(a)
{

```}

console.log(a)

Without the curly braces

Horizontal Rule

Lorem Ispum 

---

Lorem Ispum

Remember to put a blank line before and after the dashes, without those, the text will appear as a heading.

A lot of markdown applications accept the use of HTML tags so if you are more comfortable using HTML tags over markdown syntax you can use them provided that they are supported by the application.

A list of free Udacity courses

Chrissie — Sun, 09 Aug 2020 13:15:53 +0000

Here's a list of free courses that I took in the past and currently taking that I think you should take to have a better grasp of web development. Most of these courses are introductory courses since they are free but nonetheless, having a good foundation can help you tremendously in your career so I highly recommend that you at least take one or two courses from this list.

1. Programming Languages

This is a beginner introductory course about theory and practices of programming languages.
https://classroom.udacity.com/courses/cs262

2. Version Control with Git

If you want to learn git this is the course for you.
https://classroom.udacity.com/courses/ud123

3. Responsive Web Design Fundamentals

At the end of this course, you'll have all the tools needed to build a responsive website.
https://classroom.udacity.com/courses/ud893

4. Responsive Images

This course is all about making your images responsive. I'd recommend that you take it after finishing Responsive Web Design Fundamentals.
https://classroom.udacity.com/courses/ud882

5. HTML5 Canvas

Learn how to create images and interactive animation with HTML5 Canvas.
https://classroom.udacity.com/courses/ud292

6. ES6

Everything you need to know about javascript ES6.
https://classroom.udacity.com/courses/ud356

7. Web Accessibility

Your website should be accessible to everyone and in this course, they show you how you can do it.
https://classroom.udacity.com/courses/ud891

8. Writing READMEs

Documentation is an important part of the development process and in this course, they teach you how you can write good READMEs.
https://classroom.udacity.com/courses/ud777

9. Intro to Algorithms

If you want to get started with algorithms this course is for you.
https://classroom.udacity.com/courses/cs215

10. Intro to Progressive Web Apps

Learn how you can build a PWA.
https://classroom.udacity.com/courses/ud811

If you know of other free courses on Udacity share them in the comments!

How to build a responsive website

Chrissie — Fri, 07 Aug 2020 10:16:33 +0000

Making your website responsive is a must nowadays, nearly 53% of people all around the world use their phone to access the internet and that number is growing each day.

You want your website to be accessible to everyone no matter their device be it small or large screens. In this article, I'll be sharing what methods I use to make my websites responsive.

1. Mobile-first design

Mobile First means designing for mobile before designing for desktop. It will also make the page load faster on a smaller screen.

When you're starting a new project make sure to always design it for mobile screen first and to do that, I usually size my browser to 320px wide (the screen size of an iPhone 5/SE).

Personally, I found that expanding my design to fit bigger screens is much easier than trying to compress the design to fit smaller screens.

2. Set the viewport

The viewport is the area of the screen that the browser can render content to, to make a website responsive it has to be set properly, and to do that we use a meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width tells the browser to match the dip (device independent pixels can determine the size that elements will appear on the user's device, regardless of the user's screen resolution. ) and thus the page can reflow to allow content to resize to match the width of the browser
initial scale 1 set the dip to CSS pixel ratio to one, CSS pixels are the ones we work with most of the time and without initial scale set to one, the width of some browser would stay the same when you rotate your phone or tablet to landscape mode.

3. Use relative units

To avoid fixed images, use a relative unit like % instead of px.

img, embed, object, video {
max-width: 100%;
}

// I always put this in my CSS file just to be safe

4. Tap targets should be wide enough

Tap targets (buttons, input field, anything the user will touch, tap, click) must be at least 40px wide and tall. The recommended height and width are 48px.

This isn't much of a problem for large screens since a mouse can be pretty accurate but on mobile, it can be a big problem when the tap target is too small to be able to accurately tap on the button/input field. The same problem may occur with navigation links so make sure to also adjust them accordingly.

button, input {
min-width: 48px;
min-height: 48px;
}

// Again, I always put this in my CSS file just to be safe

6. Use flexbox

Flexbox makes designing for all types of screens easier. Its a layout model that allows responsive elements within a container to be automatically arranged depending on the screen size.

Trust me using flexbox will make your life easier.

5. Use media queries

Media queries are used to rearrange your design to fit different screens. The most commonly used are max-width and min-width.

max-width viewport width is less than the value specified whereas min-width viewport width is greater than the value specified.

When I'm done working on the 320px screen, I use media queries to apply styles depending on the screen breakpoint.

@media screen and (max-width: 500px) {
changes will apply when the viewport width 
is less than 500px;
}


@media screen and (min-width: 500px){
changes will apply when the viewport width 
is greater than 500px; 
}
// If you started mobile-first, I recommend using min-width

6. Determine breakpoints

By breakpoints I mean the width you'll be using with media queries to change the layout accordingly. There are two types of breakpoints:

Major breakpoints were layout changes significantly
Minor breakpoints to make small changes like setting the margin, padding, or font size

When setting breakpoints use the content, after coding with a mobile-first approach adjust the browser and see where your content needs a breakpoint. This is a much better approach than following devices sizes that are given by default by the dev tools since they change and vary widely from brand to brand.

That's it, I hope this article will help and if you have any advice make sure to leave it in the comments.

How to write a good commit message

Chrissie — Thu, 30 Jul 2020 09:43:58 +0000

A commit message is a short description of the changes you've made to a file added before committing the changes.

Good commit messages are important not only for others who you may be collaborating on the project but also for you, to keep track of all your commits and knowing exactly what changes where maybe during that particular commit.

Even if you're working on a personal project, I'd recommend that you start getting in the habit of writing good commit messages.

This is the format that I use most of the time (this may change depending on your preference or organization your working for):

type: subject

body (optional)

footer (optional)

1. Type

feat - a new feature
fix - a bug fix
docs - changes in documentation
style - everything related to styling
refactor - code changes that neither fixes a bug or adds a feature
test - everything related to testing
chore - updating build tasks, package manager configs, etc

2. Subject

This contains a short description of the changes made. It shouldn't be greater than 50 characters, should begin with a capital letter and written in the imperative eg. Add instead of Added or Adds.

3. Body

The body is used to explain what changes you made and why you made them. Not all commits are complex enough that they need a body, especially if you are working on a personal project alone, and as such writing a body is optional.

A blank line between the body and the subject is required and each line should have no more than 72 characters.

4. Footer

The footer is also optional and mainly used when you are using an issue tracker to reference the issue ID.

Example of a good commit message used by Udacity student Udacity Git Commit Message Style Guide

feat: Summarize changes in around 50 characters or less

More detailed explanatory text, if necessary. Wrap it to about 72
characters or so. In some contexts, the first line is treated as the
subject of the commit and the rest of the text as the body. The
blank line separating the summary from the body is critical (unless
you omit the body entirely); various tools like log, shortlog
and rebase can get confused if you run the two together.

Explain the problem that this commit is solving. Focus on why you
are making this change as opposed to how (the code explains that).
Are there side effects or other unintuitive consequences of this
change? Here's the place to explain to them.

Further paragraphs come after blank lines.

Bullet points are okay, too

Typically a hyphen or asterisk is used for the bullet, preceded
by a single space, with blank lines in between, but conventions
vary here

If you use an issue tracker, put references to them at the bottom,
like this:

Resolves: #123
See also: #456, #789

A more practical example:

docs: Fix typo in README.md

Git cheat sheet

Chrissie — Sun, 26 Jul 2020 11:26:19 +0000

I made this cheat sheet for git terminologies and most common commands when I was going through a Udacity course about version control. It helped me a lot and though it will be great to share it with others.

Repository this is a directory where your project/files are stored which are used to interact with Git.

commit this is when you make one or more changes to a file in git.

branch this is creating a new line of development. This is mainly used to continue working without messing with the mainline of development.

git commit this is the command used to commit changes to your git repo. Commit contains a message which is used to describe what changes you've made.

staging area this is where git will put/store files while waiting for you to commit the file containing the changes.

SHA this is a unique ID number that is given to each of your commits.

git init this command is used to initialize your project into a repository.

git clone this command is used to copy an existing repository to your computer.

git checkout this command takes you to a different branch in your repo.

git branch this command is used to create a new branch.

git checkout -b this command is used to create a new branch and automatically switch to it.

git status this command shows you the current status of your repo like files which are yet to be committed or the branch you are currently in.

git push this command sends all your commits to the Github/Gitlab/Bitbucket repo you have created.

git pull this command fetch all your files from your repo and integrate them with your local repo. I mostly use it to make sure everything is up to date and working correctly.

git add this command is used to add files from the working directory to the staging area.

git diff this command is used to display the differences between two versions of a file also you can see changes that are yet to be committed using this command.

git merge this command is used to combine changes from different branches together.

git revert this command is used to a specific commit. It is usually followed by the commit SHA to indicate which commit you want to reverse.