As developers / coders, we spend a lot of time in our editor of choice, heck, we practically live there. Why not make it more comfortable, dress it up as you please and make it somewhere you enjoy spending all that time. In this post, I just wanted to discuss a few of the ways you can make your code editor feel like home (in particular, I will be talking about VS Code on Windows, but most popular editors should have similar features).

Color Themes

One of the most obvious ways we can dress up our editor is by changing the colour theme of it. We are going to be staring at it for hours on end, might as well make it look good. There are countless variations on themes, from dark to light, colourful to muted, high to low contrast, that you should be able to find one to suit your needs.

Picking out your colour theme is pretty simple as well. You can either go to File -> Preferences -> Colour Theme (or press Ctrl+K then Ctrl+T) and it will bring up a list of currently installed themes. You can go Up and Down through the list and it will give you a preview of what the theme looks like. You can then apply the theme by either pushing Enter or clicking on it.

If you want to add some additional colour themes, you can scroll down the list to Install Additional Colour Themes… and it will bring up a list of available themes or you can search in the box for a specific theme. Click on the theme name to bring up more information about it and then click on the Install button near the top to install it to VS Code.

Here are some of my favourite colour themes:

One Monokai (Current Theme)

Afterglow Remastered

Cobalt2

Fonts

The next element that has the biggest impact on your visual usage of your editor would be the font, both the font family and font size. The proper font for you will be something that is comfortable to look at for long periods of time and something that helps you distinguish between similar characters (i.e lower case L and the number 1). Also, some people enjoy using a font that utilizes ligatures (where two or more letters / symbols are joined together to form a glyph) to create some often used symbol representations.

To change your font settings in VS Code, go to File -> Preferences -> Settings (or press Ctrl+comma) to bring up the User Settings. You will want to go to the pane on the right side, User Settings (not the left side Default User Settings) and look for the following line to change your default font family:

“editor.fontFamily”: “Consolas”,

Just replace what is inside the “” with the name of the font that you would like to use (i.e DejaVu Sans Mono, Hack etc) and then save the settings. To change the font size, look for the following line:

“editor.fontSize”: 15,

Just change the number with the size, in pts, that you would like the font to appear. It will all depend on your screen size / preferences. I, personally, enjoy using 15 for my font size as it gives me a decent amount of readability, spacing with the tab size I use and also works well when I go into split screen view.

If you are using a font that uses ligatures, you will need to add the following line to your User Settings:

“editor.fontLigatures”: true,

My current font of choice is Fira Code. It has pretty good distinction between L / 1 and O o 0, uses ligatures and just has an overall, nice sense of readability to it. For a list of other top, free, programming fonts, check out this post by Charlee Li — (11 Best Programming Fonts — https://itnext.io/11-best-programming-fonts-724283a9ed57)

Snippets

Snippets are a great way to take pieces of code that you use on a regular basis and give them a shortcut to save yourself some time and typing. If you already use Emmet for your HTML, then you are probably familiar with how useful snippets can be. To add or change your snippets, go to File -> Preferences -> User Snippets to bring down a menu listing all the different languages you can make a snippet for. For any languages that already have a snippet file, they will be listed at the top of the list and ones that need to have a snippet file created will be listed afterwards. When you create a new snippet file, you will be greeted with the following screen, showing you an example of how to create a snippet. You can simply delete the commented out text, if you desire, or just continue on afterwards:

There are four parts to every snippet you create:

Title — This is for your own purposes, a title you make for your snippet / what you want to call it
Prefix — this is the shortcut that you will use to access your snippet
Body — This is the actual code that you want your snippet to produce.
Description — This is a description of what the snippet is used for / does

The body of the snippet itself is contained within [ ]. Each line goes within a set of “ “ and is finished off with a comma, except for the last line of the body. You can use \t to indicate a tab or \n to indicate a new line (or you could also use an empty set of “ “ to indicate a blank line). You can also use $1, $2 etc to indicate tab stops for after the snippet is run. $1 indicate where the cursor will be after the snippet is put onto the page. $2, $3 and so on, are used to indicate where the cursor will move to if you use tab after that.

Here are a few examples of some of my more frequently used snippets:

HTML

“jQuery CDN”: {
“prefix”: “jq”,
“body”: “<script src=’https://code.jquery.com/jquery-3.2.1.min.js' integrity=’sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=’crossorigin=’anonymous’></script>”,
“description”: “jquery 3.x”
}

A simple snippet to throw in a CDN for jQuery.

CSS / SCSS

“snippet-.setup”: {
  “prefix”: “.setup”,
    “body”: [
      “html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-      size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}”,
      “”,
      “.clearfix:after {visibility: hidden; display: block; font-      size: 0; content: \” \”; clear: both; height: 0; }”,
      “”,
      “* { t-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}”,
      “”,
      “.visuallyhidden:not(:focus):not(:active) {position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}”,
      “”,
      “html { font-size: 62.5%; }”,
      “”,
      “ul { list-style: none; }”,
      “”,
      “a { text-decoration: none; }”,
      “”,
      “body { font-size: 1.6rem;}”,
    ],
    “description”: “”
}

