teleren/devto huggingface dataset:
Angular NG8001 Build Errors
Tags: angular, material
Published: 2020-05-31 22:51:39

The NG8001 Error happens at ng-build, or ng-serve time when changes are made to things like the import statements, or when adding new modules. 

The message is trying to tell us that it can't find this component.

These are some of the causes and how to fix them. 

**app.module Import Not Right**

```htm
// This is what was shown at compile time if the import isn't right
src/app/components/parsing/search/search.component.html:25:9 - error NG8001: 'mat-spinner' is not a known element:
1. If 'mat-spinner' is an Angular component, then verify that it is part of this module.
2. If 'mat-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

25         <mat-spinner style="width: 20px; height:20px;" mode='indeterminate'></mat-spinner>
```

This error message, and others just like it are caused by improper import statements. The modules are always found within the first folder of the component area. Like this.

```typescript
// the correct syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";

// the incorrect syntax is:
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner/progress-spinner";

// No error shows here even when directory is wrong

```
 
**Module Import Root Cause**

Assume you want to bundle a folder that has 5 or 6 related components, this is a good time to create a module. But don't forget to add a reference to app.module, or else you'll see this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q2emkvz2ix4ns8u2a6qq.png)

Whenever a new module is included there are two critical things to consider.

- Does the new module export the components others will need?
- Does the main app.module import the new module?

We had a folder with very specific Parsing functions, we wanted to create a module of those 5 components.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0298xyt04e9c10ffmcgi.png)

So the parser.module.ts was created and contains this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3fdemjfyflsr6a8doo8v.png)

Good so far, we now have one module with 5 components, and their dependencies. Now we want the main app.module to import the new module.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c0jrknhjj2lzpucbcc9i.png)

Now we can use those components in other components within the app.module.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whngevqvouu2upeplurs.png)
How to Organize Your Code
Tags: productivity, beginners, codenewbie, codequality
Published: 2020-05-31 23:11:00

When I first started programming, I struggled a lot with how I should organize all my code. I needed an orderly way to keep track of the tutorials, code snippets, and side-projects I was rapidly accumulating. It's definitely a tough problem.

Thank you to Dan Fletcher for his [blog post](http://www.danfletcherblog.ca/2017/01/beginners-tip-organize-coding-projects/) on this very topic. He helped me figure this out when I was starting out. The following is a summary and rehashing of his fantastic ideas.

# Don't

**Make heavy use of nesting:** At first, it seems like nesting is the key to good organization. This is wrong for two main reasons. First, nesting makes long filepaths which makes navigation with the command-line inconvenient. Second, deeply nested directories impose too brittle of a hierarchy. Eventually you will have files that can live in multiple places within the hierarchy. Then the hierarchy becomes inconsistent and loses its value. Keep things simple and avoid nesting too deeply.

```text
nesting
└── 2020
    ├── feb
    │   ├── big-projects
    │   │   └── project-1
    │   └── small-projects
    │       └── project-2
    └── mar
        ├── big-projects
        │   └── project-3
        └── small-projects
            └── project-4
```
**Organize by language:** For simpler projects, this is a logical conclusion. But, as projects grow in complexity they will start to make use of many languages. It is not uncommon for my projects to involve 3-4 different languages. This makes it impossible to know which directory a project should live under.

```text
by-language
├── go
│   └── project-1
├── javascript
│   ├── project-2
│   └── project-3
└── python
    └── project-4
```
# Do

**Keep everything in one place:** I have a single directory on my computer that all my programming work lives under. Get creative with the name! I call mine the `batcave`. What would you call yours?

**Use a flat structure:** Use a single directory for every project. Each directory contains everything that the project needs. These project directories are the level at which I like to track things with Git i.e. every project directory would be its own GitHub repository.

**Keep the odds and ends together:** I like to group the really small stuff together. I'm talking about the code snippets and the tiny test scripts. For example, when I started learning JavaScript I made a directory called `javascript-snippets`. Anytime I wanted to quickly try something out I could make a file and toss it in that directory.

```text
batcave
├── javascript-snippets
├── project-1
├── project-2
├── project-3
└── project-4
```

Sticking to these do's and don'ts will go a long way to keeping your code organized. Remember though, these are only guidelines — sometimes it will make sense to break them. Now go forth and code!

**If you enjoyed this article, check out my [blog](https://calebschoepp.com/blog) for similar content.**
Web Accessibility with CSS
Tags: a11y, css
Published: 2020-05-31 22:25:00

---
title: Web Accessibility with CSS
published: true
description: Introduction to the series Web Accessibility with CSS, that will include CSS tips and tricks to make more accessible web sites.
tags: a11y,css
series: Web Accessibility with CSS
---

CSS is often seen as a language only related to visualization and presentation –to the point that many developers don't even consider it a programming language– ...but **CSS is more than just making things look nice**, and it can play an essential role when defining Web Accessibility.

Some people may say "_Duh! Ensuring color contrast is done with CSS and it is the [top a11y issue according to WebAIM](https://webaim.org/projects/million/)_"... and they will be correct, but there's much more to CSS and a11y than just color contrast or font size/readability:

- Styles for printing
- Easier to follow tables
- Accessibility-related media queries
- Focus outlines
- Video accessibility

In this series, we will highlight different techniques that can be done in CSS to build more accessible websites. Some of them you might be doing already, and some may be new to the general audience.
Cloud Native Web Development Project Overview - A diagram
Tags: watercooler, architecture
Published: 2020-05-31 21:58:13

Today's diagram illustrates the entire project architecture for my upcoming book, [Cloud Native Web Development](https://www.gum.co/cloud-native-web-development). At the end of the ~200 pages, you will have a repository based on this architecture.

![Cloud Native Web Development Project Overview](https://dev-to-uploads.s3.amazonaws.com/i/3rdbqiv5x3g5p9yyelcm.png)

Check out the other posts in this series for more diagams. One diagram per day until I drew all diagrams I need for my book, www.gum.co/cloud-native-web-development.

[Diagram source](https://excalidraw.com/#json=6041604372561920,RCxQelbw_QLOqrMtvP4Ubw) (if you want to edit/reuse it)
Recopilación API's
Published: 2020-05-31 21:46:32

En este post presento algunas API's para probar el desarrollo de alguna aplicación, practicar peticiones, o simplemente hacer cualquier idea que se nos presente.

Una de las API's que mas me gusto es la API de Rick and Morty

##Rick and Morty API
link https://rickandmortyapi.com

##Star Wars API
link https://rickandmortyapi.com

##Dog API
link https://dog.ceo/dog-api

##The Lord of the Rings API
link https://the-one-api.herokuapp.com

##SuperHero API
link https://superheroapi.com/index.html

Una api curiosa, son gatos con el código de estado de una página o son los códigos de estado con diferentes fotos de gatos?

##HTTP Cats
link https://http.cat
Rosetta Phone
Tags: twiliohackathon
Published: 2020-05-01 05:44:19

## What I built
Rosetta Phone:
In this hectic, unpredictable time, it is vital that people are able to keep on top of their health. People are waiting weeks to receive test results and medical updates, and it becomes stressful for patients and their families, and burdensome for medical providers, to deal with lengthy phone calls and delayed information.
 
Rosetta Phone is an app that aims to streamline communication between healthcare providers and recipients. The app allows healthcare providers to send secure updates without needing to divulge personal information, such as phone numbers. Each user receives a unique ID, which patients will share with their doctors in person at an appointment, confirming their consent to be contacted and ensuring that only their doctor receives their ID. From there, doctors and their staff can quickly send patients updates.

#### Category Submission: COVID-19 Communications

## Demo Link
https://rosetta-phone.herokuapp.com/

## Link to Code
https://github.com/hackathon-haxors/rosetta-phone

## How I built it
I worked with @LuigiLegion (https://github.com/LuigiLegion) on this project. Our stack was comprised of Node.js, React, Express and PostgreSQL. When a user logs in securely through Google OAuth, their data is securely stored in a PostgreSQL database so that providers can send messages without collecting any information beyond what the patient is willing to provide. We used Twilio to send the messages.
Wizar devlog 18 - a little update of the dungeon edition
Tags: Gamedev, typescript
Published: 2020-05-31 21:18:30

I updated my R&D sandbox on dungeon "painting". I can now revert pattern back to their previous state and the WFCish function will ensure that all rules keeps respected.

Left click: void -> water -> sand -> land -> forest -> moutain
Shift + left click: the inverse (but stopo to water, won't go to void again)

https://codesandbox.io/s/relaxed-moon-jui9c
Accessibility and why you should care 
Tags: a11y, webdev
Published: 2020-05-31 21:07:33

Remember that one time you were going through your twitter timeline and you came across the #a11y hashtag and have always wondered what it meant? Or you heard the term **accessibility** and didn't know what it meant?? Or perhaps you knew what it meant but didn't know why you should care???....This is the article for you.

## What

According to [wikipedia](https://en.wikipedia.org/wiki/Accessibility), _Accessibility is the process of creating products that are usable by people with the widest possible range of abilities, operating within the widest possible range of situations._

So what does this really mean? Imagine you have an office or an apartment situated at the topmost floor of a 12-story building which happened to have no stairs, no lifts, nothing. That's not so bad right, I guess superman and other flying superheros could come visit you in your apartment😂😂

What if the building had staircases? People would be able to visit you by going through 11-12 flights of stairs. That works, but what about older people or people in wheelchairs that cannot climb the stairs? I hope you get where I'm going with this.

Basically something accessible is something anybody can use regardless of their condition.

## Why you should care

I'm a frontend developer, I've built my web application with html, css, javascript and it works fine so why should I worry about accessibility?

Well, let's take a look at this chart
![Statistics showing web users in 2020](https://res.cloudinary.com/ibnabubakre/image/upload/v1590878524/web-stats.png)

According to [statista.com](https://www.statista.com/statistics/617136/digital-population-worldwide/) about 4.57 billion people use the internet as at April 2020, which is around 60% of the total world population and the number keeps rising, here's a [live](https://www.internetlivestats.com/) stats of those changes. 

That is a lot of users to be concerned about when building our website, but that's not all. According to [world bank](https://www.worldbank.org/en/topic/disability), one billion people, about 15% of the total world population experience some sort of disability. These disabilities could include but are not limited to 
 - Physical disabilities
 - Intellectual or learning disability
 - Visual impairments
 - Hearing impairments
 - Neurological disabilities

Which begs the question, are you willing to neglect 15% of the world's population when building your website?.

But it's not just that. Remember the goal is make our website accessible to everyone irrespective of their condition. This also includes people using mobile phones, smartwatches, people having poor internet.

Not to bore you with too much talk, I'll be writing about how you could improve your websites accessibility in another article.

NOTE: look at your website's accessibility as a objective, a goal to work towards rather than a feature.

Cheers 🥂🥂
JavaScript and Python challenges
Tags: javascript, python, react, mongodb
Published: 2020-05-31 21:03:54

# 30 Days Of JavaScript Challenge

In the beginning of January, I created 30 Days Of JavaScript Challenge and it became one of the git trending JavaScript repo on github in January and February. It helped several thousands people to understand JavaScript well and it helped them to improve their problem solving skills. If you have a plan to start to learn JS or solidify your JS I would recommend you to give it a try. You can star it at any time. 

# 30 Days of Python Challenge
The content of 30 Days of Python Challenge is somehow similar to 30 Days Of JavaScript Challenge  but with different syntax. In addition, in this challenge I have included small fullstack application with Flask and MongoDB. 



💻  30DaysOfJavaScript Github: https://lnkd.in/efqy_df
💻  30DaysOfPython Github: https://lnkd.in/epW6d_U

👥  Join the 30DaysOfJavaScript group: https://lnkd.in/er7kdTE
👥 Join the 30DaysOfPython group:  https://lnkd.in/eE5Qgqd
How to use AWS named profiles
Tags: aws, cli
Published: 2020-05-31 20:58:35

This article was also published on [razcodes.dev](https://razcodes.dev "razcodes.dev")

You might get to a point where for some reason or another you find yourself needing to use more than one set of AWS CLI credentials. Usually that's the case when you have more than one AWS account or you want to test the same account but with different permissions. So instead of keep reconfiguring your credentials every time, like someone I know used to do, you can use _named profiles_.

This article assumes that you already have [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html "AWS CLI") installed and configured. If you have not yet, I cover that in one of my older posts.

## Creating the user

We are going to first create a new user and give that user read only permissions to **S3**.

- log into your AWS console
- Services -\> IAM -\> Users
- Add user
- User name (ex: s3read)
- Check **Programatic access**
- Next: Permissions
- Attach existing policies directly
- Check **AmazonS3ReadOnlyAccess**
- Next: Tags (optional)
- Next: Review
- **Create User**

Make sure that you either download the .csv file created, or copy the _Access key ID_ and _Secret access Key_ in a password manager, because once you click close you will not be able to see it again.

## CLI Setup

In the terminal, where you already have the AWS CLI working type the following:

```bash
aws configure --profile s3read
```

The profile name can be whatever you want, you will need to use it later and it can be different than what you named the username above.

- put in your Access key ID
- put in your Secret access key
- default region (ex: us-east-1)
- default output (ex: json)

## Invoking

You are now all set. To start using the newly created profile you have a few options available.

### Command style

You can add **--profile** followed by the profile name after every command:

```bash
aws s3 ls --profile s3read
```

### ENV style

You can make that profile become the active profile for the current shell session:

```bash
export AWS_PROFILE=s3read
```

After that you can just issue the commands without the --profile:

```bash
aws s3 ls
```

### Oh My Zsh style

Oh My Zsh has an [AWS plugin](https://github.com/ohmyzsh/ohmyzsh/blob/master/plugins/aws/aws.plugin.zsh "AWS plugin") and with it installed, you can just use the command _asp_ followed by the profile name to activate it:

```bash
asp s3read
```

From here on that profile will be active for the rest of the session:

```bash
aws s3 ls
```

## Conclusion

I put off configuring this for myself for a long time, but having to switch between 4 profiles every day motivated me to look into it and make it simple. So should you.
Which Cloud Provider do you use?
Tags: watercooler, discuss, beginners
Published: 2020-05-31 20:40:57

There are so many cloud providers out there..

AWS?
Azure?
Google Cloud Platform?
Others?

#### Which are the reasons for your final choice? 
#### What do you miss in your current cloud provider?
#### Which service(s) do you love the most?


Have a great start of the week!
Determining your browser's zoom percentage
Tags: webdev, javascript
Published: 2020-05-31 20:39:53

In most browsers specially desktop browsers, you're able to zoom in and out using <kbd>CTRL/CMD</kbd>+<kbd>+</kbd> or <kbd>CTRL/CMD</kbd>+<kbd>-</kbd>.

Most of the time, there's no problem as your website should take into account responsiveness but what if you want to update your website based on your user's browser zoom percent?

We can use Javascript to calculate the current browser zoom.

```javascript
Math.round((window.outerWidth / window.innerWidth) * 100)
```

# Accessibility

Zooming is part of accessibility and having your website usable even when the user being zoomed in is important.

# Gotcha

When you have your inspector open and it's docked to the left or right, the calculation becomes inaccurate as the `innerWidth` doesn't take into account the inspector.

# Demo:

Best viewed in debug mode: 

https://codepen.io/koralarts/pen/NWxKKdZ

---

How would you improve the code or do you have other ways on how you determine browser zoom?
Mock Aptitude Exam
Tags: react, node, javascript
Published: 2020-05-31 19:51:00

# Aptitude Exam
Aptitude exam is a mock test website for MCQs based questions mainly inspired by the MCQ exams held in colleges. 
All information is served by a private API I developed. (Links can be found at the end of the post)

### Features:
* has a login option where students can log in with their id and password.
* after logging in, the student is asked what category does he want to give the exam in.
* the request for MCQs is sent to the API which returns a JSON object.
* this JSON is parsed to be shown one at a time in the main exam region.
* A timer is started after which the exam will auto-submit.
* MCQ question and the options are displayed. The selected option turns green.
* Questions can be marked for review.
* An overview button shows all question numbers and gives details as to if they're answered and if they're marked for review.
* On submitting, your result is calculated with answers to all questions with explanations.
* also on submitting, your result is sent to the server to be stored in the file.

### Purpose of the app?
I developed this mock test website mainly to get my hands dirty with React.js and web development in general. 

### Code
React- https://github.com/shamoilarsi/Mock-Aptitude-Exam
Node- https://github.com/shamoilarsi/Mock-Aptitude-Exam-API

### Demo
Website is live on - https://aptitude-exam.web.app/ 

You can find a video showing the flow of the website on [LinkedIn](https://www.linkedin.com/posts/shamoilarsi_react-js-reactjs-activity-6672951654880571392-KdFu)
Create a React Hook to show the browsers online status
Tags: react, javascript
Published: 2020-05-31 19:46:57

React Hooks are a way of adding logic to your functional components in an simple and elegant way. In addition to the [standard hooks](https://reactjs.org/docs/hooks-reference.html) like `useState` or `useEffect` you can also create your own hooks if find you need the same logic in multiple components.

A [custom hook](https://reactjs.org/docs/hooks-custom.html) is nothing more than a JavaScript function which starts with "use" and that may call other hooks. In this article I will show you how to create a simple hook for showing the network status of the users browser.

To access the browsers online we'll use the [NavigatorOnLine API](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events) to read the status and to subscribe to the `online` and `offline` events.

Let's start by creating a Hook which reads the current online status.

```jsx
function useOnlineStatus() {
  return window.navigator.onLine
}
```

The hook is a simple function which returns the value of `window.navigator.onLine`. You can use it by calling `useOnlineStatus`in your component.

```jsx
function Component() {
  const isOnline = useOnlineStatus()
  const text = isOnline ? "online" : "offline"
  return <p>{`Your browser is ${text}`}</p>
}
```

This already kinda works but the status won't update if the browser goes offline after the component has been mounted. We'll need to add some event listeners and a local state variable to achieve that.

```jsx
function useOnlineStatus() {
  const [online, setOnline] = useState(window.navigator.onLine)

  useEffect(() => {
    window.addEventListener("online", () => setOnline(true))
    window.addEventListener("offline", () => setOnline(false))
  }, [])

  return online
}
```

Now we get the updated state when the browser goes offline or online. But we are not done yet. Our hook function is not doing proper cleanup for the event listeners, which will result in memory leaks if not fixed.

We need to return a cleanup function from `useEffect`, which will remove the event listeners when the component using the hook is unmounted. To achieve this we also need to change our event handler functions from [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) to regular named functions.

```jsx
function useOnlineStatus() {
  const [online, setOnline] = useState(window.navigator.onLine)

  useEffect(() => {
    function handleOnline() {
      setOnline(true)
    }

    function handleOffline() {
      setOnline(false)
    }

    window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)

    return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
  }, [])

  return online
}
```

Now we are properly cleaning up and the hook is ready to be used!

You can check a full code example at [codesandbox.io](https://codesandbox.io/s/dawn-moon-4487x?file=/src/App.js)