DEV Community: Connor Van Etten

How to make glass... with CSS!

Connor Van Etten — Fri, 10 May 2024 21:01:34 +0000

Glass using CSS

tldr : 5 lines of code are all that is need to achieve this effect. click here to skip the amazing explanation. :sad:

One of the newer trends, I frequently see with websites and apps are log in screens or components with a Glass Effect. Overall the concept should be simple but when I first was learning CSS it took me a while to find a tried and true way to achieve this effect. In this article we are gonna to detail how to get a Glass Effect shown above to help you modernize your websites!

Basic setup

For this tutorial we are going to be focusing on the CSS mainly, but if you would like to follow in a local project, below I will show my HTML.



<div id= "container">
  <h2> Fake Company, Inc. </h2>
  <h1> Login </h1>
  Email
<input type="text" class="form-control" placeholder="johndoe@gmail.com" id="fullscreen-search-term" autocomplete="off" value="">
  Password
<input type="password" class="form-control" placeholder="Password" id="fullscreen-search-term" autocomplete="off" value="">
  <a href = "#">forgot password?</a>
  <button> Sign in </button>
    <div class = "center-text">
  or continue with
  </div>
  <div id= "box">
    <div>
      <i class="fa-brands fa-google"></i>
    </div>
    <div><i class="fa-brands fa-github"></i></div>
    <div>
      <i class="fa-brands fa-facebook"></i>
    </div>
  </div>
  <div class = "center-text">
  Dont have an account? <a href = "#">Register for free</a>
  </div>
</div>

This is a basic setup for a login screen, with no functionality, as it is purely esoteric. One thing to note is for the buttons on the bottom showing the logos for Google, GitHub and Facebook I do have font-awesome imported into the project. In my html the syntax for each is located in the class definitions of the tags.

There is no JS associated with my example, though keep in mind to make this work in a real world application you will need to add functions to the buttons and input fields.

CSS Styling

Within my code I have a decent amount of filler CSS to handle the formatting of this Login Screen. Mainly I am using display: flex; to format my elements, along with some padding and margin definitions. If you have any questions with flexbox or flex feel free to leave a comment, and I can do a dedicated post regarding that!

To achieve the glass effect focus on the #container id within my CSS portion. In my code below I have removed all formatting properties.



#container {
  /* Only Glass Effect Relevant Code */
  background-color: #c8c8c82c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 1px 1px 5px 1px #13131354;
  border: 1px solid #e9e9e94f;
}

Lets break down each of the properties defined above :



background-color: #c8c8c82c;

Most are familiar with background-color, but using this property you are also able to add transparency to your div. In my example I chose to use hex to set my color and opacity, but rgba or hsla will suffice. For the desired effect you will want to set the main color to a white to grey (I prefer #c8c8c8 or rgb(200,200,200)) and an opacity around 30%.



-webkit-backdrop-filter: blur(5px)
backdrop-filter: blur(5px)

This is where you get that frosted glass look from your div. Adding a backdrop filter will impact the look of the elements behind your transparent div. Within that filter we set it blur the images 5px. Feel free to edit this px as a higher px will increase the blur.



box-shadow: 1px 1px 5px 1px #13131354;

To separate the login screen from the background a box-shadow will ad this depth. The first two px declaration handle the x and y offset of your box-shadow. For my current example I chose 1px as not to make it two distracting. Next the 5px represents the blur radius aka how much you want to blur the box-shadow. Lastly I have the color set with an opacity of roughly 30%.



border: 1px solid #e9e9e94f;

Lastly as a personal preference, adding a border to your glass element can give it a solid edge and add to the effect. I would use the same color you have chose for the background along with a similar opacity.

Using these 5 properties on your container you are able to make a glass-like element for your new project!

Quick Guide

In recap to add a glass effect to your

using CSS add these properties.



#container {
  /* Only Glass Effect Relevant Code */
  background-color: #c8c8c82c;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 1px 1px 5px 1px #13131354;
  border: 1px solid #e9e9e94f;
}

If you need a different color for your element please feel free to edit the first 6 numbers, without touch the opacity definitions.

