Image for post
Image for post
Vue.js Logo

Designing things for the web nowadays requires that sites be interactive and react quickly. There have been many studies done about how users are likely to leave a site if it takes too long to load and update. That is where frontend software development comes in. And the most popular coding language to make a website immediately responsive is JavaScript. Because JavaScript has become so popular, there are now a large number of frameworks that make it easy to make your website interactive. Arguably the most popular one is React.js, and this is what I was taught to use in my bootcamp. But I decided it would be good to learn another one, at the very least to see what it is like to teach myself how to use a framework. …


There will be a number of times when you will want to get data from the internet for a program you are writing. APIs are a great resource, but only if one exists with the subject matter you want and if the data you are looking for is static and unchanging. If you want information about the upcoming events for your favorite celebrity or the approaching games for the Seahawks or Mariners, APIs don’t cut it. Scraping is a great way to get data from a webpage.

Scraping is the process of extracting data from a webpage. It can refer to manually copying the data from the page, but it usually refers programmatically parsing the data you need from the HTML of the webpage. The best way to scrape with Ruby is to use the Nokogiri gem and Open-URI. Open-URI is just used to get the HTML from the link you pass it then Nokogiri does all of the interesting stuff. …


Many developers will rely on interacting with an app to prove it works the way they want. But this is not the most efficient way to do things. Writing tests for your code is a good practice, and it can save time finding bugs down the line. In this series of blog posts, I’m going to talk about how to write tests for a Rails application.

First, I’ll talk a bit about why testing is so important. Writing tests is useful because you can use them to check that a small piece of your code works the way it was intended. This is also a good way to become more familiar with your code, because it forces you to thinks about what exactly you want each piece of your code to do. And when you find a bug in your code you can have a better idea of where it is, because you know for sure that certain things work. Also, once you’ve written a test, you can run it over and over to check that everything still works as expected, even after you have made a major change to your app. …


With my last few blog posts, I spent time talking about the importance of testing with software development, and I gave an intro to writing tests with Rails. For this post, I’m going to talk about how to write tests in one of the foremost JavaScript testing frameworks.

With plain old vanilla JavaScript, not using any frameworks like React or Angular, there are a variety of testing frameworks you can choose from, but I am going to talk about Mocha. The reason I chose Mocha is that the syntax is similar to the tests I was writing with Rails, and it is the framework my Bootcamp used for writing tests, so it feels familiar to me. …


Over the past few weeks I have talked about Vue.js and some of the things it can do. But I only showed how use Vue in a basic project by adding a script to your HTML, and this is hard to scale up for large applications. That is where the Vue CLI come in. Using the CLI, you can relatively easily create a large single page application that uses Vue . That is what I will be talking about today.

I mentioned before that React.js was the first front-end framework I learned, and I am now very accustomed to using create-react-app whenever I want to start a new project with React. Create React App takes care of installing and configuring everything you need for a basic React application so you can immediately get started working on the code you want to create. Vue CLI is the equivalent way to scaffold large projects in Vue. But, make sure you already have a basic grasp of how Vue works, or everything the files the CLI gives you will go over your head. …


In my last few blog posts I have talked about some of the ways you can use Vue.js to keep track of dynamic data on a webpage, and how Vue gives you something called directives to change the way that data appears on the page. But, as I mentioned last time, you need a way to use these things on a big scale to make a good website. The way to do this is by using Vue Components. …


For the past few weeks I’ve been talking about how to get started using Vue.js by giving an introduction to the basic things Vue has to offer. I’ve previously covered the Vue instance, and last week I talked about a few of the Vue directives for handling how things appear on a webpage. I will now talk about the directives that make your Vue app reactive and interactive to a user.

If you know anything about basic, vanilla JavaScript, you should know that the way to make a webpage reactive is by adding event listeners. There are all different kinds of events, including clicking on an HTML element, scrolling through a page, and pushing keys on the keyboard. The v-on directive is Vue’s built in way to listen for events. …


Continuing on from my last two blog posts, I’ll be talking more about some of the basics of Vue.js. I have covered how to start a project using Vue and some of the ways you can use the Vue instance in a project. In this post, I’ll go over Vue’s directives; the way to make your webpages interactive with the data in your Vue instances.

Directives are special attributes provided by Vue. They are prefixed with v- and each one applies specific reactive behavior to the HTML element you add it to on the page. The main Vue directives are v-bind, v-if, v-for, and v-on. …


In my last blog post, I gave an introduction of how to get started learning Vue. I talked about how it is similar to React, the framework I’ve used most often, and I gave some instructions for one of the ways to get a project set-up to try out Vue on your own computer. I ended my post by talking about the Vue instance and how to show data from it on a webpage. …


When it comes to best practices in writing code, there are a lot of thing to consider. Correct indentation for methods and classes, appropriate spacing between functions and variables, and clear names for each variable and method. Some best practices also have a limit on how many lines each method or class should be. But this can cause trouble if it makes you think that less lines of code is always better. This can cause people to sacrifice readability for succinctness.

The main reason you should follow best practices while writing code is because it increases readability. Even if your code does exactly what it is supposed to do, it isn’t good code if it’s indecipherable. Good code needs to be something another developer (or you looking back at it months or years later) can read and understand without too much trouble. The guidelines about the length of your code are just another best practice designed to help with readability. The idea is that, if your method is too long, it is probably trying to do too much and the functionality should probably be split into more than one method. …

About

Valerie Foster

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store