teleren/devto huggingface dataset:
CORS Error Solved | JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2021-11-23 07:08:05

Hello 👋, I am back again with a new article; In this article I will be showing a method to solve CORS Issue

### What is CORS? 
Cross-origin resource sharing is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

### How to fix
{% youtube BD8MNyyBmCo %}
Make sure to check out the detailed **video**

Check out Source Code: https://github.com/snowbit-coderboi/CORS-Error-Solution

Thank you for reading!
Top 5 effective communication techniques 
Tags: beginners, tutorial, career, mobile
Published: 2021-11-23 07:07:07

Today’s topic is on top 5 effective communication techniques. I will cover all the points in this forum and the techniques which I will tell you after some time, you can use these at the workplace, healthcare, customer care service, and in academics I mean assignment. 

If you are a beginner and looking best effective <a href="https://www.assignmenthelppro.com/blog/communication-techniques/">communication techniques</a> so you are at the right place here I will tell you super hot techniques, it is also trending on Google or any other platform like social media example Instagram, Facebook, etc. So let’s get started.

<b>Listen carefully</b>
As a beginner adopt this one quality which helps you to understand speaker or communicator words. Tone and style of speaker words.

<b>Wear Smile</b> 
Whenever you communicate to others or take a commutative speech should wear a genuine smile because it connects to the audience easily. 

<b>Response to the speaker</b> 
If you are at the seminar or host ask any question or suggestion, try to share your opinion or answer. It boosts your confidence level.

<b>Audio</b> 
During sleeping time try to listen audio or podcast. 

<b>Pay attention to your body</b>  
Body language or your verbal communication have coordination. Not to be different otherwise audiences judge you wrong or fake if you are unable to make a coordinate.

Wants to learn more about Therapeutic communication techniques visit:  assignmenthelppro/blog

Source Link: <a href="https://onlineassignmenthelperaustralia.blogspot.com/2021/11/top-5-effective-communication-techniques.html">https://onlineassignmenthelperaustralia.blogspot.com/2021/11/top-5-effective-communication-techniques.html</a>
Laravel Livewire Tutorial Create Movie Website #17 Generate Series From TMDB API
Tags: laravel, tutorial, tailwindcss
Published: 2021-11-23 06:58:47

In this video, we are going to work with series.
Laravel movie website
laravel livewire movie website
Add Tailwind Css Admin Dashboard 
add tailwind css responsive table


Playlists:
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
#laravel #tutorial #movieapp

https://www.youtube.com/watch?v=qER99YshJKc
ASMR Coding a JavaScript App | No Talk - Rainy Night
Tags: javascript, codenewbie, programming, beginners
Published: 2021-11-23 06:54:21

I did not realize how coding tutorials on YouTube are sometimes annoying - including my own (no exception 😄), don't get me wrong, I mean it's great to be taught and all but often it's just annoying, you want to watch someone coding in silence and code with them, especially if you're familiar with the language/framework/tech they're using in the video.

This is an HTML/CSS/JavaScript application, coded from scratch in silence in a rainy night here in Poland, and I did not want to talk  just code in silence and if you're a beginner - intermediate, you can code along with me or you can leave it turned on while doing your own stuff.

The idea was inspired from one famous YouTuber called Takuya and his channel is called "devaslife", he's a Japanese from Osaka who speaks perfect English. The man types in a very smooth way on the terminal - he uses Fish terminal - and never touches the mouse in all of his videos; productive and efficient. I was only inspired by him, and started creating my own videos with my own style, just occasionally not being the main style on the channel.

The Application itself is a Steps converter .. say you walked today 31450 steps (info from your iphone or android app) but you don't know what does that mean in Km ? or how much calories have you burned ? so you enter the number of steps in the application and it  outputs the result after a nice loading animation is being displayed (just for UX, nothing more - a simple setTimeOut method).

Here's the video
Hope you enjoy it - if you like that type of videos

{% youtube 9jUp7zt6g1s  %}

YouTube : https://www.youtube.com/channel/UC7EVSn5inapL20oPSwAwEUg
Facebook : https://www.facebook.com/bekbrace​​​​
Twitter : https://twitter.com/BekBrace
Instagram : https://www.instagram.com/bek_brace/
GitHub profile : https://github.com/BekBrace
Website : https://bekbrace.com
Getting Started with UI/UX Design - New Podcast Episode
Tags: productivity, uiweekly, ux, beginners
Published: 2021-11-23 06:47:18

New podcast episode is UP!!!