Live Demo / Remake

Thank you for reading !

If you like my work or articles please leave a like and comment! Additionally if you would like me to cover any Web Development, Game Development, or Programming Topic let me know!

AWS Services Guide : Introduction

Connor Van Etten — Fri, 11 Aug 2023 03:26:37 +0000

Hi there!

Welcome to my comprehensive blog series where we will be discussing and exploring the vast ecosystem of AWS Services. With over 200+ current AWS services being offered it can be difficult to know what you need and what is offered for your needs. This series is tailored to provide you with a clear and insightful understanding of AWS's offering and how you can integrate them into your next project. My goal is to equip you with the tools, knowledge and insights necessary to make informed decisions when architecting, implementing, and optimizing your cloud infrastructure on AWS. We will be breaking down the most fundamental services, their features, use cases, best practices and common errors. After each services if covered I will also give an example or way to integrate this service into a real world implementation.

Join me as we unravel the cloud-powered potential of AWS services. The future of technology is in the cloud, and together, we'll navigate its possibilities, one service at a time.

Stay tuned for the first installment, where I will be detailing AWS Identity and Access Management or better known as AWS IAM.

Feel free to explore this guide out of order as it will not be chronological!

Starter Project Idea: Conway's Game of Life

Connor Van Etten — Mon, 22 May 2023 06:56:21 +0000

Code and Active Deployment

Introduction

Back in 1970, John Conway devised a simulation of cellular automation. The simulation or game was based around a grid with cells in it that either would be dead or alive based on a set of rules. The future status of a cell was determined by its neighboring cells before it. Given these simple rules there are immense mathematical combinations for the games outcomes. The rules state that :

Any live cell with fewer than two live neighbors dies, as if by underpopulation.
Any live cell with two or three live neighbors lives on to the next generation.
Any live cell with more than three live neighbors dies, as if by overpopulation.
Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

Why Build your Own

When I was learning coding I found that Conway's game of life provided a new programmer a good template for learning more about the basics within their given language. For starters, although the rules are simple it forces a young programmer the need to start thinking algorithmically. "How am I going to check the spaces around a cell?", "How do I update all cells at once?", etc. are questions this project forces you to ask and answer. Next it provides a good basis for working with data structures, and although there are multiple data structures one could use, choosing the right one will make the process of development easier. Next depending on how far you go with this project you can include user input, a start and stop or added features that will add the need to deal with event handling and a working user interface. Creation of a game also makes you look at the modularity of your code and how well it is organized. It forces you to have to reuse functions, objects, or code blocks which will only benefit you going forward. Lastly, depending on the language you choose to work with it will give you experience in visualization of our code by displaying the grid of cells.

What I recommend You Do

For this specific project I would use a language that allows for easy visualization as your end project you would like to be seen by others. The two that come to mind are JavaScript, as you can place it in a web browser to see or python as they have several libraries for creating GUI windows (tKinter and PyQT). Next I would brush up on your knowledge of this languages basic data structures such as arrays or lists as they will come in handy for your development process. Next I would research the game itself, as I did a very quick overview above you might want to make an effort to understand the simulation itself. Lastly, if you are completely lost look to either my code above or this amazing video by The Coding Train as they were my inspiration for doing this project years ago.

Conclusion

All in all, when learning programming I feel it is best to build something. For me this was a great project in the early part of my learning and helped me develop a good foundation for me to build upon in my future years. I would say when starting try as much as you can to create this without looking up a solution or my code as it won't exercise your coding muscles as much. Please feel free to take a look at my development which is linked above if you want to see a working final product.

Thank You for Reading!

If you end up making your own Game of Life please comment below as I would love to see it. If you enjoyed reading or have any questions please like and/or comment below. Cheers 👋

How to use Keyword Arguments in Python

Connor Van Etten — Mon, 22 May 2023 06:17:07 +0000

Introduction to Kwargs

