Forem: Dayren Tolliver

New to VS Code and Have No Idea How to Preview Your Code? Read This!

Dayren Tolliver — Sat, 22 Jun 2019 02:52:43 +0000

Why I'm Writing This Article

My main hangup with VS Code was not knowing how to preview my code. After tons of Google searches, I was no closer to figuring it out. This made me question if VS Code even had preview capability. I couldn't wrap my mind around why someone would use it if they couldn't see what their code looked like.

(This frustration actually caused me to stop coding for a few months because I thought that if I couldn't figure something as 'simple' as this out, then I obviously wasn't cut out to be a developer. 😞)

It wasn't until earlier this year that someone showed me how to preview my code in VS Code. Looking back, I can now see how unintuitive it was for a beginner.

Disclaimer: While I don't assume you have much, if any experience with VS Code, I DO assume that you've used a text editor before. Also, the shortcuts I provide are for Mac. (I'm sure they're similar on Windows.)

VS Code Pains

When I became 'serious' (this was the first of many times I thought I was serious 😂) about becoming a professional developer, I started talking to developers who told me that I needed to start using VS Code.

Since I'd used text editors before I thought I could pick VS Code up pretty quickly. Plus, everyone was telling me how easy it was to use. I mean, how hard could it be?!

Obviously, it wasn't easy for me.

My Experience with Beginner Friendly Text Editors

When I was first began learning to code, I started with a soon to be defunct text editor called Cloud9 (RIP 🙏🏽). What I liked about Cloud9 was that I could write a few lines of code, click the 'Preview' button, then immediately see the changes.

My code is on the left and the preview window is just below the clearly labeled Preview button.

I eventually moved on to CodePen when I began working on freeCodeCamp projects. Similarly, CodePen has a 'Save' button, that also allows you to easily view your changes.

My code is on top along with the Save button and the preview window is below.

Live Server Extension

Once I explained my frustrations with VS Code to a fellow developer, he graciously showed me how to use an extension called Live Server to preview my code.

You can either download Live Server from the link above or go straight to the 'Extensions' tab in VS Code and search for it.

The red arrow is pointing to the 'Extensions' tab in VS Code.

After searching for and downloading Live Server, open an existing HTML file or create one.

If you're unsure of how to create an HTML file in VS Code, view the screenshot below.

Click 'New File' under the 'Start' section.

After clicking 'New File', you'll be taken to a blank page, where you can begin to create your HTML file. (Don't forget, all HTML files must always end in '.html')

Before you preview your HTML file, you must save it. (Command + S on Mac)

If there's a white circle next to your HTML document, that means it hasn't been saved!

Now that your document is saved, you're finally ready to preview with Live Server!

In order to open Live Server, use the shortcut Command + Shift + P. You should see a dropdown menu appear like the screenshot below.

It's very important that you leave the '>' in the search bar, otherwise you won't be able to search for anything!

Alternatively, you can right-click on your HTML page and click 'Open with Live Server'

Either way, your HTML document should appear.

I hope you found this tutorial helpful.

Thanks for reading!

Make Responsive Design a Priority

Dayren Tolliver — Sat, 15 Jun 2019 20:17:32 +0000

Hello again! If you have a love/hate relationship with CSS, then welcome to the club. 🙌🏾

It feels amazing when it works, but incredibly annoying when it doesn't.

Nepeta

@nepetadev

me: let's rewrite the CSS
my website:

07:32 AM - 06 Apr 2019

1401 5047

This article isn't a "how-to" because I'm by no-means an expert. (Although, I will provide resources.) The purpose of this article is to encourage you (and myself) to make responsive design a priority, no matter how frustrating CSS can be.

Avoiding Responsivility 👈🏾(Responsibility + Responsiveness)

It's cheesy, I know. 😂

When I first started building projects, responsiveness wasn't even a thought of mine. I would just create a project and call it day, without considering what it looked like on devices other than desktop. My mentality was "It may be ugly, but it works. 🤷🏾‍♀️"

In 2018, 58% of site visits came from a mobile device. 🤯 With this in mind, I realized that my projects had to look good no matter what device they were being viewed on. The only problem was that I didn't really know how to approach responsiveness. I had been exposed to media queries, etc. in tutorials, but didn't really know how to implement them in my projects.

A few months ago I stumbled upon Bootstrap and initially wanted to just use it to avoid having to learn responsiveness with pure CSS. After some contemplation, I decided that it was in my best interest to get better at pure CSS before moving on to Bootstrap.

