clamp() Is The Answer To Our Fluid Typography Woes

As designers and developers, it’s easy to get caught up in the shiny and flashy aspects of building websites and applications. We pour over color palettes, search for the perfect imagery, and spend hours fine-tuning animations. But let’s not forget about the one element that ties everything together:

Next.js + Stripe Checkout Integration How To

Stripe integration isn’t exactly an everyday task kind of integration. It’s one of those things where when it works, it works and you just leave it until something needs to be done to it. Every now and then I do a Stripe checkout integration. Every time, I find

Monolithic vs Microservices: Pros, Cons, and what should you use?

New-age devs love their microservices but the veterans aren’t always convinced. It’s not because they’re just being old and stubborn — but rather, there are perks about monolithic that not everyone is willing to accept. But it doesn’t mean that monoliths are the best architecture for your

Angular Q&A: How does View Encapsulation work with Shadow DOM and Emulated?

In Angular, view encapsulation determines how styles defined in a component are applied to the component's template. By default, Angular uses a strategy called "Emulated" view encapsulation, which applies the styles defined in a component to the component's template, but also allows the styles to be applied to elements in

Angular Q&A: How do you style a host element?

In Angular, you can use the :host pseudo-class selector to target the host element of a component. This allows you to apply styles directly to the host element, rather than to its children. To style a host element in Angular, you can use the :host pseudo-class selector in the component's

Angular Q&A: How do you Scope Styles in Components?

In Angular, you can use the styleUrls property of the @Component decorator to specify the styles that should be applied to a component. This allows you to scope the styles to the component, so that they only apply to the component and its child components, and do not affect the

Angular Q&A: How do you pass state to dumb components via @Input?

In Angular, you can use the @Input decorator to pass state from a parent component to a "dumb" or "presentational" child component. The @Input decorator binds a property of the child component to a value that is passed in from the parent. To pass state to a dumb component via

Angular Q&A: What is a Dumb Component? And how do you create one?

In Angular, a "dumb" component is a component that is focused solely on presenting content, and does not have any logic or behavior of its own. Dumb components, also known as "presentational" or "stateless" components, are often used to break up a user interface into smaller, reusable pieces. To create

Angular Q&A: How do Type Definitions with Interfaces work?

In Angular, you can use interfaces to define the structure of objects and classes. This can be useful for defining the shape of data that your components will work with, and for ensuring that the data has the correct properties and values. To use interfaces in Angular, you can create

Angular Q&A: How do you use the NgOnInit Lifecycle Hook?

The ngOnInit lifecycle hook in Angular allows you to perform initialization logic when a component is created. This hook is called by Angular after the component's constructor and after Angular has initialized all of the component's data-bound properties. To use the ngOnInit hook, you can implement the OnInit interface on

Angular Q&A: How do you create a Smart Container Component?

To create a "smart" container component in Angular, you can use the ng generate component command and include the --smart flag. This will generate a component that is designed to manage data and behavior, rather than just presentational content. For example, to create a component named ProductListContainer you can use

Angular Q&A: How do you create a Child Feature Module?

To create a child feature module in Angular, you can use the ng generate module command and include the --route flag to generate a routing module for the new feature module. For example, to create a child feature module named ChildModule within an existing module named ParentModule, you can use

Angular Q&A: How do Template Ref Variables work?

In Angular, a template reference variable is a reference to a DOM element or directive within a template. It can be used to refer to the element or directive from within the template, and can be used to access the properties and methods of that element or directive. To use

Angular Q&A: How does Event Binding Syntax work?

In Angular, event binding is a way to bind the Angular events to the DOM elements. It is often used to attach a specific event to an HTML element in the template. Here is an example of event binding in Angular: Click Me! In this example, the click event of

Angular Q&A: How does property binding syntax work?

In Angular, property binding is a way to set the value of a property of a DOM element. It is often used to set the value of a property that is bound to an HTML element in the template. Here is an example of property binding in Angular:

In this

Angular Q&A: How do interpolation and expressions work in Angular?

Interpolation in Angular allows you to display a component property in the view (HTML) by wrapping it in double curly braces, such as {{ propertyName }}. This is a convenient way to display a property on the page without having to use a property binding. Expressions in Angular are JavaScript-like code snippets

Essential top 5 design patterns that will make your code suck less

Here's a quick summary and 5 common design patterns in software development that will make your code suck less and reduce the number of pesky bugs. 1. Singleton: Ensures that a class has only one instance and provides a global point of access to it. 2. Factory: Creates objects without

Firebase is Overrated. 5 Alternatives that are currently killing it.

Firebase has been a dominant player in the world of mobile and web app development, but some developers are starting to question whether it’s really all it’s cracked up to be. If you’re one of them, you’re in luck! I’ve scoured the landscape of app

How to disable text selection in HTML with CSS

If you're just here for the code snippet, here is the quick rundown of it. * set user-select to none in your CSS. What is user-select in CSS? It's a CSS property that lets you specify if a text element can be selected. For example, if you hold your mouse over

WordPress vs. Ghost - The 2023 Ultimate Showdown

In human years, WordPress has already graduated high school and probably working a part-time job while taking college classes. In tech years, WordPress is part of a suite of legacy technologies that were new and shiny when it first came out - but over time, the prettiness has waned significantly.

What you need to kickstart THAT idea and make it a reality

You want to make something, but you’re stuck. You either don’t know what to make, or you’re just not sure how to make it. I know the feeling. What you need is a framework on how to get started — to get the motions started and make progress

🧐 Spiders & Bots love SSR

Bots and crawlers have a thing against single page apps. This is where SSR comes in and why.

Google Released a New Programming Language called Carbon — Now What?

Is it here to stay? Will it take hold? In a myriad of programming languages, do we really need another one? According to Google, the answer is yes. Officially unveiled to the world a week ago by Chandler Carruth at CppNorth, Carbon has got the programming communities talking. But what

12 Dev Tools To Upgrade Your Productivity

Because who doesn’t want to work more efficiently? For software developers and engineers, the number of hours worked doesn’t always correlate to productivity. Instead, it can point to inefficiencies — or being stuck on a bug for an unnecessarily long time. The ability to code quickly and efficiently can

🚧 There's more to JavaScript than just console.log()

As a frontend dev, console.log() is necessary. But there's more to debugging than just littering it everywhere. The thing about console.log() is that it's more than just a utility tool that helps us debug. It is also something that you can put inside your error handling process to

💡 We need to talk about React

Over the past few weeks, I've been immersing myself in React - specifically, Next.js. While React can be fun, the differences between function and class-based component construction can throw off newbies. It also doesn't help that tutorials mix and match them without much context or explanation. Personally, I've come

Another Weekend, Another Feature Deployment

Another weekend, another feature is released — well, that’s the current game plan and so far. The thing about building apps is that we often come up with grand plans, only to have them fall short because we ran out of time. This is where consistency comes in. There’s

How to create rainbow gradient text colors in CSS