In python, keyword arguments aka kwargs give developers the power create a function that can accept a variable number of arguments. Unlike the normal set up for a function where the argument amount is strictly defined, kwargs allow one to pass a dynamic set of key-value pairs in as arguments. This is extremely helpful for use-cases where your function may have optional or varying parameters.

Overview of Usage and Syntax

To use kwargs, we need to add a special keyword parameter into the argument of the function, **kwargs. When this is set, it will give you the option to add any key-pair argument into the argument section when you call said function. Inside of your function using kwargs these values will be treated like a dictionary, allowing you to access them. Using standard dictionary operations like kwargs['key'] or kwargs.get('key') you are able to retrieve the value giving to the function. It should be noted the word kwargs is not required but it is considered the best practice. Any variable name could be used in replace of it as long as you add ** to the front of it in the argument section.

Examples of Usage

Lets say you have a function to print out characteristics of different types of pets. Now that gives us a wide range of inputs that we would need to accept to get all the information given. Using kwargs we are able to handle all of these inputs simply.

def print_pets(**kwargs):
    print(f"Name: {kwargs['name']}")
    print(f"Age: {kwargs['age']}")
    print(f"Type: {kwargs['type']}")

print_pets(name='Copper', age=12, type='golden retriever')

Output:

Name: Copper
Age: 12
Type: golden retriever

Now lets say we wanted to add another pet to this function but we don't know how old they are? With kwargs we don't need to include it in the arguments. In this case will will have to change the internal code as using the []'s to index the dictionary does not handle missing values even know kwargs does. Replacing these brackets with the get() function will fix this error though!

def print_pets(**kwargs):
    print(f"Name: {kwargs.get('name')}")
    print(f"Age: {kwargs.get('age')}")
    print(f"Type: {kwargs.get('type')}")

print_pets(name='Betsy', type='poodle')

Output:

Name: Betsy
Age: None
Type: poodle

Also, it should be noted that you can still place explicit arguments into the function for functions that would be considered required. Using our previous example lets make the name of our pet required for the function while making the rest optional.

def print_pets(name, **kwargs):
    print(f"Name: {name}")
    print(f"Age: {kwargs['age']}")
    print(f"Type: {kwargs['type']}")

print_pets('Copper', age=12, type='golden retriever')

Output:

Name: Copper
Age: 12
Type: golden retriever

Conclusion

Kwargs can offer a wide range of benefits when programming within Python. It allows for much more readable function calls that can dynamically change for the users needs. They offer a familiar way to handle the arguments of a function by internally placing them in a dictionary for use. They have several use-cases that would be a nightmare without this functionality. One in particular is when creating APIs and allowing the user to be able to customize their queries and responses based on their given arguments. This not only benefits the user but you as a developer as you are starting to make more readable and concise code!

Thank you for reading my article! If you learned something new or have an thoughts, please like and comment. Cheers 👋

How to center a
every time!

Connor Van Etten — Mon, 22 May 2023 05:19:54 +0000

I'm sure we have all been there! Starting web development and you are tasked with placing an item in the center of the screen or box. Searching Stack Overflow and the internet will give you many valid ways to place this div in the center, but for me, these have been the easiest to use and remember.

Using the display property, we can break down the behavior of the elements within the body or container you are trying to center. When setting the display property, we want to put the CSS code inside the element that contains the div we are looking to center, not the div itself. In our recommended styles, we will use both the flex and grid displays, but they will both satisfy the need to center your div.

Display Flex :

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

The first way I center div's is using a flex display with the properties justify-content and align-items, both set to center. justify-content will handle the centering of the x-axis, while align-items will take care of the y-axis.

Display Grid :

.wrapper{
  display: grid;
  place-items: center;
}

My other preferred way to center div's is using a grid display. This one is even easier to commit to memory as after you set display to grid, you just need to set place-items to center. This will both horizontally and vertically center your div inside the element.

Thank you for Reading!

Lambda Functions in Python Explained

Connor Van Etten — Sat, 22 Apr 2023 22:49:39 +0000

Another fancy trick within Python, lambda functions add another way to execute a block of code in one line. So, what are lambda functions and how do we use them?

What are Lambdas?

