Flatiron Blogger Magazine

Road to The Stored-Program Computer by on 06/20/2018
Linear Search vs Binary Search And Why We Should Approach Any Problem Using Binary Search As A DeveloperLet’s say we are given a sorted array of n elements and asked to search for a given element in the array.A simple and straight forward method is to use linear search, which we start from the first element, compare one by one, and find the element we want. To demonstrate, say we have a sorted array of 10 different numbers from small to large and we want to search for 70:In worst case, it requires us to run through the whole array to find it, that is, when the element is at the last index. If n increases by m, the comparisons/guesses the algorithm needs increases by m as well. So we can say linear search has a worst case run-time complexity of O(n) (more on this below).What about we use binary search? And what is a binary search?From Wikipedia, “Binary search compares the target value to the middle element of the array; if they are unequal, the half in which the target cannot lie is eliminated and the search continues on the remaining half until the target value is found. If the search ends with the remaining half being empty, the target is not in the array”. Let’s draw it out to demonstrate:Say we have the same array and we want to search for 70:At first step, we find the midpoint, and divide it in half, so visually we have:We search in the first half, 70 is not in them. So let’s ignore it, and for the second half, we find the midpoint and divide it in half again. And since it has odd number of elements, let’s also include the median number (we can also not include the median number, it won’t make a real difference since the other half will include it then), so now we have:For our new first half, let’s search for 70, it is still not in them. So let’s again ignore it, and find the midpoint and divide it in half on the second half. Now we have:And this time, 70 is in the new first half. We have completed a binary search.As we can see, binary search is much more efficient than linear search, since every time we only need to search through half of the remaining array. In fact, binary search only has a worst case run-time complexity of O(log n) (log by convention is base 2). And let’s compare how different in performance O(n) vs. O(log n) can be — say we have a sorted array of 1,000,000 elements:At worst, linear search needs a run-time of 1000000 guesses to find the target element.At worst, binary search needs a run-time of log(1000000) = 19.93, approximately 20 guesses to find the target element.That’s the difference!Now you may ask, why does binary search has a worst case run-time complexity of O(log n)?To recap, according to Wikipedia: 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. It characterizes functions according to their growth rates.Thus for linear search, it is straight forward that as the size of the array grows, the worst-case run-time complexity is O(n).What about binary search?For simplicity reasons, let’s assume we are given an array of 8 number of elements and the one we need to search “happens to” be at the last index (worst case situation). So each time, we divide our array by half until we have only one element left, that is:If we refactor:For n elements, let’s refactor:Let’s put it in logarithmic form since we need k:And that’s why the worst-case run-time complexity for binary search is O(log n). The most amazing thing about binary search is that, every time the size of the array doubles, the number of run time guesses only increases by 1 only!Now think about how we normally approach a problem…By intuition, we usually use linear search, right? But now we know binary search can be so efficient, especially for a big problem…So, as developer, how do we debug?To finish, I want to quote Dan Abramov:Use binary search and scientific method. Not literally in the code, but in how you approach it. Have a bug somewhere between callsites A and B? Put a log in the middle. It’s between A and the midpoint? Put another log in the middle. Something’s wrong with some input? Eliminate half the input. It’s working? Try the other half. Etc. Debugging can feel very arbitrary but it’s straightforward when you do it mechanically. Observe, form a hypothesis, come up with a way to test it, repeat. And cut things in half when there are too many.Reference:What does the time complexity O(log n) actually mean?
What is ECMAScript 6 (ES6–2015)?First, ECMA stand for European Computer Manufacturer Association. ECMA is the association that puts out the guidelines for JavaScript in all browsers. I will cover the history of Javascript and creation of ECMA before I go into detail on ES6 features .History1995 — Javascript was created.1997 — ECMAscript 1ECMAScript 2–3 are aboned within a few years after ES1, not as important since ES5 eclipsed the other version.ES4 — abandoned, sorry.2009 — ES5 is released. Brought forEach, map, and filter to js.2015 — ES6 specs are releasedIn short, ECMA(Script) is the association that provides the guidelines for what all browsers should support as well as provide new features that are available in JavaScript.NOTE: just because new guidelines are released it does not mean that all browsers support the new features released. Compatibility Click Here.Transpiling with BabelSince not all browsers support ES6 you may need to transpile your code from ES6 to ES5 so your code will be read by more browsers. Transpiling is also used for CoffeeScript and TypeScript.Babel does the transpiling in order for your browser to render appropriately. Babel is the most popular transpiler since it supports the most amount of browsers.Babel was created by Sebastian Mckenzie (worked at fb).Babel is frequently used with React which was developed by FaceBook.Note: before you start using ES6 you may need to setup Webpack and Babel which will be required/needed to transpile ES6 back to ES5 for browser support. This is not a setup for ES6 article, but I wanted to provide the information before you get started. Some browsers may already support some ES6 features so you may not need to do much else.ES6 FeaturesI will be covering new easy to adapt features within this section and provide the ES5 equivalent along with the new feature and why we should use the ES6 way.New Variables — Const and LetEasiest to understand are let and const, which are replacing the varLet — allows for block scoping which was not allowed in the past.Previously:var x= 20;if (x){ var x = 4;}console.log(x) // will output 4.In ES5 var will update the global scope to 4.if we use let we would block scope x.let x = 20;if (x){ let x = 4;}console.log(x) // output: 20Const — allows us to set constant variables that should not be reassigned. When you try to reassign const to a new variable it will generate an error.const currentYear = 2018//new year ends var currentYear = currentYear +1Error: Uncaught SyntaxError: Identifier 'currentYear' has already been declaredTemplate stringsES6 now allows you to create one single string (interpolate) rather than concatenate stringsBefore ES6 we needed to do the following: let hello = "Hello, "let person = "Roger"Then,let greeting = hello + person + "!!!"//will output : "Hello, Roger!!!"Now with ES6 we can interpolate all the strings into a single one.We need to use back ticks, which are located above the tab key and left of 1 on your keyboard."`".ES6:To interpolate you will declare the variable that holds the data with a ${}. let hello = "Hello,"let person = "Roger"let greeting = `${hello} ${person} !!! Have a great day.`Template stringing helps with being able to add data and manipulate it easily and with less errors.Spread Operators …The spread operator can turn the elements of an array into arguments of a function call or into elements of an array literal.let people = ["Roger", "Whitney", "Sarah", "Mike", "Other"]let dogs = ["Spot","Greg", "Ben", "Spike"]let names = ["Carl", "Bruce"]if we wanted to add people and dogs to names array, it can be done line this, let names = ["Carl",people, "Bruce", dogs]output: ["Carl", Array(5), "Bruce", Array(4)]This will cause people and and dogs are a subarray.To use the spread operator we will do the following: let names = ["Carl",...people, "Bruce", ...dogs]ES6 output: ["Carl", "Roger", "Whitney", "Sarah", "Mike", "Other", "Bruce", "Spot", "Greg", "Ben", "Spike"]Map — one of the new type of ObjectsMap holds key:value pair. You may be asking why would I want to use map instead of a new object.A Map object can iterate its elements in insertion order — a for..of loop will return an array of [key, value] for each iteration.The keys of an Object are Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and any primitive.You can get the size of a Map easily with the size property, while the number of properties in an Object must be determined manually.A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.An Object has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using map = Object.create(null), but this is seldom done.A Map may perform better in scenarios involving frequent addition and removal of key pairs.Use objects when there is logic that operates on individual elements.Note: this is different than .mapDifferent from object, map can use something other than a string as a key.You can use an array, number, function, etc.Map can utilize key value pairs that are always the same values.Maps iterates in insertion order unlike objectlet brand = new Map()brand.set("Nike", {description: "for athletes"})brand.set("Ralph Lauren", {description: "for social scenes"})console.log(brand) // Map objectconsole.log(brand.Nike) // undefinedIn order for map to work we need to use getconsole.log(brand.get("Nike"))//output: {description: "for athletes"}Before es6:let obj = new Object()You can also create a new Map as so:It will need to be an array of arrays.let todaysDetails = new Map([ [new Date(), "today"], ["alarms", ["8am","11pm"] ] ])//output: Map(2) {Sun Jun 17 2018 14:19:27 GMT-0400 (Eastern Daylight Time) => "today", "alarms" => Array(2)}Sets — other type of objectWhat are sets?Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.The biggest difference is that data within sets has to be unique and will return unique key:value pairs only.let tvShows = new Set()tvShows.add("Dexter")tvShows.add("Breaking Bad")tvShows.add("HIMYM")console.log(tvShows)//output : Set(3) {"Dexter", "Breaking Bad", "HIMYM"}Since we created the set we can use the .has to check if a tvShow exists.Example: console.log("Dexter", tvShows.has("Dexter"))//ouput: Dexter truelet data = [1,2,3,4,2]let newSet = new Set(data)console.log(data.length)console.log(newSet.size)//data === 5// newSet === 4 //removes duplicates. Default ParametersYou are now able to assign default values similar to Ruby.You can create a function such as:Before ES6function addingTwoNumbers(x,y){ return x + y}//if we do not give any values x and y won't print out. ES6: function addingTwoNumbers(x = 5, y = 10){ return x + y}// if no parameters are given it will end up with 15Useful to avoid errors when no parameters are passed..repeat.repeat is a new ES6 method. Repeat allows you to repeat a string x amount of times.console.log("repeating".repeat(5))//output: repeatingrepeatingrepeatingrepeatingrepeatingCould not think of why it would be useful, but it is available for use.If you would like to know more of the ES6 features check Pt 2.Explaining ES6 Functions, Classes, and Asynchronous Features.Sources:BabelMapWebpackECMAScript WikiECMAScript Org Features
Pry Your Eyes Out: Pry Troubleshooting Tips by on 06/16/2018
I’m one of those problem-solving kind of people. You know, the ones who stay fixated on an issue until it’s handled. That’s probably why I’m so interested in coding. There’s always some problem to fix, some code to debug. But what happens when your debugger has a bug? After some program crashes, freezes and general despair, I found some solutions to working with the debugging tool, Pry.If you’re new to programming (and/or Ruby) like me, then you might not see why this is such a big deal. Testing/debugging is a huge part of the development process, and it’s best to test the functionality of your code as you’re building your program rather than waiting until it’s complete.Pro-Tip: There’s always an error. The question is do you want to spend your time finding it or fixing it?You trying to figure out the bug in your program without PrySo what is Pry? Pry is a Ruby gem that creates a Read-Evaluate-Print-Loop (REPL) or interactive shell environment where you can test your variables and methods without manipulating your actual code. It’s a fantastic tool with lots of cool features, but in my experience using it, sometimes Pry doesn’t launch properly. Which isn’t the most helpful thing when you’re trying to figure out a coding problem.If you’re having similar issues or just want some preemptive tips, here’s some ways I’ve gotten pry to well…pry:Switch from using binding.pry to Pry.StartThe cool thing about Pry is that it allows you to see into a method, by launching a REPL wherever you placed binding.pry in your code. But for whatever reason, sometimes pry will just ignore that line and run your program regularly. When this happens, remove the binding.pry and add Pry.start (with no single quotes) to the end of your file.Unlike binding.pry, Pry.start opens up a new Pry session, and you’ll have manually input the variables & methods that you want to test. (Except in cases when you place Pry.start into separate a console or environment file that runs when you call it, the pry session should start with all your variables inputted for you).Use binding.pry twice in the same fileIf the previous method doesn’t work, try calling binding.pry twice in the same file. Sometimes pry will miss the first time you call it, and will launch in the second location that it’s placed. It’s a weird workaround, but it has worked 70% of the time for me. With the other 30%, binding.pry will launch from the first place that it’s called. You may have to play around with this solution to see what works best for you.Use Require ‘Bundler’, Bundler.requireIf the first two solutions don’t produce positive results, install the Bundler gem and at the top of your file put:Bundler is a Ruby gem that manages all your existing Ruby gems. It also helps to ensure that all your gems are up to date and present in development, staging and production. Using this in junction with Pry has helped me to check if I’m using the latest version of Pry and effectively launch a session.Use Pry-RemotePry-remote has all of the same functionality and commands as Pry. However, it allows you to start a Pry session remotely through Distrubuted Ruby (DRb), a library which allows multiple Ruby processes to talk to each other over a network. For more on Pry-remote and installation, check out this more in-depth article. I’m still in the beginning stages of testing this, but I have yet to run into any errors!Raw footage of me after my Pry session launched successfully.These workarounds have come in clutch when Pry has made me want to Pry my eyes out. I hope these tips have helped, because we all know that development is tough; Debugging your debugger shouldn’t be.
“Travel, it will broaden your mind.” This is the advice that is often given to young adults and those still young at heart. The exposure to different ways of living and other cultures, especially through international travel, can really provide people perspective on other aspects of their life. Traveling brings out awareness to practices and details of our life that we would not have normally given any attention.Traveling isn’t only limited to getting on a plane and flying to a faraway country. We can travel, by setting foot in a different part of the city, we can travel and explore mother nature, we can even travel to different languages.Languages as a CommunityEach language has its own support community and has its own standard practices about how to use their languages. I did not realize this until I set foot outside my first language, Java 5. Each community maintains it’s own set of official and unofficial documentation that may vary in explanations. I would have never have known or experienced the pros and cons of dynamic typing if I stayed in Java for my whole programming career. The higher organization and structure that static typing provides is one that static typing enthusiasts cherish.What’s more emblematic of cultural differences in programming exists between the Ruby and Python community. The Ruby community highly respects its founder, Matz, and his vision for ruby in that it was created to be fun. The fun exists in that Ruby encourages multiple solutions for one problem, whereas the zen of the Python community dictates that there is only one way to solve the problem.Higher-order functions are more prominent in Ruby as a means to traverse a data structure rather than iteration techniques in Java and Python. Using higher-order functions for a small task such as this encourages the Ruby community to regularly use this powerful tool later in their languages. This really solidifies Ruby’s principle of reusability. People have already coded solutions for these commonly performed tasks that we don’t need to do it by hand. The Java community and especially the C community prefer to do rewrite these by hand. Some defenders of the latter technique argue that coding these algorithms from scratch allows us to be more engaged and keeps the language smaller (meaning faster learning).Taken for GrantedComing from Java, I took for granted the garbage collection and error collection that Java provided through its Jaa Virtual Machine. Naively, I was annoyed at how many times the Java Virtual Machine would throw exceptions at my face regarding an OutOfBoundsException. I did not know at the time that this was a blessing that told me to look at my code and recheck some of my algorithms. C would never tell me this since C doesn’t have an extensive mechanism for error handling compared to Java. Java is nice in that it keeps track of your array and lets you know once you have wandered outside of it. It gives you a higher sense of an array rather than C, which really only provides memory addresses that are next to each other and lets the user imagine this as an array in their head. The abstraction and the tools that come with data structure abstraction is less in a lower level language like C than it is in Java.One may also take for granted the static type checking that the Java Virtual Machine offers at compilation and may feel nervous or apprehensive about taking the leap into a dynamically typed language where they feel they may mess up with keeping the data types all correct. (As somebody who has had many type conversion errors, this was my biggest fear when I switched from Java to Python.)Conversely, a JavaScript developer may take advantage of the weakly-typed language coercion that is afforded to JavaScript data types and is not offered to the majority of mainstream languages such as Java, Python, Ruby, C++, C, or etc.A Development ExperienceLanguage communities want to welcome in more people into their community. They want to make their language relevant and have dominance over other languages. Because of this, some language communities have improved their interpreters to make the development and runtime experience better. The initial skepticism that accompanied early Java was that it was significantly slower than running C due to C not requiring an additional layer of abstractions as the Java Virtual Machine does. However, some adjustments to the Java Virtual Machine lead to greater and near negligible efficiency benchmarks.Communities have tried to attract developers with faster and seamless development times. This is one of the key arguments of dynamically typed languages such as Python. However, when much of the details that developers used to be concerned about are abstracted in interpreters, applications at runtime may be slower than applications that only require compilations. Making an interpreter more efficient is the current work of many language communities.Besides considering the runtime efficiencies of interpreters when comparing languages, we can also take into other hassles and procedures that a developer needs to undertake in other languages. This can range from the process of trying to configure a runtime environment or even the repeated task of trying to compile and then interpret. Although it may seem trivial to a Java or C enthusiast, Ruby and Python enthusiasts will be annoyed after having to perform these tasks over and over again. However, this is not something that can easily be worked on such as the issue of making interpreters more efficient. This is merely a property of compiled languages.API Abstraction of the ComputerWe can think of every programming language as merely an API of the machine it is operating on. (There may also be an intermediate virtual machine between this machine and the language such as the Java Virtual Machine.) Just as APIs over the Internet allow us to work with specific features of the application itself in our own applications, Ruby, Java, Python, C++, C, and all the other languages allow us to work with the features of our machine in the vision of the developers of all these languages. The available functions and mechanisms that come about with each language are a manifestation of the era in which the language was created, the demands and technologies that were present at that time, and the envisioned use of the language. C provides an API that allows us to work directly with memory addresses and dynamic memory allocation on the heap, while Python and Ruby do not.We’re Programming ApplicationsThe exposure is important, but it is not necessary to have a full working expertise knowledge of all the languages you encounter. This exposure is mainly to allow developers to think outside their shell and to give them deeper insight into abstracted algorithms that they may take for granted. When this occurs, troubleshooting skills become more refined and the ability to write more beautiful and more efficient algorithms grows.There are egomaniac developers who condescendingly insist that constant use of lower level languages such as C and C++ are a sign of a quality developer and that these developers are better than those who work in Python and Ruby. This is an abhorrent way of thinking for many reasons. In the higher level language’s defense, we’re programming applications and not trying to reinvent the iterator, the loop, or the wheel. The sign of a quality developer is one who is able to push the frontiers of APIs, data, and knowledge forward, not one who prides themselves on being able to be bothered by every rotation each electron takes in a machine. We use higher level languages to worry less about these details and more about actual innovation.
Web Accessibility Is A Thing by on 06/17/2018
When I think about disabilities, and accessibility for the disabled, I don’t usually think of the internet. My mind more often goes to typical things like wheelchair ramps, or braille, or buttons that open doors automatically — things like that, but not to the internet.I’m almost embarrassed to admit that it’s something that never really crossed my mind, even as an aspiring front-end developer. There’s an entire demographic out there that is all too often forgotten. Sure, we recognize some disabilities when we can see them, but what about the ones we can’t see?So what is web accessibility anyway? According to Wikipedia, web accessibility “refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.” Interesting. So in my quest to find out more about this topic, I learned that there are actual guidelines that can & should be followed when designing a website. They are called ‘Web Content Accessibility Guidelines (WCAG)’, and are detailed by the World Wide Web Consortium (W3C) here.According to W3C, people can have a range of impairments in the areas of hearing, sight, movement, and cognitive ability. Here are a couple of examples of web accessibility: (1) It’s important to make sure that images have an accurate description (‘alt text’) for people who have a vision impairment. Perhaps they are using a ‘text-to-speech’ device, so a description of the image would be really helpful to them. (2) For users who have hearing impairments, it is helpful to have a text transcript of any audio information on your site.Learning about web accessibility is both eye-opening and humbling at the same time. Sometimes we forget that other people don’t have the same abilities as we do when it comes to consuming web content. Going forward, I’ll do my best to consider these guidelines in websites that I work on.
Explaining React Lifecycle Methods by on 06/14/2018
React different lifecycle methods that can either make an app run smoothly or cause you endless headaches. I will be going over the most used methods as well as provide additional details on the legacy methods that you should either no longer use or use sparingly.Current version 16.4What is a Lifecycle Method?A lifecycle method within React are various methods that are invoked at different times depending on their purpose. They are triggered during different phases due to efficiency as to not use all available resources to make a fetch call, update a video link, render data, etc.Four phases of a React componentReact components go through different phases while a user interacts with the app.Initialization — setting up state and propsMounting — constructor && componentDidMount() belong to this phaseUpdating — componentDidUpdate()Unmounting — componentWillUnmount()Below is a data model with the more commonly used methods which will be explained later.React lifecycle phases, most commonLegacy MethodsNext, I want to go over the LEGACY lifecycle method(s) that are available, but will be deprecated in the future.https://medium.com/media/5b5707815e61ba415e5e752dd837cbc9/hrefLegacycomponentWillMount() — previously used to fetch data and some StackOverFlow may say to fetch data here, DON’T.componentWillReceiveProps()componentWillUpdate()Currently you are still able to use the methods, but once React 17 comes out they will need to be prefixed with the keyword UNSAFE to let you know that they should not be used.Example: UNSAFE_componentWillMount()Within the react docs the legacy methods are due to:Using this lifecycle method often leads to bugs and inconsistencies, and for that reason it is going to be deprecated in the future.Moving on, now that we got the legacy UNSAFE methods out of the way I can go over the currently used methods that can help with your React app.Currently Lifecycle Methodshttps://medium.com/media/efcfaa7a3467263d328de4bb8c7eaba4/hrefReact Lifecycle MethodscomponentDidMount()shouldComponentUpdate()componentDidUpdate()componentWillUnmount()static getDerivedStateFromProps() — used rarely and will not be covered here ( more info)getSnapshotBeforeUpdate() — same as the method above.React lifecycle Data Flow with less common methodsBefore we go int the lifecycle methods I wanted to note that React components, at their core, are Javascript classes, meaning that constructor is always called before any type of mounting can occur.constructor()If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component. Constructors are usually used to pass props down from a higher component and where you set the initial information before render() is called.Constructor is the only place where you should assign this.state directly. In all other methods, you need to use this.setState() instead.Basic constructor setup using ES6 import React, {Component} from 'react'//import PropTypes from 'prop-types'class ClassName extends Component{ constructor(){ super(); this.state={ }}componentDidMount()componentDidMount() is called after the render has finished. This method is mainly used for setting up any long-running processes or asynchronous processes such as fetching and updating data. Before it mounts React renders any DOM related events. You are able to use this.setState here, but it will cause a double re-render before the data is displayed and can cause issues.shouldComponentUpdate()If you are to take any knowledge from this method is that it returns a true||false on whether it should render new data, defaults to true. This method is rendered before new props or state are being received.shouldComponentUpdate(nextProps, nextState)This method is not called for the initial render or when forceUpdate() is used.componentDidUpdate()You can call setState() within componentDidUpdate() but you need to wrap it in a condition, such as the example below or it will end up infinitely looping causing more problems than it is helping fix. This method does not get called during the first render.Make sure that you add the looping since it took me some time to figure out why it was looping.//optional parameters, usually needs prevProps and/or prevState:// componentDidUpdate(prevProps, prevState, snapshot)componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}the condition above is comparing the new props and the prevProps and if it is true it will update the data.NOTE: componentDidUpdate will not run if shouldComponentUpdate() returns false, hence what you need to remember for shouldComponentUpdate().rarely used, but you can also update getSnapshotBeforeUpdate()componentWillUnmount()This is the last method called. It is invoked immediately before a component is unmounted and destroyed. Used to cleanup invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.https://medium.com/media/6917051e76caecb2035d9c61da6db3c2/hrefSome components that you mount may still be running even without your knowledge and unmounting them will make sure that no performance issues occur.NotesLifecycle hooks that are called after the DOM is ready, such as componentDidMount()and componentDidUpdate(), get collected into “callback queues” and are executed in a single batch.SourcesLegacyNotesReact Docs
This is…Javascript by on 06/18/2018
This is scary, but eventually it will make sense. Or at least that’s what I keep telling myself. The keyword “this” behaves differently in Javascript compared to other languages. Before studying Javascript I was studying Ruby, and Ruby’s version of the keyword is known as “self.” I found self drastically easier to comprehend than this. At first I was frustrated by how complex this is, but the more i studied Javascript i realized all of its inherit complexity serves a purpose. I still don’t fully get this, but i’m less frustrated with it and more intrigued. For this article i’m going to leave out how strict mode vs non-strict mode effects this in an effort to simplify the problem so i can better understand it.In most cases, the value of this is determined by how a function is called. It can’t be set by assignment during execution, and it may be different each time the function is called. With few exceptions you won’t be able to look at this in a piece of code and determine what this will be. You can only make that determination on how you expect to call that function. Knowledge of predetermined rules governing this is essential to predicting what this will be.Rule → If this is referenced directly inside a method, it equals the object that received the method call. Otherwise this is global.To be explicit, a javascript method is a property on an object that points to a function. So if a function is called on an object, meaning called with a context, i.e. function is a method, this will be the object. We sometimes reference this from functions, not methods, and in that case this becomes global. The most common way to set up this when calling a function is by calling the function by a property on the object:In the above example this is the variable obj, and thus when i console log this.goose, “careless in nature,” gets outputted to the screen because obj.goose is equal to that phrase. Nevertheless silly is not forever intertwined with obj as the following example illustrates:The above example demonstrates that the value of this depends on the execution context, i.e. how the method was called, and not on how it was declared. Even if a function was originally declared as a property on an object, if we do not reference the function as a method, this will be global. In such a situation, you can use the .bind method, and pass the obj that you want this to be. This flexibility is great because it allows you to make this any object you want it to be. The following example demonstrates the adaptability this has:Bind actually creates a new function with the same scope and body with its this now set to the object provided as the argument. Bind’s ability to create a new function allows you to easily rewrite functions with a new object. This allows for an incredible amount of flexibility in your code, you can reuse methods and functions by setting them to different objects to suit your needs.Something to be aware of is when a function invokes another function, from the inner function this is global. It’s important to remember callback methods are a specific application of an inner function being called, and therefore this is also global inside of callbacks passed to our array iterator methods.When in doubt, the following four rules will help you determine what this will be in certain situations; rule one holds the highest level of precedence, and rule four the least. I have found these four rules the most helpful for determining what this will be:1- this within a function called with the keyword new in front will point to the newly created object2- this within a function called with apply/call/bind will be the object passed as the first parameter3- this within a function called with a context (i.e. Object.method()) will be the object4- this for a simple function call (fn()) will be the window (browser) or the global object (Node). If we are in strict mode this be undefined for simple function callsThis was very frustrating, but i’m glad i embarked of this journey. I trusted the complexity of this served a greater purpose, after all programmers are lazy. As your education in programming progresses, and the concepts and material become more complex and difficult, it’s paramount to your success as well as your mental health that you understand that with great difficulty come power and flexibility
Console.log(“tips”) by on 06/13/2018
Taking advantage of more tools in the consoleThe console is an invaluable resource for developers. While there are things like the debugger that are readily available to us, there are a myriad of other tools that can be utilized for debugging, styling, and exploring code in the console further.console.table()If you’re ever working with a complex set of objects, you could either console.log them the old fashioned way and scroll through the returns in your console. Or, if you’re in the mood for something else, you could take a seat at the console.table(). It can make it easier to reference your objects and sort by how you want your objects to appear. And let’s be honest, it’s pretty neat.let characters = [ { name: "Gandalf", movie: "Lord of the Rings", age: 2019 }, { name: "Ellen Ripley", movie: "Alien", age: 30 }, { name: "Dr. Henry Walton Jones Jr.", movie: "Indiana Jones", age: 32 }];console.table(characters);DOM Element MarkingYou can mark a DOM element in your Elements panel and use it in your console. The Google Chrome Inspector stores the five most recent elements that have been marked in its memory, which you can then quickly access and store as a variable in your console by using $0, $1, $2, $3, $4.Edit Directly in the DOMYou can edit almost anything straight from your browser — either add text or remove text directly in the DOM.To enable this functionality, go into your console and enter:document.body.contentEditable=trueNow you can manipulate directly in the browser window.$_using $_ in your console will retrieve the result of the last expression executed in your console’s command line. If you’re needing to do some quick math, it will retrieve your last result, or if a function returns an array, you can quickly set that array to a variable by setting a declaration equal to $_.EyedropperIn the Elements panel in your console, you can alter or grab the color codes using the built in eyedropper tool through the Styles tab. To do this, simply find whichever element contains a color box, select it, and it will open your color manipulation options.Clearing the ConsoleLast but not least, it’s time to clean up your space. There are two main ways to clear your console — the first is by entering console.clear() and the other is simply cmd+k. Easy!Above are just a few examples of the many tools we have at our disposal using Chrome’s console. I highly recommend looking into more, many of which you can find more information about on MDN.
How To Get Started With Chart.js In React by on 06/18/2018
Ruby by on 06/17/2018
Workflow in Ruby by on 04/18/2018
Why JavaScript? by on 05/06/2018
The basic building block of a website is HTML. With it, you can display text, images, forms and more. If you want to make your website prettier you can use CSS to add formatting and color schemes. But HTML and CSS have limitations; the websites made with it are static i.e. they don’t change. That’s how we get websites that look like this:I’m not sure if this is real but it nicely illustrates my point.But that’s boring, our users want websites that react to what they do. We want websites that move!https://medium.com/media/840d48efbad8af4f2d9a162f64b39bfd/hrefWhat does JavaScript allow us to do?MDN gives us a nice list of things that JavaScript will allow us to do with our webpages. Here are ones I find most exciting.Interactive Maps.2D or 3D animations.Listening for events.In my opinion that last one is the most important.How does JavaScript do this?To handle user input, JavaScript uses Event Listeners and Event Handlers. Event Listeners check for input from a certain source like a mouse or keyboard. An Event Handler is the function that gets run when an Event Listener is triggered.Event ListenersSo for example you might have an event listener that waits for a certain key to be pressed. In it’s most basic form an event listener might look something like this example from MDN:target.addEventListener(type, listener[, options]);Let’s break this down. As you can see we’ve got a target, a type, a listener and options.TargetThe target is exactly what it sounds like. It’s the context in which the event listener is looking for the event. For example if you wanted to check for an action occurring anywhere on your web page then you would set the target to window like so:window.addEventListenerTypeType will be a string that represents the event that the listener should be waiting for. This could be anything from a key being pressed down, to a key being released, the mouse being clicked or even hovering the cursor over an element. Here is list of different event types. Here’s what it would look like if you wanted to listen for the user scrolling their mouse’s wheel.window.addEventListener("wheel")ListenerThe listener is the object will receive the event. This will be where you put the name of your Event Handler. Usually this will be a JavaScript function. This will look like this.window.addEventListener("wheel", myFunction())OptionsOptions modify the behavior of the event listener. They are declared in key value pairs and you can use as many options as you want. These will be boolean values indicating whether the option they’re attached to is be invoked. One of the possible options that I find interesting is once. This option will only allow a function to be performed one time. It would look like this.window.addEventListener("wheel", myFunction(), {once: true})ConclusionWhile JavaScript is not essential to making a website it does offer a lot of extra functionality. A lot of the really fun stuff happens through event listeners and handlers. Event listeners wait for a specific event to happen on a specific element on your web page. When the listener detects it’s event it activates the handler which will carry out whatever function it was programmed to.
Micro-Controllers by on 05/28/2018
The Tessel 2So what is a micro-controller?A micro-controller is a small computer that is completely programable. The most common one is Raspberry Pi. People have built some pretty amazing things with micro-controllers and a little bit of hardware know-how. Here are some examples.Media Center built with Raspberry PiArcade CabinetEven RobotsWhy are they important?https://medium.com/media/658096af3110351dde02fefa5838cfc4/hrefLots of people have ideas for inventions. But in the past bringing that idea into reality took knowledge in multiple disciplines. It involved understanding things like this.And a suitable language to code in. But with micro-controllers things are much simpler. All you need now is a little knowledge of soldering and a language.The more popular types of micro-controllers , e.g. Raspberry Pi, support multiple easy to learn languages like Python and Ruby. Because of the ease of using these micro-controllers the world of invention is now much more open to many more people.https://medium.com/media/b16dbe62e7fd78a80e439c6bfb3254c6/href
React.js vs. Vue.js by on 06/17/2018
Coding like Kung Fu by on 06/14/2018
A high level overview of Defensive ProgrammingHow many hacks or epic software failures in history could have been avoided? Are software vulnerabilities mostly a matter of hardware faults or software inefficiencies? How can I define a secure program? Are program failures predictable as edge cases evolve?These were some of the questions that inspired me to search for a high level view of defensive programming. I figured, the answers to the questions above can lead to better nights of sleep for software developers and owners alike.As defined by Wikipedia, defensive programming is “ a form of defensive design intended to ensure the continuing function of a piece of software under unforeseen circumstances”.Informally, I’ve found definitions such as, “ defensive programming is when the programmer makes necessary assumptions and creates code that anticipates potential problems and specification changes”.As with all things that are broad there is a degree of subjectiveness to the views of what actually composes the subject. This vast domain is hotly debated amongst cyber security enthusiasts, researchers and newbies like me who have interest in a rapidly evolving field of large problems & lucrative opportunities.“Distrust and caution are the parents of security.” — Benjamin FranklinMany view defensive programming as a matter of time, either as a time waster or something they do not have enough time for. I hypothesize that these thoughts may be the culprits behind many costly errors and exploitations. Here are a few examples of very bad things that may have been avoided using a defensive programming thought process:Exhibit A: The Dhahran Patriot Missile Detection Failure 1991US Customs Computer Glitch at Los Angeles International 2007Stock Market Algorithms Cause Flash Crash of 2010Through my review I have discovered that defensive thought processes give a program many different “abilities” that provide a sense of security against random events. These include:TestabilityMaintainabilityPortabilitySupportabilityDeployabilityMost importantly, when using defensive coding principles we stand to improve our code’s comprehensibility and position our systems to perform predictably despite unknown risks from inputs or users.As for Kung fu, well, defensive programming may be similar in many more ways than I know of, but it surely shares commonality in the fact that Cyber Security is as diverse of a subject as Martial Arts.While researching, I decided to create a map of the concepts I felt really stuck out as the core elements of defensive programming . It is my goal to explore these concepts further throughout my education and software career.My personal taxononmy of defensive programmingI’ve recently began my defensive programming journey by utilizing validations and unit testing. Validations in particular presents a unique thought exercise that forces me to contemplate security and user experience in unison. This is a lot of fun as I see it as a way to truly build cool things for an end user. This happens all while I am thinking of all the ways to break what I am building. At times it seems like it makes no sense, but be reminded of the events above.Specifically, validations vet user inputs before they are committed or persisted to our data storage systems. Validations can happen at various levels of software and hardware.Ruby Model Validation Helper MethodsAs for web applications using the MVC framework, validations can typically be stored in the model, controllers, views and database itself. These varying levels of validation presents many opportunities to not be a lazy developer and keep the “abilities” of our software in optimal state.JQuery Form Validations in the browserIn the end, I hope to practice, learn and implement enough on my defensive programming journey to rival the challenges of the ever evolving human & digital worlds. I personally find software architecture principles, methods to validate and test my systems very interesting. Then again, who am I?
https://medium.com/media/0e6e9d0b81a9c4c847eb5e6bd917cfaa/hrefHow to create an Augmented Reality application with ARKitFor the first time!So, what is Augmented Reality (otherwise known as AR)?According to Apple’s website:Augmented reality (AR) describes user experiences that add 2D or 3D elements to the live view from a device’s camera in a way that makes those elements appear to inhabit the real world.But why does it matter? Because AR has incredible potential! Take a look at the Ikea Place app below:https://medium.com/media/53f0f5de09d264fd3f4c368be92db2ff/hrefThe possibilities are endless!But, how does it work? Well, the technologies used in AR are diverse, dependent on the device’s processing power, and many other elements.But let’s talk about ARKit. Why is it such a big deal? It is a big deal because Apple made this Software Development Kit (SDK) available last year, meaning anyone who owns an iOS device that meets the minimum requirements and who is willing to try can now have fun creating some really cool applications. ARKit also showcases the power of SLAM (Simultaneous Localization and Mapping) technology. So we can do things like this!https://medium.com/media/cc1d51c4d44f33fe136f281fe334337d/hrefSo, how can I create an AR app? I’m glad you asked! But before we begin, here are some things you should know about using ARKit:Requires Xcode 9.3+ (download from Apple Website);Needs at least one supported ARKit device : — iPhone 6s and 6s Plus — iPhone 7 and 7 Plus — iPhone SE — iPad Pro (9.7, 10.5 or 12.9) — iPad (2017); and,Knowledge of either Swift or Objective-C language.Okay! Once you have these things, then we can begin! I followed Parth Anand’s Youtube video (link below) on how to create an AR app that displays text like this:https://medium.com/media/cede2d7c6055c9f94cc044c288a0ce6a/hrefStep 1: Open up Xcode and select “Create a new Xcode project”.Step 2: For Application Template, select the “Augmented Reality App”. Select “Next”, and fill out the product name. Click “Next” and save the project to somewhere in your computer.Step 3: Open the file you just saved. If you used the Application Template, when you open the file “ViewController.swift”, you will see the following code provided by Apple:https://medium.com/media/1aad73f4a6f2b92a52e4457ee18882b2/hrefStep 4: Make the following changes:https://medium.com/media/ed79cb607660a496c7887da4b3ce78ba/hrefBasically, here’s what happened:we created a geometry object (text geometry), assigned the text, and thickness;we created a material object, so we could assign color properties to our geometry object (the text object);we created a node object, so we could assign a position and size to our text object;we added the node object (now our text object) to sceneView(which is set to display the live feed of the camera); andwe added shadow to the text, so it looks more realistic…a bit…maybe.All of this to say, I believe AR will continue to influence many aspects of our lives. I wanted to bring this small taste for those who otherwise would never try AR or who are beginning their journey. I am also just beginning and I can’t wait to continue learning more about AR!Thank you so much for taking the time to read this! I hope it was informative, or at least entertaining!https://medium.com/media/4c689b9579d83643204de50b7b0697aa/hrefReferences:Apple iOS Augmented Reality: https://www.apple.com/ios/augmented-reality/Youtube ARKit Tutorial for Beginners by Parth Anand: https://www.youtube.com/watch?v=MzEevVPWijM“What is Apple ARKit: Everything you need to know about iPhone AR” by Read more at http://www.trustedreviews.com/news/what-is-apple-arkit-3286676#xP44rPRKSfKJEuhl.99“What Is Apple’s ARKit? Everything You Need to Know” https://www.tomsguide.com/us/apple-arkit-faq,review-4636.html
Publishing our first CLI application! by on 05/11/2018
https://medium.com/media/079575265e2174fbbbb5bd45ddd0ab70/hrefPublishing our first CLI application!We have finally completed our first CLI application (by we, I mean my partner, Chris Junker, link to his blog below). What is this amazing application?The ProjectWeatherCLI App! What does it do?Have you ever wanted to know what the forecast was in (almost) any location? Have you ever wanted to see up to 5 days of forecast? Well, you’re in luck. This application pulls information from a public weather API and it provides forecasts for many locations!The ProcessWe began by creating and migrating tables to our database using ActiveRecord, creating the corresponding models (using ActiveRecord and user input). We asked the user for input and sent over a query to the public API, which then returned the data. We save the data in a format that made sense to us. We then allowed the user to use built-in functions to retrieve information from the database.The ProblemsHere are a few of the problems we ran into while building our application:UTC vs Local Time: The data provided by the public API included date and time, but it was returned in UTC. This presented a unique challenge for us, because we wanted to retrieve the information at 12PM, local time (of the selected location). Our solution was to create a method that converted our UTC into local time by using the provided longitude.Reloading our Database: Some of our features required the reload of the database, because our query would be cached, information would be updated, but the program would look at the cache.Puts, print & p: We ran into an issue where our interpolation was not correctly printing the information. We discovered that certain data types will be turned into string based on the method used. We learned a lot.Handling errors and exceptions: We learned how to use rescue (Ruby keyword) to prevent our program from crashing when incorrect information was inputed.The PresentWe present this program for your use. Use wisely.Chris’ Blog: junkindonuts.wordpress.com
Introduction to Capybara by on 05/23/2018
https://medium.com/media/349d6ef8e25ccf9a489f7f6977eb1213/hrefIntroduction to CapybaraAs in, the Framework CapybaraWe’ve all been there. Capybara tests are failing again. But what is Capybara? How do we use it? Is it really that useful? Let’s take some time and learn a bit more about this gem.OriginsCapybara was developed by Thomas Walpole and Jonas Nicklas (now maintained by team capybara).According to a description written by Bakir Jusufbegovic:Capybara is a web-based automation framework used for creating functional tests that simulate how users would interact with your application.This meaning that Capybara is a program used to test a website or application by behaving like a user. The main draw of Capybara is that it is useful for developing tests that are “modular, easy to write, and easy to maintain” (Jusufbegovic).How does it do that?Capybara is made of Domain Specific Language (DSL), a very specific type of programming language usually used for one particular job. It is also a very user friendly DSL.DSL SummaryHere’s a list of some of the basic commands:visit('page_url') # navigate to pageclick_link('id_of_link') # click link by idclick_link('link_text') # click link by link textclick_button('button_name') # fill text fieldfill_in('First Name', :with => 'John') # choose radio buttonchoose('radio_button') # choose radio buttoncheck('checkbox') # check in checkboxuncheck('checkbox') # uncheck in checkboxselect('option', :from=>'select_box') # select from dropdownattach_file('image', 'path_to_image') # upload fileAs you can see, most of these commands are very intuitive and useful. I believe most people will successfully guess what each of these commands do.Besides the basic commands above, there are other types of commands:QueryingCapybara gives us the ability to ask if a page has some specific element:page.has_selector?('table tr')page.has_content?('foo')These queries can be used in conjunction with RSpec like this:expect(page).to have_selector('table tr')expect(page).to have_content('foo')FindingCapybara can find particular elements:find_field('First Name').valuefind_button('Send').clickWorking with WindowsJust in case you knew everything I have described above, here’s a fun one:facebook_window = window_opened_by do click_button 'Like'endwithin_window facebook_window do find('#login_email').set('a@example.com') find('#login_password').set('qwerty') click_button 'Submit'endCapybara has the ability to find and interact with windows (by opening them and searching the new window for elements).DebuggingCapypara can also be very useful with debugging. If one is ever curious as to what the page looks like, Capybara is capable of taking a snapshot of the current page:save_and_open_pageAnd it can also retrieve the current state of the DOM (Document Object Model):print page.htmlBut it can do even more! It has Advanced DSL, with the ability to use CSS selectors and xpath (also known as XML Path Language). This becomes more useful for applications that use Javascript. For example:find('xpath/css').clickUse this to find the xpath or css that you want Capybara to click on.Capybara Wait TimeSomething else I learned was that it is capable of waiting for a response from an element on the page, or more specifically, handling asynchronous calls. For example, say that you have an element that when clicked makes available more options. The only way for Capybara to test this is by having a wait time. Capybara’s default wait time is 2 seconds. This setting can be changed with the property:Capybara.default_wait_timeBeyond all that, Capybara is used in conjunction with other code development tools and gems, like Cucumber, RSpec, Test::Unit, Minitest and many more.This is such a cool development tool. I hope that today you have learned a bit more about Capybara and how it may help you test your code more effectively!https://medium.com/media/5148f41f987557b5bbdb1461f37e4a3f/hrefCitationscapybara | RubyGems.org | your community gem hostteamcapybara/capybaraThe Basics of Capybara and Improving Your Tests - SitePoint
https://medium.com/media/cbdb7e812c5c594f64efc4d299550c38/hrefA Very Brief Intro to Cross-Origin Resource Sharing (or CORS)What exactly is CORS anyway?Why CORS?When talking about CORS, first we need to discuss browser security. When loading websites, you may notice that elements and images and fonts are being loaded from many different places. This posses a serious security question, what happens if someone malicious is trying to hijack my browser or load malware on my computer?To mitigate some of these risks, many modern browsers follow security policies, one of which is same-origin policy. Same-origin policy basically dictates that a document can only interact with other documents hosted in their origin server.codecademy.comSame-origin policy would normally not allow any type of cross-origin resource sharing (get it?) Thankfully, CORS is allows for some freedom, without losing too much protection. This way, the server can specify if the information can be accessed and how to access it.According to the MDN Web Docs:“Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.”In other words, CORS exists to communicate between two entities (i.e. client and server) that do not share the same origin (domain). For example, imagine your web application, www.bestestgame.org (not a real site), requires you to fetch some font or element from an API that is not the origin API or server to populate your game.MDN web docsHow does it work?When preparing to make a request to a different origin server, we need to include that information.Using CORS withfetch it is rather simple, just add a mode with a value of ‘cors’ or ‘no-cors’ (note: ‘same-origin’ is the default value when fetching) like this :fetch(www.foo.client.com, { mode: 'cors' })When our request is sent, it may look like the following:The response may look like this:Some servers will indicate Access-Control-Allow-Origin: * which indicates that they accept request from all domains, while others will be limited to particular domains.All in all, CORS allows us develop wonderful applications by allowing us to request, access and hopefully use other elements/images/fonts from other servers.Thanks for taking the time to read!ResourcesCross-Origin Resource Sharing (CORS)What is CORS?Using FetchUnderstanding : CORSThat's so fetch!Same-origin policy
Enumerators in Ruby by on 05/30/2018
Enumerators are a set of methods to traverse, search, sort and manipulate collections (Lists and Hashes) in Ruby. The concepts regarding enumerators are directly related with loops and collections. If you understand the concepts of loops, lists and hashes, there is absolutely nothing new conceptually in this post. Usually, Enumerators allow us to write more elegant solutions with fewer lines of code.
Demystifying Data Structures in Ruby by on 06/14/2018
The human being has been inspired by nature to develop ideas for a long time. Data structures are no different. It is a way of organizing and storing observations that have been abstracted from their real world environment. For instance, a classroom could be represented as an array with the students’ names, in the form of strings. A student could also be represented as an object with endowed attributes (what they look like) and behavior (what they do).
Atom Tips by on 06/13/2018
Many swear by Sublime, and they have reason to love it — but I personally prefer Atom. Atom simply comes with more features, functionality and “packages.”Like many perhaps, when I embarked on this programming adventure, I mainly stuck with IDE’s and repl.it — but since starting the boot camp at Flatiron School, I FORCED into using a text editor. No, but really. It just makes life so much easier, and plus some IDEs really suck.. Although my friend, A, would argue it’s better because it saves you space since you wouldn’t be cloning repos off of Github.Originally I had already downloaded and played with Sublime first, but I remember seeing Atom during the pre-work labs and the manual set-up of the computer, terminal and whatnot; so naturally I downloaded it as well. Clearly I knew what I was doing when installing a ton of things via the terminal!The day I officially was convinced to switch to Atom was when I had accidentally stumbled upon autocomplete for HTML tags!And since then, little by little I’ve been learning shortcuts that make my life so much easier. Just not having to switch positions to use the touchpad saves you time and effort. Anything to see the magic happen faster, right?Most Useful Shortcutscmd-dselects the current word, and press again to select the next instance of the same word (including the current)from a Google searchcmd-control-gselects all of the same word for current word — basically what the previous shortcut does, but in one go; although, the previous is useful when you are targeting only a couple of instances of the same word rather than allcmd-shift-dduplicate current line (AKA copy the row and paste down below)Saves you loads of time typing and safeguards you from typos — let’s face it, you’re bound to have some! Some more than others coughcough You know who you are!cmd-control-up arrow key (or down)moves the current line or row further up or down in the page — great for reorganizing your codeanother Googled search resultcmd-entercreates a new line where cursor is and shifts current row below — you can also simply type out “def” and then press the tab key to give you the “end” and a space in the middle of the block! (credits to S for teaching me his ways)made this myself, ain’t it beautiful?cmd-[ and cmd-]indents to the left, or to the right — for when things get messy and you outta make it nice and purrrtyProbably Sublime, but it’s the same!cmd-/adds the comment syntax for the language of the fileHTML commenting with said shortcut — shows two ways if you’re patient enough to waitcmd-xAKA the cut shortcut — cuts the current selection, but without a selection it will cut the current row (can use in place of deleting a line!!)Handy Shortcutscmd-popens the Atom file finder to search for files in your project’s directory to find and open — actually fantastic now that we’re working with MANY filescmd-\toggle, or open and close the navigation pane on the left listing your project filesaforreal, just “a” — but only when in the navigation pane and clicked on a folder — this will bring up the add-a-file prompt; can’t express how useful this is when you’d rather avoid generating unnecessary files with “rails generate”alt-cmd-ssaves all open windows — for those who forget to save! A, I’m looking at you!cmd-lselects the current line/row — useful if you need to add quotations, parentheses, string interpolation, or simply delete itExtrasalt-bmoves to the beginning of the current wordalt-backspacedeletes up to the beginning of the word from where the cursor currently isalt-deletedeletes from the location of the current cursor to the beginning of the wordalt-ddeletes from current cursor to the end of the wordPackagesopen-in-browserbecause it isn’t built in like Sublimefile-iconsbecause we doesn’t love stylish icons for your varying files (different ones for HTML, CSS, JS, Ruby, etc!)rails-snippetsbecause manually typing out ERB substitution and scripting tags is SO MUCH FUN!There’s a lot more but I feel like I’m content with these! I’m sure more experienced programmers may disagree, but I’ll live my best life and you live yours!