Don't get me wrong, Bootstrap is an amazing tool, but I believe that if you're going to use it, you should know why the code is presented the way it is, rather than just blindly copying and pasting it.

Taking Responsivility

This past week, I've spent countless hours making the projects on my portfolio site responsive. Is there a better/easier way to accomplish some of the issues I encountered? Probably. Do my projects look a lot better than they did a week ago? Absolutely!

As stated earlier, I'm not a CSS expert. Even when I was working on the final project on my current iteration of my portfolio site, it still took me forever and a day to make it responsive. But the point is I made an honest effort and finally got it to work. I know that in time, and with more practice, it will get easier.

I guess the main takeaway here is to put in the time to learn responsive design and use it in your current projects.

Resources for Responsiveness

Thanks for reading! 😉

My Experience at REFACTR.TECH

Dayren Tolliver — Sat, 08 Jun 2019 21:14:25 +0000

Hello there! I'm here to recap my experience at REFACTR.TECH.

REFACTR took place this past week, from June 5 - 7, in Atlanta, Georgia. The conference was organized by Beth Laing, Angel Banks, and Erica Stanley. The focus was on "technology while creating a safe space or thoughtful and nuanced conversations around diversity, inclusion, and intersectionality in tech."

In short, this conference was aimed at giving everyone a seat at the tech table.

Day 1 - Workshops

Vue

Vue Vixens 🦊

@vuevixens

Awesome Atlanta!

22:17 PM - 05 Jun 2019

10 49

Day one at REFACTR was focused solely on workshops. Being that I want to become a front-end developer, I chose the Vue Vixens workshop. This was my first time working with a framework, so I was somewhat nervous that I didn't have enough JavaScript knowledge to understand what was going on. My fears were quickly put to rest by the supportive Vue Vixens team. Yes, I had plenty of questions, but there was always someone there to help clarify. I want more JavaScript experience before I dive any deeper into Vue, but the course structure made it easy to follow along regardless of skillset.

If you're new to Vue or just want to get more practice, you can 'vue' 😂 the workshop here, for free!

Google AMP

I also had several friends who attended Google's AMP Roadshow. According to AMP's website, "AMP is an open-source HTML framework that provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else." You can learn more about AMP's benefits and take its free courses here.

Entire Workshop List

You can view the full list of workshops here. (I'm not sure if the other workshops provided any resources, but it may be worth looking into, if you find a topic you're interested in.)

Day 2/3 - Breakout Sessions

Rather than walk you through every single talk that I attended, (they were all great by the way), I wanted to only focus on two.

Disclaimer: I chose these two talks because the speakers have a background in the technologies that I'm interested in, not because of where they work.

Reconfiguring Our Mindset from “Self-taught” to “Community-taught”

This was a talk by Ray Gesualdo, a UI Engineer at Salesloft. I'm always interested in hearing the stories of those who don't have a CS degree, like myself. My takeaway from Ray's talk was that no one is truly self-taught, we're all community-taught. You may not have gotten a formal education, but you certainly didn't wake up one day with your current knowledge. You gained those skills because of others who were willing to share their knowledge and resources. Whether it was a blog, YouTube video, etc., someone went out of their way to share information about that topic. It's up to us to make sure that we continue to maintain and create for others who will come after us. After all, that's what those before us have done.

A React Developer’s Guide to Tech Interviews

Adrianna Valdivia is also a UI Engineer at Salesloft. The purpose of Adrianna's talk was to help developers, who are on the hunt for a React role, avoid the pitfalls that she encountered while interviewing. While I'm not 100% sure that I'm ready to start interviewing, this gave me an opportunity to identify the gaps in my JavaScript knowledge, so that I can better identify what to focus my time and attention on. I met several, recent bootcamp grads who also found her perspective very useful!

Random, but Valuable Resources

Below is a list of resources that I found out about from my fellow conference goers:

Year Up - I met someone who went from working at a coffee shop to becoming a front-end developer within a year because of this organization
This Dot Labs Apprenticeship Program - Helps women break into to tech through a year-long apprenticeship
Greater Sum - This is a software engineering apprenticeship located in Atlanta
Flatiron Prep Course - This is the same prep work course that's given to Flatiron students, it's totally free, even if you have no plans to attend Flatiron

Final Thoughts

If you couldn't already tell, I learned a lot at REFACTR.TECH. As an introvert, I made a point to go out of my way to talk to people and I'm so glad I did!

There were several people who offered their time and resources to help me along the way. I'm looking forward to cultivating these relationships and can't wait for next year's conference.

Thank you to Beth Laing, Angel Banks, and Erica Stanley for putting on such an amazing conference! 🎉