Published on
Another common component you might use in an application is a progress bar. There are a few types of progress bars one being the general bootstrap style. Another one that I’m starting to see more frequently is the style positioned to the top of the page with an animation spanning the full width of the page similar to YouTube. This is the type we’re going to create. A full screen demo of what we’re going to buildPublished on
The first component we are going to create for our library is an alert component. Alerts are a common component used to notify the user that something has change or maybe an error occured or even a valididation constraint failed on a form. A full screen demo of what we’re going to build Prerequisites Install Node Install Angular CLI Creating an Angular Component Library - Workspace Setup OR Clone this github repository Generating Our Alert Component We will need to generate a new module along with a component in our library project.Published on
One fairly recent feature with Angular is the ability to generate libraries with the Angular CLI. A library is essentially a group of components, directives, service, pipes, interceptors, etc that allows for maximum code reuse by installing the library in multiple applications, think DRY principles. This next post we will setup a workspace to create a reusable component library and in subsequest post we will cover creating some components for our library.Published on
The next thing we need for our dashboard layout is some sort of grid that we can use to layout our pages. In the past it was common to use a CSS grid library, bootstrap probably being the most popular. Now that we have CSS Grid, building a grid with pure CSS is relatively easy. We are going to build reusable Angular grid components for our dashboard. Each grid cell will be customizable in that we will be able to specify how many columns and rows to span by using element attributes.Published on
In the previous post we put together our dashboard layout component containing our bare layout frame. Now we are going to be putting together a couple components to use with our framing. Hopefully by the end of this post, you’ll have a good idea of how we can swap out different styled navigation bars and side panels. A full screen demo of what we’re going to build Prerequisites Install Node Install Angular CLI Creating an Angular Dashboard Layout - Framing OR Clone this github repository Create a Shared Module Before we start creating our components, we are going to create a shared module.Published on
If you ever search the for a dashboard layout you’ve probably come across fully themed out templates or a large library to construct your own dashboard but what if we only wanted just a simple structure where we could provide our own themed components. Something that wouldn’t required a large library import or excessively overriding css classes. Well, that’s what we’re going to build out next. A dashboard layout usually consists of a side panel with a navigation bar and a main content section.Published on
We have our base project setup with Express, but what about connecting to a databse? We could just use raw SQL queries and that might be a good option for some project. Or we could use an ORM. An ORM, or Object Relational Mapper, is a library/framework that allows for the bi-directional mapping of your OOP model classes to relational database tables. It basically abstracts away SQL querying and result set mapping to our TypeScript models into a library to simplify our data access layer.Published on
There are quite a few libraries/frameworks in the NodeJS world for building web applications. We’re going to take a look at one of the more popular ones, Express, and setup up our project to use Expresss with TypeScript. There is a plethora of ways to set up Express, but this is how I like to set it up. Prerequisites Setting Up a Node & TypeScript Project - Initial Setup Setting Up a Node & TypeScript Project - Configure Jest Setting Up a Node & TypeScript Project - Configure Tooling OR Clone this github repository Installing Our Dependencies Lets get started by setting up our project with Express.Published on
Something that I’ve noticed while working in the JavaScript ecosystem is the vast number of tools available to developers. Being a relatively new developer, this was very overwhelming at first. Fortunately, the majority of them are easy to setup and once you have them setup you won’t need to make changes to them frequently. Some of these tools allows for faster, more consistent development. With this next post we will be configuring some common tools used in Node/JavaScript development.Published on
As many of you know unit testing is a very opinionated topic in software development. Most of my professional experience has been working on code bases where little to no unit testing was implemented. This can/has been a nightmare especially with semi-large, messy code bases. It becomes like a game of whack-a-mole where you change one thing and eight other things break (this is also partly due to not following DRY or SOLID principles).