teleren/devto huggingface dataset:
Angular material tutorial with Example - Angular 11
Tags: angular, material
Published: 2021-02-15 03:30:14

In This tutorial, you need to see an example of how to install angular material in angular 11. let's discuss the angular material tutorial. you will learn how to use material design in your project. follow the bellow step for install material design in angular 11.

You need to create a new angular 11 project using the ng new command and then after we will install the material design using the ng add command. After that, we will create a very simple input form example with a button.

**[Angular Material Tutorial With Example - Angular 11](https://www.phpcodingstuff.com/blog/angular-material-tutorial-with-example-angular-11.html "Angular Material Tutorial With Example - Angular 11")**

Open Command promt and run 

`ng add @angular/material`

![This is image title](https://www.phpcodingstuff.com/uploads/tutorial_images/cli_material_design_install.png "This is image title")

**src/style.css**
```
/* Add application styles & imports to this file! */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

```

**Use Material Design**
Then, Change
**src/app/app.module.ts**

```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
   
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
  
@NgModule({
  imports:      [ 
                     BrowserModule, 
                     FormsModule, 
                     MatInputModule, 
                     MatButtonModule 
],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

**src/app/app.component.html**

```
<h1>how to install angular material design - phpcodingstuff.com</h1>
   
<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Name:</mat-label>
    <input matInput placeholder="Ex. Robert" value="Robert">
  </mat-form-field>
  
  <mat-form-field class="example-full-width">
    <mat-label>Address:</mat-label>
    <textarea matInput placeholder="Ex. New Your , USA"></textarea>
  </mat-form-field>
  
  <button mat-raised-button color="primary">Submit!</button>
</form>
```

![This is image title](https://www.phpcodingstuff.com/uploads/tutorial_images/demo_material_desing_php_coding_stuff.png "This is image title")

Original source : *[https://www.phpcodingstuff.com/blog/angular-material-tutorial-with-example-angular-11.html](https://www.phpcodingstuff.com/blog/angular-material-tutorial-with-example-angular-11.html)*
Azure DP-900 Short Notes: Describe concepts of relational data
Tags: azure, cloud, dp900, certification
Published: 2021-02-15 03:28:24

👉Learn Module: [Explore roles and responsibilities in the world of data](https://docs.microsoft.com/en-us/learn/modules/describe-concepts-of-relational-data/)
<br>
## Understand the characteristics of relational data

👉Relational data model collections of entities from the real world as tables.

👉A table consist of row and columns  where each row represent a single entity.

👉A single table consist of a Primary key.

👉A foreign key in a table helps to build relationships with other tables.

👉Most relational databases support Structured Query Language (SQL).

👉Commonly used in ecommerce systems.

👉Also used in Online Transaction Processing (OLTP)  such as Banking applications and Online retail   applications.

---

## Explore relational data structures

👉Relational database contains some other structures that help to optimize data organization.

1. Index
    - Helps to search data in a table.
    - Indexes consume additional storage space.
    - Some relational database management systems also support clustered indexes. A clustered index physically reorganizes a table by the index key.
    - A table can have multiple indexes, but only a single clustered index.
2. View
    - A virtual table based on the result set of a query.

---

## Choose the right platform for a relational workload

👉On-premise database hosting is expensive.

👉All tasks including including scaling, patching, updating and maintaining security should be handle by the organization which is a trivial task.

👉Cloud consists of two different models to host databases.

1. IaaS
    - Database is hosted on a virtual machine.
    - OS level control is provided over the system.
    - All  tasks such are patching and updating software should be handle by the organization.
2. PaaS
    - The cloud provider handles hardware maintenance and software maintenance.
    - Can easily scale the database based on demand.
    - Ex: Azure SQL Database, Azure Database for PostgreSQL, Azure Database for MySQL, and Azure Database for MariaDB
    - Some database features are missing from the respective database type due to security concerns.

---
Website Audit 101
Published: 2021-02-15 03:08:51

Building a website is tough. There's so many factors to take into consideration to ensure it is easy to use, accessible, and findable through web searches. In this brief, I'm going to highlight a couple tools that I used to analyze https://www.pgnleaders.org/ , the national website for my Professional Development Organization, and what I found that can be improved. 

#H2 Web.dev
Web.dev is a fabulous tool to use to audit your websites. All you have to do is copy the website url of your choosing, and paste it into the audit box, and run it! I got some great insights about the PGN website on things like performance, accessibility, best practices, and SEO. Out of all these categories, the PGN website could see most improvement in the Best Practices and SEO categoried. Web.dev tells you concrete ways to fix these aspects of your website and improve the rating.
https://web.dev/measure/

#H2 WAVE 
WAVE is a chrome extension, that can be accessed directly from the website of your choosing. Instead of a report format like Web.dev, WAVE gives a visual overview of the accessibility of your website. My biggest takeaway after using this tool was all of the alternative text errors that the PGN website has. This essentially means that the HTML can be significantly simplified, so increase website efficiency.

#H1 For an in depth look at me using these tools, check out my youtube video https://youtu.be/1mJMq7p8L_4
199. Binary Tree Right Side View

Tags: javascript, algorithms, trees, leetcode
Published: 2021-02-15 03:07:22

###Description:
Given the root of a binary tree, imagine yourself standing on the right side of it, return the values of the nodes you can see ordered from top to bottom.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
var rightSideView = function(root) {
    const output = [];
    // Return an emtpy array if the root is null
    if(!root) return output
    const queue = [];
    queue.push(root)
    while(queue.length) {
        // Push the first item in the queue to the output array
        // We populate the queue from right most node to left most node
        // Nodes in the front of the queue will be the closest to the right side
        output.push(queue[0].val);
        const levelLength = queue.length;
        // Add nodes into the queue from right to left
        for(let i = 0; i < levelLength; i++) {
            const cur = queue.shift();
            if(cur.right) queue.push(cur.right)
            if(cur.left) queue.push(cur.left)
        }
    }
    return output;
};
```
Some awesome js tricks you should know about 
Tags: javascript, react, flutter, vscode
Published: 2021-02-15 03:03:00

When it comes to adding all the numbers in an array, most people would think of the 'for loop' to traverse all the numbers, but other than that, do you know you can also use array.forEach() and array.reduce()to do so? Let's take an example here!

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

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

There're also lots of array tricks you may not know about, take a look at the examples below:

(3) use array.reverse() to reverse a string:


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

(4) repeat certain string for multiple times

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

We all know that spread operator can be used to split an array into a pseudo array,but it can also used to copy an object in react project! Look at the example below:

(5)use spread operator to copy an object in class component.


...To be continued
617. Merge Two Binary Trees
Tags: algorithms, trees, javascript, search
Published: 2021-02-15 02:45:59

###Description:
You are given two binary trees root1 and root2.

Imagine that when you put one of them to cover the other, some nodes of the two trees are overlapped while the others are not. You need to merge the two trees into a new binary tree. The merge rule is that if two nodes overlap, then sum node values up as the new value of the merged node. Otherwise, the NOT null node will be used as the node of the new tree.

Return the merged tree.

Note: The merging process must start from the root nodes of both trees.


###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// Depth first search approach
// We will use t1 as the merged tree
var mergeTrees = function(t1, t2) {
    // If any of the nodes is null then use the other node as the merged node
    if (t1 === null)
        return t2;
    if (t2 === null)
        return t1;
    // Add the vals of current node for each step if they are not null
    t1.val += t2.val;
    // Explore remaining children in the trees
    t1.left = mergeTrees(t1.left, t2.left);
    t1.right = mergeTrees(t1.right, t2.right);
    return t1;
};
```
Understanding Postgres on Linux
Tags: postgres, linux
Published: 2021-02-15 02:44:06

## Installing Postgres

Installing PostgreSQL is pretty straight-forward on Linux, just follow a tutorial like this one:

- [Installing Postgres on Ubuntu 20.04](https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart)

Where I confused the first time around was why certain things worked the way they did so this post is to help address some of those issues.

### The Postgres User

When you first install Postgres on Linux it creates a new Linux user called Postgres with superuser privileges. Why does this matter?

- When you run "psql" command to run the Postgres shell, it defaults to opening the shell under a username that matches the current Linux users and opens a database by the same name. Unless you installed Linux and your first user was called "postgres" then this command is going to give you an error.

To fix this issue we need to switch over to the postgres user.

```sudo su postgres```

### Creating a New User and Database

Once you are working in the terminal under the postgres user do the following.

1. enter the postgres shell ```psql```

2. create a new superuser ```CREATE USER <YourLinuxUsername> WITH SUPERUSER PASSWORD "somepassword";```

3. create a new database ```CREATE DATABASE <YourLinuxUsername>;```

4. quit postgres ```\q```

### Port 5432

The default port for postgres is 5432 in the same way the default port for mongo is 27017.

### Other Notes

- Postgres drivers in many languages are compiled from source by the package manager, if installing the database drivers in that language fail, you may need to download Xcode on mac or install python3-dev libpq-dev on Linux. 

- On PHP you need to find your PHP installs php.ini and uncomment the pg drivers

- Your local postgres connection URL will look like: `postgres://USERNAME:PASSWORD@localhost:5432/databasename` (unlike Mongo, the database does need to be created before you can connect to it)

- [POSTGRES COMMANDS](https://www.postgresqltutorial.com/postgresql-cheat-sheet/)
-4 Graphic Design Space
Tags: 100daysofcode, codenewbie, design, computerscience
Published: 2021-02-15 02:33:40

**Space**
Space, or depth, is the eponymous property of our 3-dimensional world. It refers to the area that a shape or form occupies. Space can be defined as *positive* or *negative.*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fiz3wrnxm5r2yu0zetyp.png)

**Positive space** is the filled space, the object(s) or element(s) in the design.

**Negative space** is the empty space, or the open space between design elements or objects, such as a background.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7xxmaxlcex5rptf9izh6.jpg)
----------------------------------------------------------
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ekchu30f6t5plbbgyaq.jpg)