Lambda functions are small anonymous functions that can take multiple arguments and perform a singular expression on them. The format for a lambda function involves the keyword "lambda", the argument names, and the expression itself after a colon (:).

Lambda Formatting

lambda argument(s): expression

While traditional functions generally have a return statement, a lambda will merely return the value of its expression after running. Let's take a look at an example of using a lambda.

(lambda a: a * 3)(4)

This example above will return the value 12 (4*3) when called. Note that since this is an anonymous function, we cannot call it by itself, and we have to encase the function in parentheses, and then the number in the parentheses to the right will be input. Now, this seems kind of pointless as the value given is not utilized. Now let's take a look at a way we can make this function more usable through your program.

lamb = lambda a: a * 3
print(lamb(4))

In this case, we add a variable to hold this lambda function, and therefore we are able to use it elsewhere. Using the same lambda function as our first example, we give that add a variable to hold the function. Then we can use the variable name to run our lambda function from it. Again, this idea will not often be used as it may be more readable to write a full function and just call that for this use case, but it is important to understand you can do this. Now let's look at two of the more useful and common ways to use a lambda.

Lambda Functions with Iterables

example_list = [1, 2, 3, 4, 5, 6, 7, 8]
example_list = list(map(lambda x: x**2, example_list))
print(example_list)

output => [1, 4, 9, 16, 25, 36, 49, 64]

The biggest and most helpful use case of a lambda function would be with Iterables. Above we see an example of wanting to work our way through a list and replace the value of each element with its squared value. If you are unfamiliar with the map function, its purpose is to take in a function as its first argument and performs it on all the elements in the second argument and returns an object that can be set to a list or tuple. In the example above, we could define a separate function or a loop to perform this action, but you will notice that pairing a lambda and map make this very condensed.

example_list = [1, 2, 3, 4, 5, 6, 7, 8]
example_list = list(filter(lambda x: x % 4 == 0, example_list))
print(example_list)

output => [4, 8]

Above we have another example of how to use a lambda with an iterable. Again, we start with the same list, and we are editing it using the filter function. Similarly to the map function, this takes a condition and an iterable, and will return an object containing all elements that were true for the condition. In this case, we want a list of all the elements that are divisible by 4. Now, we could use a separately defined function again, but a lambda makes our code much more concise.

Thank you!

If you enjoyed reading or learned something, let me know below! Thank you for taking the time to check out my guide. Cheers!

Are you using VS Code Shortcuts?

Connor Van Etten — Sat, 15 Apr 2023 04:24:52 +0000

Overview :

Introduction
Shortcuts

TLDR;
Using the mouse although a valid way to navigate VS Code, tends to slow me down. Being able to add keyboard shortcuts to your VS Code workflow can improve your coding efficiency.

Introduction

One thing as a developer that I believe to be important is efficiency. Code efficiency for specific problems is important, but so is the speed of code production in our work. How fast a programmer is able to produce a file or method can be extremely beneficial. For this article, I'd like to share some ways you might be able to become more efficient within your own development process, specifically within Visual Studio Code.

Within programming there tends to be a negative stigma between developers that use a mouse when editing code and navigating there environment and those who only use a keyboard. Now although I don't condone gatekeeping or looking down on other programmers for the way they make there code, there seems to be some benefit to using only the keyboard (atleast for me). The main benefit can be sometimes be seen is performance.

When using a mouse it can feel like I am "taking a break" from my normal coding to select an item, but it tends to hinder my workflow. As I switch between two different motor skills I tend to spend an extra half-second or two adjusting to my new peripheral. Now this being said I have seen programmers who are able to still maintain a consistent and effortless workflow using both their mouse and keyboard, but I feel more often than not it slows me down. Now you may be thinking, its milliseconds of time and overall it's not a big deal, but time does compound over a day.

