March 8th, 2018
What I Learned About TypeScript
January 6th, 2018
Angular 5 First Impressions
November 24th, 2018
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.
March 17th, 2018
Creating a MEAN Stack Prototype
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!
May 23rd, 2018
November 5th, 2020
Building a Reusable React Component Library
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.
January 27th, 2018
Angular 5 Routing & Lazy Loading Modules
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.
January 19th, 2019
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.
March 12th, 2019
Angular: Default vs. OnPush Change Detection
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 -
August 18th, 2019
Revisiting Type Equality
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.
January 14th, 2018
The Shadow Dom
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!