Javascript / React

{
  “Console Log”: {
  “prefix”: “cl”,
  “body”: [
    “console.log($1);”,
      “$2”
  ],
  “description”: “Log output to console”
},

“Document Ready”: {
  “prefix”: “dr”,
  “body”: [
    “$(function() {“,
      “\t$1”,
    “});”
  ],
},

“Complex Component Creation”: {
  “prefix”: “complex”,
  “body”: [
    “import React, { Component } from ‘react’;”,
    “”,
    “class $1 extends Component {“,
      “\tconstructor() {“,
        “\t\tsuper();”,
        “\t\tthis.state = {“,
        “”,
        “\t\t}”,
      “\t}”,
      “\trender() {“,
        “\t\treturn (“,
          “\t\t\t$3”,
        “\t\t);”,
      “\t}”,
    “};”,
    “”,
  “export default $2;”
  ],
},

“Component Creation”: {
  “prefix”: “simple”,
    “body”: [
      “import React from ‘react’;”,
      “”,
      “const $1 = () => {“,
        “\treturn (“,
          “\t\t$3”,
        “\t);”,
      “};”,
    “”,
    “export default $2;”
  ], 
}
}

The first two are some simple Javascript / jQueries. One to throw up a console.log, first taking you into the parentheses then the next tab taking you onto the next line. The second is a simple document.ready. Following that, we have two snippets to make the skeletons of a component, one for a stateful component and one for a stateless component. They both will start off at the space to name the component, next tab taking you to fill in the name to export and the third tab taking you inside the return statement.

This was just a sample of the amazing things you can do to customize your code editor. There are so many more things, from different extensions, shortcuts and a wide range of others that can help make your coding experience much more comfortable and personal.

Making Your Code Editor Feel Like Home — Customizing VS Code was originally published in DataDrivenInvestor on Medium, where people are continuing the conversation by highlighting and responding to this story.

What are CSS Custom Properties / Variables — Why Use Them?

Variables are ways to hold pieces of information that can be used throughout your code. They are an integral part of any programming language and are now something that we can also use within our CSS. Whether it is for something as simple as defining our color / font sizes to help craft custom color themes, we can use CSS Variables to not only help manage our code better, but also to give us some more control over things.

CSS Variables can be defined at either the global scope, if you wish for them to be available anywhere throughout your CSS, or they can be defined at the local scope, if you only wish for them to be available in a specific block of code. Regardless of where you choose to define them, CSS Variables will cascade down through their children (like other CSS properties).

What makes CSS Variables really appealing to use is because you don’t have to completely re-write your style properties when you want to change something, you simply have to change the value of the variable. This allows us to not really have to worry about the specificity of our selectors. It also allows us to target specific areas of certain properties instead of having to completely re-write them when we want to change them (i.e if you want to change the angle of a linear gradient on hover, instead of re-writing out the whole linear gradient style, you can just use a variable in place of the angle and just update the variable as necessary). Also, we can use CSS Variables in conjunction with the calc function to do some pretty interesting and powerful things.

Differences between CSS Variables / SASS / LESS Variables

Now, I know you may be thinking to yourself, hey don’t we already have SASS / LESS Variables, don’t those do the same thing? Yes, SASS / LESS Variables are a thing but they do not function in the same way. Let’s take a look at some of the differences between them:

Different syntax for declaration and retrieving values

Whereas SASS and LESS use $ and @, respectively, to define their vaiables, CSS Variables use a double dash (--) to define their variables (i.e --bgcolor, --fontSize). Also, when you wish to reference the variable in a property value, you would use the following var(--variableName) (i.e background-color: var(--bgcolor);).

SASS / LESS Variables — static, compiled before run-time

SASS Variables are a great way to organize your CSS but unfortunately there is no way for us to get to them once our site is running, they are static. Our SCSS code is run through a pre-processor (i.e Prepros etc) to generate our CSS code. It is at this time that the SASS Variables are processed and swapped out for their values. After that, the SASS Variables serve no more purpose, they can no longer be accessed.

CSS Variables — dynamic, compiled at runtime, can be manipulated with JavaScript

CSS Variables, on the other hand, are compiled at run-time of the site, giving us access to them while the user is on the site. CSS Variables are aware of the DOM and thus, can be accessed through JavaScript, giving us a great deal of flexibility with them and making them much more dynamic as well.

This isn’t to say that you have to choose between one or the other though. They both serve their own, separate purposes and can be used together to bring together your site.

Examples of CSS Variables In Effect

In the above example, I have created a simple CSS animation of a number of snowflakes falling at different speeds. I have created a global variable called --modifier at the root level which I am using in place of the delay value in the animation. I have it plugged into a calc function to help give me the different rates of fall. On the page there is a slider that controls the value for the --modifier variable. When you slide it to the right, it increases the --modifier, increasing the delay and slowing down the animation, and if you slide it to the left, it decreases the --modifier, speeding up the animation. In the JavaScript, there is just a short function to listen for a change in the slider and then pops that value into the --modifier.

The next example I made is a simple version showing how we can use CSS Variables to bring some customization and fun to the user through colour themes. Typically before, when you wanted to create some different colour themes for your website, depending on the size / complexity of your site, you would either need to write a large amount of code to re-write a number of different properties or even sometimes have separate stylesheets for each theme. CSS Variables can help alleviate some of that headache and streamline the process.

I have created three global variables at the root level, --bgcolor, --textcolor and --divcolor. Then , on the page, I made two different ways to apply a theme. I made buttons for if you wanted to apply a “premade theme” you designed and colour picker inputs for if you wanted to give the user more control over their colour choices. Again, the JavaScript behind it is very simple, just an event listening for input on either the button (and applying the value to all three variables at once) or the colour picker (and applying the value to that specific variable).

CSS Custom Properties (CSS Variables) Sample

The final example is one that I found that I thought really showed off some of the fun things you can do using CSS Variables. Created by ( shans@chromium.org), this example takes a few CSS Variables, along with the calc function to not only initally layout a page but also to allow the user to change some of the layout, including spacing between items and even the amount of columns the page is laid out to. I thought that this example just really showed off some of the creative and fun ways you could make your page a bit more dynamic and allow your user to customize their experience.

Support / Conclusion

The support for CSS Variables is currently pretty good, with all modern browsers supporting it and older IE versions and Opera Mini being the only holdouts. If you still need to support those browsers, then I would suggest maybe holding off for now (normally, I would just suggest to wrap them in an @supports but that also seems to not be supported by IE11 as well :D) but if you have the support for it, go nuts.

I for one am excited to start trying out using CSS Variables in some of my projects going forward to bring some interesting tweaks and changes.

Git is currently one of, if not, the most widely used version control systems around. It is currently released under the open source license, making it free to use but what really makes it stand out is its branching model. You can create separate branches to work on different features, testing, and development or just to try out some new ideas. You can then either merge them onto your main branch or simply delete them if they aren’t working out.

