DEV Community: Haakon Helmen Rusås

Committing to Github

Haakon Helmen Rusås — Tue, 28 Jul 2020 17:58:00 +0000

In this post I am going to do a quick run down of how you can store your well crafted code in source control.

Setup

I'm going to assume that you have an account on Github and are somewhat familiar with the command line. For those who prefer a GUI, like me, I will be showing you how to upload or push your code up with the Github Desktop program.

Pre-requsite

Git installed
Code editor of choice installed
Account on Github

The beginning

Let's say we have a simple website that we want to share and maybe collaborate on. By using a service like Github we can upload or push our code to a remote repository. This repository will be the single source of truth for the website. To keep this short and to the point I'll be using a simple one-page website, built only with HTML and CSS.

The middle

We start with our site with some boilerplate code. I've made a folder ./github-website which I have in a project folder on my computer. In there I have two files index.html and styles.css.

Here is index.html file content:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My simple website</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1 class="title">My website - a Github collaboration project</h1>
  </header>
  <main>
    <p class="paragraph">Hello world! This is my simple website.</p>
  </main>
</body>
</html>

Here is the styles.css content:

/* Stylesheet */
body {
  text-align: center;
}
.title {
  font-weight: 700;
  font-size: 2rem;
}
.paragraph {
  color: #34ad65;
}

These files are in the directory ./github-website and here is where we will initiate a git repository. If you are somewhat familiar with the command line then you can navigate to your folder and run the following command:

git init

Git will now create a hidden folder with configuration files and start watching your files for any changes. We can now open Github Desktop and add the project folder.

The files should appear as new changes in the pane on the left. You can click on them to see the changes in the window on the right. To commit the changes we can write a commit message and summary at the bottom of the pane.

If you where using the command line or git bash then the following code would be the equivalent

git commit -m "First commit" -m "Adding index.html and styles.css to the project"

Then we can upload or push the code to a new remote repository on Github.

The program is now telling us that there are no more local changes so we are up to date. But our code only exist on our local machine. To publish our code and create a remote repository on Github just hit the blue "Publish repository" button. It will then ask you to give the remote repository a name, an optional description and decide if you want the repository to be public or private.

If all goes well you should be able to inspect the repository online!

The end

I hope this post has been helpful. I find it easier to work with a good tool in which I can see what changes has been made, which files I'm working with and has useful information about what I can do. The terminal is handy sometimes and I believe it is good to know what goes on under the hood, sometimes, but it is unforgiving and unintuitive. It gives you nothing and expect you as a user to know everything. What are your thoughts on tools like the terminal and Github Desktop? Do you prefer a GUI over a command line interface?

My Visual Studio Code Extensions

Haakon Helmen Rusås — Sun, 16 Feb 2020 09:53:39 +0000

I use Visual Studio Code as my main code editor. At least for all web development projects. If you haven't seen or tried vscode before here is a link to their site, which does a good job of explaining the use cases and features. It is a relative small program that you can add functionality to with extensions. In this post I thought I share which extensions I find useful.

Install an extension

Just thought I mention how you can install an extension in vscode in case someone was new to it. When you open vscode you can click on the "Extensions" icon in the main toolbar (Ctrl + Shift + X)

Then type in the name of the extension ⇒

And hit install when you find the one you are looking for!

My extensions list

ESLint - by Dirk Baeumer
- Integrates ESLint for Javascript into VS Code.
Auto Rename Tag - by Jun Han
- Auto rename paired HTML tags
Auto Close Tag - by Jun Han
- Automatically add HTML/XML close tags
Bracket Par Colorizer 2 - by CoenraadS
- For colorizing matching brackets
Debugger for Chrome - by Microsoft
- Debug JavaScript in the Chrome browser
Debugger for Firefox - by Firefox DevTools
- Debug JavaScript in Firefox
Docker - by Microsoft
- Syntax highlighting, commands, hover tips and linting for Dockerfile
Document This - by Joel Day
- Automatically generates detailed JSDocs comments in TypeScript and JavaScript
ES7 React/Redux/GraphQL/React-Native snippets - dsznajder
- Simple snippets
GitLens - Git supercharged - by Eric Amodio
- Supercharge the Git capabilies built into VS Code
HTML CSS Support - by ecmal
- CSS support for HTML documents
Live Server - by Ritwick Dey
- Launch a development local Server with live reload feature for static & dynamic pages
npm Intellisense - Christian Kolher
- Autocompletes npm modules in import statements
Prettier - Code formatter - Esben Petersen
- Code formatter using prettier
React Native Tools - Microsoft
- Debugging and integrated commands for React Native
vscode-icons - VSCode Icons Team
- Icons for VS Code

I update and change this list when I find some new shiny thing or a new project require more out the editor. Interested in hearing about your collection of extensions, do you see something new here or am I missing something that you would recommend :D

Happy coding!

This post was originally published on my blog Helmen Design

Capitalize first letter in Javascript

Haakon Helmen Rusås — Tue, 28 Jan 2020 15:24:51 +0000

In Javascript you have a built in data type called strings. This is used to handle a sequence of characters. This post will attempt to explain one small use case where you wish to change the first letter in a word to upper case.

Setup

We have a string that is comprised of two words, the classic hello World!, but someone forgot to capitalize the "h"!

let string = "hello World!";

let capitalizedString = string[0].toUpperCase() + string.slice(1);

// capitalizedString => Hello World!

Okey so in the first line we declare a variable called string and assign the value "hello World!" to it. In the second line we declare a second variable called capitalizedString. The value for that variable is the result of two operations we preform on string.

Description

Javascript ⇒ String.prototype.toUpperCase()

"The toUpperCase() method returns the value of the string converted to uppercase. This method does not affect the value of the string itself since JavaScript strings are immutable." - MDN

This method is used to convert all the characters from their initial state to upper case.

Javascript ⇒ String.prototype.slice()

"slice() extracts the text from one string and returns a new string. Changes to the text in one string do not affect the other string." - MDN

This method is used to return the rest of the word after the first letter. These to are then combined and returned from the operation. We combine these methods because just using .toUpperCase alone returns only the first letter after the operation.

Hopefully this tip can be useful!

MDN Docs

GeeksforGeeks

Happy coding!

Good habits

Haakon Helmen Rusås — Wed, 22 Jan 2020 12:55:22 +0000

How could good habits help you

Forming good habits can make your life easier. Okay let me try to back up that statement. I see myself as a semi-structured person. I try to keep track of my to-do's which I do with the awesome app from Microsoft called To Do. It's just another app where you can write down a task and tell it to remind you of it later. I've tried Todoist and others but this is the one that stuck. One feature that I like is that it keeps my tasks synchronized across devices. I have become so reliant on this that if I don't write down a task in the app or somewhere else I consider it forgotten.

One step at a time

So having an app is all well and good but to make a bigger change in my life I need a system. Here is where habit stacking comes in. In his book James Green talks about the how the brain has all these connections between neurons that build up and get stronger when used and fade over time when they go unused. Like garbage collection for the brain. This can be applied to habit forming. People say they want to get in better shape or improve their skills in a particular field, but have a hard time sticking to it over time. It turns out that it is not the lack of motivation or willpower, like this study found, but rather a lack of a system. Planning and setting up a system that you can follow, will enable you to more easily start and more importantly keep up with your goals.

The system step one ⇒ four

First step is to make it clear. A hint of a reward in the future that will hook you in.
Next step is finding something attractive that trigger a feeling you associate with the habit.
Third, make it easy. Lower the bar and you are more likely to go through with it.
Lastly satisfy yourself with the reward you promised yourself in step 1.

Stack and repeat

The circle described in the four steps can be a powerful way to make new habits. Applying this concept to habit stacking we can build a great system for change. When you wake up in the morning and go to the bathroom, before you take a shower think of something small that you can put in your daily "morning stack". If you insert a small exercise before you take that shower, nothing big just a few sit-ups or something that you are comfortable with, you can extend your "morning stack" ++. Incremental stacking of good habits are accumulative. Meaning you get more out of it and see bigger improvements than the energy you put in.

Hopefully you got something out of these methods. I've slowly started changing some of my routines by adding a small step to my morning and are allways thinking of little things I can do in the moment. Maybe I'll revisit this post in a few months to give an update to my findings.

Atomic Habits by James Clear

This post was originally published on my blog Helmen Design

Happy coding!

First commit

Haakon Helmen Rusås — Mon, 20 Jan 2020 09:29:50 +0000

Commit early and often, that is what they say. I am going to try and apply this to this blog. Which means that I am committing myself (pun intended) to writing short and consise blog post about my journey into the world of Web Development. Hopefully this will be both usefull to myself as a future reference and anyone who stumbles upon this part of the Internet. Happy coding!

This post was originally published on my blog Helmen Design