Common Programming Case Types

Yusuf — Sun, 18 Dec 2022 05:07:29 +0000

When you are working with computers, especially coding, you have to follow some set of rules to get your ideas working. In some other times, you are on your own to create your flow. However, since this work is a teamwork and chances are that someone else is reading your code, or you are reading someone else's code, there came in some conventions to follow.

One of the most important conventions to follow is when naming a variable. Everybody who has done coding knows that it is really not that easy to come up with a variable name, but there are conventions to follow when it comes to Case Types. Here is a list of most common Case Types:

Camel Case
Kebab Case
Snake Case
Pascal Case

Let's see each one of these in a bit more detail.

Note: We are not talking about how meaningful or long (or short) enough your variable needs to be, just simply learning about what different Case Types are.

Camel Case

This is when the variable name starts with a lowercase character and every subsequent word's first letter is capitalized.

thisIsAnExampleForACamelCase

Kebab Case

This is one of the easiest one to remember. Every character is lowercase and in between every word, you need to add a dash (-).

this-is-an-example-for-a-kebab-case

Snake Case

This one is very similar to Kebab Case. Every character is lowercase and in between every word, you need to add an underscore (_).

this_is_an_example_for_a_snake_case

Pascal Case

This one is when first letter of all words are capitalized, including the first letter and there is no space or any other character in between words.

ThisIsAnExampleForAPascalCase

What to use in JavaScript

Again, naming is a convention. However, I'm going to share some examples from Airbnb JavaScript Style Guide . According to that guide, here are what to use in JavaScript:

Avoid single letter names like x or q
camelCase for objects, functions, and instances
PascalCase for constructors or classes
Do not use trailing or leading underscores like _firstName, lastName_ or _fullName_
Acronyms and initialisms should always be all uppercased, or all lowercased like HTTPRequest or httpRequest

Introduction to Git with HTML and CSS

Yusuf — Tue, 26 Jul 2022 04:37:58 +0000

Git is a version control system. As of writing this article, it is the most commonly used one among developers. With Git, you can track changes made to your files, see all the history and revert back to a specific change if things go unexpectedly. It is also great for collaboration with others.

Let's dive in.

Set up your Git first

For this exercise, we are going to build a simple form with HTML and then style it a little bit with CSS. Then using Git, we will save the versions of the files.

Let's create a folder on the desktop and name it simple-form.

After that we will run our terminal and change directory into this new folder.



cd Desktop/simple-form/

(You have to indicate the path you created your folder at.)

Then we will initiate Git. This will be our first Git command. We will run this specific command only once to initialize the Git on this folder (and any sub folders and files)



git init

We see a message that says "Initialized empty Git repository in..." which is the expected response.

Your first commit, tracking files

We will open VSCode and start creating the files. If you are using it for the first time, you will see the welcome screen.

Let's click on "Add Folder" and select the folder "simple-form".

Once the folder is open, we can create a new file and name it index.html. Then let's create another file and name it style.css. We will first commit these empty files so we can start keeping track of them with Git. After that we will start coding and then keep track of those changes too.

The commands we are going to use are:

git status
git add
git commit
git log

git status

In your terminal, let's run the command:



git status

We see there is a response with quite useful information given:

Let's start with "No commits yet". This means we have not made any commits yet in this branch. The following message indicates that there are untracked files which means there are new files that we did not let Git know about. You will see some file names in red color. That means Git have no idea about what is going on in these files.
Lastly, the message "nothing added to commit but untracked files present (use "git add" to track)". That is exactly what we are going to do.

git add



git add .

This command produces no response, which is good.

This git add command adds the files indicated to the stage area. The dot is a shortcut for all files. You can either specify file names that you want to add i.e git add index.html or if you want to add all files together you can use the dot like we did.
What does adding files to stage mean? It means these files are prepared to be committed. Git can track and follow changes only if the files are committed. To be able to commit files, we need to at them to the stage with git add.

git commit

Last step is to use the command git commit. This command is usually used with a message where you can indicate the change happened with a brief description. In our example, we just created our files. So we can simply run the command with the message "create html and css files".



git commit -m "create html and css files"

My message is what is inside the quotation mark. This message will be associated with the commit so that I can find the commit easily if I need to later on. This is a human readable text and it should tell you briefly about what you did in that commit.

We are actually done with Git tracking our files and changes. Every time we make a change, we will follow the same steps and update our new changes. So let's code some actual stuff and track those changes too.

Start coding the form

Let's add a boilerplate to the index.html file



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

We can change the title of the document to Simple Form.



<head>
  ...
  <title>Simple Form</title>
</head>

Then we will start building the form.



<body>
  <form>
    <label for="first">First Name</label>
    <input type="text" name="first" id="first">
    <label for="last">Last Name</label>
    <input type="text" name="last" id="last">
    <label for="email">Email</label>
    <input type="email" name="email" id="email">
    <button type="submit">Submit</button>
  </form>
</body>

For now, it will be a simple form that asks for a first name, last name and an email with a button to submit. You should have a site like this.

Let's start with a simple styling. But before, in the index file, let's connect our style file to the index file. In the meta tag, add the following <link> tag.



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

Let's add some styling to our form, labels, inputs and the button.



form {
  max-width: 980px;
  min-width: 320px;
}

label {
  text-transform: uppercase;
}

input {
  box-sizing: border-box;
  display: block;
  width: 60%;
  margin-bottom: 18px;
}

button {
  background-color: #1da1f2;
  border: none;
  border-radius: 10px;
  color: #f5f8fa;
  width: 60%;
  padding: 6px;
}

OK, the end results should look like this. This is good enough for a simple form.

Let's commit them using Git again.

First, git status.

This time we see a different message than the first time we ran git status. That is because Git is now able to track these files. What it is saying right now is that there are "changes that is not staged to commit" yet.
Let's add them one at a time this time, using git add.



git add index.html
git status

We know that a successful git add does not produce any response. But we can still use git status to see what happened.

We can see from the new message that index.html file is listed under changes to be committed section and its color is green, indicating that we can use git commit and it will commit the index.html file only. It is important to add a message to our commit too. Let's do that.



git commit -m "add form with three fields and a submit button"

Our commit is successful. We have committed all the changes on the index.html file and Git is up to date with the latest changes.

Let's use git status one more time to see what is the current status.

We now only see style.css file and nothing about index.html file. That is because there has been no change since the last commit to that file.

Let's add the style file to the stage and then commit it too so Git is also up to date with style.css file as well.



git add style.css
git commit -m "style the simple form we built"

We can see from the short message that this commit was also successful. We are now done with adding our changes and committing them with Git.
If you do git status again, you can see that it says "nothing to commit, working tree clean". This means all the files in this folder is up to date with Git and there are no changes made since the last commit.

Bonus: git log

We can see all the commits that has been done in this folder using another command,



git log

You can see a list of every commit made, their SHA code, who made the changes along with their email address, when the changes was and the commit message entered when committing. This command is very useful. There are a lot more to git log but for now it is great to list the information about all the commits made.

DEV Community: Yusuf