The data is stored in repositories, which contains a full version history of all the code that has been pushed to it. There are many options available to users for where to create their repositories (GitHub, Bitbucket, Codebase, GitLab and many, many more) but I will be using GitHub for the purposes of this post.

Start off by going to https://git-scm.com/downloads to download and install the latest version of Git. Going through the main process of using Git, we will be using the terminal. On Windows, you can use the basic Command Prompt, but I would recommend using something a little more robust and full featured. I would recommend using cmder (http://cmder.net/). On Mac, a popular choice is iTerm2 (https://www.iterm2.com/).

Next, go to https://github.com and clicking on Sign Up to create an account. Enter in your username, email address and password. On the following screen, click Unlimited public repositories for free and then on the final screen, click on the options that best pertain to you. After you submit, they will send you an email to confirm your account.

After confirming your account, come back and login to your account and you should be greeted with the following screen:

On the following screen, enter a name of the repository. Under Owner, you should see your username. You can fill in a description of what the repository will be used for.

Click Public if you wish for it to be open for anyone to see, Private if you wish to have more control over who can see it. Under .gitignore, you can keep it at None for now as we will be creating our own shortly. Click on Create repository to complete the process. You should be greeted with the following screen, showing that the repository has been created and is ready to go.

You should see your username / repositoryName at the top left followed by a URL to your repository under the Quick setup section. Keep this handy / copy it as we will be using it shortly as we setup our local repository on our system.

Next, open up your terminal (I will be working with cmder for this part). The first step will be configuring Git with your name and email. You will do so by utilizing the following commands: “git config –global user.name “Your Name” & “git config –global user.email “Your@email.com”. Next, browse to the directory of your project (or create it if you don’t have it yet with mkdir “dirName”). Once inside the directory, use the command “git init” to set this directory as a local repository on this computer. Now that your local repo is setup, you will create a “.gitignore” file, which will indicate which files / directories you don’t want to include when pushing to your online repo. You will do this by using the command “touch .gitignore”. This will create a blank file called .gitignore in the current directory.

Open this file up in a text editor and on each line you will indicate what you wish to ignore. You can put either specific files, certain file extensions or even directories you wish to ignore. Some common things to ignore would be *.pdf, *.psd, *.zip (to ignore all pdf, psd or zip files)

The next step is going to be to link your local repository, to your online repository. You will do this with the command “git remote add origin repositroyURL” (replacing repositoryURL with the URL of the repository you created earlier (in my case it would look like “git remote add origin https://github.com/clarsena/testing.git”). You have now created a link between your local repository on your computer and your online repository on GitHub. You can now add a couple blank files so that we can continue the process of adding files and pushing them to your online repository.

After adding your files, the next step is to add your files to the “staging area”, which is where they go when they are being prepared to be committed to the repo. You can do this by adding files individually or by adding all files that have been modified since the last commit. This is done with the “git add” command (i.e “git add index.html” for individual file or “git add –A” to add all modified / new files)

The next step will be committing your files to your repositories commit history. This is done with the “git commit –m “Your commit message here”” command. You typically want to include a message with each commit you do. This should be something descriptive of the changes that were made in the commit (i.e “initial commit”, “fixed broken links in navigation menu”, “added responsiveness to body section” etc). The final step in the process is to push the changes up to your online repo. This is done with the command “git push origin master”.

After you have pushed the changes to your online repo, you can go back to GitHub and see the changes that have been made. You should be able to see the files that have been committed so far, the message of the last commit, how long ago the last commit was made (this refers to the time since you performed the git commit command, not when the push was made). Along the top you can also see various other information related to the project, the number of commits made, how many branches there are etc.

This is pretty much your basic workflow for standard projects. As you work on much larger projects or collaborate with others, you will start to use some of the more advanced features of Git. For now, though, this should be enough to get you started.

Summary:

-Create your online repo on GitHub (or other site)

-git init from your local directory

-git remote add origin “remoteRepoURL”

-git add –A

-git commit –m “Your commit message here”

-git push origin master

Remember to commit your work often