Designers can create the illusion of physical space and spatial relationships through:

1) Linear Perspective
2) Size & Vertical Location
3) Overlapping
4) Detail (Aerial or Atmospheric Perspective)
Note: testing a thing
Tags: note, asciidoctor, hugo, site
Published: 2021-02-20 01:51:58

---
title: Note: testing a thing
published: true
date: 2021-02-15 02:29:10 UTC
tags: note,asciidoctor,hugo,site
canonical_url: https://randomgeekery.org/note/2021/02/testing-a-thing/
---

Sometime [last year](https://randomgeekery.org/post/2020/05/letting-ruby-build-asciidoctor-files-for-hugo/) I had half of a great idea for better [Asciidoctor](https://asciidoctor.org/) handling in [Hugo](https://gohugo.io). I _might_ have the other half now:

- keep my content in the content folder.
- Use `adoc.txt` for the extension so Hugo ignores it.
- Point my `build-adoc` script there instead of a neighboring `adoc` folder.
- profit?

Would work for [reStructuredText](https://randomgeekery.org/tags/rst) too.

Need to get through a few post cycles to see how it works.
Create Variable without var
Tags: javascript, beginners
Published: 2021-02-15 02:24:40

> Once upon a time, there are creature that destructive, seeking a clumpsy developer to lose their guard and attack them with their claw.

The `var` is very wild because `var` has no block scope which mean they are "the beast" that visible outside blocks. here some example:
```
  if(true){
    var a = 'var is wild' 
  }
  alert(a);
```

since `var` ignore blocks, `var a` will become global variable and  browser will show alert that contain variable `a` value.

`var` also can't be `block-or` and `loop-local` which mean it's just ignore `for loop` block.

if you're using `var` inside function, then `var` become a function-level variable
```
  function sayHi() {
    if (true) {
      var a = "Hi";
    }

    alert(a); // works
  }

  sayHi();
  alert(a); // ReferenceError: a is not defined
```

when we create `var` and redeclare it below the first variable, they will ignore the old one and use newest variable value
```
var user = "Pete";
var user = "John"; // this "var" does nothing (already declared)
// ...it doesn't trigger an error

alert(user); // John
```

remember when I mention that `var` is a global variable, it's also mean that they are able to declare below their use, so technically move them above
```
function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();
```
as same as with
```
function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();
```

because of this behaviour, I suggest you to use `let` and `cost` instead of `var` they are more modern and clean in term of block.
NPM notes
Published: 2021-02-15 02:17:54


- `~version` __“Approximately equivalent to version”__, will update you to all future __patch__ versions, without incrementing the __minor__ version. `~1.2.3` will use releases from 1.2.3 to <1.3.0.

- `^version` __“Compatible with version”__, will update you to all future __minor/patch__ versions, without incrementing the __major__ version. `^2.3.4` will use releases from 2.3.4 to <3.0.0.


Refs:
* https://docs.npmjs.com/cli/v7/configuring-npm/package-json
* https://docs.npmjs.com/misc/semver
* https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json
Round 1 Day 3
Tags: 100daysofcode, elixir
Published: 2021-02-15 02:12:29

---
title: Round 1 Day 3
published: true
description: Finished https://elixirschool.com/en/lessons/basics
tags: 100daysofcode, elixir
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1613355044450/ggGLGvRqH.png?auto=compress
datePosted: '2021-02-14'
devToId: 603919
---

# Keep Moving Forward

Three days ago I started the #100DaysOfCode Challenge, and today I finished elixirschool.com basics for elixir. This feels great because I started those basics over a year ago and stopped.

Quick TL;DR; for today.

## Testing

- ExUnit is built in to elixir, so I'll prolly be using that for my testing framework.
- Test Mocks. The elixir community has an interesting take on mocking. The whole idea revolves around using "mocks" as a noun and not a verb. The concept is to keep parts of the code isolated and easier to test.
- If you want to read more, check out the original blog post (here)[http://blog.plataformatec.com.br/2015/10/mocks-and-explicit-contracts/]

## Comprehensions

- Generators:
  - are neato
  - multiple generators can be used at a time
- Filters can be added to generators as you iterate over an Enum
  - Ex. `is_even` => `for x <- 1..10, is_even(x), do: x`

## Strings

- Prolly never gonna need to use Graphemes or Codepoints

## Time

- `Time.utc_now` returns a "Time Struct" `~T[19:39:31.056226]`
- `Date.utc_today` returns a "Date Struct" `~D[2021-02-15]`
- `NaiveDateTime` feels .... useless. Its Date + Time with no timezone /shrug
- I'll prolly most likly use `DateTime` instead.

## Custom Mix Tasks

- Are located in `lib/mix/tasks/*.ex`
- When creating a Task you have to use the macro `use Mix.Task`
- Mix tasks do not autoload dependencies

## iEX Helpers (cool things about the REPL)

- Tab autocomplete
- `.iex.exs` is a local file to configure the repl
- `h Module or Function` renders the docs
- `r Module` will recompile the module

Tada. Day 3. Fin.
If you want to reach out, you can find me on (The Tweeters)[https://twitter.com/basicbrogrammer]
SEO , Accessibility and Website Audit.
Published: 2021-02-15 02:05:34

<strong>Importance of Accessibility</strong>

Accessibility is extremely important when creating any form of website or application because it makes your platform an inclusion site that welcomes people regardless of their circumstance. A website that has great accessibility draws in more clients for a business and also increases the SEO score whenever their name is used on a search engine. Today, I am going to run an audit on Power Thesaurus which is a digital dictionary commonly used by people to search for synonyms antonyms or definition for a word. I will be using Lighthouse, Wave and Web.dev to check how well the website does in terms of its accessibility, SEO, etc.

<strong>Lighthouse</strong>
Lighthouse is a built in google extension that is part of the chrome web browser. To access lighthouse, I recommend you first visit the website,right click and select the inspect tab. Then at the top of Elements bar select lighthouse and click on generate report.You can also access lighthouse through dev tools as well. When I run the audit using lighthouse on PowerThesaurus. It can me a report of the Performance, Accessibility, Best Practices,SEO,and Progress Web App. There were problems highlights in the accessibility category such as the background and foreground colors do not have a sufficient contrast ratio and warning about how  disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page.

<strong>WAVE</strong>
Unlike lighthouse, Wave is a website and an external extension that also gives detailed assessment on website. To test this, we have to copy the URL of the auditing site and search or install their extension. After using wave on PowerThesaurus there was one error contrast error and thirteen ARIA errors, which checks to see if names are accessible to be read by screen readers.

<strong>Web.dev</strong>
Similar to Wave, you search up the auditing site by its URL. However, the report was similar to that of lighthouse. The report from Wave stated that PowerThesaurus , had bad accessibility with total blocking time, time of interactive, Performance and Accessibility.

Below is a Link to my youtube, where I explain how to use these tools 
{% youtube LA5YVzNFCeU %}
How to make your cloned Github repo as your Exercism workspace
Tags: exercism, webdev, github
Published: 2021-02-15 01:42:15

Some people will say that you don't need to do it because your Exercism solutions are already posted on your Exercism profile. However, some still want to push it to their Github repo and I am among them. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8gft8b797b3eq7j9aebo.gif)

### Note:

These steps can be applied as well if you just want to simply rename, move, or just going to change your Exercism workspace. In other words, if you just want to configure your Exercism workspace then you just only need to follow **Step 3 & Step 4**. But in this case, we will stick to the topic. Shall we?

## Here are the steps:

#### Step 1
Create a new Github repository for your Exercism solutions if you haven't created one yet. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l6gvkipjj0kfxp8dteoy.JPG)

#### Step 2
Once you're done, clone your Github repo to your machine. 
```
git clone https://github.com/<your-username>/<your-repo-name>.git
``` 
Done cloning? Alright, let's go to the 3rd step! 

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

#### Step 3
This time, we are going to configure our Exercism and this is the most important part. 

Using your ***Command Prompt***, go to the root directory where your Exercism CLI is located. Mine is in the..

```
C:\Users\hally>
```

#### Step 4
Okay patience. Now, to configure your Exercism workspace, you need to run this command line

```
exercism configure -w=<type-your-new-location-with-your-repo-name>
```

The `-w` is short for `--workspace`.
In my situation, I have to move it to another drive. 

```
exercism configure -w="G:/Programming Projects/Github/<cloned-repo-name>"
```

#### Step 5
Make sure that you'll see this line on your command prompt:

```
You have configured the Exercism command-line client:
```
And make sure that on the ***Workspace*** line displays your new directory. 

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

If so, you can now start downloading the exercises and it should be downloaded straight to your cloned repository.

Try to check your Git status:

```
git status
```

But after you solved your downloaded challenge and then want to push it now, you can do so.

```
git add . 
git commit -m “adding a solution”
git push
```


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


### Source
[How To Setup Exercism CLI To Use Your Own Github Repository by Jim Lynch](https://medium.com/@JimLynchCodes_76316/how-to-setup-exercism-cli-to-use-your-own-github-repository-5892d401b39f)