teleren/devto huggingface dataset:
Call stack? Event loop? Async? 🤔
Tags: javascript, beginners, youtube
Published: 2021-09-05 01:52:23

## What are Call stack? Event loop? Async? 🤔

Watch this youtube to understand them with the awesome visualization!

What the heck is the event loop anyway? | Philip Roberts | JSConf EU - YouTube: {% youtube 8aGhZQkoFbQ %}

## Memo

- JS is single thread, non-blocking, asynchronous, concurrent language
- JS has
    - call stack
    - event loop
    - callback queue
    - other apis
- V8 has
    - call stack: execution context
    - heap: memory allocation
- Call stack
    - one thread == one call stack == one thing at a time
    ⇒ blocking
- Why blocking is the problem
⇒ Because JS runs in the browser and while some action is completed, the browser cannot do anything(User cannot take any actions)
    - Render is blocked when there is actions on call stack
- Solution?
⇒ asynchronous callbacks(Concurrency)
- Concurrency & Event loop
    - e.g. `setTimeout()`
        - stack(deferring the action) ⇒ WebAPI(wait for given time) ⇒ task queue(wait until the call stack is empty) ⇒ Event loop(move the action to stack) ⇒ stack(run the action)
            - Event loop: When stack is empty, looks at the task queue and takes the first take from the queue
- Render is blocked when there is actions on call stack, and it has higher priority than Callback queue
    - "Don't put slow call on the stack, make it asynchronous"
    - Going asynchronous means give time to render before each async callbacks executed
- Scroll event
⇒ Debounce it, because it will create a lot of tasks in the queue
Full-Form of CSIR
Published: 2021-09-05 01:40:56

