teleren/devto huggingface dataset:
【03】Tauri 入门篇 - 创建项目
Tags: tauri, rust, web, desktop
Published: 2022-08-01 09:33:45

---
title: 【03】Tauri 入门篇 - 创建项目
published: true
description: 打造属于自己的下一代跨端应用
tags: tauri, rust, web, desktop
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntysfz398o4euuxpthn6.png
# Use a ratio of 100:42 for best results.
---

> 仓库：[lencx/OhMyBox](https://github.com/lencx/OhMyBox)
> 如果文章对你有所帮助，可以 [star](https://github.com/lencx/OhMyBox) 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

---

> 本教程以 macOS 为例，其他平台类似，想了解更多请查看官方文档

## 初始化

```bash
# 使用 yarn
yarn create tauri-app

# 或使用 npx
npx create-tauri-app
```

此项目以 `vite` + `react-ts` 为例（使用 `vite` 是为了配合 [vite-plugin-rsw](https://github.com/rwasm/vite-plugin-rsw) 插件，可以无缝集成 webAssembly）。如需在老项目中添加 tauri 支持，请参考文档 [Add Tauri to Existing Project](https://tauri.studio/v1/guides/getting-started/beginning-tutorial/#1-add-tauri-to-existing-project)

![tauri-create-app](https://user-images.githubusercontent.com/16164244/173392402-cddf9a46-704f-452a-a587-bb5d982afe1c.png)

## 项目结构

```bash
[tauri-app] # 项目名称
├─ [node_modules] # 前端依赖
├─ [src] # 前端程序源
├─ [src-tauri] # Tauri 程序源
│    ├─ [icons] # 应用程序图标
│    ├─ [src] # Tauri App 程序源，例如系统菜单，托盘，插件配置等
│    ├─ [target] # 构建的产物会被放入此文件夹中，target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs # Tauri 构建应用
│    ├─ Cargo.lock # 包含了依赖的精确描述信息，类似于 yarn.lock 或 package-lock.json
│    ├─ Cargo.toml # Tauri (Rust) 项目清单
│    └─ tauri.conf.json # 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├─ index.html # 项目主界面
├─ package.json # 前端项目清单
├─ tsconfig.json # typescript 配置文件
├─ vite.config.ts # vite 配置文件
├─ yarn.lock # 前端依赖的精确描述信息
└─ ... # 其他
```

## 启动项目

有两种启动方式：

### 1. 启动 web 项目

> 纯前端项目，不和操作系统产生任何交互

```bash
yarn dev
```

### 2. 启动 tauri 项目

> 需要和操作系统产生交互，如系统文件读写操作

第一次启动项目时，tauri 会根据`src-tauri/Cargo.toml` 去下载相关依赖（导致第一次启动比较慢），第二次启动会快很多。

```bash
yarn tauri dev
```

![tauri-run](https://user-images.githubusercontent.com/16164244/173398929-2cc3f2a1-89f9-4fa3-88cc-7a984a1acdd3.png)

## 构建应用

Tauri Bundler 是一个 Rust 工具，用于编译二进制文件、打包资产并准备最终捆绑包。 它会检测你当前的操作系统并相应地构建一个包。目前支持：

- [Windows](https://tauri.studio/v1/guides/building/windows): .msi
- [macOS](https://tauri.studio/v1/guides/building/macos): .app, .dmg
- [Linux](https://tauri.studio/v1/guides/building/windows): .deb, .appimage

```bash
yarn tauri build
```

如果未修改 `src-tauri/tauri.conf.json` 中的 `identifier` 直接 build 会报以下错误。想要正确构建，只需修改为自己特有的标识符即可，如 `com.myapp.dev`。构建完成后，在 `src-tauri/target/release/bundle/{platform}/{app}` 下就可以找到应用程序安装包。

![003-tauri-build-error](https://user-images.githubusercontent.com/16164244/173414203-5e730713-8fe3-4377-8d5d-cae3aa1ebfc4.png)

![003-tauri-build-app](https://user-images.githubusercontent.com/16164244/173414233-b7f6d168-0277-4712-99cd-dcf4d2684bb9.png)

了解更多不同平台打包注意事项：[Tauri Building](https://tauri.studio/v1/guides/building/)

## 检查信息

检查 Tauri 信息以确保一切设置正确，在对问题进行分类时，此信息可能很有用。

```bash
yarn tauri info
```

![tauri-check-info](https://user-images.githubusercontent.com/16164244/173409590-eff43c02-5195-43cf-aa63-4f4f13f2aece.png)
HTTP Request Inspector - Capture and inspect HTTP requests.
Tags: opensource, javascript, github, tutorial
Published: 2022-08-01 10:45:00

## Introduction

Most of the time, you will want to capture and inspect HTTP requests as a developer. This is a common task in web development. The HTTP Request Inspector is a tool that helps you do that.

An everyday use case is to use the endpoint as a webhook to receive HTTP requests from a third-party service (Eg: Stripe).

HTTP Request Inspector is open source, and you can host it yourself. This allows you to host the HTTP Request Inspector on your servers and don't share what you send to the endpoints with the third-party servers.

## Features

Here are some of the features of the HTTP Request Inspector.

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

### Create HTTP endpoints

You can create HTTP endpoints that receive different HTTP methods (GET, POST, PUT, DELETE, and PATCH). You can create as many endpoints as you want.

### Capture and inspect HTTP requests

Once you have created an endpoint, you can capture and inspect HTTP requests. For example, send a request to the endpoint, and the tool will capture and display the request body, cookies, and headers.

### Copy and paste the code

The tool will display the code for making HTTP requests in different languages for each endpoint. You can copy the sample code and paste it into your code.

### Create a user account

You can create an account to use the tool. A user account allows you to store your endpoints and your captured requests. Authentication is powered by the **Supabase** and supports authentication using email/password and GitHub.

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

## Technologies used

I used the following technologies to create the HTTP Request Inspector:

**Frameworks and Tools**

- Next.js
- Prisma
- TypeScript
- Tailwind CSS
- ESLint
- Prettier
- Husky

**Infrastructures**

- Deployed on Vercel
- Database by PlanetScale

## Deploy on Vercel

Deploying on the Vercel is the easiest. First, click the **Deploy** button on the README and follow the instructions on the Vercel deployment wizard.

## Install on your machine

```bash
git clone https://github.com/devkiran/http-request-inspector
```

```bash
cd http-request-inspector
```

```bash
npm install
```

```bash
cp .env.example .env
```

Update the `.env` file with your credentials.

```
NEXT_PUBLIC_APP_URL=http://localhost:3000

DATABASE_URL="<PlanetScale database connection URL>"

NEXT_PUBLIC_SUPABASE_URL=<Supabase URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Supabase Anon Key>
```

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Links

- [Github](https://github.com/devkiran/http-request-inspector)
- [Website](https://http-bin.vercel.app/)
- [Twitter](https://twitter.com/tokirankrishnan)
3 Developer Tool That You Should Try
Tags: webdev, javascript, programming, productivity
Published: 2022-08-01 10:24:59

## 1. [Grabient.com](https://www.grabient.com/)
You can find simple CSS gradients that you can copy, paste, and Customize.
![Grabient Website Screen Shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tknf3qlmys6vamrzz784.png)


## 2.  [FrontendChecklist.io](https://frontendchecklist.io/)
This is good for looking at good practice, and checking if their something missing.
![Frontendchecklist website screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07kync8v61gd3sznb2qh.png)
 

## 3. [Readme.so](https://readme.so/)
An online readme editor that you can use to edit readme for your project easily.
![Readme.so website screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e940tmpj4cwuvgng90i.png)
Unlimited Bash History
Tags: linux, bash
Published: 2022-08-01 10:16:00

edit file .bashrc
Set HISTSIZE and HISTFILESIZE to an empty string:
`
HISTSIZE=
HISTFILESIZE=
`
In **bash 4.3 and later** you can also use HISTSIZE=-1 HISTFILESIZE=-1:

> n.  Setting HISTSIZE to a value less than zero causes the history list to be
>     unlimited (setting it 0 zero disables the history list).
> o.  Setting HISTFILESIZE to a value less than zero causes the history file size
>     to be unlimited (setting it to 0 causes the history file to be truncated
>     to zero size).

**bash --version** to check your bash version.

> Change the file location because certain bash sessions truncate .bash_history file upon close.
> http://superuser.com/questions/575479/bash-history-truncated-to-500-lines-on-each-login
> Force prompt to write history after every command.
> http://superuser.com/questions/20900/bash-history-loss
> Use timestamp HISTTIMEFORMAT="[%F %T] "

Finally:
`
HISTSIZE=-1
HISTFILESIZE=-1:
HISTFILE=~/.bash_eternal_history
PROMPT_COMMAND="history -a; $PROMPT_COMMAND"
`
DevTools Extension for Tailwind CSS
Tags: tailwindcss, css, webdev, html
Published: 2022-08-01 10:11:29


Tailwind CSS is amazing but it's not always easy to remember all the different utilities. Therefor, I created Tailwind DX (the name will change due to legal reasons).

Here's a short video of it:
{% youtube ObDOU1uYJ1g %}

Tailwind DX let's developers debug and work with Tailwind CSS in a more intuitive way.

**Here are some feature highlights:**

**Instant feedback**
Building complex layouts takes a lot of trial and error. Tailwind DX lets the developer preview changes just by hovering on different values. We also let developers:

- Ctrl+Click to toggle values on/off
- Ctrl+Hold-and-drag to use inputs as sliders

By focusing on instant feedback, we enable developers to Build better websites faster.
CSS Battle: #11 - Eye of Sauron
Tags: css, webdev, beginners, tutorial
Published: 2022-08-01 10:00:41



In this article, I will solve a [Eye of Sauron](https://cssbattle.dev/play/11) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Eye of Sauron](https://cssbattle.dev/targets/11.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{% youtube https://youtu.be/iU5AH4jXmYE %}

### HTML


```html
<p c>
<p l>
<p r> 
```

- `<p c>` : For Center Circle
- `<p l>` : For Left Semicircle
- `<p r>` : For Right Semicircle

### CSS

Now let's style the containers. 

```css
body {
  margin: 0;
  background: #191210;
}
p {
  position: fixed;
}
[c] {
  width: 50;
  height: 50;
  background: #84271c;
  border-radius: 1in;
  border: 25px solid #191210;
  box-shadow: 0 0 0 20px #eca03d;
  left: 150;
  top: 84;
}
[l],[r] {
  width: 60;
  height: 30;
  border: 20px solid #eca03d;
  border-radius: 0 0 1in 1in;
  border-top: none;
}
[l] {
  left: 50;
  top: 134;
}

[r] {
  right: 50;
  bottom: 134;
  transform: scaleY(-1);
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

**Minified Version:**
```
<p c><p l><p r><style>body{margin:0;background:#191210}p{position:fixed}[c]{width:50;height:50;background:#84271C;border:25px solid #191210;border-radius:1in;box-shadow:0 0 0 20px #ECA03D;left:150;top:84}[l],[r]{width:60;height:30;border:20px solid #ECA03D;border-top:none;border-radius:0 0 1in 1in}[l]{left:50;top:134}[r]{right:50;bottom:134;transform:scaleY(-1)}
```

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
A tip for installing Tensorflow on my M1 Macbook Pro with fish shell.
Tags: tensorflow, anaconda, m1, macbook
Published: 2022-08-01 09:56:00

I wrote about How I installed Tensorflow on my M1 Macbook Pro with fish shell.

### EDIT: If you use version control libraries like `pyenv`, you should install `miniforge3` by using them 
and no need to read this article.
[This instead](https://www.fredlich.com/works/installing-tensorflow-on-m1-with-pyenv) is helpful😎



Here’s the official reference to follow.
----
[Tensorflow Plugin - Metal - Apple Developer](https://developer.apple.com/metal/tensorflow-plugin/)
But, I couldn’t call `conda` , when installing the TensorFlow dependencies.

I know that `conda` locates `/Users/yas/miniforge3/bin` , so I call its init command for fish shell.

```jsx
conda init fish
```

Then I got the three lines of codes in `/Users/yas/.config/fish/config.fish`

```jsx
# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
eval /Users/yas/miniforge3/bin/conda "shell.fish" "hook" $argv | source
# <<< conda initialize <<<
```

After restarting the shell, I could call `conda` from anywhere and completed the installation.😌
Mistakes that could lead to a System Failure
Tags: programming, beginners, productivity, codenewbie
Published: 2022-08-01 09:32:56

Few **mistakes** that could lead to a **system failure** when you are writing the code for an application:

**1) Ignore understanding business logic.**
.
.
.
**2) Ignore the impacts of a change in code (look for temporary bug fix).**
.
.
. 
**3) Write un-clean and long code in a single file.**
.
.
.
**4) Inconsistent with class and variables naming.**
.
.
.
**5) Unnecessary use of external libraries.**
【02】Tauri 入门篇 - 开发环境
Tags: tauri, rust, web, desktop
Published: 2022-08-01 09:31:00

---
title: 【02】Tauri 入门篇 - 开发环境
published: true
description: 打造属于自己的下一代跨端应用
tags: tauri, rust, web, desktop
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntysfz398o4euuxpthn6.png
# Use a ratio of 100:42 for best results.
---

> 仓库：[lencx/OhMyBox](https://github.com/lencx/OhMyBox)
> 如果文章对你有所帮助，可以 [star](https://github.com/lencx/OhMyBox) 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

---

> 注意：仅在开发 Tauri 应用程序时才需要此设置。最终使用应用程序的用户不需要执行任何操作。

第一步是安装 [Rust](https://www.rust-lang.org/) 和系统依赖项。以 Windows 和 macOS 为例，如果想了解更多平台开发环境，请查看 [Tauri 官网指南](https://tauri.studio/v1/guides/getting-started/prerequisites)。

## Windows

### 1. Microsoft Visual Studio C++ Build Tools

安装 [Build Tools for Visual Studio 2022](https://visualstudio.microsoft.com/visual-cpp-build-tools/) ，确保已勾选 `C++ 构建工具` 和 `Windows 10 SDK`。

![Build Tools for Visual Studio 2022](https://user-images.githubusercontent.com/16164244/173170245-46d72295-9566-4351-8365-a798b32eab04.png)

### 2. WebView2

> 注意：Windows 11 中已内置 WebView2

Tauri 严重依赖 WebView2 在 Windows 上呈现 Web 内容，因此必须安装 WebView2。最简单的方法是从 [Microsoft Edge Developer](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section) 下载并运行 Evergreen Bootstrapper。 引导程序将尝试为你的系统确定正确的程序包及版本。注意：如果遇到问题（尤其是 ARM 上的 Windows），可以手动选择正确的安装程序。

![Evergreen Bootstrapper](https://user-images.githubusercontent.com/16164244/173170593-6f678e7a-f468-457f-b3db-665d6b520c1f.png)

### 3. Rust

前往 [rust-lang.org/tools/install](https://www.rust-lang.org/tools/install) 安装 `rustup`（Rust 安装程序）

## macOS

### 1. CLang 和 macOS 开发依赖项

在终端（Terminal）执行以下命令：

```bash
xcode-select --install
```

### 2. Rust

在终端（Terminal）执行以下命令：

```bash
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```

上面的命令会下载脚本并开始安装 rustup 工具，该工具会安装最新的稳定版 Rust。系统可能会提示输入密码。如果安装成功，将出现以下内容：

```bash
Rust is installed now. Great!
```

## 更新及卸载

Tauri 及其组件可以通过编辑 `Cargo.toml` 文件或运行 [cargo-edit](https://github.com/killercup/cargo-edit) 工具提供的 [cargo upgrade](https://github.com/killercup/cargo-edit#cargo-upgrade) 命令来手动更新：

```bash
cargo upgrade
```

通过 `rustup` 来更新 Rust 版本，在终端执行以下命令：

```bash
rustup update
```

通过 `rustup` 来完全卸载机器上的 Rust：

```bash
rustup self uninstall
```

## 故障排除

检查安装的 Rust 版本是否正确，输入以下命令：

```bash
rustc --version
```

会看到以下信息（已发布的最新稳定版的版本号、提交哈希和提交日期）：

```bash
# rustc x.y.z (abcabcabc yyyy-mm-dd)
rustc 1.59.0 (9d1b2106e 2022-02-23)
```

如果未看到此信息，则 Rust 已损坏。可以通过 [Rust 的疑难解答](https://doc.rust-lang.org/book/ch01-01-installation.html#troubleshooting)部分以了解如何解决此问题。如果问题仍然存在，也可以从官方 [Tauri Discord](https://discord.com/invite/tauri) 和 [GitHub Discussions](https://github.com/tauri-apps/tauri/discussions) 中获得帮助。
Convert Github Repos To A Portfolio Website
Tags: javascript, github
Published: 2022-08-01 09:25:41

## Introducing Projects
Present all your projects in style with a super customizable web app! ✨

`Projects` uses the GitHub API to list all your GitHub projects in a nice searchable grid.
Also shows pretty programming icons using `devicons`.

## Inspiration
Needed a way to display all my projects, used my portfolio's project section as inspiration

## Getting Projects

To get projects, follow these steps:

```
git clone https://github.com/arupmandal/arupmandalV2
cd projects
```

## Setup Your Own Projects

You can easily set up projects to show your own repos.

- Fork the repo

- Clone it

- Open up `script.js` and update the `username` variable to your GitHub username.

- Open up `index.html` and update the `title` tag to make it your username.

- You may also want to update the favicon too, update the `link` tag in `index.html`

- Push your changes

- Go to repo settings on GitHub and enable GitHub Pages.
The site should be live on `https://<your-username>.github.io/projects`

Here's the profile for @sindresorhus

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

## Number Of Repos

The number of repos is controlled by the `maxPages` variable, the GitHub API supports 100 repos per page max.
If you have less than 100 repos, set `maxPages` to 1, if you have 300 then 3.

You can also edit the fetch query to reduce the per page repo count.

There's no pagination, all repos are shown on the same page.

## Authenticated Requests

If you are working locally and notice the API is not sending over data, it might be because of rate limit on GitHub API requests.

You can either wait for an hour or setup a personal access token on GitHub and pass that into the fetch request in `script.js`

## Viewing projects

Open `index.html` in your favorite browser or visit [arupmandal.github.io/arupmandalV2](arupmandal.github.io/arupmandalV2).

## How it was built

Projects was built using `HTML` `CSS` & `JavaScript`.
It was built on Neovim and the python http server.
Uses GitHub API for data and Devicons for programming icons.

## What I learned

Learned about a few quirks of the fetch API, especially implementation of `maxPages`.
Flex, box-shadow and some other CSS tricks were revisited.

## What's next

Add more languages to devicons if necessary.

Hit the ⭐ button if you found this useful.
AWS S3 BUCKET OBJECT ANALYTICS
Tags: beginners, aws, s3, notpro
Published: 2022-08-01 09:25:00


Hey there!
  People who use S3 as storage for their projects wants to know about the bucket object's size, type. I came across one situation where my friend has created a lot of dummy files and was  added to the bucket which I created. When I opened my aws account, then I gotcha these many files are there so I thought of one solution to view it without logging in(can also be done with login).

_Catch_

- Without using Access key and Root key

- You can specify the Access key and Root key in bot3 call
 

_- I did it without access key and root  key cause who shares that credentials 😝😏 right!_


**Let's get into this!**

Language: Python

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx3nbpx6ab295eo4k4j4.png)
Step 1: [Learn about boto3 to work with S3 using python](https://boto3.amazonaws.com/v1/documentation/api/latest/guide/s3-examples.html)

Step 2: [Link of Project in Gituhub]
(https://github.com/rakshithamatthuga/awss3analytics)

Step 3:Download and run the project in any python supported platform.
_Note: Run requirements.txt file before running the project at one shot._

**Expected Output:**

![AWS S3 BUCKET OBJECTS SIZE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8rzua0240xciidffb4x.png)

![AWS S3 BUCKET OBEJCTS FILE TYPE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy8w2it2ebjo7qm1ahkb.png)



_Feel free to optimize this or any inputs!_
Reach out to [EMAIL ID](rakshithas.mca19@bmsce.ac.in)
Made with ❤️
By Rakshitha S
MCA, BMSCE
How to make truncate text in CSS
Tags: css, html, webdev
Published: 2022-08-01 09:19:46

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f39ym2tu9nfjpyfqzlw6.png)

There is no native CSS property for truncating text. However, you can use the ellipsis character to display truncated text.
```css
p {
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h9q84z0x7a8b1blwosz.png)

Note we have given the element a fixed width. This is made because the element needs a certain width.
Javascript Roadmap for Beginners in 2022.
Tags: javascript, webdev, beginners, programming
Published: 2022-08-01 09:16:14

### ➩ Running Javascript

- Script tag

- Link external file

- Browser console

- with node

### ➩ Variables

##### ➲ Declarations

- var
- let
- const
- Scope
- Global
- function
- Block
- Hoisting


### ➩ Data types & Data Structures

##### ➲ Primitive Datatypes
- undefined
- boolean
- Number
- BigInt
- String
- Symbol

- Null
- Object
- Function

##### ➲ Data Structures

- Array
- Map/ Weak map
- Set/ Weak Set
- Date

### ➩ Type Conversion

- Explicit Function
- Implicit Function

- Equality
- == & ===

### ➩ Loops

- while
- do..while.
- for
- break/continue 
- for...in
- for...of

### ➩ Loops
- while
- do..while.
- for
- break/continue 
- for...in
- for...of

### ➩ Expressions & Operators

- Assignment Operators
- Arithmetic Operators
- Logical Operators
- Conditional Operators
- Comparison Operators
- Relational Operators
- Bitwise Operators
- String Operators
- Comma Operator
- Unary Operators

### ➩ Expressions & Operators

- Assignment Operators
- Arithmetic Operators
- Logical Operators
- Conditional Operators
- Comparison Operators
- Relational Operators
- Bitwise Operators
- String Operators
- Comma Operator
- Unary Operators

### ➩ Functions

- Function Declarations
- Function Expressions
- Calling Functions
- Parameters & Arguments
- Scope 
- Arrow Functions

### ➩ Functions

- Function Declarations
- Function Expressions
- Calling Functions
- Parameters & Arguments
- Scope 
- Arrow Functions

### ➩ this
- Implicit Binding 
- Explicit Binding
- new Binding
- Lexical Binding
- Default Binding

#### ➩ Prototype
#### ➩ Prototypal Inheritance
#### ➩ Class
#### ➩ Iterators
#### ➩ Generators
#### ➩ Event Loop

### ➩ Asynchronous Javascript

- setTimeout
- setIntervals
- callbacks
- Promises
- async await

### ➩ Module System

- CJS
- ESM
- Import/Export
- Default & Named Exports

-------------------------------------------------------------------------------------


🚨 700+ Tools & Resources 🤩
Goldmine🌟 for Developers, Designers, and Creators.

I've Curated incredible tools and learning resources for developers, designers & content creators.
[Unlock Now🚀](https://t.co/2XaQR6ASYw)

-------------------------------------------------------------------------------------

If this blog was helpful to you, please consider following me here: [Twitter](https://twitter.com/mdjunaidap)