teleren/devto huggingface dataset:
함수형으로 Map 의 Map 뒤집기
Tags: haskell, typescript, functional, fpts
Published: 2021-07-26 08:47:03

이 글은 임의의 서로다른 키 값을 가진 Map 의 Map 을 뒤집는 함수를 함수형으로 구현하는것에 관한 글이에요.

```typescript
Map<A, Map<B, T>>
// to
Map<B, Map<A, T>>
```

하스켈과 타입스크립트를 사용 할것이며 구현한 코드는 마지막에 첨부할게요.

## 목차
* [동기](#motivation)
* [Applicative Map?](#applicativemap)
* [Monoidal 연산의 조합](#mapasmonoid)
* [구현](#implementation)

## 동기 <a name="motivation"></a>

최근에 굉장히 많은 수의 타입 `T` 의 인스턴스를 다룰 일이 있었어요. 워낙 많다보니 퍼포먼스향상의 목적으로 어떤 기준으로 그룹화를 해야 했죠. 예를하나 들어보면 `T` 는 리소스 `A` 를 사용하는데, `T` 인스턴스들을 같은 리소스를 공유하는 것들끼리 그룹화를 함으로써 어떤 리소스 `A`가 할당되었을때 그 리소스를 사용하는 모든 `T`들을 한번에 처리할 수 있게끔 하는것이죠.

제 경우 동시에 고려해야하는 `A`와 `B` 두가지 기준이 있었어요. 그래서 다음과같은 자료구조를 만들게 되었어요.

(typescript)
```typescript
Map<A, Map<B, T[]>>
```

(haskell)
```haskell
Map A (Map B [T])
```

문제는 어떤 경우에는 이 자료가 내부의 Map 과 외부의 Map이 뒤바뀐 `Map<B, Map<A, T[]>>` 로 표현이 되어야 한다는 점이었어요.

물론 다음과같이 imperative 한 스타일로 구현할 수 있었지만

(pseudo imperative code)
```
// boring imperative code …
func invertMap(ABTs: Map<A, Map<B, T[]>>):
  BATs = new Map<B, Map<A, T[]>>
  for (a, BTs) of ABTs:
    for (b, Ts) of BTs:
      if BATs has no key b then
        BATs[b] = new Map<A, T[]>
        BATs[b][a] = Ts
      else
        if BATs[b] has no key a then
          BATs[b][a] = Ts
        else
          BATs[b][a].add Ts
  return BATs
```

하지만 최선의 방법이 아니라는것을 알았죠. 왜냐하면 두 자료구조는 분명 Algebra 적으로 같은 타입이므로 서로의 타입으로 변환할 수 있는 더 (수학적으로)자연스러운 방법이 있을것만 같았어요.

## Applicative Map? <a name="applicativemap"></a>

처음에는 `Map<B, _>` 이 *Applicative* 를 만족할 수 만 있다면 그냥 `sequence`로 처리할 수 있을것만 같았어요. 왜냐면 Map은 이미 *Traversable* 을 만족하기 때문이었죠. 하지만 금방 Map 으로는 `pure` (혹은 `of`), 그리고 `ap` (혹은 `<*>`, `liftA`) 을 구현이 불가능하다는 점을 깨달았죠. 간단히 생각해봐도 Identity 법칙을 만족하는 함수의 Map 이 존재할 리가 없잖아요?

그래서 Applicative Map 을 만드는건 포기했습니다.

## Monoidal 연산의 조합 <a name="mapasmonoid"></a>

그다음 초점을 맞춘건 위 Imperative 한 구현을 보면 모든 프로세스는 단순히 하위 타입들의 Monoidal 연산의 조합이라는 점이 분명히 드러난 다는 점이었어요. 보면 텅빈 Map을 만들고, T 의 리스트를 이어붙이고, 궁극적으로 이 모두를 사용해서 `Map<B, Map<A, T>>`의 Monoidal 연산을 구현하고 있었죠.

이 점을 관찰하고 다음과같은 함수형 구현을 하게 되었습니다.

## 구현 <a name="implementation"></a>

(Haskell)
```haskell
invertMap :: (Monoid t, Ord a, Ord b) => Map a (Map b t) -> Map b (Map a t)
invertMap = foldr (unionWith mappend) empty . mapWithKey (fmap . singleton)
```

(Typescript, fp-ts)
```typescript

export function invertMap<KA, KB, T>(
  kaOrd: Eq<KA>,
  kbOrd: Eq<KB>,
  monT: Monoid<T>
) {
  const monAT = map.getMonoid(kaOrd, monT);
  const monBAT = map.getMonoid(kbOrd, monAT);
  return (mm: Map<KA, Map<KB, T>>) =>
    getFoldableWithIndex(kaOrd).foldMapWithIndex(monBAT)(mm, (a, bt) =>
      pipe(
        bt,
        map.map((t) => new Map<KA, T>().set(a, t))
      )
    );
}
```
Part 2: Installing TypeScript and Setting Up Development
Published: 2021-07-26 08:36:06


**Hi! I'm Marcus.
This is my 2nd article in my Front End series.
Each article will be written to read in 5 mins per purpose itself. I'll make a video for more understanding if possible.**

**Table of contents:**
- [Part 1: Setup Snowpack](https://dev.to/marcus_hoang/part-1-setup-snowpack-4876)
- Part 2: Installing TypeScript and Setting Up Development

**Today I'll guide you on Installing TypeScript and Setting Up Development project.**

For now our project structure looks like this

![Porject structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rswarje5q21tl78eaeqa.png)

Let's coding!

### 1.Install `typescript` and `typing`

    npm i typescript @types/react @types/react-dom -D

 and rename `index.jsx` to `index.tsx`

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbcqt4ergk8w683rvthy.png)

Now you can run project

    npm run start

But we should create a `tsconfig.json` file to  configure our typescript project

### 2.Create `tsconfig.json`

    ./node_modules/.bin/tsc --init

![Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxklls4capr6jz4zq387.png)

Our `tsconfig.json` should look like this

![Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utdbq6pufqeqpe7rnhq4.png)

For now, our project looks good and run perfectly. But when open `index.tsx` we'll see a redundant import line here

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhl9vcsyb97ej1yajqb5.png)

What will happen if we remove it?

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa909fh1iwvndw2d1utc.png)

Oop!

### 3.Config babel

    npm i @snowpack/plugin-babel @babel/preset-typescript @babel/preset-react -D

We need install
`@babel/preset-typescript` & `@babel/preset-react` to resolve above issue
and install `@snowpack/plugin-babel` to integrate it into `snowpack`.

After that we need create a `babel.config.json` file in root folder
![Configt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvmc6zksn3829iz5ylqu.png)

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di1v1ijasjwm1297a2p3.png)

Wala!

Thanks for your reading, see you in next article
**Part 3: Installing SASS/SCSS and Setting Up CSS Module**
Burpa – Burpsuite Automator
Tags: security, burp, jenkins, python
Published: 2021-07-26 08:25:08

It provides a high level CLI and Python interfaces to Burp Suite scanner and can be used to setup Dynamic Application Security Testing (DAST).

It will use the official REST API to launch the scan, and the burp-rest-api to get the pretty HTML report.

[Burpa – Burpsuite Automator](https://kali-linuxtr.net/burpa-burpsuite-automator)
ERR_CONNECTION_RESET GOOGLE CHROME FIXED
Tags: chrome, connection, internet
Published: 2021-07-26 08:01:09

If you are using a slow internet connection or maybe a VPN, you might sometimes face an error that that open will not open and throw "ERR_CONNECTION_RESET", this site cannot be reached.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srg8znzwfc9152f8q12i.png)


Follow the below Resolution:
Open CMD as an administrator
Type ipconfig /release

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi8u7cu43kuy0vgkxri5.png)
 
Type ipconfig /flushdns

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w1goshu8kxlimwan2xr.png)
 

Type ipconfig /renew 


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dceleg081uqe5ncvizwp.png)
 
netsh winsock reset 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw7iqmobjp44yp1bpmrf.png)
 


Now, you are ready to explore any website. Happy Browsing ✌
Covid-19 Pandemic, Start of Cloud Journey
Tags: cloud, career
Published: 2021-07-26 07:55:00

It all started with the Covid-19, when India declared a nationwide lockdown. My parents were in my hometown, while I was in another state.

I started to use LinkedIn more frequently as I got bored watching web series. Suddenly I came across a LinkedIn post that said " Oracle is providing free certifications and training for it's Cloud Infrastructure"

I'd always wanted to get into cloud technology, and this was the perfect start!

Since the certifications and training were free, I enrolled for the following:

Oracle Cloud Infrastructure Foundations Associate
Oracle Cloud Infrastructure Architect Associate
Oracle Cloud Infrastructure Architect Professional

I was able to pass OCI Foundations while working a conventional 9-5 IT job.

The others, on the other hand, were scheduled so closely that I didn't have enough time to prepare and pass the exams.

So this is how I started my cloud journey, all thanks to Covid-19 and OCI for free certifications.

Now I've completed all the below fundamentals 
Microsoft Azure Fundamentals AZ900
Microsoft Azure Data Fundamentals DP900
AWS Cloud Practitioner
Oracle Cloud Infrastructure Foundations 2020 Associate
Fortinet Network Security Associate 1 and 2
ITIL 4 Foundation
CompTIA Server+
trySetAccessible?
Tags: java, korean
Published: 2021-07-26 07:25:38

보통 자바에서 신규 프로젝트를 시작하면, 보통 `8`, `11` 버전에서 시작할 것이다. 왜냐고? 지금 기준으로 보안 업데이트를 제공해주는 LTS 버전이니까.
아 물론 자바 8은 일반 제공이 이미 종료됐으며, 보안 종료도 얼마 안 남았다.
그리고 올 가을이 되면 새로운 LTS 버전인 `17`으로 시작할 수도 있겠지.
단, 오라클은 웃기게도 LTS조차 숨기고 최신 버전만 제공하고 있다. 물론 어자피 써봐야 오라클과 법정 싸움 거는 거나 마찬가지니.

만약 11로 시작하고, 가끔 리플렉션으로 속성 깐다거나 할 경우,
[`setAccessible(boolean)`](https://docs.oracle.com/javase/9/docs/api/java/lang/reflect/AccessibleObject.html#setAccessible-boolean-) 메소드와 함께 [`trySetAccessible()`](https://docs.oracle.com/javase/9/docs/api/java/lang/reflect/AccessibleObject.html#trySetAccessible--) 이라는 생소한 메소드를 목격할 것이다.

이 메소드는 java 9부터 생겨난 메소드인데,
지금부터 무서운 얘기를 하도록 하겠다.

~~단도직입적으로 말하겠다.
**Java 9 이상으로 컴파일한 클래스는 자바 8 이전과는 달리, 기본적으로, 절대로! 리플렉션을 통한 `private` 멤버 접근이 불가능하다.**~~
*2021-08-30: __Java 9 이상부터 항상 접근 불가능한 건 아니고__, 내부 및 외부 클래스에 `Module-info.java` 파일을 통해 __모듈 관리__에 속하지 않거나, 같은 모듈 내 클래스는 여전히 접근 가능하다.*
내가 말한 경우 외라면, `setAccessible(true)` 걸어봐야, 너에게 다가오는 건 `InaccessibleObjectException` 예외가 반겨줄 것이다.
이게 가능하려면 두 가지 경우 뿐이다.
- 특정 클래스가 자바 8 이하에서 컴파일했을 경우
- 까려는 클래스가 네 ~~클래스~~**모듈** 안에 있을 경우

만약 **굳이** 자바 8 이하에서 `setAccesible` 접근을 막고 싶으면 [`SecurityManager`](http://cris.joongbu.ac.kr/course/java/api/java/lang/SecurityManager.html) 클래스를 네 클래스로더에 주입해야 한다. 그렇지 않으면 기본적으로 다른 앱이나 라이브러리가 `private` 접근이 가능하다. 이를 관장하는 메소드는 [`checkPermission`](http://cris.joongbu.ac.kr/course/java/api/java/lang/SecurityManager.html#checkPermission(java.security.Permission)) 이다.
하지만 공유 라이브러리를 만들려고 할 경우 이 방법은 추천하지 않는다. 빈대 잡으려다 초가삼간 태울 수 있다. **게다가 자바 17부터 제거 수순 밟고 있다! (2021-08-30) 즉, 접근 못 하게 하고 싶으면 자바 9 이상의 모듈화 말고는 방법 없다.**

이런 불행 중에 다행도 있다.

대부분의 라이브러리는 자바 8 환경에서 컴파일한다.
그리고, 너희들이 많이 쓰는 Spring Framework의 경우, 자바 8 환경에서 컴파일하되, 자바 버전에 따라 지원하지 않는 API를 발견 시, 대체 API를 사용하거나, 심할 경우 아예 없애버릴 정도로 왠만한 자바 버전에서 최적의 상태로 돌아가도록 신경을 많이 써주고 있다.

내가 [Jooby](https://jooby.io)를 도입하기 위해 여러 쓸데없는 삽질 끝에 구축을 성공했는데, Jooby에서 부족한 부분이 있을 경우 채우는데, 치사하게 중요한 필드를 `prviate`로 묶어버려서 빈을 못 불러와 `trySetAccessible` 메소드로 걷어서 해결했다.
물론 Jooby는 API 레이어, 스프링은 비즈니스 레이어다.
10여년 전 웹 레이어를 Struts, 비즈니스 레이어를 Spring 으로 했던 프로젝트와 데자뷰인 것 같다.

끗.

아, 하나 깜박했네, `trySetAccessible()` 사용법은 간단하다.
어자피 기존 `setAccessible(boolean)` 사용 사례로 봐야 인자에 `true` 넣는 경우 단 하나뿐이기 때문에, 자바 9 이상에서 `trySetAccessible` 메소드를 대신하여 엘레강~스한 코드와 함께 `InaccessibleObjectException` 예외를 회피할 수 있다.

```java

Class<?> cls = IWannaReflectThis.class;
Field field = cls.getDeclaredField("iWannaAccessThisField");

if(field.trySetAccessible()) {
  System.out.println("필드 까본 결과: " + field.get(gotcha));
} else {
  System.out.println("에엑따! 자바9이상이다!");
}

```

*2021-08-09 내용 추가*
What can you expected migrating from Protractor to Cypress
Tags: javascript, testing, cypress
Published: 2021-07-26 07:29:54

I have a lot of background with AngularJS, and I spent plenty of time writing & fixing the end-to-end (e2e) test. The tool that came with AngularJS was [Protractor](https://www.protractortest.org). It was way better than the alternatives back in the day, but it was far from perfect. Now, with [Protractor being deprecated](https://github.com/angular/protractor/issues/5502), I was forced to look for alternatives. Cypress looked the most interesting, but I wasn't sure which features are part of the paid subscription and what is available for free. In this article, I'll walk you through the main improvements over Protractor available without paying.

## A word of warning 
I'm not sure how many of the issues I experienced with Protractor are really shortcomings of the test tool itself and how much of the way it was the setup in my project. Now, with Protractor going away, it's too late to investigate.

# Immediet test execution
My protractor tests were pretty slow to run - about 10~20s. For test troubleshooting, I liked having the browser window attached to the screen to see what is happening. But in this case, the test running browsed had a habit of popping up on top of all other windows every time a new test started. In short - I couldn't run tests in the background or have them start as I was doing changes.

All that is improving a lot in Cypress. You start a test running tool, and it's always where you mean it to be - in the foreground or background. As you change your test code, it automatically restarts the test. And it doesn't matter if you missed the test execution completely - because of the next feature.

# Test run rewind

In protractor, I often restarted tests to see again what's happening. With 10~20s for a test run, it was rather a slow process. Often, I was putting something like:

```js
browser.sleep(100_000)
```
So I can better see what's inside the application before failure. 

The test running tool in Cypress has a rewind feature. It shows all operations as the test executed them, and by hovering on them, you can see how the application looked at the time. It gives you visual feedback that speeds up troubleshooting greatly.

# Recording the video of the test run
The rewind does a great job for local test execution. For CI runs, you can set up CI to expose `cypress/videos`. In that folder, for each test, you have a video with its execution. This again gives you plenty of information about what could have gone wrong with e2e on the CI.

# Universality
Another great feature of Cypress is that it's not framework-specific. You can learn one tool and use it for testing any JS project you work on. That was technically possible with Protractor, but it was getting pretty awkward with non-angular code.

# Summary
In short, moving from Protractor to Cypress is a great improvement, and I'm happy that I already started this migration. In the end, the angular team made a good decision killing their tool and forcing us all to look for alternatives - as there are much better tools available now.
Duplicate a Page in PDF Using Java
Published: 2021-07-26 07:25:22

PDF is a stable file format, and it is difficult for us to duplicate a PDF page by simply copying and pasting. This article will introduce how I duplicate a page within a PDF document using a free Java library (Free Spire.PDF for Java).

**Import jar dependency (2 Methods)**
● Download the [free library](https://www.e-iceblue.com/Download/pdf-for-java-free.html) and unzip it. Then add the Spire.Pdf.jar file to your project as dependency.
● Directly add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.pdf.free</artifactId>
        <version>4.3.0</version>
    </dependency>
</dependencies>
```

**Relevant Code**
```java
import com.spire.pdf.PdfDocument;
import com.spire.pdf.PdfPageBase;
import com.spire.pdf.graphics.PdfMargins;
import com.spire.pdf.graphics.PdfTemplate;

import java.awt.geom.Dimension2D;
import java.awt.geom.Point2D;

public class DuplicatePage {

    public static void main(String[] args) {

        //Load a sample PDF document
        PdfDocument pdf = new PdfDocument("C:\\Users\\Administrator\\Desktop\\The Scarlet Letter.pdf");

        //Get the first page
        PdfPageBase page = pdf.getPages().get(0);

        //Get the page size
        Dimension2D size = page.getActualSize();

        //Create a template based on the page
        PdfTemplate template = page.createTemplate();

        for (int i = 0; i < 5; i++) {

            //Add a new page to the document
            page = pdf.getPages().add(size, new PdfMargins(0));

            //Draw template on the new page
            page.getCanvas().drawTemplate(template, new Point2D.Float(0, 0));
        }

        //Save the file
        pdf.saveToFile("output/DuplicatePage.pdf");
    }
}
```

**Output**
![Duplicate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbfwdsvfjbu70jl6x7hu.jpg)
React Lumia Material-UI (Light and Dark Theme)
Tags: react, materialui, darktheme, darkmode
Published: 2021-07-26 07:12:22

Hi I've developed a react material-UI template inspired by **Brain Design's** ***React Website using Styled Components and Smooth Scroll***. However, I tried to developed it in Material-UI. More additional features I added in the project are following:
- Dark and Light mode
- CSS based smooth scrolling

Demo link: https://codesandbox.io/s/vigorous-northcutt-tk80n
It would be nice, If you give a ⭐ on my project. GitHub [link](https://github.com/silentrobi/material-lumia-react)
Handling PostgreSQL Errors
Tags: postgres, errors, programming
Published: 2021-07-26 07:00:06

[PostgresSQL](https://www.postgresql.org/ "PostgreSQL") is one of the most popular relational database systems and most developers work with it daily.

Understanding how to retrieve and handle database errors can save us from making unnecessary queries or handling extra logic in our code. I'll go over the main points to note and then list a few practical use cases at the end of the article.

> In this article, I will be using **Go** and [**lib/pq**](https://pkg.go.dev/github.com/lib/pq "lib/pq"), but the same techniques also apply to most languages and drivers.

Here are the main points to note:

## 1. PostgreSQL Errors have codes

Every PostgreSQL error has an error code \([see the full list](https://www.postgresql.org/docs/13/errcodes-appendix.html "PostgreSQL error codes")\). Whatever library or language you use to access Postgres, you should be able to retrieve the error code to handle specific cases.

For example, if our **email** column in our **users** table has a **unique constraint**, we know that a new insert/update query will fail if that constraint is violated. From the documentation, we can see that the error code for a unique\_violation is **23505**, and so we can check for that like this:

```go
_, err = db.Exec("INSERT INTO users(email) VALUES($1)", "existing@example.com")
// Check specifically for a unique constraint error
var pqErr *pq.Error
if errors.As(err, &pqErr) && pqErr.Code == "23505" {
	// handle the violation
}

// Check if it was a different error
if err != nil {
	panic(err)
}
```

## 2. PostgreSQL Errors can contain even more information

In many cases, the error code is not enough. Thankfully, PostgresSQL returns even more information as part of the error diagnostics. Usually, your driver will parse this information for you, but you have to know how to access it. [See documentation](https://www.postgresql.org/docs/current/plpgsql-control-structures.html#PLPGSQL-EXCEPTION-DIAGNOSTICS).

For example, we may have multiple unique constraints\(23505\), or multiple check constraints\(23514\) that could be violated by our query.

In the cases, we may want to get the specific constraint name that was violated.

```go
_, err = db.Exec("INSERT INTO users(email) VALUES($1)", "existing@example.com")
// Check specifically for a violation of the "unique_user_email" constraint
var pqErr *pq.Error
if errors.As(err, &pqErr) && pqErr.Constraint == "unique_user_email" {
	// handle the violation
}

// Check if it was a different error
if err != nil {
	panic(err)
}
```

## Some practical use cases

* If our database table has a unique constraint on the email column, instead of doing an initial query to check if a user exists with that email address, before inserting a new user, we can directly add the email, and if we get an error understand that a unique constraint violation on that column means that the email address existed before.
* If we have a check constraint to make sure product quantities are not negative, we can freely add/subtract from the quantity and handle the check constraint violation to know if the quantity went negative.
360-degree Review is Dead
Tags: management
Published: 2021-07-26 06:59:11

---
title: 360-degree Review is Dead
published: true
description: 
tags: management
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87522gnjr2fv86ijj8ax.jpeg
---

No reasons to be sad about it, because there is a better ways to organize your feedback flow.

I have shared my experience of 360 review applications in the real world and how I replaced it with a much more effective approaches.

https://www.romaglushko.com/thoughts/360-review-is-dead/

Hope this will be useful for someone 🙌
Will Your UPS System & Standby Batteries Beat The Heat?
Tags: systems, security
Published: 2021-07-26 06:54:13

Summer is here and the temperatures are soaring. It’s the time of year to enjoy a barbecue or treat yourself to an ice cream in the sun.

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

As much as we love to indulge in the above, the summer heat does bring with it a significant risk to UPS systems and more precisely their internal standby <a href="https://www.bclpower.co.uk/services/ups-battery-installations/">UPS batteries</a>. Batteries do not cope well in heat, and with temperatures rising over 30C its vital to keep these in optimum condition. Battery life can be severely impacted by sustained periods in heats above 20C.

The best way to ensure your system is ready for warmer days is ensuring there is a UPS maintenance solution in place. Not only does this provide you with UPS and battery care all year round, but it would highlight any concerns regarding the system or the environment it is situated in.

<b>READ MORE:</b>
<a href="https://www.bclpower.co.uk/will-ups-system-standby-batteries-beat-heat/">https://www.bclpower.co.uk/will-ups-system-standby-batteries-beat-heat/</a>
HTML tags | aside
Tags: html, tags, aside
Published: 2021-07-26 06:28:05

It is used to **define content that is indirectly related to the main content** of a document.

It is often represented by sidebars or explanatory boxes. It can also be used to mark the ads on a page.

It should not be used to label a text in parentheses, as it is considered part of the main content.

Has an **implicit ARIA role** `complementary`.

- Type: *block*
- Self-closing: *No*
- Semantic value: *Yes*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) | [Support](https://caniuse.com/mdn-html_elements_aside)
#5) Is JavaScript a statically typed or Dynamically typed language🤔
Tags: javascript, beginners, webdev, career
Published: 2021-07-26 05:26:06

`Yes, JavaScript is a dynamically typed language.`

##🚀Static Typed Languages
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww2zyubhl18rxh5yalsb.png)
 
In the above example,👆 
We declare a variable *name* of string type by adding a prefix 'String' means it's value will always be of a string type.

But as we are going to re-assign the value of the variable *name* to some other data type which was earlier *string*, it will throw an error message and this only happens in statically typed language like *TypeScript*.


##🚀Dynamic Typed Language
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj7aqk3yhqnjckdfc0yk.png)

In the above example,👆
We assign a value to the variable 'x' without defining it's type.
So, the type of the variable is set dynamically depending on the value that we assigned to the variable.

In the next step, we re-assigned the value of the variable 'x' to a number type. 
So, there will be no error because the type of the variable is set dynamically during code execution.
_________________________________________________________________
✔JavaScript is a dynamically typed language so you are free to re-assign value of any type by using either *let* or *var*.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4t1nefq9qa4ql8rolcn.png)
__________________________________________________________________
###Note:
✅It's totally the developers responsibility to take care of the variables type and on a safer side use *const*.

✅In dynamically typed language, the type of a variable is checked during **run-time** whereas... 
In statically typed language, the type of a variable is checked during **compile-time**.
__________________________________________________________________