What is the full form of CSIR? The full form of CSIR is “Council of Scientific and Industrial Research”. It is a contemporary R&D organization established by the Govt. of India in September 1942 as an autonomous body. It is known for its cutting edge R&D knowledgebase in diverse S&T areas.
[Read More](https://swiflearn.com/study-material/full-forms/full-form-of-csir/)
AWS CIS Compliance in 15 minutes with 1 Command
Tags: aws, security, python, devops
Published: 2021-09-05 00:50:31

Did you know an AWS Account is only 39% CIS compliant by default?

![SecurityHub ScreenShot](https://i.postimg.cc/sfQCmgWG/cis-security-hub-initial.png)

That's why I've created a Python script (which is available free on my GitHub page) which will help you achieve CIS, PCI DSS, and AWS Security Best Practice compliance, all with just one command.

Behind the scenes it checks about 200 controls and with my script you will meet over 95% of those.  Some items such as enabling hardware MFA are not possible with a script.

![SecurityHub MFA ScreenShot](https://i.postimg.cc/SKJg4JkW/cis-securityhub-hardware-mfa.png)

Behind the scenes it launching a nested CloudFormation stack with 10 sub-stacks.  Then it uses Python (via the AWS boto3 SDK library) to do the following:
* Enable GuardDuty
* Remove Default Security Group Rules
* Update the Password Policy
* Enable S3 Secure Transport
* Enable PCI Standards
* Enable a VPC for the Control Tower Lambda function

You can download the script and find details on how run it here.  [NickTheSecurityDude GitHub](https://github.com/NickTheSecurityDude/AWS-SecurityHub-CIS-Compliance-Automation "NickTheSecurityDude GitHub")

After you run the script, simply give SecurityHub about 24 hours to update.

![SecurityHub After ScreenShot](https://i.postimg.cc/QCGfRTbC/cis-securityhub-after.png)

The script will send both email notices as well Slack notifications in the event a control is detected out of compliance.

![CIS Slack ScreenShot](https://i.postimg.cc/rphnv3bY/cis-slack.png)

I will be doing a live demo of the script at the September 2021 Chicago AWS Security Meetup Group.  Join me via Zoom on 9/21 at 7pm to view first hand how the script works and to ask any questions.

![SecurityHub After ScreenShot 2](https://i.postimg.cc/MH79xpPD/cis-securityhub-after-2.png)
JS Coding Question #6: Is Anagram
Tags: challenge, javascript, tutorial, career
Published: 2021-09-04 23:44:35

---
title: JS Coding Question #6: Is Anagram
published: true
description: Front end job interview question, Find if two strings are Anagram
tags: challenge, javascript, tutorial, career 
cover_image: https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80
series: Job Interview Preparation Materials
---

#### Interview Question #6:
Write a function that will check if two strings are anagram❓🤔

> If you need practice, try to solve this on your own. I have included 2 potential solutions below. 

> Note: There are many other potential solutions to this problem.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

Code if you want to play around with it: https://codepen.io/angelo_jin/pen/xxrVmdg

#### Solution #1: Array Sort
- This solution will utilize a helper function to remove all unwanted punctuation and symbols, basically non-alphabetic characters. Then, will sort the string. Once both strings are sorted, compare if they are equal
```js 
function isAnagram(stringA, stringB) {
	const normalize = (str) => {
		return str
			.replace(/[^\w]/g, '')
			.toLowerCase()
			.split('')
			.sort()
			.join('')
	}

  return normalize(stringA) === normalize(stringB);
}
```

#### Solution #2: Object/Hash Map
- This solution is what I prefer although more steps are needed than the first solution. 

Create a helper function to build a hash map for the string counting each and every characters. Once map is built, iterate and compare the count of first map against the second map.

```js
function createCharMap (str) {
	const map = {}
	const normalizedString = str.replace(/[^\w]/g, '').toLowerCase()

	for (let char of normalizedString) {
		map[char] = map[char] + 1 || 1
	}

	return map
}

function isAnagram(stringA, stringB) {
  const charMapA = createCharMap(stringA)
  const charMapB = createCharMap(stringB)

  if (Object.keys(charMapA).length !== Object.keys(charMapB).length) {
    return false
  }

  for (let char in charMapA) {
    if (charMapA[char] !== charMapB[char]) {
      return false
    }
  }

  return true
}
```


Happy coding and good luck if you are interviewing!

If you want to support me - [Buy Me A Coffee](https://www.buymeacoffee.com/letscode77)


In case you like a video instead of bunch of code 👍😊
{% youtube ZelRKkGk8gY %}
Instalando VsCode no Android.
Tags: vscode, android, ubuntu, dex
Published: 2021-09-04 23:32:46

Diversos smartphones estão vindo com recursos que possibilitam transforma-lo em um mini PC, como por exemplo o recurso Dex da Samsung que permite conectar em monitor Hdmi e/ou teclado e mouse  tornando seu android em um poderoso mini PC e com isso servindo de alternativa para suas tarefas.

Esse é um tutorial rápido de como instalar o VS Code no Android. 

Iremos utilizar um fork do vscode que funciona como servidor e com isso abriremos no Chrome. Ele é o Code OSS.

### Termux

O primeiro passo é instalar o app de terminal no seu android. Ele se chama termux e você pode baixar aqui: 

[Baixe aqui o termux] (https://play.google.com/store/apps/details?id=com.termux)

Uma vez com o termux aberto, você irá instalar o Ubuntu. É através do Ubuntu que será instalado o vscode.
###Ubuntu
Para instalar o Ubuntu execute o seguinte comando no termux:

`pkg install wget openssl-tool proot -y && hash -r && wget https://raw.githubusercontent.com/EXALAB/AnLinux-Resources/master/Scripts/Installer/Ubuntu/ubuntu.sh && bash ubuntu.sh`

Após instalar o Ubuntu basta inicia-lo através do comando:

`./start-ubuntu.sh`

![Start Ubuntu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vgal6utonri0op02tdx.jpg)
### Baixar VsCode
Uma vez no Ubuntu, rode esse comando para baixar o vscode

`wget https://github.com/cdr/code-server/releases/download/2.1698/code-server2.1698-vsc1.41.1-linux-arm64.tar.gz`

Descompacte o arquivo baixado

`tar -xvf ./code-server2.1698-vsc1.41.1-linux-arm64.tar.gz`

Iremos copiar o arquivo para pasta /bin para que ele seja possível ser executado.

`cp ./code-server2.1698-vsc1.41.1-linux-arm64/code-server /bin`
### Code Server
Agora no seu terminal Ubuntu você pode executar seu code-server através  do comando

`code-server`

![Code Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zd917aie9tgverw22ap0.jpg)

Com isso irá subir um servidor web em localhost:8080 . Basta abrir esse endereço em seu Chrome do celular e pronto.

Para acessar é necessário  uma senha. Essa senha é gerada pelo próprio servidor web quando você roda o comando code-server
  
![Localhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tx507tqlxy0skoidk1p.jpg)

E aí está seu vscode rodando lindamente.

![aaa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4frgei3z0cnfcgengrf.jpg)

Obs: Cada vez que você sobe o servidor, ele gera uma nova senha. Para resolver isso você pode setar uma senha padrão através  do comando:
`export PASSWORD="<your_password>"`

Em um próximo artigo irei abordar as limitações e workarounds.

Até.
Crédito: [How-to VsCode](dev.to/josiasaurel/how-to-install-vscode-on-android-5f8d)
Read Spring Properties Like a Pro
Tags: webdev, tutorial, cloud, java
Published: 2021-09-04 22:57:43


## Configuration Management Is Important ☝️
The necessity of reading configuration in a clean, organized way is growing rapidly especially with the spread of cloud application development and micro-service architecture which requires a lot of integration and connection settings.

---

## What's Wrong With The Typical Way Of Config Reading 🤷

Nothing. However, it can get complicated and messy when we want to inject many of those configs in our code.

Let's look at an example with a single properties file and a test

**application.properties** ⚙️
```properties
demo.test.name=testName  
demo.test.age=16
```
**DemoApplicationTests.java**
```java
@SpringBootTest  
class DemoApplicationTests {  
   @Value("${demo.test.name}")  
   private String name;  
  
  @Value("${demo.test.age}")  
   private Integer age;  
  
  @Test  
  void loadProperty() {  
      assertEquals("testName", name);  
	  assertEquals(16, age);  
  }  
}
```

---

#### Now, imagine we have 5 or 10 of those properties, that would cause our code to be cluttered and hard to follow 🥴

## @ConfigurationProperties To The Rescue 🤠
It allows us to inject values from the `application.properties` file into a custom class. 
```java
@Component  
@ConfigurationProperties(prefix = "demo.test")  
@Setter  
@Getter  
public class DemoTestConfigs  
{  
    private String name;  
	private Integer age;  
}
```
- The `@Component` annotation is to tell Spring to manage this class as a bean and provide it for injection.
- The `@ConfigurationProperties` is what does the magic
	- It looks inside the property files in the class path and loads the properties that start with `demo.test`
- The Lombok `@Setter` is to enable `@ConfigurationProperties` to populate the values in the `DemoTestConfigs` class.

---

### We can then simply inject the `DemoTestConfigs` bean into our services. 🤝

### Let's check it in a test
```java
@SpringBootTest  
public class ConfigurationPropertiesTest  
{  
  @Autowired  
  private DemoTestConfigs demoTestConfigs;  
  
  @Test  
  public void loadPropertiesUsingConfigurationProperties(){  
        assertEquals("testName", demoTestConfigs.getName());  
		assertEquals(16, demoTestConfigs.getAge());  
  }  
}
```

---

## Conclusion 👇
We've seen how `@ConfigurationProperties` helps us bundle our similar configurations into a single component class which we can inject and use instead of specifying each and every one of them.


### Code On [GitHub 💻](https://github.com/Jarjanazy/spring-tutorials/tree/master/demo)
What is a Ternary Operator in JavaScript?
Tags: javascript
Published: 2021-09-04 22:49:45

---
title: What is a Ternary Operator in JavaScript?
description: A ternary operator is a quick and dirty way to write one-liner if statements.
date: 2021-19-08
published: true
tags: javascript
---

A ternary operator is a way to write if/else statements in one line, however if you've never heard of them before, they can be tricky to understand.

## Anatomy of a Ternary Operator

They consist of 3 fundamental components.

1. A condition followed by a question mark (?)
2. An expression to execute if the condition is truthy
3. An expression to execute if the condition is falsy

A ternary operator is written like this: `isTrue ? true : false`. We have our condition `isTrue`. It's the variable we are checking. It represents `if (isTrue)` in a traditional if statement.

The `true` after the question mark represents tha expression we will execute if the variable we are checking returns a truthy value.

The `false` is the expression we will execute if the variable is falsy.

It took me a while to figure out how to actually write ternary operators because I didn't understand them, so I stuck with if statements until I forced myself to learn them.

Since then, I use them quite often, however ternary operators shouldn't always be used, in my opinion.

I use ternary operators when I need a quick check if something is true or false. Use whatever gets the job done, but also provides decent readability.

## How it differs from an if statement

Ternary operators work more like if/else statements.

If I were to write...

```
isTrue ? true
```

It would be like writing...

```
if (isTrue) {}
```

The difference is our ternary operator (the first code block) will fail whereas our if statement will succeed.

It needs an expression to execute for a truthy or falsy result. With that said, ternary operators are more like if/else statements.

They really work liike...

```
if (isTrue) {
  truthy()
} else {
  falsy()
}
```

## A complete example

In order to wrap this up with a pretty bow, I'll include a full example of how a ternary operator can be used.

```
const favouriteColour = "blue"

const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("

console.log(isBlue) // "it's true! It's blue!"

// Let's change our fav colour

const favouriteColour = "red"

const isBlue = favouriteColour === "blue" ? "it's true! it's blue!" : "it's not blue :("

console.log(isBlue) // "it's not blue :("
```

Ternary operators are amazing to use. If you're having a tough time understanding it, just keep practicing and working at it. As with anything that is unknown, through consistent practice, you'll understand it before you know it.

Just remember `favouriteColour === "blue" ?` is our condition, `? truthy :` is our code to execute if it's truthy, and `: falsy;` is our code to execute if it's not.
Your health is your wealth – the importance of taking care of yourself as a software developer
Tags: beginners, codenewbie, health
Published: 2021-09-04 22:13:08


As an upcoming software developer, I am well aware of how inundated we can be in completing as many projects as soon as possible. We do this to improve our understanding of a language before progressing to the next language to learn, or to improve our completed project list to demonstrate we can apply our knowledge. Due to this, we are more likely to neglect out health – both physical and mental, which plays a major key role in success in any field. Indeed, there have been times where I would sit down working on a project for more than 8 hours with little to no breaks. I would do an all-nighter because I am trying to discover the error ruining my code. Only for it to turn out to be a small syntax error. Wonderful. Whilst all this is important, I believe as software developers, we tend to forget about our health which is not good. You matter to people – your family, relatives and close friends. Therefore, the unintentional harm you inflict on yourself can impact others. In this blog, I will be providing tips I practically use to take care of myself as an upcoming software developer.


Exercise 

I am disciplined when it comes to fitness, so this is extremely easy for me. For others, this may be difficult because they dislike the idea of exercising. The thoughts of going to gym automatically drains their energy. You do not need to go to the gym five times per week. If you have the time, that is great. You can visit the gym three times per week to keep you physically active. This is what I do with the fitness program I bought. If you don’t have time to visit the gym at all, try jogging or going for walks every day. If your local park has an outdoor gym, use it. This all has tremendous benefits in keeping you physically active and your health good.

Meditation 

I meditate once a day in the morning. Meditation can help reduce stress which leads to less anxiety. Good for keeping you in a calm state.

Time for yourself 

Personally, once in a while, I have days where I practically do nothing related to code. I use this time to discover new activities I may like, or I treat myself to something good as a reward for the work the I have done. I believe it is important to sometimes to take a break and do something else. By doing this, we are at least trying to bring balance to work and life diverting us from overwhelming ourselves. Yesterday, on the 3rd of September 2021, I went to see the new Marvel movie: Shang-Chi and the Legend of the Ten Rings. Great film; it was a good breather.

I hope to post more in the future to have a positive impact in this community and others.
My first week in taskforce 3.0 Bootcamp
Published: 2021-09-04 22:10:20

As a  developer during my first time in the taskforce, I was excited about how I am going to fit in a new environment where I will be meeting new people and also adapt to the changes quickly 

Thanks to the people I met there, they were friendly from the first day I was there.
I was introduced to what is all about the program and also the people who will be with us during the boot camp as our trainers and facilitators. 

The Bootcamp is divided into sessions. Technical and professional .so for the first week in technical session I learned to make good user stories(expectation and desire of a user of how his/her project is going to be working both the interface and functionality) and also how the user stories can be implemented.

In professional sessions, I learned how to communicate effectively and also different types of communication and where each type is best at using it. After that, I learned best practices of creating a good presentation for the audience and also problems that kill good communication, and also how to prevent them.

Since the Bootcamp, all things had been beyond my expectation but there cannot be some challenges missing. The challenges I have faced in my first week were mainly in the technical part where I was required to work on implementing the user stories in a short period and with you to come up with the design of the project. But lately, I started to enjoy this because I think this is how it goes for the world of software development. and it is an essential skill to have.

Thanks a lot, Awesomity lab and Code of Africa, I am grateful for having me in this Bootcamp.
#100DaysOfCode [ Day 09]
Tags: html, css
Published: 2021-09-04 22:04:01

Hey There , Today is the nineth day of my 100 days coding challenge and today i just go back to vanila css and tried a simple just  to recap the css thats all .
Here is the live site : https://lnkd.in/gbqqSsk6
code link : https://lnkd.in/g9mRbucd
Building An Awesome Select Box Using "react-select" library
Tags: react, javascript, typescript, webdev
Published: 2021-09-04 21:49:27

Hi, I'm [Aya Bouchiha](developer.aya.b@gmail.com), on this awesome day, we'll talk about **react-select**.

##  react-select

+ **react-select**: is a react library that lets you build easily an awesome select box or drop-down menu.

+ [docs](https://react-select.com/home#welcome)
+ [github](https://github.com/jedwatson/react-select)

## installation

```shell
npm i react-select
```

```shell
yarn add react-select
```

## Code

```jsx
import Select from 'react-select';

const options = [
    { value: 'ar', label: 'arabic' }
    { value: 'en', label: 'english' },
    { value: 'fr', label: 'french' },
]

const SelectBox = () => { 
    return (
        <>
            <Select
                name="name"
                className="basic-single" 
                classNamePrefix="select"
                isDisabled={false}
                isLoading={true}
                isClearable={true}
                isRtl={true}
                isSearchable={true}
                defaultValue={options[0]} // default option
                options={options} // options
            />
        </>
    );
}

export default SelectBox;
```

Have an amazing day!
My first week a.k.a my thirteenth week at Awesomity Lab & Code of Africa's Bootcamp
Tags: bootcamp, awesomitylab, codeofafrica
Published: 2021-09-04 21:18:20

Today I'd like to talk about my last week at the bootcamp  organized by Awesomity Lab in collaboration with Code of Africa, but first of all you maybe wondering why in the title I have said 'My first week at this bootcamp **a.k.a** the 13th! Well, I was one of developers that attended the 12 weeks first bootcamp there, as this is the 3rd one which is gonna take 6 weeks. 

In last 2 weeks I saw a post on Awesomity Lab's [LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6833721867707158528/) page that the bootcamp is back, then I applied because I wanted to comeback to this bootcamp to sharpen one of the technical skills that I didn't use to care too much about during my past years as a developer which is [**Understanding user stories when building apps**](https://designli.co/blog/explaining-app-user-stories/). When building apps I did not use to take user stories and their acceptance criteria very seriously and to be honest it impacted my career as a software developer in the past few months because whenever a clients asked me to do something I used to do it in the way I think is good differently to the way they would like it to be without talking to them first at least! and sometimes this disappoints them, it impacted it to the point that today I have to do all the best I can to regain the trust from many of my clients and bosses, so sad, right?

Yeah it is but I'm super lucky and blessed to have [Awesomity Lab](https://awesomity.rw/) and [Code of Africa](https://www.codeofafrica.com/)! guess what! I'm already good at working with user stories, I know how important they are when building apps for the client, I know that it's very I mean very important to follow them as user wants them to be implemented and I know how to ask questions when there is one of them not clear; all in just one week! it's insane right?

Practicing how to follow user stories when building apps, I have created this kinda atm [app](https://atm-app.vercel.app/) just from scratch following tasks and how user wants it to function. If you are a developer you may even would like to take a look at it's source code, right? if that's it then [here is the link](https://gitlab.com/patricktunez123/atm-app) to it on GitLab.

Well, I have a lot to say but I need to make this as short as possible so it does't bore you, but before I put an end on this post I just wanted to say that this bootcamp has saved my life already. From now on I will have to make sure that I follow what user wants not what I think is good when building their apps and ask them whenever I have queries about what they want.

Thanks for reading!