It reminds me of the quote "A death by a million cuts". In this comparison, the little cuts are time wasted from using our mouse, and although insignificant in the moment, they will add up to a more significant amount of time wasted. As for me I wanted to make sure that I was more efficient as I developed code within my chosen environment. The way I achieved this was through keyboard shortcuts. Not having to remove my hand from the keyboard to open windows, select files, etc. has limited the amount of "breaks" I usually needed to take with my mouse. Luckily, VS Code comes preloaded with a large amount of premade commands that you can start utilizing now. In the next section I will share my used shortcuts to help improve my development speed!

Shortcuts

Windows Guide
For MacOS replace Ctrl with ⌘

Show Command Palette
Ctrl + Shift + P
-or-
F1
This is the command for when you forget all other commands. This shortcut opens a menu with all the commands available by search.

Quick Open / Go to File
Ctrl+P
When you need to open a new file within your directory, this shortcut gives you a menu of all files to select.

Close Editor
Ctrl + W
If you have finished all development on the file in the current editor window, use this shortcut to close that tab.

Cut Line
Ctrl + X
Lets say you don't want to keep copying, and deleting all your console.log()'s, this is the shortcut for you.

Go to Line
Ctrl + T
More of a specific shortcut but after it is entered you may tell VS Code what line you would like to be redirected to.

New File
Ctrl + N
Once the directory is made and opened, use this shortcut to make a new file in the current folder.

Select All Occurrences of Selection
Ctrl + Shift + L
Especially helpful when you want to change all occurrences of a selection. Remember hitting ESC will remove the extra cursors!

Open Integrated Terminal
Ctrl + backquote
For beginner programmers sometimes the terminal is scary, but trust me the more familiar you are with it the better off you are. This shortcut will get you there!

Toggle Sidebar Visibility
Ctrl + B
Definitely a necessary shortcut for those who have only one screen or work on a laptop. Remember this shortcut is a toggle, therefore if it is missing this will make it reappear.

Open Keyboard Shortcut Preferences
Ctrl + K Ctrl + S
Lastly, if you feel that any shortcuts involve the wrong keys for your preference use this shortcut to open preferences and change them.

Thank you for Reading!

Feel free to comment if you have any other commands that you use daily that I may have missed! Cheers!

Find Instagram Users Who Don't Follow You Back With Python

Connor Van Etten — Wed, 12 Apr 2023 02:42:00 +0000

Quick Start

Download User Data from Instagram
Retrieve Data from Insta via email
Locate Following and Followers file
Run Script
Code Below

Download User Data

To access your user data from instagram, please go to Instagram.com, and log into your account. Follow the order below :

☰ → Settings → Privacy and Security → Data Download → Request Download

Once here it will give you the option to download your data as either an HTML or a JSON file. For our python code to work properly, please select JSON and then hit next and enter your password to send data.

Retrieve Data from Insta via email

When email is recieved, please select download information to the desired loaction on your computer.

Next locate the file within your downloads.

Locate Following and Followers file

Follow the path with the given folder to find your Followers.json and Following.json file.

From here we need to add these two files to a folder that contains our main.py file.

Run Script

Once the files are located within the correct folder with our python script all the is needed to do is run your python script. Enter the terminal, locate the directory and run python main.py. This will return the list of people who you are following who do not follow you back.

Enjoy! Thank you for reading!

Code :

import json

# get information from followers file
with open('followers.json') as f:  
    follower = json.load(f) 

# get information from following file
with open('following.json') as g:  
    following = json.load(g) 

followers_list = []
following_list = []

for i in follower['relationships_followers']:
  followers_list.append(i['string_list_data'][0]['value'])

for i in following['relationships_following']:
  following_list.append(i['string_list_data'][0]['value'])

followers_list.sort()
following_list.sort()


print(len(followers_list), len(following_list))

please_unfollow = []

for _ in range(len(following_list)):
    if following_list[_] not in followers_list:
        please_unfollow.append(following_list[_])

for _ in range(len(please_unfollow)):
  print(please_unfollow[_])
exit()
for _ in range(len(please_unfollow)):
  curr = check(please_unfollow[_])
  print(curr)
  if ',' in curr:
    curr = curr.replace(',', '')
  elif 'K' in curr:
    please_unfollow[_] = 'official_account'
    continue
  elif 'M' in curr:
    please_unfollow[_] = 'official_account'
    continue

