Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer some extremely useful low level utility functions.
\nUnderscore JS provides much of the array/collection/object manipulating functionality similar to what you may have seen in other languages such as Ruby. As for calling the methods if you're familiar with JQuery, Underscore is identical except instead of \"$\" we use the library's namesake \"_\" to access the methods.
\nUnderscore has over 100 functions that can be used on collections, arrays, objects and functions (you read that right, function functions). I'm going to be discussing a few of the functions that work on collections, but definitely check out what else Underscore has to offer.
\nOnce you know how to re-create the same output with Underscore syntax, you'll never want to go back to plain old JS and using nested for loops. One of the most helpful tools Underscore provides for accomplishing this is...
\nThe _each method does exactly what it sounds like. It works on collections (arrays or objects), and will iterate over each element in the collection invoking the function you specified with 3 arguments (value, index, list) with index being replaced by key if used on an object. It's also worth noting _.each returns the list if you want chain some more manipulation after calling _.each.
\nHere's a quick example showing how it can be used and what's available to you when you call it.
\nvar someArray = ["a", "b", "c"];\n \n_.each(someArray, function (element, index, list) {\n console.log("value: " + element + " index: " + index + " list: " + list)\n});\n \n// outputs\nvalue: a index: 0 list: a,b,c\nvalue: b index: 1 list: a,b,c\nvalue: c index: 2 list: a,b,cWith that out of the way, let's think about what this means in terms of cleaning up our code. To do the above normally we would write a little for loop like this.
\nfor ( var i = 0; i < someArray.length; i++) {\n console.log("value: " + someArray[i] + " index: " + i + " list: " + someArray);\n}Admittedly these two aren't all that different, but let's imagine we have a function defined elsewhere that will deal with handling the arguments passed in on each iteration. We can replace that same functionality with a significantly less verbose solution.
\n_.each(someArray, doStuff);To quote Antoine de Saint Exupéry: \"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.\" While it may not be perfection, there are certainly arguments to be made about performance, I think you would be hard pressed to find anything further simplify this code.
\nWhile _.each will return the original list you input, _.map will allow you to manipulate or otherwise transform the input as you please and then returns the new array. Map needs a minimum of 2 arguments, first the collection and then the function to be executed on each iteratee and also accepts a third argument which dictates the context for the iterating function.
\nvar numbersObject = {1:1, 2:4, 3:9};\n \nvar productArray = _.map(numbersObject, function(value, key) {\n return value * key;\n});\n \n//proudctArray is now\n[1, 8, 27]Before you go writing some functions to pass as an argument to _.map be sure to take a peek at the other methods available in Underscore. Map is a little bit like having the Lego blocks to build whatever you want, but if you already have a pre-packaged Batcave available, it might not be the best use of your time building it from scratch.
\nTo illustrate my childhood toy analogy let's talk about _.pluck. Pluck is basically just a refined version of _.map made for a specific use case. That's not to say there aren't ways of combining the two to achieve something a little more complex, but if standard _.pluck behaviour is all you're after then don't go re-inventing the wheel.
\nOften with data objects we're interested in the values of a specific key, for example let's say we have an array of movies.
\nvar movies = [\n {title: "Dracula", genre: "Horror", star: "Nosferatu"},\n {title: "Cast Away", genre: "Drama", star: "Wilson"},\n {title: "Airplane", genre: "Comedy", star: "Leslie Nielsen"}\n];Now we want to just have an array of the titles of these movies.
\nvar titlesArray = _.pluck(movies, 'title');\n \n//titlesArray is now\n["Dracula", "Cast Away", "Airplane"]Not much else to say about it, it works on collections and is extremely handy for a very common task.
\nAnother example of a more refined _.map function that comes in handy often enough. Aptly named this method will return an array of only the things that make it through your test.
\nvar numbers = [1,33,6,24,8,21,11,22];\n \nvar lessThanTen = _.filter(numbers, function(number) {\n return number < 10;\n});\n \n//lessThanTen is now\n[1, 6, 8]Works on collections and kitchen sink faucets.
\nJust kidding there's no _.conclusion method.
\nI hope by now that you get the idea that if what you need to do isn't already a method, Underscore's _.map is a powerful tool for accomplishing whatever obscure collection manipulation your heart desires.
\nSo get out there, take a look through Underscore JS and start writing less obfuscated (nested) for loops with the help of _.each.
\n","frontmatter":{"title":"Be More Manipulative with Underscore JS","author":{"id":"Zakary Hughes","github":null,"avatar":null},"date":"February 16, 2016","updated_date":null,"tags":["JavaScript","UnderscoreJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/11ed52d59476d63d8b5a6688fb02bdb9/ee604/underscore.png","srcSet":"/static/11ed52d59476d63d8b5a6688fb02bdb9/69585/underscore.png 200w,\n/static/11ed52d59476d63d8b5a6688fb02bdb9/497c6/underscore.png 400w,\n/static/11ed52d59476d63d8b5a6688fb02bdb9/ee604/underscore.png 800w,\n/static/11ed52d59476d63d8b5a6688fb02bdb9/f3583/underscore.png 1200w,\n/static/11ed52d59476d63d8b5a6688fb02bdb9/e4d72/underscore.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Zakary Hughes","slug":"/engineering/be-more-manipulative-with-underscore-js/"}}},{"node":{"id":"ea653944-e648-5e66-8478-0c1673fe198f","html":"If you're not familiar with Angular I'd highly recommend heading over to the Angular JS resource site and checking out what all the fuss is about. Once you've got a basic understanding of Angular and how to get it up and running this tutorial will show you some of the basic, but awesome features supported by Angular.
\nToday I'm going to be building out a roster for my fantasy football team. If that's not your cup of tea then by all means feel free to substitute the content for whatever floats your boat.
\nThere might not be an I in team, but there are certainly players, so before we do anything in the HTML we'll have to make all the necessary components in the controller. First up let's make an array of all the players we want to include (initially at least) on our team.
\nEvery player is a special little snowflake, and our player objects should reflect that! With this in mind we will make each player an object with his or her own properties like: name, position and team. Here's an example of what our array might look like.
\n$scope.players = [\n {name: "Tom Brady", position: "QB", team: "Patriots"},\n {name: "Tony Romo", position: "QB", team: "Cowboys"},\n {name: "Peyton Manning", position: "QB", team: "Broncos"},\n {name: "Rob Gronkowsi", position: "TE", team: "Patriots"},\n {name: "JJ Watt", position: "DE", team: "Texans"},\n {name: "Lavonte David", position: "LB", team: "Buccaneers"}\n];Now that we have our roster we can go back to the HTML and make use of Angular's ng-repeat directive. We put the ng-repeat on the element we want to be repeated, keeping in mind that all of its children will also get repeated.
\n<!--\n {{player.name}} - {{player.position}}\n-->Okay so if you're new to Angular there's a couple of things going on here. First like I said we've got the ng-repeat placed on the li (the thing we want repeated) which will create a new li for each player in the players array we defined earlier in the controller. Next up the data binding is being implemented here with each player name as well as position being used as the values for the list item.
\nWhile we're on the topic of data binding, let's throw this in just for fun. Pretty simple, it will calculate the length of your roster and keep it updated as any changes are made.
\n<!--You have {{players.length}} on your roster.-->Next let's add some search functionality to our list. Sounds like a lot of work, probably have to iterate over the array elements, match them to the argument being passed in and... just kidding. With Angular it's a breeze.
\n<!--\n...\n{{player.name}} - {{player.position}}\n-->Donezo.
\nLet's imagine one of our fantasy players isn't performing too well (ahem Peyton...) and we want to give him the boot (get it now?).
\nWe'll add a little delete button beside each of our players' names, and since we're doing it for each of them guess how we're going to implement it? That's right with ng-repeat we already have on the list items!
\n<!--{{player.name}} - {{player.position}}\n ×\n-->I'll also tack on a little button with an \"x\" as the content (as a side note, when you want to do this use × instead of \"x\" it looks much nicer). Then we'll attach an ng-click with a delete function where we pass in $index.
\n$index is a neat little feature available with certain Angular directives, and ng-repeat is one of them. It will be assigned the index value (starting at 0) of the position it holds within the array being used with the ng-repeat.
\nThat's all we need in the HTML, so now back in the controller we create a $scope function by the same name used in the HTML and give it a parameter of index. The body of the function is a single line which makes use of the array.splice method where we pass in the index of the item we want to delete, and then 1 to denote that it's only 1 item we want removed.
\n$scope.delete = function (index) {\n $scope.players.splice(index, 1);\n};Now since we just cut someone from the team, we've gotta find their replacement. Let's chuck a few text inputs in there, give them all a respective ng-model to bind with their value and finally another button with an ng-click but this time calling an addPlayer function.
\n<!--\n Name:\n \n Position:\n \n Team:\n \n Add Player\n-->This one's a lil' different from delete, but still super simple. Working from the inside out, we will create a new player object which gets the name, position and team properties from the ng-models on the HTML and then push that object to the players array. After that we clear those values just for some good housekeeping practice.
\n$scope.add = function () {\n $scope.players.push({\n name: $scope.new_name,\n position: $scope.new_position,\n team: $scope.new_team\n });\n $scope.new_name = "";\n $scope.new_position = "";\n $scope.new_team = "";\n};Now since this was all done purely on the front end, and didn't make use of cookies, localstorage, or sessionstorage none of this will persist (aka be saved). For that kind of support you'd need some sort of back end, which is beyond the scope of this article.
\nThis was a very rudimentary example of what's possible with Angular JS, so if this interested you at all please dig a little deeper and play around with Angular some more!
\nThat brings us to the end of this tutorial. Feel free to check out the finished (yet unstyled) product here on Codepen
\n","frontmatter":{"title":"Angular Roster Tutorial","author":{"id":"Zakary Hughes","github":null,"avatar":null},"date":"January 12, 2016","updated_date":null,"tags":["Engineering","AngularJS","PlayersArray","Array","Search"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2773860898be140904449814ad319431/ee604/roster-angularjs-1.png","srcSet":"/static/2773860898be140904449814ad319431/69585/roster-angularjs-1.png 200w,\n/static/2773860898be140904449814ad319431/497c6/roster-angularjs-1.png 400w,\n/static/2773860898be140904449814ad319431/ee604/roster-angularjs-1.png 800w,\n/static/2773860898be140904449814ad319431/40ffe/roster-angularjs-1.png 960w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Zakary Hughes","slug":"/engineering/angular-roster-tutorial/"}}},{"node":{"id":"6c1bd964-4f8e-5fd9-a592-2ffefd86b4bd","html":"What's one thing virtually every website has? If you said navigation (you did) you're absolutely right! Go ahead and enjoy that wonderful feeling of being right for a moment... and now that we're feeling like a champ, let's get to it.
\nNavigation buttons, depending on your site of course, are likely going to be some of the most commonly used items on your web site. Typically they're found near the top so people can quickly and easily... well navigate of course! With this in mind it's worth it to make sure your navigation is both visually appealing and provides an enjoyable user experience.
\nA common featured for navigation menus is the drop down functionality for displaying sub options. This can be achieved through Javascript if you really feel like it (you don't), but why bother with that when CSS3 offers a much more elegant solution!
\nFirst we start out building a simple un-ordered list, and give it some list items each of which contain a link that point nowhere in particular.
\n
By the way, if you're on Sublime Text there's a great shortcut for making lists: ul>li+li+li+li and then \"Tab\" creates an un-ordered list with 4 list item tags inside of it. For more excellent Sublime tips check out my amigo Lucius' blog post on the topic.
\nNow that we've got the bare bones, let's give this skeleton a spine. We're now going to put another ul inside of those list items, and once again more list items inside of those lists which contain, you guessed it, links to nowhere.
\n
That's all the HTML we have to write for this example, so now we move on to the CSS.
\nThe first few things on the ul's and links are just to remove some default styles that I don't care for.
\nThe first actually relevant style is the inline-block display property on the list items to make them spread out horizontally. If you're unfamiliar with using inline-block for positioning I highly recommend reading up on it because it's an awesome alternative to floats or sometimes even flex-box. Next up we give these list items a relative position, so that the later absolutely positioned sub menu will use this as a reference point.
\nTo quote every MTV cribs star ever, here's where the magic happens. We put a max-height (that is at least as tall as all of the list items on the sub menu) and a height of auto on the sub menu. Note the ul li:hover, meaning these styles only apply when the first level of list items are hovered over. This might seem weird now, but it'll hopefully make sense with the styles we make use of in a bit.
\n
Next up we just give the links some padding, which is highly preferable to giving the list item padding because then you can end up with a small hitbox for the actual link and a bunch of dead space around it. Only other thing to note here is the display block on the link which is required for the absolute positioning used later.
\nThe .sub-menu styles are pretty basic, just give it a position of absolute and then top: 100%, left: 0 and width: 100% to make it sit flush below the first level of list items. Finally throw on a transition to really allow the animation to shine, and fine tune the timing if you'd like.
\nStill on the .sub-menu we give it a max-height of 0 and overflow: hidden. What this does is it hides the element from our view, similar to display:none or visibility:hidden... but for our animation we have to do it this way!
\nLastly we give the sub menu list items and links a display of block and some colors because pretty.
\nThat's it, you've now got a simple dropdown navigation with a neat little animation! You can add a height of 0 to the ul .sub-menu as well for a slightly different effect, or play around with the transition time and effect. Much to the same effect, increasing the value of the max-height on the sub menu hover will have an effect on the time it takes the dropdowns to make it to the end.
\n\n","frontmatter":{"title":"CSS/HTML Animated Dropdown Navigation","author":{"id":"Zakary Hughes","github":null,"avatar":null},"date":"December 15, 2015","updated_date":null,"tags":["HTML","CSS","UI","CSS Animation"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png","srcSet":"/static/501f7fa9187224569eb6e51827f87931/69585/drop-anim-300x300.png 200w,\n/static/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}}},"fields":{"authorId":"Zakary Hughes","slug":"/engineering/csshtml-animated-dropdown-navigation/"}}},{"node":{"id":"124b521c-6628-59b5-8268-c5380c73f6a3","html":"As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS preprocessors. Additonally I'm going to try and avoid my personal bias and give a very generic description of CSS preprocessors rather than my preferred preprocessor.
\nFirst off what is a preprocessor? To give you a simple analogy think of speaking with someone, in a language you understand, who has a strong accent or is speaking in a different dialect. They're technically speaking the same language as you, but actually understanding what they're saying can be next to impossible.
\nIn the context of CSS, the \"normal\" or unaccented language would be CSS and the accented version would be the preprocessor! What this means in practice is that you're writing out expressions that resemble standard CSS, but with some very distinct differences with regards to its syntax.
\nAs with regular spoken language, there's not a whole lot we can do with something we can't understand. Luckily there are translators, and the same is true of preprocessors. The preprocessor code can be processed (there are a number of different ways to accomplish this), and then out pops an understandable standard-syntax CSS file ready to be used.
\nNow why would we want to write CSS in some weird way you might ask? An excellent question! Because our nonsense can be translated into regular CSS, this allows us to write some very robust and even dynamic CSS expressions.
\nWith preprocessors we've got a bundle of features now available to be used along with all the standard CSS rules we're accustomed to writing.
\nTo name a few features supported by preprocessors we've got: functions, mixins, math, variables, operators, conditionals, iteration and more to help you be more organized and write less overall.
\nVariables increase your maintainability drastically by making it so you only have to change a value in one place to affect it everywhere it was used. Imagine for example you want to add a Halloween theme to your site's colors.
\n.elementOne {\n background-color: orange;\n}\n.elementOne p {\n color: black;\n}\n.elementTwo {\n background-color: orange;\n}\nh3 {\n color: black;\n}\na:hover {\n color:orange;\n}Changing them back would require you to go and change each instance of black or orange. However; with variables you can do something like this.
\n$theme-color-1: orange;\n$theme-color-2: black;\n \n.elementOne {\n background-color: $theme-color-1;\n}\n.elementOne p {\n color: $theme-color-2;\n}\n.elementTwo {\n background-color: $theme-color-1;\n}\nh3 {\n color: $theme-color-2;\n}\na:hover {\n color: $theme-color-1;\n}Define the value of the variable in one place, and everywhere it gets used will be a reference to that value. Want to change all instances of black back to grey? Just change the variable definition and you're done.
\nAnother one of the biggest features would be functions. With these you can set up one well written function definition and then sit back and let it do all the heavy lifting for you!
\nFunctions combined with math, variables, iteration, and conditionals allows you to write some very dynamic style rules. Think of sprite sheets where the value of the background position is being incremented with each statement. Instead of writing out each one by hand, make a function that uses math and iteration to change the background position.
\nThat's a very simple example, but I've seen some truly impressive and complicated designs created with the use of functions!
\nOne of my favorite features of preprocessors are the new selectors. The parent reference (&) allows you to group your rules so that everything pertaining to a specific element can be grouped together nicely.
\n.someElement {\n some-rule: some-value;\n &:hover {\n color: some-color;\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement:hover {\n color: some-color;\n}The parent selector takes whatever follows it immediately and tacks it on to the parent that it is nested under. In this case hover will be appended to .someElement. Another great one to check out is the root reference!
\nCSS's default format is ugly as sin. An endless tide of barely indented rules, hopefully organized in some meaningful way. With CSS preprocessors nesting is an awesome feature that helps your rules become more intuitive/logically grouped and increases readability. Nesting can give your CSS a much more distinct visual hierarchy not unlike HTML.
\n.someElement {\n some-rule: some-value;\n .someOtherElement {\n some-rule: another-value\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement .someOtherElement {\n some-rule: another-value;\n}Full disclosure, your resulting CSS file will still likely look like someone dropped their bowl of Alphaghetti in their bowl of Alphabits and then threw that bowl at a wall. However; the file you actually work in will be considerably prettier, and that's all we care about.
\nSome people have beef with preprocessors because of over done selectors which are a result of going a little too hard with nesting. An easy way to avoid this is by limiting your nesting to 3 levels deep. Any further than that gets pretty ugly, but hey I'm not your supervisor... if you feel it's necessary then you do what you gotta do.
\nNow depending on how you choose to have your preprocessor code processed these features may or may not be more/less accessible. That being said I still feel they are worth mentioning.
\nAuto updating the page you're working on is a small perk but I remember being quite happy to find out I could just save my project and not have to spam F5 like my little sister trying to buy front row Justin Bieber tickets online. Just save and it will update your project automatically.
\nAnother one is vendor prefixes. There are a handful of ways to stop writing these things out by hand each time. Whether it's via mixins, functions or a built in feature of the processor itself you can avoid writing out these dreadfully monotonous prefixes for good.
\nAt first it might seem like a bunch of new stuff you have to learn and implement... but really if you already know CSS you're over halfway there. All you need to do is learn the specific syntax and familiarize yourself with the new features available to you with the preprocessor of your choice. It's a gentle learning curve with a surplus of benefits to integrate preprocessors into your workflow.
\nThis article is by no means all encompassing, but rather a sampler to create enough interest to try it out and learn more about preprocessors.
\nOn that note there are resources for comparing the preprocessors as well as trying them online. Each one has its own perks so try 'em out and find the one that fits your style!
\n","frontmatter":{"title":"The truth about CSS preprocessors and how they can help you","author":{"id":"Zakary Hughes","github":null,"avatar":null},"date":"November 17, 2015","updated_date":null,"tags":["CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png","srcSet":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}}},"fields":{"authorId":"Zakary Hughes","slug":"/engineering/the-truth-about-css-preprocessors-and-how-they-can-help-you/"}}}]},"authorYaml":{"id":"Zakary Hughes","bio":"Zak is our resident front end development and design intern. He studied web design and development at the Northern Alberta Institute of Technology. One of his passions, outside of work, is fitness. Legend has it that he once ate a two-bite brownie in a single bite.","github":null,"stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Zakary Hughes","__params":{"id":"zakary-hughes"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}