DISCOVERY

March 8th, 2018

What I Learned About TypeScript

TypeScript

JavaScript

In my First Reactions to Angular discovery post, I was quite critical of TypeScript. I questioned whether it truly was a pure superset of JavaScript and didn't like how it forced the MEAN stack to use multiple languages.

I did finish my TypeScript discussion saying I'd give it a chance and continue working with it. So is TypeScript going to replace my JavaScript now that I built a full Angular 5 app with it? Not quite, but it is a really cool language that brings a lot to the JavaScript ecosystem!

DISCOVERY

January 6th, 2018

Angular 5 First Impressions

Angular

TypeScript

+2 More

Recently I learned a few JavaScript technologies for building website backends. I looked at Node.js in the server layer and MongoDB in the database layer. Now I'm switching gears and learning some front-end JavaScript technologies. My top two picks for front-end frameworks are Angular and React.js. Today I'm beginning my journey with Angular. Through this research I will determine if its a suitable option for my website. This post won't display much code, instead focusing on my initial reactions to the framework.

Angular CLI

DISCOVERY

November 24th, 2018

Angular Lifecycles

Angular

TypeScript

DOM

When I learned AngularJS on my first software development team (June 2017), the biggest adjustment from JQuery was the addition of lifecycles for webpages. With modern front-end libraries and frameworks such as React and Angular, lifecycles are commonplace. Although late to the party, in June 2017 they were brand new to me. This post looks at the lifecycles introduced in the Angular framework. In a future post I will look at lifecycles in React, drawing comparisons between the two front-end approaches.

Angular at a High Level

BLOG

March 17th, 2018

Creating a MEAN Stack Prototype

MongoDB

Express

+17 More

Much of my work lately has been in preparation for a personal website that I'm going to build (and where this blog post will call home!). The website is going to contain my resume, blog posts, and more. I am really excited to get started building it!

However, the first order of business is to decide which technology stack I want to use for the website. I've narrowed it down to a full JavaScript stack, from the front-end through the database. There are two remaining tech stacks in competition: the MEAN stack (MongoDB, Express, Angular, & Node.js) and the MERN stack (MongoDB, Express, React.js & Node.js). I started my research for building the website by reading JavaScript books and writing plenty of discovery posts about them. I also explored Node.js and MongoDB in depth. I even made a blog post and prototype on both technologies! Now its time to pick between the two front end JavaScript frameworks: Angular by Google and React.js by Facebook.

DISCOVERY

May 23rd, 2018

Keeping Data Immutable in JavaScript

JavaScript

ECMAScript 6

+2 More

The benefits of keeping data immutable while programming is well documented. Immutable data is side effect free, predictable, and easy to test. While immutability is a strict requirement in the functional paradigm, for other paradigms it is simply a recommendation. In a language like JavaScript that supports multiple paradigms, some code does not keep data immutable. I am guilty of it too.

All the code I write these days has immutability in mind. This post goes over the basics of preventing object mutations in JavaScript and how ES6+ features simplify the task.

RETROSPECTIVE

November 5th, 2020

Building a Reusable React Component Library

React

JavaScript

+2 More

Front-end applications, specifically those created with React, are built with small reusable JavaScript functions called components. Each component renders and handles the business logic for a small chunk of the application. Components have props, state, and elements that render on the screen.

For developers working on multiple React applications or working for an organization that uses React, there are benefits to using reusable component libraries. Component libraries are shared amongst applications and contain generic components such as buttons, accordions, and form elements. Besides the obvious benefit of code reuse, component libraries help enforce organizational style guides and allow developers to easily iterate on components used in all their applications. Component library setup is easy and can save a lot of front-end development time in the long run.

DISCOVERY

January 27th, 2018

Angular 5 Routing & Lazy Loading Modules

Angular

TypeScript

HTML

I recently started working on an Angular 5 framework prototype. The project is a single page web application that displays cat pictures! It has a few tabs you can click on that change the application state. When first setting up the application, I created the routes corresponding to each tab.

First I made an Angular component that has an HTML template for all the tabs.

DISCOVERY

January 19th, 2019

React Lifecycles

React

Angular

+3 More

In a previous article I looked at lifecycles in the Angular framework. This post looks at lifecycles in React, a front-end library first released in 2013 by Facebook (after AngularJS and before Angular). If you want to learn more about React, I've written multiple posts about it in the past (including an introduction to the basics).

I enjoy working in React more than Angular nowadays. React feels simpler for developing website components. As this post reveals, the lifecycles of React components are equally simple.

DISCOVERY

March 12th, 2019

Angular: Default vs. OnPush Change Detection

Angular

React

+2 More

In the last few months I've written articles about lifecyles in React and Angular. Certain lifecycles in React and Angular are triggered by their respective change detection mechanisms. In React the change detection mechanism is triggered whenever a components state changes or the properties passed from a parent component change. In Angular the change detection mechanism is triggered whenever a DOM event occurs or values used in the component template are mutated (along with async code returning, timeouts completing, etc.).

Angular also allows developers to change the change detection strategy on a per-component basis. This post explores the two change detection strategies - Default and OnPush.

DISCOVERY

August 18th, 2019

Revisiting Type Equality

Java

JavaScript

+15 More

In this article I'm revisiting the concept of type equality. Type equality is a topic that software engineers learn early on in their careers. Similar to any other profession, it's beneficial to go back to the basics for practice. Professional basketball players practice layups before each game. Professional programmers should work at the basics as well. I spent this past week re-learning type equality in 13 different languages. In the process I've reaffirmed my knowledge and gained new insights. The rest of this article discusses my findings.

The Different Forms of Type Equality

DISCOVERY

January 14th, 2018

The Shadow Dom

DOM

HTML

+2 More

I was recently reading a book on Angular 2 and came across an HTML concept I had never heard of before - the shadow DOM. Angular utilizes the shadow DOM to modularize HTML and CSS code, although you can also use the shadow DOM API in native JavaScript1.

A shadow DOM results in modularization by removing its contents from the main Document Object Model. The shadow DOM is attached onto an existing HTML element using the Element.attachShadow() function2. You can then add new HTML code or <style> elements containing CSS to the shadow DOM. All of the styles and HTML specified in the shadow DOM are hidden from the outer HTML implementation. Shadow DOM helps avoid CSS style conflicts, HTML id overlaps, and more!