Author: William Imoh

While JavaScript is a fun and powerful language, it can be tricky and requires a proper understanding of its underlying principles to mitigate common errors. In this post, we shall be introducing you to the this keyword, its behaviour and the hard choices behind it. These will be detailed using appropriate examples to better drive home the point. What is this? Developers make the mistake of thinking that this refers to the “scope” of the function within which it's encountered. This isn’t true because whenever a function is invoked, it runs in a new execution context until its execution is completed. Each execution context usually references an object and the value of that object translates to the value of this. For us to properly understand what this is, we would first need to go over two ...

Last time on the Code Challenge #11 we solved problems in JavaScript using functions to manipulate objects. This week on the code challenge we shall delve further into the important basics with String Manipulation challenges. Strings in JavaScript are data types containing characters in single or double quotes. Manipulating Strings are an integral part of app development and is applied in numerous cases from modifying user input data to making UX and UI decisions on a page depending on specific user inputs. The Challenge In this challenge, we'll be solving five problems with possibly increased difficulty from first to last. The five problems are: Padded Number In this challenge, an array is provided and stored in a variable, create a function which evaluates the strings in the array by ad...

Tried the code challenge #11? In that, we delved into solving basic array problems using array methods such as map(), reduce(), filter() etc. You can find the awesome entries in the comment section of the post as well on Twitter using the hashtag #scotchchallenge. Also, you see some other fantastic submissions for the challenge if you check out the Scotch Slack Group as well as this Spectrum thread for the challenge. The Challenge Functional programming is a style in writing programs which utilizes functions and function evaluations to carry out computations. In this challenge, we were tasked with solving problems by manipulating given arrays in a base codepen. This challenge will be solved using native array methods to manipulate the given array. Methods are properties of a given data ty...

Previously on the code challenge #10, we delved into lazy loading images for performance, you can check out the challenge post and solution. This week on the code challenge, we'll be re-visiting the basics of JavaScript with Arrays. Arrays are like containers which hold various data types. While these containers are useful for holding various data types it is important to understand the manipulation of arrays to analyze and utilize withheld data. This is done with the use of specific functions which are actionable on Arrays called Methods. The Challenge This challenge is quite unique such that we will be using some really useful built-in array methods to manipulate the provided arrays. Three arrays are provided and each comes with 3 problem parts to be solved. In the first array: Part 1 -...

In a bid to lower the load times of a website, several techniques have been developed. One such technique is the lazy loading of images on the page. TL, DR As seen above, in this challenge we shall be lazy loading the images on the page. When the page is loaded, only the image placeholders which appear completely in the viewport are fetched. Hint: The code from this previous challenge could be helpful. The Challenge As a performance improvement technique, lazy loading involves the loading of only images whose placeholders come into view. Implement this lazy loading feature on the provided page containing quite funny animal memes. Placeholder images with smaller dimensions and size are stretched to fit the image size. A larger image is specified using the data-src attribute but isn...

What are developers without code editors? I can't seem to think of a clear answer to that. In recent times, code editors have evolved from traditional IDEs to smarter and faster tools. While some favor speed with a minimal user interface (Sublime Text), others choose extended functionality at the cost of lesser speed (Atom, WebStorm). Sublime Text is one such code editor that favors speed. It is still incredibly fast Following the recent release of the Sublime Text 3.1, we shall be discussing awesome features and improvements made in this version, from better support for high res devices to improved color schemes, ligatures, file system management and improved performance. Here are the top 8 features and/or improvements in version 3.1 Improved Text Rendering and Ligature Support While a...

Last week we put out a challenge to build out a scroll-spy navbar. Scroll-spy navbars are great and highlights the navbar menu when a specific element or portion of the page comes into view. Are you yet to take the challenge? Do so and showcase your submission in the comment section of the post or on Twitter using the hashtag #scotchchallenge to receive reviews. This challenge can be completed using any language, tool, technique or technology. In this post we shall be solving this challenge by implementing the scroll-spy on the provided base code using Vanilla JavaScript and in-view.js. This will be achieved in about 11 lines of code. In-view.js is a JavaScript utility which notifies us when a DOM element enters or exits a viewport. The Base Base code was provided for this challenge which ...