Dev on Antomor

Angular Dynamic Content

dev@antomor.com (Antonio Morrone) — Sat, 11 Apr 2020 10:51:42 +0200

In many cases we need to change the content of a component dynamically — for instance, to allow the user to change view, or to let the children render data retrieved and processed by its parent component. Below, we are going to show some techniques for creating a component without deciding in advance how the data will be shown. According to the application’s needs, each technique has its own strengths, but all of them encourage component reusability. We are going to describe:

CSP and CORS

dev@antomor.com (Antonio Morrone) — Sat, 11 Apr 2020 10:51:20 +0200

What is CSP
#

CSP stands for Content Security Policy and it is a security mechanism that helps to protect or mitigate some common attacks such as XSS (Cross-site scripting). It can be set by means of a Content-Security-Policy HTTP header or using an HTML meta tag.

HTTP header:

Content-Security-Policy: policy

HTML Meta tag:

<meta http-equiv="Content-Security-Policy" content="policy">

A policy describes a set of directives, each composed of the area in which the rule is applied and the rule itself. The policy directive default-src 'self' says to load all content from the site’s origin, while if we want to load content from the site and from another trusted domain, the policy would be Content-Security-Policy: default-src 'self' *.trusted.com.

Git: Move Files Retaining History

dev@antomor.com (Antonio Morrone) — Sat, 14 Mar 2020 12:28:03 +0100

Some time ago we needed to create a new product that shares many features with the existing one. The first idea was to extract some of the code into a library, to be then imported and used independently in the two projects.

After creating the repository for the library, the first thing I would have done was copy the files from one repo to another. Well, it works like a charm, it’s fast, and it doesn’t require any particular expertise — a normal drag-and-drop operation. What’s more? It could be a very effective approach, but …

Mongodb Query Profiler

dev@antomor.com (Antonio Morrone) — Sat, 28 Dec 2019 18:06:38 +0100

Some months ago, I was creating a web page to show some aggregated data, but I soon noticed the API used to retrieve the data was very slow. After investigating the possible issue, we discovered the bottleneck: the database. The solution was to restructure the data to make it consumable from a web page.

Although I had sometimes used the SQL Server profiler, I had no experience with the MongoDB profiler, so here are the steps involved in analysing a MongoDB query.

Security Headers on Static Websites

dev@antomor.com (Antonio Morrone) — Thu, 26 Dec 2019 10:56:23 +0100

When I started this blog, I evaluated many options:

blogging platform vs static-generated website
self-hosted vs hosted solutions
costs
and many more.

I ended up trying to build something very simple, consisting of a static website hosted on GitHub Pages. With this solution, I have been able to cut the cost of any hosting solution, since, being a dev, I am quite comfortable writing in a text editor. But soon some problems arose.

SPA deployment with GitLab

dev@antomor.com (Antonio Morrone) — Fri, 13 Dec 2019 10:53:54 +0100

In the last few projects, I started using GitLab, not only as a git repository server, but also as a DevOps platform. So here I am going to describe a very simple architecture for deploying a single-page application using Docker, docker-compose, and nginx. In this specific project I also used dotnet-core for the back-end API and VueJS as the front-end framework, but it is language-agnostic, meaning that you can replace whatever back-end or front-end you prefer.

Browser Extension Development

dev@antomor.com (Antonio Morrone) — Wed, 20 Nov 2019 17:15:01 +0100

Web extensions or browser plugins can be used to improve browser functionalities. The following examples summarize the different goals they can have:

no-script - to block script served from not-trusted domains
ublock Origin - it is “a wide-spectrum blocker”
dark-mode - it changes the appearance of web pages
React Developer Tools - to inspect react-specific properties of a page that makes use of React.

Anatomy of an extension
#

The main components of a browser extension are: