Ryan Evans
Flatiron School Blog


Ruby | Rails | SQLite | React | Redux | JavaScript | HTML | CSS

Rest Parameters in JavaScript

If you’re writing ES6 compatible code, using rest parameters is preferred over using the arguments object (MDN). If you remember, the arguments object represents all the arguments passed to a function that accepts an unspecified number of arguments. It is like an Array in that it has a length property and indexes, but doesn’t have the same built-in methods as an array.

Here’s an example (from MDN) of how you would use arguments with a function:
``` function func1(a, b, c) { console.log(arguments[0]); // expected output: 1


Update Your Copyright Year Automatically

Happy New Year!! 🎊

Did you remember to update your websites with the new copyright year?

Here’s how to set it up with javascript to auto-update every year, so you don’t have to worry about it…

All you need to do is make sure that your copyright statement is within <p></p> tags so this will be visible (not just within <footer> tags.
Then, you can add the javascript code inline within <script></script> tags.

One important thing to note first… if you didn’t already know, the getYear() method is deprecated, so you’ll need to use the getFullYear() method.


Here’s an example of what the code looks like:

<footer>
   <p>website designed and built by Ryan Evans &copy;
      <script language="JavaScript" type="text/javascript">
         var today = new Date();
         var year = today.getFullYear();
         document.write(year);
      </script>
   </p>
</footer>



And there you have it! Easy enough, right? Now if you add this little snippet to your sites, you won’t have to worry about updates every year! That <script> will display the current year right next to the &copy; copyright symbol.

Here’s wishing everyone a happy, healthy and prosperous new year!


Date.prototype.getFullYear() on MDN


Big O Notation

In a recent post, I mentioned Big O notation:

Simply put, Big O notation is used to describe the running time or space requirements of executing an algorithm as the size of the input to the algorithm increases. The differences between two functions that do the same thing, but in different ways (like iteration vs. recursion), becomes very clear when you consider very large datasets passed into the algorithm.
Big O focuses on the worst-case requirements of running an algorithm, which can be referred to as the upper-bound of the growth rate.

I thought I should expand on this and share some good resources for learning more about Big O. It can be a bit confusing to understand at first. I’ve found that different sites explain it differently, using different examples. So some examples might make more sense to some people, which can help immensely when learning something like Big O.


For the record, here’s the definition of Big O from Wikipedia:

Big O notation is a mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity. In computer science, Big O notation is used to classify algorithms according to how their running time or space requirements grow as the input size grows.

Big O notation characterizes functions according to their growth rates: different functions with the same growth rate may be represented using the same O notation.

The letter O is used because the growth rate of a function is also referred to as the order of the function. A description of a function in terms of big O notation usually only provides an upper bound on the growth rate of the function.


The main point here is, what are the worst-case requirements (in terms of space or time) that will be needed to run an algorithm as the input gets huge. If you remember to think in terms of huge amounts of data being fed to your algorithm to process, you’ll understand why things like smaller exponents, multipliers and additions are simply ignored (because they become irrelevant as the data gets larger, compared to the lead exponent).


Take a look at some of these references to find one that connects for you:


What You Should Do After You Graduate

Congratulations! You’ve graduated from the Flatiron program! That took a lot of work!

But wait, there’s more work to be done! There is a treasure of information that has been curated to help you learn some of the things that weren’t covered in the curriculum. These aren’t just the resources and information you’ll need to know to be effective at your job search (Flatiron provides a ton of great information on that, too!). These are the topics that Computer Science majors learn that cover things related to how a computer operates, stores data, allocates memory, etc. You’ll need all of this information in order to feel more confident moving forward.

Generally, students graduating with CS degrees have a deeper understanding of how a computer works, but less experience actually building applications, whereas students graduating from bootcamps have more experience building things, and less understanding/exposure to how computers actually make it all happen.

That’s where the graduate access to additional Flatiron tracks (like Computer Science) comes into play. But before we talk about that, I want to make a suggestion:
After you graduate, I strongly suggest working through the whole Career Prep track, beginning to end. Then go back and review each lesson as it pertains to your current job search situation. There is a LOT of fantastic resources and important instructions throughout the track, but the latter part of the track includes suggestions and topics you’ll want to get started learning about before you are too far along in your job search. These are covered in the Computer Science track.


So, if you’re thinking that you’re done with Flatiron, and can run out there and land your dream job right now, I’m going to spoil it for you. You’ll be competing for jobs with CS grads, and you’ll be asked about those CS topics as well. Why? Because you need to know how a computer executes and handles data in order to write your programs in a way that caters to things like speed and memory. Users don’t like sites that take forever to load information, and businesses don’t like to waste resources on endless storage needed to run their applications. You need to understand these trade offs.

If you’re thinking that you don’t need to do the additional tracks on Learn, then I hope you already understand what Big O notation is, can determine how to calculate it and express it in terms of runtime and space, and understand what Log n is. Do you know what a Linked List is and why it is used? How do Linked Lists and Arrays differ when storing information? Did you know that Arrays and Linked Lists have different impacts on Big O? And there’s more, like Trees and Binary Trees…

Simply put, Big O is used to describe the running time or space requirements of executing an algorithm as the size of the input to the algorithm increases. The differences between two functions that do the same thing, but in different ways (like iteration vs. recursion), becomes very clear when you consider very large datasets passed into the algorithm.

Liked lists are like arrays, but an array takes up a continuous portion of memory, so each element in the array is next to each other. So, imagine changing an element in the beginning of the array. It’s very likely that the space in memory right before (and after) the array is already being taken up by some other, unrelated data. So in order to keep all the elements grouped together next to each other in memory, you’ll need additional space and would have to move them all to a new location big enough to hold them all together. This is where linked lists come in. Each element in a linked list is in it’s own location in memory, and points to where in memory the next element is located. With this setup, each element only requires one space, so adding or removing an element in the list only involves updating the information pointing to the next element.

Now, don’t be intimidated by these new terms and topics. Flatiron taught us how to build things we weren’t able to build before the program. Their CS track will teach you about the computer science topics you’ll need to understand, too. That’s why I strongly suggest working through the Career Prep and Computer Science tracks immediately after graduation. Yes, take a moment and really celebrate your accomplishment, we all deserve that after putting in the hard work. But then go back, focus and work through the rest… You’ll be very glad that you did!


Smooooth Scrolling SPA

SPA’s (or Single Page Apps) are exactly as the name implies. Instead of serving multiple pages for different content, like index, about, contact, portfolio for example, an SPA only serves the index.html page. Within this one page can be different content, so when the user clicks a link in the nav bar at the top of the page, the link scrolls to the target anchor point on the page where that content lives.

Normally, clicking that link would cause a sudden, jerking movement to the requested anchor point on the page. But users expect a better quality experience from websites today, so this just wouldn’t be okay. Instead, try using a smooth scroll to your anchor point.

Smooth scrolling can be accomplished several ways, like if you want to set smooth scrolling for your whole site, just add this to your CSS file:

html {
  scroll-behavior: smooth;
}


In React, you can add the react-scroll package to your project and set the smooth attribute of your <Link> to true. You can also set additional attributes like duration, which controls how long it takes to scroll to the anchor point, and offset which is like padding and allows you to scroll additional px (like to accommodate a fixed nav bar height).

While smooth scrolling is almost an expected behavior by users for some sites, it also comes with a couple downsides, too. For instance, if your user is navigating quickly between points on your site, a slow scroll can become frustrating. Another issue can be accessibility. You’ll need to accommodate for users that rely completely on a keyboard to navigate your site. So, when this user follows a link, the keyboard focus should follow it.

There’s also the normal browser behavior that should be maintained, like being able to go back using the browser back button, or being able to copy/paste a URL and having the browser navigate to the last specific location. There is a great post on CSS-Tricks (link below) that walks through these issues and provides some demos.


Additional references:

Smooth Scrolling and Accessibility on CSS-Tricks
React-scroll on npm
Scroll-behavior on MDN