teleren/devto huggingface dataset:
Day 8- Undefined, Not defined & null in javascript
Tags: javascript, beginners
Published: 2022-05-08 13:20:46

---
title: Day 8- Undefined, Not defined & null in javascript
published: true
date: 2022-05-08 13:16:47 UTC
tags: javascript, beginners
canonical_url: https://blog.sanjaybabu.dev/day-8-undefined-notdefined-null-javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqmegz9p1xsa9vd0tb44.png
series: 100 days of interview questions
---

Javascript handles values that don't or shouldn't exist by the use of undefined, not defined & null keywords. These may seem similar, but there are subtle differences between them.

## Undefined

In JS, `undefined` is assigned to any variable that has been declared but not yet assigned.

There are many reasons why we get undefined. A few of them are :

### Hoisting

All variables declared with `var` are hoisted in js. So we are able to access them even before declaration but they will return `undefined`.

[Check here for more details about hoisting](https://dev.to/sanjaybabu/day-1-what-is-hoisting-and-how-to-prevent-it-in-javascript-2o84)

### When a variable is declared but accessed before its initialized

```javascript
var count;
console.log(count); //undefined

```

### When a method without a return value is assigned.

```javascript
function print(a){
   console.log(a);
}
var str=print("Hello");
console.log("Value of str: "+str);

/*
Output:
Hello
Value of str: undefined
*/

```

## Not defined

`not defined` error is thrown when a variable is not declared at all.

```javascript
console.log(a);
console.log(b);
var a=10;
let b=100;

/*
Output:
undefined
Uncaught ReferenceError: b is not defined
 */

```

Note: Again for variable `a` we got undefined and not an error because of hoisting.

## null

`null` is an object that can we used to explicitly an empty value.

The difference between `null` & `undefined` is that null is an object whereas type of `undefined` is itself undefined.
linux c/cpp in wsl ubuntu setup
Tags: linux, betty, gcc, wsl
Published: 2022-05-08 13:13:47

## Configuring for c/c++

if you haven't set up wsl enviroment 
[check this out first](https://dev.to/tigawanna/wsl-ubuntu-m-windows-terminal-and-lscolors-49l1)

download gcc compiler and betty linter for c/c++ development
Type the following one by one

```
sudo apt install build-essential
``` 
```
sudo apt update
```
```
sudo apt-get install manpages-dev
```


Then to check if installed type
<code>gcc --version</code><br>

For the betty linter: 
 [Go to the betty repo:](https://github.com/holbertonschool/Betty)

And clone the repo<br>
<code>cd  Betty</code><br>
<code>sudo ./install.sh</code>



Create a file called betty and  paste in 
```
#!/bin/bash
# Simply a wrapper script to keep you from having to use betty-style
# and betty-doc separately on every item.
# Originally by Tim Britton (@wintermanc3r), multiargument added by
# Larry Madeo (@hillmonkey)

BIN_PATH="/usr/local/bin"
BETTY_STYLE="betty-style"
BETTY_DOC="betty-doc"

if [ "$#" = "0" ]; then
    echo "No arguments passed."
    exit 1
fi

for argument in "$@" ; do
    echo -e "\n========== $argument =========="
    ${BIN_PATH}/${BETTY_STYLE} "$argument"
    ${BIN_PATH}/${BETTY_DOC} "$argument"
done
```

Once saved, exit file and change permissions to apply to all users with chmod a+x betty
Move the betty file into <code>/bin/ directory </code> or somewhere else in your $PATH with 
```
sudo mv betty /bin/
```
You can now type <code> betty "filename" </code> to run the Betty linter!
and now you can compile and run linux c code on your windows machine
Create Simple Weather App using Angular & Rapid API
Tags: angular, javascript, html, weatherap
Published: 2022-05-08 13:13:14

Am using this series for explaining how to create a simple weather app using angular, Rapid API & reverse geocode This app has 2 functionalities a) Based on geo location b) Based on search city

I have created the series using Hashnode, so here you will find the link to my blog

https://shijoshaji.hashnode.dev/series/angular-weather-app

Thanks
Upgrading React Router From V5 to V6
Tags: react, javascript, tutorial
Published: 2022-05-08 12:44:11


React Router version 6 was released some months it is really important because React Router is one of the most used  React packages.

React itself doesn't come with a router package so majority of React projects from small single page apps to big organizations use React Router.

Some weeks ago while I was trying to work on an old project I ran into an error  when I updated my development packages because of my React Router update that caused breaking changes. I tried going through the documentation but sometimes you know they can be long and tedious, so I decided to write this post to help anyone who is also trying to update their project.

In the end, it’s quite simple to upgrade and not much has changed, just little code difference. Version 6 is a lot better and easier to understand than version 5, if you can upgrade, you should.

So first you can open your old project in vscode and install react-router version 6, do this by running npm install react-router-dom@6 which ensures that you install the latest version 6 and that’s what we can do here:

`npm install react-router-dom@6`

When you get react-router version 6 installed. Try running npm start in the terminal, you will get a failed to compile error(switch is not exported from react-router-dom).
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du16h7fvvmexp8ewwx3x.png)

This brings us to the first change. When we used react-router v5, we imported the switch component from the react-router package to wrap our routes, but instead in react-router v6 we use the routes component to wrap the route component.


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

N.B You still have to import BrowserRouter from react-router-dom to wrap your root app component. And also only Route component can be a child of Routes any other component will lead to an error.

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

Another important change is that your component should no longer be a child of your route component but instead the route takes in an element prop and then you pass a dynamic value to element and that dynamic value is that to be rendered component as JSX.

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

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

And lastly note that dynamic routing still works as you normal(some new features were added but it works the same).

Thanks for reading and please comment on any corrections or additions you will like to add.
Link to upgrade [documentation](https://reactrouter.com/docs/en/v6/upgrading/v5)
Introduce new default prop name "visible or show"
Tags: react, javascript
Published: 2022-05-08 12:17:35

Hi Reactjs Team, I suggest that, ReactJs team should add a new prop for every component that purly used to show or hide component conditionally.
i.e
Instead of writing code like this in JSX.
{show && <Component/>}
we simply use like this <Component show={true}/> and that's it.
create your own personal web page using Github
Tags: github, html, css, javascript
Published: 2022-05-08 12:10:08

#### If you want to create a personal website for yourself and explain what you do. This article is for you ;)

First of all, you must have a [Github](https://github.com) account.

Then create a repository whose name is exactly the same as your username + '.github.io'

For example my account name is [mohammad-hassani](https://github.com/mohammad-hassani) so the repository name will be 'mohammad-hassani.github.io'.

It's optional that you make Readme.md file or not.

After that GitHub will make a website exactly the same as your repository name and you can see your personal web page in browser!

## But it's still empty!

If you created the Readme.md file; that will be show in browser and if not; it's a blank page!

Now clone the repository and make an Index.html file in the folder; if you know the basics of html, CSS and JavaScript; then create a beautiful web page and write your personal info ;) 

Then push the repository and wait a few seconds until GitHub accept your changes.

Then if you open browser and open your web page you will see your changes!

If you want to link a domain to your web page then create a 'CNAME' file in your repository and write your domain in that ; then link domain to GitHub

## If you want help this is an example of my web page:
GitHub repository : [github.com/mohammad-hassani/mohammad-hassani.github.io](https://github.com/mohammad-hassani/mohammad-hassani.github.io)
And my domain: [hasani.id.ir](hasani.id.ir)

Be happy :)


<a href="https://www.buymeacoffee.com/mohammadhassani"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--epLLqT_x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gn0quro9llouuhzkxbj.png" alt="buy me a coffee" loading="lazy" width="170" height="37"></a>
KVision 5.10.0 is released (with new input mask module)
Tags: kvision, kotlin, imask
Published: 2022-05-08 12:00:29

---
title: KVision 5.10.0 is released (with new input mask module)
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin,imask
---

[KVision](https://kvision.io) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 5.10.0. Highlights of this release include:
- Upgraded dependencies (Kotlin 1.6.21, Dokka 1.6.21, Jooby 2.14.1, Spring Boot 2.6.7, Ktor 2.0.1, Javalin 4.5.0, kotlin-wrappers 334, React 18.1.0, Leaflet 1.8.0, Tabulator 5.2.3 and some other npm packages)
- New text input mask module powered by [Imask.js](https://imask.js.org/)
- Full support for `indeterminate` property for `CheckBox`/`CheckBoxInput` components
- New `TriStateCheckBox`/`TriStateCheckBoxInput` components
- Many fixes for floating and resizable windows
- Other bugfixes and improvements

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/5.10.0).

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Hi Guys,
Tags: javascript, webdev, programming, interview
Published: 2022-05-08 11:52:28

Hi Guys,

Recently I wrote an article on JavaScript.  Please have a look at it and let me know if I can add anything and improve.

https://medium.com/@jyaswanth/the-difference-between-var-let-and-const-in-javascript-17a96e80946f

The article talks about var, let and const differences

Regards,
Yaswanth
React debugging in VSCode
Tags: react, debugging, vscode, productivity
Published: 2022-05-08 11:52:27

Welcome to the second article about debugging if you're struggling with debugging, you're in the right place 😉

📚 Minute of theory.

There are 2 basic types of debugging:
- Attach (means you're attaching to an already running process)
- Launch - means you're launching a new process and attaching to it. It can be a headless chrome or anything else)

After some basic understanding, let's jump to the actual configuration.

1) Add a configuration object inside your array of configurations in `.vscode/launch.json` in the project's root.
```JSON
{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080", // localhost where we will launch our front-end
      "webRoot": "${workspaceFolder}"
    },
  ]
}
```
> :bulb: **Tip:**  You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.
![Add configuration button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1knscou070wy1dri2tbg.png)
After clicking the button, you will see a context menu where you should choose Chrome launch.
![Configuration context menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7ktdd4w89fr324g8d67.png)
And here we go! You will get the same config as in step #1 😎

2) After that, choose in the left top corner your option to launch the configuration inside the `Run and debug menu` in VSCode
![Debugging launch context menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oa1gi0obm8w3cnbtfzfr.png)
 
3) As a result, you will see the lifted application on a specified port!
 
See you in the following article about controllers in a VSCode debugger 🥳
AWS 3rd party monitoring tool may be costing you an arm and leg
Tags: aws, cloud, tools
Published: 2022-05-08 11:49:08

There are a lot of external monitoring tools for AWS like Lumigo, Epsagon, DataDog, New Relic, Sumologic, etc. They provide extra features in comparison to AWS cloudwatch service.

**Background**: Last year our team started using one of these tools to get more efficient and real-time monitoring alerts and detailed dashboards. During that time we put a lot of configuration and custom dashboards to segregate monitoring.

We focus a lot of energy on utilizing most of the features provided by the tool for which we were paying monthly. Because these features are the selling point for that tools.

**The thing that most people miss : “Exactly how the tool is getting the data from AWS so that it can utilize it in some way or the other”**

To get the metrics data of AWS environment like lambda invocations, Instance details, etc these tools utilized under the hood are cloudwatch API calls.

Cloud watch APIs are costly
eg. GetMetricData, GetMetricStatistics is $0.01 per 1,000 requests.

After using these tools the AWS bill of a cloudwatch service will increase depending on the usage.

Recently I did a check on how much the cloudwatch bill is because of the API calls from the monitoring tool.

And the reality was shocking almost 60% of cloudwatch cost is due to the API calls which the monitoring tool was making. Averaging around 2 million requests per day

**The actual cost of 3rd party monitoring tools should be calculated as :
Monitoring tool (or license) bill + cloudwatch(API request) bill**

We optimized some configurations and removed some of the dashboards which are unutilized.

**Manage to reduce the AWS bill by 25% which is a significant percentage.**

## **Learning and takeaways:**

- Monitoring tools will always have an impact on the cloudwatch bill
- Learn about the tool as much as possible, because tag lines like minimal/no configurations required can be misleading.
- Always revisit your monitoring tool configuration and dashboards periodically, since some of them are not been updated or unutilized. Also, aws might have created something similar under the AWS Management and governance services umbrella which might have the same features and less cost.
- Always do a value to cost analysis for where to do monitoring of new applications, there might be cases where AWS cloudwatch might be more cost-effective than 3rd party monitoring.
- Monitoring tools are required because they reduce a lot of effort on the operations side. The only concern is they should not increase the overall cost against the value they are generating.

title image by Photo by olieman.eth on Unsplash
ECS Container credentials
Published: 2022-05-08 12:10:28

---
title: ECS Container credentials
published: true
date: 2022-05-08 11:20:01 UTC
tags: 
canonical_url: https://blog.sgrilux.com/ecs-container-credentials
---

I've recently come across an issue assuming a role from an ECS container.

The task role of my ECS task had the policy to assume the role in the destination account and I also followed steps and troubleshootings from AWS documentation (See [here](#links)) However I was still unable to assume the role.

My main problem was that the process wasn't able to see the `AWS_CONTAINER_CREDENTIALS_RELATIVE_URI` variable so it couldn't get the credentials from the role.

As per AWS doc:

> The environment variable **AWS\_CONTAINER\_CREDENTIALS\_RELATIVE\_URI** is available only to PID 1 processes within a container. If the container is running multiple processes or init processes (such as wrapper script, start script, or supervisord), the environment variable is unavailable to non-PID 1 processes.
> 
> To set your environment variable so that it's available to non-PID 1 processes, export the environment variable in the .profile file. For example, run the following command to export the variable in the Dockerfile for your container image:
> 
> `RUN echo 'export $(strings /proc/1/environ | grep AWS_CONTAINER_CREDENTIALS_RELATIVE_URI)' >> /root/.profile`
> 
> Now additional processes can access the environment variable.

As suggested I tried add the command in the Dockerfile but .... didn't help. I also tried to add the same in the docker entypoint script ... the same. I tried different things but still nothing.

My container was running as part of a gitlab pipeline (see the [Gitlab Runner Job](https://dev.to/sgrilux_41/serverless-gitlab-runner-part1-20p-temp-slug-8638790)) and the only way I made it working was to export AWS\_CONTAINER\_CREDENTIALS\_RELATIVE\_URI in the pipeline job.

For ex.

```
test-job1:
  stage: test
  script:
    - export $(strings /proc/1/environ | grep AWS_CONTAINER_CREDENTIALS_RELATIVE_URI)
    - aws s3 ls --profile cross-account-role

```

At the moment this is the only way I could get the credentials from the task role. It's not elegant but it's working.

If anyone hade the same issue and managed to find a better solution I'll be happy to hear from you and if I helped even a bit to fix your problem then I am even happier.

CIAO!

* * *

### Links

- https://aws.amazon.com/premiumsupport/knowledge-center/ecs-iam-role-another-account/
- https://aws.amazon.com/premiumsupport/knowledge-center/ecs-iam-task-roles-config-errors/
- https://docs.aws.amazon.com/AmazonECS/latest/developerguide/task-iam-roles.html
Mix task to search for alias name
Tags: elixir
Published: 2022-05-08 11:09:53

I recently had to work on a project which used multi alias

```
alias ModA.{ModB, ModC}
```

Searcing is difficult on project like this so I wrote a mix task that would look for the alias name and then print the file and line number on the terminal.

https://github.com/sushant12/find_alias
StackOverBot, a Discord bot for searching StackOverflow questions
Tags: python, sideprojects, beginners, showdev
Published: 2022-05-08 11:02:29

⚠ **SOME FEATURES ARE STILL WIP** ⚠

Before we get started, I just want to give few words on my relationship with python 😄 ([Jump straight to the bot](#bot_section))

---

## Relationship with Python
![Python Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3czjf9jklosiaedr0cs9.png)  

I've used Python since almost 10 years but I have never deep dive into it, I use it sparingly when I just need to make quick tools like sorting files, handle data, need a quick QT interface for a tool. Even though I've made many small projects thought the years I consider myself a beginner in Python.

## Why a StackOverflow Bot ?

Making a Discord bot was a little challenge because many of my friends have already done it. I choose StackOverflow because the [StackExchange/StackOverflow API](https://api.stackexchange.com/docs) is basically just playing with URL variable and making web request that sends back JSON.

---
## The bot itself <a name="bot_section"></a>

The bot is made using Python 3.9 and [Pycord](https://github.com/Pycord-Development/pycord)
[Github of the project](https://github.com/AlanParadis/StackOverBot)

Question send by the bot
![Question send by the bot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u45t4320nojf6kcg10tv.png)

Command to search questions
![Command to search questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2e2vp01y9ya9fbmt3hq.png)

The bot can currently accept 4 inputs
- `search` : the terms of your search
- `tags `: tags for the search separated by semicolon
- `sort `: sort method for the search (**votes**, **relevance**, **creation**, **activity**)
- `min `: it's used depend on the sorting method, for now this only can be used in votes sort.

By reacting with ⏭, the bot show you the next question !
You can see up to 5 questions

**TODO** : 
- Add a max option
- Add the possibility to write a date in min and max so you can use it in **creation** or **activity**

##  Containerize my bot 🐋
My bot can be easily build and deploy using the Docker with the Dockerfile in the Github repo. That's how I usually run my bot on my server.

---
Thank for reading ! Don't hesitate to share your opinion about the bot and ask for features 😁
I hated React JS, but nowadays I can’t live without it…
Tags: javascript, webdev, programming, react
Published: 2022-05-08 10:11:09

Six months ago I hated React JS for being so lengthy, I was like, “React Is the Worst”, but suddenly a miracle happened that forced me to start loving React JS. You might think miracles are not real, but after reading this you’ll start believing in them…

In the initial days of learning frontend Js frameworks, I tasted mainly two frontend frameworks; VueJS and Svelte. But there was something missing in both frameworks, that was simplicity.

React JS is undoubtedly more lengthy and bulky (while working) than Svelte or Vue Js. Svelte being the shortest syntax-ed Javascript framework, but still Svelte was not my type.

Svelte did a pretty significant Job with SvelteKit (like NextJs of ReactJs) but the issue was the two CSS files (import ./\*.css) of separate pages being mixed up, and I had an uncozy feeling with that. Also, I wasn’t able to fix it, maybe that’s because the community wasn’t that huge enough.

And, the problem with VueJS is that its code is so ugly, that it has no pure syntax. For that reason, I have to leave Vue Js. Also, VueJs was just growing and I need server side-rendering, and with Vue3 that wasn’t possible at that time.

Finally, the moment of truth; I had to choose React JS, ’cause I had no choice, you might say I would have tasted Angular, but I was such brain-washed about Angular that there was no chance for me to check out Angular. No one likes Angular, at least in my circle!

I searched tutorials for React JS on YouTube, and I found it pretty simple to use. Indeed, it was lengthy and bulky to work, but it’s simple to use. Honestly, it was simple. It was easy to learn as well!

I tried making my own web apps with React JS without watching any tutorial, and it worked, I was able to make my own React Based webapp without watching tutorials. I felt like a miracle just happened. Well, I was pretty good at making web apps with Django, so maybe that helped there. Also, I had already two Django-based web apps on the production which are giving me passive income, so I wasn’t new at programming or webdev, I was just new a frontend JS frameworks.

So, I have decided to stay with React JS now, and live a happy life with React Js till eternity.

Also, nowadays I am migrating my Django Based webapps to NextJs/Django React Framwork Based webapps.

React JS is simple, flexible and easy to learn; so learn it and be an advocate of React JS. But ReactJS is definitely not beginner friendly, or is it?

> Thanks for making our [web community](https://webmatrices.com/t/programming) a family of 1.3K Members, Keep Up The Josh, guys!

Have a good day, please don’t hate any other JS frameworks, they’re just not my type.