Monday marks the end of yet another week, let’s analyze what happened the last 7 days.

Let’s begin with a meta-lesson. As I am here writing this essay and I look at what I did this week versus what I wrote last week, I get some sense that perhaps this last week was kind of week or slow, as I don’t have a lot to show. I guess this is normal, you can work a lot and yet accomplish little, or invest several hours doing something that yet has no real visible result (I recall reading about this before in the program, someone mentioned not to use much time refactoring, even if necessary or beneficial, as the client usually cares a lot more for new stuff and tangible progress). Looking back to this week, I get the feeling these thoughts are mainly due to the fact I haven’t made much progress in one task in particular, which in return paints a whole mood for the rest of the week’s accomplishments. Such is the mind, and such are their tricks, but identifying them is certainly a start to begin tackling them. So, let’s recap what was done, even if there’s not many fancy apps to show.

I’ll start with Angular, since this week I wasn’t able to make much progress in that course; the progress I was able to make though, was really useful. The module I completed this week was mainly concerned with the visual aspect of our apps, and as such, great emphasis was placed on 2 tools: ngClass & ngStyle. As their name implies, ngClass helps us assign classes to our HTML elements in a more dynamic manner, allowing us to declare an object with several keys bound to a value that can be derived into a truthy or falsy value, and depending on such, a class with the name of the key shall be assigned to the element. ngStyle functions in a more specific manner, allowing us to also add styles in a dynamic manner by extrapolating variables into CSS expressions; it also has a lot of flexibility, allowing the user to declare the style in an inline style manner, or being more specific and target the exact property one likes to control and even the units to use, for example: [style.fontSize.px]="size" . Another lesson I learned during this module was that of directives, a file we can use to create custom tags in order to create some style or behavior to follow for any HTML tag marked with it. I used it to generate a simple highlightDirective, which used ElementRef and HostListener in order to detect when the element was focused or blurred in order to activate the right styling. One useful tool that wasn’t related to styling was that of ngSwitch, which works much the same way as a regular switch statement, allowing us to evade multiple if-else statements that would otherwise clutter our workspace. Lastly for Angular, this week I learned how to use children routes in order to generate subpages inside of a parent route, as well as how to read the parameters passed from each route.

Moving onto React, this week I was able to study some rather interesting features of the framework. First off, I had previously learned about making wrapper components in order to provide some common style to components, but another advantage of using this type of components is evading what is known as div soup. A div soup refers to the excessive use of this tag in our programs, which is a recurring problem in React since the framework can’t handle outputting 2 or more elements side by side, ruining the semantic structure of our apps and which results in the need to declare a dummy root element in order to contain them. A wrapper component simply returns its children without using a div, and while this might seem wrong, it actually is a workaround for this limitation of the framework. Of course, there are other alternatives to this problem, such as using the tag React.Fragment or simply using empty closing and opening tags, all of which allows us to avoid the soup. Another important lesson I learned during this week was that of React Portals, which allows us to target an element in our index.html in order to render a certain component in a specific position, which is useful whenever we want to avoid deeply nested components, such as in alerts or modals. Lastly, this week I learned about the useRef hook, a useful tool whenever we want to handle the state of some input variable without having to worry about configuring the two-way binding between logic and render.

As a last note for this week, I’ve been starting to work with a new team in a new project, and while the progress has been slow and tedious, as starting in any project with a large codebase is, I’m still gathering a bunch of useful lessons for the future. These lessons have come mainly in the areas of teamwork, time management, communication, and, of course, coding. I hadn’t worked in a specific app since the second phase of this apprenticeship, so coming back to this setting and environment has been a bit of a shock, but nonetheless, it is a welcome one. I hope I’m able to improve and learn more from this team little by little each week.

App_development