# Check if user is "official" aka a professional account adjust if needed.
  if int(curr) >= 2000:
    please_unfollow[_] = 'official_account'
  print(curr)

# remove all occurences of 'official_account' in please_unfollow
while 'official_account' in please_unfollow:
  please_unfollow.remove('official_account')

print(please_unfollow)

Ternary Operators in under 200 words!

Connor Van Etten — Mon, 10 Apr 2023 04:11:19 +0000

Have you ever wanted to write an if-else statement in one line?
Welcome to Ternary Operators! The basic format of a Ternary Operator follows the pseudo code below :

(conditional) ? true-value : false-value

This simple concept allows a user to pass a conditional and replace that line of code with either the true or false value. This can either return a function or even a value if needed.
For example :

x = (conditional) ? true-value : false-value

This will set the value of x to either the true value if the conditional is true and vice versa if the conditional is false.

In each language, ternary operators have slightly different syntax in relation to the ? and : but let's review what the syntax looks like in both Python and Java below:

Python Implementation

x = 'hello' if val < 4 else 'goodbye'

Java Implementation

String x = (val < 4) ? "hello" : "goodbye";

Now go out there and start using Ternary Operators where you see fit! If you are unaware whether your language of choice uses them, please check out this list!

MacOS Terminal and Alternatives

Connor Van Etten — Mon, 10 Apr 2023 03:33:47 +0000

Terminal and Alternatives

The first part of customization, involves the app you use to connect to your command line. Below I will list the default app, and how to open up its customization preferences, along with other alternatives that offer more features.

Terminal App (Default)

link

A lot of developer who use the default terminal window are unaware that there is a large amount of customization hidden in the preferences. By using the keyboard shortcut command + , you can open up the preferences of your terminal app. This will allow you to change profiles, font styles and size, and much more. Now within the default app you are given some features including Multiple tabs and windows, a history of all commands, and keyboard shortcuts.

iTerm2

link
Commands to Install :

brew update
brew install --cask iterm2

Main features that iTerm2 includes are split pane terminals that can even run their own prompts, a mouse-less copy and paste, search functionality without terminal output, and multiple window and tab support for ease of use.

WARP

link
Commands to Install :

brew update
brew install --cask warp

Although WARP does need a account to run, it does offer a lot of features including Multiple Shell Support (bash, zsh, fish), integration with tools like git and homebrew, autocompletion for text within terminal, a built-in file browser to help you navigate to open files directly in WARP, and more.

Hyper

link
Commands to Install :

brew update
brew install --cask hyper

Hyper is a cross-platform terminal emulator built using HTML, CSS and JS that is able to provide you with hyper customizable themes, shell support for most shells (bash, zsh, fish) and search functionality to help review your terminal output.

Thank You For Reading!

If you took the time to try out any of these new terminal apps, please reply with your favorite of these! If I left a application off of this list, let me know in the comments! Cheers!

Set up VS Code as your SSH Client

Connor Van Etten — Thu, 30 Mar 2023 19:16:46 +0000

Visual Studio SSH Client Tutorial

Quick Install
What is a SSH Client
VS Code Preparation
SSH key
VS Code Configuration
Using Remote SSH
Thank You

Quick Installation

For those who are just interested in installing as fast as possible here is the quick guide. If that isn't you, feel free to select What is a SSH Client, to be redirected to the comprehensive guide.

First install Remote-SSH to Visual Studio Code either through this link or searching it in the extensions tab.

Navigate to the .ssh directory in MacOS Terminal or Windows PowerShell :



cd .ssh

If folder is not present create folder using mkdir .ssh or md .ssh

Create your ssh key inside our .ssh folder :



ssh-keygen

Press enter for all three prompts

Send your ssh key to your remote server :



cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

This will ask for your password, please enter.

Open VS Code, then open the command palette via the keyboard shortcut below :
MacOS



cmd + shift + p

Windows



ctrl + shift + p

