Latency & Bandwith

While working on Udacity’s Intro to CS a few months ago, I first came across the term latency. This week, I looked back into the topic and discovered ‘latency vs bandwidth,’ an apparently oft’ misunderstood pairing of concepts that both relate to network performance.

So what are latency and bandwidth and how do they relate to each other? In the simplest terms, latency is the delay between sending and receiving data. Bandwidth is the amount of data that can be sent or received at one time. The blog Future Chips provides one illustrative analogy:

“When you go to buy a water pipe, there are two completely independent parameters that you look at: the diameter of the pipe and its length. The diameter determines the throughput of the pipe and the length determines the latency, i.e., the time it will take for a water droplet to travel across the pipe.”

(Throughput here is the same as bandwidth.)

This video provides another simple and informative–if somewhat awkward–example using balloons.

While throughput and latency could apply to many different situations (an example from Webopedia: “in accessing data on a disk, latency is defined as the time it takes to position the proper sector under the read/write head,”) in terms of the internet, bandwidth and latency determine the time between you entering a web address on your browser and the website loading on your screen.

Essentially, when you make a web request, you are sending a packet of data to the server and eventually out to the world at large. That packet has to make several steps on its journey, each with an opportunity for delay (yipee!). (For more info about what happens, this delightfully gimmicky ninja-themed infographic is a good start.)

In the book, High Performance Browser Networking: What every web developer should know about networking and web performance, author Ilya Grigorik defines four types of delays: propogation delay–the time your data spends hurtling through space to get to its destination and back (at near light speed); transmission delay–pushing data “on the wire,” determined by file size and bandwidth;  processing delay–checking to see where the data is going and if there are any errors; and finally, queuing delay–data waiting to be processed (using our pipe analogy from earlier, the pipe is already filled with water.)

To recap, bandwidth determines the amount of data that is processed at one time; latency  is the total time between the sending and receiving data.

51-7aadghul-_sx379_bo1204203200_Closing notes: From what I’ve read so far, High Performance Browser Networking is a gold mine of information and a surprisingly engaging read on this topicIlya Grigorik is a web performance engineer at Google and is a co-chair of the W3C Web Performance Working Group, AKA he’s a very knowledgable person. The books is totally worth checking out, and available for free online. It’s also part of a Definitive Guide series of books about web development (all with animal sketches on the cover; I don’t yet know how the animals relate).

Finally, I’m a student! If you notice any errors in my understanding or terminology here, comment, please!


Ruby: Using Directories

Until this past week, my coding hadn’t expanded much past a repl environment. Last Monday, that changed very quickly because I started an immersive web development program at the Flatiron School.

My first week at Flatiron expanded my scope far beyond coding in my beloved environment. I was using tools like Terminal and the text editor Sublime Text to do things like interact with directories. Here’s how to use Terminal, explained a bit in an earlier post, and a text editor such as Sublime to create a directory and then output an array of files from it.

A directory is a collection of files (maybe music files or photos, for example) that can be accessed from a Ruby method. Ruby methods Dir.entries and Dir.foreach use the directory file path to return file names:

Let’s pretend I want to create a directory filled with images I could use as profile photos. Some of the files are jpegs and others are pngs (of fun, customizable emojis that I design on I’m going to build a method that will access my ProfileImages directory and output only files with a .png extension:

  1. In Terminal, I go to the place I want to store my directory: cd /Users/rachel/dev
  2. I Make a new directory, which will contain a directory of my images, as well as a Ruby file: mkdir “EmojiFinder”
  3. I change into the EmojiFinder directory: cd EmojiFinder
  4. I make a ProfileImages directory, where I’ll put my images: mkdir “ProfileImages”
  5. I change into the ProfileImages directory and copy in my photos: cp /Users/rachel/Desktop/emoji_mini.png /Users/rachel/dev/ProfileImages
  6. I change back into my EmojiFinder directory: cd ..
  7. I create a ruby file: touch “EmojiFinder.rb”

This method outputs an array of files from ProfileImages directory. From there, I could iterate through the array, outputting only files that contain the .png extension, but I think I’ll solve this a little differently.

This method iterates through the files in the directory, and will only output files with a .png extension. I called the method using the file path to the ProfileImages directory.

Et voila! Running ruby EmojiFinder.rb in Terminal outputs all image files with a .png extension.

Helpful resources: