Octolinker, Octotree, and dark mode

Image for post
Image for post
Photo by Luke Chesser on Unsplash

How many times per day do you browse a repo on GitHub? As a web developer, I’d say my average is at least twice. Whether to store our code or explore new projects or libraries, GitHub is one of the main references for developers of all kinds.

In this article, I am going to introduce you to three Chrome extensions that have changed my way of using GitHub.

1. Links, Links, Links!

The most annoying thing for me when using GitHub is the inability to click on import, include, or require statements to consult referenced code (I know, VS Code has spoiled us!).

What we’ll do is use breadcrumbs to try and find the code we are interested in. And if you are checking out a big repo, well, it could take a good ten…


A simple library to color #hashtags and @mentions in your posts

Image for post
Image for post

It’s very common for front-end developers to work on social feed functionalities.

In many cases, it is possible to use embedded code or widgets to display recent tweets or posts, but sometimes clients might require a custom interface. That’s what happened to me this week.

The Problem

I had to work on an animated Twitter feed and I was requested to assign a specific color to hashtags and mentions in the text.

However, as the whole tweet comes from the API as a string, I had to come up with a functional way of processing the text to extract words starting with # and @ and give them a different color from the rest of the text. …


What I’ve learned from the best and the worst developers I’ve worked with

Image for post
Image for post
Photo by Eli Burdette from Pexels

All the roles I’ve had in these past years as a web developer have taught me something. I have met developers of many different kinds, strong and weak personalities, desirable and undesirable colleagues.

All of them had something to teach me about our job, whether good or bad, and I still learn new things every day.

However, two personalities left a big trace in my professional growth: the worst and the best developer I’ve ever worked with. …


And understand the basics of RxJS

Image for post
Image for post
Photo by Mike from Pexels

For many junior or mid-weight front-end developers, dealing with Observables and Subscriptions is still a nightmare. I must admit too that I had quite a hard time trying to understand the principles of reactive development.

However, everything became clearer to me when I had to code a countdown and I decided to do it with the help of RxJS Observables!

Every Problem Has Its Operator

We want to display a countdown that will last 30 seconds and notify the user at completion. In order to do this, we need to emit a stream of numerical values at a set interval, which will be 1s.

RxJS offers a wide range of operators to help us handle streams of data. Between these, there are the interval and the timer operator. …


Tidy up your code with this new library

Image for post
Image for post
Photo by Zachary DeBottis from Pexels

Another fundamental priority in development is trying to limit the use of boilerplates to the minimum. In general, it’d be good practice to keep the code as simple as possible and to avoid verbosity to keep technical debt under control.

For me, there’s nothing more frustrating than a file with hundreds of lines of code, and that’s why I’m always looking for ways to write in a cleaner and clearer way. In this piece, I’ll show you a better way to dispatch actions to an Angular NgXs Store.

The problem

Writing boilerplate code for our state management can be a long process. If we’re working on a complex app with a wide range of operations handled by the Store, we might need tens of different @Select() functions (as well as Action declarations). …


And I am not going back

Image for post
Image for post
photo by Kha Ruxury on pexels.com

When developing a complex SPA in Angular, using a state management library makes things so much easier.

The app store acts as a single source of truth and contains all the data that is fundamental to the correct functioning of the app. Thanks to the store, I can access or edit this data from any smart component (or container).

However, it can be frustrating to deal with all the subscriptions to the store; many times I have to deal with multiple @Select() in a single component, each of which returns an Observable of its correspondent property in the app store.

And for each of these Observables, I need to create a subscription that will be destroyed at the end of the component lifecycle…that’s a lot of code! …


Power up your app with a single source of truth

Image for post
Image for post
photo by David Bartus on pexels.com

One of the biggest challenges I have to face when creating an app is making sure it will not crash in the case of the internet dropping out.

This can be achieved mainly by reducing API calls to the minimum thanks to some kind of local app storage. In these cases, it’s important to have a place where all the main settings and data are kept.

This part of the app, called Store, acts as a single source of truth and allows us to be independent of API calls and have a better data flow between components.

In this article, we will build a simple Store with my favorite state management library for Angular, NGXS. I will link to the full code for the example at the end of the article. …


Avoid code repetition and build efficient applications

Image for post
Image for post
Photo by James Pond on Unsplash

One of the first concerns of a good web developer is writing clean code and avoiding repetition. This strategy becomes a necessity when developing large, scalable applications that could be expanded with new features in the future.

Reusable components can make the difference between a successful project and one with high technical debt.

In this article, we will build together a reusable, customizable button component that will be able to display text buttons or image buttons according to the provided configuration.

Step 1. Base Structure

First of all, when thinking about the structure of a reusable component, we need to take into consideration all the uses we want to make of it. …


Image for post
Image for post
Photo by Michael Prewett on Unsplash

In these last years, we’ve witnessed an increase in the amount of gender non-conforming population, or, as I prefer to say, people identifying as queer.
This follows the introduction of a new concept of gender as a spectrum rather than a binary attribute. In this article, I’m going to explain the reasons why I decided to change my pronouns from She/Her to They/them and started to identify myself as non-binary.

But first, let’s understand what gender is.

The new philosophy about queer identity and sexual orientation can be explained using The Genderbread Person, a project created by Sam Killerman.


Image for post
Image for post
Photo by Taras Shypka on Unsplash

It happens so often: you are coding while looking up examples or blog posts on the web. You might also be listening to music, or watching a video on Youtube. All told, you have quite a few tabs open.

With or without realising it, you are using a large amount of the browser’s memory. By testing a new chunk of code that contains a loop, or by debugging a complex sequence of animations. You might even make a mistake that results in an infinite loop.

Then, the localhost tab crashes.

And in your rage, you think that you need to restart the browser, losing all your Chrome windows and all the tabs. …

About

Alessia Amitrano

Front End Web Developer @Imagination, London. With 4+ years of experience in Angular, Redux and animations. Dungeons&Dragons player!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store