Search Remote-SSH: Open SSH Configuration File and enter the configuration file. Paste the text below into the file and fill in your information for your user (USER), host (HOST) and a given identification name (REMOTEHOST).



Host REMOTEHOST
    Hostname HOST
    User USER
    IdentityFile ~/.ssh/id_rsa

Save the file with cmd + s or ctrl + s

To run click the >< in the bottommost left of your VS Code Window. Select either Connect to Host or Connect Current Window to Host and select your identification name.

Once connected you are free to use the requested remote server for all of your development needs. You able to use the HOST CLI from the terminal within VS Code or your terminal of choice.

If you reach any road blocks, do not hesitate to reach out to by commenting or contacting me through LinkedIn.

What is a SSH Client?

SSH which is an acronym for Secure Shell, and is a network protocol. The purpose of SSH is to give users the ability to access a remote computer securely over a non-secure network. Using SSH a user or administrator is able to access a remote server safely for use. By default SSH comes installed on Unix, Mac and Linux and is able to be added to Windows easily (tutorial). If you would like to test out using SSH within your command line interface, you can play around with it through Terminal on Mac or Command Prompt on windows. Try out these commands to learn how it can work from the command line.

Open the SSH manual



man ssh

Connect to a remote server



ssh bandit0@bandit.labs.overthewire.org -p 2220

disclaimer:
the server you are connecting to is provided by OverTheWire and is intended for educational purposes relating to Cyber Security. For the purposes of this tutorial it shows you a example of how to log into a server using ssh as a command

Now that we are briefly aware of what SSH is and what it is used for lets tackle the idea of a SSH Client. In fact what we have completed above is an SSH Client, using OpenSSH through the terminal. A SSH Client is any software/application that allows the user to connect to a remote server. For ease of use, a lot of administrators or developers choose to use SSH Clients that offer a GUI instead of purely CLI based connections. Some popular SSH Clients include:

Now although these clients do have perks and are completely viable options for most use cases, in my opinion they were a bit clunky to develop with. The main issue I saw with using a client above is that you are limited to the tools that are local to that server if you are not an administrator of that server. For example, your Text Editors will stay nano or Vim which for most Computer Science Students can be a pain to start on. Also, as I progressed in my CS coursework I noticed several projects being easier to work locally on my VS Code setup than running on the remote server.

This should be a comprehensive guide to help you set up Visual Studio Code as your client manager for any remote connectivity needs. If you have any questions please reach out to my contact information that is located both above and below. If this is helpful to you please consider showing this article some love and sharing it! Cheers!

Visual Studio Code Setup

As we will be using VS Code as our preferred way to SSH to our host, the first thing we need to do is install it to our local machine. Please click here to be redirected to the VS Code download page. From here select the correct download for the current operating system on your device (Windows, MacOS, or Linux).

Assuming this is your first time using VS Code consider taking the time to check out my other guide on it's configuration and uses.

To make sure we are set up to connect to our remote server we will be using one extension to assist us with that process. To download our needed extension, either click Remote - SSH or open your extensions tab in VS Code and type "Remote - SSH" in. Proceed to download the extension to your machine!

For the time being we are all ready for our next steps!

Setting Up SSH keys

Our next step will be setting up a SSH key from our machine to your remote server so we no longer need to log in using our password. This gives VS Code the ability to open up your session directly.

Below I will have both MacOS and Windows commands detailed, as those are what I am familiar with. If you are running linux I assume that the commands used within our MacOS instruction will work as we are using very basic commands that they both share. To use the commands below in MacOS please use terminal, while if you are using Windows please use PowerShell.

Commands



cd .ssh
ssh-keygen
cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

Details and Instructions

Note, that we redirecting into the .ssh folder to create a ssh key. By default not all Operating System's have this folder, if you run into an error when entering the folder run ls -a on MacOS terminal and dir -Force in Windows PowerShell to show hidden/dot folders. If it is not shown, run mkdir .ssh on MacOS and md .ssh on Windows to create the folder.

When you run ssh-keygen you will be asked 3 questions regarding configuration of your key. For our purposes, hit enter for each prompt. Congrats you have successfully created your key.

