Renovating Portfolio Site Features
In my previous blog post, I described some of my experience developing my portfolio site using the React framework such as building the navigation, designing the layout, and providing functionality for all of the components. While the site works sufficiently on a desktop, viewing my portfolio on a tablet or mobile device is not responsive. All of the components have unusual padding and margin properties that allow for convenient navigation. I think it would be a great idea to not only explain this process, but also share some of the other features that I want to renovate for this month. Besides the lack of a responsive menu and jumbled content containers when reducing the screen size, another problem I’ve encountered is the page refresh for the portfolio and contact pages.
Creating Sorted Tables in Angular
One of the main components of the front-end development project that I’ve been working on is a sortable table in Angular. For this post, I’m going to focus on how I would convert the game objects from my Ruby on Rails application into a sortable table for Angular. A great feature of Angular is that you can create classes and models with individual typescript files that you can import into your components. To get started, you can build game.ts, which will describe the Game class as well as the array of objects inside of it. There are several attributes attached to the original game object, but for this example, I only want to display six of them inside the table. A Game will have a name, objective, # of players, reward points, genre, and a category.
Integrating Bootstrap with Angular
When building front-end applications, there are several JS and CSS frameworks that you can utilize to enhance the design and functionality of your project. One of the integrations that I’ve currently been working with is Bootstrap and Angular. Early on in my software development journey, I rarely used Bootstrap because I thought that it would hinder my understanding of manual CSS and I wanted to make sure that I was comfortable implementing that code without encountering errors. Now that I’ve started to build applications with Angular, I think Bootstrap has become incredibly beneficial to the development process. While Angular gives you the ability to enhance your HTML, designing responsive elements such as tables, buttons, dropdown menus, and date ranges isn’t as exclusive or organized without Bootstrap.
Working with Angular and Typescript
During the past few weeks, I have been learning and working with Angular and Typescript for a front-end development project. Considering that I had never built applications with the Angular framework before, I was a bit anxious for the overall experience. Having now learned the fundamentals through a variety of resources including docs and walkthroughs, it was much easier than I expected. With its similarities to React from an structural perspective, it provides a nice alternative for a client-side application. The structure is centralized around components, modules, and services and a MVC architecture.