• Design
  • Shotty
  • Blog
  • Reading
  • Photos
Menu

Jacob Ruiz

Product Designer
  • Design
  • Shotty
  • Blog
  • Reading
  • Photos
formatMoney@2x.png

Mastering Javascript Fundamentals: AccountingJS, formatMoney

May 16, 2018

Summary

  • formatMoney takes a value and returns that value formatted nicely as money, as a string.

  • The user can specify formatting settings like currency symbol, separator, etc.

  • They can do this via a long list of parameters, or by passing in an options object.

  • Because of this, the code is long, convoluted, and difficult to read.

  • It would be better to only allow the user to specify formatting by passing in a format object.

Read on for line-by-line notes.

Read More
rounding issues part 2@2x.png

Mastering Javascript Fundamentals: AccountingJS, Better Rounding with Scientific Notation

May 15, 2018

Summary

  • We can round numbers more consistently if we use scientific notation.

  • First we move the decimal with something like '1.005e2'

  • Then we round this exponential form with Math.round.

  • Finally, we move the decimal back to it's original position with 'e-2".

Read on for a detailed walkthrough.

Read More
rounding issues@2x.png

Mastering Javascript Fundamentals: AccountingJS, toFixed and Rounding Issues

May 14, 2018

Summary

  • Javascript doesn't round the way we want in accounting software.

  • This is to do with some decimal numbers being not completely precise because computers have to think in terms of powers of 2.

  • AccountingJS creates its own toFixed method that essentially does this:

    • Multiply to get the number to only one decimal place

    • Use Math.round to round using more predictable behavior

    • Then divide the number back down to get it to the number of decimal places you wanted.


Read on to see the full walkthrough.

Read More
checkCurrencyFormat@2x.png

Mastering Javascript Fundamentals: AccountingJS, checkCurrencyFormat

May 13, 2018

Summary:

  • checkCurrencyFormat takes an argument, format that can be a string, object, or function.

  • It returns a format object

  • So if the format parameter is a string, it changes it to an object and returns it.

  • If format is a valid object, it simply returns it back, untouched.

  • If format is an invalid object, it uses the default (lib.settings.currency.format) and changes it to an object if it isn't already.

Continue reading to see the full walkthrough.

Read More
map.png

Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 3): map()

May 12, 2018

Summary

  • AccountingJS’s map() function checks to see if the native Array.prototype.map function is available.

  • If the native map is available, it uses it.

  • If not, it uses its own implementation.

Click on to see a detailed walkthrough.

Read More
javascript-defaults

Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 2): defaults

May 10, 2018

Summary

  • The defaults() function allows you to pass in two objects and apply the properties from the second object to the first one where those properties don't already exist on the first object.

  • It does this by enumerating through each property on the second object and checking to see if that property exists on the first object. If the property doesn't exist, it applies that property to the first object.

  • This is a way to only need to define "custom" properties when creating a new object, and then setting all the "standard" options to the defaults set in another "default" object.

Read on to see how this all works in detail.

Read More
Tags mastering javascript fundamentals
streaks

Streaks helps you build great habits and keep yourself accountable

May 9, 2018

Repetition is the mother of skill. If you want to get good at something, you just have to practice. It's that simple, but consistency is key.

I've been using an app called Streaks to help me stay on top of my goal of doing 1 hour of Javascript every day. 

The app is simple, you "check in" to an activity when you do it, and over time you can see how many days you hit and how many you missed. The idea is to get addicted to maintaining your streak. Having a visual representation of your consistent hard work is rewarding and reinforces good behavior.

Let's see how high I can get this streak!

 

javascript-isArray

Mastering Javascript Fundamentals: AccountingJS Internal Helper Methods (Part 1)

May 9, 2018

Summary:

isArray

  • Tells you whether something is an array or not.

  • Uses the native isArray if browser supports ES5 or later.

  • Uses hand-rolled implementation if not.

.call()

  • a nice trick to borrow a method from one object and call it on another.

  • when you use .call(object) you set the this value to object for whatever is to the left of the dot.

  • AccountingJS uses Object.prototype.toString(obj) to show us the type of obj (and uses an equality check).

isObject

  • Uses same techniques as isArray, but instead checks to see if something is a plain object (not an array, string, number, etc.).

Click “Read more” to see the full explanation.

Read More
Artboard Copy 7@2x.png

Mastering Javascript Fundamentals: isString, !!, and String.prototype

May 8, 2018

Summary

  • The best way to get into a new code base is to understand the simple pieces, this will help you understand the more complex pieces.

  • AccountingJS has two main sections: Internal Helper Methods, and API Methods.

  • The Internal Helper Methods are a good place to start because there are some simple methods in there that are easy to understand and are used in the API methods.

  • The isString method uses !! to get the corresponding boolean value of what comes after it.

  • Boolean() is a cleaner alternative to !!

  • Strings can have methods because Javascript creates an object version of your string using the new String constructor method, so it can put methods on the prototype. When you call these methods, it uses the object version of your string, returns the value, then throws it all away behind the scenes.

Read More
constructors@2x.png

Mastering Javascript Fundamentals: Prototypes and Constructors

May 7, 2018

Summary

  • We can use constructor functions to create new objects that have shared properties.

  • An object created by a constructor function has its prototype property set to an object automatically created by the constructor function. For example, Dog.prototype.

  • We can add functionality to Dog.prototype and all instances of dog will have that functionality.

  • Array.prototype.forEach() is an example of this.

Read More
prototypes@2x.png

Mastering Javascript Fundamentals: Prototypes

May 6, 2018

