DEV Community: chase

The easiest way to have consistent looking code

chase — Mon, 06 Mar 2023 02:13:41 +0000

One of the hardest things for me as a programmer with terrible ADHD is making sure that my code always looks clean and consistent. I hate finishing a project and then having to go back and make all of the code look pretty, it's like torture to me. But now, I can leave all of that pain in the past. Introducing the newest extension to my VSCode roster... Prettier.

Allow me to explain what this amazing extension does. Let's say you have some code that just looks... messy. No shame in it, we all write ugly code from time to time.

See? That's pretty disgusting looking if you ask me. Now you could go back and format that all by hand, wasting precious time, or you could just relax and let Prettier do it for you. By just pulling up your command palette and looking for the "Format Document" option, you can pick Prettier as your formatter and make this document look... prettier.

Prettier is highly customizable and has add-ons out there for a multitude of programming languages, including PHP, Ruby, JavaScript, HTML, CSS, Tailwind, etc. You can also have Prettier format your code every time you save if that's something you're interested in. If you're interested in other great VSCode extensions, you should absolutely check out my other blog post that talks about some of my favorites. Hopefully this extension saves you millions of hours of frustration, as it has done for me.

A Short Intro to Doubly Linked Lists

chase — Mon, 13 Feb 2023 00:33:45 +0000

Every single day, there is a programmer who is struggling with mountains of data and the proper way to organize it all. If only there were efficient ways to organize and sort all of this data so that they could access it and use it in a meaningful way... Lucky for us, computer scientists have figured out ways to do this using Data Structures. There are a lot of different types of data structures, but today I'm writing about a really simple one. Introducing, the doubly linked list (written in Ruby).

Okay, okay, I'll admit that it doesn't really look like anything special right now, but allow me to explain what this data structure is. A doubly linked list is a structure made up of nodes.

Each of these nodes contains a link to the previous node, the data stored within the current node, and a link to the next node. Please, have a look at this diagram I've made.

My amazing art skills aside, this is what a very short doubly linked list would look like if we made it into a tangible object. The start of a linked list (also called the head) has a previous value of nil and the final node in the linked list (also called the tail) has a next value of nil. I will now show you a basic method for creating a new item in our linked list.

This function starts by creating a new Node object with whatever data you have being passed into it. If this linked list is empty, this brand new node becomes the head and the tail of our list. Now, if there are already nodes in the list, it will simply make your new node the tail of the list and increment the list length by one.

Now, I'm not going to go over all about traversing linked lists and other methods you can create in this blog post, but this has just been a very basic overview of a doubly linked list. Hopefully you're able to get some use out of this data structure.

What the heck is Tailwind CSS and should I use it?

chase — Sun, 22 Jan 2023 23:27:10 +0000

Before I started at Flatiron School, I had to learn three different programming languages, JavaScript, HTML, and (my least favorite) CSS. I hate working with CSS, it's super annoying, naming classes is hard, and I always end up with a really ugly and bloated css file at the end of a project. There was no way I could possibly keep working with it, so I decided to go out and find a better way. While there are a lot of CSS frameworks out there that could solve this problem, today I'll be writing about one I've been messing with - Tailwind.

On the official Tailwind website they describe the framework as "a utility-first CSS framework" that you can use "directly in your markup". After I read a little bit and watched a couple of videos, I knew that I had to give this a shot. Tailwind offers a lot of customization with lots of pre-built utility classes, which would make your HTML look something like this; <h1 class="text-green bg-gray-100 font-mono">Hello world!</h1>. This doesn't produce anything super detailed, just green text with a gray background in a monospaced font.

Now you may be asking yourself "Chase, is this amazing framework compatible with a component-based JavaScript framework? How about React?" The answer is yes, I'll even walk you through a quick installation guide (that can also be found here).

First, using create-react-app, you want to create a new React app like so npx create-react-app tailwind-project

Next, change into your new project directory and install TailwindCSS using the following command npm install -D tailwindcss

Now that we have Tailwind installed, we need to initialize the configuration file with npx tailwindcss init

Navigate into the new file called tailwind.config.js and make the following changes:

Finally, navigate into your index.css file and make these changes as well:

And next time you use npm run start, you can make your new project beautiful with the power of Tailwind! Hooray! Here's a little example of a hello world item in Tailwind and the code that goes along with it.

Some helpful extensions for beginners in VS Code

chase — Fri, 23 Dec 2022 02:47:31 +0000

Now I'm gonna start this blog post off by clarifying one thing; I am no expert in writing code or the best way to write it, not yet at least. That being said, I'm going to write about a couple of extensions that I have personally found helpful or useful for working in VS Code. If you find any of the following extensions helpful or have any you would like to suggest, please write a comment and let me know!

CodeSnap by adpyke

Link to extension: https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
Extension ID: adpyke.codesnap

One thing that has always annoyed me when trying to share snippets of code with people has been how ugly it looks and how certain messaging apps can mess up the formatting. CodeSnap is an extension that aims to fix these two issues. Simply highlight your code, right click it, and click on the "CodeSnap" option and it will generate a beautiful screenshot of your beautifully written code.

An example of a CodeSnap screenshot:

And would you look at that? It's a wonderful screenshot of a function I wrote for a code challenge earlier today. If for some reason you don't like the look of these screenshots, you can always go into your settings and change pretty much everything about the way your screenshots look. Happy code sharing!

Better Comments by Aaron Bond

Link to extension: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Extension ID: aaron-bond.better-comments

Earlier today I was working on a code challenge for my classes with Flatiron School and I had a remarkable discovery. Regular comments in my code looked pretty lame. For me, trying to read my code amongst a sea of green sentences that described what I needed to do and what I had done just wasn't working. Here is where Better Comments comes in to save the day.

Better looking comments already

With just a few symbols and color changes, comments suddenly become a whole lot easier to read and work with. For me, associating the colors with levels of importance really improves how I do work anywhere. Just like CodeSnap, if you don't like the way these colors look or the symbols used, this is all fully customizable.

You may currently be asking yourself; "Why didn't this genius just use CodeSnap for that example screenshot?" and that is totally a fair question. I tried using CodeSnap, but unfortunately the colors wouldn't show up with that extension, and I'm sure if someone doesn't have this extension their comments will look boring too. But this is about your workflow, not someone else, so does that really matter?

Those are just two of the extensions I have found that have already helped me with some of my work. I'm sure there are more for me to find and I'm actively looking for any way to help get my programming done more efficiently. These are already being put to work on some fun side projects I'm working on, those may turn into future blog posts. If you have any suggestions for extensions, or have found either of these to be useful, please leave a comment! Happy coding!