
#### Import *** could not be resolved Pylance(reportMissingImports)

While working on Python projects with Docker or just simply any Python project, you may sometimes run into a warning indicating missing imports in `Visual Studio Code`.

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-missing-imports/could-not-be-resolved.png" alt="import-could-not-be-resolved">
</div>

You're quite sure you've installed these packages already before... 🤔

#### What could be happening here? 

Sometimes it's because the wrong environment is being used. This could happen when the IDE is closed, and opened again. Sometimes the setting defaults back to the Global system Python, where the package has not been installed.

In cases like this, you may try updating the currently used Python interpreter at the bottom part of the screen to the one where the missing package had been installed. 

For example:

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-missing-imports/change-interpreter.png" alt="change-interpreter">
</div>

Hope this helped! :smile: :thumbsup:


A simple solution to resolve warnings with Pylance(reportMissingImports) missing imports

Missing imports Pylance(reportMissingImports)


<div class="img-blog-right">
	<img src="/assets/images/blog/dbeaver-local-client/dbeaver-logo.png" alt="dbeaver-logo">
</div>

### DBeaver is Awesome!

If you're like me, I use [DBeaver](https://dbeaver.io/) as the database client of choice.

DBeaver is a multiplatform tool for databases and supports a lot of different databases which makes it awesome!  However, there might be times when you run into hiccups while doing some operations, for example, dumping data from a mysql database.

<br>

#### 1. Right click database

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/right-click-database.png" alt="right-click-database">
</div>

#### 2. Click on local client button

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/click-local-client-button.png" alt="click-local-client-button">
</div>

#### 3. Click browse

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/click-browse.png" alt="click-browse">
</div>

#### 4. Click add home

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/click-add-home.png" alt="click-add-home">
</div>

#### 5. Locate `mysql` installation

Locate your mysql local installation, in my case this is in the opt folder of homebrew

Tip: 💡 use `cmd` + `shift` + `.` to reveal hidden files.

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/locate-hidden-file.png" alt="locate-hidden-file">
</div>

eg. path `/opt/homebrew/Cellar/mysql/bin`

It should look something like this:

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/homebrew-cellar-mysql.png" alt="homebrew-cellar-mysql">
</div>

As you'll see, the start button is now enabled!

<div class="img-blog">
	<img src="/assets/images/blog/dbeaver-local-client/local-client-enabled.png" alt="local-client-enabled">
</div>

Congratulations! I hope this helped! 🙌

#### Sources:

- [https://david.raleche.com/web-consulting/how-to-fix-dbeaver-native-client-is-not-specified-for-connection/](https://david.raleche.com/web-consulting/how-to-fix-dbeaver-native-client-is-not-specified-for-connection/)


An article that describes how to fix issues on dbeaver. "Native Client is not specified for connection"

Configure mysql local client in DBeaver


Recently, I implemented a handler to update a list of category strings using the `setState` hook in React. The handler, called `handleSetCategories`, wraps around `setCategories` and looks like this:

```ts
const [categories, setCategories] = useState<Array<string>>([]);

const handleSetCategories = (value: string[]): void => {
  setCategories(value);
};
```

However, throughout my implementation, I ran into a warning where Typescript was inferring the wrong types whenever I tried to update the previous value like so:

<div class="img-blog">
	<img src="/assets/images/blog/set-state-action/set-state-action-error.png" alt="set-previous-state-error">
</div>

#### Solution: Adding SetStateAction

The issue was that the` handleSetCategories` function only accepted the type `value: string[]` as its parameter. However, the value being passed in the above example was a function containing the prev value, which Typescript did not know about.

To fix this issue, I made use of React's `SetStateAction` type, which contains the definition for the function containing the prev value. This is how the updated code looks:

```ts
import { SetStateAction } from 'react';

const [categories, setCategories] = useState<Array<string>>([]);

const handleSetCategories = (value: SetStateAction<string[]>): void => {
  setCategories(value);
};
```

Now that the expected types have been supplied, the Typscript warning has disappeared!

I really hope this short article helped! :thumbsup: :thumbsup:


An article that describes how to fix typescript warning when trying to update a previous value with useState hook.

useState typescript warning: '(prev: any) => any' is not assignable to parameter of type


#### Application container runs before the database is ready

Recently, I've started building a new project with [Django](https://www.djangoproject.com/) in conjunction with docker. I am using `docker-compose` to manage two services namely, the django application and the database (postgresql). I ran into an issue where sometimes the django application container runs before the database is ready. This causes an error where the django application is unable to connect to the database as seen below:

```bash
kalender-api-web-1  |     connection = Database.connect(**conn_params)
kalender-api-web-1  |   File "/usr/local/lib/python3.8/site-packages/psycopg2/__init__.py", line 122, in connect
kalender-api-web-1  |     conn = _connect(dsn, connection_factory=connection_factory, **kwasync)
kalender-api-web-1  | django.db.utils.OperationalError: connection to server at "db" (172.29.0.2), port 5432 failed: FATAL:  the database system is starting up
kalender-api-web-1  |
kalender-api-db-1   | 2022-03-31 13:26:42.168 UTC [25] LOG:  database system was not properly shut down; automatic recovery in progress
kalender-api-db-1   | 2022-03-31 13:26:42.175 UTC [25] LOG:  redo starts at 0/17737E0
kalender-api-db-1   | 2022-03-31 13:26:42.175 UTC [25] LOG:  invalid record length at 0/1773818: wanted 24, got 0
kalender-api-db-1   | 2022-03-31 13:26:42.175 UTC [25] LOG:  redo done at 0/17737E0 system usage: CPU: user: 0.00 s, system: 0.00 s, elapsed: 0.00 s
kalender-api-db-1   | 2022-03-31 13:26:42.212 UTC [1] LOG:  database system is ready to accept connections

```

Although this issue happens intermittently, restarting docker-compose everytime this happens can get quite tedious especially if you're working on the application on a day to day basis. 🥵

So, is there anything we can do to tell the django application to wait for the database? 🤔

#### Solution

After some research, I found that `docker-compose` actually supports healthchecks. A healthcheck is essentially a way to validate if a service is running. We are able to check if a specific container is healthy given some condition. We achieve this by using `depends_on` in conjunction with `healthcheck` as follows:

```yaml
version: '3.9'

services:
  web:
    build: .
    volumes:
      - .:/code
    ports:
      - '8000:8000'
    depends_on:
      db:
        condition: service_healthy
    restart: always
  db:
    image: postgres
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - '5432:5432'
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready']
      interval: 10s
      timeout: 5s
      retries: 5
volumes:
  pgdata:
```

In the example above, the healthcheck property has a condition to check if the `service_healthy`. We are testing for the condition "pg_isready" and if the database is ready, that's the only time the django application container starts running.

I really hope this short article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:

#### Sources:

- [https://stackoverflow.com/questions/31746182/docker-compose-wait-for-container-x-before-starting-y](https://stackoverflow.com/questions/31746182/docker-compose-wait-for-container-x-before-starting-y)
- [https://github.com/peter-evans/docker-compose-healthcheck](https://github.com/peter-evans/docker-compose-healthcheck)


An article that describes a solution for raise conditions when running an application with a database in docker

Wait for database to finish before running application in docker-compose


#### window.addEventListener is not a function

Recently, I've been working on a adding an event listener on a React Native Application to keep track of window events.

```js
// reset state the code in state if the user clicked on the back button in browser
useEffect(() => {
  const popState = window.addEventListener('popstate', (e) => {
    const { state } = e;
    if (state !== null) {
      handleSetPasswordResetInfo({ code: '' });
    }
  });
  // remove listener
  return () => {
    window.removeEventListener('resize', popState);
  };
}, []);
```

While the behavior works on the browser version, I ran into the following error when running the tests in `jest`:

```bash
FAIL  __tests__/ResetCodeScreen.test.jsx
  ● Test suite failed to run

    TypeError: window.addEventListener is not a function
```

After some investigation, I found that `window.addEventListener` is a case of something that exists in the browser, but isn't nessesarily implemented in React Native.

#### Solution

I was able to resolve the issue by explicitly adding a checking for the platform like so:

```js
if (Platform.OS === 'web') {
  // insert logic here
}
```

Luckly, React Native provides a straight forward way of checking the platform. By checking the platform, are able to make sure that the code inside the statement is only being used in the browser. `Plaform.OS == 'web'`. In fact, we can also check the platform if it's `ios` or `android`.

Example snippet:

```js
import { Platform } from 'react-native';
...

  if (Platform.OS === 'web') {
    // reset state the code in state if the user clicked on the back button in browser
    useEffect(() => {
      const popState = window.addEventListener('popstate', (e) => {
        const { state } = e;
        if (state !== null) {
          handleSetPasswordResetInfo({ code: '' });
        }
      });
      // remove listener
      return () => {
        window.removeEventListener('resize', popState);
      };
    }, []);
  }
```

#### Result

```bash
 PASS  components/Ui/PasscodeScreen/__test__/PasscodeScreen.test.jsx (6.476s)
  Testing Passcode Screen
    ✓ renders correctly (158ms)
```

There you have it! I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:

#### Sources:

- [https://stackoverflow.com/questions/66145171/i-had-an-issue-today-with-window-addeventlistener-and-react-native](https://stackoverflow.com/questions/66145171/i-had-an-issue-today-with-window-addeventlistener-and-react-native)
- [https://reactnative.dev/docs/platform-specific-code](https://reactnative.dev/docs/platform-specific-code)


An article that describes a the fix for the window.AddEventListener is not a function.

React Native: window.AddEventListener is not a function


#### Password authentication was removed

Recently, I've been trying to clone a repository on [Github](github.com). I ran into an issue where I couldn't clone the repository because password authentication is no longer supported.

```bash

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information.

```

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/use-personal-token.png" alt="github-auth-error">
</div>

The error above has to do with a policy change in Github's security. The support for using regular username and password has been removed and instead been replaced with a personal access token. Click [here](https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/) for more information.

In this article, I'll be walking through the steps to take when faced with this error. Note that the steps below are for MacOS users.

#### Generating a personal access token

Follow these steps to generate a personal access token. Make sure to keep note of the generated personal access token as this will be used in the succeeding steps.

#### 1. On the Github dashboard, click on Settings.

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/settings.png" alt="settings">
</div>

#### 2. Click on Developer Settings

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/developer-settings.png" alt="developer-settings">
</div>

#### 3. Click on Personal access tokens

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/personal-access-token.png" alt="personal-access-tokens">
</div>

#### 4. Click on Generate new token

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/generate-new-token.png" alt="generate-new-token">
</div>

#### 5. Enter password

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/enter-password.png" alt="enter-password">
</div>

#### 6. Add a note for the token, configure expiry and the allowed permissions.

In this example, we are leaving all the persmissions is checked, and with no expiry

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/token-configuration.png" alt="token-configuration">
</div>

#### 7. Click on Generate Token

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/generate-token-button.png" alt="generate-token-button">
</div>

#### 8. Copy the token

Copy the token. Store it somewhere safe where only you can access it. You will need this personal token in the next step.

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/copy-token.png" alt="generate-token-button-2">
</div>

#### Using the Personal Token instead of password

If this is your **first time ever** to clone a respository in Github then follow these steps. If not, then proceed to the instructions on: Replacing the Credentials in Keychain access, below.

#### 1. Re-clone the respository.

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/re-clone.png" alt="re-clone">
</div>

#### 2. Paste the personal access token in the password prompt

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/paste-personal-token.png" alt="paste-personal-token">
</div>

#### 3. Congratulations, you have successfully cloned the repository

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/clone-success.png" alt="clone-success">
</div>

#### Replacing the Credentials in Keychain access

If you've **cloned a few repositories** before in Github, it's likely that your credentials are already stored in the Keychain. Follow these steps to configure Keychain Access.

#### 1. Open Keychain access.

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/spotlight-keychain-access.png" alt="keychain-access">
</div>

#### 2. On Keychain Access, search `git`

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/search-git.png" alt="search-git">
</div>

#### 3. Click on `github.com`

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/click-github.png" alt="click-github">
</div>

#### 4. Tick the checkbox `show password`.

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/keychain-access-password.png" alt="keychain-access-password">
</div>

#### 5. Enter system password, then click on Always allow

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/always-allow.png" alt="always-allow">
</div>

#### 6. Paste the Token into the password field

Copy the token from the previous guide on generating a personal access token. Then paste it in the input as seen below:

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/paste-token.png" alt="paste-token">
</div>

#### 7. Congratulations, you have successfully cloned the repository

Re-clone the repository

<div class="img-blog">
	<img src="/assets/images/blog/github-auth-error/clone-success-keychain-access.png" alt="clone-succcess-keychain-access">
</div>

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes the fix for the github error where the support for password authentication was removed. The article shows the step by step guide to fix the issue for MacOS users

Github: Support for password authentication was removed


#### Learn once, write anywhere.

[React Native](https://reactnative.dev/) is an amazing tool for writing cross plaform applications. If you're thinking about building applications with the the capability to support multiple platforms, then this is the tool for you! :raised_hands:

Recently, I've been working on a feature that diplays a list of elements into the view port in a grid-style format. At first, I was able to solve the issue by adding the `grid-gap` property to the styles prop like so:

```js
{
  flex: 1,
  flexDirection: "row",
  flexWrap: "wrap",
  ...
  gap: '1.25rem'
}
```

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced.png" alt="grid-gap">
</div>

However as I was implementing tests, I discovered that React Native doesn't support the usage of `grid-gap`.

The test would fail with the following error:

```bash

Invariant Violation: "gap" is not a valid style property.

```

Another solution I tried was to add a `justifyContent: 'space-between'`, this fix certainly fixes the issue, but when less elements were displayed in the bottom of the viewport, the spacing would be too far off.

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced-space-between.png" alt="grid-gap-2">
</div>

After another hour of trial and error, I was able to find another way. If you are using the `map` function to render your component, you can try the following code:

```jsx
// Change to the number of columns in your grid
const numCols = 4;

// Change to the spacing for each item
const spacing = '1.25rem';

const parentStyles = {
  flex: 1,
  flexDirection: 'row',
  flexWrap: 'wrap',
};

const childStyles = (index) => {
  let styles = {
    marginBottom: spacing,
    marginLeft: index % numCols !== 0 ? spacing : 0,
  };

  return styles;
};

// Parent View
<View style={parentStyles}>
  {
    // List of child views to render
    contents.map((content, index) => (
      // add a margin of 'spacing' to the bottom of all cards
      // will supply a left-margin to all cards in between the gap,
      // everytime a card is NOT divisible numCols, add a margin to the left
      <View style={childStyles(index)}>
        <Card key={index} content={content} />
      </View>
    ))
  }
</View>;
```

The result may be the same, but it certainly fixed the issue. You can configure the grid-gap by changing the `spacing` variable. You can also configure the number of columns by changing the `numCol` variable.

<div class="img-blog-center">
	<img src="/assets/images/blog/reactnative-spacebetween/grid-spaced.png" alt="grid-gap-3">
</div>

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes a solution to add equal spacing between views using React Native Styling.

React Native: Space Between Styling


Recently, I've been looking into learning [React](https://reactjs.org/). React is javascript library developed and maintained by Facebook.

<div class="img-blog-right width-40">
	<img src="/assets/images/blog/vs-code-react/vs-code-react.png" alt="React">
</div>

It is mainly used to create user interfaces, but can also be used to build mobile applications.

In this article, I will be sharing some of the configurations and plugins for [Visual Studio Code](https://code.visualstudio.com/) to make developing applications in React way faster.

#### 1. Emmet for React

[Emmet](https://emmet.io/) is a plugin for text editors to improve the html css workflow. It comes with a series of shortcuts to automatically generate html and css.

Javascipt XML or [JSX](https://www.w3schools.com/react/react_jsx.asp#:~:text=JSX%20stands%20for%20JavaScript%20XML,and%20add%20HTML%20in%20React.) is a syntax extension to Javascript, which mainly used in developing components in React. Although VS code comes with Emmet out of the box, it does not immediately support JSX.

The good news is, you can enable Emmet for React using following steps:

#### 1. Go to the settings page in VS Code

<div style="width: 100%;">
	<img src="/assets/images/blog/vs-code-react/settings-page.png" alt="settings">
</div>

#### 2. Go to the `Workspace Settings` tab

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/workspace-settings.png" alt="settings">
</div>

#### 3. Under `Extensions` look for `Emmet`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/emmet-boxed.png" alt="settings">
</div>

#### 4. Click on `"Edit in settings.json"`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/settings.png" alt="settings">
</div>

#### 5. Add the following lines of code to `"settings.json"`

```json
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}
```

Success! Emmet should now be working!!! :raised_hands:

#### 2. Prettier Plugin

[Prettier](https://prettier.io/docs/en/why-prettier.html) is an opinionated code formatter that enforces consistent style by parsing the code. It is easy to adopt; has low overhead; and saves time and energy on code reviews.

To install Prettier you can follow these steps:

#### 1. In the side panel click on the Extensions icon

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/extensions.png" alt="settings">
</div>

#### 2. In the search bar, search for `Prettier`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/search-prettier.png" alt="settings">
</div>

#### 3. Install `Pretter`

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/install-prettier.png" alt="settings">
</div>

#### 4. To verify prettier is installed, you should see the following on the bottom of the code editor

<div class="img-blog">
	<img src="/assets/images/blog/vs-code-react/prettier-verify.png" alt="settings">
</div>

Success! Prettier has now been installed!! :raised_hands: :clap:


An article that shows how to customize VS code to improve productivity with React

Setting up Visual Studio Code for Developing React Applications

[Jekyll](https://jekyllrb.com/) is an amazing tool for building static websites. What I love about Jekyll is that you can easily deploy a simple website without the need for a database.

<div div class="img-blog-right">
  <img src="/assets/images/blog/jekyll.png" alt="Index">
</div>

You can also host it for free using [Github Pages](https://pages.github.com/) which makes process way more convenient.

Recently I've found the time to restructure my personal webpage built with Jekyll.

While restructuring the `pages` directory, I ran into an issue where the page would return `Index of /posts/` instead of the page specified as the `index`.

<div div class="img-blog">
  <img src="/assets/images/blog/index-of-posts.png" alt="Index">
</div>

After an hour or two of debugging, I found that the issue had to do with how Jekyll reads [front matter](https://jekyllrb.com/docs/front-matter/).

```html

--- layout: post-layout title: Lastest Posts order: 3 permalink: /posts/
pagination: enabled: true collection: posts permalink: /:num/ title: Latest
Posts ---
```

Apparently, adding an extra line above the front matter, eg. `empty line` or `comment` or `space` caused Jekyll to skip the file and not include it in the page compilation. A possible reason for this could be because Jekyll tries to look for the `---` in the first line of the `html`. If the `---` is not found the file is skipped.

#### Solution

Removing all extra lines above the front matter resolved the issue.

```html
---
layout: post-layout
title: Lastest Posts
order: 3
permalink: /posts/
pagination:
  enabled: true
  collection: posts
  permalink: /:num/
  title: Latest Posts
---
```

#### TLDR;

When working on a Jekyll project, make sure to remove any trailing characters or spaces at the beginning of your `html` file and before the front matter.

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:

An article shows a possible reason why the index.html page in jekyll isn't rendered

Jekyll: index.html not rendering in page, Index of /page_name/


Recently I've been working on project that uses [Terraform](https://www.terraform.io/) to provision different cloud resources like Dynamodb, S3, and Lambda Functions in [AWS](https://aws.amazon.com/). I ran into an issue where calling `terraform destroy` would produce the following error.

```bash

Error deleting S3 notification configuration: OperationAborted: A conflicting conditional operation is currently in progress against this resource. Please try again.
	status code: 409, request id: W080JFW9XFESM4VE, host id: XXXXXXXXXX+WuqFetNLnzZ7T1oTXV0tzad4lCBQNWG5oxKD+hxocPXd2mpjYBnS1veeI=

```

The error above states that there is a conflicting conditional that prevents the deletion of the S3 bucket resource.

Initial research led me to an article by AWS stating that the issue could be due to eventual consistency. It states that: "Because Amazon S3 is a large distributed system, changes like deleting a bucket can take time to become eventually consistent across all AWS Regions. ... Until the bucket is completely deleted by Amazon S3, you can't use the same bucket name. However, when the bucket is deleted and the name is available, other accounts can use the bucket name."

#### Solution

To solve this issue, I found that appending a random string after the bucket name works. Here's how:

#### Step 1:

Add a random string generator using the `random_string` resource of terraform

```tf

# terraform built in - random string generator
resource "random_string" "id" {
  length = 5
  special = false
  upper = false
}

```

For this example we specify a length of 5, and no special or upper case characters.

#### Step 2:

Define a your S3 bucket resource appending the result of the random string generator as follows:

```tf

# S3 Bucket for new Documents
resource "aws_s3_bucket" "new_documents" {
  bucket = "my-documents-bucket-${random_string.id.result}"
}

```

This will produce a unique bucket following pattern everytime the bucket is created:

```bash
"my-documents-bucket-abcde"
"my-documents-bucket-rando"
"my-documents-bucket-zcgsa"
```

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes fix and a possible preventive measure against an error on deleting S3 notification configuration when using terraform 

Terraform: Error deleting S3 notification configuration


While working on lazy loaded modules in angular 10, I ran into issues with adding components that use `<router-outlet></router-outlet>` in the template file. The compiler throws the error below even if the `RouterModule` is already defined in the `module.ts` imports:

```bash

Error: src/app/modules/authentication/authentication.component.html:1:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

```

#### Solution

There are two things one must remember when lazy loading modules that use `<router-outlet></router-outlet>`.

##### 1. There is no need to re-import the module class in the `module.ts`, if it is lazy loaded. Angular already knows to load these modules by default.

`main-routing.module.ts`

```typescript

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
...

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
                path: '',
                component: AuthenticationComponent,
                loadChildren: () => import('./../authentication/authentication.module').then(m => m.AuthenticationModule)
            },
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class MainRoutingModule { }

```

`main.module.ts`

```typescript

...
import { CommonModule } from '@angular/common';

import { MainRoutingModule } from './main-routing.module';
import { AuthenticationModule } from '../authentication/authentication.module';

@NgModule({
    declarations: [
        MainComponent
    ],
    imports: [
        CommonModule,
        SharedModule,
        //xxx AuthenticationModule xxx <----- There is no need to import the module here
        MainRoutingModule
    ]
})
export class MainModule { }

```

##### 2. The component using `<router-outlet></router-outlet>` must be added in the `module.ts` declarations list

`main.component.html`

```html
<router-outlet></router-outlet>
```

`main.module.ts`

```typescript
import { MainComponent } from './main.component';
import { SharedModule } from './../shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MainRoutingModule } from './main-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    MainComponent, // <----- DON'T FORGET TO DECLARE THIS
  ],
  imports: [CommonModule, SharedModule, RouterModule, MainRoutingModule],
})
export class MainModule {}
```

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes the fix for an error with lazy loaded modules in angular: 'router-outlet' is not a known element..

Angular Lazy Loading: 'router-outlet' is not a known element


Recently I've been working on a simple api that uses [Django Rest Framework](https://www.django-rest-framework.org/). Instead of using integer ids as the primary key identifier, UUIDs are used. The advantage of this approach is to prevent enumeration attacks where the primary key is easily guessable. In addition to this, using UUIDs also guarantees a unique identifier across all systems.

In Django, we are able to define a path to accept a UUID as follows:

urls.py

```python
from django.urls import path, re_path
from tasks.views import api_root_view, task_view, user_view
from django.conf.urls import url

urlpatterns = [
    path('tasks/<uuid:pk>', task_view.TaskDetail.as_view()),
    ...
]

```

However, I found that the approach above will only work if the UUID supplied matches the specific pattern. This means that supplying an invalid UUID; lets say a UUID that's missing a few characters will always throw a 404 page and will never reach the view.

#### Original

request:

```bash

GET http://localhost:8000/tasks/7cd6fae8-2835-4dac-b44b-53326af162d3

```

response

```json
{
  "success": true,
  "data": {
    "id": "7cd6fae8-2835-4dac-b44b-53326af162d3",
    "title": "Feed the dogs",
    "description": "Remember to feed the dogs at 8AM",
    "deadline": "2021-02-23T16:37:37Z",
    "created_date": "2021-02-27T05:25:35.579628Z",
    "updated_date": "2021-02-27T05:25:35.579688Z",
    "completed": false
  }
}
```

#### Missing few characters

request:

```

GET http://localhost:8000/tasks/7cd6fae8-4dac-b-53326a3

```

response:

```

404 Page not found

```

#### Solution

To solve this problem, we can instead make use of `re_path`, as follows

```python
from django.urls import path, re_path
from tasks.views import api_root_view, task_view, user_view
from django.conf.urls import url

urlpatterns = [
    # accept match any regEx after 'task/'
    re_path(r'^task\/(?P<pk>.+)$', task_view.TaskDetail.as_view()),
]

```

In this example, we can match any regEx after `tasks/` with the `pk`, so that regardless whether the UUID supplied is invalid, the request would still hit the view, and will respond with details not found, instead of a the 404 page.

#### Original

request:

```bash

GET http://localhost:8000/tasks/7cd6fae8-2835-4dac-b44b-53326af162d3

```

response:

```json
{
  "success": true,
  "data": {
    "id": "7cd6fae8-2835-4dac-b44b-53326af162d3",
    "title": "Feed the dogs",
    "description": "Remember to feed the dogs at 8AM",
    "deadline": "2021-02-23T16:37:37Z",
    "created_date": "2021-02-27T05:25:35.579628Z",
    "updated_date": "2021-02-27T05:25:35.579688Z",
    "completed": false
  }
}
```

#### Missing few characters

request:

```bash

GET http://localhost:8000/tasks/7cd6fae8-2835-4dac-b-53326a3

```

response:

```json
{
  "detail": "Not found."
}
```

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes a possible fix for 404 page not found in urls when using UUIDs as the primary key identifier

Django urls UUID 404 page not found


Writing or creating content has always been a crutial part of the web since its beginning. As the web continues to mature, the demand for dynamic, customizable, and flexibile text editors has evolved as well. Gone are the days of `<textarea>` where the content being written is static. Most modern text editors now follow the concept of [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) (What You See Is What You Get), where the content being edited within a form resembles its actual appreance when printed or displayed on screen. As a matter of fact, the open source community offers many free options that suit these needs.

<div class="img-blog-right">
	<img src="/assets/images/blog/angular-editorjs/angular-x-editorjs.png" alt="Angular">
</div>

In this article, we will be looking into an emerging Block-Styled editor, [Editor.js](https://editorjs.io/). We will then walkthough how this tool might be implemented in an Angular application.

#### What is Editor.js?

Editor.js is a Block-Styled editor, that uses `Blocks` as structural units. Unlike traditional text editors, Editor.js returns `Clean Data`. This means that instead of returning data in raw HTML-mark up, the output produced is a JSON formatted object for each `Block`.

Instead of having data returned this way:

```html
<section name="0ed1" class="section section--body section--first">
  <div class="section-divider">
    <hr class="section-divider" />
  </div>
  <div class="section-content">
    <div class="section-inner sectionLayout--insetColumn">
      <h3 name="f8e8" class="graf graf--h3 graf--leading graf--title">
        <br />
      </h3>
      <p name="982b" class="graf graf--p graf-after--h3">
        The example of text that was written in
        <strong class="markup--strong markup--p-strong">one of popula</strong>r
        text editors.
      </p>
      <h3 name="c2ad" class="graf graf--h3 graf-after--p">
        With the header of course
      </h3>
      <p name="83d3" class="graf graf--p graf-after--h3">So what do we have?</p>
    </div>
  </div>
</section>
<section name="d1d2" class="section section--body">...</section>
```

The data is returned this way:

```json
{
  "time": 1550476186479,
  "blocks": [
    {
      "type": "paragraph",
      "data": {
        "text": "The example of text that was written in <b>one of popular</b> text editors."
      }
    },
    {
      "type": "header",
      "data": {
        "text": "With the header of course",
        "level": 2
      }
    },
    {
      "type": "paragraph",
      "data": {
        "text": "So what do we have?"
      }
    }
  ],
  "version": "2.8.1"
}
```

This makes it easier to sanitize, validate, process data on the backend.

Another notable feature of Editor.js is extensibility and pluggability. Each `Block` in Editor.js is provided by a Plugin. This makes Editor.js a more lightweight library as you are installing only the set of tools that are required for your specific needs. For the purpose of this article, we will be utilizing the following commonly used `Blocks`:

1. [embed](https://github.com/editor-js/embed)
2. [header](https://github.com/editor-js/header)
3. [highlight](https://github.com/editor-js/highlight)
4. [list](https://github.com/editor-js/list)

You can also find a list of all available `Blocks` [here](https://github.com/editor-js).

#### Integrating Editor.js with Angular

Before we proceed, this article assumes some basic knowledge of Angular. It also assumes that you have `Angular` and `npm`, already installed in your machine. For those who don't know what `Angular` or `npm` is, you may check it out [here](https://angular.io/), and [here](https://www.npmjs.com/).

#### Step 1: Set up

Create your angular app

```bash

$ ng new angular-editorjs-sample

```

cd into your angular app

```bash

$ cd angular-editorjs-sample

```

Install Editor.js, including some of the commonly used `Blocks`:

```bash

$ npm i @editorjs/editorjs --save
$ npm i @editorjs/header --save
$ npm i @editorjs/marker --save
$ npm i @editorjs/embed --save
$ npm i @editorjs/list --save

```

Install library `@ngneat/until-destroy` to handle component clean ups, and garbage collection

```bash

$ npm i @ngneat/until-destroy --save

```

#### Step 2: Create your Article Editor Component

Create your article-editor component

```bash

$ ng generate component article-editor

```

This should create a folder inside `app` called `article-editor` with the following files:

```bash

▼ app
    ▼ article-editor
        article-editor.component.html
        article-editor.component.scss
        article-editor.component.spec.ts
        article-editor.component.ts
    ...

```

#### Step 2: Define the Editor.js configurations

_Creating external config file:_ In the `article-editor` folder, create the following file: `article-editor.config.ts`

```bash

▼ article-editor
    ...
    article-editor.config.ts

```

_Adding external config file:_ In the `article-editor.config.ts`, copy the following:

```ts
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Embed from '@editorjs/embed';
import Marker from '@editorjs/marker';

export const editorjsConfig = {
  holder: 'editorjs',
  tools: {
    Marker: {
      class: Marker,
      shortcut: 'CMD+SHIFT+M',
    },
    header: {
      class: Header,
      inlineToolbar: ['link', 'bold', 'italic'],
    },
    list: {
      class: List,
      inlineToolbar: ['link', 'bold'],
    },
    embed: {
      class: Embed,
      inlineToolbar: false,
      config: {
        services: {
          youtube: true,
          coub: true,
        },
      },
    },
  },
};
```

`article-editor.config.ts` will contain all the configurations and settings for the different Plugins we want to extend to the editor. For example, the header plugin can be extended using the following configuration:

```ts
...
    header: {
     class: Header,
     inlineToolbar: [
       'link', 'bold', 'italic'
     ]
   },
...
```

#### Step 3: Define the Editor.js Object Instance

_Defining the article-editor component logic:_ Replace the code in `article-editor.component.ts`, with the following code snippet:

```ts
import { Component, OnInit } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { startWith, debounceTime, skip } from 'rxjs/operators';
import { Observable } from 'rxjs';

import EditorJS from '@editorjs/editorjs';
import { editorjsConfig } from './article-editor.config';

@UntilDestroy()
@Component({
  selector: 'app-article-editor',
  templateUrl: './article-editor.component.html',
  styleUrls: ['./article-editor.component.scss'],
})
export class ArticleEditorComponent implements OnInit {
  editorData: any;
  editor: EditorJS;
  editorObserver: MutationObserver;

  constructor() {}

  ngOnInit(): void {
    this.editor = new EditorJS(editorjsConfig);

    this.detectEditorChanges()
      .pipe(debounceTime(200), skip(1), untilDestroyed(this))
      .subscribe((data) => {
        this.editor.save().then((outputData) => {
          this.editorData = JSON.stringify(outputData, null, 2);
        });
      });
  }

  saveEditorData(): void {
    this.editor.save().then((outputData) => {
      this.editorData = JSON.stringify(outputData, null, 2);
    });
  }

  ngOnDestroy(): void {
    this.editorObserver.disconnect();
  }

  detectEditorChanges(): Observable<any> {
    return new Observable((observer) => {
      const editorDom = document.querySelector('#editorjs');
      const config = { attributes: true, childList: true, subtree: true };

      this.editorObserver = new MutationObserver((mutation) => {
        observer.next(mutation);
      });

      this.editorObserver.observe(editorDom, config);
    });
  }
}
```

The code snippet above contains all the imports, functions, and set up needed to render Editor.js within the component. The code will be explained further below in the code walkthrough.

#### Step 4: Adding Markup

_Adding html_: In the `article-editor.component.html`, file copy the following mark up:

```html
<div class="articleEditor">
  <div class="panelOne">
    <h2>Editor JS</h2>
    <div id="editorjs"></div>

    <button (click)="saveEditorData()">Save Article</button>
  </div>

  <div class="panelTwo">
    <h2>Clean Data</h2>
    <div class="articleDataContainer">
      <pre [innerHTML]="editorData"></pre>
    </div>
  </div>
</div>
```

Note here that `<div id="editorjs"></div>`, is where all the magic happens. This is what renders `Editor.js`. Without this `id="editorjs"`, the editor will not load.

You will find the reference to `id="editorjs"` in the `holder` key, in `article-editor.config.ts`:

```ts

...
export const editorjsConfig = {
  holder: 'editorjs',
...

```

_Adding Styles:_ In the `article-editor.component.scss` file, copy the following mark up:

```scss
.articleEditor {
  background: rgb(233, 233, 233);
  height: 100%;
  padding: 3em;
  display: flex;
  font-family: 'Lato';
}

#editorjs {
  background: white;
  min-height: 700px;
}

button {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

::ng-deep .ce-block__content,
::ng-deep .ce-toolbar__content {
  max-width: unset;
}

.panelOne {
  flex: 0 0 50%;
}

.panelTwo {
  flex: 1;
  margin: 0 3em 0 3em;
}

.articleDataContainer {
  background: white;
  min-height: 700px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

pre {
  white-space: pre-wrap;
  word-break: keep-all;
}
```

Note that we can use `::ng-deep` to overwrite Editor.js specific styles, to make the editor span the entire width of the container.

```scss
::ng-deep .ce-block__content,
::ng-deep .ce-toolbar__content {
  max-width: unset;
}
```

#### Step 5: Adding article-editor to app-component

Replace the contents in the `app.component.html` with the following snippet:

```html
<app-article-editor></app-article-editor>
```

#### Step 5: Test your app

```bash

$ ng serve --open

```

#### Code Walkthrough:

#### Mutation Observer

Angular comes with a built-in detection that can keep track of any changes on `input` fields. Please see [FormControls](https://angular.io/api/forms/FormControl), and [ReactiveForms](https://angular.io/guide/reactive-forms). This is feature comes in handy when dealing with `<textarea>`, `<input>`, or `<form>` elements. However for this example, we are not able to utilize this feature out of the box.

The way Editor.js handles adding content is by appending a new `<div>` element to the DOM whenever new content data is written. So in order for the application to detect changes, we can instead make use of a `MutationObserver` to emit an event every time a new element or `<div>` is added to the DOM.

_What is a MutationObeserver?_

> The [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) is an interface provides the ability to watch for changes being made to the DOM tree.

The following code shows how the `MutationObserver` is being used:

```ts

detectEditorChanges(): Observable <any> {
    return new Observable(observer => {
      const editorDom = document.querySelector('#editorjs');
      const config = { attributes: true, childList: true, subtree: true };

      this.editorObserver = new MutationObserver((mutation) => {
        observer.next(mutation);
      })

      this.editorObserver.observe(editorDom, config);
    })
}

```

In the following code snippet, we wrap the output of the `MutationObserver` in an `Observable`. This allows the application to subscribe to an event emitted, every time the user types new content into the editor. Please see the following code:

```ts

ngOnInit(): void {

    this.editor = new EditorJS(editorjsConfig)

    this.detectEditorChanges().pipe(
        debounceTime(200),
        skip(1),
        untilDestroyed(this)
    ).subscribe(data=>{
        this.editor.save().then((outputData)=>{
        this.editorData =  JSON.stringify(outputData, null, 2);
        });
    });
}

```

When the article-editor component is initialized, we immediately set up a new subscription to detect new changes and emit the clean data output. We then assign the `outputData` to the `editorData`. This way we are able to load data from the editor dynamically as the input from the editor changes.

#### The Final Product

<div class="img-blog">
	<img src="/assets/images/angular-editorjs/editorjs.gif" alt="Angular">
</div>

There you have it. You have successfully integrated `Editor.js` with `Angular`. :clap: :clap: :clap:

For more details, you may visit the sample project. [https://github.com/eddrichjanzzen/angular-editorjs-sample](https://github.com/eddrichjanzzen/angular-editorjs-sample)


An article that walks through how to integrate Editor.js into an Angular application

Integrating Editor.js with Angular


#### Boto3: Unable to locate credentials

Recently I've been working on a Dockerized Python application that connects to AWS resources using the [boto3](https://pypi.org/project/boto3) library. I stumbled upon an error where the app could not find the aws credentials within the docker container.

```bash

botocore.exceptions.NoCredentialsError: Unable to locate credentials

```

Later on, I realized that the problem lies in the fact that the docker is unable locate the credentials from the `.aws` folder. As much as docker is concerned, there are no credentials to be found within the running container.

#### Solution

The solution I've found to is add the configuration as follows:

If you are using `docker run`:

```bash

 docker run -v ~/.aws/:/root/.aws:ro your_image -e AWS_PROFILE=default

```

If you are using a `docker-compose.yml` file,

```yaml
version: '3'

services:
  service-name:
    image: docker-image-name:latest
    environment:
      - AWS_PROFILE=default
    volumes:
      - ~/.aws/:/root/.aws:ro
```

#### Explanation:

`~/.aws/:/root/.aws:ro` is a volume definition that mounts the `.aws` folder of your local machine to the root of our docker container. `:ro` stands for a readonly volume, and we must make the volume readonly so that we are sure the credentials cannot be modified.

We set our `environment` as `AWS_PROFILE=default` so that boto3 will know to read the configuration for the `default` environment. For multiple environments you can configure `AWS_PROFILE=<your environment here>`

I hope this article will be of help to anyone who encounters a similar issue. :smile: :thumbsup:


An article that describes the fix for boto3: botocore.exceptions.NoCredentialsError Unable to locate credentials with Docker images.

AWS: boto3 "Unable to locate credentials" with Docker


#### Data Visualization

As business needs continue to evolve, being able to visualize data is of paramount importance. More than just presenting the numbers to our users; we also need to make it easy for them to understand what those numbers mean. Data visualization is a vast field that deals with making data easier to understand. There are numerous ways to present data such as bar graphs, line charts, and pie charts. However, these methods can sometimes be quite limited.

For example: What if the data can be better represented using a color spectrum?

In this article, I have used [D3.js](https://d3js.org/) and [Angular](https://angular.io/) to create a simple reusable component for a Color Scale. Let's dive in!

#### D3.js and Angular

[D3.js](https://d3js.org/) or Data Driven Documents is a Javascript library for manipulating documents based on data. In simple terms, D3 is a library that helps you bring your data to life. With D3, creating simple yet amazing visualizations are possible with use of a browser.

[Angular](https://angular.io/) is a platform built by Google for building mobile and desktop web applications. It is framework and development platform for creating efficient and sophisticated single-page apps.

Combining D3 with Angular, we are able to take advantage of a powerful visualization tool and the reusability of components. Lets jump in!

#### Color Scale Component

#### Set up and Installation:

Install the following dependencies: `d3` and `ng-color-scale`

```bash

$ npm i d3
$ npm i ng-color-scale

```

In your `app.module.ts`, add the following:

```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// NgColorScaleModule
import { NgColorScaleModule } from 'ng-color-scale';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // NgcolorScaleModule

    NgcolorScaleModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

#### Usage:

In your `app.component.html` add the following:

Example 1:

```html
<h1>Gender Bias</h1>

<app-color-scale
  [data]="-0.799"
  [leftLabel]="'Feminine'"
  [rightLabel]="'Masculine'"
  [middleLabel]="'Neutral'"
  [minVal]="-1"
  [maxVal]="1"
  [colorList]="['#FF6347', '#D53E4F','#090979','#0000FF']"
  [displayMeta]="'Your article is '+ '<b>Feminine</b>'"
>
</app-color-scale>
```

Output:
![Gender](/assets/images/blog/spectrum-scale/gender-bias.png)

Example 2:

```html
<h1>Sentiment Analysis</h1>
<app-color-scale
  [data]="0.55"
  [leftLabel]="'Negative'"
  [rightLabel]="'Positive'"
  [middleLabel]="'Neutral'"
  [minVal]="-1"
  [maxVal]="1"
  [colorList]="['#9E0142', '#D53E4F',
	                    '#F46D43', '#FDAE61',
	                    '#FEE08B', '#FFFFBF',
	                    '#E6F598', '#ABDDA4', 
	                    '#66C2A5', '#6AA84F',
	                    '#38761D']"
  [hideAxis]="true"
  [displayMeta]="'Your sentiment score is '+ '<b>Positive</b>'"
>
</app-color-scale>
```

Output

<div class="img-blog">
	<img src="/assets/images/blog/spectrum-scale/sentiment-analysis.png" alt="sentiment-analysis">
</div>

#### Wrapping up

There you have it. You have successfully added your custom color scale. :clap: :clap: :clap:

For information and a more detailed documentation, you can visit the npm package at: [https://www.npmjs.com/package/ng-color-scale](https://www.npmjs.com/package/ng-color-scale)


A Color scale component implemented using D3.js and Angular. This is complete with example code and usage steps.

Color Scale using D3.js and Angular


The .NET ecosystem has always been a widely used platform for developing handsdown awesome applications! With the .NET stack alone there is a wide spectrum of projects that can be developed ranging from APIs (via [ASP .NET](https://dotnet.microsoft.com/apps/aspnet)), mobile apps, (via [Xamarin](https://dotnet.microsoft.com/apps/xamarin)), and even Windows Applications, (via [WPF](https://docs.microsoft.com/en-us/dotnet/framework/wpf/getting-started/introduction-to-wpf-in-vs)). With a history of being Windows specific, .NET has evolved over the years to allow open source. This revolutionary change gave rise to its increased in popularity as a development platform.

#### Dapper

Most modern .NET Web applications make use of Entity Framework as their ORM tool. An ORM or Object Relational Mapping is a development pattern that hides or encapsulates the data source by mapping the data into objects. There may advantages to adopting this type of pattern. For one, it enables developers to work with using objects rather than focusing on underlying database tables and columns where the data is stored. Not only does this provide greater benefits to how developers write their code, it also elimates the need for most of the boiler plate data acesss code that developers usually write. [read more](https://en.wikipedia.org/wiki/Object-relational_mapping)

In today's article we will be talking about a less conventional implementation of an ORM. We will be talking about the Dapper Micro ORM.

#### What is Dapper?

In simple terms, Dapper is a object mapper for .NET. It owns the title fo "King of Micro ORM". It is virtually as fast as using a raw ADO.NET data reader. It allows one to be very flexible with writing SQL queries themselves thereby ensuring optimal performance. [read more](https://dapper-tutorial.net/dapper)

Unlike the full-blown ORMs (ei, [NHibernate](https://nhibernate.info/), [EntityFramework](https://docs.microsoft.com/en-us/ef/ef6/), or [SQLAlchemy](https://www.sqlalchemy.org/)), Dapper focuses more on mapping the data to its code representation, leaving the other configurations upto the developer. This allows for some flexibility in the way the data is queried/manipulated. This increased flexibility however, comes with some benefits and drawbacks. Lets go over some of them.

#### The Advantages

1. Faster Performance.

- Being able to map the data directly to its code representation means less time spent on other tasks. Since micro-ORMS allow for configuration of the SQL scripts, it is possible to write more SQL optimized scripts instead of relying on the autogenerated SQL scripts by the regular ORMs. This thereby increases speed and performance.

2. Lighter Weight.

- Sometimes setting up a full blown ORM might be too much. Especially for smaller projects that only use a few entities, a lot of the functionalities provided by the regular ORMs are not needed.

#### The Disadvantages

1. Database Migrations.

- Regular ORMs usually come with a built in migration tool. Dapper on the otherhand does not. There is a need for one to set up a migration tools especially for larger projects. However, there are ways around this such as using [DbUp](https://dbup.github.io/), or [Schema Compare](https://www.devart.com/dbforge/sql/schemacompare/) available in Visual Studio.

2. Working with Validation.

- Micro ORMs focus more on mapping the data and fast performance at the expense of features such as validation. For apps that rely heaviliy on validation, it would be recommended to stick to using regular ORMs.

#### When should I consider using a micro-ORM?

It depends. It helps to carefully assess the requirments and to do proper research before making any decisions.

If you're developing a small utility application where performance of critical importance, perhaps using a micro ORM would come to be a good move. :sunglasses:


A short article about Dapper Micro ORM. Also outlines the advantages and disadvatanges of using a micro ORM and traditional ORM.

Dapper Micro ORM


The advent of technology has produced many different programming languages that developers can use. From the low level languages such as C, C++, and Assembly Language, to the more high level languages such as Ruby and Python, indeed, technology has reached new heights.

<div class="img-blog-right">
	<img src="/assets/images/blog/python-logo.png">
</div>

One of the emerging programming languages in modern day is Python. It has gained its popularity for being simple yet at the same time very expressive. It is simple in the sense that the code resembles how humans think, which makes it very human understandable. It is expressive in the sense that it enables developers to write fewer lines of code for tasks that require more code in other languages. For these reasons, Python has been adopted as a language commonly used to build simple yet powerful scripts. As a matter of fact, it has become one of the staple tools in the field of data science; used to perform complex tasks such as data cleaning, machine learning, and even building neural networks.

However, one of the underrated capabilities that not everyone sees, is how Python can be used to create simple and powerful APIs. Using libraries such as Python Django, Python Flask, one can develop simple back-ends fewer lines of code compared to other languages. The simple yet expressive nature of Python make it one of the few ideal languages for microservice architectures.

#### Python Falcon

<div class="img-blog">
	<img src="/assets/images/blog/falcon.jpg">
</div>

In today's article, we will be talking about an emerging framework for building simple APIs. We will be going through how to set up a simple API with Create, Read, Update, and Delete functionalities using the [Python Falcon](https://falconframework.org/#sectionAbout) framework.

What is Falcon?

Falcon is a minimalist microframework designed to support the demanding needs of large scale microservices. It is fast and reliable because it compiles with Cython when available. Based on benchmarking tests, Falcon is able to outperform some of the famous microframeworks such as Bottle, Flask, and Werkzeug.

The speed up is just insane. For large scale microservices with high traffic, Falcon is the way to go. :raised_hands: [Read more](https://falconframework.org/#sectionBenchmarks)

#### Setting up

Falcon's architecture follows certain concepts from the REST architectural style. Important to both REST and the falcon framework is the concept of "resource". A resource is simply everything the system would need that can be accessed by a url.

Behind this is a "resource controller" which is controls how the resources behave. It is in charge of orchestrating the requested action and composing a valid result.

Below is an example of a resource controller:

```python
class ProductResource(object):

	def on_get(self, req, resp):

		try:
			logger.info("Performing get all products...")

			resp.body = ujson.dumps({'products': products})
			resp.status = falcon.HTTP_200

		except Exception as e:

			logger.error(e, exc_info=True)

			resp.body = ujson.dumps({"error": e})
			resp.status = falcon.HTTP_502


	def on_get_product(self, req, resp, product_id):

		try:
			logger.info("Performing get product...")

			product = [p for p in products if str(p['id']) == str(product_id)]

			if product == []:

				resp.body = ujson.dumps({'error': 'product not found.'})
				resp.status = falcon.HTTP_404

			else:

				resp.body = ujson.dumps({'products': product[0]})
				resp.status = falcon.HTTP_200



		except Exception as e:

			logger.error(e, exc_info=True)

			resp.body = ujson.dumps({"error": e})
			resp.status = falcon.HTTP_502


	def on_post(self, req, resp):

		try:
			logger.info("Performing post request...")

			body = req.context['request']

			product = {
				'id': body['id'],
				'name': body['name'],
				'stock' : body['stock'],
				'price' : body['price']
			}

			products.append(product)

			resp.body = ujson.dumps({
				'products': product,
				'status': 'CREATED OK'
			})


			resp.status = falcon.HTTP_200

		except Exception as e:

			logger.error(e, exc_info=True)

			resp.body = ujson.dumps({"error": "connection error"})
			resp.status = falcon.HTTP_502


	def on_put_product(self, req, resp, product_id):

		try:
			logger.info("Performing put request...")

			body = req.context['request']

			product = [p for p in products if str(p['id']) == str(product_id)]

			if product == []:

				resp.body = ujson.dumps({'error': 'product not found.'})
				resp.status = falcon.HTTP_404

			else:

				product[0]['name'] = body['name']
				product[0]['stock'] = body['stock']
				product[0]['price'] = body['price']

				resp.body = ujson.dumps({
					'products': product,
					'status': 'UPDATED OK'
				})

				resp.status = falcon.HTTP_200

		except Exception as e:

			logger.error(e, exc_info=True)

			resp.body = ujson.dumps({"error": e})
			resp.status = falcon.HTTP_502

	def on_delete_product(self, req, resp, product_id):

		try:
			logger.info("Performing delete request...")

			product = [p for p in products if str(p['id']) == str(product_id)]

			if product == []:

				resp.body = ujson.dumps({'error': 'product not found.'})
				resp.status = falcon.HTTP_404

			else:

				products.remove(product[0])

				resp.body = ujson.dumps({
					'products': product,
					'status': 'DELETED OK'
				})

			resp.status = falcon.HTTP_200

		except Exception as e:

			logger.error(e, exc_info=True)

			resp.body = ujson.dumps({"error": e})
			resp.status = falcon.HTTP_502

```

The code above shows different functions that correspond to certain HTTP methods for a products API. For example: `on_get_product`, `on_post_product`, `on_put_product`, `on_delete_product`, etc., are functions that implement business logic for creating, reading, updating, and deleting products.

Once the resource controller has been configured, we can then define a file called `app.py`, which will instantiate our product resource controller.

```python
import falcon
import json_utils
from decouple import config
from product_resource import ProductResource


# Declare Falcon Middleware
# RequireJSON will always make sure the application data is in JSON format
# JSONtranslator will translate the stream data from falcon into JSON format
api = falcon.API(middleware=[
			json_utils.RequireJSON(),
			json_utils.JSONtranslator(),
		])

# we define our resource here
product = ProductResource()

api.add_route('/products', product)
api.add_route('/products/{product_id}', product, suffix="product")

```

Note that we can define routes as needed using the `add_route` function.

Lastly, for the API to function efficiently, we must add two middlewares:

`RequireJSON()` and `JSONtranslator`, these middlewares are used to process our json objects. Since Falcon processes request and response data as a stream of bytes, there is a need to perform some serialization to ensure that the data being sent and being serialized in json format; this is handled by `JSONtranslator`. On the otherhand, we must also validate that the request being accepted is in json format; this is handled by `RequireJSON()`

```python
import json
import falcon
import datetime
import decimal

# Middle ware classes for processing json objects


# This will read the stream from the request, then it will decode this data into json format
# If it cannot decode, it will return an TypeError

class JSONtranslator:
    def process_request(self, req, resp):
        """
        req.stream corresponds to the WSGI wsgi.input environ variable,
        and allows you to read bytes from the request body.
        See also: PEP 3333
        """
        if req.content_length in (None, 0):
            return

        body = req.stream.read()

        if not body:
            raise falcon.HTTPBadRequest(
                'Empty request body. A valid JSON document is required.'
            )
        try:
            # You can access the request data using req.context['request']
            req.context['request'] = json.loads(body.decode('utf-8'))

        except (ValueError, UnicodeDecodeError):
            raise falcon.HTTPError(
                falcon.HTTP_753,
                'Malformed JSON. Could not decode the request body.'
                'The JSON was incorrect or not encoded as UTF-8.'
            )

    def process_response(self, req, resp, resource, req_succeeded):
        if 'response' not in resp.context:
            return

        resp.body = json.dumps(
            resp.context['response'],
            default=json_serializer
        )

    def json_serializer(obj):
        if isinstance(obj, datetime.datetime):
            return str(obj)
        elif isinstance(obj, decimal.Decimal):
            return str(obj)

        raise TypeError('Cannot serialize {!r} (type {})'.format(obj, type(obj)))


class RequireJSON(object):

    def process_request(self, req, resp):
        if not req.client_accepts_json:
            raise falcon.HTTPNotAcceptable(
                'This API only supports responses encoded as JSON.',
                href='http://docs.examples.com/api/json')

        if req.method in ('POST', 'PUT'):
            if 'application/json' not in req.content_type:
                raise falcon.HTTPUnsupportedMediaType(
                    'This API only supports requests encoded as JSON.',
                    href='http://docs.examples.com/api/json')
```

There you have it. You have just completed setting up your Falcon API. :clap: :clap: :clap:

#### Wrapping up

Python Falcon is a simple framework that boasts to be blazing fast and highly reliable. It is also easily extensible which makes it one of the ideal choices for large scale microservices.

For more details, you may visit my sample project. [https://github.com/eddrichjanzzen/python-falcon-sample](https://github.com/eddrichjanzzen/python-falcon-sample)


A short article about implementing API using Python Falcon Micro Framework.

Implementing simple API using Python Falcon


#### Macbook Pro Mid 2012 "13

The Macbook Pro Mid 2012 "13 (non-retina), is arguably one of the most versatile models released by Apple. Not only does it offer a wide possibility of upgradability; it also offers built-in ports without needing to buy those external dongles. With 2 USB ports, a Lightning Cable port, an Ethernet port, a Firewire 800 port, a Headphone jack, and SD Card slot, I could attest that this model is definitely designed for pros! The device is indeed very flexible with most of the important parts being easily replaceable/upgradable. As a matter of fact, with a few upgrades the device can still be up to par with todays standards.

At the time of this writing, I have went along to upgrade my machine by replacing the original 2 x 2Gb DDR3 RAMs with 2 x 8Gb DDR3 RAMs to get a maximum of 16Gb memory. I also switched out the original HDD with to an SSD to increase processing speed. Lastly, I've also went along to buy a bracket or "caddy case" to replace the optical drive with additional storage.

#### Bootcamping this Device

<div class="img-blog">
	<img src="/assets/images/blog/bootcamp.png" alt="Bootcamp">
</div>

One of the problems I've encountered when trying to Bootcamp this device was a black screen after the download when booting the system after following along with Bootcamp Assistant.

There are two important caveats to consider when bootcamping this Macbook model using Bootcamp Assistant. (especially if you're using additional storage like me: with the bracket or "caddy case".)

1. Install Windows on Main Storage slot

- You can only run and install Windows on the main storage slot, not on the secondary slot. This means you can't run Windows from the secondary storage by default.

2. Install Windows with Optical Drive attached

- You must install Windows with the optical drive attached because the system checks for a Windows installer CD before checking for a USB flash drive. This means that if you have the "caddy case" connected you must remove it and put back your optical drive. Leaving the optical drive slot unconnected also will not work. The optical drive must be connected for the installation to work.

Following these two steps helped me Bootcamp my machine without any hiccups.
:clap: :clap: :clap:


A short article about fixing that black screen when trying to Bootcamp to a Mid2012 Macbook Pro.

Fix Black Screen in Windows 10 Bootcamp Assistant


#### This is a test post for the beginning of my blog

```python
  print "Hello world"

  def hello():
    return "hello world!"
```

#### Jemojis!!

:sunglasses: :sunglasses: :sunglasses:


A test post for the beginning of my blog.

Tags

Latest Posts

Missing imports Pylance(reportMissingImports)
tech python

Configure mysql local client in DBeaver
others

useState typescript warning: '(prev: any) => any' is not assignable to parameter of type
react

Wait for database to finish before running application in docker-compose
tech django python

React Native: window.AddEventListener is not a function
tech react

Github: Support for password authentication was removed
tech

React Native: Space Between Styling
tech react

Setting up Visual Studio Code for Developing React Applications
tech react

Jekyll: index.html not rendering in page, Index of /page_name/
tech jekyll

Terraform: Error deleting S3 notification configuration
tech aws terraform

Angular Lazy Loading: 'router-outlet' is not a known element
angular tech

Django urls UUID 404 page not found
python tech

Integrating Editor.js with Angular
angular tech

AWS: boto3 "Unable to locate credentials" with Docker
tech aws python

Color Scale using D3.js and Angular
tech angular

Dapper Micro ORM
dotnet tech

Implementing simple API using Python Falcon
python tech

Fix Black Screen in Windows 10 Bootcamp Assistant
tech

Hello World!!
tech

Tags

Latest Posts

.css-1j1i25b{padding-top:var(--chakra-space-2);padding-bottom:var(--chakra-space-2);}Missing imports Pylance(reportMissingImports)techpython

Missing imports Pylance(reportMissingImports)
tech python