Anthony Njoroge, Community Lead UI/UX Nairobi shares tips on how to get started into UI/UX as a career and how build your portfolio around it...

## What is UI/UX? 
This is the design of everyday things how they should feel, how they should interface, function and how they should look. UI/UX is about giving users the experience they are going to find delightful. An important thing to note is that both UI & UX focuses on the user by making sure they have a good experience of the product.


Listen to the whole session: 

<figure class="video_container">
  <iframe src="https://twitter.com/i/status/1463029137518510087" frameborder="0" allowfullscreen="true"> </iframe>
</figure>

[Getting Started with UI/UX Desing](https://anchor.fm/hillary-nyakundi/episodes/A-Chat-with-Lead-UIUX-Nairobi-Anthony-on-how-To-Get-Started-with-UIUX-Design-e1amge2)

[Let's TalkDeveloper](https://anchor.fm/hillary-nyakundi)

Enjoyed the episode support me with a cup [Coffee ☕](https://www.buymeacoffee.com/lary),

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi)  | [GitHub](https://github.com/larymak) 

Enjoy Coding ❤
Running ffmpeg as an rtmp server
Tags: ffmpeg, ffplay, rtmp
Published: 2021-11-23 06:35:13

Ffmpeg supports running as an rtmp server which is very useful to test/verify an incoming rtmp stream. 
Run ffmpeg with `-listen 1` flag as a server and set `-i rtmp://ip:port`. Copy the incoming stream to udp output to be able to check the stream using ffplay or vlc afterwards:
```
ffmpeg -f flv -listen 1 -i rtmp://127.0.0.1:9000 -c copy udp://127.0.0.1:9001
```

and then check the stream as follows:
```
ffplay -i udp:/127.0.0.1:900
```
I wrote a script to bring Chrome DevTools to Android
Tags: opensource, webdev, programming, javascript
Published: 2021-11-23 06:14:13

Hey everyone, I wrote a script to bring DevTools (based on eruda) to Android Chrome. It works on any website, and you can access it by shaking your phone. It uses a local VPN tunnel to dynamically inject the script into a page. Installation is simple, takes around 10 minutes.

Some features include:

- Execute JavaScript on page

- Select an element on the page to view its properties

- Inspect incoming and outgoing network requests

A 1-minute demo: {% youtube fVCdcvZ7Cv8 %}

Feel free to check out the repo here! {% github leohku/andure %}
React Components
Tags: beginners, react
Published: 2021-11-23 06:00:42

## What is component?
Components are basic building blocks of Ract App. A component is a class or a function that accepts inputs and returns react element that describes how the user interface should look. Components are independent and re-usable. 

##There are main two types of Components
* Class Component
* Functional Component

## Class Component
A Class component requires you to extends from React.Components and create a Render function that returns a React Element. A class component is called as statefull class component. Whenever the state of the components changes the render method will call.

**For Example**

*Create Class Component name as Demo*

```
class Demo extends React.Component 
{
  render() 
  {
    return <h1>Hello, I am Rohitraj!</h1>;
  }
}
```

## Functional Component
A Functional component accepts props as an argument and returns a React Element. There is no render method used in funtional component. A function component is called as stateless functional component. It render the user interface based on props.

**For Example**

*Create Funtional Component name as Demo*

```
function Demo() 
{
  return <h1>Hello, I am Rohitraj!</h1>;
}
```

##Rendering a Component
Rendering a component means a component with render prop which takes a funtion that returns a React Element and call it.
Given below is the example where ReactDOM.render renders your component i.e. <Demo/> to the DOM in the root element.

**Example**
```
ReactDOM.render(<Demo />, document.getElementById('root'));
```

##Components in Component
we can use components inside other component. Means we can create multiple funtions in one component and return one function into another funtion.

**Example**
```
function Demo() {
  return <h1>I am Rohitraj!</h1>;
}

function Sample() {
  return (
    <>
      <h1>Who are you?</h1>
      <Demo />
    </>
  );
}

ReactDOM.render(<Sample />, document.getElementById('root'));
```

##Components in Files
We can create a new file with .js extension and inside that we create a funtion and returns some HTML element and we export this function. Given below you can see the example:-
**Example**
*This is the new file we called it as Demo.js*
```
function Demo() {
  return <h1>Hello, I am Rohitraj!</h1>;
}

export default Car;
```
This is what we called a Demo Component. Now you have to import this file in your application. So for that we use the *import* statment then the *function_name* and the *path* where the file is located. Given below you can see this:-
```
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo.js';

ReactDOM.render(<Demo />, document.getElementById('root'));
```
How to store result from async pipe in angular
Tags: angular, html, codever, snippets
Published: 2021-11-23 05:34:09

**Project**: [`codever`](https://github.com/CodeverDotDev/codever) - **File**:  `snippet-details.component.html`

Use the `async` pipe and store it in variable for later use `*ngIf="(snippet$ | async) as snippet"`. Below the complete snippet example with usage included:

```html
<div *ngIf="(snippet$ | async) as snippet" class="card">
  <div class="card-body show-hide">
    <div class="header-wrapper">
      <div class="titles">
        <h4 *ngIf='inlist; else hyperLinkTitle' class="card-title">
             <span *ngIf="snippet.public; else linkToPrivateSnippet">
                <i class="fas fa-eye fa-xs mr-2" title="Public snippet"></i>
                <a routerLink="/snippets/{{snippet._id}}/details"
                   [innerHtml]="snippet.title | highlight: queryText"></a> </span>
          <ng-template #linkToPrivateSnippet>
                <span>
                  <i class="fas fa-eye-slash fa-xs mr-2" title="Private snippet"></i>
                  <a routerLink="/my-snippets/{{snippet._id}}/details"
                     [innerHtml]="snippet.title | highlight: queryText"></a>
                </span>
          </ng-template>
        </h4>
        <ng-template #hyperLinkTitle>
          <h4 class="card-title">
            <i *ngIf="snippet.public; else linkToPrivateSnippet" class="fas fa-eye fa-xs mr-1"
               title="Public snippet"></i>
            <ng-template #linkToPrivateSnippet>
              <i class="fas fa-eye-slash fa-xs mr-1" title="Private snippet"></i>
            </ng-template>
            {{snippet.title}} <span *ngIf="snippet.public === false; else publicPill"
                                    class="badge badge-pill badge-light ml-3 font-weight-normal">Private</span>
            <ng-template #publicPill>
              <span class="badge badge-pill badge-light ml-3  font-weight-normal">Public</span>
            </ng-template>
          </h4>
        </ng-template>
        <h6 class="card-subtitle mb-2 text-muted url-under-title">
          <span *ngIf="snippet.sourceUrl"><strong>Ref</strong> -
            <span
              *ngIf="snippet.sourceUrl.startsWith('http:') || snippet.sourceUrl.startsWith('https:'); else justText">
              <a href="{{snippet.sourceUrl}}" target="_blank">{{snippet.sourceUrl}}</a>
              <sup class="ml-1"><i class="fas fa-external-link-alt"></i></sup>
            </span>
            <ng-template #justText>
              <span>{{snippet.sourceUrl}}</span>
            </ng-template>
            </span>
        </h6>
      </div>
    </div>

    <hr class="title-content-separator">

    <app-codelet-card-body [codelet]="snippet" [queryText]="queryText" [inList]="inlist"></app-codelet-card-body>

  </div>

</div>

```
<hr>

> Shared :heart: from [Codever](https://www.codever.dev/snippets/602664d8cd228421f08d6d9d/details).  :point_right:  use the [**copy to mine**](https://www.codever.dev/snippets/602664d8cd228421f08d6d9d/details) functionality to add it to your personal snippets collection.
How to highlight liquid code in Jekyll
Tags: jekyll, codehighlighting, codever, snippets
Published: 2021-11-23 05:23:41

**Project**: [`codepediaorg.github.io`](https://github.com/CodepediaOrg/codepediaorg.github.io)

You need to place `{% raw %}` and  `{% endraw %}`  tags around your code. Since Jekyll 4.0 , you can add `render_with_liquid: false` in your front matter to disable Liquid entirely for a particular document. Use the standard Code snippet highlighting from Jekyll:

```liquid
{% highlight liquid %}
{% raw %}
      {% if page.categories[0] != "snippets" %}
        {% include promote-bookmarks.dev.html %}
      {% endif %}
{% endraw %}
{% endhighlight %}
```

Or place it in markdown code markers:

```liquid
```liquid
{% raw %}
  {% if page.categories[0] != "snippets" %}
    {% include promote-bookmarks.dev.html %}
  {% endif %}
{% endraw %}
```
```

<span style="font-size: 0.9rem">
  <strong>Reference - </strong>
  <a href="https://jekyllrb.com/docs/liquid/tags/" target="_blank" style="font-weight: lighter">
     https://jekyllrb.com/docs/liquid/tags/
  </a>
</span>

<hr/>

<hr>

> Shared :heart: from [Codever](https://www.codever.dev/snippets/601138a3e78329226ca53868/details).  :point_right:  use the [**copy to mine**](https://www.codever.dev/snippets/601138a3e78329226ca53868/details) functionality to add it to your personal snippets collection.
DevBox Showcase: Image Extractor
Tags: productivity, tutorial, image, scrape
Published: 2021-11-23 05:16:11

Hi 👋,

This is the fifth post in the series showcasing tools from [DevBox](https://www.dev-box.app) 🎉, an application (desktop, browser extension or web) packed with everything that every developer needs.

-------

DevBox now has a tool to extract images from websites, here is a short video on how to use it.

{% vimeo 648887011 %}

Or you can follow this step-by-step tutorial. 

Once DevBox is opened search for the tool and click on its card:

![Image Extractor Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky7oq8wxefat9rf8sytw.png)

It will show you the interface:

![Image Extractor Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgyb6p122t67gjcvl1t2.png)

After filling in the URL and clicking on the button you will see all images on the page in a grid:

![Images Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdab6vsrqs57xy62e0j9.png)

You can now download the images one by one.

-------

More DevBox showcases are coming, so follow me here if you want to be notified!
Research Article
Tags: computerscience, research, analytics
Published: 2021-11-23 05:03:25

Hey👋🏻, Buddies. It's been a long time since I started using DEV community.

Here I am back with my 3 months hard work on Research Article 📑 in which I need to collect as many responses from techies & Devs .Kindly spend 5 min ⏳ to complete this survey and share this around your Tech Communities 🌐

𝐒𝐓𝐔𝐃𝐇𝐔𝐁 ✨warmly presents,

𝐓𝐄𝐂𝐇 𝐆𝐀𝐃𝐆𝐄𝐓𝐒 𝐁𝐑𝐀𝐍𝐃 𝐏𝐄𝐑𝐂𝐄𝐏𝐓𝐈𝐎𝐍 𝐀𝐍𝐃 𝐈𝐓𝐒 𝐌𝐀𝐑𝐊𝐄𝐓𝐈𝐍𝐆 𝐒𝐓𝐑𝐀𝐓𝐄𝐆𝐈𝐄𝐒 Survey,🧐 which allows you to understand about best gadgets 🖥️🖱️mostly used by fellow 𝒕𝒆𝒄𝒉𝒏𝒐𝒑𝒉𝒊𝒍𝒆𝒔 🤓

https://2k9wbxl4joi.typeform.com/StudHub


If you like my effort please do like , share it among your peers.

Do follow me for more tech updates and threads!!
@vidhyavarshanyjs
How to Bind Data in a Blazor Rich Text Editor Component
Tags: webdev, csharp, dotnet, blazor
Published: 2021-11-23 04:54:36

Learn how to bind data in the Syncfusion [Blazor Rich Text Editor (RTE)](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor?utm_source=dev.to&utm_medium=socialmedia&utm_campaign=backlink_promotion) in a Blazor WebAssembly app. This video explains how to bind the HTML data to the Rich Text Editor using one-way, two-way, and dynamic value binding. Also, it explains how to bind markdown data to the Rich Text Editor.

Product Overview:[Blazor Rich Text Editor (RTE)](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor?utm_source=dev.to&utm_medium=socialmedia&utm_campaign=backlink_promotion)

Example project: https://github.com/SyncfusionExamples...

Explore tutorial videos: https://bit.ly/3fAz0Ch

{% youtube 0rDnLJKbf-Y %}
Horrifying Vulnerabilities in the Death/Birth Certificate System
Tags: security, infosec, defcon, cybersecurity
Published: 2021-11-23 04:46:38

- **Premise:** Death and birth certificates can be filed online, with practically no oversight.
- **DefCon Response:** Let's show the world how easy it is to kill anyone, and/or profit from the birthing/killing of virtual…babies?

> This is one of my _DefCon 23 Debriefs_, **from the blog archives back in 2015!** If you ever have the opportunity to get your work to ship you to Defcon, take it. If you ever get the opportunity to ship yourself, don't think: just go.

---

- **Presentation Title:** I Will Kill You
- **The Presenter:** Chris Rock
- **Published Book:** [The Baby Harvest](https://smile.amazon.com/gp/product/B013AZ6MKS/ref=as_li_tl?ie=UTF8&tag=storyinfluxpr-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=B013AZ6MKS&linkId=48c6eb163dadec946d961eabf3b04d58)

Chris Rock gave a crazy presentation about how terrifyingly vulnerable the systems are surrounding death certificates and birth certificates. It's incredibly vulnerable due to how easy it is to register yourself in the online systems currently available, in order to cause mayhem. With all of the necessary information needed to falsify deaths and births being freely available online, anyone can do this.

In the presentation, he walks through how anyone can make someone legally dead — including themselves. Why would anyone want to do that?

- Collect on Life Insurance
- Falsely create wills for others, that are then collected on
- Make life incredibly difficult for absolutely anyone. (NOTE: See _Bulk Upload_ mode in video below for how wild this can become!)

[Chris even wrote a book](https://smile.amazon.com/gp/product/B013AZ6MKS/ref=as_li_tl?ie=UTF8&tag=storyinfluxpr-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=B013AZ6MKS&linkId=48c6eb163dadec946d961eabf3b04d58) on creating false birth certificates and identities, then profiting from the false deaths of the virtual babies.

His presentation was uploaded to YouTube on the [Official DefConConference YouTube Channel](https://www.youtube.com/channel/UC6Om9kAkl32dWlDSNlDS9Iw), so now the world knows. Will this bring any sort of change quickly? Or will we be seeing many people confusingly finding themselves "dead," and needing to re-register themselves as living human beings?

You can find his presentation below:

{% youtube 9FdHq3WfJgs %}

Want to see some more about how big of a problem this is? [Check out the 60 Minutes video](http://www.cbsnews.com/news/social-security-identity-fraud-scott-pelley-60-minutes/), from earlier this year, about the Death Master File and it's incredible flaws. People are interviewed who have been fighting to be recognized as alive in the system. You can also see [an article written by Paul Ford, of the New Republic](http://www.newrepublic.com/article/122456/final-file), who wrote about his exploration of the Death Master File. You should take a look. Oh yeah, [and you should also check here to make sure you're not already dead.](http://www.newrepublic.com/article/122529/database-dead-are-you-it)
How to use AWS Amplify environment variable in React ?
Tags: aws, react, amplify, programming
Published: 2021-11-23 04:21:35

Hello Devs, 

Recently delivered session at Jaws Pankration 2021, Japan on **how to use AWS Amplify for static web hosting** and usage of environment variables for React application. Writing this blog on similar topics for references. 

Let's understand about **AWS Amplify** first. 

### What is AWS Amplify ?

**AWS Amplify** is a package of tools and services. Before amplify came into picture AWS was providing static hosting using S3 bucket. Problem with S3 was that only any library installation like node modules had to do it before pushing code into S3 bucket. To solve this problem and make stronger and better solution come with Amplify console.

- To accelerate deploying app over AWS cloud
- Make more easier installation of dependent library
- built-in CLI

How to host web apps ( React, Angular, Static website, other JS Framework etc. ) using AWS Amplify can find steps here -  https://www.internetkatta.com/static-hosting-of-angular-build-using-aws-amplify

Now let's checkout how to use the Amplify environment variable console to pass variables to code like in React etc. I haven't try yet another framework like Angular. 

Mostly we always worried about where to keep environmental value like:

- Third-party API keys
- Different customisation parameters
- Secrets 

if web apps are going to host as static hosting. It is not recommended to keep under git repository or inside code. To solve this issue Amplify provide  environment console UI where we can set environment variable.Once we set those variable we have to do small changes in build configuration under `amplify.yaml` file as shown below image.

Environment variable setting console. Navigate to Amplify Console -> Select App -> App Setting -> Environment Variables 

![environment-variable.png](https://s3.amazonaws.com/demo.avinashdalvi.com/assets/environment-variable.png)

Example of `amplify.yaml for React`. Because React require environment variable should have prefix `REACT_APP`
```
version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - REACT_APP_ENV_API_KEY=${REACT_APP_ENV_API_KEY}
            - npm run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: demo-app
```
and this variable can be access in React code like `process.env.REACT_APP_ENV_API_KEY`

**Demo link**: https://jawspankration2021-demo.avinashdalvi.com

**Code** : https://github.com/aviboy2006/jaws-pankration-2021/blob/main/demo-app

Hope this blog helps you. If you like my blog please don't forget to like the article. It will encourage me to write more such AWS Cloud related articles. You can reach out to me over my twitter handle @aviboy2006


### References : 

- https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html
- https://stackoverflow.com/questions/64072288/how-to-add-environment-variables-to-aws-amplify