Next we will want to give your SSH key to the remote server so that they can identify what computer is logging it. This will bypass your login going forward.

For this to occur we need to run two commands within our terminal, specifically from our .ssh directory. For ease of use I have piped the two commands together as they are shown below:



cat ~/.ssh/id_rsa.pub | ssh USERNAME@HOST 'cat >> ~/.ssh/authorized_keys'

If all is well, after this is ran with your username it will ask for your password to access our server. Enter your password for the host and the key will be able to be sent to your servers .ssh folder.

To test if this is working properly, you can attempt to login to your host through your Terminal or PowerShell (command below). If it doesn't ask for your passcode and immediately log in you are good!



ssh USERNAME@HOST

Finalizing Visual Studio Code

Now that we have our full setup your SSH key VS Code will be able to log directly into your remote server to act as a SSH Client. For the next steps we need to configure your host settings so Visual Studio Code knows where we are logging into.

For this part, open visual studio and run the command cmd + shift + p or ctrl + shift + p. For those familiar with VS Code they will know this allows us to search any command or setting within the Editor. Then we want to search "Remote-SSH: Open SSH Configuration File" and select this command. It will then ask you for the location of your config file to which I would recommend going with the defaulted directory in your recommended options.

Click on the desired directory and you will be taken to the configuration file for the Remote-SSH Extension. Below I will showcase what to paste into the file, but be sure to replace the USER and HOST with your information. In the first line, you are able to name your Remote Host whatever you would like. If you don't care to rename it I have labeled it REMOTEHOST. Once done with this, hit cmd + s or ctrl + s to save your config file. You are now free to exit this file.



Host REMOTEHOST
    Hostname HOST
    User USER
    IdentityFile ~/.ssh/id_rsa

Using VS Code as SSH Client

Now to use VS Code as your client, you need to run Remote SSH and select the name of your host from your list of hosts. To do this please click the >< in the bottom left of your window on visual studio code. To enter your remote connection please select either 'Connect to Host' or 'Connect Current Window to Host' then select REMOTEHOST or your given server name. This will open up your connection to the server, and give you the option to select which folders you would like to see when it is established. Dont be concerned if the first time takes a minute to connect as this is normal.

Once connected you are free to use the requested remote server for all of your development needs. You able to use the HOST from the terminal within VS Code or your terminal of choice.

Thank You for Reading

If you reach any road blocks, do not hesitate to reach out to by commenting or contacting me through LinkedIn.

Happy Coding! 👋

DEV Community: Connor Van Etten

How to make glass... with CSS!

Glass using CSS

Basic setup

CSS Styling

Quick Guide

Live Demo / Remake

Thank you for reading !

AWS Services Guide : Introduction

Hi there!

Starter Project Idea: Conway's Game of Life

Introduction

Why Build your Own

What I recommend You Do

Conclusion

Thank You for Reading!

How to use Keyword Arguments in Python

Introduction to Kwargs

Overview of Usage and Syntax

Examples of Usage

Conclusion

How to center a every time!

Display Flex :

Display Grid :

Thank you for Reading!

Lambda Functions in Python Explained

What are Lambdas?

Lambda Functions with Iterables

Thank you!

Are you using VS Code Shortcuts?

Overview :

Introduction

Shortcuts

Thank you for Reading!

Find Instagram Users Who Don't Follow You Back With Python

Quick Start

Download User Data

Retrieve Data from Insta via email

Locate Following and Followers file

Run Script

Enjoy! Thank you for reading!

Code :

Ternary Operators in under 200 words!

Python Implementation

Java Implementation

MacOS Terminal and Alternatives

Terminal and Alternatives

Terminal App (Default)

iTerm2

WARP

Hyper

Thank You For Reading!

Set up VS Code as your SSH Client

Visual Studio SSH Client Tutorial

Table Of Contents

Quick Installation

What is a SSH Client?

Visual Studio Code Setup

Setting Up SSH keys

Commands

Finalizing Visual Studio Code

Using VS Code as SSH Client

Thank You for Reading

How to center a
every time!