Rainbow gradients are everywhere. They're cool and fun looking. The text is also fully readable by bots. Here are some cool examples in the wild: Vercel - cloud platform But how is it done?   The magic lies in linear-gradient, -webkit-background-clip and -webkit-text-fill-color Here's the quick code snippet for it 👇 h1{

CSR Module Loading in Next.js — because sometimes you just need it to work like React

Don’t get me wrong, Next.js is great. I love it. It works. I don’t need to deal with routing because it’s already baked into the framework. You can write APIs and the inner workings won’t be exposed on the client side. It’s also React

5 Ways to Structure Your React App Files

React is great. It gives us a ton of freedom to do what we need to do. However, with great freedom comes the increased potential for a project that’s structurally mangled. When I first started using React, all the tutorials were pretty basic with file structures that were linear

12 Free University Courses That Will Teach You How To Code

Or pay a fraction of the price if you want to certificate Let’s get real — University education can get expensive. Or perhaps you’re contemplating switching careers but don’t want to spend 3 years back in school. You don’t need a degree to get into programming. The

I made a weekend app - About Mushroom Cow

The thing about being a dev is that we tend to horde domain names. It's easy to come up with grand ideas and convince ourselves that we are going to commit to it once we have the domain name in our possession. I'm one of these people. After several years

Dev Freebies and Ways To Upskill

Another week, another newsletter 💌 This week has been pretty intense for me - from playing with Next.js SSR and learning how to use Chakra UI. Here's what I learned from the process of learning something new: * it's always hardest at the start * what you know doesn't become real until

Productivity is in the tools you use

As I get back into the groove of weekend projects, I find myself optimizing my workflow. We often associate productivity with our abilities to stay focused. But as software developers and engineers, our tools are as equally important - or more importantly, the extensions and plugins we utilize in our

Deno is the new Node.js — well, sort of…

Why did the guy that made Node.js make a new Node.js? It’s been three years since Ryan Dahl — the same guy behind Node.js — hatched Deno into the world wide web. This opensource and V8 runtime powered serverside has over 80k stars on GitHub, 42k followers on

Next.js is the next best thing — but what’s the catch?

Looking into another React extension Next.js is a popular open-source JavaScript framework for developing server-side rendered React applications. It’s simple, lightweight, and efficient, making it an ideal choice for small- to medium-sized projects. In a nutshell, the framework enables you to get up and running with React quickly

Useful random finds, curated for you

This isn't the first time I've tried to do a newsletter. In part, I've been quite bad with sending out newsletters regularly. Recently, I've decided to commit myself to 52 weeks of newsletter writing and go from there. If you still remember me (and subscribing to me), thank you. If

How To Use filter, find, map, reduce, every, and some in JavaScript

Not everything is an object. When it comes to functional programming, it’s more to do with the processes that get you from point A to point B than how data and groups of business logic are structured. JavaScript is a language that’s prone to imperative patterns because of

Building zipply.io – Simple Resume Maker

On a Wednesday evening, not too long ago, I decided that it was time to get a different kind of day job. But I had a problem – there was a major gap in my resume for the kind of work I want. Over the past 4-ish years, I’ve been

JavaScript Fundamentals: Fetch

What is fetch()? how did fetch() come about? why is fetch() important?

JavaScript Fundamentals: Promises

What is a promise? What are some examples of promises? and what should you be aware of when using promises?

JavaScript Fundamentals: JSON

What is JSON? How does it work? what are some JSON methods in JavaScript?

JavaScript Fundamentals: Prototypical Inheritance

What is a prototype? How does prototypical inheritance works? What are some examples of prototypes in JavaScript?

JavaScript Fundamentals: Advanced Classes

What are class methods? how do you use class methods? what are some common default class methods you should know about.

JavaScript Fundamentals: Asynchronous Logic

What is asynchronous logic in JavaScript? How does asynchronous logic work? What are the ways of writing asynchronous logic in JavaScript?

JavaScript Fundamentals: Callbacks

What is a callback? How do you write callbacks? What are some examples of callbacks?

JavaScript Fundamentals: Classes

What are classes in JavaScript? how do you create one? and how do you set properties of class methods?

JavaScript Fundamentals: Reduce

What is reduce? and how do you use reduce?

JavaScript Fundamentals: Arrays of Objects

What are arrays of objects? how do you use arrays of objects? and ways to make arrays of objects.

JavaScript Fundamentals: Objects

What is an object? how do you create an object? and what's the difference between the different object creation methods

JavaScript Fundamentals: Nullish Coalescing

What is nullish coalescing? Where is it used? why do we use it? and how is it different from ||?

JavaScript Fundamentals: Optional Chaining

What is optional chaining? why is optional chaining important? and how do we implement error handling for optional chaining?

JavaScript Fundamentals: Destructuring

What is destructuring? how do we use destructuring? and why is destructuring important for clean code?

JavaScript Fundamentals: Arrow Functions

What is an arrow function? How do you use arrow functions? what are the features of an arrow function?

JavaScript Fundamentals: Functions

What is a function? how do you define a function? and how can you use a function?

JavaScript Fundamentals: Arrays

The fundamentals of JavaScript arrays - what is an array? what are the types of arrays? and what are the JavaScript array methods?

Don't Let Dev Work Destroy Your Soul

What to do when you start questioning your career as a dev

How To Get A Dev Job In A Recession

Lost your dev job? Struggling to get a dev job? Here are some things that you can do.

What are the differences between functions and classes in React?

React class vs. functions. What's the big deal? What's the big difference?

How To Stand Out As A Self Taught Developer

Everyone starts somewhere, but sometimes it seems like the market is saturated with others just like you. The 2–3 years of relevant experience for an entry role is no longer an anomaly. Rather it is an industry standard, especially when it comes to technology-related fields. It’s our current

#004: The Week In Stories —AI-driven fruit growing to SaaS bridge

This week of {Tech & Dev} includes a varied list of articles and tech finds across the web. From AI-driven fruit growing (mmmmmmm….yummier fruit, that is) to things you didn’t know you could do in Chrome — I hope you enjoy my selection for this week’s stories. 1. Add

Add CSV import to your Node.js app using UseCSV

CSV is convenient. The likes of Excel, Google Docs, spreadsheet export functions, and reporting applications all support CSV in some capacity. CSV works well with large data sets and the major perk is that it can easily be converted to other formats such as XML or JSON. This is where

#003: The Week In Stories — React, Supabase, Next.js, and tech things

Without further ado, let’s dive into this week’s stories. Top 10 JavaScript CSV Parsers CSV — love them or hate them, they are part of many businesses and how they operate. These comma-separated values come in the form of a text file with a specific format that allows for

How to fix: "TypeError: Incorrect number of arguments or invalid argument type"

TypeError: Incorrect number of arguments or invalid argument type. This error is thrown when you try to call a function with the wrong number of arguments, or when you try to pass an invalid argument type to a function. For example, let's say you have a function that takes two

How to fix: "IndexOutOfBoundsException: Invalid index"

IndexOutOfBoundsException: Invalid index is thrown when an invalid index is used. This can happen when the array index is out of range or when the array is not allocated. The following examples show how to create and use an array. The following example creates an array of five elements and

How to fix: "NullReferenceException: Object reference not set to an instance of an object"

What is NullReferenceException? An NullReferenceException is a type of exception that occurs when you try to use a null reference in your code. This can happen in a number of ways, but the most common is when you try to call a method or access a property on a null

How to fix: "RangeError: Maximum call stack size exceeded"

A "RangeError: Maximum call stack size exceeded" is an error that occurs when a function or operation tries to execute too many nested or recursive calls. This can happen when a function calls itself repeatedly without any way to exit, which can cause the call stack to overflow and exceed

How to fix: "DOMException: HIERARCHY_REQUEST_ERR"

DOMException: HIERARCHY_REQUEST_ERR is an error that can occur when trying to access or modify a node in the DOM that doesn't exist. This error is thrown when the browser can't find the element that's being accessed or modified. The HIERARCHY_REQUEST_ERR error can be caused by a

How to work with timezones in PHP

Most programming languages have a library or a built-in feature that helps developers work with timezones. PHP is no exception. The timezone functionality in PHP is comprehensive and easy to use once you understand the basics. In this article, we will explore the basics of using PHP timezones and provide

How to fix: "TypeError: wrong type"

One of the most common errors in JavaScript is the dreaded "TypeError: wrong type" error. This error can be caused by a number of things, but luckily, there are a few ways to fix it. In this article, we'll explore how to fix "TypeError: wrong type" errors in JavaScript, and

How to fix: "ReferenceError: undeclared identifier"

If you're seeing a ReferenceError: undeclared identifier message when trying to run a piece of JavaScript code, it means that the code is trying to use a variable or function that isn't defined. This can be caused by a spelling mistake, or by accidentally using a variable that's been declared

How to fix: "SyntaxError: Unexpected token" in JavaScript

JavaScript is a programming language that is known for its flexibility and ease of use. It is a popular language for web development and is used by major websites and online services. Despite its popularity and ease of use, JavaScript can sometimes be challenging to work with. One such issue

How to fix: "Object doesn't support this action"

It's the error message that haunts developers everywhere. You've written some code, hit run, and...Object doesn't support this action. What do you do now? Well, first let's take a look at what might be causing this error. There are a few different things that could be causing this error,

How to fix: "Lost reference to element" in JavaScript

In HTML, when you use an element, you must include the document's  element in the opening tag. If you don't, you get an error message such as "Lost reference to element". One way to fix this error is to use the history.pushState() method. This method lets you add elements

What is array unshift() in Javascript?

The Array.prototype.unshift() method inserts one or more elements into the beginning of an array, and returns the new length of the array. arr.unshift(element1, element2, ..., elementN) The unshift() method inserts one or more elements into the beginning of an array, and returns the new length of the

How to deep copy in JavaScript

In JavaScript, there are two ways to make a copy of an object: a shallow copy and a deep copy. A shallow copy copies the object's properties and values, while a deep copy copies the object's properties and values, as well as its child objects. This article will discuss how

What are JavaScript short-circuiting operators?

The JavaScript language has a wide range of operators. One of the lesser-used operators is the short-circuiting operators. This operator is a binary operator that returns the first operand if it is a truthy value, and the second operand if it is a falsy value. The short-circuiting operators are && for

What are rest parameters and rest variables in JavaScript?

Rest Parameters allow you to gather an ordered list of arguments from a function call into a single variable. The variable can be an array, or an object, depending on how you declare it. The syntax for using Rest Parameters is as follows: function(...params) params is an array of

What is the endsWith() method in JavaScript?

The JavaScript endsWith() method is a string method that tests if a string ends with a specific substring. The endsWith() method was introduced in ECMAScript 5.1 and is defined in the String.prototype object. The endsWith() method accepts two arguments: the string to test and the substring to search

What is Function.apply in JavaScript?

function.apply is a method on the Function prototype that allows you to call a function with a given set of arguments, rather than the arguments that are naturally passed to it. This is useful in a few cases: When you want to call a function with a set of

What is the nullish coalescing operator (??) in JavaScript?

The nullish coalescing operator ( ?? ) was introduced in ECMAScript 6 as a way to handle the coalescing of null and undefined values. It is a binary operator that takes two operands: the left operand is the expression to be evaluated, and the right operand is the default value to be used

What is DataView.getFloat64() in JavaScript?

The DataView.getFloat64() function returns the value of the 64-bit floating-point number stored at the specified position in a DataView object. This function was added to the DataView object in the ECMAScript 2015 (ES6) standard. It replaces the old getFloat32() and getFloat64() functions, which returned the value of the 32-bit

How to get the frequency of smallest array value in JavaScript

Are you looking for a way to find the frequency of the smallest array value in JavaScript? If so, you've come to the right place. In this article, we'll show you how to do just that. We'll also provide some history and code samples to help you get started. So,

How to draw rectangles in HTML Canvas

Rectangles are some of the simplest shapes that can be drawn on an HTML canvas. In this article, we'll take a look at how to draw rectangles in HTML canvas, with a brief history and some code samples. Rectangles have been used in art and design for centuries. They are

What is getHours in Javascript? and how do you use it?

It would be safe to say that Javascript has come a long way in terms of the tools and libraries that are available for developers to use. One of the newer and more popular additions to the Javascript language is the getHours function. This function is used to get the

What is Function.toString() in JavaScript?

Computer programming is all about making things happen. When you write a program, you're giving instructions to a machine, telling it what to do. In order to communicate with the machine, you need to use the right language. In JavaScript, the language you use to create programs is called JavaScript.

What are destructuring assignments in JavaScript?

Destructuring assignments provide a concise way to extract data from arrays or objects. The general form of a destructuring assignment is var {foo, bar} = {foo: "hello", bar: "world"} This example extracts the foo and bar values from the {foo, bar} object. Destructuring assignments can also be used on arrays. For

How to use the parseInt() function in JavaScript

The parseInt() function is one of the most commonly used functions in JavaScript. It is used to convert a string into a number. The function can take a number of different parameters, but the most common is the string to be converted and the base of the number. The basic

What is the Array map() function in JavaScript?

The Array map() function is a built-in function in JavaScript that transforms input arrays into output arrays. It takes a function as an input and applies it to every element in the input array, then returns the output array. The map() function was added in ES5, and is part of

What is the JavaScript void(0)?

You've probably seen the JavaScript void(0) before. But, what is it? And, what does it do? First, let's take a look at the history of void(0). JavaScript was created in 1995 by Netscape. And, in the early days of JavaScript, void(0) was used to indicate that a

What is an uncaught TypeError in JavaScript?

TypeError is an error that is thrown when an expression or statement is evaluated, and the type of the expression or statement is incompatible with the type that is expected. This type of error can occur in JavaScript when you try to use a value where a different type is

What are the differences between first-class vs higher-order functions in JavaScript?

It's easy to see that functions are an important part of JavaScript. In fact, functions are so important that they have their own keyword: function. Functions are objects that take one or more arguments. When a function is called, the JavaScript engine creates a new execution context for that function.

What is array keys() in JavaScript?

In JavaScript, the keys() method returns an array of the keys used in a given object. This can be helpful for debugging or for understanding how an object is structured. The keys() method has been available in JavaScript since at least 1995, when it was first introduced in Netscape Navigator

What is Math.fround() in JavaScript?

Math.fround is a function in JavaScript that rounds a number to the nearest integer. The function takes a single argument, the number to be rounded. It returns the rounded number as its result. The Math.fround function was introduced in the ECMAScript 5th edition specification. It is based on

What is DataView.setInt8() in JavaScript?

setInt8() is a method of the DataView object in JavaScript that sets the value of an 8-bit unsigned integer. DataView is used to view and edit data in a binary format. The setInt8() method takes two arguments: * the value to set * and the position of the value in the data

What is Math.acosh() method in JavaScript?

Math.acosh() is a JavaScript method that calculates the inverse hyperbolic cosine of a number. It was added to the Math object in ECMAScript 5. The Math.acosh() method takes a single number argument and returns the inverse hyperbolic cosine of that number. It can be used to calculate the

How to convert negative numbers to positive numbers in JavaScript using abs()

I'm sure you are all familiar with the absolute value function in mathematics. But what is it, and what does it do? The absolute value of a number is the magnitude of that number, ignoring any sign. For example, the absolute value of 5 is 5, and the absolute value

What is the regex.test() method in JavaScript?

The regex.test() method is a regular expression (RegEx) testing method in JavaScript that allows developers to test whether a given RegEx pattern matches a given string. The regex.test() method was first implemented in the RegEx engine developed by Henry Spencer in the early 1980s. It has been part

What is the "Function statement requires a name" syntax error?

If you're like most developers, at some point you'll probably encounter a "function statement requires a name" syntax error. This error is thrown by the compiler when you try to create a function without giving it a name. Let's take a look at an example of this error in action:

What is Web Share API in JavaScript?

Share API (technically WebShare API) is a JavaScript-based API that enables web-based applications to share files across different domains. Introduced in Chrome version 37, it was created to simplify file-sharing between browsers, making it easier for users to collaborate on content. The API is available as part of the FileSystem

How getFullYear() function works in JavaScript

The getFullYear() function is a native JavaScript function that returns the year represented by the specified date object. This function was released in 2002 and was initially used in Internet Explorer 5. The date object can be either a Date object or a String object that represents a date. If

What is the Ajax callback function?

When you make an Ajax call, you may want to do something when the response is received. This is where the Ajax callback function comes in. The callback function is a function that is executed when the Ajax call is completed. The callback function is passed two parameters: the response

What is Array destructuring in JavaScript?

Destructuring in JavaScript is a technique that lets you extract data from arrays or objects into distinct variables. You can use destructuring to extract a single value, multiple values, or all the values in an array. Destructuring is available in most modern programming languages. In JavaScript, destructuring is supported by

What are variables in JavaScript?

A variable is a named storage location in computer memory that can store a value. In JavaScript, variables are declared using the var keyword. var myInteger = 5; In the example above, myInteger is the name of the variable and 5 is the value that is stored in the variable. You

What is native lazy loading in browsers?

What is native lazy loading? Lazy loading is a technique that delays the loading of portions of a web page until they are needed. This is done by inserting a loading indicator until the content is loaded. Native lazy loading is a technique that delays the loading of assets until

What are promises in JavaScript?

Promises are one of the most important features of JavaScript, and they're used all over the place in modern applications. But what are they, exactly? Essentially, a promise is an object that represents the result of an asynchronous operation. It's like a hypothetical result that you don't know the actual

What is Object.defineProperty() in Javascript?

Object.defineProperty() is a method that allows you to define your own properties on an object. It takes three arguments: the object to modify, the name of the property, and a function to define the property's value. Here's an example: let myObj = {}; Object.defineProperty(myObj, "length", { value: function() { return this.

What is NPX?

NPX is a powerful package management utility for Node.js that allows you to install and manage your npm packages easily. NPX uses the package.json file to determine the dependencies of your project and installs them automatically. You can install NPX easily by running the following command in your

How to insert an element in a specific index in JavaScript Array

There are a few ways to insert an element in a specific index in a JavaScript Array. You can use the Array.splice() method, or the Array.push() method. The Array.splice() method is used to insert or delete elements from an Array. You can also use the Array.splice(

What is toUTCString() in JavaScript?

JavaScript has a number of built-in date and time functions that allow you to work with dates and times in your scripts. One of these functions is to`UTCString()`, which converts a JavaScript Date object to a UTC string. The toUTCString() function takes a Date object as its parameter and

How to check browser tab visibility using Page Visibility API

A browser tab can be in one of three states: visible, hidden, or inactive. A tab is considered hidden when it is not in the foreground but it is still open. A tab is considered inactive when it is not visible and it is not the foreground tab. The Page

How to use the Dir Function in JavaScript's Async Module

dir is a function in JavaScript's Async Module. The dir function is used to search for a file. The first parameter is the path to the file. The second parameter is the options. The third parameter is the callback. The path parameter is the path to the file. The options

How to keep your screen awake using JavaScript

Are you tired of your screen going to sleep while you're working on a project? Well, never fear, because this article is here to show you how to keep your screen awake using JavaScript. There are a few different ways to keep your screen awake using JavaScript. One way is

What is Object.values in JavaScript?

Object.values() is a method that returns an array of all the values of the enumerable properties of an object. This method is helpful for getting an overview of all the data contained in an object. It can be used to filter or manipulate data before being outputted to a

#002: The Week In Stories — Metaverse, Deno, and WebHooks

Hi all! Welcome to another edition of {Tech & Dev} Newsletter. This week is all about the metaverse, remote work, and tech things with movies to watch list (if you haven’t seen them) at the end. Without further ado, let’s dive into this week’s stories. Metaverse jobs are

#001: The Week In Stories - Tech Salaries, Freebies, and Dev Things

At the beginning of this year, I made a goal for myself to be more consistent with creating things — whether it be through my writing or making mini-apps on the side to learn new things and keep up with the tech. The point is that I make and keep making

21 ways to increase your productivity as a developer

It’s easy to fall into a habit of being comfortable. When it comes to coding, productivity can be improved in two ways — getting good at the language you’re working with or upgrading your environment and processes incrementally.

Learn React: Variables, Conditionals and Event Listeners Inside A Component

-------------------------------------------------------------------------------- Previously on Learn React from Scratch Series: Learn React: Your First React Component ExplainedPreviously on Learn React from Scratch Series: Learn React: Advanced JSX and Everything Else You Need To KnowPreviously on Learn React from Scratch Series: Learn React: Quick Introduction to JSXJSX stands for JavaScript Extension. It is

Learn React: Your First React Component Explained

-------------------------------------------------------------------------------- Previously on Learn React from Scratch Series: Learn React: Advanced JSX and Everything Else You Need To KnowPreviously on Learn React from Scratch Series: Learn React: Quick Introduction to JSXJSX stands for JavaScript Extension. It is not JavaScript, per se, but an extension of it. This means that if

Learn React: Advanced JSX and Everything Else You Need To Know

-------------------------------------------------------------------------------- Previously on Learn React from Scratch Series: Learn React: Quick Introduction to JSXJSX stands for JavaScript Extension. It is not JavaScript, per se, but an extension of it. This means that if you try and run JSX code in the browser, it won’t work. You’d need a

Learn React: Quick Introduction to JSX

JSX stands for JavaScript Extension. It is not JavaScript, per se, but an extension of it. This means that if you try and run JSX code in the browser, it won't work. You'd need a compiler to compile the JSX code into semantic JavaScript before anything can work. JSX was

How To Write Commit Messages That Won’t Tilt Your Teammates

We’ve all used git in some form or another. The code versioning system is an industry staple. With over 40 million users worldwide and 190 million repositories on GitHub, git is here to stay. While the concept of git is easy - pull your code, do whatever, save, add,

Bad JavaScript Practices That’s Letting Your Code Down

We’ve all done it — but the question is, are you still coding it? JavaScript is easy — especially if you’ve already got programming knowledge and experience through another language. Many newbies and veteran developers encounter JavaScript out of necessity. A good portion of the Internet runs on some form

7 VS Code shorthand to code faster

Shortcuts can make or break a developer’s productivity. It also turns out that Visual Studio Code comes with a pre-baked shorthand that lets you print out HTML code templates. This feature is mostly unknown to many beginner (and even veteran) users of VS Code. This is partly because we

How old is too old to learn code?

Maybe it’s subjective filtering but everyone seems to be coding nowadays. You’ve got kids learning to code in school and the older folks celebrating their wins on Twitter and LinkedIn. There are learn-to-code books for babies, tweens, teens, adult learners, hobbyists, and tinkerers. There are games, learning guides,

Not All Developers Are Basement Dwellers

Once upon a time, about a decade or two ago, anyone that did ‘things’ with computers was labeled as nerds. They were the folks that spent a good majority of their time hidden away from the public eye. No one really knew what these ‘computer guys’ were up to — nor

What You Need Before Learning React

The Internet is a lot of things. It’s a teacher. It’s a resource. It’s a seemingly infinite and unstructured pool of knowledge and information. It is also the space where React-based apps exist and thrives. The little frontend library has taken the Internet by storm and is

Do Dev Careers Really Die At 35?

Where are all the elderly developers? Where did they all go? It’s not like they just disappeared into another realm…or did they? How did we arrive at these questions? Why does it matter? and do dev careers really start to die when you turn 35?

Thinking In React: A Design First Approach

How React is making UI the center-piece of frontend development For a non-designer, thinking in visual components can be a strange process — especially if you’re new to React, or are just moving into frontend development. Our main modes of operations tend to sit at the logical layer, where business

Is React Really That Great?

Digging into the library that’s taking over the frontend development scene As I start my 8-week #buildinpublic challenge [https://twitter.com/dottedSquirrel/status/1419804203002728453], I find myself back on the React gravy train. React as a library has exploded and taken over the Internet, especially in the frontend space.

React Components, Classes & Lifecycle Methods Simplified

Learning React isn’t hard — but sometimes you still need that reference sheet training wheel to help you along until you get the hang of balancing yourself on the code. Here is a quick summary/notes on React components and classes. In short — basically, everything you sort of need to

7 Ways To Make Your JavaScript Better

It’s easy to learn how to code — especially in JavaScript. Once you’ve got things running, we tend not to look back and see how we can make things better. We move forward, onwards, and upwards — to the next project, ticket, and feature release. We code tirelessly, recycling what

What is Docker? - Explained Simply

A quick rundown guide without the lingo and frills Docker. It’s a little blue whale with a container sitting on its back. We hear about it from various places but it’s usually just left to the DevOps guy to deal with. Or perhaps you’ve tried to pick

10 Ways To Undo Your GIT Mistakes

We’ve all done it — deleted a file we shouldn’t have, merged things that aren’t supposed to be on the main branch, accidentally pushed up sensitive information, committing to the wrong branch… GIT is fantastic when things go as planned — but not so much when it comes to

How to bring up the terminal in Visual Studio Code

Visual Studio Code comes with an in-built command-line tool that you can use. To bring it up, use the following key command/keyboard shortcut: CTRL + SHIFT + ~ This will bring up the terminal in your Visual Studio Code as per the example screenshot below: From here, you can run whatever command

How To Create A New Empty File In Windows cmd Command Line

In a lot of MacOS and Linux-based tutorials, we see people create empty files using touch command. For example, they just write: touch index.js And it creates a new file. However, there is no touch in Windows command line. The only alternative we have is a long-form command called

7 Money Making Side Projects You Can Do As A Developer

So, you’ve got a day job. But you’re starting to feel drained from it. Or perhaps you just feel stuck in your code — unable to learn anything new or feel that spark that you once had. You also need/want a bit of cash on the side for

How To Get Out Of Being A Junior Developer

We’ve all encountered dev memes at some point. The point of memes is to reflect on reality in some form in a humorous manner. Maybe I’m just overthinking it. Maybe I’ve reached a particular point in my coding career to not find them funny anymore. But there’

How To Agile Without Breaking Your Code

The art of balancing buzzwords with reality ‘Agile development’ are two words that can strike two polarizing feelings in the hearts of developers. In one corner, it’s a sinking feeling of hell no’s with a bubbling sense of internal panic. In the other corner, a group of rogue

How To Get Experience As A Developer When You Have None

If you want to beat the catch 22, draft up your dream resume if you’re stuck for experience. It can make a better roadmap than you’d ever imagine. You need a job. So you sit down, fingers poised on your keyboard, ready to type — but nothing comes out.

How Do You Fix A Legacy JavaScript Monolith?

5 steps to unravel messy, spaghetti and bolognese saucy code The words ‘legacy code’ often conjures up the image of some ancient relic from a bygone time where software development lived in water plans, clunky Java-based interfaces, and strange creations that whispers I am old and riddled with security vulnerabilities.

Trends Come And Go, But JavaScript Is Forever

Oh, JavaScript —that child of the 90s that somehow made it from the shadows of more established programming languages like Java and the C-family — you’ve come far and flourished to a point where there’s no denial that you’re here to stay. You’re like the Harvard dropouts

7 Rules Of Writing Good Code

Good code — it’s a debatable mystery that plagues developers from all programming languages. It is often highly opinionated, vague, and at times conflicting. We all know we should write good code, but what exactly does it mean? Some say to write as little code as possible. Others say to

Every Python Tuple Method Explained Simply (plus bonus tidbits)

A tuple in Python is a data structure that is similar to a list but it is unchangeable. This means that it is immutable by design. Lists, in contrast, are highly mutable. If you try and make changes to an immutable object, it will throw an error. Here is a

Every Python List Method Explained Simply

A list is a data type in Python that lets you store linear data. Each item is stored with a numerical index attached to it so that it becomes easily accessible later. A Python list is defined as comma-separated items inside a pair of (). Here's a quick recap: * written with

Every Python Dictionary Method Explained Simply

Here is a quick recap of how dictionaries work. * written with {} * changeable, unordered, indexed * comes with key-pair values & no duplicates * looks something like this: pythondictionary = {1: 'python', 2: 'data science', 'third': 'JavaScript'} Here is every Python Dictionary method available. Combining dictionaries To combine two dictionaries, use a leading ** and then

How Python Replaced Java As The Starter Language

From Bootcamps to College Classes — Python is everywhere Back in the early 2010s, Java was the ‘in vogue’ thing that everyone learned as their first starter programming language. If not, then it’s one of the C families. Somewhere during the 10 years in between, Python took over and became

Using format() in Python with placeholder values

In Python, you can use {} as placeholders for strings and use format() to fill in the placeholder with string literals. For example: print("You have {} apples.".format(5)) # this will print: # You have 5 apples. The format() method lets you list out the strings you want to place in relation

Python Collections & Specialized Collection Data Types

Crash Course Into Python Part 2 [Click here for Part 1] [https://www.dottedsquirrel.com/python-datatypes/] What Are Collections In Python? Collections in Python are basically container data types — namely, lists, tuples, sets, and dictionaries. They have different characteristics based on usage. Here is a quick summary of what each

Everything You Need To Know About Python Data Types & Variables

Starting with the Basics In a nutshell, a variable is a memory location where you can store a value. This value may or may not change in the future. In Python, the declare a variable, you just have to assign a variable to it. For example: x = 5 x is

What Is SMACSS and How Does It Work?

> This piece is part of a Learn HTML & CSS series. Check out part 4 here: What is OOCSS and How OCSS Works [https://matcha.fyi/ocss-explained/] SMACSS Pronounced “smacks”, SMACSS stands for Scalable and Modular Architecture for CSS. The idea behind SMACSS is to break your CSS down into five

What is OOCSS and How OCSS Works

> This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSS [https://www.dottedsquirrel.com/css-introduction/] OOCSS OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and patterns, meaning

HTML, The Cascade, and Ways To Think In CSS

> This piece is part of a Learn HTML & CSS series. Check out part 2 here: Parts Of An HTML Document And How It Works With CSS [https://www.dottedsquirrel.com/html-explained-2/] I started learning how to code back in the early 2000s. For context on how long ago that was

Parts Of An HTML Document And How It Works With CSS

> This piece is part of a Learn HTML & CSS series. Check out part 1 here - What is a markup language? HTML Reference Cheatsheet. [https://www.dottedsquirrel.com/html-explained/] At its basic, HTML has three parts to it: 1. the document type declaration -- this tells the browser what kind

What is a markup language? HTML Reference Cheatsheet.

A markup language is a system of annotating a document. It usually wraps around a particular bit of text with a pair of <> and brackets. The <> signifies the beginning of the markup and marks the end. Here is an example of what markup looks like for HTML:

Hello, I am

Keychron K4 v2 Honest Mechanical Keyboard User Review

When my third cheap-ass $10 keyboard in two months n key refused to work again, I knew I had to find a better sustainable option. At first, I thought I was just having a bad run with keyboards, but when the same keys start to break down consistently, it’s

50 Free Icon Sets For Your Next Front End Project

Icons can make or break a design. If you're a developer, the default standard is often Font Awesome. While Font Awesome is cool and all, there are other free alternatives that you can use to spruce up your next front end project. Here is a comprehensive directory list of 50

Ways To Easily Concatenate Strings In JavaScript

Concatenation is a process of linking things together. In JavaScript, there are 3 ways you can concatenate strings together to form an output. Here's how they all work. Using the + Operator to concatenate strings The + operator lets you add two numbers together, and also allows you to concatenate two strings.

How to break out of JavaScript forEach() loop

forEach() loops in JavaScript are fun to use – until you need to get out of them. Here is a short guide on how forEach() works, how to break out of a forEach() loop, and what the alternatives to a forEach() loop are. What is a forEach() loop? A forEach() loop

Declarative vs. Imperative Thinking In A JavaScript Context Explained Simply

What's the difference between declarative and imperative programming? How does it work and why does it matter?

Creating 3D Pure CSS Hover Flip Card Effect

When it comes to front-end, your aesthetics implementation skills are limited by how well you can make CSS do whatever you want it to do. A pure CSS hover flip card effect is something that we often see in portfolio sites and splash pages. They can also be modified to

Create An Animated Search Box Using HTML, CSS, & 2 JavaScript Functions

Have you ever wondered how those fancy expanding search boxes or forms are done? While it looks cool and feels like it could be complicated to code, it turns out to be quite simple. All you need is a few lines of HTML, a good dash of CSS, and two

Beat The Dunning Krueger Effect To Propel Yourself As A Developer

Throughout my career as a developer, I’ve exhibited varying degrees of hubris — the good bulk of it at the beginning of my journey. I was the cocky junior dev, filled with over-confidence, and somewhat overly zealous advocation of things I thought I understood. It happens to all of us

Array Methods: filter, find, map, reduce, every, and some in JavaScript

Not everything is an object. When it comes to functional programming, it’s more to do with the processes that get you from point A to point B than how data and groups of business logic are structured. JavaScript is a language that’s prone to imperative patterns because of

Make your JavaScript elegant with recursions

The idea of recursion is a funny one to get your head around. On the surface and in JavaScript, recursion is described as a pattern where functions call into itself. But does this actually mean? In diagramic form, it looks something like this: But that doesn’t really help explain

All About JavaScript Scopes, Loops, and Promises Explained Simply

Ideas are the building blocks of code. They give you the scaffold of how to think, how to create, and how to best write your code. Without it, you’ll be coding yourself into a corner in no time. Lack of knowledge and awareness is also how code smell starts.

Modules in your JavaScript projects

The thing with frontend frameworks and libraries is that you’ve got a scaffold to work against. There are set rules that you have to follow to make things work. However, the front end by itself isn’t that useful. It might look good, but functionality-wise, it’s an isolated

The In-Depth Guide to Creation Patterns in JavaScript

Almost everything is an object in JavaScript. There are only six things that are not objects. They are null, undefined, string, number, boolean, and symbol. These are called primitive types or primitive values. They can hold one piece of information and are simple in nature. Anything other than these primitive

Is Firebase really as awesome as it seems?

Don’t get me wrong, I like Firebase — but with everything dev related, there’s always a good and bad side, with a pinch of annoying that no one really wants to talk about. What is Firebase? It’s Google’s all-in-one cloud service, neatly packaged and delivered to developers

How To Get Good At React

Not too long ago, I committed myself to learning React properly. As a long-time software developer, I’ve been on and off React projects, depending on what the team needed. Despite what others assume about me, my personal gauge of understanding how the darn thing works is probably at the

Pure CSS Social Media Buttons With Tooltip Hover Effect

Social media icons are a staple of web design. Most of the time, designers and developers just settle for a simple button with the social icon slapped on it. But let’s get real — basic and standard icons are boring. They’re everywhere and nothing makes them stand out. In

How to install node.js and run your first app

If you're working with JavaScript, 99.9% of the time you'll encounter node.js in some form. In this article, we will go over what is node.js, how to install it on your local system, and create your first node.js app with JavaScript.

Fun Animated Button Hover Effect In CSS

Hover effects are one of those things we know, see and hear about — but the implementation is generally pretty basic. In this tutorial, we’re going to create a button hover effect, but with a fun twist to it. -------------------------------------------------------------------------------- This is what we’ll be making: While it looks

How To Create An Animated Range Slider In HTML, CSS, and Simple JavaScript

Range sliders — they look fancy and cool, but how exactly is it done? It turns out, with a good splash of CSS and a few lines of JavaScript is enough to do the trick. -------------------------------------------------------------------------------- This is what we will be making: Let’s start with the HTML.

100

0

Is PHP Dead or Alive?

PHP is something that we don’t really hear about in mainstream media. Angular, React, Node.js, and Python are all the rage nowadays. Even computer science degrees focus their efforts on Java and C languages. Meanwhile, PHP seems to be sitting in the corner, watching as everyone else gets

Is Angular dying because of React?

As local market trends begin to skew towards React, it’s easy to question the future of demand for Angular. It’s a one or the other kind of game and makes you wonder which once you should pick up, especially when you’re just entering the fray. Since Facebook

How To Create An Animated Email Subscription Form With Pure CSS

Forms are ugly by default. Creating a basic form is not hard — but a lot of tutorials I remember encountering in my early days of coding required some sort of JavaScript. CSS, however, is a lot more powerful than you think. -------------------------------------------------------------------------------- Here is what we will be making: Here

How To Make Cool Scroll Zoom Effect With Simple JavaScript

Zoom scroll effects are quite cool to incorporate into your designs. However, for many newbies to frontend development, this can feel like a bit of an execution mystery. In this tutorial, we are going to go over how to make a cool scroll zoom effect with a few lines of

Simple Menu Navigation Bar Styling

For CSS newbies, a navigation bar is something that you’ll encounter sooner or later. This is the first post for a series of back-to-basics code tutorials I’m doing in conjunction with my YouTube channel reboot. I’m a writer by strength but I also want to get better

How Variable Declarations Can Impact Your Scope In JavaScript

When scopes matter and Schrodinger’s theory doesn’t apply

How JavaScript Execution Context and Hoisting Works

JavaScript is easy . Until it breaks — then nothing makes sense. Console logs tell you it’s undefined in that annoying little red error. Or things just get set incorrectly, even though you think your logic is infallible. It happens a lot, especially for beginners. So what exactly went wrong? When

We Need to Talk About Composition Patterns in Object-Oriented JavaScript

At the end of the day, code is code. However, the difference between effective code and the kind that sends developers off to consume passive-aggressive memes is how the code itself is written. What many tend to forget is that code is a language, which means there are patterns and

What’s the Big Deal With Functional JavaScript?

Why functional JavaScript matters for your code

It’s time we talk about Object-Oriented JavaScript

Front end technology, especially JavaScript, has historically been looked down upon by back end veterans as not being a proper language. Mostly because JavaScript started off as function based language — making it immature in the ways of potential growth and what it can do. I remember back in the late

What is better — Functional programming or Object-Oriented?

You’re probably asking the wrong question

Closures in JavaScript

It’s actually a lot simpler than what other tutorials are trying to tell you

How to CRUD in Angular + Firebase Firestore

A complete example walk through with code snippets and full code repo

How To Properly Add Google Analytics Tracking to Your Angular Web App

Single-page application frameworks and libraries can be a blessing for developers but a pain when it comes to properly implementing tracking and analytics. If you’ve ever worked with Google Analytics, you would have encountered the global site tag — or gtag.js. Google tells you to pass this code as

Developers are more than just code monkeys

How businesses can take responsibility for themselves and code they create

The Misconceptions of Agile

Agile is one of the most popular buzzwords that permeates across different industries. The one thing that agile implementations have in common with one another is that there is always an element of software development. While everyone seems to know what it is, there is a general lack of real

25 Lessons I’ve Learned as a Developer

I actually started coding a long time before I got my first job as a developer, booting up websites here and there for friends, and friends of friends. I grew up in the days of dial-up Internet, floppy disks, and cassette tapes — the classic 90s kid with the Fresh Prince

Three Questions to Ask When Figuring Out Software Development Bottlenecks

Sometimes you end up with a game plan that looks flawless on paper. However, when it comes to implementation, this can end up as a completely different story. Developers, marketing, commercial, and management say and see different things — each with their own perspectives on why things have fallen wayside and

How to Cut Through Code Fog

At some point while sitting at our desks, we’ve all experienced code fog. It’s like a mixed feeling of confusion, frustration, and exhaustion. Code fog happens when you’ve tried to compile your code and it’s just not working. You’ve chopped, changed, and Googled your way

What to Do When You’ve Inherited Dysfunctional Code

Inheriting dysfunctional code is a rite of passage when it comes to working in organizations and software development teams. Sooner or later, you’ll be given code that’s written by someone else. If it’s not legacy code that was created before your tenure, then it might be from

Why JavaScript Deserves More Love Than Hate

For a long time, JavaScript has been derided as not being a ‘proper’ programming language. It’s been classed as weird for its unstructured nature and often causes frustrations to those coming into it from other languages. Despite this, JavaScript managed to move up from being just a scripting language

You Only Need 20 Percent to Become an Effective Developer

The hard part is figuring out the right 20 percent

Are You Writing Too Much Code?

For many beginners, code is the act of writing if else statements and trying to figure out how to make things work. During this process, the code produced becomes a convoluted mammoth with unexpected plot twists that rival the Red Wedding from “Game of Thrones.” More code isn’t always

Object-Oriented Is Not Dead

Long Live OOP and its place in JavaScript

Why Did You Want to Become a Developer?

Anchor yourself with your dream and not someone else’s

What Does Modular Architecture in Angular Even Mean?

The idea of modularity gets thrown around a lot, especially in the space of clean and structured code. It’s one of those ideas that’s just supposed to implement itself if you repeat it enough in a sentence. When it comes to Angular, achieving modularity is more than just

Inside the Minds of Tech Recruitment

And the things they see when on a hiring drive

The Tale of Unidirectional Dataflow in Angular

Why things no longer automatically flow both ways

How to Be an Effective Developer and Break Out From the Crowd

In the 80s, Japan had an issue. Their new high-speed trains brought with them an explosive level of noise pollution. The highest noise levels were reached when the trains exited tunnels — compressed soundwaves created loud pops, akin to bombs going off. Then came along an engineer named Nakatsu. Nakatsu was

How JavaScript still hasn’t broken the Internet just yet

even in its sloppy and strict states

Things you need to do before you start coding

There was a time when the boss came to us and demanded that we just start coding. It was a fire, fire, aim approach that worked under some circumstances — but not when it comes to code. Creating code is more akin to building a house — you need at least the

JavaScript sort() not working

JavaScript has a sort() method that you can use on arrays, but the results are almost always weird and don’t return what you initially expect. For example, if you have the following [9, 8, 12, 1, 33, 21] array, using sort() on it will return [1, 12, 21, 33,

The Art of Spotting Highly Effective Developers in the Wild

Finding the right developer for your team can often be a hard task. Sure, they might show signs of technical chops and pass all the psychometric tests — but how effective are they really as developers? The effectiveness of a developer in a team and their ability to deliver robust code

The Things You Need to Consider for Your Coding Portfolio

There’s been an explosion of new developers entering the field. The competition is often fierce — so how do you differentiate yourself for that dream role? If you’re fresh out of Bootcamp, university, or the self-taught track, having a solid portfolio for your entry-level job application is a must-have

JavaScript Bubble Sort in a nutshell — how, when & where

Let’s be honest, if you’re self-taught, there’s a high chance that algorithm topics wouldn’t even be on your radar. In part, it’s because you’re most likely preoccupied with other things — like getting your application to run, figuring out why your npm commands aren’t

Alternatives to Ionic

A foray into native JavaScript mobile application development

Do you need to be an introvert to become a successful developer?

There is something scary about being an introvert. We often think of basement dwelling creatures of the dark surrounded by cans of empty energy drinks. The soft glow of the multiple screens cuts through the darkness of the introvert’s cave, casting a sheet of light over their fragile pale

Resources for Front End Developers & Thoughts on Angular, React, Redux, Node and Git

When you’re new to something, its often hard to shift through the plethora of resources available for your chosen learning path. Here’s a comprehensive list of the resources I’ve found useful and I think Front End developers — new and seasoned — may also enjoy. Most of the resources

Rethinking Separation of Concerns with React

And how it differs from Angular

We need to talk about Firebase

It didn’t take me long in my career as a developer to figure out that you can’t really do much without a backend of sorts. As a frontend developer, you get easily stranded if you don’t know how to connect to a database, create and consume APIs.

Develop this one fundamental skill if you want to become a successful developer

This is the answer for everyone that’s ever asked me this question

Cohesion is more than just the size of your functions and classes

Lessons from working with spaghetti code and how not to get sauce stains on your projects

10 Programming Terms in Normal Human Language

Learning programming is like learning a completely different language. It gets even worse for a person coming into the field to be bombarded by long tutorials littered with words that makes no sense. All the words below have more than a million words written about them. But we don’t

Why you should learn vanilla JavaScript in isolation if you want to be a better developer

A lot of people often look at vanilla JavaScript and snort. Why learn vanilla JavaScript when you’ve got Angular, React and Node.js? But that’s where many developers, especially new developers, go wrong. What they don’t realize is that all these and many more are built on

How To Do A Self Assessed Quarterly Review

It’s a much more efficient way to achieve your goals

JavaScript Promises

Promises. I remember it being such a weird concept when I discovered them half a decade ago. I remember reading so many articles but all I could gather from them was either a story about someone promising to come back or the word ‘promise’ repeated over and over again. Somehow,

History of JavaScript — LiveScript, JScript, ECMAScript, ES6 and not still Java

Learning JavaScript can be confusing, especially when some articles sprinkle in acronyms like ES5, ES8, ES followed by some number. Here’s a fun 2 minute history lesson to make sense of it all. 1995 — a guy named Brendan Eich was recruited by Netscape to make a language that could

Understanding Prototypes in JavaScript

Prototypes is a weird and much avoided topic but vital towards mastering JavaScript. While classes are much easier to understand and is often the starting point for many when learning object oriented programming, prototypes is the foundation on which JavaScript is built. It looks like a class, it smells like

JavaScript Pyramid of Doom — How To Spot and Fix

Anti-patterns. They are the bane of many developers that’s had the misfortune of meeting one. The pyramid of doom is often one that a lot of new JavaScript developers write. Most of the time, it’s written in innocence with no code janitor to tell them otherwise. I’ve

Tickle your flinch if you want to grow as a developer

and prevent personal and professional stagnation

What’s the big deal with TypeScript?

TypeScript. There are a lot of people out there who look at it with derision when they hear that a framework, library or bits of code has been written in. Some people even go as far to avoid using it simply because they view it as another thing to learn.

Equality Comparators (==) and Sameness Checks (===) in JavaScript

when == != === and returns true instead of false

The one mistake I made as a developer I wished I learned sooner

Retrospection is often the cure of willful ignorance

What Programming Language Should I Learn?

Answering one of the most commonly asked questions the right way

How To Reduce Your Angular Build Size

Because Angular is fat. Like, really fat.

A quick dive into how things fit together in Angular

A lot of people tend to complain about how complicated Angular is when compared to React or Vue. This is partly due to misconception, not to mention that React is a library while Angular is a framework — making them very different tools that essentially end up doing the same thing.

Why Every Website Looks The Same

When design principles make you look good, just like everyone else

What is bundling with webpack?

Don’t get me wrong, JavaScript is amazing. But the first release was designed and created in 10 days. No one envisioned that it would one day take over the web and morph into a very special giant that needs a little bit of organization. That’s where bundling comes

Is a Computer Science degree still worth it in the age of self-taught?

Pursing higher education is one of the biggest debates when it comes to personal finance and life choices. It is a traditional model that is falling apart, mostly due to costs. As young high school graduates move from the financial safety of their guardians’ income, they leap onto a path

How to go beyond tutorials as a developer?

Web developers nowadays tend to be self-taught and entering the field with just enough knowledge to get started but not dangerous enough to dethrone those with computer science degrees. A lot of self-taught developers get stuck in a space known as noobville, not because they’re bad at coding, but

How to increase code quality

Many of us are capable of writing proficient syntax — but proficiency isn’t the same as mastery. While programming paradigms such as object oriented and functional programming help make the code better to manage, maintain and understand, there is an under-addressed topic in the programming world. And that topic has

When Code Turns Into a Horror Story

We all have horror stories when it comes to code. It starts off innocently until it morphs into Stephen King’s level of horror, turning the most optimistic among us into killer clowns. While I can encourage you not to be that person, we still do it anyway or find

Why are developers still using Angular?

There is no doubt that React is causing a front end upheaval when it comes to choosing a method of coding interfaces. Angular feels like it’s been in the market for a long time. However, in reality, the framework as we currently know it was only released in 2016.

RIP Test Driven Development

There is a misconception on what test driven development really is. We all know what it is, but at the same time, we don’t really. Usually it’s the word ‘test ’ that throws us off. So we end up writing long convoluted test units, sometimes the test code being

How NOT to get a $30k bill from Firebase

July last year, a crowd funding campaign went viral in Colombia. It was all good and dandy in the first 48 hours. They managed to reach over 2 million sessions and over 20 million page views — with a website that stayed fully functional without a hitch. Until they saw the

19 Things You Need to Learn to Become an Effective Angular Developer

A todo app is the equivalent of a ‘Hello world’ application for front-end development. While it covers the CRUD aspect of creating an app, it often only scratches the surface of what a framework or library can do. Angular seems to always be changing and updating — but in reality, there

What’s the big deal with React hooks?

React hooks are making big waves. Everyone’s talking about it but it often leaves the uninitiated thinking — what’s the big deal? It’s not often React comes out with major updates like this one. While Angular is changing its version number every 6-ish months, React is a bit

How to Get Your First Job As a Developer Without Any Prior Experience

Every day, more people are choosing the self-taught track to learn programming, with a good portion of them doing so as part of a career change. Others are fresh out of school having spent a small fortune on college degrees. However, regardless of your background, landing that coveted first job

10 Coding Prompts for Your Portfolio

In the writing community, there are writing prompts. In the coding community, coding prompts are often limited to the realms of hackathons, which can be intimidating for some. Whether you’re new to the game, looking for a new job, or are just looking to up your skills, you’re

Which is better for your next app — Angular or React? Why not both?

Legacy code is a by-product of running a business. There’s no escape from it no matter how hard you try. Even if you started off as a brand new project, over time you’ll accumulate legacy code to a point where you just want to throw everything away and

What exactly is functional programming?

Functional programming is something that existed for much longer than object oriented, dating back to the ancient days of Turing machines. It has seen ebbs and flows in popularity over time, based on whatever programming language and its foundational paradigms have taken over as part of the developer’s toolkit.

The Marks of a True Senior Developer

There is a wide range in the skill of developers out there — and seniority often doesn’t determine one's caliber. So what makes some superior to their peers? What is it that separates them from the pack and sea of mediocrity? Having five, ten or even fifteen years of ‘work

Alternatives To SQL

Yes. There is no doubt that relational databases have an industry monopoly over businesses. Everywhere you go, at some point in your career, you will encounter one, whether you like it or not. Personally, I have a love-hate relationship with relational databases. When they are structured properly and abstracted just

Don’t Blame It on the Algorithm

A developer’s perspective on why marketing campaigns fail

How & Why Front End Developers Need to Diversify Into Design

Front end development is a weird, special little space in programming. To be a truly effective and efficient front end engineer, there needs to be a balanced relationship between the creative and analytic sides of the brain. Visual arts creativity and imagination are skills that are often lost when we

How to think in noSQL with Firebase

Over the past few days, I’ve been thinking about noSQL data structures. The thing with SQL is that it’s very codified, with clear expectations and standardized best practices. In contrast, the fluid nature of noSQL makes it hard to put your finger on exactly what you’re supposed

Attribute and Structural Directives in Angular

In Angular, if data is the thing that makes an application come to life, then directives are the thing that makes actions, reactions, and interactions possible. In the simplest terms, a directive is like a template function that you can use to make things happen. They may take arguments, do

Selection Sort in a nutshell — how, when & where

Selection sort is one of the easiest sorting algorithms to understand. In part, because there is minimal complexity. However, simplicity does come with its pitfalls. Here is a quick low down on what selection sort is, how to write one, when and where you’d most likely encounter it. How

So You’re Self-Taught, Now What?

Maybe you’re going through Boot Camp, or you’re participating in the 100 Days Of Code Challenge — where you learn a new concept or write a bit of code each day for 100 days. Whatever it is you’re doing, you’ve finally arrived at the point where you

11 Major Meta-Knowledge Concepts You Need to Accelerate Your Code Creation Process

There are a lot of guides out there in the wild, most of the time, telling you what languages to learn and the hottest thing to know so that you’ll be an industry unicorn. While they may be useful, they only guide you on the surface value. They give

9 Ideas For Angular That Are Often Overlooked by Developers

Angular has been around for some time now but a lot of us still struggle with scaling our applications to match the demands of the requirements. Drawing from the past several years of working with Angular apps for clients, I’ve made a list of nine major ideas that are

Is React Overrated?

Early in the year, I gave React an honest try. Coming from an Angular background, I worked on keeping an open mind on the concepts that the library presented. It was weird at first — coming in from a space where everything has to be structured in a particular way with

9 Things To Boost Your Workflow in Visual Studio Code

When you’ve hit that flow state, your brain often travels at a hundred miles per hour. You type out your code as quickly as you can, working hard to capture your thoughts before they disappear into the ether or recesses of another thought. Visual Studio Code has been the

How To Become A Programmer / Software Developer - Beginner's Guide

Programming is a hard field to break into — especially if you’re brand new to the industry and don’t know where to begin. At the beginning of the decade, the Internet and its code-related resources were possibly a sliver of the size they currently are. As more developers find

How To Think Like an Effective Engineer

Software developers, programmers, engineers — whatever title you’d like to give to the creators of code and architects of systems — all follow a similar methodology when it comes to putting their brains to work. The act of creating things is a process and sometimes this process is not taught explicitly.

Free Programming Courses by Harvard, MIT, IBM, Google, and Microsoft

A traditional degree can be costly, especially if you’re thinking about a career change or don’t want to rack up a large student loan. While community colleges and local institutions tend to be much lower in cost, you might be unsure about such a long-term commitment or have

How to Prototype an API Quickly With Firebase Through Excel Data Import

Iterative prototypes can turn your concepts into working ideas faster than trying to get everything right on paper, only to find that it doesn’t quite translate as well onto the screen for whatever reason. As a developer, your task is to turn ideas into reality — not fiddle with Photoshop

How To Get Your Prototype App Off The Ground

Start with an idea When it comes to rapid prototyping, you need to be clear about what you want. This becomes even more important if you’re working against a deadline. A short deadline can feel like a lot of pressure to complete something — but it may just be the

What’s the Big Deal With React Native?

Alright. Let’s get real. A lot of the jobs I’ve come across recently ask for React. Sometimes I wonder if recruiters are just throwing the library into the required experience list because it’s one of the latest buzz words. Perhaps they’re just casting a wide net

How To Set Up React Native

React Native is making waves out in the world of cross-platform native application development. It’s being used at production level in various places — with Discord (for their iOS app), Uber Eats, Bloomberg, and Instagram being the main examples for commercial implementations. Released back in 2015, React Native borrows the

JavaScript Devs Are Making Over $100,000 a Year

JavaScript is a strange little big creature. It was created in ten days and was originally regarded as the “wannabe” programming language. In its early days, JavaScript was the equivalent of the little guy in the garage — tinkering out snowflake effects and kitsch text-animations back in the 90’s, earning

Is Your Code a Bit Bloated?

Bloated code doesn’t bode well for anyone. In the short term, everything seems fine. We tell ourselves tiny little white lies that we’ll sort it all out later — but we never do. We get sidetracked, sidelined, or switched over to a new project completely. Then we come back

What exactly is CSS?

CSS is one of those things we see get thrown around but not really explained. If it does, we only get to scratch the technical surface. Over the years, CSS has grown from something that makes the web prettier into a tool that can be infused with user experience psychology

18 Resources You Need To Check Out To Upgrade Your Visual Vocabulary

The world of front end development and design are merging into one big, interdisciplinary space — and to stay on top of your game, you need to be skilled in both areas. Or at least have knowledge in the other. All front end developers can code. However, when it comes to

Scopes, Conditions & Loops in JavaScript

Ideas are the building blocks of code. They give you the scaffold of how to think, how to create, and how to best write your code. Without it, you’ll be coding yourself into a corner in no time. Lack of knowledge and awareness is also how code smell starts.

How to Create + Ways To Read Documents & Collections In Firebase

Firebase has been around for a while now. The underdog serverless cloud-based database can be rather fun to use once you get your head around it. However, the hard part is finding resources that isn’t overwhelming for newbies to read and follow along. I’m not going to lie

7 Apps You Can Definitely Build With These Free APIs

You used to need to be a full-stack developer if you wanted to build something useful. A front end by itself doesn’t do much. A back end without a front end can’t be used the way it’s intended to. But that kind of thinking is over a

Collating Functions Into a Class

Not all functions are made equal. A class is essentially a family of functions that are related to each other in some way. They may have commonality under a certain category. They may have similarities in what they do. Whatever the case, sometimes, it’s just better to write your

How to Work Effectively in a Remote Environment

A guide on how to go remote without going insane

What Is the Shadow DOM and Why Does It Matter in JavaScript?

We’ve all heard of the DOM at some point. It’s a topic that is quickly brushed over, and there’s not enough discussion of it. The name shadow DOM sounds somewhat sinister — but trust me, it’s not. The concept of DOMs is one of the foundations of

The basics of regular expressions — explained simply

Regular expression — or regex — is something that we all, as developers, will encounter at some point. For many, it remains a form of gibberish. For some developers, they avoid it simply because it feels like it’s just too hard to get your head around. Whatever your case, here is

What Is Currying in JavaScript and Why Does It Matter?

Currying is a topic that often sits in the more advanced user circles of JavaScript. It extends beyond the usual usage of functions and methods and starts to dive into the structural side of code. When you start to build more complex applications, you start looking into your toolbox for

What is a JavaScript module and how to use it?

The thing with frontend frameworks and libraries is that you’ve got a scaffold to work against. There are set rules that you have to follow to make things work. However, the front end by itself isn’t that useful. It might look good, but functionality-wise, it’s an isolated

The Ultimate Visual Guide to CSS Selectors

At some point in your software engineering career, you’re going to encounter CSS. On a technicality, it’s not actually a language — but the rules and how it’s structured can be as complicated. There are discussions and community initiatives around clean CSS as much as there is chatter

7 Major JavaScript Concepts Explained Simply

No lingo. Written for humans. With code snippets. In 5 minutes.

Stop it. The myth of the senior developer.

The truth is after some deep thought and contemplation, I’ve come to the conclusion that there’s no such thing as a senior developer. Why? Because the idea of being a senior developer is highly subjective. The Subjectivity of Seniority Where you stand on the scale of seniority really

Everything You Need To Know About JSON.stringify and JSON.parse

JSON is probably one of the most underrated programming language in existence. Not only is it so widespread, it’s lightweight and no-nonsense demeanor makes JSON feel almost native to whichever language it pairs up with. Yes. That’s right. JSON is it’s own language, despite becoming somewhat synonymous

Pure Dropdown CSS Navigation Bar From Scratch

Dropdown menus are inescapable when it comes to front-end development. At some point, you’re going to encounter them. While most CSS frameworks automatically handle this for you, sometimes you just need to do it yourself. But the question is — how? For those who are new to CSS or just

14 Fundamental JavaScript Concepts Explained Simply

Hello everyone! For today’s post, I’ve decided to do a summary map of the fundamentals of JavaScript. It’s made with the beginner in mind and basically summarizes the main foundational concepts without you needing to spend hours reading up on everything. The point is to give you

Understanding JavaScript Observer Patterns

There’s a lot of love and hate talk when it comes to object-oriented programming. Don’t get me wrong, OOP has both its perks and quirks — but at the end of the day, it’s only as good as your design patterns. A lot of us only get to

The 8 Facets of Remote Work as A Developer

The Internet has become the new land of dreams where anything can happen. Many of us flock to make a living online as tales of people making bank emerge in the suggested and recommendations list from the rubble of survivor bias. But living online isn’t a get rich quick

What does immutability really mean in JavaScript?

The concept of immutability is a funny one. In one translation, it can mean unchanging — however, setting something up as a let or var and then not allowing it to change might as well be as good as using const There are a lot of people who take this translation

A Concise Guide To JavaScript Objects

7 Things About JavaScript Objects summarized succinctly

A Comprehensively Short Guide to let, var and this

Back in September, I wrote this story [https://medium.com/madhash/how-variable-types-can-determine-the-life-or-death-of-cats-in-javascript-b1cd2f50a8b1] on var, let and the keyword this However, some people still found it hard to distinguish between the difference — or rather, they wanted something that was more visually accessible. So I decided to change the format a little

Is Angular Bad?

Angular’s not that bad — not as bad as React developers make it out to be. The thing is, we’re usually biased towards what we know. For outsiders looking in, Angular can seem convoluted, massive, and somewhat complicated. But what many don’t realize is that it’s all

Can you teach me how to code? Why my answer always starts with no and end with yes

Can you teach me how to code? Sit me down and flip open a book, going from beginning to end like a textbook? Can you teach me to code, so I can make games and maybe hack the Pentagon? Can you teach me to code, so I can make millions

Understanding JavaScript Adapter Pattern

Traditionally, structural patterns are described as the thing that helps simplify the process of object composition. Its purpose is to help identify the relationship between different objects, making sure that if something changes within the system, it doesn’t force the entire system to change with it. Let’s begin

Understanding JavaScript Bridge Pattern

The bridge pattern is another ideological abstraction that keeps the boundaries of your code clean and separated. While it has similarities with the adapter pattern [https://medium.com/madhash/adapter-pattern-in-a-nutshell-2aafb4099a23], it is not quite the exact same. The bridge pattern can be seen as an extension of the adapter pattern

Understanding JavaScript Composite Patterns

A composite pattern deals with the complexity of how objects are related to one another. According to the original definition, > [a composite pattern] allows you to compose objects into tree structures to represent part-whole hierarchies Design Patterns: Elements of Reusable Object-Oriented Software (Addison-Wesley Professional Computing Series) [https://amzn.to/2D5QQPW]

Understanding JavaScript Decorator Patterns

The decorator pattern works by extending an object’s behavior without changing the original object itself. What exactly does this mean? Imagine that you’ve just bought yourself a new phone. However, carrying the phone around in its current form feels risky. What if you drop it? What if it

First-class functions in JavaScript

JavaScript edition

10 Tips That Will Make You A Better Developer (and general human)

non-coding edition

How not to reinvent the wheel — the hybrid system approach

lessons learned in a startup before it got acquired

Upgrade This Skill To Be A Successful Frontend Dev

Beyond the code, what’s your selling point?

How Object.defineProperty() Works

At some point, you might have encountered Object.defineProperty() in someone’s code. It might be through an Angular, React, or Vue project. However, Object.defineProperty() isn’t actually specific to any of the listed framework/library. It’s actually part of vanilla JavaScript. Vanilla JavaScript is the foundation of

5 Signs That You’re Wasting Your Life As A Developer

And what to do about it

How To Deal With Knowledge Inflation As A Developer

There’s always going to be something to learn but when does it ever end?