teleren/devto huggingface dataset:
Fix AWS amplify angular app error on Access Denied error
Tags: angular, aws, frontend, angular2
Published: 2020-09-20 16:05:36

---
title: Fix AWS amplify angular app error on Access Denied error
published: true
date: 2020-09-19 14:32:34 UTC
tags: angular,aws,frontenddevelopment,angular2
canonical_url: https://medium.com/@victorleungtw/fix-aws-amplify-angular-app-error-on-access-denied-error-73c9476f9552
---

When deploy your angular app on AWS amplify, the first landing page is able to load. However, when you defined a path in your router, and try to access it, you would hit Access Denied error:

![](https://cdn-images-1.medium.com/max/1024/0*lLriqc-Hahb4goHm.png)

The solution is to navigate to AWS console, select “ **Rewrites and redirects** ”, add a new rewrite and redirects, click on “ **Open text editor** ”, and add the below rule:

```
[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]
```

![](https://cdn-images-1.medium.com/max/1024/0*uZ2shG4B8tpVvD6J.png)

Try again to access your url, it should work now.

_Originally published at_ [_https://victorleungtw.com_](https://victorleungtw.com/fix-aws-amplify-angular-app-error-on/) _on September 19, 2020._
JavaScript For VR
Published: 2020-09-19 14:31:03

I'm very excited to say that over the last few years I have learn VR for the web! Which includes using the wonderful and powerful A-Frame JavaScript Component Framework which is even WebXR compatible now and includes Three.JS under the hood. So if you would like to learn it too, check it out, I have worked hard to put together something understandable on a free open source blog at:  https://rocketvirtual.com
balalaika IT newsletter #10
Tags: react, node, java, webdev
Published: 2020-09-19 14:26:41

---
title: balalaika IT newsletter #10
published: true
description: Curated IT newsletter. From Russia with love. Issue #10.
tags: #react #node #java #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7dwkz927sf2ausnqygq3.jpg
canonical_url: https://blog.balalaikait.com/balalaika-it-newsletter-10
---
*If you like this newsletter subscribe to our new issues at http://balalaikait.com/*

# General

- Back to basics. Do you remember how NAT traversal works? David Anderson wrote a [lengthy post](https://tailscale.com/blog/how-nat-traversal-works/) with great visuals to remind you.
- Steve Yegge [explains](https://medium.com/@steve.yegge/dear-google-cloud-your-deprecation-policy-is-killing-you-ee7525dc05dc) why vendor locks mixed with poor backward compatibility could make anyone question the benefits of a cloud. 
- CockroachDB team recently introduced Pebble, an open-source K/V store inspired by RocksDB. Read this [blog post](https://www.cockroachlabs.com/blog/pebble-rocksdb-kv-store/) to learn why they decided to do write it.
- Here is a great [series](https://idndx.com/2014/09/01/the-implementation-of-epoll-1/) of blog posts on implementation of Linux `epoll` for those of you who enjoy learning about kernel.
- If you're not familiar with Log-structured merge-tree data structure (aka LSM tree), but want to learn it, Tarantool DB team did a great job on documenting their [implementation](https://www.tarantool.io/en/doc/2.2/book/box/engines/#storing-data-with-vinyl).

# Java

- Java 15 is [GA](https://mail.openjdk.java.net/pipermail/announce/2020-September/000291.html). It brings internal JVM changes (say, it disables biased locking), stable releases of low-latency garbage collectors (ZGC and Shenandoah), experimental APIs (such as Foreign-Memory Access API), and some more goodies.
- JNI has a fame of being "slow". But where the JNI overhead comes from and how critical it is? If you want to hear an explanation with all low-level details, here is a great [talk](https://youtu.be/LoyBTqkSkZk) by Cliff Click.

# JavaScript

- Moment.js team now considers the library to be a legacy project in maintenance mode.  It is not dead, but it is indeed done. Read more about the reasoning [here](https://momentjs.com/docs/#/-project-status/).

# React

- Animations can make a site stand out. Or, they can just as easily kill the experience. Prasanjit Singh presents us with [the ground rules](https://css-tricks.com/ground-rules-for-web-animations/) to master web animations.
- AVIF is a fairly new kid on the block and it promises us a new future of the leaner web with smaller images. JPEG is not dead yet, but we keep our fingers crossed. Here is a [concise read](https://jakearchibald.com/2020/avif-has-landed/) from Jake Archibald on the new image format.
- Wondering how Facebook's Recoil works? Bennett Hardwick [explained it for you](https://bennetthardwick.com/blog/recoil-js-clone-from-scratch-in-100-lines/) in 100 lines of code.
Cosmos DB SQL API for NestJS and Dynamic Module
Tags: typescript, node, javascript, database
Published: 2020-09-19 14:04:35

So recently, I need to use Azure Cosmos DB with their Core SQL API as my data persistence layer for my NestJS application. I looked around NestJS documentation, and the ORM we can use for NestJS (TypeORM, Mongoose, Sequelize, and Prisma) only support either PostgreSQL, MySQL/MariaDB, MongoDB, and other database engines, but not Cosmos DB SQL API. 

Thanks to the beauty of open-source software, usually within a 30 minutes search, I would find a module that would satisfy my needs. So, I searched far and wide and found [@nest/azure-database](https://github.com/nestjs/azure-database). 

I tried it and asked a question on [Stackoverflow on using the module for my use case](https://stackoverflow.com/questions/63921584/nest-js-with-nested-json-using-cosmos-db-core-sql-api), and finally, I decided that at its current state, I am not confident enough to use it in my application. 

I noticed that Cosmos DB provided us with a Javascript NodeJS SDK, so I am thinking, _is it possible to use the SDK API on NestJS directly?_

So this question leads me to [this Reddit post](https://www.reddit.com/r/Nestjs_framework/comments/g6p43e/is_it_possible_to_use_nestjs_without_type_orm/), [this dev.to post](https://dev.to/nestjs/advanced-nestjs-how-to-build-completely-dynamic-nestjs-modules-1370) and [this Stackoverflow post](https://stackoverflow.com/questions/60833520/how-can-i-use-raw-sql-in-nestjs-instead-of-typeorm-or-sequelize), which indicates that it is possible and to make it happen, we need to use [NestJS Dynamic Module](https://docs.nestjs.com/fundamentals/dynamic-modules).  

To quote the explanation from the docs: 
> … dynamic modules provide an API for importing one module into another, and customizing the properties and behavior of that module when it is imported, as opposed to using the static bindings we've seen so far.

Also, there are two sample implementations you can refer to [by Jay McDoniel](https://github.com/jmcdo29/zeldaPlay/tree/master/apps/api/src/app/database) where the author is using dynamic module with NodeJS pg module and apparently in [NestJS sample directory](https://github.com/nestjs/nest/tree/master/sample/14-mongoose-base/src) where the sample is using NodeJS Mongoose module without using the NestJS' version. 

So, for now, I will see if I can utilize NestJS' dynamic module for my use case and will share my sample implementation in my future post.
Hacking is not what you see on TV
Published: 2020-09-19 13:57:59

A good old hack, what do you think it is? The guy or gal in his/hers hoodie typing away and displaying a screen, which looks like something from the matrix movies? Nah your stupid if you think that, no offense.

Why do we call a fault a bug in software, but not when it comes to electrical machines, which also use fundamental computing in its micro processing roles? Still the embedded system found in the UPS (or any other related machine)is still a computer. The control of it anyway..

We call it a bug because a moth found it way into the Manchester computer, the computer Alan Turing personally worked on (I stand corrected on my facts). The moth found it way into a mechanical relay, since then all software faults have mostly being reffered to as "bugs".. Interesting hay? I think so.

Hacking is its best and most informative form is "physical hacking", this is basically fixing a PCB at a component level. I was very privileged to be apart of the last generation of true PCB hackers, the kind you find in the field of Electronic Engineering. This is how I learned the good old hack. From there hacking a computer is almost like child's play. I dont know what is is, maybe it's the fact that if I buggered up a hack on a PCB, for a UPS, I would get fried like a piece of meat on the braai! (A braai is known as a barbeque in South Africa).

This has giving me the ability to tackle two problems at once, namely the pressure from the customer, and the other concerning my own personal safety and what is require to push those boundaries. This is how Ops must think in software maintenence, the same one is faced with when troubleshooting a UPS while it is live in "circuit bypass" (I can't fix a UPS on site, as it required shutting it down). 

The mentality of "life or death" may be a bold way to go about troubleshooting and hacking a bug, but it fixes problems so much more quickly and efficiently. Things are solved because it's not just business at stake, but physical safety to those who need to work on an electrical environment, buggering something up on the machines I supply my dear customers with.

Confidence is key as well, and you gotta have your knowledge back up by education. There is no point in getting irrationally annoyed at things (although I do battle with that!) The good hack requires confidence, patience, determination and sheer will to persist no matter what. That is a true hacker, a true troubleshooter, the concept hasn't changed since we invented the Transistor. 😆

I hope someone enjoys, I've come back from a UPS breakdown, and I find it humerous that it is remarkably similar to fixing bugs in your own software..It a pain in the ass! However one that feels good once, you have fixed it. (Yes I am aware of how wrong that sounds! Hahahhaha!) 

Salute and happy Hacking! 😆
NOdejs MYSql Error: ER_TRUNCATED_WRONG_VALUE: Truncated incorrect DOUBLE value: 'admin1234'
Published: 2020-09-19 13:57:45

<meta name="monetization" content="$ilp.uphold.com/LbbNym3PHJ2f">
Code causing issue 

```
let query = `update users set email = ? and password = ? where id = ?`;
    console.log(query);
    connection.query(query,[id,email,pass], function(error, result, fields) {

        if (error) {
            console.log(`error ${error}`);
            callback(false);
        }else {
            console.log(result);
            if(result.affectedRows>0)
                callback(true);
            else
                callback(false);
        }
    });

```

solution : Just replace AND with comma

```
let query = `update users set email = ?,password = ? where id = ?`;
    console.log(query);
    connection.query(query,[id,email,pass], function(error, result, fields) {

        if (error) {
            console.log(`error ${error}`);
            callback(false);
        }else {
            console.log(result);
            if(result.affectedRows>0)
                callback(true);
            else
                callback(false);
        }
    });
```
GitHub CLI in 2020
Tags: github, git, boxpiper
Published: 2020-09-19 13:41:14

GitHub CLI allows developers to run their entire GitHub workflow from the terminal, spanning from issues through releases, without having to switch from one process to another. GitHub users can tap into a command-line interface with the release of GitHub CLI.

Through terminal, it reduces context switching, which helps you focus, and it’ll become easier to script and create your workflows. It is available to download on Windows, macOS, and Linux.

To continue reading, head over to [Box Piper](https://www.boxpiper.com/posts/github-cli/) source.

To read more such interesting topics, follow and read <a href="https://boxpiper.com/">BoxPiper blog</a>.

Support my work and [buy me a Coffee](https://ko-fi.com/E1E72C2MM). It'll mean the world to me. 😇

<a href="https://ko-fi.com/E1E72C2MM"><img src="https://cdn.ko-fi.com/cdn/kofi1.png?v=2"/></a>
Publish images to GitHub Container Registry (ghcr)
Tags: docker, github, devops, tutorial
Published: 2020-09-19 13:37:03

In this blog post, I would like to show you how easy is to publish your docker images to GitHub Container Registry. This topic is relevant because *Docker Hub* has changed [retention limits](https://www.docker.com/pricing/resource-consumption-updates), so might want to consider other players on the market.

#### TL;DR

To publish an image to ghcr:

1. Create a Personal Access Token
2. Log-in to the container registry
3. Push an image to `ghcr.io/GITHUB_USERNAME/IMAGE_NAME:VERSION`

---

To access GitHub container registry you need to create Personal Access Token (PAT) on GitHub:

<small>"**Settings > Developer Settings > Personal access tokens**" and create token with permissions related to "packages" (or <https://github.com/settings/tokens/new>).</small>

After that, you can login `export CR_PAT=YOUR_TOKEN ; echo $CR_PAT | docker login ghcr.io -u USERNAME --password-stdin`.

Now, you want to tag your local images:

`docker tag SOURCE_IMAGE_NAME:VERSION ghcr.io/TARGET_OWNER/TARGET_IMAGE_NAME:VERSION`

Push re-tagged imaged to the container registry (ghcr.io):

`docker push ghcr.io/OWNER/IMAGE_NAME:VERSION`

### Example

I've pushed a containerized image of [dotnet-script](https://github.com/filipw/dotnet-script) to GitHub Registry, it allows you to run REPL-style prompt for C#.

For now, GitHub doesn't provide search and discovery capabilities for images, but you already can find some UI to see image details from UI, if you know the name.

You can find packaged [dotnet-script](https://github.com/filipw/dotnet-script) here:

<https://github.com/users/NikiforovAll/packages/container/package/dotnet-script>

<center>
    <img src="https://dev-to-uploads.s3.amazonaws.com/i/q4wqm8av4cmd8x6uunul.png" alt="ghcr-example">
</center>

🚀  Let's download and run it:

```bash
docker image pull ghcr.io/nikiforovall/dotnet-script:latest
docker container run --it --rm ghcr.io/nikiforovall/dotnet-script
```
Numeric Separators
Tags: javascript, new, todayilearned
Published: 2020-09-19 13:28:39

Reading large numbers is difficult most of the time, using the latest proposal for Numeric Separators is going to make this job easy.

For example, say you have the following number:
```js
let budget = 1000000000;
```

It's hard for the human eye to detect what is the actual order in here.

But, by using the Numerical Separators, it can be rewritten in the following way:

```js
let budget = 1_000_000_000;
```

We can easily tell by separating them with underscores that this is a billion.

### Support 

There is fairly good support for this feature in the latest browsers:

- [CanIuse](https://caniuse.com/mdn-javascript_grammar_numeric_separators)

- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_separators)


Found it very neat. Let me know how you guys feel about this?

### Further Learning
- [https://v8.dev/features/numeric-separators](https://v8.dev/features/numeric-separators)
- [https://github.com/tc39/proposal-numeric-separator](https://github.com/tc39/proposal-numeric-separator)
Flutter - Horizontally scrollable tabs
Published: 2020-09-19 13:23:10

Same can be achieved using - unselectedLabelColor: & indicatorColor: of TabBar widget.

Example Code:
```dart
@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 6,
      child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            leading: Icon(Icons.person_outline),
            title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
            bottom: PreferredSize(
                child: TabBar(
                    isScrollable: true,
                    unselectedLabelColor: Colors.white.withOpacity(0.3),
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(
                        child: Text('Tab 1'),
                      ),
                      Tab(
                        child: Text('Investment'),
                      ),
                      Tab(
                        child: Text('Your Earning'),
                      ),
                      Tab(
                        child: Text('Current Balance'),
                      ),
                      Tab(
                        child: Text('Tab 5'),
                      ),
                      Tab(
                        child: Text('Tab 6'),
                      )
                    ]),
                preferredSize: Size.fromHeight(30.0)),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 16.0),
                child: Icon(Icons.add_alert),
              ),
            ],
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                child: Center(
                  child: Text('Tab 1'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 2'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 3'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 4'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 5'),
                ),
              ),
              Container(
                child: Center(
                  child: Text('Tab 6'),
                ),
              ),
            ],
          )),
    );
  }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/akyeod93f8yoyl3hs4zi.png)

https://stackoverflow.com/questions/54230115/horizontally-scrollable-tabs-focus-on-center-with-snap-in-flutter
Pluggable API and React (Series) - Introduction
Tags: pluggable, api, react
Published: 2020-09-19 12:05:00

# What is this series about?

In my development work over many years, I have built many APIs on both the front and backend of web-based systems.  Obviously, REST is a popular communications API and many server platforms provide libraries to organise and manage various features or "service" but what about the front end?

This series is (probably) opinionated and is not specifically about `React` (although the inspiration for this framework comes from `React`). It is about building a framework that you can use to pass globalised and share all of your well-built functions for use within your React components.

It does use various `React` technologies (like hooks) where applicable but also adheres to the ideas of inversion of control and dependency injection - hence minimising imported modules and facilitating easier testing.

# What will this series use?

The focus is on front-end technology but will also demonstrate using HTTP calls for backend access.  It will also use `React` for the front-end technology and `Snowpack` as the development environment.  For global state management, the series will use `react-hooks-global-state` rather than `Redux` or `MobX` - but you could probably apply similar ideas to those technologies or roll your own with `React Context`.

# Why would I want an API in my front-end app?

If you are building a single-page-app (SPA) then it is likely that you have various components that share some type of global state.  I have found that applying separation to read/write of global state really helps organise an application and an API can help do that.  You can use React Hooks to read your data and an API to update your data (as well as provide side effects.

Yes, `Redux` and `MobX` can provide that type of separation but, out-of-the-box, hook-based global state usually does not.  The reason for going with hook-based global state management is purely for consistency and minimal boilerplating.  This approach may not be suitable for larger developer organisations but works very well for smaller dev-ops style IT groups.

# What next?

This is just the introduction article.  In future articles I plan to:
* Go into more detail about the tooling selection - such as Snowpack and react-hooks-global-state
* Work through the core of a pluggable API
* Demonstrate how to add variables and functions in a plugin and how to access the global API from those plugins
* Make suggestions about a component factory that allows each plugin to "extend" the API footprint 
* And other relevant things as we flesh out the pluggable API and various plugins

Please join me on this journey and provide your feedback.
LazyGit - terminal UI for git commands // Cool GitHub projects 
Tags: productivity, git
Published: 2020-09-19 12:19:57

Are you sad when you are typing `git add shitty/long/path/to/file.exe`, but you can't use SourceTree (or other GUI) because you are proud terminal user?

![infomercial](https://media.giphy.com/media/dx4OSgpG6Gpzi/giphy.gif)

I was too. But now I'm using [LazyGit](https://github.com/jesseduffield/lazygit)!

{% github jesseduffield/lazygit %}

## Installation
You can install it on MacOS using `brew`
```
brew install jesseduffield/lazygit/lazygit
```
(Linux and Widows are also supported, just read the [manual](https://github.com/jesseduffield/lazygit#installation))

## Configuration
LazyGit, as every good terminal app, is [configurable](https://github.com/jesseduffield/lazygit/blob/master/docs/Config.md). Documentation is not the best, but good enough. For example, you can use it with white theme
![](https://dev-to-uploads.s3.amazonaws.com/i/3qmzc7gy4jqy3q86okvg.png)
 

####  About series
Cool GitHub projects is a blog posts series where I will share useful/fancy projects I found on GitHub
Laravel Orchid - SVG Icons
Tags: laravel
Published: 2020-09-19 12:15:47


In the latest release of the package, I worked on replacing `Icon Fonts` in favor of the SVG format, which means that now icons are available in a vector.

Previously, if you needed to display your own (or from the Internet) icon, then you had to translate it into a font and include a CSS file with a description, now this is not needed. It is enough to copy the desired icon to the project.

Let's do it together. Let's say we want to include an icon from the popular Font Awesome. To do this, select a suitable storage directory, for example, create a new `icons` directory and a `fontawesome` subdirectory:

```bash
resources
  - css 
  - icons
      -- fontawesome 
  - js
  - lang
  - views
```

Load the appropriate icons into the new directory, for example, this [notebook icon](https://github.com/FortAwesome/Font-Awesome/blob/ce084cb3463f15fd6b001eb70622d00a0e43c56c/svgs/solid/address-book.svg). Then we will indicate to the package the directory in which we need to search for our images, for this we will edit the configuration file `config/platform.php`:


```php
'icons' => [
    'fa' => resource_path('icons/fontawesome')
],
```

All we have done here is declare the prefix by which we will refer to fa and the directory where the files are located.
To display in the components of the package, you only need to pass the prefix + name, for example, the definition of the icon in the menu will look like this:

```php
ItemMenu::label('Example of custom icons')
    ->icon('fa.address-book')
    ->url(#);
```

Moreover, if for some reason your project does not have [Laravel Orchid](http://orchid.software/), then a separate [package has been prepared for the Blade and SVG template engine](https://github.com/orchidsoftware/blade-icons).