Summary:

  • Prototypes allow us abstract commonalities between objects out into a prototype object so they can be "born" with certain data and abilities.

  • It allows us to avoid repetition.

  • Even the most basic object already has a default object prototype that gives it certain "innate" abilities like "hasOwnProperty", and other methods.

Read More
noConflict-part2@2x.png

Mastering Javascript Fundamentals: NoConflict (Part 2)

May 6, 2018

The main idea of today's exercise is that we looked at the noConflict implementation in Accounting JS, and wrote a new version that was simpler.

Read More
noConflict-part1@2x.png

Mastering Javascript Fundamentals: noConflict (Part 1)

May 3, 2018

Summary:

  • noConflict is a common technique to allow dual-use of the same variable name, useful with libraries.

Read More
librarySystem3@2x.png

Mastering Javascript Fundamentals: LibrarySystem (Part 3)

May 1, 2018

Summary:

  • We can see the same if/else logic in Accounting JS that we used in with sandwichLibary.

  • The idea is that it dynamically detects if you are using a given system, and then runs implementation code specific to that system

  • If there is no system, the last resort is to simply attach the library to the Window object.

Read More
remote-book-cover.png

Reading: "Remote: Office Not Required" by Jason Fried of 37signals

April 30, 2018

A year ago a read another book by Jason Fried, Rework, and it transformed my thinking about how approach my career and work. The year since reading that book has been the best year of my career by every important metric. So I decided to try another book of his called "Remote: Office Not Required".

Jason Fried is the founder of 37signals, creators of Basecamp, Ruby on Rails, and other great collaboration tools. His impact on the industry is undeniable.

In this book he lays out the argument for why Remote work is the future of work, and why businesses to fail to embrace it put themselves at a serious disadvantage.

Here are some snippets from the book that stuck with me:

Read More
In Personal Development Tags books
librarySystem2@2x.png

Mastering Javascript Fundamentals: LibrarySystem (Part 2)

April 30, 2018

Summary

  • When building a library, we don’t know if the developer prefers to create a global variable on the window object for every library, or use librarySystem.

  • To solve this, we can create an if/else statement that checks to see if librarySystem exists. 

  • If librarySystem exists, we call the librarySystem function.

  • If librarySystem doesn’t exist, we attach sandwichLibrary directly to the window object.

Read More
librarySystem1@2x.png

Mastering Javascript Fundamentals: librarySystem (Part 1)

April 29, 2018

Summary

  • Attaching libraries to the window object is a good way of reducing the number of global variables (and potential naming conflicts).

  • But if you have 100 or 1,000+ libraries, you would still have a lot of global variables.

  • There is another approach that allows us to expose a single global variable, such as "librarySystem", which is a function that lets us grab libraries by name, and create new ones.


Specifically:
1. Create: librarySystem('libraryName', function() { /* return library */});
2. Use: librarySystem('libraryName'); ==> returns library object

Read More
closures@2x.png

Mastering Javascript Fundamentals: Scopes, locals, closures, globals

April 27, 2018

Summary:

  • Functions can always remember the variables they could see at creation.

  • They can see variables defined inside the function.

  • They can see variables defined in enclosing functions.

Read More
In Javascript, Code Tags mastering javascript fundamentals
michael jordan.png

Fundamentals

April 26, 2018
iife

Mastering Javascript Fundamentals: IIFEs and sharing data

April 26, 2018

"Get the fundamentals down and the level of everything you do will rise" - Michael Jordan

Today I'm starting something new on this blog. This year, one of my goals has been to master javascript fundamentals. I've created projects in the past using Javascript, Objective-C, Swift, and Ruby - but because my goal was always to build something, I never built a rock solid foundation of knowledge. I would google and hack my way to solutions, but my speed and enjoyment suffered by the fact that I hadn't mastered the fundamentals. 

In design, I have such an intuitive understanding of the principles, best practices, and tools - that I'm able to move quickly and happily from problem to solution. I want this fluid sense of mastery in code as well.

What I'm doing about it: Since December 2017, I've set the goal of 1 hour of learning Javascript everyday with the goal of mastering the fundamentals. Sure, I've missed days along the way as work requirements demand extra time, etc. - but I've done my best to stick to this regimen and it's paying off.

How I'm learning: I do 1 hour of video lessons from Watch and Code every day. If you're interested in learning Javascript in a way that goes beyond basic tutorials and gives you a foundational, practical knowledge without relying on frameworks - I'd highly recommend it. I've learned a lot of skills on the internet, and this is without a doubt one of the best programs I've found.

As I move forward with documenting my progress on this blog, I'll be keeping my notes on the blog to force me to clarify my understanding (to the point of being able to explain it). If you're reading these posts, please keep in mind that these are just my notes, and I'm not an expert (yet!). If your goal is also to master the fundamentals of Javascript, please head over to Watch and Code and start your journey there!

Anyway, that's what's going on here now - so I'll just jump in to today's notes:

Premium Membership Course
Chapter 5: AccountingJS
Lesson 4: IIFEs and sharing data

We use IIFEs so we can hide variables from the rest of the program, so we can avoid potential conflicts

Read More
← Newer Posts Older Posts →
shotty-skinny2x.jpg

Shotty - Faster Access To Your Screenshots on Mac

Shotty is an award-winning Mac app I created to give you instant access to all your recent screenshots, right from the menu bar. You can even add annotations on-the-fly. Stop wasting time digging through Finder for your screenshots. I promise it’ll change your workflow forever (just read the App Store reviews!).



Most popular

information-architecture

Information Architecture: The Most Important Part of Design You're Probably Overlooking

Follow @JacobRuizDesign