1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

HTML, CSS, JavaScript, and Rust for

Beginners: A Guide to Application
Development with Tauri

© Copyright James Rose 2024

localhost:3000/[Link] 1/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Prerequisites
Before embarking on your journey through this book, it's essential to ensure that your
development environment is properly configured. This section will walk you through the
necessary prerequisites for both Windows and Linux systems, ensuring you have a solid
foundation to build upon.

Windows
Setting up your environment on a Windows system requires a few key components:

[Link]: Download and install the LTS version of [Link]. This will provide you with a
stable and reliable runtime for your JavaScript code.
Rust: Install Rust using rustup, the recommended tool for managing Rust versions and
associated tools.
Visual Studio Build Tools: Ensure you have the Visual Studio Build Tools installed, with
the C++ build tools selected. This is crucial for compiling native modules.

Linux
For those using a Linux system, the setup involves a few different steps:

[Link]: Similar to Windows, you'll need the LTS version of [Link]. Follow the installation
instructions specific to your distribution.
Rust: Use rustup to install Rust, providing you with the necessary tools to compile and
manage Rust projects.
Build-essential tools: Ensure you have the essential build tools installed, such as gcc ,
g++ , and make . These are typically available through your distribution's package
manager.

By following these instructions and ensuring all dependencies are correctly installed, you'll be
well-prepared to dive into the content of this book and start building your projects with
confidence.

localhost:3000/[Link] 2/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Windows Prerequisites

Microsoft C++ Build Tools

Tauri uses Microsoft C++ Build Tools for development. As such it is required that you install it
before you begin making your app. It can be done by going to
[Link]

Once on the page, click Download Build Tools To begin the download. Once the download is
finished click on the executable.

Ensure that the "Desktop Development with C++" option is checked and begin the installation.

Git
Step 1. Go to [Link] and download the 64-bit installer

Step 2. Click on the installer to start the wizard.

Step 3. Go through the wizard selecting all of the recommended options.

Step 4. Restart your computer.

Step 5. Verify that it is installed by running the following command

git --help

Common Commands

Cloning A Repository

git clone [Link]

localhost:3000/[Link] 3/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Making And Pushing Commits

While in your projects main directory run these commands

git add .
git commit -m "First Commit"
git push

NodeJS
NodeJs is a required dependency if you plan to use a JavaScript frontend. In order to install it,
you must go to [Link] and click the Download button.

Once the installer is done downloading, click on it to open the installation wizard. Go through
all of the wizards installation steps and use all of the recommended options.

Rust
Step 1. Go to [Link] Step 2. Download the 64 bit [Link]
script

Step 3. Click The Downloaded Executable

It is recommend to use the default installation. If you wish to use newer, less stable rust
features, you can change your default toolchain to nightly. It is important to note that you can
always change your toolchain later by running the following command.

rustup default stable # Change 'stable' to either 'nightly' or 'beta'

localhost:3000/[Link] 4/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Linux Prerequisites

System Packages
Before you begin developing your app, it is essential to install the necessary dependencies for
your chosen Linux distribution.

Debian/Ubuntu

For Debian and Ubuntu users, you can install the required packages by running the following
commands:

sudo apt update

sudo apt install libwebkit2gtk-4.1-dev \
build-essential \
curl \
wget \
file \
libxdo-dev \
libssl-dev \
libayatana-appindicator3-dev \
librsvg2-dev

Please note that these packages are available starting from Debian Bookworm and Ubuntu
Noble suite.

Arch Linux

Arch Linux users can install the necessary packages with the following commands:

localhost:3000/[Link] 5/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

sudo pacman -Syu

sudo pacman -S --needed \
webkit2gtk-4.1 \
base-devel \
curl \
wget \
file \
openssl \
appmenu-gtk-module \
libappindicator-gtk3 \
librsvg

Fedora/RHEL

For Fedora and RHEL users, use the following commands to install the required packages:

sudo dnf check-update

sudo dnf install webkit2gtk4.1-devel \
openssl-devel \
curl \
wget \
file \
libappindicator-gtk3-devel \
librsvg2-devel
sudo dnf group install "C Development Tools and Libraries"

Gentoo

Gentoo users can install the necessary packages by running:

sudo emerge --ask \

net-libs/webkit-gtk:4.1 \
dev-libs/libappindicator \
net-misc/curl \
net-misc/wget \
sys-apps/file

openSUSE

For openSUSE users, the required packages can be installed with:

localhost:3000/[Link] 6/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

sudo zypper up
sudo zypper in webkit2gtk3-devel \
libopenssl-devel \
curl \
wget \
file \
libappindicator3-1 \
librsvg-devel
sudo zypper in -t pattern devel_basis

[Link]
[Link] can be installed in various ways on Linux. The preferred method is to use your
distribution's default package manager. If this fails, you can use other methods.

1. Installation Via Your Distribution's Default Package Manager

Debian, Ubuntu, and Raspbian

For Debian-based distributions, use the following commands:

sudo apt update

# Only one or both of these packages may be required
sudo apt install npm
sudo apt install nodejs

Verify the installation:

npm -v
# 10.8.2
node -v
# v22.6.0

Arch Linux

For Arch Linux, use:

sudo pacman -Syu

sudo pacman -S --needed \
npm \
nodejs

localhost:3000/[Link] 7/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Fedora and RHEL

For Fedora and RHEL, use:

sudo dnf check-update

sudo dnf install \
nodejs \
npm

Installation Via A Node Package Manager

[Link] has package managers for managing installations and updates.

FNM (Fast Node Manager)

To install FNM and [Link], run:

# installs fnm (Fast Node Manager)

curl -fsSL [Link] | bash

# activate fnm
source ~/.bashrc

# download and install [Link]

fnm use --install-if-missing 20

# verifies the right [Link] version is in the environment

node -v # should print `v20.17.0`

# verifies the right npm version is in the environment

npm -v # should print `10.8.2`

NVM (Node Version Manager)

To install NVM and [Link], run:

localhost:3000/[Link] 8/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

# installs nvm (Node Version Manager)

curl -o- [Link] | bash

# download and install [Link] (you may need to restart the terminal)
nvm install 20

# verifies the right [Link] version is in the environment

node -v # should output something similar to `v20.17.0`

# verifies the right npm version is in the environment

npm -v # should output something similar to `10.8.2`

Installing with Snap

To install [Link] using Snap, ensure you have Snapcraft installed, then run:

sudo snap install node --channel=22/stable --classic

This snap also provides nodejs , npm , npx , and yarn .

Rust
Rust is a low-level programming language that compiles quickly and efficiently. It provides
control and simplifies dependency management.

Installation

The recommended installation method is to use the provided script:

curl --proto '=https' --tlsv1.2 [Link] -sSf | sh

Use the default installation. To use newer, less stable Rust features, change your default
toolchain:

rustup default stable # Change 'stable' to either 'nightly' or 'beta'

localhost:3000/[Link] 9/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Android
1. Download and install Android Studio from the Android Developer Website.
2. Set the JAVA_HOME environment variable:

export JAVA_HOME=/opt/android-studio/jbr

3. Open a project in Android Studio, click the settings icon, and select SDK Manager. Install
the following:
Android SDK Platform (API Level 24 and onwards)
Android SDK Platform-Tools
NDK (Side by side)
Android SDK Build-Tools
Android SDK Command-line Tools
4. Set the ANDROID_HOME and NDK_HOME environment variables:

export ANDROID_HOME="$HOME/Android/Sdk"
export NDK_HOME="$ANDROID_HOME/ndk/$(ls -1 $ANDROID_HOME/ndk)"

5. Add the following targets with rustup :

rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android

x86_64-linux-android

System Packages
Before you begin developing your app it is imperative that you first install the proper
dependencies for your chosen distro.

localhost:3000/[Link] 10/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Debian/Ubuntu

sudo apt update

sudo apt install libwebkit2gtk-4.1-dev \
build-essential \
curl \
wget \
file \
libxdo-dev \
libssl-dev \
libayatana-appindicator3-dev \
librsvg2-dev

As Debian distros use a point release system it is only possible to install these packages using
Debian Bookworm and onwards. It is a similar situation with Ubuntu where you must be using
the Noble suite and onwards.

Arch Linux

sudo pacman -Syu

sudo pacman -S --needed \
webkit2gtk-4.1 \
base-devel \
curl \
wget \
file \
openssl \
appmenu-gtk-module \
libappindicator-gtk3 \
librsvg

Fedora/RHEL

sudo dnf check-update

sudo dnf install webkit2gtk4.1-devel \
openssl-devel \
curl \
wget \
file \
libappindicator-gtk3-devel \
librsvg2-devel
sudo dnf group install "C Development Tools and Libraries"

localhost:3000/[Link] 11/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Gentoo

sudo emerge --ask \

net-libs/webkit-gtk:4.1 \
dev-libs/libappindicator \
net-misc/curl \
net-misc/wget \
sys-apps/file

openSUSE

sudo zypper up
sudo zypper in webkit2gtk3-devel \
libopenssl-devel \
curl \
wget \
file \
libappindicator3-1 \
librsvg-devel
sudo zypper in -t pattern devel_basis

[Link]
[Link] can be installed in many different ways for linux. The prefered method is to use your
Linux Distributions default package manager to install Nodejs and NPM. If this fails it is possible
to install using 2 other methods.

1. Installation Via Your Distributions Default Package Manager

Debian, Ubuntu and Raspbian

sudo apt update

# Only one or both of these packages may be required
sudo apt install npm
sudo apt install nodejs

Afterwards run these commands to ensure that both npm and nodejs are installed

localhost:3000/[Link] 12/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

npm -v
# 10.8.2
node -v
# v22.6.0

Arch Linux

sudo pacman -Syu

sudo pacman -S --needed \
npm \
nodejs

Fedora And Red Hat Enterprise Linux

sudo dnf check-update

sudo dnf install \
nodejs \
npm

Installation Via A Node Package Manager

While not as simple Nodejs has package managers meant for managing installations and
updates for nodejs

FNM (Fast Node Manager)

Running this script will install FNM as well. If for some reason you do not want to install FNM,
please try using another method.

# installs fnm (Fast Node Manager)

curl -fsSL [Link] | bash

# activate fnm
source ~/.bashrc

# download and install [Link]

fnm use --install-if-missing 20

# verifies the right [Link] version is in the environment

node -v # should print `v20.17.0`

# verifies the right npm version is in the environment

npm -v # should print `10.8.2`

localhost:3000/[Link] 13/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Installation with NVM (Node Version Manager)

Running this script will install NVM as well. If for some reason you do not wish to install NVM,
please try using another method.

# installs nvm (Node Version Manager)

curl -o- [Link] | bash

# download and install [Link] (you may need to restart the terminal)
nvm install 20

# verifies the right [Link] version is in the environment

node -v # should output something similar to `v20.17.0`

# verifies the right npm version is in the environment

npm -v # should output something similar to `10.8.2`

Installing with Snap (Requires installation of Snap)

Installation using Snap is simple, however it is imperative that you have completed the
prerequisites for installing Snapcraft prior to running these commands as it will fail otherwise.

sudo snap install node --channel=22/stable --classic

This snap also provides nodejs , npm , npx , and yarn .

Rust
Rust is a low-level programming language that aims to compile to the smallest binary possible,
very quickly, and with very little overhead. It provides the user with a large amount of control
and simplifies dependency management.

Installation

The recommended installation method is to use the provided script.

curl --proto '=https' --tlsv1.2 [Link] -sSf | sh

It is recommend to use the default installation. If you wish to use newer, less stable rust
features, you can change your default toolchain to nightly. It is important to note that you can

localhost:3000/[Link] 14/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

always change your toolchain later by running the following command.

rustup default stable # Change 'stable' to either 'nightly' or 'beta'

Android
1. Download and install Android Studio from the Android Developer Website
[Link]
2. Set the JAVA_HOME Environment variable in the terminal. The location may be different
depending on your method of installation.

export JAVA_HOME=/opt/android-studio/jbr

3. Open a Project in your newly installed version of Android Studio and click the settings icon
in the top right corner. Click on SDK Manager which should appear in the dropdown after
the settings button has been clicked. Install the following.

Android SDK Platform (API Level 24 and onwards)

Android SDK Platform-Tools
NDK (Side by side)
Android SDK Build-Tools
Android SDK Command-line Tools

4. Set the ANDROID_HOME and NDK_HOME environment variables. The locations may be
different depending on your installation

export ANDROID_HOME="$HOME/Android/Sdk"
export NDK_HOME="$ANDROID_HOME/ndk/$(ls -1 $ANDROID_HOME/ndk)"

5. Add the following targets with rustup

rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android

x86_64-linux-android

localhost:3000/[Link] 15/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Getting Started

localhost:3000/[Link] 16/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Project Structure
Understanding the structure of your Tauri project is crucial for efficient development. Let's take
a closer look at the various files and directories that make up a typical Tauri application.

C:.
│ [Link]
│
├───src
│ [Link]
│ [Link]
│ [Link]
│
└───src-tauri
│ [Link]
│ [Link]
│ [Link]
│
└───src
[Link]
[Link]

The [Link] File

The [Link] file, located at the root of your project, contains essential information about
your application, such as its name, version, and dependencies. It also includes scripts that can
be executed using npm.

{
"name": "example",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"tauri": "tauri"
},
"devDependencies": {
"@tauri-apps/cli": ">=2.0.0-rc.0"
}
}

localhost:3000/[Link] 17/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

The src Directory

This directory houses your frontend code, which is responsible for the user interface. It
includes three main files: [Link] , [Link] , and [Link] .

src/[Link]
The [Link] file within the src directory contains the HTML structure of your application.
Initially, it should look like this:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/[Link]" defer></script>
</head>
<body>
<h1>Welcome to Tauri!</h1>
</body>
</html>

src/[Link]
The [Link] file contains the CSS rules that define the appearance of your application,
including text alignment, image sizes, colors, and backgrounds.

localhost:3000/[Link] 18/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #0f0f0f;
background-color: #f6f6f6;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

h1 {
text-align: center;
}

src/[Link]
The [Link] file adds interactivity to your application. For example, it can handle events such
as button clicks. Initially, it should contain the following code:

const { invoke } = window.__TAURI__.core;

The src-tauri Directory

This directory contains the backend code and configuration files for your Tauri application. It
includes [Link] , [Link] , and [Link] .

src-tauri/[Link]
The [Link] file is used to build the application. Most projects will use a file that looks like
this:

fn main() {
tauri_build::build()
}

localhost:3000/[Link] 19/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

src-tauri/[Link]
The [Link] file contains information that controls how the code is compiled and what
optimizations are used.

[package]
name = "example"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
edition = "2021"

[lib]
name = "example_lib"
crate-type = ["lib", "cdylib", "staticlib"]

[build-dependencies]
tauri-build = { version = "2", features = [] }

[dependencies]
tauri = { version = "2", features = [] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"

src-tauri/[Link]
The [Link] file controls various settings for your application, such as its title and the
installers/bundles that will be produced with the build command.

localhost:3000/[Link] 20/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

{
"productName": "example",
"version": "0.1.0",
"identifier": "[Link]",
"build": {
"frontendDist": "../src"
},
"app": {
"withGlobalTauri": true,
"windows": [
{
"title": "example",
"label": "main",
"maximized": true
}
],
"security": {
"csp": null
}
},
"bundle": {
"active": true,
"targets": ["deb", "rpm", "nsis", "msi"],
"icon": [
"icons/[Link]",
"icons/[Link]",
"icons/128x128@[Link]",
"icons/[Link]",
"icons/[Link]"
]
}
}

The src-tauri/src Directory

Within the src-tauri directory, there is a src subdirectory that contains two files: [Link]
and [Link] .

src-tauri/src/[Link]
The [Link] file serves as the mobile entry point for Android and iOS devices. It should look like
this:

localhost:3000/[Link] 21/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

src-tauri/src/[Link]
The [Link] file is the entry point for non-mobile users. It should look like this:

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
example_lib::run()
}

Running Your Project

Once all your files are set up, open the project's main directory in the terminal and run the
following commands:

npm install # This installs the frontend dependencies

npm run tauri dev # This opens the developer window, which reloads every time one
of the project's files is modified and saved

C:.
│ [Link]
│
├───src
│ [Link]
│ [Link]
│ [Link]
│
└───src-tauri
│ [Link]
│ [Link]
│ [Link]
│
└───src
[Link]
[Link]

localhost:3000/[Link] 22/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

[Link]
The [Link] file in your projects root contains information such as your apps name,
version and dependencies. It also holds scripts which can be run using npm.

{
"name": "example",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"tauri": "tauri"
},
"devDependencies": {
"@tauri-apps/cli": ">=2.0.0-rc.0"
}
}

The src Directory

This directory contains your frontend code. This is information that is displayed to the user. It
contains 3 files, [Link] , [Link] , and [Link] respectively.

src/[Link]
Within the src directory, the [Link] file contains all of the images, and text that will be
displayed. For now, it should look like this.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/[Link]" defer></script>
</head>

<body>
<h1>Welcome to Tauri!</h1>
</body>
</html>

localhost:3000/[Link] 23/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

src/[Link]
In the src directory the [Link] contains all of the info regarding text alignment, image sizes,
colors, and backgrounds that will be displayed on the page.

:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;

color: #0f0f0f;
background-color: #f6f6f6;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

h1 {
text-align: center;
}

src/[Link]
The [Link] file adds interactivity to the app. For example, if a button is clicked, the
background will change color. For now all that is required is this.

const { invoke } = window.__TAURI__.core;

The src-tauri Directory

This directory contains all of the backend code along with some app configuration files. Within
it are the [Link] , [Link] , and [Link] files.

src-tauri/[Link]
This is the code that is used to build the app. Most projects will use files that look like this.

localhost:3000/[Link] 24/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

fn main() {
tauri_build::build()
}

src-tauri/[Link]
This file contains information that controls how the code is compiled and what optimizations
are used.

[package]
name = "example"
version = "0.1.0"
description = "A Tauri App"
authors = ["you"]
edition = "2021"

# See more keys and their definitions at [Link]

[Link]/cargo/reference/[Link]

[lib]
name = "example_lib"
crate-type = ["lib", "cdylib", "staticlib"]

[[Link]]
panic = "abort" # Strip expensive panic clean-up logic
codegen-units = 1 # Compile crates one after another so the compiler can optimize
better
lto = true # Enables link to optimizations
opt-level = "s" # Optimize for binary size

[build-dependencies]
tauri-build = { version = "2.0.0-rc", features = [] }

[dependencies]
tauri = { version = "2.0.0-rc", features = [] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"

src-tauri/[Link]
This file controls information such as your apps title, and what installers/bundles will be
produced with the build command. For now the file should look like this.

localhost:3000/[Link] 25/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

{
"productName": "example",
"version": "0.1.0",
"identifier": "[Link]",
"build": {
"frontendDist": "../src"
},
"app": {
"withGlobalTauri": true,
"windows": [
{
"title": "example",
"label": "main",
"maximized": true
}
],
"security": {
"csp": null
}
},
"bundle": {
"active": true,
"targets": ["deb", "rpm", "nsis", "msi"],
"icon": [
"icons/[Link]",
"icons/[Link]",
"icons/128x128@[Link]",
"icons/[Link]",
"icons/[Link]"
]
}
}

The src-tauri/src Directory

Within the src-tauri directory there is a src subdirectory. Within this subdirectory are two files,
[Link] , and [Link] respectively.

src-tauri/src/[Link]
This file is the mobile entry point that is used on Android and IOS devices. This file should look
like this.

localhost:3000/[Link] 26/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

src-tauri/src/[Link]
This file is the entrypoint for non mobile users. It should look like this.

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
example_lib::run()
}

Once all of your files open the projects main directory in the terminal and run the following.

npm install # This installs the frontend dependencies

npm run tauri dev # This opens the developer window which reloads everytime one of
the projects files are modified and saved

localhost:3000/[Link] 27/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Tauri Configuration
In this section, we will explore the [Link] file, which is the main configuration file for
Tauri applications. This file allows you to customize various aspects of your application, such as
the window title, default window size, and the types of bundles produced during the build
process.

[Link]
Below is an example of a [Link] file:

{
"productName": "example",
"version": "0.1.0",
"identifier": "[Link]",
"build": {
"frontendDist": "../src"
},
"app": {
"withGlobalTauri": true,
"windows": [
{
"title": "example",
"label": "main",
"maximized": true
}
],
"security": {
"csp": null
}
},
"bundle": {
"active": true,
"targets": ["deb", "rpm", "nsis", "msi"],
"icon": [
"icons/[Link]",
"icons/[Link]",
"icons/128x128@[Link]",
"icons/[Link]",
"icons/[Link]"
]
}
}

Let's break down the key components of this configuration file:

localhost:3000/[Link] 28/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Product Name and Version: The productName and version fields are used to name the
bundles and installers. For example, the bundle might be named
example_0.1.0_arm64.deb .
Windows: The windows array contains a list of windows that can be displayed by your
application. Each window has a title field that specifies the title displayed to the user.
Targets: The targets field lists the types of bundles and installers that will be produced
when you run npm run tauri build . In this example, the targets include deb , rpm ,
nsis , and msi .
Icons: The icon field contains a list of image files that will be used as the application's
icon.

By configuring these fields, you can tailor your Tauri application to meet your specific needs
and preferences.

localhost:3000/[Link] 29/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Using Templates

Commands
Creating a new Tauri application is straightforward, and you can choose from several
commands depending on your preferred environment. Let's explore the different options
available:

Shell Script

For Unix-based systems, you can use the following shell script to create a new Tauri application.
This method is quick and efficient, allowing you to get started in no time:

sh <(curl [Link]

PowerShell

If you are a Windows user, the PowerShell command is the way to go. This command will set up
your new Tauri application seamlessly:

irm [Link] | iex

npm

For those who prefer using npm, you can create a new Tauri app with the following command.
This method integrates well with the npm ecosystem, making it a popular choice among
developers:

npm create tauri-app@latest

yarn

Yarn users can also create a new Tauri application with ease. The following command leverages
yarn's capabilities to set up your project efficiently:
localhost:3000/[Link] 30/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

yarn create tauri-app

pnpm

If you are a fan of pnpm, you can use the following command to create a new Tauri app. Pnpm
is known for its speed and efficient package management:

pnpm create tauri-app

deno

For developers who use deno, the following command will help you create a new Tauri
application. Deno offers a secure runtime for JavaScript and TypeScript:

deno run -A npm:create-tauri-app

bun

If you prefer using bun, you can create a new Tauri app with the following command. Bun is a
fast all-in-one JavaScript runtime:

bun create tauri-app

cargo

Rust enthusiasts can use cargo to create a new Tauri application. The following commands will
guide you through the process, leveraging Rust's powerful capabilities:

cargo install create-tauri-app --locked

cargo create-tauri-app

Customization Options
When you run the create-tauri-app command, you will be prompted to select various
options to tailor your project to your specific needs. These customization options ensure that
localhost:3000/[Link] 31/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

your Tauri application is set up exactly the way you want it.

Package Manager

One of the first choices you will make is selecting your preferred package manager. You can
choose from the following options:

yarn
npm
bun

Rust Templates
When creating a Tauri application with Rust, you have several UI templates to choose from.
Each template caters to different development preferences and styles, allowing you to select
the one that best fits your needs:

Vanilla: This minimal template provides a clean slate for your Rust-based Tauri
application, with no additional frameworks included.
Yew: A modern Rust framework for building multi-threaded front-end web apps with
WebAssembly. Yew is known for its performance and ease of use.
Leptos: A full-stack framework for building fast, interactive web applications with Rust.
Leptos offers a comprehensive solution for web development.
Sycamore: A reactive framework for creating web applications in Rust, inspired by React.
Sycamore focuses on simplicity and reactivity.

TypeScript / JavaScript Templates

For developers using TypeScript or JavaScript, Tauri offers a variety of UI templates to match
your preferred framework. These templates provide a solid starting point for your project:

Vanilla: A basic template without any additional frameworks, ideal for those who prefer
to start from scratch.
Vue: A progressive framework for building user interfaces, known for its simplicity and
flexibility. Vue is a popular choice for modern web development.
Svelte: A compiler that generates minimal and highly efficient JavaScript code, offering a
unique approach to building web applications. Svelte is known for its performance and
developer experience.

localhost:3000/[Link] 32/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

React: A popular library for building user interfaces, particularly single-page applications,
with a component-based architecture. React is widely used in the industry.
Solid: A declarative JavaScript library for creating user interfaces, focusing on fine-grained
reactivity. Solid offers a modern approach to UI development.
Angular: A platform and framework for building single-page client applications using
HTML and TypeScript. Angular provides a comprehensive solution for large-scale
applications.
Preact: A fast 3kB alternative to React with the same modern API, providing a lightweight
solution for building web applications. Preact is ideal for performance-critical applications.

You can also choose the flavor of your project, either TypeScript or JavaScript, depending on
your preference and project requirements.

.NET Templates
For developers working with .NET, Tauri provides a template for building web applications
using Blazor. Blazor allows you to leverage the power of .NET for your Tauri application:

Blazor: A framework for building interactive web UIs using C# instead of JavaScript. Blazor
enables you to create rich web applications with the familiarity of .NET. More information
can be found at Blazor.

By selecting the appropriate template and flavor, you can tailor your Tauri project to your
specific development needs and preferences. This flexibility ensures that you can build your
application with the tools and frameworks you are most comfortable with, leading to a more
efficient and enjoyable development experience.

Once you have generated your template, in order to open your dev window, you must first
enter your projects root, and run the proper command for you prefered package manager.

For Example:

pnpm run tauri dev

localhost:3000/[Link] 33/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Learning To Code

HTML

localhost:3000/[Link] 34/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Elements
HTML (Hypertext Markup Language) is the standard markup language for creating web pages.
It consists of various elements that define the structure and content of a web page.

Commonly Used HTML Elements

Headings

<h1> to <h6> : These tags define headings of different levels, with <h1> being the
highest level and <h6> being the lowest. Headings are important for SEO and accessibility
as they help to structure the content and make it easier to navigate.

Text Content

<p> : This tag defines a paragraph of text. Paragraphs are block-level elements, meaning
they start on a new line and take up the full width available.
<a> : The anchor tag is used to create hyperlinks, which are clickable links that navigate to
other web pages or resources. The href attribute specifies the URL of the linked
resource.
<span> : This is an inline container element used to apply styles or manipulate text within
a larger block of content. Unlike <div> , it does not start on a new line.

Images and Media

<img> : This tag is used to embed images in a web page. It is a self-closing tag and
requires the src attribute to specify the path to the image file, and the alt attribute to
provide alternative text for accessibility.

Lists

<ul> : Unordered list, which displays a list of items with bullet points.
<ol> : Ordered list, which displays a list of items with numbers.
<li> : List item, used within <ul> or <ol> to define individual list items.

localhost:3000/[Link] 35/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Containers

<div> : A generic block-level container element used to group other elements. It is often
used with CSS to apply styles or JavaScript to manipulate sections of the page.

Tables

<table> : This tag is used to create a table to display tabular data. It contains <tr> for
table rows, <th> for table headers, and <td> for table data cells.

Forms

<form> : This tag is used to create interactive forms for user input. It can contain various
input elements like <input> , <textarea> , <button> , <select> , and <label> . The
action attribute specifies where to send the form data when submitted, and the method
attribute specifies the HTTP method to use (GET or POST).

Best Practices
Always close HTML elements properly by using the closing tag ( </tagname> ), unless the
element is self-closing (e.g., <img> ).
Use semantic HTML elements to improve the accessibility and SEO of your web pages.
Validate your HTML code to ensure it follows the standards and is free of errors.

localhost:3000/[Link] 36/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Attributes
Attributes in HTML provide additional information about an element. They are used to modify
the behavior or appearance of an HTML element.

Here are a few examples of commonly used attributes in HTML:

Common HTML Attributes

HTML attributes provide additional information about elements and are essential for modifying
their behavior and appearance. Understanding how to use these attributes effectively can
greatly enhance the functionality and accessibility of your web pages. Let's explore some of the
most commonly used attributes in HTML:

Class Attribute

The class attribute is used to specify one or more class names for an element. This attribute
is particularly useful for applying the same styles to multiple elements. For example:

<div class="container main-content"></div>

In this example, the div element has two classes: container and main-content . These
classes can be targeted with CSS to apply specific styles.

ID Attribute

The id attribute is used to uniquely identify an element. This is useful for targeting specific
elements with CSS or JavaScript. For instance:

<h1 id="header-title">Welcome to My Website</h1>

Here, the h1 element has an id of header-title , which can be used to apply unique styles
or manipulate the element with JavaScript.

localhost:3000/[Link] 37/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Src Attribute

The src attribute specifies the source URL of an external resource, such as an image or a
script. For example:

<img src="[Link]" alt="A beautiful scenery">

In this case, the src attribute points to the path of the image file.

Href Attribute

The href attribute defines the destination URL of a hyperlink, commonly used in <a> tags. For
example:

<a href="[Link] Example</a>

Here, the href attribute specifies the URL that the link will navigate to when clicked.

Alt Attribute

The alt attribute provides alternative text for an image, which is displayed if the image fails to
load or for accessibility purposes. For example:

<img src="[Link]" alt="A beautiful scenery">

The alt attribute offers a textual description of the image, which is beneficial for screen
readers and when the image cannot be displayed.

These examples illustrate just a few of the many attributes available in HTML. Each element has
its own set of attributes that can be used to customize its behavior and appearance. Other
commonly used attributes include title , style , data-* , disabled , readonly , and
placeholder .

For a comprehensive list of attributes and their usage, always refer to the official HTML
documentation. Proper use of attributes can significantly improve the functionality and
accessibility of your web pages.

localhost:3000/[Link] 38/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Comments
Comments in HTML are an essential tool for developers, allowing them to add explanatory
notes or reminders within the code that are not displayed on the webpage. These comments
are invaluable for documenting your code, providing context, or temporarily disabling certain
sections without deleting them.

To add a comment in HTML, you use the <!-- --> syntax. Anything placed between these
opening and closing comment tags will be ignored by the browser when rendering the
webpage.

For example:

<!-- This is a comment -->

<p>This is a paragraph.</p>

In this example, the comment This is a comment will not be displayed on the webpage, but
the paragraph element <p>This is a paragraph.</p> will be rendered.

Comments can also span multiple lines:

<!--
This is a multi-line
comment.
-->
<p>This is another paragraph.</p>

In this case, the entire block of text between the opening <!-- and closing --> tags will be
treated as a comment.

Best Practices for Using Comments

1. Clarity and Relevance: Ensure that comments are clear and relevant. They should
explain the purpose of the code, especially if it is complex or not immediately
understandable.
2. Avoid Over-Commenting: Do not overuse comments. Code should be self-explanatory
where possible. Use comments to explain the "why" rather than the "what".
3. Update Comments: Keep comments up-to-date with code changes. Outdated comments
can be misleading and confusing.
4. Sensitive Information: Avoid placing sensitive information in comments, as they can be
viewed in the source code by anyone with access.

localhost:3000/[Link] 39/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Use Cases for Comments

Documentation: Provide explanations for complex logic or algorithms.

Debugging: Temporarily disable code by commenting it out.
Collaboration: Leave notes for other developers working on the same project.
Version Control: Mark sections of code that are under development or need review.

Example of Commenting Out Code

Sometimes, you might want to disable a section of code without deleting it. This can be useful
for testing or debugging purposes:

<!--
<p>This paragraph is temporarily disabled.</p>
-->
<p>This paragraph is active.</p>

In this example, the first paragraph is commented out and will not be rendered by the browser,
while the second paragraph will be displayed.

Conclusion

Comments are a powerful tool for making your HTML code more understandable and
maintainable. By following best practices and using comments judiciously, you can improve the
readability and quality of your code, making it easier for yourself and others to work with.

Remember that comments are not visible to users visiting your webpage, but they can be
invaluable for developers who are reading or maintaining your code.

localhost:3000/[Link] 40/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Head
The <head> element is a crucial part of an HTML document. It contains metadata and other
non-visible information about the document. In this chapter, we will explore some commonly
used elements that can be nested within the <head> element.

Title Element
The <title> element specifies the title of the document, which is displayed in the browser's
title bar or tab.

Example:

<title>My Website</title>

Explanation:

This sets the title of the webpage to "My Website".

Meta Element
The <meta> element is used to provide metadata about the HTML document, such as
character encoding, viewport settings, and keywords.

Example:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

localhost:3000/[Link] 41/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Explanation:

The first <meta> element sets the character encoding to UTF-8, ensuring proper
rendering of special characters.
The second <meta> element sets the viewport to the device's width and initial scale,
making the webpage responsive on different devices.
The third <meta> element provides a brief description of the webpage, which can be used
by search engines.
The fourth <meta> element specifies keywords related to the content of the webpage,
aiding in search engine optimization (SEO).
The fifth <meta> element specifies the author of the document.

Link Element
The <link> element is used to link external stylesheets, icon files, or other external resources
to the HTML document.

Example:

<link rel="stylesheet" href="[Link]">

<link rel="icon" href="[Link]">
<link rel="preconnect" href="[Link]
<link rel="stylesheet" href="[Link]
family=Roboto:wght@400;700&display=swap">

Explanation:

The first <link> element links an external CSS file called "[Link]" to the HTML
document, allowing you to style the webpage.
The second <link> element links a favicon file (an icon displayed in the browser's tab)
called "[Link]" to the HTML document.
The third <link> element preconnects to the Google Fonts API, which can improve
loading performance.
The fourth <link> element links a specific Google Font (Roboto) to the HTML document,
allowing you to use this font in your styles.

localhost:3000/[Link] 42/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Base Element
The <base> element specifies the base URL for all relative URLs within the document.

Example:

<base href="[Link]

Explanation:

This sets the base URL for all relative URLs in the document to "[Link] So, if
you have an anchor tag with a relative URL like <a href="/about">About</a> , it will resolve to
"[Link]

Style Element
The <style> element allows you to include internal CSS styles directly within the HTML
document.

Example:

<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f0f0f0;
}
</style>

Explanation:

This <style> element includes internal CSS that sets the font family to Roboto and the
background color of the body to a light gray.

localhost:3000/[Link] 43/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Script Element
The <script> element allows you to include or reference JavaScript code within the HTML
document.

Example:

<script src="[Link]" defer></script>

Explanation:

This <script> element references an external JavaScript file called "[Link]" and uses the
defer attribute to ensure the script is executed after the HTML document has been fully
parsed.

These are just a few examples of elements that can be nested within the <head> element.
Remember to close the <head> element with </head> after including all necessary elements.

localhost:3000/[Link] 44/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Headings
In HTML, headings are defined with the <h1> to <h6> tags. Each heading tag represents a
different level of importance, with <h1> being the most important and <h6> being the least
important. Headings help to structure the content on a webpage, making it easier for users and
search engines to understand the hierarchy and organization of the information.

Heading Levels
<h1> : This is the main heading of the page, typically used for the title or the most
important heading.
<h2> : This is used for subheadings under <h1> , representing the second level of
importance.
<h3> : This is used for subheadings under <h2> , representing the third level of
importance.
<h4> : This is used for subheadings under <h3> , representing the fourth level of
importance.
<h5> : This is used for subheadings under <h4> , representing the fifth level of
importance.
<h6> : This is used for subheadings under <h5> , representing the sixth level of
importance.

Code Example

Here is an example of how to use the different heading tags in HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
</body>
</html>

localhost:3000/[Link] 45/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Result

The above code will render the following headings on a webpage:

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading

This is an h6 heading

Importance of Headings

Using headings correctly is important for several reasons:

1. Accessibility: Screen readers use headings to help users navigate the content.
2. SEO: Search engines use headings to understand the structure and relevance of the
content.
3. Readability: Headings break up the text, making it easier for users to scan and find the
information they need.

By using headings appropriately, you can create a well-structured and accessible webpage that
is easy to navigate and understand.

localhost:3000/[Link] 46/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Paragraphs
In HTML, the <p> tag is fundamental for defining paragraphs. As a block-level element, it
naturally begins on a new line and spans the full width of its container. This behavior ensures
that paragraphs are visually distinct, with most browsers adding default margins before and
after the text to enhance readability.

Code Example

Consider the following example, which demonstrates the use of the <p> tag within an HTML
document:

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<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>
</body>
</html>

Detailed Explanation

The <!DOCTYPE html> declaration specifies the HTML version and ensures proper
rendering.
The <html> tag serves as the root element of the document.
Within the <head> section, meta-information such as the document's title is defined.
The <body> section contains the visible content, including headings and paragraphs.
The <h1> tag denotes a primary heading.
Each <p> tag encapsulates a paragraph, ensuring that text is neatly organized and
separated.

localhost:3000/[Link] 47/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Rendering in Browsers

When viewed in a browser, the content within <p> tags appears as distinct paragraphs, each
separated by space. This spacing is governed by the browser's default stylesheet but can be
tailored using CSS.

localhost:3000/[Link] 48/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Text Formatting
To format text in HTML, you can use various elements. Here are some commonly used ones,
along with their semantic meanings and usage examples:

Emphasis and Italics

Emphasis (<em>)

The <em> element is used to emphasize text, which typically renders as italicized text. This
element should be used to stress the importance of a word or phrase within a sentence. For
example:

<p>This is <em>emphasized</em> text.</p>

Italic (<i>)

The <i> element is used to indicate text that is in an alternate voice or mood, such as a
technical term, a phrase from another language, or a thought. It also renders as italicized text.
For example:

<p>This is <i>italicized</i> text.</p>

Text Size and Highlighting

Small Text (<small>)

The <small> element is used to render text in a smaller font size, often for fine print or
disclaimers. For example:

<p>This is <small>smaller</small> text.</p>

localhost:3000/[Link] 49/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Highlighted Text (<mark>)

The <mark> element is used to highlight or mark a specific portion of text, typically rendering
with a yellow background. This is useful for drawing attention to important information. For
example:

<p>This is <mark>highlighted</mark> text.</p>

Deletions and Insertions

Deleted Text (<del>)

The <del> element is used to indicate deleted or removed text, which typically renders with a
strikethrough effect. This can be useful for showing edits or changes in a document. For
example:

<p>This is <del>deleted</del> text.</p>

Inserted Text (<ins>)

The <ins> element is used to indicate inserted or added text, which typically renders with an
underline effect. This can be useful for showing additions in a document. For example:

<p>This is <ins>inserted</ins> text.</p>

Importance and Subscripts

Strong Importance (<strong>)

The <strong> element is used to indicate strong importance or seriousness, typically

rendering as bold text. This element should be used to highlight critical information. For
example:

<p>This is <strong>strong</strong> text.</p>

localhost:3000/[Link] 50/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Subscript (<sub>)

The <sub> element is used to render text as subscript, which is positioned below the normal
text line. This is often used in chemical formulas or mathematical expressions. For example:

<p>This is _subscript text.</p>

Superscript (<sup>)

The <sup> element is used to render text as superscript, which is positioned above the normal
text line. This is often used for footnotes, exponents, or ordinal indicators. For example:

<p>This is ^superscript text.</p>

Remember to always use these elements semantically, based on their intended meaning,
rather than just for visual styling. Proper use of these elements ensures that your HTML is
accessible and meaningful to all users, including those using assistive technologies.

localhost:3000/[Link] 51/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Links
Links in HTML are created using the <a> tag, which stands for "anchor." This tag is essential for
creating hyperlinks that connect different web pages or resources. To specify the destination of
the link, the href attribute is used. For instance, if you want to create a link to the Google
homepage, you would write:

<a href="[Link] Homepage</a>

The target attribute is another important aspect of links. It controls where the linked
document will open. Most browsers support the _blank and _self targets. The _blank
target opens the link in a new tab, providing a way for users to keep the current page open
while exploring the new one. On the other hand, the _self target opens the link in the same
tab, replacing the current page.

There are two main types of links in HTML: absolute links and relative links. Understanding the
difference between these two is crucial for effective web development.

Absolute Links

An absolute link contains the full URL, including the protocol (e.g., http , https ). This type of
link is used to link to external websites. Absolute links are straightforward and always point to
the same location, regardless of where they are used.

Example:

<a href="[Link] is an absolute link</a>

Relative Links

A relative link, in contrast, does not contain the full URL. Instead, it provides a path relative to
the current page's location. This type of link is particularly useful for linking to other pages
within the same website. Relative links make it easier to manage internal links, especially when
moving files around within the site structure.

Example:

<a href="otherpages/[Link]">This is a relative link</a>

localhost:3000/[Link] 52/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Target Attribute

The target attribute specifies where to open the linked document. The most common values
are _blank and _self .

_blank : Opens the link in a new tab.

_self : Opens the link in the same tab.

Examples:

<a href="[Link] target="_blank">This page opens in another tab</a>

<a href="[Link] target="_self">This page opens in the current tab</a>

By mastering these concepts, you can create and manage links in your HTML documents
effectively. Whether you are linking to external resources or navigating within your own site,
understanding how to use absolute and relative links, as well as the target attribute, will
enhance your web development skills.

localhost:3000/[Link] 53/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Iframes
Iframes in HTML are a powerful tool that allows you to embed another web page within your
current page. This feature is particularly useful when you want to display content from an
external source, such as a video, map, or social media feed, directly on your website.

Basic Usage
To add an iframe to your web page, you use the <iframe> tag and specify the source URL
using the src attribute. Here is a simple example:

<iframe src="[Link]

This code will embed the web page located at [Link] into your current
page.

Customizing Appearance and Behavior

You can customize the appearance and behavior of the iframe using various attributes:

Width and Height: You can set the dimensions of the iframe using the width and
height attributes. For example:

<iframe src="[Link] width="500" height="300"></iframe>

Border: The frameborder attribute controls the presence of a border around the iframe.
Setting it to 0 removes the border, while 1 adds it:

<iframe src="[Link] frameborder="0"></iframe>

Scrolling: The scrolling attribute specifies whether the iframe should have scrollbars.
You can set it to yes , no , or auto :

<iframe src="[Link] scrolling="no"></iframe>

localhost:3000/[Link] 54/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Fullscreen: The allowfullscreen attribute allows the iframe to be viewed in fullscreen

mode:

<iframe src="[Link] allowfullscreen></iframe>

Security Considerations
When embedding content from another source, it is crucial to ensure that the source URL is
secure and trustworthy. This helps prevent security risks such as man-in-the-middle attacks.
Using HTTPS is highly recommended for this purpose.

Advanced Features
Sandboxing: The sandbox attribute adds an extra layer of security by restricting the
actions that the embedded content can perform. For example, you can disallow scripts or
forms by specifying the appropriate restrictions:

<iframe src="[Link] sandbox="allow-scripts"></iframe>

Cross-Origin Resource Sharing (CORS): If the embedded content needs to interact with
your page, ensure that the server hosting the iframe content has the proper CORS
headers set.

Responsive Iframes: To make iframes responsive, you can use CSS to adjust their size
based on the viewport. For instance, the following CSS makes an iframe responsive:

.responsive-iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

And you can apply this class to your iframe like so:

<iframe src="[Link] class="responsive-iframe"></iframe>

localhost:3000/[Link] 55/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

By understanding and utilizing these features, you can effectively embed and manage iframes
within your web pages, enhancing the user experience by seamlessly integrating external
content.

localhost:3000/[Link] 56/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Images
Images in HTML are embedded using the <img> tag. Unlike most other elements, the <img>
tag is self-closing, meaning it does not have a closing tag. This is because it does not contain
any content within it, only attributes that define the image source and other properties.

Attributes of the <img> Tag

The <img> tag comes with several attributes that you can use to specify the image source and
other properties:

src : This attribute specifies the path to the image you want to display. It can be an
absolute URL (link to an online image) or a relative URL (link to an image within your
project directory).
alt : This attribute provides alternative text for the image if it cannot be displayed. It is
important for accessibility and SEO.
width and height : These attributes define the dimensions of the image.

Examples

Relative Link

A relative link points to an image located within the same directory or a subdirectory of the
HTML file. This is useful for images that are part of your project.

<h1>This is a relative link to an image located within the same directory as the
HTML file.</h1>
<img src="[Link]" alt="Image of America" width="500" height="300" />

Absolute Link

An absolute link points to an image hosted on an external server. This is useful for images that
are not part of your project.

localhost:3000/[Link] 57/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<h1>This is an absolute link to an online image</h1>

<img src="[Link]
alt="Flag of Canada" width="500" height="300" />

Best Practices
When using images in your HTML documents, consider the following best practices:

Always include the alt attribute: This improves accessibility for users who rely on
screen readers and also benefits your site's SEO.
Use relative links for project images: This ensures that images are included when the
project is moved or shared.
Use absolute links for external images: This can help reduce the size of your project by
not including large image files.
Specify the width and height attributes: This controls the display size of the image
and can improve page load times by allowing the browser to allocate space for the image
before it loads.

By following these guidelines, you can effectively use images in your HTML documents to
enhance the visual appeal and user experience of your web pages.

localhost:3000/[Link] 58/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Tables
In this section, we will explore the use of tables in HTML, which are essential for displaying data
in a structured format of rows and columns. Understanding how to create and style tables will
enable you to present information clearly and effectively on your web pages.

Table Elements

Tables in HTML are composed of several key elements, each serving a specific purpose:

The <table> tag represents the table element and contains all other table elements.
The <th> tag represents the table header element. It is used to define the header cells in
the table, which are typically displayed in bold and centered.
The <tr> tag represents the table row element. It is used to define a row in the table and
typically contains the table header ( <th> ) and table data ( <td> ) elements.
The <td> tag represents the table data element. It is used to define a cell in the table that
contains data.

Table Borders

By default, HTML tables do not have borders. To add borders to your table, you can use CSS.
For example, you can add a border to the table, table rows, and table cells using the border
property in CSS.

Example: Creating a Simple Table

Let's create a simple HTML table to display student names and their scores. Here is the HTML
code:

localhost:3000/[Link] 59/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<table>
<tr>
<th>Student</th>
<th>Score</th>
</tr>
<tr>
<td>Maria</td>
<td>8</td>
</tr>
<tr>
<td>Jeff</td>
<td>4</td>
</tr>
<tr>
<td>Kaden</td>
<td>10</td>
</tr>
</table>

Adding Borders with CSS

To enhance the appearance of our table, we can add borders using CSS. Here is the CSS code to
achieve this:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}

This CSS will add a 1-pixel solid black border around the table, table headers, and table data
cells. The border-collapse: collapse; property ensures that the borders are collapsed into a
single border, making the table look cleaner. The padding property adds space inside each
cell, and the text-align property aligns the text to the left.

Summary

Tables are a powerful way to display data in a structured format. By understanding the basic
table elements and how to style them with CSS, you can create clean and organized tables for
your web pages. This knowledge will help you present information in a clear and professional
manner, enhancing the overall user experience.

localhost:3000/[Link] 60/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Lists

Ordered Lists

Ordered lists are a great way to present items in a specific sequence. They use the <ol>
element, and each item within the list is wrapped in an <li> element. By default, the items are
numbered starting from 1, making it perfect for instructions, rankings, or any scenario where
the order matters.

Here's an example of an ordered list in HTML:

<h2>This is an ordered list</h2>

<ol>
<li>This is number 1</li>
<li>This is number 2</li>
<li>This is number 3</li>
</ol>

If you need to start the numbering from a different value, you can use the start attribute:

<h2>This is an ordered list starting from 5</h2>

<ol start="5">
<li>This is number 5</li>
<li>This is number 6</li>
<li>This is number 7</li>
</ol>

Unordered Lists

Unordered lists are used when the order of items is not important. They use the <ul>
element, and each item is also wrapped in an <li> element. Instead of numbers, each item is
typically prefixed with a bullet point.

Here's an example of an unordered list in HTML:

<h2>This is an unordered list</h2>

<ul>
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
</ul>

localhost:3000/[Link] 61/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

You can customize the bullet points using CSS to change their appearance:

<h2>This is a customized unordered list</h2>

<ul style="list-style-type: square;">
<li>This is item 1</li>
<li>This is item 2</li>
<li>This is item 3</li>
</ul>

Description Lists

Description lists are ideal for defining terms and their descriptions. They use the <dl>
element, with each term wrapped in a <dt> element and each description in a <dd> element.
This format is particularly useful for glossaries, definitions, or metadata.

Here's an example of a description list in HTML:

<h2>This is a description list</h2>

<dl>
<dt>Espresso</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

You can also group multiple descriptions under a single term:

<h2>This is a grouped description list</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dd>- can be served with milk</dd>
<dt>Tea</dt>
<dd>- hot drink</dd>
<dd>- can be served with lemon</dd>
</dl>

localhost:3000/[Link] 62/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Identifiers
Classes and IDs are important concepts in HTML for styling and targeting elements.

In HTML, you can assign a class or an ID to an element using the class and id attributes,
respectively.

Classes
Classes in HTML are used to group multiple elements together, allowing you to apply the same
styles to all of them. This is particularly useful when you want to maintain a consistent look and
feel across different parts of your web page. To assign a class to an element, you use the
class attribute followed by the class name. For example:

<div class="my-class">This is a div with a class</div>

One of the key characteristics of classes is that they are not unique. This means you can use
the same class on multiple elements, which is beneficial for applying the same styles to a group
of elements. Consider the following example:

<p class="my-class">This is a paragraph with a class</p>

<span class="my-class">This is a span with the same class</span>

In CSS, you can target elements with a specific class using the dot notation. This allows you to
define styles that will be applied to all elements with that class. For example:

.my-class {
color: red;
}

Additionally, you can assign multiple classes to a single element by separating the class names
with a space. This enables you to combine different styles. For example:

<div class="class1 class2">This div has two classes</div>

In CSS, you can target elements with multiple classes by chaining the class selectors together.
For example:

localhost:3000/[Link] 63/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.class1.class2 {
background-color: yellow;
}

IDs
IDs in HTML are used to uniquely identify a specific element on a page. This uniqueness is
crucial when you need to target a particular element precisely. To assign an ID to an element,
you use the id attribute followed by the ID name. For example:

<p id="my-id">This is a paragraph with an ID</p>

Unlike classes, IDs must be unique within a page, meaning no two elements should share the
same ID. This uniqueness allows you to target a specific element with precision. In CSS, you can
target elements with a specific ID using the hash notation. For example:

#my-id {
font-size: 20px;
}

IDs are also commonly used in JavaScript to manipulate specific elements. For instance, you
can use [Link]('my-id') to select an element with a particular ID.

Best Practices
When working with classes and IDs, it's important to follow some best practices to ensure your
code is clean and maintainable:

Use classes for styling multiple elements and IDs for unique elements.
Avoid using IDs for styling when classes can achieve the same result.
Ensure IDs are unique within a page to avoid conflicts.
Use meaningful names for classes and IDs to make your code more readable.

By using classes and IDs effectively in HTML, you can apply styles and manipulate specific
elements, making your web pages more dynamic and visually appealing.

localhost:3000/[Link] 64/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Symbols
In the world of HTML, symbols hold a special place. These symbols, known as entities, are
characters that have reserved meanings within the HTML language. They are represented using
entity references, which always start with an ampersand ( & ) and end with a semicolon ( ; ).
These entities are essential for displaying characters that might otherwise be interpreted as
HTML code.

Let's explore some of the most commonly used entities in HTML:

&lt; stands for the less-than symbol ( < ).

&gt; stands for the greater-than symbol ( > ).
&amp; stands for the ampersand symbol ( & ).
&quot; stands for the double quotation mark ( " ).
&apos; stands for the single quotation mark ( ' ).

These entities are incredibly useful when you need to display special characters in your HTML
documents without them being mistaken for actual HTML code. This is particularly handy when
you want to include HTML code examples within your web pages.

For instance, if you want to display the less-than symbol ( < ) in your HTML, you can use the
entity reference &lt; like this: &lt;p&gt;This is a paragraph.&lt;/p&gt; . This will render
as <p>This is a paragraph.</p> in the browser, allowing you to show the HTML tags without
them being processed.

Beyond these basic entities, HTML supports a vast array of other entities for various symbols,
including mathematical operators, currency symbols, and accented characters. Here are a few
examples:

&copy; stands for the copyright symbol ( © ).

&euro; stands for the euro currency symbol ( € ).
&trade; stands for the trademark symbol ( ™ ).
&alpha; stands for the Greek letter alpha ( α ).
&beta; stands for the Greek letter beta ( β ).

Using these entities ensures that your content is displayed correctly across different browsers
and platforms. It also helps prevent issues with character encoding, as these entities are
universally recognized.

A crucial point to remember is to always end entity references with a semicolon ( ; ). This
ensures proper rendering in all browsers. Omitting the semicolon can lead to unexpected
results, as the browser may not correctly interpret the entity.
localhost:3000/[Link] 65/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In summary, HTML entities are a powerful tool for including special characters in your web
pages. By using entity references, you can ensure that your content is displayed as intended,
without being misinterpreted as HTML code.

localhost:3000/[Link] 66/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Favicons
Favicons are those tiny yet significant icons displayed in the browser tab or bookmark bar,
representing a website. They play a crucial role in helping users quickly identify and
differentiate between various websites. Despite their small size, favicons contribute to the
overall branding and user experience of a website.

To incorporate a favicon into your website, follow these detailed steps:

1. Create a Favicon Image: Begin by designing a square image that embodies your
website's brand or logo. The most common sizes are 16x16 pixels and 32x32 pixels, but
you can also create larger versions for high-resolution displays. Save this image in a
widely-used format such as PNG, ICO, or SVG. Tools like Adobe Photoshop, GIMP, or
online favicon generators can help you create and optimize your favicon.

2. Place the Favicon Image in the Root Directory: Upload your favicon image to your
website's root directory, which is usually the same directory where your [Link] file
resides. This ensures that the browser can easily locate the favicon when loading your
website.

3. Add the Favicon Link Tag to Your HTML: Open your HTML file and find the <head>
section. Insert the following line of code between the <head> and </head> tags:

<link rel="icon" href="[Link]" type="image/x-icon">

Ensure you replace [Link] with the actual filename of your favicon image. If you
have multiple favicon sizes or formats, you can include additional link tags to specify each
one:

<link rel="icon" href="[Link]" sizes="32x32" type="image/png">

<link rel="icon" href="[Link]" sizes="16x16" type="image/png">

4. Test the Favicon: Save your HTML file and open it in a web browser. Your favicon should
now be visible in the browser tab or bookmark bar. If it doesn't appear, clear your
browser cache and refresh the page. You can also use online tools to check if your favicon
is correctly implemented.

5. Consider Adding a Favicon for Different Platforms: Modern websites often include
favicons for various platforms, such as iOS, Android, and Windows. These platforms may
require different sizes and formats. You can use a tool like RealFaviconGenerator to

localhost:3000/[Link] 67/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

create a comprehensive set of favicons and the corresponding HTML code to include in
your website.

By following these steps, you have successfully added a favicon to your website. This small
addition can significantly enhance the overall user experience by providing a visual cue that
helps users recognize your site more easily. Additionally, a well-designed favicon can reinforce
your brand identity and make your website stand out among others in bookmarks and browser
tabs.

localhost:3000/[Link] 68/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Audio
The <audio> element is used to embed sound content in documents. It provides a standard
way to embed audio files with various controls and attributes to enhance the user experience.

Attributes

controls : This attribute adds audio controls, such as play, pause, and volume, to the
audio player.
autoplay : When present, the audio will automatically start playing as soon as it is ready.
loop : This attribute causes the audio to start over again, every time it is finished.
muted : This attribute mutes the audio by default.
preload : This attribute specifies if and how the author thinks the audio should be loaded
when the page loads. It can have the following values:
none : The audio should not be loaded when the page loads.
metadata : Only metadata should be loaded when the page loads.
auto : The audio should be loaded entirely when the page loads.

The <source> element

The <source> element is used to specify multiple media resources for the <audio> element. It
allows the browser to choose the best format that it supports. The src attribute specifies the
path to the audio file, and the type attribute specifies the MIME type of the audio file.

Example

<audio controls autoplay>

<source src="[Link]" type="audio/ogg">
<source src="dog.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

In this example, the <audio> element includes the controls and autoplay attributes. Two
<source> elements are nested inside the <audio> element, providing the audio in both OGG
and MP3 formats. The text "Your browser does not support the audio element." is displayed if
the browser does not support the <audio> element.

localhost:3000/[Link] 69/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Result

0:00 / 0:00

Browser Support

The <audio> element is supported by all modern browsers, but not all browsers support the
same audio formats. It is a good practice to provide multiple formats to ensure compatibility
across different browsers.

Accessibility

To make audio content accessible, consider providing text transcripts or captions for users who
are deaf or hard of hearing. Additionally, ensure that the audio controls are keyboard
accessible for users who rely on keyboard navigation.

Conclusion

The <audio> element is a powerful tool for embedding audio content in web pages. By using
various attributes and providing multiple audio formats, you can create a flexible and
accessible audio experience for users.

localhost:3000/[Link] 70/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Video
Just like with the audio element, the source is defined within the <source> element. In order to
play video on most browsers, it is also required that the type attribute be defined. This
attribute specifies the MIME type of the video file, which helps the browser determine if it can
play the file.

The <video> element supports various attributes:

width and height : Define the dimensions of the video player.

controls : Adds video controls like play, pause, and volume.
autoplay : Starts playing the video as soon as it is ready.
loop : Makes the video start over again, every time it is finished.
muted : Mutes the audio of the video by default.

Here is an example of a basic video element with multiple sources:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

In this example:

The width and height attributes set the size of the video player.
The controls attribute adds playback controls.
Two <source> elements are provided, each with a different video format ( mp4 and ogg ).
This ensures better compatibility across different browsers.
The text "Your browser does not support the video tag." is displayed if the browser does
not support the <video> element.

By using multiple <source> elements, you can provide different video formats to ensure that
your video plays on various browsers and devices.

localhost:3000/[Link] 71/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Learning To Code

CSS

localhost:3000/[Link] 72/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Basics Of CSS
Internal CSS is a way to include CSS styles directly within an HTML document. It is defined
within the <style> tags in the <head> section of the HTML file. This allows you to apply styles
specifically to that HTML document.

Example of Internal CSS:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is an example of internal CSS.</p>
</body>
</html>

External CSS is a separate file that contains all the CSS styles for your website. It is linked to the
HTML document using the <link> tag in the <head> section. This approach allows you to keep
your CSS code separate from your HTML code, making it easier to maintain and reuse styles
across multiple HTML files.

Example of External CSS: HTML file ( [Link] ):

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is an example of external CSS.</p>
</body>
</html>

CSS file ( [Link] ):

localhost:3000/[Link] 73/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

body {
background-color: lightblue;
}
h1 {
color: red;
}

Inline CSS is applied directly to individual HTML elements using the style attribute. This allows
you to define styles inline with the HTML tags themselves. While it can be useful for making
quick style changes, it is generally not recommended for larger projects as it can make the
HTML code harder to read and maintain.

Example of Inline CSS:

<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">Welcome to my website!</h1>
<p style="font-size: 18px;">This is an example of inline CSS.</p>
</body>
</html>

By using these different types of CSS, you have the flexibility to choose the most appropriate
approach for your specific needs.

localhost:3000/[Link] 74/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Syntax
CSS (Cascading Style Sheets) is a powerful stylesheet language that plays a crucial role in web
development. It is used to describe the presentation of a document written in HTML or XML,
dictating how elements should be rendered on various media such as screens, paper, or even
in speech.

Basic Syntax
At the heart of CSS lies its basic syntax, which consists of a selector and a declaration block:

selector {
property: value;
}

Selector: This part of the rule targets the HTML element(s) you wish to style.
Declaration Block: Enclosed in curly braces, this block contains one or more declarations
separated by semicolons. Each declaration pairs a CSS property with a value, separated by
a colon.

Example

Consider the following example:

h1 {
color: blue;
font-size: 20px;
}

In this snippet, h1 is the selector, and color: blue; and font-size: 20px; are the
declarations that style the h1 element.

Selectors
Selectors are fundamental in CSS as they determine which HTML elements are targeted for
styling. There are several types of selectors:

localhost:3000/[Link] 75/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Element Selector: Targets elements by their tag name.

p {
color: red;
}

Class Selector: Targets elements by their class attribute.

.classname {
color: green;
}

ID Selector: Targets elements by their id attribute.

#idname {
color: blue;
}

Attribute Selector: Targets elements based on an attribute or attribute value.

[type="text"] {
border: 1px solid black;
}

Pseudo-class Selector: Targets elements based on their state.

a:hover {
color: orange;
}

Pseudo-element Selector: Targets parts of elements.

p::first-line {
font-weight: bold;
}

localhost:3000/[Link] 76/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Properties and Values

CSS properties are used to apply styles to elements, and each property can take a range of
values. Here are some common properties:

color: Sets the color of the text.

color: red;

background-color: Sets the background color of an element.

background-color: yellow;

font-size: Sets the size of the font.

font-size: 16px;

margin: Sets the space outside an element.

margin: 10px;

padding: Sets the space inside an element.

padding: 10px;

border: Sets the border around an element.

border: 1px solid black;

Cascading and Specificity

The "Cascading" in CSS stands for the way styles cascade down from multiple sources, with the
order and specificity of the rules determining which styles are applied.

Cascading: When multiple rules apply to the same element, the rule that appears last in
the CSS file takes precedence.
Specificity: This concept determines which rule is applied by assigning weights to
different types of selectors. ID selectors have higher specificity than class selectors, which

localhost:3000/[Link] 77/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

in turn have higher specificity than element selectors.

Example of Specificity

p {
color: red;
}

#unique {
color: blue;
}

<p id="unique">This text will be blue.</p>

In this example, although the p selector sets the color to red, the #unique ID selector
overrides it and sets the color to blue due to its higher specificity.

Inheritance
CSS properties can be inherited from parent elements to child elements. For instance, if you set
the color property on a parent element, its child elements will inherit that color unless they
have their own color property set.

Example of Inheritance

div {
color: green;
}

<div>
This text will be green.
<p>This text will also be green.</p>
</div>

In this example, both the div and the p elements will have green text because the color
property is inherited.

localhost:3000/[Link] 78/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Conclusion
Mastering CSS syntax is essential for creating visually appealing web pages. By understanding
selectors, properties, values, cascading, specificity, and inheritance, you can precisely control
the presentation of your HTML documents, ensuring a polished and professional look.

localhost:3000/[Link] 79/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Comments
Comments in CSS are a way to add notes or explanations to your code that are not interpreted
by the browser. They are useful for documenting your styles or temporarily disabling a block of
code.

To add a comment in CSS, you can use the /* */ syntax. Anything between these two symbols
will be ignored by the browser when rendering the page.

Here's an example of a CSS comment:

/* This is a comment */

You can also use comments to provide additional information about specific styles or sections
of your code. This can be helpful for yourself or other developers who may need to understand
or modify your code in the future.

It's important to note that comments should be used sparingly and only when necessary. Too
many comments can clutter your code and make it harder to read and maintain.

Remember to always start and end your comments with /* and */ respectively, and keep
them concise and relevant to the code they are associated with.

localhost:3000/[Link] 80/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Colors
In CSS the color attribute can be used to change the color of text on the page.

Example

p {
color: "red";
}

In this example, all text within the <p> element turn red.

localhost:3000/[Link] 81/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Backgrounds
In CSS background properties are used to add different background effects to different
elements on a page.

The background-color attribute affects what color will appear in the background of the
element.

Example

h2 {
width: 100%;
text-align:center;
background-color: "red";
}

The background-image property specifies the image that will be used as the background for
your chosen element.

Example

h2 {
width: 100%;
text-align:center;
background-image: url("[Link]");
}

By default this image will repeat so that it covers the entire element.

localhost:3000/[Link] 82/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Borders
In CSS border width can be specified by setting the border-width property

Example

header {
border-width: 5px;
}

Setting border color can be done by specifying the border-color property as shown below.

Example

header {
border-color: "red";
}

The border-style property controls whether the border is dotted, dashed, solid, etc. This can
be done in the same manner as shown below.

Example

header {
border-style: "dotted";
}

Border properties can be specified using shorthand as shown below.

Example

header {
border: 1px solid black;
}

This will create a border that is 1 pixel thick, and solid black.

localhost:3000/[Link] 83/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Dimensions
In CSS, an objects dimensions can be specified using the width and height properties.

Example

p {
width: 500px;
height: 700px;
}

Furthermore, these properties can use the vw , vy , and % units. The vw unit changes an
elements width to the number of pixels that occupies the given numbers percentage of the
screen width. For example if the width is 50vw the object will take up 50% of the screens width.

Example

This shows a paragraph that has a height and width equal to that of the screens total width.

p {
width: 50vw;
height: 50vw;
}

One can also specify the height and width properties as a percentage

Example

p {
width: 50%;
height: 50%;
}

localhost:3000/[Link] 84/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Align
In CSS the text-align property controls whether text appears in the left, center, or right side
within its element.

Example

/* This aligns the text to the left */

p {
text-align: left;
}
/* This aligns the text to the center */
p {
text-align: center;
}
/* This aligns the text to the right */
p {
text-align: right;
}

localhost:3000/[Link] 85/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Margins
In CSS, margins control the space outside an element's border, creating space between the
element and its neighboring elements. Margins can be set for each side of an element (top,
right, bottom, and left) using individual properties or a shorthand property.

Individual Margin Properties

There are four individual properties to specify an element's margin:

margin-top : Sets the top margin of an element.

margin-right : Sets the right margin of an element.
margin-bottom : Sets the bottom margin of an element.
margin-left : Sets the left margin of an element.

Example

p {
margin-top: 3px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 3px;
}

Shorthand Margin Property

The shorthand margin property allows you to set all four margins at once. It can take one to
four values:

One value: Applies to all four sides.

Two values: The first value applies to the top and bottom, and the second value applies
to the right and left sides.
Three values: The first value applies to the top, the second to the right and left sides, and
the third to the bottom.
Four values: The values apply to the top, right, bottom, and left sides respectively.

localhost:3000/[Link] 86/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

One Value

When one value is specified, the margin applies to all four sides.

Example

p {
margin: 50px;
}

Two Values

When two values are specified, the first value applies to the top and bottom, and the second
value applies to the right and left sides.

Example

p {
margin: 50px 20px;
}

Three Values

When three values are specified, the first value applies to the top, the second to the right and
left sides, and the third to the bottom.

Example

p {
margin: 50px 20px 30px;
}

Four Values

When four values are specified, the first value applies to the top, the second to the right, the
third to the bottom, and the fourth to the left side.

localhost:3000/[Link] 87/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Example

p {
margin: 50px 20px 30px 50px;
}

Negative Margins
Margins can also be negative, which can pull elements closer together or even overlap them.

Example

p {
margin-top: -10px;
}

Auto Margins
The margin property can take the value auto , which is commonly used for centering elements
horizontally.

Example

div {
width: 50%;
margin: 0 auto;
}

In this example, the div element will be centered horizontally within its container.

Margin Collapsing
In CSS, vertical margins between adjacent block-level elements sometimes collapse, meaning
the larger of the two margins is used. This can affect the layout and spacing of elements.

localhost:3000/[Link] 88/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Example

<style>
.element1 {
margin-bottom: 20px;
}
.element2 {
margin-top: 30px;
}
</style>

<div class="element1">Element 1</div>

<div class="element2">Element 2</div>

In this example, the margin between element1 and element2 will be 30px, not 50px, due to
margin collapsing.

Understanding how margins work in CSS is crucial for creating well-structured and visually
appealing web layouts. By mastering both individual and shorthand margin properties, as well
as concepts like negative margins, auto margins, and margin collapsing, you can have precise
control over the spacing and alignment of elements on your web pages.

localhost:3000/[Link] 89/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Padding

Understanding Padding in CSS

Padding is a fundamental concept in CSS that controls the distance between an element's inner
content and its border. This property is essential for managing the spacing within elements,
ensuring that content is visually appealing and readable. In this chapter, we will delve deep into
the padding property, exploring its syntax, various units, and how it interacts with other CSS
properties.

The Syntax of Padding

The padding property can be specified in multiple ways, using one, two, three, or four values.
Each value represents the padding for one or more sides of the element.

Single Value

When a single value is specified, the padding applies uniformly to all four sides (top, right,
bottom, and left).

Example

p {
padding: 50px;
}

In this example, the paragraph element will have 50px of padding on all sides, creating a
consistent space around the content.

Two Values

When two values are specified, the first value applies to the top and bottom, while the second
value applies to the right and left sides.

localhost:3000/[Link] 90/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Example

p {
padding: 50px 20px;
}

Here, the paragraph element will have 50px of padding on the top and bottom, and 20px on
the right and left sides, providing a balanced yet varied spacing.

Three Values

When three values are specified, the first value applies to the top, the second to the right and
left sides, and the third to the bottom.

Example

p {
padding: 50px 20px 30px;
}

In this case, the paragraph element will have 50px of padding on the top, 20px on the right and
left sides, and 30px on the bottom, creating a more complex spacing pattern.

Four Values

When four values are specified, the first value applies to the top, the second to the right, the
third to the bottom, and the fourth to the left side.

Example

p {
padding: 50px 20px 30px 40px;
}

For this example, the paragraph element will have 50px of padding on the top, 20px on the
right, 30px on the bottom, and 40px on the left side, allowing for precise control over the
element's padding.

localhost:3000/[Link] 91/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Exploring Different Units for Padding

Padding can be specified using various units, such as pixels ( px ), ems ( em ), percentages ( % ),
and more. Each unit has its unique use case depending on the design requirements.

Example with Pixels

div {
padding: 10px 20px 30px 40px;
}

Pixels provide a fixed and precise measurement, making them ideal for designs that require
exact spacing.

Example with Percentages

div {
padding: 5% 10% 15% 20%;
}

Percentages are relative to the parent element's width, allowing for responsive designs that
adapt to different screen sizes.

Example with Ems

div {
padding: 1em 2em 3em 4em;
}

Ems are relative to the font size of the element, making them useful for scalable designs that
maintain proportional spacing.

Combining Padding with Other CSS Properties

Padding is often used in conjunction with other CSS properties such as margin , border , and
width to create well-structured and visually appealing layouts.

localhost:3000/[Link] 92/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Example

div {
padding: 20px;
margin: 10px;
border: 1px solid black;
width: 200px;
}

In this example, the div element has padding, margin, a border, and a specified width,
creating a clear and defined space around the content. This combination of properties helps in
achieving a balanced and aesthetically pleasing design.

Conclusion

Understanding and using the padding property effectively is crucial for creating well-designed
web pages. By controlling the space within elements, you can enhance the readability and
overall aesthetics of your site. Experiment with different values and units to see how they affect
your layout and find the best combination for your design needs. Mastering padding will
empower you to create visually appealing and user-friendly web designs.

localhost:3000/[Link] 93/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Text
In this section, we will explore various techniques to style text using CSS. Text styling is a
fundamental aspect of web design, and mastering it can significantly enhance the visual appeal
of your web pages.

Color

The color property in CSS allows you to change the color of text. This property accepts various
types of values, including color names, hexadecimal values, RGB, RGBA, HSL, and HSLA. Let's
start with a simple example using a named color:

p {
color: blue;
}

For more precise color control, you can use hexadecimal values:

p {
color: #1e90ff;
}

RGB and RGBA values offer dynamic color settings:

p {
color: rgb(30, 144, 255);
}

p {
color: rgba(30, 144, 255, 0.8);
}

HSL and HSLA values allow you to define colors based on hue, saturation, and lightness:

p {
color: hsl(207, 100%, 50%);
}

p {
color: hsla(207, 100%, 50%, 0.8);
}

localhost:3000/[Link] 94/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Alignment

Text alignment within its container is controlled using the text-align property. This property
can take several values, including left , right , center , justify , and start or end for
more flexible alignment based on the writing mode. For example, to center text:

h1 {
text-align: center;
}

To justify text, aligning it to both the left and right margins:

p {
text-align: justify;
}

Decoration

Text decoration properties add visual effects to text. The text-decoration property is
shorthand for setting text-decoration-line , text-decoration-color , text-decoration-
style , and text-decoration-thickness . For example, to underline or strike through text:

a {
text-decoration: underline;
}

del {
text-decoration: line-through;
}

You can also customize the color and style of the decoration:

a {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

Transformation

Text transformation properties change the case of text. The text-transform property can take
values such as uppercase , lowercase , capitalize , and none . For example, to make text

localhost:3000/[Link] 95/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

uppercase or lowercase:

h2 {
text-transform: uppercase;
}

p {
text-transform: lowercase;
}

To capitalize the first letter of each word:

h3 {
text-transform: capitalize;
}

Spacing

Control the spacing between characters and words using the letter-spacing and word-
spacing properties. letter-spacing adjusts the space between characters, while word-
spacing adjusts the space between words. For example:

h3 {
letter-spacing: 2px;
}

p {
word-spacing: 5px;
}

For more precise control, use negative values to decrease spacing:

h3 {
letter-spacing: -1px;
}

Shadow

Add a shadow effect to text using the text-shadow property. This property accepts values for
horizontal offset, vertical offset, blur radius, and color. For example:

localhost:3000/[Link] 96/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

h4 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Add multiple shadows by separating them with commas:

h4 {
text-shadow: 1px 1px 2px black, 0 0 5px blue;
}

Advanced Techniques

Gradients

Apply gradients to text using the background property in combination with -webkit-
background-clip and -webkit-text-fill-color :

h1 {
background: linear-gradient(to right, red, orange, yellow, green, blue,
indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Clipping and Masking

Text can be clipped or masked using CSS properties like clip-path and mask-image :

h2 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

h3 {
mask-image: url('[Link]');
}

These advanced techniques allow for creative and visually appealing text effects, enhancing the
overall design of your web pages.

localhost:3000/[Link] 97/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Links
Links in CSS allow you to style and customize the appearance of hyperlinks on your web page.
By using various CSS properties, you can change the color, font, size, and other visual aspects
of links to enhance the user experience and maintain a consistent design throughout your site.

Basic Link Styling

Here's an example of how you can style links in CSS:

/* Styling the default link color */

a {
color: blue;
}

/* Styling the link hover effect */

a:hover {
color: red;
}

/* Styling the visited link color */

a:visited {
color: purple;
}

/* Styling the active link color */

a:active {
color: green;
}

In the above example, the a selector targets all anchor elements (links) on the page. The
color property is used to change the link color. The :hover pseudo-class is used to apply
styles when the link is being hovered over. The :visited pseudo-class is used to style visited
links, and the :active pseudo-class is used to style links when they are being clicked.

Advanced Link Styling

You can also apply other CSS properties like text-decoration , font-size , and font-weight
to further customize the appearance of links. Here are some examples:

localhost:3000/[Link] 98/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

/* Removing the underline from links */

a {
text-decoration: none;
}

/* Adding an underline only on hover */

a:hover {
text-decoration: underline;
}

/* Changing the font size and weight of links */

a {
font-size: 16px;
font-weight: bold;
}

Using CSS Variables for Link Styling

CSS variables can be used to maintain consistency and make it easier to update styles across
your site. Here's an example:

:root {
--link-color: blue;
--link-hover-color: red;
--link-visited-color: purple;

--link-active-color: green;
}

a {
color: var(--link-color);
}

a:hover {
color: var(--link-hover-color);
}

a:visited {
color: var(--link-visited-color);
}

a:active {
color: var(--link-active-color);
}

localhost:3000/[Link] 99/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Responsive Link Styling

To ensure that your links look good on all devices, you can use media queries to apply different
styles based on the screen size:

/* Default link styles */

a {
color: blue;
font-size: 16px;
}

/* Larger font size for larger screens */

@media (min-width: 768px) {
a {
font-size: 18px;
}
}

/* Even larger font size for very large screens */

@media (min-width: 1200px) {
a {
font-size: 20px;
}
}

Conclusion
Styling links with CSS is a powerful way to enhance the visual appeal and usability of your web
pages. By using a combination of basic and advanced CSS properties, CSS variables, and
responsive design techniques, you can create a consistent and engaging user experience.
Remember to place your CSS code within a <style> tag in your HTML document or in an
external CSS file linked to your HTML using the <link> tag.

localhost:3000/[Link] 100/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

List Customization in CSS

CSS provides a wide range of options for customizing lists. You can modify the appearance of
list items, change bullet styles, and even create your own custom markers. Let's explore some
of these customization techniques in detail.

Changing Bullet Styles

The default bullet style of an unordered list can be changed using the list-style-type
property. This property allows you to specify different types of bullet points, such as circles,
squares, or none. For example, to use square bullets, you can add the following CSS rule:

ul {
list-style-type: square;
}

Other possible values for list-style-type include disc , circle , and none . Each of these
values changes the appearance of the bullet points in the list.

Changing Bullet Styles in Depth

The list-style-type property is a versatile tool in CSS that allows you to control the
appearance of list item markers. By default, unordered lists ( <ul> ) use a disc-shaped bullet,
but this can be easily changed to suit your design needs. For instance, if you prefer a square
bullet, you can set the list-style-type to square :

ul {
list-style-type: square;
}

This simple change can significantly alter the look and feel of your lists, making them more
aligned with your design preferences.

localhost:3000/[Link] 101/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Creating Custom Markers

CSS also allows you to create your own custom markers for lists. You can use images, icons, or
even Unicode characters as markers. This can be achieved using the list-style-image
property. Here's an example of using a custom image as a bullet:

ul {
list-style-image: url('[Link]');
}

In addition to images, you can use the ::before pseudo-element to add custom content
before each list item. For example, you can use Unicode characters to create unique markers:

ul li::before {
content: '\2022'; /* Unicode for bullet */
color: red; /* Custom color for the bullet */
font-size: 20px; /* Custom size for the bullet */
margin-right: 10px; /* Space between bullet and text */
}

Advanced List Customization

For more advanced customization, you can combine multiple CSS properties and techniques.
For example, you can use the counter-reset and counter-increment properties to create
custom counters for list items:

[Link]-counter {
counter-reset: custom-counter;
}

[Link]-counter li {
counter-increment: custom-counter;
}

[Link]-counter li::before {
content: counter(custom-counter) '. ';
font-weight: bold;
color: blue;
}

This example creates a custom counter for an ordered list, with each list item displaying a bold,
blue number followed by a period.

localhost:3000/[Link] 102/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Conclusion
With CSS, you have the power to customize lists in various ways. Whether you want to change
bullet styles, modify numbering formats, or create custom markers, CSS provides the flexibility
to make your lists visually appealing and unique. By combining different CSS properties and
techniques, you can achieve a wide range of effects and tailor the appearance of your lists to
match your design requirements.

localhost:3000/[Link] 103/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Position
The position property in CSS is a powerful tool that allows you to control the placement of
elements on a web page. By understanding and utilizing its five possible values, you can
manipulate the layout and behavior of elements to create dynamic and visually appealing
designs.

1. static

The static value is the default for the position property. Elements with position: static
are positioned according to the normal flow of the document. They are unaffected by the top ,
bottom , left , right , or z-index properties. This means that the element will appear in the
order it is written in the HTML, maintaining its default position without any offsets.

2. relative

When you set an element's position to relative , it is positioned relative to its normal position
in the document flow. You can then use the top , bottom , left , and right properties to
offset the element from its original position. Importantly, this does not affect the layout of
other elements on the page; they will still behave as if the relative element is in its original
position.

Example:

.my-element {
position: relative;
top: 20px;
left: 10px;
}

In this example, .my-element will be moved 20px down and 10px to the right from where it
would normally be.

3. fixed

Elements with position: fixed are positioned relative to the viewport, meaning they will
always stay in the same place even if the page is scrolled. This is particularly useful for creating
elements that need to remain visible at all times, such as a fixed header or a floating action

localhost:3000/[Link] 104/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

button. The top , bottom , left , and right properties can be used to specify the exact
position of the element within the viewport.

Example:

.my-element {
position: fixed;
top: 0;
right: 0;
}

Here, .my-element will be fixed to the top-right corner of the viewport.

4. absolute

Elements with position: absolute are positioned relative to their nearest positioned
ancestor (i.e., the nearest ancestor with a position value other than static ). If there is no such
ancestor, the element will be positioned relative to the initial containing block, which is usually
the <html> element. The top , bottom , left , and right properties can be used to specify
the exact position of the element.

Example:

.container {
position: relative;
width: 200px;
height: 200px;
}

.my-element {
position: absolute;
top: 50px;
left: 50px;
}

In this example, .my-element will be positioned 50px from the top and 50px from the left of its
nearest positioned ancestor, which is .container .

Absolute positioning removes the element from the normal document flow, meaning it does
not affect the layout of other elements on the page. This can be useful for creating complex
layouts where elements need to overlap or be precisely placed within a container.

localhost:3000/[Link] 105/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

5. sticky

Elements with position: sticky are positioned based on the user's scroll position. They
behave like relative elements until the user scrolls to a certain point, at which they become
fixed and stay in place. This is useful for creating sticky headers or navigation bars that stick
to the top of the page when scrolling. The top , bottom , left , and right properties can be
used to specify the offset from the scrolling container.

Example:

.my-element {
position: sticky;
top: 20px;
}

In this example, .my-element will act as a relatively positioned element until the user scrolls
down 20px, at which point it will become fixed and stay 20px from the top of the viewport.

Additional Considerations

Z-Index: The z-index property can be used in conjunction with position to control the
stacking order of elements. Elements with a higher z-index will appear above those with
a lower z-index .
Containing Block: The containing block for an absolutely positioned element is the
nearest ancestor with a position other than static . For fixed elements, the containing
block is the viewport.
Overflow: Positioned elements can affect the overflow behavior of their containing block.
For example, an absolutely positioned element can extend outside the bounds of its
containing block if the overflow property is set to visible .

Mastering the position property and its values is crucial for creating complex layouts and
ensuring that elements behave as expected in different scenarios. By gaining a deep
understanding of these concepts, you can achieve greater control over the design and
functionality of your web pages.

localhost:3000/[Link] 106/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Z-Index
The z-index property in CSS is a powerful tool that controls the vertical stacking order of
elements that overlap on a webpage. This property is essential for managing the visibility and
layering of elements, ensuring that the most important content is accessible to users. However,
it only works on elements that have a position value other than static , such as relative ,
absolute , fixed , or sticky .

Understanding Stacking Contexts

To fully grasp the concept of z-index , it's crucial to understand stacking contexts. A stacking
context is an element that contains a group of layers with a specific stacking order. When an
element is positioned and has a z-index value other than auto , it forms a new stacking
context. Each stacking context is treated independently, meaning that elements within a
stacking context are stacked relative to each other without affecting the stacking order of
elements in other stacking contexts.

Creating a Stacking Context

There are several ways to create a new stacking context:

Setting a z-index value on a positioned element.

Applying an opacity value less than 1.
Using CSS properties like transform , filter , perspective , clip-path , and mask .

These properties not only create a new stacking context but also influence the rendering and
visual effects of the elements.

The Default Stacking Order

By default, elements on a webpage are stacked in a specific order from bottom to top:

1. The background and borders of the root element.

2. Descendant non-positioned elements in the order they appear in the HTML.
3. Descendant positioned elements in the order they appear in the HTML.

This default stacking order ensures that background elements are rendered first, followed by
non-positioned and then positioned elements.

localhost:3000/[Link] 107/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Practical Examples

To illustrate how z-index works, consider the following example:

.container {
position: relative;
}

.box1 {
position: absolute;
top: 20px;
left: 30px;
z-index: 1; /* This will appear below .box2 */
}

.box2 {
position: absolute;
top: 40px;
left: 50px;
z-index: 2; /* This will appear above .box1 */
}

In this example, .box2 will appear above .box1 because it has a higher z-index value. This
demonstrates how z-index can be used to control the layering of overlapping elements.

Using Negative Z-Index Values

Elements can also have a negative z-index , which places them behind other elements with a
z-index of 0 or higher. For example:

.background {
position: absolute;
top: 0;
left: 0;
z-index: -1; /* This will appear behind elements with z-index 0 or higher */
}

This technique is useful for creating background elements that should appear behind all other
content.

Practical Use Cases for Z-Index

The z-index property is particularly useful in various scenarios, such as:

localhost:3000/[Link] 108/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Modals and Popups: Ensuring they appear above other content to capture user
attention.
Tooltips: Displaying above other elements to provide additional information.
Overlapping Images: Controlling which image appears on top to create visually
appealing designs.

By mastering the z-index property, you can effectively manage the layering of elements on
your webpage, ensuring that the most important content is always visible and accessible to
users.

Understanding and using the z-index property effectively can help manage the layering of
elements on a webpage, ensuring that the most important content is visible and accessible to
users.

localhost:3000/[Link] 109/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Overflow

Understanding Overflow in CSS

In the world of web design, managing how content behaves when it exceeds the boundaries of
its container is a fundamental skill. This is where the concept of overflow in CSS comes into
play. The overflow property in CSS allows you to control the display of content that spills out of
its container, ensuring your designs remain both functional and visually appealing.

The overflow Property

The overflow property in CSS can be set to one of several values, each dictating a different
behavior for overflowing content:

1. visible (default): When set to visible , content is not clipped and may overflow its
container. This is the default behavior, meaning that if no overflow property is specified,
the content will be allowed to overflow the container.
2. hidden : Setting overflow to hidden clips the content that overflows, making it invisible.
This is useful when you want to hide any content that exceeds the container's boundaries.
3. scroll : With scroll , content that overflows is clipped, but a scrollbar is added to allow
scrolling. This ensures that all content can be accessed by the user, even if it exceeds the
container's size.
4. auto : The auto value clips content if it overflows and adds a scrollbar only if necessary.
This is a more flexible option compared to scroll , as it only adds a scrollbar when the
content actually overflows.

Detailed Examples

To better understand how the overflow property works, let's look at some examples:

localhost:3000/[Link] 110/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}

.container-overflow-visible {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: visible;
}

.container-overflow-scroll {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}

.container-overflow-auto {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
}

Explanation of Examples

1. Hidden Overflow:

.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}

In this example, the .container element has overflow: hidden , which means any
content that exceeds its dimensions will be clipped and not visible. This is useful for
creating clean layouts where excess content should not be displayed.

2. Visible Overflow:

localhost:3000/[Link] 111/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.container-overflow-visible {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: visible;
}

The .container-overflow-visible element has overflow: visible , allowing the

content to overflow and be visible outside the container. This can be useful for certain
design effects where overflow content is intentionally shown.

3. Scrollable Overflow:

.container-overflow-scroll {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}

The .container-overflow-scroll element has overflow: scroll , which adds a

scrollbar to the container when the content overflows. This ensures that all content can
be accessed by the user, even if it exceeds the container's size.

4. Auto Overflow:

.container-overflow-auto {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
}

The .container-overflow-auto element has overflow: auto , which behaves like

scroll but only adds a scrollbar when necessary. This is a more flexible option
compared to scroll , as it only adds a scrollbar when the content actually overflows.

localhost:3000/[Link] 112/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Practical Use Cases

Responsive Design: Managing overflow is essential for responsive design. By using

overflow: auto or overflow: scroll , you can ensure that content remains accessible
on different screen sizes.
Modal Windows: In modal windows, overflow: hidden can be used to prevent
background content from scrolling when the modal is open.
Image Galleries: For image galleries, overflow: scroll can be used to allow users to
scroll through images that exceed the container's dimensions.

Conclusion

Mastering the overflow property in CSS is crucial for creating effective and visually appealing
web designs. By choosing the appropriate overflow value, you can control how content is
displayed and ensure a better user experience. Remember to adjust the dimensions and styles
according to your specific needs, and you'll be well on your way to crafting beautiful, functional
web pages.

localhost:3000/[Link] 113/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Inline-Block
The display property in CSS is used to define how an element should be rendered on the web
page. There are three commonly used values for the display property: inline , block , and
inline-block .

Inline
An element with display: inline is rendered inline with the surrounding content. It does not
start on a new line and only takes up as much width as necessary. Examples of inline elements
include <span> , <a> , and <strong> . Inline elements are typically used for text and small
content pieces that should flow with the surrounding text. Here's an example:

.inline-example {
display: inline;
border: 1px solid black;
padding: 5px;
}

In this example, the .inline-example class will make the element appear inline with the text
around it, with a border and padding applied.

Block
An element with display: block is rendered as a block-level element. It starts on a new line
and takes up the full width available. Examples of block elements include <div> , <p> , and
<h1> . Block elements are used for larger content sections that should stand alone on their
own lines. Here's an example:

.block-example {
display: block;
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}

In this example, the .block-example class will make the element take up the full width of its
container, with a border, padding, and margin applied.
localhost:3000/[Link] 114/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Inline-block
An element with display: inline-block is rendered inline like an inline element, but it can
have a width and height like a block-level element. It starts on a new line only if necessary.
Examples of inline-block elements include <img> , <button> , and <input> . Inline-block
elements are useful for creating layouts where elements need to be inline but also need to
have specific dimensions. Here's an example:

.inline-block-example {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin-right: 10px;
}

In this example, the .inline-block-example class will make the element appear inline with
other elements, but it will have a fixed width and height, with a border, padding, and margin
applied.

Detailed Comparison

Inline vs Block

Inline elements do not start on a new line and only take up as much width as necessary.
They are typically used for small pieces of content within a line of text.
Block elements start on a new line and take up the full width available. They are used for
larger sections of content that should stand alone.

Inline-block vs Inline

Inline-block elements are similar to inline elements in that they do not start on a new
line. However, unlike inline elements, they can have a width and height specified.
Inline elements cannot have a width and height specified, and their dimensions are
determined by their content.

localhost:3000/[Link] 115/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Inline-block vs Block

Inline-block elements do not start on a new line unless necessary, and they can have a
width and height specified.
Block elements always start on a new line and take up the full width available.

Practical Use Cases

Inline Elements

Inline elements are best used for styling text or small pieces of content within a line. For
example, you might use an inline element to highlight a word within a paragraph:

<p>This is an <span class="highlight">important</span> word.</p>

Block Elements

Block elements are best used for larger sections of content that should stand alone. For
example, you might use a block element to create a section of a webpage:

<div class="section">
<h1>Section Title</h1>
<p>This is a paragraph within the section.</p>
</div>

Inline-block Elements

Inline-block elements are useful for creating layouts where elements need to be inline but also
need specific dimensions. For example, you might use inline-block elements to create a row of
boxes:

<div class="box inline-block-example">Box 1</div>

<div class="box inline-block-example">Box 2</div>
<div class="box inline-block-example">Box 3</div>

By using the display property with these values, you can control the layout and behavior of
elements on your web page, allowing for a wide range of design possibilities.

localhost:3000/[Link] 116/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Opacity
Opacity is a fundamental concept in web design that controls the transparency of an element.
When an element has an opacity of 100%, it appears completely solid. Conversely, an element
with an opacity of 0% is entirely transparent. This property is crucial for creating visually
appealing designs and enhancing user experience.

Understanding Opacity
Opacity is a CSS property that allows you to control the transparency level of an element. The
value of the opacity property ranges from 0 to 1, where 0 means fully transparent and 1 means
fully opaque. This property can take decimal values to represent different levels of
transparency.

Syntax

The syntax for using the opacity property in CSS is straightforward:

element {
opacity: value;
}

value : A number between 0.0 (fully transparent) and 1.0 (fully opaque).

Examples

Here are some examples to illustrate how opacity works:

localhost:3000/[Link] 117/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

/* Fully opaque element */

.opaque-element {
opacity: 1; /* Equivalent to 100% */
}

/* Fully transparent element */

.transparent-element {
opacity: 0; /* Equivalent to 0% */
}

/* Semi-transparent element */
.semi-transparent-element {
opacity: 0.5; /* Equivalent to 50% */
}

Practical Use Cases

Opacity can be used in various scenarios to enhance the visual appeal of web pages. Here are
some practical use cases:

1. Hover Effects: You can use opacity to create hover effects that highlight elements when a
user hovers over them.

.button {
opacity: 0.8;
transition: opacity 0.3s;
}

.button:hover {
opacity: 1;
}

2. Background Images: Adjusting the opacity of background images can create a more
subtle effect, making text or other elements more readable.

.background-image {
background-image: url('[Link]');
opacity: 0.7;
}

3. Layering Elements: Using opacity to layer elements on top of each other can create a
sense of depth and dimension.

localhost:3000/[Link] 118/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.layer1 {
opacity: 0.9;
}

.layer2 {
opacity: 0.6;
}

Important Considerations

When using the opacity property, there are a few important considerations to keep in mind:

Inheritance: The opacity property affects not only the element it is applied to but also all
of its children. This means that if you set an opacity of 0.5 on a parent element, all child
elements will also appear semi-transparent.

Performance: Using opacity can sometimes impact performance, especially on complex

pages with many elements. Use it judiciously to avoid performance issues.

Cross-Browser Compatibility: The opacity property is well-supported across modern

browsers. However, for older versions of Internet Explorer (IE8 and below), you might
need to use the filter property.

.old-browser-compatibility {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and below */
}

By understanding and utilizing the opacity property effectively, you can enhance the visual
appeal and user experience of your web projects. Whether you are creating subtle hover
effects, layering elements, or adjusting background images, opacity is a powerful tool in your
CSS toolkit.

localhost:3000/[Link] 119/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Combinators
Combinators in CSS are selectors that allow you to target specific elements based on their
relationship with other elements. There are four types of combinators in CSS:

1. Descendant combinator (space): It selects an element that is a descendant of another

element. For example, div p selects all <p> elements that are descendants of <div>
elements.

2. Child combinator (>): It selects an element that is a direct child of another element. For
example, ul > li selects all <li> elements that are direct children of <ul> elements.

3. Adjacent sibling combinator (+): It selects an element that is the next sibling of another
element. For example, h1 + p selects the <p> element that is the next sibling of an
<h1> element.

4. General sibling combinator (~): It selects all elements that are siblings of another element.
For example, h2 ~ p selects all <p> elements that are siblings of an <h2> element.

Here are some examples:

/* Descendant combinator */
div p {
color: red;
}

/* Child combinator */
ul > li {
font-weight: bold;
}

/* Adjacent sibling combinator */

h1 + p {
margin-top: 10px;
}

/* General sibling combinator */

h2 ~ p {
font-style: italic;
}

These combinators provide powerful ways to target specific elements in your CSS selectors
based on their relationship with other elements.

localhost:3000/[Link] 120/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Pseudo Classes
Pseudo classes in CSS allow you to select and style elements based on their state or position
within the document tree. They are denoted by a colon followed by the pseudo class name.

Here are some commonly used pseudo classes:

1. :hover - Selects an element when the mouse pointer is over it. Example:

a:hover {
color: red;
}

2. :active - Selects an element when it is being activated (clicked or tapped). Example:

button:active {
background-color: blue;
}

3. :focus - Selects an element when it has focus (e.g., when it is selected by keyboard
navigation). Example:

input:focus {
border-color: green;
}

4. :first-child - Selects the first child element of its parent. Example:

ul li:first-child {
font-weight: bold;
}

5. :nth-child() - Selects elements based on their position within their parent. Example:

ul li:nth-child(odd) {
background-color: lightgray;
}

These are just a few examples of the many pseudo classes available in CSS. They provide
powerful ways to style elements based on various conditions and states.

localhost:3000/[Link] 121/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Pseudo Elements
Pseudo-elements in CSS are powerful tools that enable developers to style specific parts of an
element without the need for additional HTML markup. By using pseudo-elements, you can
enhance the visual presentation of your web pages while keeping your HTML clean and
semantic. Pseudo-elements are identified by a double colon ( :: ) to differentiate them from
pseudo-classes, which use a single colon ( : ).

Common Pseudo-Elements

::before
The ::before pseudo-element allows you to insert content before the actual content of an
element. This can be particularly useful for adding decorative elements, icons, or additional text
without modifying the HTML structure.

p::before {
content: "Note: ";
color: red;
}

In the example above, the word "Note: " is inserted before the content of every <p> element,
and it is styled in red.

::after
Similar to ::before , the ::after pseudo-element inserts content after the content of an
element. This is often used for decorative purposes or to clear floats in a layout.

p::after {
content: " - Read more";
color: blue;
}

Here, the text " - Read more" is appended to the content of each <p> element, styled in blue.

localhost:3000/[Link] 122/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

::first-line
The ::first-line pseudo-element targets the first line of a block-level element, allowing you
to apply unique styles to it. This can be useful for creating typographic effects such as drop
caps or emphasizing the first line of a paragraph.

p::first-line {
font-weight: bold;
font-size: 1.2em;
}

In this example, the first line of each paragraph is made bold and slightly larger, drawing
attention to the beginning of the text.

::first-letter
The ::first-letter pseudo-element styles the first letter of the first line of a block-level
element. This is commonly used to create drop caps, a typographic style where the first letter
of a paragraph is larger and more prominent.

p::first-letter {
font-size: 2em;
color: green;
}

With this code, the first letter of each paragraph is enlarged and colored green, creating a
visually striking effect.

::selection
The ::selection pseudo-element allows you to customize the appearance of text when it is
selected by the user. This can enhance the user experience by providing a consistent and
branded selection style.

::selection {
background: yellow;
color: black;
}

In this example, any selected text will have a yellow background and black text, making it stand
out clearly.

localhost:3000/[Link] 123/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Usage and Best Practices

Pseudo-elements are invaluable for adding stylistic touches without altering the
underlying HTML structure.
They can be combined with classes, IDs, and other selectors to target specific elements
more precisely.
Always use the double colon ( :: ) notation for pseudo-elements to ensure compatibility
with modern browsers.
Consider accessibility when using pseudo-elements, as content added with ::before and
::after may not be read by screen readers.

By mastering pseudo-elements, you can create more dynamic and visually appealing web
pages with minimal changes to your HTML. This not only improves the aesthetics of your site
but also maintains clean and maintainable code.

localhost:3000/[Link] 124/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Visibility
Visibility in CSS determines whether an element is visible or hidden on a web page. It is
controlled using the visibility property. The visibility property in CSS is a fundamental
tool for controlling the visibility of elements on a web page. It allows developers to hide or
show elements without affecting the layout of the page. This property accepts several values,
but the most commonly used are visible and hidden .

visible : The element is displayed as normal. It occupies space on the page and is visible
to the user.
hidden : The element is not displayed, but it still occupies space on the page. It is
effectively invisible, but its space is preserved.

Syntax

The basic syntax for using the visibility property is straightforward:

element {
visibility: value;
}

Values

The visibility property can take on several values, each with its own specific behavior:

visible : This is the default value. The element is visible.

hidden : The element is hidden but still takes up space in the layout.
collapse : This value is specific to table elements. For table rows, columns, column
groups, and row groups, collapse removes the element from display and also removes
the space it occupied. For other elements, collapse is treated as hidden .
initial : Sets the property to its default value.
inherit : Inherits the property from its parent element.

Example

Here's a simple example of how to use the visibility property in CSS:

localhost:3000/[Link] 125/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.my-element {
visibility: hidden;
}

In this example, the element with the class my-element will be hidden on the page, but it will
still occupy space in the layout.

Differences Between visibility and display

It's crucial to understand the difference between the visibility and display properties:

visibility: hidden : The element is not visible, but it still occupies space in the layout.
Other elements around it will behave as if the hidden element is still there.
display: none : The element is completely removed from the document flow. It does not
occupy any space, and other elements will be laid out as if the element does not exist.

Use Cases

When to Use visibility: hidden

Preserving Layout: Use visibility: hidden when you want to hide an element but
maintain the layout of the page. For example, you might have a placeholder that you want
to hide but keep the space it occupies.
Accessibility: Use visibility: hidden when you want to hide an element visually but
still make it accessible to screen readers or JavaScript.

When to Use display: none

Removing Elements: Use display: none when you want to completely remove an
element from the document flow. This is useful for elements that should not affect the
layout of the page at all.
Conditional Rendering: Use display: none when you want to conditionally render
elements based on certain conditions, such as user interactions or media queries.

Interaction with JavaScript

Elements hidden with visibility: hidden can still be interacted with using JavaScript. For
example, you can change their properties, add event listeners, or manipulate them in other

localhost:3000/[Link] 126/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

ways. However, they will not be visible to the user.

Accessibility Considerations

When using visibility: hidden , the element is still accessible to screen readers. This can be
useful for providing additional context or information to users who rely on assistive
technologies. However, if you want to completely hide an element from screen readers as well,
you should use display: none .

Conclusion

The visibility property in CSS is a powerful tool for controlling the visibility of elements on a
web page. By understanding the differences between visibility and display , and knowing
when to use each, you can create more flexible and accessible web designs.

Remember to use visibility when you want to hide an element while preserving its space,
and use display: none when you want to remove it from the document flow entirely.

localhost:3000/[Link] 127/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Columns
Multiple columns in CSS and HTML allow you to create a layout where content is divided into
multiple columns, similar to a newspaper or magazine. This can be useful for displaying long
blocks of text or organizing content in a more visually appealing way.

Creating Multiple Columns

To create multiple columns, you can use the CSS column-count property. This property
specifies the number of columns you want to divide your content into. For example, if you want
to divide your content into three columns, you can set column-count: 3; .

Example

Here's an example of how you can use internal CSS to create multiple columns:

<!DOCTYPE html>
<html>
<head>
<style>
.column-container {
column-count: 3;
column-gap: 20px;
}
</style>
</head>
<body>
<div class="column-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod,
nunc id aliquet tincidunt, odio nunc lacinia nunc, nec lacinia nunc nunc id nunc.
Sed euismod, nunc id aliquet tincidunt, odio nunc lacinia nunc, nec lacinia nunc
nunc id nunc.</p>
<p>Nullam auctor, nunc id aliquet tincidunt, odio nunc lacinia nunc, nec
lacinia nunc nunc id nunc. Sed euismod, nunc id aliquet tincidunt, odio nunc
lacinia nunc, nec lacinia nunc nunc id nunc.</p>
<p>Phasellus euismod, nunc id aliquet tincidunt, odio nunc lacinia nunc,
nec lacinia nunc nunc id nunc. Sed euismod, nunc id aliquet tincidunt, odio nunc
lacinia nunc, nec lacinia nunc nunc id nunc.</p>
</div>
</body>
</html>

localhost:3000/[Link] 128/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In the example above, the column-container class is applied to a <div> element that wraps
the content we want to divide into columns. The column-count property is set to 3, which
creates three columns. The column-gap property is used to add some spacing between the
columns.

Additional Properties

column-width
The column-width property specifies the ideal width of each column. The browser will then
determine the optimal number of columns to fit within the container. For example:

.column-container {
column-width: 200px;
}

column-rule
The column-rule property allows you to add a rule (line) between columns. This can help to
visually separate the columns. For example:

.column-container {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}

column-span
The column-span property allows an element to span across multiple columns. This can be
useful for headings or other elements that should not be confined to a single column. For
example:

.heading {
column-span: all;
}

localhost:3000/[Link] 129/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<div class="column-container">
<h2 class="heading">Heading Spanning All Columns</h2>
<p>Content in multiple columns...</p>
</div>

Browser Support
Most modern browsers support the CSS multi-column layout properties. However, it is always a
good practice to check for compatibility and provide fallbacks if necessary.

Conclusion
By using multiple columns, you can create a more visually appealing and organized layout for
your content in CSS and HTML. Experiment with the various properties to achieve the desired
layout for your project.

localhost:3000/[Link] 130/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Gradients
Gradients in CSS are a powerful tool that allows you to create smooth transitions between two
or more colors. They add depth and visual interest to your web pages, making them more
engaging and dynamic. In this chapter, we will explore how to use gradients in CSS and the
different types of gradients available.

Introduction to Gradients
Gradients can be applied to various CSS properties such as backgrounds, borders, and text.
They are defined using the linear-gradient , radial-gradient , conic-gradient , and
repeating-linear-gradient functions. Let's start with a simple example to illustrate how
gradients work in CSS.

Example: Basic Gradient

Consider the following HTML and CSS code:

<!DOCTYPE html>
<html>
<head>
<title>Gradients Example</title>
<style>
body {
background: linear-gradient(to right, #ff0000, #0000ff);
}
</style>
</head>
<body>
<h1>Gradients Example</h1>
<p>This is an example of using gradients in CSS.</p>
</body>
</html>

In this example, we use the linear-gradient function to create a gradient that transitions
from red (#ff0000) to blue (#0000ff) horizontally from left to right. You can customize the
direction and colors of the gradient to achieve different effects. Remember to place the CSS
code within the <style> tags in the <head> section of your HTML document. This is called
internal CSS, as the styles are defined within the HTML file itself.

localhost:3000/[Link] 131/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Types of Gradients
There are several types of gradients you can use in CSS, each with its own unique properties
and effects. Let's explore each type in detail.

Linear Gradients

Linear gradients transition colors along a straight line. You can control the direction of the
gradient using angles or keywords like to right , to left , to top , and to bottom .

Example: Linear Gradient

background: linear-gradient(45deg, #ff0000, #0000ff);

This creates a gradient at a 45-degree angle from red to blue.

Radial Gradients

Radial gradients radiate from an origin point, creating a circular or elliptical gradient. You can
specify the shape, size, and position of the gradient.

Example: Radial Gradient

background: radial-gradient(circle, #ff0000, #0000ff);

This creates a circular gradient from red to blue.

Conic Gradients

Conic gradients rotate colors around a center point, similar to the way a pie chart is colored.

Example: Conic Gradient

background: conic-gradient(from 0deg, #ff0000, #0000ff, #00ff00);

This creates a conic gradient starting from 0 degrees, transitioning through red, blue, and
green.

localhost:3000/[Link] 132/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Repeating Gradients

Repeating gradients allow you to create patterns by repeating the gradient.

Example: Repeating Linear Gradient

background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #0000ff 10px,

#0000ff 20px);

This creates a repeating linear gradient with red and blue stripes.

Using Multiple Gradients

You can layer multiple gradients to create complex designs.

Example: Multiple Gradients

background: linear-gradient(to right, #ff0000, #0000ff), radial-gradient(circle,

#00ff00, #0000ff);

This layers a linear gradient over a radial gradient.

Conclusion
Gradients are a versatile and visually appealing way to enhance your web designs. By
experimenting with different color combinations, gradient directions, and types of gradients,
you can create unique and engaging effects that will captivate your audience. In the next
chapter, we will delve deeper into advanced CSS techniques to further enhance your web
design skills.

localhost:3000/[Link] 133/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Shadows
In the world of CSS, shadows are a powerful tool that can add depth and dimension to your
web elements, making your designs more realistic and visually appealing. The cornerstone of
creating shadows in CSS is the box-shadow property, which offers a range of customization
options to achieve various shadow effects.

Understanding the Syntax

The box-shadow property is versatile and takes several values in a specific order:

1. Horizontal offset (required): This value determines the shadow's horizontal distance
from the element. Positive values move the shadow to the right, while negative values
move it to the left.
2. Vertical offset (required): This value sets the shadow's vertical distance from the
element. Positive values move the shadow down, while negative values move it up.
3. Blur radius (optional): This value defines the blur effect of the shadow. A higher value
results in a more blurred shadow. If omitted, the default value is 0, meaning the shadow
will have a sharp edge.
4. Spread radius (optional): This value affects the size of the shadow. Positive values
increase the shadow's size, while negative values decrease it. If omitted, the default value
is 0.
5. Color (optional): This value sets the shadow's color, which can be specified using any
valid CSS color format, such as hex, RGB, RGBA, HSL, or HSLA. If omitted, the default color
is the current text color.

A Simple Example
Let's start with a basic example of how to use box-shadow :

.my-element {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

In this example:

The shadow is positioned 2 pixels to the right and 2 pixels down from the element.

localhost:3000/[Link] 134/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

The blur radius is set to 4 pixels, giving the shadow a soft edge.
The color of the shadow is specified using the rgba() function, where the first three
values represent the RGB color values (black), and the fourth value represents the opacity
(20%).

Creating Multiple Shadows

You can also apply multiple shadows to a single element by separating the shadow values with
commas:

.my-element {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255,
0.2);
}

In this example:

The first shadow is positioned 2 pixels to the right and 2 pixels down, with a blur radius of
4 pixels and a dark color.
The second shadow is positioned 2 pixels to the left and 2 pixels up, with a blur radius of
4 pixels and a light color.

Advanced Techniques

Inset Shadows

By default, shadows are applied outside the element's box. However, you can create an inset
shadow (inside the element) by adding the inset keyword:

.my-element {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
}

Combining Shadows with Transitions and Animations

CSS transitions and animations can be used to create dynamic shadow effects. For example,
you can animate the shadow to create a "hover" effect:

localhost:3000/[Link] 135/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.my-element {
transition: box-shadow 0.3s ease-in-out;
}

.my-element:hover {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

In this example:

The transition property is used to smoothly animate the box-shadow property over 0.3
seconds.
When the element is hovered over, the shadow becomes larger and darker.

Practical Tips

Performance: Be mindful of performance when using multiple or complex shadows, as

they can impact rendering performance, especially on lower-end devices.
Consistency: Maintain consistency in your shadow styles across your design to create a
cohesive look.
Accessibility: Ensure that shadows do not negatively impact the readability of text or the
usability of interactive elements.

Experiment with different values and combinations to achieve the desired shadow effect for
your design. When used thoughtfully, shadows can significantly enhance the visual appeal of
your web pages.

Remember to always end your CSS rules with a semicolon to ensure proper syntax.

localhost:3000/[Link] 136/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Rounded Corners
In CSS, rounded corners can be achieved using the border-radius property. This property
allows you to round the corners of an element, giving it a more visually appealing look.

To apply rounded corners using shorthand notation, you can use the following syntax:

selector {
border-radius: 10px;
}

This will apply rounded corners with a radius of 10 pixels to all four corners of the element.

If you want to specify different radii for each corner, you can use the longhand notation. Here's
an example:

selector {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}

In this example, each corner has a different radius, allowing you to create more complex
shapes.

To demonstrate the usage of rounded corners, here's an example of an HTML document with
internal CSS:

localhost:3000/[Link] 137/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

In this example, a div element with the class box is styled with rounded corners using the
shorthand notation. The border-radius property is set to 10px , giving the element rounded
corners.

localhost:3000/[Link] 138/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Transitions
Transitions in CSS allow you to smoothly animate changes in CSS properties over a specified
duration. They provide a way to add visual effects and enhance user experience on your
website or application.

Basic Usage
To create a transition, you need to specify the CSS property you want to animate and the
duration of the transition. For example, let's say you want to animate the background color of
an element when the user hovers over it:

.element {
background-color: blue;
transition: background-color 0.3s;
}

.element:hover {
background-color: red;
}

In this example, when the user hovers over the element, the background color will transition
from blue to red over a duration of 0.3 seconds.

Advanced Properties
You can also specify additional properties such as timing function and delay to further
customize the transition. The timing function determines the speed curve of the transition,
allowing you to create effects like ease-in, ease-out, or linear. The delay property allows you to
introduce a delay before the transition starts.

.element {
background-color: blue;
transition: background-color 0.3s ease-in-out 0.2s;
}

.element:hover {
background-color: red;
}

localhost:3000/[Link] 139/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In this updated example, the transition will start with a delay of 0.2 seconds and have an ease-
in-out timing function, creating a smoother effect.

Timing Functions

The timing function can be one of the following values:

linear : The transition has a constant speed.

ease : The transition starts slowly, accelerates in the middle, and slows down at the end.
ease-in : The transition starts slowly and accelerates towards the end.
ease-out : The transition starts quickly and slows down towards the end.
ease-in-out : The transition starts slowly, accelerates in the middle, and slows down at
the end.
cubic-bezier(n,n,n,n) : A custom timing function defined by four values.

Delays

The delay property allows you to specify a delay before the transition starts. This can be useful
for creating more complex animations where different elements transition at different times.

.element {
background-color: blue;
transition: background-color 0.3s ease-in-out 0.2s;
}

.element:hover {
background-color: red;
}

In this example, the transition will start 0.2 seconds after the hover event is triggered.

Multiple Properties
You can also transition multiple properties at once by separating them with commas:

localhost:3000/[Link] 140/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

.element {
background-color: blue;
width: 100px;
transition: background-color 0.3s, width 0.5s;
}

.element:hover {
background-color: red;
width: 200px;
}

In this example, both the background color and width of the element will transition when the
user hovers over it. The background color will transition over 0.3 seconds, while the width will
transition over 0.5 seconds.

Transition Shorthand
The transition property is a shorthand for four other properties:

transition-property : Specifies the name of the CSS property to which the transition is
applied.
transition-duration : Specifies the duration of the transition.
transition-timing-function : Specifies the timing function of the transition.
transition-delay : Specifies the delay before the transition starts.

You can use these properties individually or combine them using the shorthand syntax:

.element {
background-color: blue;
transition: background-color 0.3s ease-in-out 0.2s;
}

localhost:3000/[Link] 141/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Practical Examples

Opacity Transition

.element {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

.element:hover {
opacity: 0.5;
}

In this example, the opacity of the element will transition from fully opaque to half-transparent
over 0.5 seconds when the user hovers over it.

Transform Transition

.element {
transform: scale(1);
transition: transform 0.3s ease-in-out;
}

.element:hover {
transform: scale(1.5);
}

In this example, the element will scale up by 1.5 times its original size over 0.3 seconds when
the user hovers over it.

Combining Transitions with Media Queries

Transitions can be combined with media queries to create responsive animations that adapt to
different screen sizes:

localhost:3000/[Link] 142/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

@media (max-width: 600px) {

.element {
background-color: blue;
transition: background-color 0.3s ease-in-out;
}

.element:hover {
background-color: green;
}
}

@media (min-width: 601px) {

.element {
background-color: blue;
transition: background-color 0.3s ease-in-out;
}

.element:hover {
background-color: red;
}
}

In this example, the background color of the element will transition to green on smaller screens
and to red on larger screens when the user hovers over it.

Conclusion
Transitions are a powerful tool in CSS that can greatly enhance the user experience of your
website or application. By experimenting with different properties, durations, timing functions,
and delays, you can create a wide range of visual effects that make your user interface more
dynamic and engaging. Remember to combine transitions with other CSS features like pseudo-
classes and media queries to create complex and responsive animations.

localhost:3000/[Link] 143/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Media Queries
Media Queries in CSS are a powerful tool that allows you to apply different styles based on
various conditions. They are a cornerstone of responsive web design, enabling you to create a
seamless user experience across different devices and screen sizes. In this chapter, we will
explore some detailed examples and additional features of media queries.

Basic Examples

Prefers Color Scheme

The prefers-color-scheme media feature allows you to target devices that have a specific
color scheme preference. For instance, you can apply different styles for devices that prefer a
light or dark color scheme. Here's an example:

@media (prefers-color-scheme: dark) {

body {
background-color: #000; /* Set background to black for dark mode */
color: #fff; /* Set text color to white for dark mode */
}
}

Orientation

You can also use media queries to apply styles based on the orientation of the device. For
example, you can change the layout depending on whether the device is in landscape or
portrait mode:

localhost:3000/[Link] 144/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

@media (orientation: landscape) {

body {
display: flex;
flex-direction: row;
}
}

@media (orientation: portrait) {

body {
display: flex;
flex-direction: column;
}
}

Screen Width

Another common use of media queries is to apply styles based on the width of the screen. This
is particularly useful for creating responsive designs that adapt to different screen sizes:

@media (max-width: 600px) {

body {
font-size: 14px;
}
}

Resolution

You can target devices with high-resolution screens using the min-resolution media feature.
This is useful for serving high-resolution images to devices that can display them:

@media (min-resolution: 2dppx) {

img {
content: url([Link]);
}
}

Aspect Ratio

Media queries can also be used to apply styles based on the aspect ratio of the device. This can
help you create layouts that look good on both wide and narrow screens:

localhost:3000/[Link] 145/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

@media (min-aspect-ratio: 16/9) {

.container {
width: 80%;
}
}

@media (max-aspect-ratio: 4/3) {

.container {
width: 100%;
}
}

Hover and Pointer

You can use media queries to apply styles based on the user's input method. For example, you
can change the appearance of links when the user hovers over them with a mouse:

@media (hover: hover) {

a:hover {
text-decoration: underline;
}
}

@media (pointer: fine) {

button {
padding: 10px 20px;
}
}

Display Mode

The display-mode media feature allows you to apply styles based on the display mode of the
application. For example, you can create a full-screen layout for applications running in full-
screen mode:

@media (display-mode: fullscreen) {

.fullscreen {
width: 100vw;
height: 100vh;
}
}

localhost:3000/[Link] 146/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Combining Media Features

You can combine multiple media features to create more specific styles. For example, you can
apply styles for devices that have a minimum width of 600px and prefer a dark color scheme:

@media (min-width: 600px) and (prefers-color-scheme: dark) {

body {
background-color: #333;
color: #ccc;
}
}

By using media queries, you can create a responsive design that adapts to different devices
and user preferences, providing a better user experience.

localhost:3000/[Link] 147/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Learning To Code

JavaScript

localhost:3000/[Link] 148/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Variables
Variables in JavaScript are fundamental for storing and manipulating data. Think of them as
containers that hold values, which can be of various types such as numbers, strings, booleans,
or objects. Understanding how to declare and use variables effectively is crucial for writing
robust JavaScript code.

Declaring Variables
In JavaScript, you can declare variables using the var , let , or const keywords. Each keyword
has its own characteristics and specific use cases.

Using var

The var keyword declares variables with function scope. Variables declared with var are
hoisted to the top of their containing function, meaning they can be used before they are
declared. However, this can sometimes lead to unexpected behavior and bugs.

var age = 25;

[Link](age); // Output: 25

Using let

The let keyword declares variables with block scope. Unlike var , variables declared with let
are not hoisted and are only accessible within the block they are defined in. This makes let a
better choice for most use cases compared to var .

let name = "John";

[Link](name); // Output: John

Using const

The const keyword declares variables that cannot be reassigned. Similar to let , const also
has block scope. However, the value of a const variable can still be mutated if it is an object or
an array.

localhost:3000/[Link] 149/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

const PI = 3.14;
[Link](PI); // Output: 3.14

Initializing Variables
You can declare a variable without assigning a value to it. In this case, the variable will have the
value undefined .

let x;
[Link](x); // Output: undefined

To assign a value to a variable, use the assignment operator ( = ).

let message = "Hello, world!";

[Link](message); // Output: Hello, world!

Using Variables
Variables can be used in expressions and combined with operators to perform calculations or
manipulate data.

let num1 = 10;

let num2 = 5;
let sum = num1 + num2;
[Link](sum); // Output: 15

Best Practices
Use meaningful names: Choose descriptive names for your variables to make your code
more readable and maintainable.
Declare variables at the top: Declare variables at the top of their scope to avoid
unexpected behavior.
Prefer let and const over var : Use let and const instead of var to avoid issues
with variable hoisting and scope.

localhost:3000/[Link] 150/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

By following these best practices and understanding the differences between var , let , and
const , you can write more robust and maintainable JavaScript code.

localhost:3000/[Link] 151/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Operators
Operators in JavaScript are fundamental tools that allow developers to perform various
operations on values or variables. They are essential for manipulating data and performing
calculations, making them a cornerstone of any JavaScript program.

JavaScript offers a wide range of operators, each serving a specific purpose. Let's explore these
operators in detail:

Arithmetic Operators
Arithmetic operators are used to perform mathematical calculations. Here are the primary
arithmetic operators in JavaScript:

Addition (+): This operator adds two operands. For example, a + b will yield the sum of
a and b .
Subtraction (-): This operator subtracts the second operand from the first. For instance,
a - b will give the difference between a and b .
Multiplication (*): This operator multiplies two operands. For example, a * b results in
the product of a and b .
Division (/): This operator divides the first operand by the second. For instance, a / b
will yield the quotient of a divided by b .
Modulus (%): This operator returns the remainder of the division of two operands. For
example, a % b gives the remainder when a is divided by b .
Exponentiation ()**: This operator raises the first operand to the power of the second
operand. For instance, a ** b results in a raised to the power of b .

Assignment Operators
Assignment operators are used to assign values to variables. Here are some common
assignment operators:

Assignment (=): This operator assigns the value of the right operand to the left operand.
For example, a = b assigns the value of b to a .
Addition Assignment (+=): This operator adds the right operand to the left operand and
assigns the result to the left operand. For instance, a += b is equivalent to a = a + b .

localhost:3000/[Link] 152/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Subtraction Assignment (-=): This operator subtracts the right operand from the left
operand and assigns the result to the left operand. For example, a -= b is equivalent to
a = a - b.
Multiplication Assignment (*=): This operator multiplies the left operand by the right
operand and assigns the result to the left operand. For instance, a *= b is equivalent to
a = a * b.
Division Assignment (/=): This operator divides the left operand by the right operand
and assigns the result to the left operand. For example, a /= b is equivalent to a = a /
b.
Modulus Assignment (%=): This operator takes the modulus using two operands and
assigns the result to the left operand. For instance, a %= b is equivalent to a = a % b .

Comparison Operators
Comparison operators compare two values and return a boolean result. Here are some
common comparison operators:

Equality (==): This operator checks if two values are equal. For example, a == b returns
true if a and b are equal.
Strict Equality (===): This operator checks if two values are equal and of the same type.
For instance, a === b returns true if a and b are equal and of the same type.
Inequality (!=): This operator checks if two values are not equal. For example, a != b
returns true if a and b are not equal.
Strict Inequality (!==): This operator checks if two values are not equal or not of the
same type. For instance, a !== b returns true if a and b are not equal or not of the
same type.
Greater Than (>): This operator checks if the left operand is greater than the right
operand. For example, a > b returns true if a is greater than b .
Greater Than or Equal (>=): This operator checks if the left operand is greater than or
equal to the right operand. For instance, a >= b returns true if a is greater than or
equal to b .
Less Than (<): This operator checks if the left operand is less than the right operand. For
example, a < b returns true if a is less than b .
Less Than or Equal (<=): This operator checks if the left operand is less than or equal to
the right operand. For instance, a <= b returns true if a is less than or equal to b .

localhost:3000/[Link] 153/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Logical Operators
Logical operators are used to combine or negate boolean values. Here are the primary logical
operators in JavaScript:

Logical AND (&&): This operator returns true if both operands are true. For example, a
&& b returns true if both a and b are true.
Logical OR (||): This operator returns true if at least one of the operands is true. For
instance, a || b returns true if either a or b is true.
Logical NOT (!): This operator returns true if the operand is false. For example, !a
returns true if a is false.

Bitwise Operators
Bitwise operators perform operations on binary representations of numbers. Here are some
common bitwise operators:

Bitwise AND (&): This operator performs a bitwise AND operation. For example, a & b
performs a bitwise AND on a and b .
Bitwise OR (|): This operator performs a bitwise OR operation. For instance, a | b
performs a bitwise OR on a and b .
Bitwise XOR (^): This operator performs a bitwise XOR operation. For example, a ^ b
performs a bitwise XOR on a and b .
Bitwise NOT (~): This operator performs a bitwise NOT operation. For instance, ~a
inverts the bits of a .
Left Shift (<<): This operator shifts the bits of the first operand to the left by the number
of positions specified by the second operand. For example, a << b shifts the bits of a to
the left by b positions.
Right Shift (>>): This operator shifts the bits of the first operand to the right by the
number of positions specified by the second operand. For instance, a >> b shifts the bits
of a to the right by b positions.
Unsigned Right Shift (>>>): This operator shifts the bits of the first operand to the right
by the number of positions specified by the second operand, filling the leftmost bits with
zeros. For example, a >>> b shifts the bits of a to the right by b positions, filling the
leftmost bits with zeros.

localhost:3000/[Link] 154/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Unary Operators
Unary operators operate on a single operand. Here are some common unary operators:

Unary Plus (+): This operator converts the operand to a number. For example, +a
converts a to a number.
Unary Minus (-): This operator converts the operand to a number and negates it. For
instance, -a converts a to a number and negates it.
Increment (++): This operator increases the operand by one. For example, a++ or ++a
increases a by one.
Decrement (--): This operator decreases the operand by one. For instance, a-- or --a
decreases a by one.
Logical NOT (!): This operator negates the boolean value of the operand. For example,
!a returns true if a is false.
Typeof: This operator returns the type of the operand. For instance, typeof a returns
the type of a .
Delete: This operator deletes a property from an object. For example, delete [Link]
deletes the property prop from the object obj .
Void: This operator evaluates an expression and returns undefined . For instance, void
expression evaluates expression and returns undefined .

Ternary Operator
The ternary operator is a shorthand for an if-else statement. It takes three operands and
returns a value based on a condition. The syntax is condition ? expression1 : expression2 .
For example, a > b ? 'a is greater' : 'b is greater or equal' returns 'a is greater'
if a is greater than b , otherwise it returns 'b is greater or equal' .

These are just a few examples of the operators available in JavaScript. Understanding and using
operators effectively is crucial for writing efficient and concise code.

localhost:3000/[Link] 155/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Conditions
Conditions in JavaScript allow you to control the flow of your code based on certain criteria
being met. They are essential for creating dynamic and interactive applications. In this chapter,
we will delve into the different types of conditions and how to use them effectively.

If Statement

The if statement is the most fundamental type of condition in JavaScript. It enables you to
execute a block of code only if a specified condition evaluates to true. The syntax is
straightforward:

if (condition) {
// code to be executed if the condition is true
}

Example:

Consider a scenario where you want to check if a person is an adult:

let age = 18;

if (age >= 18) {
[Link]("You are an adult.");
}

If-Else Statement

The if-else statement builds upon the if statement by providing an alternative block of
code to execute if the condition is false. This is how it looks:

if (condition) {
// code to be executed if the condition is true
} else {
// code to be executed if the condition is false
}

Example:

Let's modify our previous example to handle both adults and minors:

localhost:3000/[Link] 156/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

let age = 16;

if (age >= 18) {
[Link]("You are an adult.");
} else {
[Link]("You are a minor.");
}

Else-If Statement

The else-if statement allows you to check multiple conditions and execute different blocks of
code based on the results. It can be used in conjunction with if and if-else statements. The
syntax is as follows:

if (condition1) {
// code to be executed if condition1 is true
} else if (condition2) {
// code to be executed if condition2 is true
} else {
// code to be executed if all conditions are false
}

Example:

Imagine you are grading a test and want to assign a letter grade based on the score:

let score = 85;

if (score >= 90) {
[Link]("Grade: A");
} else if (score >= 80) {
[Link]("Grade: B");
} else if (score >= 70) {
[Link]("Grade: C");
} else {
[Link]("Grade: F");
}

Switch Statement

The switch statement offers an alternative way to handle multiple conditions. It allows you to
specify different cases and execute code based on the value of an expression. Here is the
syntax:

localhost:3000/[Link] 157/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

switch (expression) {
case value1:
// code to be executed if expression matches value1
break;
case value2:
// code to be executed if expression matches value2
break;
default:
// code to be executed if expression doesn't match any case
}

Example:

Let's use a switch statement to print the name of the day based on a numeric value:

let day = 3;
switch (day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
case 3:
[Link]("Wednesday");
break;
default:
[Link]("Another day");
}

Ternary Operator

The ternary operator is a concise way to write simple conditions in JavaScript. It allows you to
assign a value to a variable based on a condition. The syntax is:

variable = (condition) ? value1 : value2;

Example:

Here's how you can use the ternary operator to determine if someone is an adult or a minor:

let age = 20;

let status = (age >= 18) ? "adult" : "minor";
[Link](status); // Output: adult

localhost:3000/[Link] 158/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Logical Operators

Logical operators are often used to combine multiple conditions. The most common logical
operators are && (AND), || (OR), and ! (NOT).

Example:

Consider a scenario where you want to check if a person is allowed entry based on their age
and whether they have an ID:

let age = 25;

let hasID = true;

if (age >= 18 && hasID) {

[Link]("Entry allowed.");
} else {
[Link]("Entry denied.");
}

By mastering these conditional statements, you will be able to create more powerful and
flexible JavaScript code. Use them wisely to control the flow of your applications and handle
different scenarios effectively.

localhost:3000/[Link] 159/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Loops
Loops are an essential part of JavaScript programming. They allow you to repeat a block of
code multiple times, making it easier to perform repetitive tasks or iterate over collections of
data.

There are several types of loops in JavaScript, including the for loop, while loop, and do-
while loop.

For Loop
The for loop is a fundamental construct in JavaScript, particularly useful when the number of
iterations is predetermined. It comprises three main components: initialization, condition, and
increment/decrement. Consider the following example:

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

[Link](i);
}

In this snippet, the loop executes the code block as long as the condition i < 5 holds true. The
variable i is incremented by 1 after each iteration.

Detailed Breakdown

Initialization: let i = 0; - This segment runs once before the loop commences,
initializing the loop counter variable.
Condition: i < 5; - This expression is evaluated before each iteration. If it returns true ,
the loop body executes; if false , the loop terminates.
Increment/Decrement: i++ - This part executes after each iteration of the loop body,
updating the loop counter.

While Loop
The while loop is ideal when the number of iterations is not known beforehand but is
governed by a condition. Here's an illustrative example:

localhost:3000/[Link] 160/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

let i = 0;
while (i < 5) {
[Link](i);
i++;
}

In this case, the loop continues to execute the code block as long as the condition i < 5
remains true. The variable i is incremented by 1 within the loop.

Detailed Breakdown

Initialization: let i = 0; - The loop counter is initialized before the loop begins.
Condition: i < 5 - This expression is evaluated before each iteration. If it evaluates to
true , the loop body executes; if false , the loop stops.
Increment/Decrement: i++ - This part runs within the loop body, updating the loop
counter.

Do-While Loop
The do-while loop is akin to the while loop but with a key difference: it ensures that the code
block is executed at least once before the condition is checked. Here's an example:

let i = 0;
do {
[Link](i);
i++;
} while (i < 5);

In this example, the code block executes first, and then the condition i < 5 is evaluated. If the
condition is true, the loop continues to execute.

Detailed Breakdown

Initialization: let i = 0; - The loop counter is initialized before the loop starts.
Loop Body: [Link](i); i++; - This part runs at least once before the condition is
checked.
Condition: i < 5 - This expression is evaluated after each iteration. If it evaluates to
true , the loop body executes again; if false , the loop stops.

localhost:3000/[Link] 161/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Practical Use Cases

For Loop: Ideal for iterating over arrays or when the number of iterations is known.
While Loop: Useful for reading data from a source until a condition is met.
Do-While Loop: Suitable for scenarios where the loop body must execute at least once,
such as user input validation.

These basic loop structures in JavaScript provide powerful mechanisms to iterate over data and
perform repetitive tasks. Experimenting with different loop types will help you become more
adept at using them effectively.

localhost:3000/[Link] 162/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Functions
Functions in JavaScript are an essential part of the language, allowing you to encapsulate
reusable blocks of code and execute them whenever needed. In this chapter, we will explore
the various ways you can define and use functions in JavaScript, providing you with a solid
foundation to harness their power effectively.

Function Declaration
A function declaration defines a named function. The syntax includes the function keyword,
followed by the function name, a list of parameters (enclosed in parentheses), and the function
body (enclosed in curly braces). This method is straightforward and widely used.

function functionName() {
// code to be executed
}

For example, consider a simple function that greets the user:

function greet() {
[Link]("Hello, world!");
}

Function Invocation
To execute a function, you simply need to invoke it by using its name followed by a pair of
parentheses. This tells JavaScript to run the code inside the function.

functionName();

Using our previous example, invoking the greet function would look like this:

greet(); // Outputs: Hello, world!

localhost:3000/[Link] 163/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Function Parameters
Functions can accept parameters, which act as placeholders for values that will be passed when
the function is invoked. These parameters allow you to pass data into your functions and use
them within the function body.

function addNumbers(num1, num2) {

return num1 + num2;
}

For instance, you can call the addNumbers function with two arguments:

[Link](addNumbers(5, 10)); // Outputs: 15

Return Statement
Functions can also return values using the return statement. This allows you to get the result
of a computation or perform further operations with the returned value.

function multiplyNumbers(num1, num2) {

return num1 * num2;
}

For example, you can capture the result of the multiplyNumbers function:

[Link](multiplyNumbers(5, 10)); // Outputs: 50

Function Expressions
Functions can also be assigned to variables, known as function expressions. This allows you to
create anonymous functions or pass functions as arguments to other functions.

const multiply = function(num1, num2) {

return num1 * num2;
};

You can then use the variable to invoke the function:

localhost:3000/[Link] 164/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

[Link](multiply(5, 10)); // Outputs: 50

Arrow Functions (ES6)

Arrow functions provide a more concise syntax for writing functions. They are especially useful
for one-liner functions and do not have their own this context, which makes them particularly
useful in certain situations.

const multiply = (num1, num2) => num1 * num2;

For example, using an arrow function:

[Link](multiply(5, 10)); // Outputs: 50

Default Parameters (ES6)

You can set default values for parameters in functions. If no argument is provided for a
parameter with a default value, the default value will be used.

function greet(name = "Guest") {

[Link](`Hello, ${name}!`);
}

For instance, calling the greet function without an argument:

greet(); // Outputs: Hello, Guest!

greet("Alice"); // Outputs: Hello, Alice!

Rest Parameters (ES6)

Rest parameters allow you to represent an indefinite number of arguments as an array. This is
useful when you want to work with a variable number of parameters.

function sum(...numbers) {
return [Link]((total, num) => total + num, 0);
}

localhost:3000/[Link] 165/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

For example, summing multiple numbers:

[Link](sum(1, 2, 3, 4)); // Outputs: 10

Higher-Order Functions
Functions that operate on other functions, either by taking them as arguments or by returning
them, are called higher-order functions. These functions are a powerful feature of JavaScript,
enabling you to write more abstract and flexible code.

function applyOperation(num1, num2, operation) {

return operation(num1, num2);
}

For instance, using a higher-order function to add numbers:

const add = (a, b) => a + b;

[Link](applyOperation(5, 10, add)); // Outputs: 15

In conclusion, functions are powerful tools in JavaScript that enable code reuse and
modularization. By understanding and utilizing the different types of functions and their
features, you can write more efficient and maintainable code.

localhost:3000/[Link] 166/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Events
Events in JavaScript are the cornerstone of creating interactive and dynamic web applications.
They allow developers to respond to user actions or other occurrences within the application,
making the web experience more engaging and responsive.

Adding Event Listeners

To harness the power of events, JavaScript provides the addEventListener method. This
method enables you to attach event handlers to specific elements, allowing you to define what
should happen when an event occurs. The addEventListener method requires two
arguments: the event type and the event handler function. For instance, to listen for a click
event on a button with the id "myButton", you can use the following code:

const button = [Link]("myButton");

[Link]("click", function() {
// Your code here
});

Inline Event Handlers

Another way to handle events is by using inline event handlers directly within your HTML
markup. This approach involves adding event attributes to HTML elements. For example, to
execute a function when a button is clicked, you can write:

<button onclick="myFunction()">Click me</button>

While inline event handlers are straightforward and easy to implement, they are generally
discouraged for larger applications due to potential maintainability issues and the lack of
separation between HTML and JavaScript.

Types of Events
JavaScript supports a diverse range of events, each corresponding to different user interactions
or browser actions. Some common types of events include:

localhost:3000/[Link] 167/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Mouse Events: click , dblclick , mousedown , mouseup , mouseover , mouseout ,

mousemove
Keyboard Events: keydown , keypress , keyup
Form Events: submit , change , focus , blur
Window Events: load , resize , scroll , unload

For a comprehensive list of events, refer to the MDN Web Docs documentation.

Event Object
When an event is triggered, the event handler function is executed, and an event object is
passed to it. This event object contains valuable information about the event and the element
that triggered it. By accessing the event object, you can perform actions based on the event
details, manipulate the DOM, or update your application's state. For example:

[Link]("click", function(event) {
[Link]("Button clicked:", [Link]);
});

Removing Event Listeners

To prevent memory leaks and ensure optimal performance, it is important to remove event
listeners when they are no longer needed. The removeEventListener method allows you to
detach an event handler from an element. This method requires the same event type and
handler function that were used with addEventListener :

[Link]("click", handleClick);

Event Delegation
Event delegation is a powerful technique that involves adding a single event listener to a parent
element to manage events for multiple child elements. This approach is particularly useful for
handling events on dynamically generated content. For example:

localhost:3000/[Link] 168/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

[Link]("parent").addEventListener("click", function(event) {
if ([Link] && [Link]("[Link]")) {
// Handle button click
}
});

Understanding and effectively utilizing events in JavaScript is crucial for creating interactive and
user-friendly web applications. By mastering event handling techniques, you can significantly
enhance the user experience and add a layer of interactivity to your projects. Whether you are
dealing with simple click events or complex interactions, a solid grasp of events will empower
you to build more dynamic and responsive web applications.

localhost:3000/[Link] 169/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Document Object Model

The Document Object Model (DOM) serves as a crucial programming interface for HTML and
XML documents. It conceptualizes the structure of a web page as a tree-like structure, where
each node signifies an element, attribute, or text. This abstraction allows programming
languages to interact seamlessly with the page's content, structure, and style.

Commonly Used Methods of the DOM

1. getElementById()

The getElementById() method is designed to return the element with a specified ID. This
method is one of the most frequently used for quickly accessing a single element. For instance:

const element = [Link]('myElement');

Use Case: This method is ideal for accessing elements with unique IDs, such as form inputs or
specific sections of a page.

2. getElementsByClassName()

The getElementsByClassName() method returns a collection of elements that share a specified

class name. It is particularly useful for accessing multiple elements simultaneously. For
example:

const elements = [Link]('myClass');

Use Case: This method is beneficial for applying changes to a group of elements, such as
styling or event handling.

3. getElementsByTagName()

The getElementsByTagName() method returns a collection of elements with a specified tag

name. It can be employed to access all elements of a particular type. For instance:

localhost:3000/[Link] 170/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

const elements = [Link]('div');

Use Case: This method is useful for iterating over all elements of a specific type, such as all
<div> or <p> tags.

4. querySelector()

The querySelector() method returns the first element that matches a specified CSS selector.
It provides a powerful way to access elements using CSS selectors. For example:

const element = [Link]('.myClass');

Use Case: This method is ideal for accessing the first occurrence of an element that matches a
complex CSS selector.

5. querySelectorAll()

The querySelectorAll() method returns a collection of elements that match a specified CSS
selector. It is similar to querySelector() but returns all matching elements. For example:

const elements = [Link]('div');

Use Case: This method is useful for applying changes to all elements that match a specific CSS
selector.

6. createElement()

The createElement() method creates a new element with a specified tag name. It is used to
dynamically create new elements. For example:

const newElement = [Link]('div');

Use Case: This method is essential for adding new elements to the DOM, such as creating new
content or UI components.

localhost:3000/[Link] 171/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

7. appendChild()

The appendChild() method appends a child element to a parent element. It is used to add
new elements to the DOM. For example:

[Link](childElement);

Use Case: This method is useful for building up the DOM tree by adding new elements as
children of existing elements.

8. removeChild()

The removeChild() method removes a child element from its parent element. It is used to
delete elements from the DOM. For example:

[Link](childElement);

Use Case: This method is useful for removing elements that are no longer needed, such as
deleting items from a list.

These methods represent just a few examples of the many available in the DOM. They
empower developers to manipulate the structure and content of a web page dynamically,
enabling the creation of interactive and responsive web applications.

localhost:3000/[Link] 172/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Objects
Objects in JavaScript are a fundamental data type that allows you to store and manipulate
collections of key-value pairs. They are versatile and widely used in JavaScript programming.

Creating Objects
To create an object, you can use either the object literal syntax or the Object constructor. Let's
start with the object literal syntax, which is the most common and straightforward way to
create an object:

const person = {
name: 'John',
age: 30,
profession: 'Developer'
};

In this example, person is an object with three properties: name , age , and profession . Each
property has a corresponding value, making it easy to store related data together.

Alternatively, you can create an object using the Object constructor. This approach is less
common but can be useful in certain scenarios:

const person = new Object();

[Link] = 'John';
[Link] = 30;
[Link] = 'Developer';

Both methods achieve the same result, but the object literal syntax is generally preferred for its
simplicity and readability.

Accessing Properties
Once you have an object, you can access its properties using either dot notation or bracket
notation. Dot notation is more concise and commonly used:

[Link]([Link]); // Output: John

localhost:3000/[Link] 173/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Bracket notation is useful when property names are dynamic or not valid identifiers:

[Link](person['age']); // Output: 30

Modifying Properties
JavaScript objects are dynamic, meaning you can add or modify properties at any time. For
example, you can add a new property or update an existing one:

[Link] = 'New York';

[Link] = 31;

In this example, we added a new property location and updated the age property.

Deleting Properties
If you need to remove a property from an object, you can use the delete operator:

delete [Link];

This will remove the profession property from the person object.

Methods
Objects can also have methods, which are functions stored as object properties. Methods allow
objects to perform actions and can be defined using function expressions:

const calculator = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};

[Link]([Link](5, 3)); // Output: 8

[Link]([Link](10, 4)); // Output: 6

localhost:3000/[Link] 174/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In this example, calculator is an object with two methods: add and subtract . These
methods can be invoked using dot notation.

Nested Objects
Objects can contain other objects, allowing you to create complex data structures. For example,
you can represent a company with nested objects for its address:

const company = {
name: 'Tech Corp',
address: {
street: '123 Main St',
city: 'Techville',
state: 'CA'
}
};

[Link]([Link]); // Output: Techville

This structure allows you to organize related data in a hierarchical manner.

Iterating Over Properties

To iterate over an object's properties, you can use a for...in loop. This loop will log each
property name and value in the person object:

for (let key in person) {

[Link](key + ': ' + person[key]);
}

Object Methods
JavaScript provides several built-in methods for working with objects, such as [Link]() ,
[Link]() , and [Link]() . These methods are useful for extracting and
manipulating object data:

localhost:3000/[Link] 175/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

[Link]([Link](person)); // Output: ['name', 'age', 'location']

[Link]([Link](person)); // Output: ['John', 31, 'New York']
[Link]([Link](person)); // Output: [['name', 'John'], ['age', 31],
['location', 'New York']]

Conclusion
Objects in JavaScript are powerful and flexible, allowing you to represent complex data
structures and behaviors. Understanding how to work with objects is essential for JavaScript
developers. By mastering object creation, property manipulation, methods, and iteration, you
can effectively manage and utilize data in your JavaScript applications.

localhost:3000/[Link] 176/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Arrays
Arrays are a fundamental data structure in JavaScript, enabling you to store and manipulate
collections of values efficiently. In this chapter, we will delve into the essentials of working with
arrays in JavaScript, along with some advanced techniques and methods to enhance your
programming skills.

Creating an Array

To create an array in JavaScript, you can use the array literal syntax, represented by square
brackets [] . For instance:

let fruits = ['apple', 'banana', 'orange'];

Alternatively, you can create an array using the Array constructor:

let fruits = new Array('apple', 'banana', 'orange');

Accessing Array Elements

Accessing individual elements in an array is straightforward using their index. The index starts
at 0 for the first element and increments by 1 for each subsequent element. For example:

let fruits = ['apple', 'banana', 'orange'];

[Link](fruits[0]); // Output: 'apple'

[Link](fruits[1]); // Output: 'banana'
[Link](fruits[2]); // Output: 'orange'

Modifying Array Elements

You can modify the value of an array element by assigning a new value to its corresponding
index. For example:

localhost:3000/[Link] 177/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

let fruits = ['apple', 'banana', 'orange'];

fruits[1] = 'grape';

[Link](fruits); // Output: ['apple', 'grape', 'orange']

Array Properties

Arrays come with several properties that provide useful information. The most commonly used
property is length , which returns the number of elements in the array:

let fruits = ['apple', 'banana', 'orange'];

[Link]([Link]); // Output: 3

Array Methods

JavaScript offers a variety of built-in methods to manipulate arrays. Some commonly used array
methods include:

push() : Adds one or more elements to the end of an array.

pop() : Removes the last element from an array.
shift() : Removes the first element from an array.
unshift() : Adds one or more elements to the beginning of an array.
splice() : Adds or removes elements from an array at a specified index.
slice() : Returns a shallow copy of a portion of an array into a new array object.
concat() : Merges two or more arrays into a new array.
indexOf() : Returns the first index at which a given element can be found in the array.
includes() : Determines whether an array includes a certain value among its entries.
forEach() : Executes a provided function once for each array element.
map() : Creates a new array populated with the results of calling a provided function on
every element in the calling array.
filter() : Creates a new array with all elements that pass the test implemented by the
provided function.
reduce() : Executes a reducer function on each element of the array, resulting in a single
output value.

Here are some examples demonstrating these methods:

localhost:3000/[Link] 178/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

let fruits = ['apple', 'banana', 'orange'];

[Link]('grape');
[Link](fruits); // Output: ['apple', 'banana', 'orange', 'grape']

[Link]();
[Link](fruits); // Output: ['apple', 'banana', 'orange']

[Link]();
[Link](fruits); // Output: ['banana', 'orange']

[Link]('kiwi');
[Link](fruits); // Output: ['kiwi', 'banana', 'orange']

[Link](1, 1, 'mango');
[Link](fruits); // Output: ['kiwi', 'mango', 'orange']

let citrus = [Link](1, 2);

[Link](citrus); // Output: ['mango']

let moreFruits = [Link](['lemon', 'lime']);

[Link](moreFruits); // Output: ['kiwi', 'mango', 'orange', 'lemon', 'lime']

[Link]([Link]('mango')); // Output: 1
[Link]([Link]('banana')); // Output: false

[Link](fruit => [Link](fruit)); // Output: 'kiwi', 'mango', 'orange'

let upperCaseFruits = [Link](fruit => [Link]());

[Link](upperCaseFruits); // Output: ['KIWI', 'MANGO', 'ORANGE']

let filteredFruits = [Link](fruit => [Link]('o'));

[Link](filteredFruits); // Output: ['orange']

let totalLength = [Link]((total, fruit) => total + [Link], 0);

[Link](totalLength); // Output: 15

Conclusion

In this chapter, we covered the basics of working with arrays in JavaScript, as well as some
advanced techniques and methods. Arrays are powerful tools that allow you to store and
manipulate collections of values. By understanding how to create, access, and modify array
elements, as well as utilize array properties and methods, you can leverage the full potential of
arrays in your JavaScript programs.

localhost:3000/[Link] 179/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Strings
Strings in JavaScript are sequences of characters enclosed in single quotes ( ' ) or double
quotes ( " ). They are used to represent text and are one of the fundamental data types in the
language.

Immutability
In JavaScript, strings are immutable, which means that once a string is created, it cannot be
changed. However, you can create new strings based on operations performed on existing
ones. This immutability ensures that strings remain consistent and prevents unintended side
effects.

Common Operations

Concatenation

Concatenation is the process of joining two or more strings together. In JavaScript, this is
typically done using the + operator:

let greeting = 'Hello, ' + 'world!';

String Interpolation

String interpolation allows you to embed expressions within a string using template literals,
which are enclosed in backticks ( ` ). This feature makes it easier to construct strings
dynamically:

let name = 'Alice';

let greeting = `Hello, ${name}!`;

localhost:3000/[Link] 180/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Accessing Characters

You can access individual characters in a string using bracket notation, where the index starts
at 0:

let myString = 'Hello';

let firstChar = myString[0]; // 'H'

Built-in Methods
JavaScript provides a rich set of built-in methods for working with strings. Some of the most
commonly used methods include:

Finding the length of a string: Use the length property to get the number of characters
in a string.

let myString = 'Hello';

let length = [Link]; // 5

Changing case: Convert a string to uppercase or lowercase using toUpperCase() and

toLowerCase() .

let myString = 'Hello';

let upper = [Link](); // 'HELLO'
let lower = [Link](); // 'hello'

Searching for a substring: Use indexOf() to find the position of a substring within a
string.

let myString = 'Hello, world!';

let position = [Link]('world'); // 7

Extracting a substring: Use substring() , substr() , or slice() to extract parts of a

string.

let myString = 'Hello, world!';

let sub = [Link](0, 5); // 'Hello'

localhost:3000/[Link] 181/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Unicode Support
JavaScript supports Unicode characters, allowing you to use characters from different
languages and scripts in your strings. This is particularly useful for internationalization and
working with diverse datasets.

Escape Sequences

Escape sequences are used to represent special characters within strings. Common escape
sequences include:

Newline: \n
Tab: \t
Backslash: \\
Single quote: \'
Double quote: \"

let multiline = 'This is line one.\nThis is line two.';

Strings are a crucial part of JavaScript programming. Understanding how to work with them
effectively is essential for building robust and dynamic applications. By mastering string
operations and methods, you can manipulate and extract information from text efficiently,
making your code more powerful and versatile.

localhost:3000/[Link] 182/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Numbers in JavaScript
Numbers are a fundamental data type in JavaScript, essential for representing numeric values.
JavaScript supports both integers and floating-point numbers, which are stored as 64-bit
double-precision IEEE 754 values. This chapter will delve into the various aspects of working
with numbers in JavaScript, including declaring variables, performing arithmetic operations,
utilizing mathematical functions, converting between types, and handling edge cases.

Declaring Number Variables

To declare a number variable in JavaScript, you can use the let or const keyword followed by
the variable name and an assignment operator. For example:

let age = 25;

const pi = 3.14;

Here, age is a variable that can be reassigned, while pi is a constant that cannot be changed
once assigned.

Arithmetic Operators
JavaScript provides a variety of arithmetic operators that can be used with numbers. These
include addition ( + ), subtraction ( - ), multiplication ( * ), division ( / ), and modulus ( % ).
Consider the following example:

let x = 10;
let y = 5;

let sum = x + y; // 15
let difference = x - y; // 5
let product = x * y; // 50
let quotient = x / y; // 2
let remainder = x % y; // 0

These operators allow you to perform basic mathematical operations on numeric values.

localhost:3000/[Link] 183/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Mathematical Functions
JavaScript also supports a variety of mathematical functions that can be used with numbers.
Some of the most commonly used functions include:

[Link]() : Calculates the square root of a number.

[Link]() : Performs exponentiation.
[Link]() : Generates a random number between 0 and 1.

Here are some examples:

let squareRoot = [Link](16); // 4

let power = [Link](2, 3); // 8
let random = [Link](); // generates a random number between 0 and 1

These functions provide additional capabilities for performing complex mathematical

calculations.

Number Conversion
In JavaScript, numbers can be converted to strings using the toString() method, and strings
can be converted to numbers using the parseInt() or parseFloat() functions. For example:

let number = 42;

let numberAsString = [Link](); // "42"

let string = "3.14";

let stringAsNumber = parseFloat(string); // 3.14

These conversion methods are useful when you need to switch between numeric and string
representations of data.

Handling Edge Cases

When working with numbers in JavaScript, it's important to handle edge cases such as:

NaN (Not-a-Number): This value is returned when a mathematical operation fails (e.g.,
parseInt("abc") ).
Infinity: This value is returned when a number exceeds the upper limit of the floating-
point range (e.g., 1 / 0 ).
localhost:3000/[Link] 184/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Precision Issues: Due to the way floating-point numbers are represented, some
calculations may result in precision errors (e.g., 0.1 + 0.2 !== 0.3 ).

Consider the following examples:

let notANumber = parseInt("abc"); // NaN

let infinity = 1 / 0; // Infinity
let precisionIssue = 0.1 + 0.2; // 0.30000000000000004

By being aware of these edge cases and handling them appropriately, you can ensure that your
code is robust and reliable.

In summary, numbers in JavaScript are versatile and powerful, allowing you to perform a wide
range of operations and calculations. By understanding how to declare variables, use
arithmetic operators, leverage mathematical functions, convert between types, and handle
edge cases, you can effectively work with numeric data in your JavaScript programs.

localhost:3000/[Link] 185/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Dates
In JavaScript, dates can be represented using the Date object. This object provides various
methods to work with dates and times.

Creating Date Objects

To create a new date object in JavaScript, you can use the new Date() constructor. By default,
this will create a date object representing the current date and time. For example:

const currentDate = new Date();

[Link](currentDate);

This code snippet will output the current date and time when executed.

You can also create a date object by passing specific values for the year, month, day, hour,
minute, second, and millisecond. It's important to note that the month is zero-indexed,
meaning January is represented by 0, February by 1, and so on. Here's an example:

const specificDate = new Date(2022, 0, 1, 12, 0, 0, 0);

[Link](specificDate);

In this example, the date object represents January 1, 2022, at [Link] PM.

Common Operations
Once you have a date object, you can perform various operations on it. Let's explore some
common operations you might find useful.

Getting Date and Time Components

You can extract different components of the date and time using various methods provided by
the Date object. For instance:

localhost:3000/[Link] 186/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

const year = [Link]();

const month = [Link](); // zero-indexed
const day = [Link]();
const hour = [Link]();
const minute = [Link]();
const second = [Link]();
const millisecond = [Link]();

These methods allow you to retrieve the year, month, day, hour, minute, second, and
millisecond from a date object.

Formatting Dates

Formatting dates as strings can be done using methods like toDateString() , toISOString() ,
and toLocaleDateString() . Here are some examples:

const formattedDate = [Link]();

[Link](formattedDate); // e.g., "Mon Jan 01 2022"

const isoString = [Link]();

[Link](isoString); // e.g., "2022-01-01T[Link].000Z"

const localeString = [Link]();

[Link](localeString); // e.g., "1/1/2022" in the US

These methods provide different formats for representing dates as strings.

Arithmetic Operations

You can perform arithmetic operations on dates, such as adding or subtracting days. For
example, to get the date for tomorrow:

const tomorrow = new Date();

[Link]([Link]() + 1);
[Link](tomorrow);

This code snippet creates a new date object representing the day after the current date.

Comparing Dates

Comparing dates can be done using standard comparison operators. Here's an example:

localhost:3000/[Link] 187/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

const date1 = new Date(2022, 0, 1);

const date2 = new Date(2022, 0, 2);

if (date1 < date2) {

[Link]("date1 is before date2");
} else if (date1 > date2) {
[Link]("date1 is after date2");
} else {
[Link]("date1 and date2 are equal");
}

This code compares two date objects and logs the result.

Additional Methods
The Date object provides many more methods and properties to work with dates and times.
Some of these include:

getTime() : Returns the number of milliseconds since January 1, 1970.

setTime(milliseconds) : Sets the date and time by the number of milliseconds since
January 1, 1970.
getDay() : Returns the day of the week (0 for Sunday, 1 for Monday, etc.).
toUTCString() : Converts the date to a string, using the UTC time zone.

Here are some examples:

const timestamp = [Link]();

[Link](timestamp);

const newDate = new Date();

[Link](timestamp);
[Link](newDate);

const dayOfWeek = [Link]();

[Link](dayOfWeek); // e.g., 0 for Sunday

const utcString = [Link]();

[Link](utcString); // e.g., "Sat, 01 Jan 2022 [Link] GMT"

These methods provide additional functionality for working with dates and times in JavaScript.
The Date object is a powerful tool for handling dates and times in your applications.

localhost:3000/[Link] 188/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Math
JavaScript provides a built-in Math object that allows you to perform various mathematical
operations. Here are some commonly used methods:

Commonly Used Math Methods

JavaScript provides a built-in Math object that allows you to perform various mathematical
operations. Here are some commonly used methods:

[Link](x) : Returns the absolute value of x . This is useful for converting negative
numbers to positive.
[Link](x) : Returns the smallest integer greater than or equal to x . This is useful for
rounding up numbers.
[Link](x) : Returns the largest integer less than or equal to x . This is useful for
rounding down numbers.
[Link](x) : Returns the value of x rounded to the nearest integer. This is useful for
standard rounding.
[Link](x, y, z, ...) : Returns the largest of the given numbers. This is useful for
finding the maximum value in a list of numbers.
[Link](x, y, z, ...) : Returns the smallest of the given numbers. This is useful for
finding the minimum value in a list of numbers.
[Link]() : Returns a random number between 0 (inclusive) and 1 (exclusive). This is
useful for generating random values.
[Link](x, y) : Returns the value of x raised to the power of y . This is useful for
exponentiation.
[Link](x) : Returns the square root of x . This is useful for finding the square root of
a number.
[Link](x) , [Link](x) , [Link](x) : Returns the sine, cosine, and tangent of x (in
radians). These are useful for trigonometric calculations.
[Link] : Represents the mathematical constant π (pi). This is useful for calculations
involving circles.

Example Usage

Let's look at some examples to understand how these methods work:

localhost:3000/[Link] 189/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

const x = -5;
[Link]([Link](x)); // Output: 5

const y = 3.7;
[Link]([Link](y)); // Output: 4

const z = 9.2;
[Link]([Link](z)); // Output: 9

const a = 2.8;
[Link]([Link](a)); // Output: 3

const numbers = [1, 5, 3, 9, 2];

[Link]([Link](...numbers)); // Output: 9

[Link]([Link]()); // Output: a random number between 0 and 1

[Link]([Link](2, 3)); // Output: 8

[Link]([Link](16)); // Output: 4

[Link]([Link]([Link] / 2)); // Output: 1

[Link]([Link]([Link])); // Output: -1

[Link]([Link](0)); // Output: 0

[Link]([Link]); // Output: 3.141592653589793

These are just a few examples of what you can do with the Math object in JavaScript. Feel free
to explore more methods and experiment with different mathematical calculations in your
JavaScript code.

Additional Math Methods

In addition to the methods listed above, the Math object also includes other useful methods
such as:

[Link](x) : Returns the natural logarithm (base e) of x .

[Link](x) : Returns the value of e raised to the power of x .
Math.log10(x) : Returns the base 10 logarithm of x .
Math.log2(x) : Returns the base 2 logarithm of x .
[Link](x) : Returns the cube root of x .
[Link](x, y, ...) : Returns the square root of the sum of squares of its arguments.

localhost:3000/[Link] 190/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Example Usage of Additional Methods

Here are some examples of these additional methods:

[Link]([Link](1)); // Output: 0

[Link]([Link](1)); // Output: 2.718281828459045

[Link](Math.log10(100)); // Output: 2

[Link](Math.log2(8)); // Output: 3

[Link]([Link](27)); // Output: 3

[Link]([Link](3, 4)); // Output: 5

By leveraging the Math object, you can perform a wide range of mathematical operations in
your JavaScript code, making it a powerful tool for developers.

localhost:3000/[Link] 191/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Type Conversion
Type conversion in JavaScript is the process of converting one data type to another. JavaScript
provides several built-in functions and operators to facilitate this. Understanding how type
conversion works is crucial for writing robust and error-free code.

Common Type Conversion Methods

1. String Conversion

To convert a value to a string, you can use the String() function or concatenate the value with
an empty string ( '' ).

let num = 42;

let str = String(num);
[Link](typeof str); // Output: string

Alternatively:

let num = 42;

let str = num + '';
[Link](typeof str); // Output: string

2. Number Conversion

To convert a value to a number, use the Number() function or the unary plus operator ( + ).

let str = '42';

let num = Number(str);
[Link](typeof num); // Output: number

Alternatively:

let str = '42';

let num = +str;
[Link](typeof num); // Output: number

localhost:3000/[Link] 192/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

3. Boolean Conversion

JavaScript's Boolean() function converts a value to a boolean. The following values are
considered falsy and convert to false : 0 , NaN , null , undefined , false , and an empty
string ( '' ). All other values are truthy and convert to true .

let num = 0;
let bool = Boolean(num);
[Link](bool); // Output: false

Alternatively:

let num = 0;
let bool = !!num;
[Link](bool); // Output: false

4. Implicit Type Conversion

JavaScript also performs implicit type conversion in certain situations. For example, using the +
operator with a string and a number converts the number to a string and concatenates them.

let num = 42;

let str = 'The answer is ' + num;
[Link](str); // Output: The answer is 42

Implicit type conversion can sometimes lead to unexpected results:

[Link]('5' - 3); // Output: 2

[Link]('5' + 3); // Output: 53

In the first example, the - operator converts the string '5' to a number before performing
the subtraction. In the second example, the + operator concatenates the string '5' with the
number 3 .

localhost:3000/[Link] 193/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Additional Type Conversion Methods

5. Parsing Integers and Floats

JavaScript provides parseInt() and parseFloat() functions to convert strings to integers and
floating-point numbers, respectively.

let str = '42.5';

let intNum = parseInt(str);
let floatNum = parseFloat(str);
[Link](intNum); // Output: 42
[Link](floatNum); // Output: 42.5

6. Date Conversion

To convert a date to a number (timestamp), use the getTime() method or the unary plus
operator ( + ).

let date = new Date();

let timestamp = [Link]();
[Link](timestamp); // Output: 1633024800000 (example)

let timestamp2 = +date;

[Link](timestamp2); // Output: 1633024800000 (example)

7. JSON Conversion

JavaScript provides [Link]() to convert an object to a JSON string and [Link]()

to convert a JSON string back to an object.

let obj = { name: 'John', age: 30 };

let jsonString = [Link](obj);
[Link](jsonString); // Output: '{"name":"John","age":30}'

let parsedObj = [Link](jsonString);

[Link](parsedObj); // Output: { name: 'John', age: 30 }

Understanding these type conversion methods will help you handle data more effectively in
your JavaScript programs.

localhost:3000/[Link] 194/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Error Handling
Error handling is an essential aspect of JavaScript programming. It allows developers to
gracefully handle and manage errors that may occur during the execution of their code. Proper
error handling ensures that your application can recover from unexpected issues and continue
to function correctly.

Try-Catch Blocks
One common approach to error handling in JavaScript is using try-catch blocks. The try block
contains the code that may potentially throw an error, while the catch block is used to handle
and process the error if it occurs. By wrapping the code in a try-catch block, you can prevent
the entire program from crashing and provide a fallback mechanism.

Here's an example of how try-catch blocks can be used for error handling:

try {
// Code that may throw an error
throw new Error('Something went wrong!');
} catch (error) {
// Handle the error
[Link](error);
}

In the above example, if an error is thrown within the try block, it will be caught by the catch
block. The error object can then be accessed and processed accordingly. In this case, we simply
log the error message to the console using [Link]() .

The Finally Block

Additionally, JavaScript provides the finally block, which can be used to execute code
regardless of whether an error occurred or not. This block is useful for performing cleanup
tasks or releasing resources.

localhost:3000/[Link] 195/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

try {
// Code that may throw an error
throw new Error('Something went wrong!');
} catch (error) {
// Handle the error
[Link](error);
} finally {
// Cleanup or resource release
[Link]('Error handling complete.');
}

The finally block will always execute after the try and catch blocks, whether an error was
thrown or not. This makes it an ideal place to put code that you want to run no matter what,
such as closing files, stopping timers, or releasing resources.

Custom Error Types

JavaScript also allows you to create custom error types by extending the built-in Error class.
This can be useful for creating more specific error messages and handling different types of
errors in a more granular way.

class CustomError extends Error {

constructor(message) {
super(message);
[Link] = 'CustomError';
}
}

try {
throw new CustomError('This is a custom error!');
} catch (error) {
if (error instanceof CustomError) {
[Link]('Caught a custom error:', [Link]);
} else {
[Link]('Caught an error:', [Link]);
}
}

In this example, we define a CustomError class that extends the built-in Error class. When an
instance of CustomError is thrown, it can be caught and handled specifically in the catch block.

localhost:3000/[Link] 196/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Best Practices
When handling errors in JavaScript, consider the following best practices:

1. Be Specific: Catch only the errors you expect and know how to handle. Avoid using
generic catch-all error handling.
2. Log Errors: Always log errors to help with debugging and monitoring. Use tools like
logging libraries or external services for better error tracking.
3. Graceful Degradation: Provide fallback mechanisms to ensure your application can
continue to function even when an error occurs.
4. Avoid Silent Failures: Do not suppress errors without handling them. This can make
debugging difficult and hide potential issues.
5. Use Custom Errors: Create custom error types for more specific error handling and
better code readability.

By following these practices and utilizing try-catch blocks, the finally block, and custom error
types, you can effectively manage errors in your JavaScript code and build more robust
applications.

localhost:3000/[Link] 197/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Classes
Classes are a fundamental aspect of object-oriented programming in JavaScript. They offer a
structured way to define blueprints for creating objects that share common properties and
methods, enhancing code organization and reusability.

Defining a Class

To define a class in JavaScript, you use the class keyword followed by the class name.
Consider the following example:

class Person {
constructor(name, age) {
[Link] = name;
[Link] = age;
}

sayHello() {
[Link](`Hello, my name is ${[Link]} and I'm ${[Link]} years
old.`);
}
}

In this example, we define a Person class with a constructor method that accepts name and
age as parameters. The constructor initializes these values to the object's properties.
Additionally, the sayHello method logs a greeting message to the console.

Creating an Instance

To create an instance of a class, you use the new keyword followed by the class name and any
required arguments. Here's how you can instantiate a Person object:

const john = new Person('John Doe', 25);

[Link](); // Output: Hello, my name is John Doe and I'm 25 years old.

Static Methods and Properties

Classes can also have static methods and properties that are shared among all instances.
These are accessed using the class name itself. For example:

localhost:3000/[Link] 198/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

class Circle {
static PI = 3.14159;

static calculateArea(radius) {
return [Link] * radius * radius;
}
}

[Link]([Link](5)); // Output: 78.53975

In this example, the Circle class has a static property PI and a static method
calculateArea . The static method can be invoked directly on the class without needing an
instance.

Inheritance

JavaScript classes support inheritance, allowing you to create subclasses that inherit properties
and methods from a parent class. This is achieved using the extends keyword. Consider the
following example:

class Animal {
constructor(name) {
[Link] = name;
}

speak() {
[Link](`${[Link]} makes a sound.`);
}
}

class Dog extends Animal {

speak() {
[Link](`${[Link]} barks.`);
}
}

const dog = new Dog('Buddy');

[Link](); // Output: Buddy barks.

In this example, the Animal class has a speak method. The Dog class extends Animal and
overrides the speak method to provide a specific implementation.

localhost:3000/[Link] 199/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Private Fields and Methods

JavaScript supports private fields and methods, which are not accessible outside the class.
Private fields are declared using the # prefix. For example:

class Car {
#engineStatus = 'off';

startEngine() {
this.#engineStatus = 'on';
[Link]('Engine started.');
}

getEngineStatus() {
return this.#engineStatus;
}
}

const car = new Car();

[Link](); // Output: Engine started.
[Link]([Link]()); // Output: on

In this example, the #engineStatus field is private and can only be accessed within the Car
class.

Getters and Setters

Getters and setters allow you to define methods that are accessed like properties. They are
useful for controlling access to an object's properties. For example:

class Rectangle {
constructor(width, height) {
[Link] = width;
[Link] = height;
}

get area() {
return [Link] * [Link];
}

set area(value) {
throw new Error('Area is a read-only property.');
}
}

const rect = new Rectangle(10, 5);

[Link]([Link]); // Output: 50

localhost:3000/[Link] 200/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In this example, the area getter calculates the rectangle's area, and the setter throws an error
if someone tries to set the area directly.

Classes in JavaScript provide a powerful way to organize and structure your code, making it
easier to manage objects and their behaviors.

localhost:3000/[Link] 201/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Rust

localhost:3000/[Link] 202/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Variables and Mutability

In Rust, variables are declared using the let keyword. By default, variables are immutable,
meaning their values cannot be changed once assigned. However, you can make a variable
mutable by using the mut keyword.

Here's an example of declaring an immutable variable:

let x = 5;

And here's an example of declaring a mutable variable:

let mut y = 10;

With mutable variables, you can change their values later in the code:

y = 20;

It's important to note that Rust encourages immutability by default, as it helps prevent bugs
and enables better concurrency. Therefore, it's recommended to use immutable variables
whenever possible and only resort to mutability when necessary.

By using immutable variables, Rust ensures that you can reason about your code more easily
and avoid unexpected changes to values. This helps in writing safer and more reliable
programs.

localhost:3000/[Link] 203/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Data Types
In Rust, there are several built-in data types that you can use to define variables. Here are some
of the commonly used data types:

Integer Types

Rust provides a variety of integer types, which differ in size and signedness. Here are a few
examples:

i8 : Signed 8-bit integer (-128 to 127)

u16 : Unsigned 16-bit integer (0 to 65,535)
i32 : Signed 32-bit integer (-2,147,483,648 to 2,147,483,647)

Example:

let age: u8 = 25;

let count: i32 = -10;

Floating-Point Types

Rust supports two floating-point types: f32 and f64 . The f32 type is a single-precision float,
while f64 is a double-precision float.

Example:

let pi: f32 = 3.14;

let gravity: f64 = 9.8;

Boolean Type

The boolean type in Rust is bool , which can have two possible values: true or false .

Example:

let is_rust_fun: bool = true;

let is_python_fun: bool = false;

localhost:3000/[Link] 204/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Character Type

The character type in Rust is char , which represents a Unicode scalar value.

Example:

let heart_emoji: char = '❤';

let smiley_emoji: char = '😊';

String Type

Rust has a built-in string type called String , which is a growable, UTF-8 encoded string.

Example:

let greeting: String = String::from("Hello, world!");

let name: String = "Alice".to_string();

These are just a few examples of the data types available in Rust. You can explore more data
types and their usage in the Rust documentation.

localhost:3000/[Link] 205/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Functions
Functions in Rust allow you to encapsulate a block of code that can be reused and called
multiple times. They are defined using the fn keyword followed by the function name,
optional parameters, and a return type.

Here's an example of a simple function in Rust:

fn greet(name: &str) {
println!("Hello, {}!", name);
}

In this example, the greet function takes a parameter name of type &str (a string slice) and
prints a greeting message using the println! macro.

You can call the greet function like this:

greet("Alice");

This will output:

Hello, Alice!

Functions can also have a return type. Here's an example of a function that calculates the sum
of two numbers and returns the result:

fn add(a: i32, b: i32) -> i32 {

a + b
}

In this example, the add function takes two parameters a and b of type i32 (32-bit signed
integer) and returns the sum of a and b .

You can call the add function and store the result in a variable like this:

let result = add(3, 5);

println!("The sum is: {}", result);

This will output:

The sum is: 8

localhost:3000/[Link] 206/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Functions in Rust can also have default parameter values, variable-length arguments, and
closures. You can explore these advanced topics in the Rust documentation.

Remember to always define your functions before calling them in your code.

localhost:3000/[Link] 207/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Comments
Comments in Rust are used to add explanatory or descriptive text within your code. They are
ignored by the compiler and have no impact on the execution of the program.

There are two types of comments in Rust: single-line comments and multi-line comments.

Single-line comments start with // and continue until the end of the line. They are commonly
used for short explanations or clarifications. Here's an example:

// This is a single-line comment

let x = 5; // Assigning the value 5 to variable x

Multi-line comments start with /* and end with */ . They can span multiple lines and are
useful for longer explanations or commenting out blocks of code. Here's an example:

/*
This is a multi-line comment.
It can span multiple lines.
*/

/*
fn some_function() {
// This code is commented out
// It won't be executed
}
*/

Remember to use comments to make your code more readable and understandable for
yourself and others who may read your code.

localhost:3000/[Link] 208/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Control Flow
Control flow in Rust allows you to dictate the order in which statements and expressions are
executed. It includes conditional statements, loops, and branching.

Conditional statements: Rust provides the if , else if , and else keywords for conditional
execution. Here's an example:

let number = 7;

if number < 5 {
println!("Number is less than 5");
} else if number == 5 {
println!("Number is equal to 5");
} else {
println!("Number is greater than 5");
}

Loops: Rust offers different types of loops, such as loop , while , and for . Here's an example
of a for loop:

let numbers = [1, 2, 3, 4, 5];

for number in [Link]() {

println!("Number: {}", number);
}

Branching: Rust provides the match keyword for pattern matching and branching. Here's an
example:

let fruit = "apple";

match fruit {
"apple" => println!("It's an apple"),
"banana" => println!("It's a banana"),
_ => println!("It's something else"),
}

These are just a few examples of control flow in Rust. You can explore more advanced concepts
like if let and while let for more specific scenarios.

localhost:3000/[Link] 209/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Ownership
In Rust, ownership is a unique feature that helps ensure memory safety and prevent data
races. It is a key concept that sets Rust apart from other programming languages.

Ownership Rules

1. Each value in Rust has a variable that is its owner.

2. There can only be one owner at a time.
3. When the owner goes out of scope, the value is dropped.

Borrowing

To allow multiple references to a value without taking ownership, Rust introduces the concept
of borrowing. Borrowing can be done through references, which are pointers to a value.

fn main() {
let s = String::from("Hello, world!");

// Borrowing the value using a reference

let len = calculate_length(&s);

println!("The length of '{}' is {}.", s, len);

}

fn calculate_length(s: &String) -> usize {

[Link]()
}

Ownership Transfer

Ownership can be transferred using the move keyword. This is useful when you want to
transfer ownership of a value to a different scope.

localhost:3000/[Link] 210/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

fn main() {
let s1 = String::from("Hello");
let s2 = take_ownership(s1);

println!("{}", s2);
}

fn take_ownership(s: String) -> String {

s
}

Ownership and Functions

When a value is passed to a function, ownership is transferred unless the value is borrowed
using references.

Conclusion

Understanding ownership is crucial in Rust programming. It allows for safe and efficient
memory management, preventing common issues like dangling pointers and data races.

localhost:3000/[Link] 211/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

The Slice Type

The slice type in Rust allows you to reference a contiguous sequence of elements in a
collection. It is represented by the &[T] type, where T is the type of the elements in the slice.

Slices are commonly used to work with arrays, vectors, and other collections. They provide a
flexible and efficient way to access and manipulate subsets of data without needing to copy the
entire collection.

Here are a few examples of using slices in Rust:

1. Creating a slice from an array:

let numbers = [1, 2, 3, 4, 5];

let slice = &numbers[1..4]; // creates a slice containing elements 2, 3, and 4

2. Passing a slice as a function parameter:

fn sum(numbers: &[i32]) -> i32 {

let mut total = 0;
for &num in numbers {
total += num;
}
total
}

let numbers = [1, 2, 3, 4, 5];

let result = sum(&numbers); // pass a slice of the array to the function

3. Modifying a slice:

let mut numbers = [1, 2, 3, 4, 5];

let slice = &mut numbers[1..4]; // creates a mutable slice
slice[0] = 10; // modifies the second element of the slice

assert_eq!(numbers, [1, 10, 3, 4, 5]); // original array is modified

Slices provide a convenient way to work with subsets of data in Rust, allowing you to avoid
unnecessary copying and improve performance.

localhost:3000/[Link] 212/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Structures
Structs in Rust are a way to define custom data types that can hold multiple values of different
types. They are similar to structs in other programming languages like C or C++.

Here's an example of how to define a struct in Rust:

struct Person {
name: String,
age: u32,
is_student: bool,
}

In the above example, we define a struct called Person with three fields: name of type String ,
age of type u32 (unsigned 32-bit integer), and is_student of type bool .

You can create an instance of the Person struct and access its fields like this:

let person = Person {

name: String::from("John Doe"),
age: 25,
is_student: true,
};

println!("Name: {}", [Link]);

println!("Age: {}", [Link]);
println!("Is Student: {}", person.is_student);

Structs can also have methods associated with them using the impl keyword. Here's an
example:

impl Person {
fn introduce(&self) {
println!("Hi, my name is {} and I'm {} years old.", [Link], [Link]);
}
}

let person = Person {

name: String::from("John Doe"),
age: 25,
is_student: true,
};

[Link]();

localhost:3000/[Link] 213/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

In the above example, we define an impl block for the Person struct and define a method
called introduce that takes a reference to self (the instance of the struct) and prints a
message introducing the person.

Structs in Rust are a powerful way to organize and manipulate data. They provide a flexible and
efficient way to define custom data types with their own fields and methods.

localhost:3000/[Link] 214/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Enumerations
Enums in Rust are a powerful feature that allow you to define a type by enumerating its
possible values. They are useful for representing a fixed set of options or states.

Here's an example of how to define an enum in Rust:

enum Color {
Red,
Green,
Blue,
}

In this example, we define an enum called Color with three possible values: Red , Green , and
Blue . Each value is treated as a distinct variant of the Color enum.

Enums can also have associated data. For example, let's say we want to represent different
types of messages:

enum Message {
Quit,
Move { x: i32, y: i32 },
Write(String),
ChangeColor(Color),
}

In this case, the Move variant has associated data of type x: i32 and y: i32 , the Write
variant has associated data of type String , and the ChangeColor variant has associated data
of type Color .

Enums can be used in pattern matching to handle different cases. Here's an example:

fn process_message(message: Message) {
match message {
Message::Quit => println!("Received Quit message"),
Message::Move { x, y } => println!("Received Move message: x={}, y={}", x,
y),
Message::Write(text) => println!("Received Write message: {}", text),
Message::ChangeColor(color) => println!("Received ChangeColor message:
{:?}", color),
}
}

In this example, the process_message function takes a Message enum as an argument and
uses pattern matching to handle each variant accordingly.
localhost:3000/[Link] 215/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Enums in Rust provide a flexible and expressive way to define and work with different types of
data. They are a fundamental concept in the language and are widely used in Rust codebases.

localhost:3000/[Link] 216/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

localhost:3000/[Link] 217/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Creating A New Package

To create a new package with Cargo, you can use the following command:

cargo new my-package

This will create a new directory called "my-package" with the basic structure for a Rust package.
You can replace "my-package" with the desired name for your package.

Once the package is created, you can navigate into the directory using:

cd my-package

Inside the package directory, you will find a "src" directory where you can place your Rust
source code files. By convention, the entry point of your package is usually a file called
"[Link]" located in the "src" directory.

To build and run your package, you can use the following command:

cargo run

This will compile and execute your package. If your package has a "[Link]" file, it will be
executed as the entry point.

You can also build your package without running it using:

cargo build

This will compile your package and generate the executable file in the "target/debug" directory.

To include dependencies in your package, you can specify them in the "[Link]" file. For
example, to include the "rand" crate, you can add the following line under the "[dependencies]"
section:

rand = "0.8.4"

After adding the dependency, you can use it in your code by adding an import statement at the
top of your source code file.

That's it! You have now created a new package with Cargo and learned how to build, run, and
include dependencies in it.

localhost:3000/[Link] 218/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Dependencies
To edit dependencies in Cargo, you need to modify the [Link] file in your Rust project.
This file contains the configuration for your project's dependencies.

To add a new dependency, you can use the following syntax:

[dependencies]
dependency_name = "version"

Replace dependency_name with the name of the dependency you want to add, and version
with the desired version number or version constraint.

For example, to add the serde dependency with version 1.0 , you would write:

[dependencies]
serde = "1.0"

To update an existing dependency, simply change the version number in the [Link] file.

After modifying the [Link] file, you can run cargo build or cargo update to fetch and
update the dependencies specified in the file.

Remember to save the [Link] file after making any changes.

localhost:3000/[Link] 219/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Development

localhost:3000/[Link] 220/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Reducing App Size

In app development, reducing your application's size is crucial for performance and user
experience. This chapter will guide you through various strategies to achieve a smaller app size.

Remove Unnecessary Custom Fonts

Custom fonts can significantly increase your application's size, especially if multiple font files
are included. Consider not shipping custom fonts or using more modern alternatives. Instead,
use system fonts or web-safe fonts that are already available on most devices. This approach
can save a considerable amount of space.

Use Modern Image Formats

Older image formats such as jpeg can take up a lot of space unnecessarily. Converting your
assets into more modern formats such as webp and webm can offer better compression and
quality, reducing the overall size of your application. Additionally, using vector graphics (e.g.,
SVG) where possible is beneficial as they are resolution-independent and often smaller in size.

Optimize Your Rust Configuration

Enabling certain optimizations in Rust can significantly reduce your app's size. Add the
following code to the bottom of your [Link] file to enable these optimizations:

[[Link]]
incremental = true # Compile your binary in smaller steps.

[[Link]]
codegen-units = 1
lto = true
opt-level = "s" # Prioritizes small binary size. Use `3` if you prefer speed.
panic = "abort" # Higher performance by disabling panic handlers.
strip = true # Ensures debug symbols are removed.

Explanation

codegen-units : Reduces the number of code generation units, allowing LLVM to perform
better optimization, leading to smaller binaries and improved performance.

localhost:3000/[Link] 221/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

lto (Link Time Optimization): Enables optimizations at the linking stage, significantly
reducing the size of the final binary.
opt-level : Controls your optimization level. For speed, set opt-level to 3 . For size, use
opt-level of "s" . The "z" level is even more aggressive in reducing size but may
impact performance.
panic = "abort" : Configures the application to abort on panic instead of unwinding,
saving space by removing the panic handling code.
strip = true : Ensures that debug symbols are removed from the final binary, further
reducing its size.

By following these steps, you can significantly reduce the size of your Rust application, leading
to faster downloads, reduced storage requirements, and improved performance.

localhost:3000/[Link] 222/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Calling Rust Functions From The Frontend

Tauri offers a robust system to safely call Rust functions from your frontend using commands,
and an event-system for more dynamic interactions.

Commands
The command system in Tauri allows your web app to call Rust functions. Commands can
handle arguments, return values, errors, and can be asynchronous.

Basic Example

To define commands, annotate functions in your src-tauri/src/[Link] file with #

[tauri::command] :

#[tauri::command]
fn my_custom_command() {
println!("I was invoked from JavaScript!");
}

It is important to note that Command names must be unique.

Commands within [Link] cannot be public due to glue code limitations. Creating public
commands within [Link] will result in an error.

Register your commands with the builder function:

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![my_custom_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Invoke the command from JavaScript:

localhost:3000/[Link] 223/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

import { invoke } from '@tauri-apps/api/core';

const invoke = window.__TAURI__.[Link];

invoke('my_custom_command');

Commands in Separate Modules

For better organization, define commands in separate modules:

#[tauri::command]
pub fn my_custom_command() {
println!("I was invoked from JavaScript!");
}

Commands in separate modules should be public to allow for their use within [Link] .

In [Link] , include the module and register the commands:

mod commands;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![commands::my_custom_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

WASM

For Rust frontends calling invoke() without arguments, adapt your code:

#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"], js_name =
invoke)]
async fn invoke_without_args(cmd: &str) -> JsValue;

#[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]

async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

localhost:3000/[Link] 224/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Passing Arguments

Commands can accept arguments:

#[tauri::command]
fn my_custom_command(invoke_message: String) {
println!("I was invoked from JavaScript, with this message: {}",
invoke_message);
}

Pass arguments as a JSON object with camelCase keys:

invoke('my_custom_command', { invokeMessage: 'Hello!' });

In order to pass arguements with Snake Case keys you can use snake_case with the
rename_all attribute:

#[tauri::command(rename_all = "snake_case")]
fn my_custom_command(invoke_message: String) {}

invoke('my_custom_command', { invoke_message: 'Hello!' });

Returning Data

Commands can return data:

#[tauri::command]
fn my_custom_command() -> String {
"Hello from Rust!".into()
}

The invoke function returns a promise:

invoke('my_custom_command').then((message) => [Link](message));

Returning Array Buffers

For large data, use [ tauri::ipc::Response ]:

localhost:3000/[Link] 225/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

use tauri::ipc::Response;
#[tauri::command]
fn read_file() -> Response {
let data = std::fs::read("/path/to/file").unwrap();
tauri::ipc::Response::new(data)
}

Error Handling

Commands can return errors using Result :

#[tauri::command]
fn login(user: String, password: String) -> Result<String, String> {
if user == "tauri" && password == "tauri" {
Ok("logged_in".to_string())
} else {
Err("invalid credentials".to_string())
}
}

Handle errors in JavaScript:

invoke('login', { user: 'tauri', password: '0j4rijw8=' })

.then((message) => [Link](message))
.catch((error) => [Link](error));

For non- serde::Serialize errors, convert them to String :

#[tauri::command]
fn my_custom_command() -> Result<(), String> {
std::fs::File::open("path/to/file").map_err(|err| err.to_string())?;
Ok(())
}

Create custom error types with thiserror :

localhost:3000/[Link] 226/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

#[derive(Debug, thiserror::Error)]
enum Error {
#[error(transparent)]
Io(#[from] std::io::Error)
}

impl serde::Serialize for Error {

fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
where
S: serde::ser::Serializer,
{
serializer.serialize_str(self.to_string().as_ref())
}
}

#[tauri::command]
fn my_custom_command() -> Result<(), Error> {
std::fs::File::open("path/that/does/not/exist")?;
Ok(())
}

Async Commands

For heavy tasks, use async commands:

#[tauri::command]
async fn my_custom_command(value: String) -> String {
some_async_function().await;
value
}

Handle borrowed types with Result :

#[tauri::command]
async fn my_custom_command(value: &str) -> Result<String, ()> {
some_async_function().await;
Ok(format!(value))
}

Invoke async commands from JavaScript:

invoke('my_custom_command', { value: 'Hello, Async!' }).then(() =>

[Link]('Completed!')
);

localhost:3000/[Link] 227/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Channels

Use Tauri channels for streaming data:

use tokio::io::AsyncReadExt;

#[tauri::command]
async fn load_image(path: std::path::PathBuf, reader: tauri::ipc::Channel<&[u8]>)
{
let mut file = tokio::fs::File::open(path).[Link]();
let mut chunk = vec![0; 4096];

loop {
let len = [Link](&mut chunk).[Link]();
if len == 0 {
break;
}
[Link](&chunk).unwrap();
}
}

Accessing WebviewWindow and AppHandle

Commands can access WebviewWindow and AppHandle :

#[tauri::command]
async fn my_custom_command(webview_window: tauri::WebviewWindow) {
println!("WebviewWindow: {}", webview_window.label());
}

#[tauri::command]
async fn my_custom_command(app_handle: tauri::AppHandle) {
let app_dir = app_handle.path_resolver().app_dir();
app_handle.global_shortcut_manager().register("CTRL + U", move || {});
}

Managed State

Manage state with tauri::Builder and access it in commands:

localhost:3000/[Link] 228/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

struct MyState(String);

#[tauri::command]
fn my_custom_command(state: tauri::State<MyState>) {
assert_eq!(state.0 == "some state value", true);
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.manage(MyState("some state value".into()))
.invoke_handler(tauri::generate_handler![my_custom_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Raw Request Access

Access the full [ tauri::ipc::Request ] object in commands:

#[derive(Debug, thiserror::Error)]
enum Error {
#[error("unexpected request body")]
RequestBodyMustBeRaw,
#[error("missing `{0}` header")]
MissingHeader(&'static str),
}

impl serde::Serialize for Error {

fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
where
S: serde::ser::Serializer,
{
serializer.serialize_str(self.to_string().as_ref())
}
}

#[tauri::command]
fn upload(request: tauri::ipc::Request) -> Result<(), Error> {
let tauri::ipc::InvokeBody::Raw(upload_data) = [Link]() else {
return Err(Error::RequestBodyMustBeRaw);
};
let Some(authorization_header) = [Link]().get("Authorization") else {
return Err(Error::MissingHeader("Authorization"));
};

Ok(())
}

localhost:3000/[Link] 229/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Invoke with raw request body and headers:

const data = new Uint8Array([1, 2, 3]);

await __TAURI__.[Link]('upload', data, {
headers: {
Authorization: 'apikey',
},
});

Multiple Commands

Register multiple commands with tauri::generate_handler! :

#[tauri::command]
fn cmd_a() -> String {
"Command a"
}
#[tauri::command]
fn cmd_b() -> String {
"Command b"
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![cmd_a, cmd_b])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

localhost:3000/[Link] 230/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Calling the Frontend from Rust

In Tauri applications, Rust can communicate with the frontend through the Tauri event system,
channels, or by executing JavaScript code directly.

The Event System

Tauri offers a simple event system for bi-directional communication between Rust and the
frontend. This system is perfect for scenarios involving small data streams or multi-producer,
multi-consumer patterns like push notifications.

However, the event system is not suitable for low latency or high throughput requirements.

Key differences between Tauri commands and events include the lack of strong type support
for events, JSON string payloads unsuitable for large messages, and no support for the
[capabilities] system for fine-grained control.

The [AppHandle] and [WebviewWindow] types implement the [Listener] and [Emitter] traits for
the event system.

Events can be global (sent to all listeners) or specific to a webview (sent to a listener in a specific
webview).

Global Events

To emit a global event, use the emit function:

use tauri::{AppHandle, Emitter};

#[tauri::command]
fn download(app: AppHandle, url: String) {
[Link]("download-started", &url).unwrap();
for progress in [1, 15, 50, 80, 100] {
[Link]("download-progress", progress).unwrap();
}
[Link]("download-finished", &url).unwrap();
}

It is important to note that global events are sent to all listeners.

localhost:3000/[Link] 231/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Webview Events

To emit an event to a specific webview listener, use the emit_to function:

use tauri::{AppHandle, Emitter};

#[tauri::command]
fn login(app: AppHandle, user: String, password: String) {
let authenticated = user == "tauri-apps" && password == "tauri";
let result = if authenticated { "loggedIn" } else { "invalidCredentials" };
app.emit_to("login", "login-result", result).unwrap();
}

To emit an event to multiple webviews, use emit_filter :

use tauri::{AppHandle, Emitter, EventTarget};

#[tauri::command]
fn open_file(app: AppHandle, path: std::path::PathBuf) {
app.emit_filter("open-file", path, |target| match target {
EventTarget::WebviewWindow { label } => label == "main" || label == "file-
viewer",
_ => false,
}).unwrap();
}

Webview-specific events are not sent to global event listeners. Use listen_any to catch all
events.

Event Payload

Event payloads can be any Serialize type that also implements Clone . Here's an enhanced
download event example:

localhost:3000/[Link] 232/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

use tauri::{AppHandle, Emitter};

use serde::Serialize;

#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct DownloadStarted<'a> {
url: &'a str,
download_id: usize,
content_length: usize,
}

#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct DownloadProgress {
download_id: usize,
chunk_length: usize,
}

#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase")]
struct DownloadFinished {
download_id: usize,
}

#[tauri::command]
fn download(app: AppHandle, url: String) {
let content_length = 1000;
let download_id = 1;

[Link]("download-started", DownloadStarted {
url: &url,
download_id,
content_length
}).unwrap();

for chunk_length in [15, 150, 35, 500, 300] {

[Link]("download-progress", DownloadProgress {
download_id,
chunk_length,
}).unwrap();
}

[Link]("download-finished", DownloadFinished { download_id }).unwrap();

}

Listening to Events

Tauri provides APIs for listening to events on both the frontend and Rust sides.

localhost:3000/[Link] 233/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Listening to Events on the Frontend

Channels
The event system is designed for simple, global two-way communication. For high-performance
data streaming, use channels.

Channels ensure fast, ordered data delivery and are used internally for tasks like download
progress, child process output, and WebSocket messages.

Here's the download command example using channels:

localhost:3000/[Link] 234/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

use tauri::{AppHandle, ipc::Channel};

use serde::Serialize;

#[derive(Clone, Serialize)]
#[serde(rename_all = "camelCase", tag = "event", content = "data")]
enum DownloadEvent<'a> {
#[serde(rename_all = "camelCase")]
Started {
url: &'a str,
download_id: usize,
content_length: usize,
},
#[serde(rename_all = "camelCase")]
Progress {
download_id: usize,
chunk_length: usize,
},
#[serde(rename_all = "camelCase")]
Finished {
download_id: usize,
},
}

#[tauri::command]
fn download(app: AppHandle, url: String, on_event: Channel<DownloadEvent>) {
let content_length = 1000;
let download_id = 1;

on_event.send(DownloadEvent::Started {
url: &url,
download_id,
content_length,
}).unwrap();

for chunk_length in [15, 150, 35, 500, 300] {

on_event.send(DownloadEvent::Progress {
download_id,
chunk_length,
}).unwrap();
}

on_event.send(DownloadEvent::Finished { download_id }).unwrap();

}

To call the download command, create the channel and pass it as an argument:

localhost:3000/[Link] 235/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

import { invoke, Channel } from '@tauri-apps/api/core';

type DownloadEvent =
| {
event: 'started';
data: {
url: string;
downloadId: number;
contentLength: number;
};
}
| {
event: 'progress';
data: {
downloadId: number;
chunkLength: number;
};
}
| {
event: 'finished';
data: {
downloadId: number;
};
};

const onEvent = new Channel<DownloadEvent>();

[Link] = (message) => {
[Link](`got download event ${[Link]}`);
};

await invoke('download', {
url: '[Link]
schema-generator/schemas/[Link]',
onEvent,
});

Executing JavaScript
To run JavaScript code directly in the webview context, use the [ WebviewWindow#eval ] function:

use tauri::Manager;

tauri::Builder::default()
.setup(|app| {
let webview = app.get_webview_window("main").unwrap();
[Link]("[Link]('hello from Rust')")?;
Ok(())
})

localhost:3000/[Link] 236/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

For complex scripts requiring Rust object input, consider using the [serialize-to-javascript]
crate.

localhost:3000/[Link] 237/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Managing State in Tauri

Managing the state of your Tauri application is crucial for maintaining its lifecycle and behavior.
Tauri offers a straightforward way to handle state using the Manager API, allowing you to
access it when commands are executed.

Basic Example
Let's start with a basic example to illustrate how you can manage state in a Tauri application:

use tauri::{Builder, Manager};

struct AppData {
welcome_message: &'static str,
}

fn main() {
Builder::default()
.setup(|app| {
[Link](AppData {
welcome_message: "Welcome to Tauri!",
});
Ok(())
})
.run(tauri::generate_context!())
.unwrap();
}

In this example, we define a simple AppData struct to hold our state. We then use the setup
method to manage this state within our Tauri application.

To retrieve your state, you can use any type implementing the Manager trait, such as the App
instance:

let data = [Link]::<AppData>();

For more details, refer to the Accessing State section.

localhost:3000/[Link] 238/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Handling Mutability
Rust's ownership model prevents direct mutation of shared values across threads or through
shared pointers like Arc or Tauri's State . This is to avoid data races.

To modify shared state, you can use interior mutability. The standard library's Mutex can be
used to safely lock and unlock the state for modification:

use std::sync::Mutex;
use tauri::{Builder, Manager};

#[derive(Default)]
struct AppState {
counter: u32,
}

fn main() {
Builder::default()
.setup(|app| {
[Link](Mutex::new(AppState::default()));
Ok(())
})
.run(tauri::generate_context!())
.unwrap();
}

To modify the state, lock the mutex:

let state = [Link]::<Mutex<AppState>>();

let mut state = [Link]().unwrap();
[Link] += 1;

The mutex is automatically unlocked when the MutexGuard is dropped.

Using Async Mutex

According to the Tokio documentation, the standard library's Mutex is often sufficient for
asynchronous code. However, an async mutex is necessary if you need to hold the MutexGuard
across await points.

Do You Need Arc?

In Rust, Arc is commonly used to share ownership of a value across threads, often paired with
a Mutex ( Arc<Mutex<T>> ). Tauri handles this for you, so you don't need to use Arc for values
localhost:3000/[Link] 239/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

stored in State .

Accessing State

In Commands

You can access and modify the state within commands:

#[tauri::command]
fn increase_counter(state: State<'_, Mutex<AppState>>) -> u32 {
let mut state = [Link]().unwrap();
[Link] += 1;
[Link]
}

For more on commands, see Calling Rust from the Frontend.

Async Commands

For async commands using Tokio's async Mutex :

#[tauri::command]
async fn increase_counter(state: State<'_, Mutex<AppState>>) -> Result<u32, ()> {
let mut state = [Link]().await;
[Link] += 1;
Ok([Link])
}

The return type must be Result for asynchronous commands.

Using the Manager Trait

To access state outside commands, such as in event handlers or different threads, use the
state() method of types implementing the Manager trait:

localhost:3000/[Link] 240/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

use tauri::{Builder, GlobalWindowEvent, Manager};

#[derive(Default)]
struct AppState {
counter: u32,
}

fn on_window_event(event: GlobalWindowEvent) {
let app_handle = [Link]().app_handle();
let state = app_handle.state::<Mutex<AppState>>();
let mut state = [Link]().unwrap();
[Link] += 1;
}

fn main() {
Builder::default()
.setup(|app| {
[Link](Mutex::new(AppState::default()));
Ok(())
})
.on_window_event(on_window_event)
.run(tauri::generate_context!())
.unwrap();
}

This approach is useful when command injection is not feasible.

Type Mismatches
It is important to note that using the wrong type for the State parameter results in a runtime
panic.

For instance, using State<'_, AppState> instead of State<'_, Mutex<AppState>> will cause
issues.

To avoid this, consider using a type alias:

use std::sync::Mutex;

#[derive(Default)]
struct AppStateInner {
counter: u32,
}

type AppState = Mutex<AppStateInner>;

Ensure you use the type alias correctly to prevent wrapping it in a Mutex again.
localhost:3000/[Link] 241/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Distribution

localhost:3000/[Link] 242/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Signing Your App with MSIX Rebundler

This guide will walk you through the process of using the MSIX Rebundler to sign your app.

Prerequisites
Before you begin, ensure you have the following:

Windows 10 or later
MSIX Packaging Tool installed
A valid code signing certificate

Steps
1. Install MSIX Rebundler

Download and install the MSIX Rebundler from the official MSIX Rebundler GitHub
repository.

2. Prepare Your App

Ensure your app is packaged in the MSIX format. If not, use the MSIX Packaging Tool to
convert your app to MSIX.

3. Sign Your App

Open a command prompt and navigate to the directory containing your MSIX package.
Run the following command to sign your app:

msixrebundler sign --input <[Link]> --output <path-to-signed-

[Link]> --cert <[Link]> --password <your-certificate-
password>

Replace <[Link]> , <[Link]> , <path-to-your-

[Link]> , and <your-certificate-password> with the appropriate values.

4. Verify the Signature

To verify that your app has been signed correctly, use the SignTool utility:
localhost:3000/[Link] 243/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

signtool verify /pa /v <[Link]>

Ensure the verification process completes without errors.

Conclusion
You have successfully signed your app using the MSIX Rebundler. Your app is now ready for
distribution.

For more information, refer to the official MSIX documentation.

localhost:3000/[Link] 244/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Distributing to Android Devices

Add apksigner, keytool, and zipalign to Your PATH

To distribute your application to Android devices, you need to ensure that apksigner ,
keytool , and zipalign are available in your system's PATH. Here are the steps to add them:

1. Locate the Tools:

apksigner and zipalign are part of the Android SDK Build-Tools. You can find
them in the build-tools directory of your Android SDK installation.
keytool is part of the JetBrains Runtime (JBR) distributed with Android Studio. You
can find it in the bin directory of your JBR installation.

2. Update Your PATH:

On Windows:

1. Open the Start Menu and search for "Environment Variables".

2. Click on "Edit the system environment variables".
3. In the System Properties window, click on the "Environment Variables" button.
4. In the Environment Variables window, find the Path variable in the "System
variables" section and click "Edit".
5. Add the paths to the directories containing apksigner , keytool , and
zipalign to the list. For example:

C:\path\to\android-sdk\build-tools\version
C:\path\to\android-studio\jbr\bin

6. Click "OK" to save the changes.

On macOS and Linux:

1. Open a terminal.
2. Edit your shell profile file (e.g., ~/.bashrc , ~/.zshrc , or ~/.profile ) using a
text editor.
3. Add the following lines to the file, replacing the paths with the actual locations
of your tools:

localhost:3000/[Link] 245/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

export PATH=$PATH:/path/to/android-sdk/build-tools/version
export PATH=$PATH:/path/to/android-studio/jbr/bin

4. Save the file and run source ~/.bashrc (or the appropriate command for your
shell profile) to apply the changes.

3. Verify the PATH:

If using windows, it is best to restart your device.

Open a new terminal or command prompt.
Run the following commands to ensure that the tools are accessible:

apksigner -version
keytool -help
zipalign -version

If the commands return version information or help text, the tools have been successfully
added to your PATH.

Sign Your APK

To sign your APK, you need to use keytool , zipalign , and apksigner . Follow these steps:

1. Generate a Keystore:

Use keytool to generate a keystore file. This file will contain the key used to sign
your APK.

keytool -genkey -v -keystore [Link] -keyalg RSA -keysize 2048 -

validity 10000 -alias my-key-alias

You will be prompted to enter some information and a password for the keystore.

2. Build Your APK:

Run the following commands in your terminal.

npm run tauri android init

npm run tauri icon /path/to/your/[Link]
npm run tauri android build

localhost:3000/[Link] 246/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

It is important to note that if you don't set your icon after running tauri android init
that your app will have the default Tauri logo.

3. Align the APK:

Use zipalign to optimize the APK file. This step is necessary for the APK to be
accepted by the Google Play Store. It is imperative that you run zipalign before you
use apksigner or your APK will be invalid.

zipalign -v -p 4 path/to/[Link] path/to/your-app-unsigned-

[Link]

4. Sign the APK:

Use apksigner to sign the aligned APK with your keystore.

apksigner sign --ks [Link] --out path/to/[Link]

path/to/[Link]

5. Verify the APK:

Use apksigner to verify that the APK is correctly signed.

apksigner verify path/to/[Link]

If the verification is successful, your APK is now signed. Once this is done, you can upload your
release to the Google Play Developer Console.

localhost:3000/[Link] 247/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Publishing To The Arch User Repository

Introduction
The Arch User Repository is a collection of git repositories managed by the archlinux
community. Within each repository there is a build script that is held within a PKGBUILD file and
a .SRCINFO file that contains information regarding the sources used by the build script.

Setup
First go to [Link] and make an account. Be sure to add the proper ssh
keys. Next, clone an empty git repository using this command.

git clone [Link]

After completing the steps above, create a file with the name PKGBUILD . Once the file is created
you can move onto the next step.

Writing a PKGBUILD file

pkgname=<pkgname>
pkgver=1.0.0
pkgrel=1
pkgdesc="Description of your app"
arch=('x86_64' 'aarch64')
url="[Link]
license=('mit')
depends=('cairo' 'desktop-file-utils' 'gdk-pixbuf2' 'glib2' 'gtk3' 'hicolor-icon-
theme' 'libsoup' 'pango' 'webkit2gtk')
options=('!strip' '!emptydirs')
install=${pkgname}.install
source_x86_64=
("[Link]
_amd64.deb")
source_aarch64=
("[Link]
_arm64.deb")

localhost:3000/[Link] 248/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

At the top of the file, define your package name and assign it the variable pkgname .
Set your pkgver variable. Typically it is best to use this variable in the source variable to
increase maintainability.
The pkgdesc variable on your aur repo's page and tells vistors what your app does.
The arch variable controls what architectures can install your package.
The url variable, while not required, helps to make your package appear more
professional.
The install variable defines a file that runs the installation commands.
The depends variable includes a list of items that are required to make your app run. For
any Tauri app you must include all of the dependencies shown above.
The source variable is required and defines the location where your upstream package
is. You can make a source architecture specific by adding the architecture to the end of
the variable name.

Generating SRCINFO

In order to push your repo to the aur you must generate an srcinfo file. This can be done
with this command.

makepkg --printsrcinfo >> .SRCINFO

Testing

Testing the app is extremely simple. All you have to do is run makepkg -f within the same
directory as the pkgbuild file and see if it works

Publishing

Finally, after the testing phase is over, you can publish the application to the arch user
repository with these commands.

git add .

git commit -m "Initial Commit"

git push

If all goes well, your repository should now appear on the aur website.

localhost:3000/[Link] 249/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Examples

Extracting From A Debian Package

# Maintainer:
# Contributor:
pkgname=<pkgname>
pkgver=1.0.0
pkgrel=1
pkgdesc="Description of your app"
arch=('x86_64' 'aarch64')
url="[Link]
license=('mit')
depends=('cairo' 'desktop-file-utils' 'gdk-pixbuf2' 'glib2' 'gtk3' 'hicolor-icon-
theme' 'libsoup' 'pango' 'webkit2gtk')
options=('!strip' '!emptydirs')
install=${pkgname}.install
source_x86_64=
("[Link]
_amd64.deb")
source_aarch64=
("[Link]
_arm64.deb")
sha256sums_x86_64=
('ca85f11732765bed78f93f55397b4b4cbb76685088553dad612c5062e3ec651f')
sha256sums_aarch64=
('ed2dc3169d34d91188fb55d39867713856dd02a2360ffe0661cb2e19bd701c3c')
package() {

# Extract package data

tar -xz -f [Link] -C "${pkgdir}"

post_install() {
gtk-update-icon-cache -q -t -f usr/share/icons/hicolor
update-desktop-database -q
}

post_upgrade() {
post_install
}

post_remove() {
gtk-update-icon-cache -q -t -f usr/share/icons/hicolor
update-desktop-database -q
}

localhost:3000/[Link] 250/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Building from source

# Maintainer:
pkgname=<pkgname>-git
pkgver=1.1.0
pkgrel=1
pkgdesc="Description of your app"
arch=('any')
url="[Link]
license=('mit')
depends=('cairo' 'desktop-file-utils' 'gdk-pixbuf2' 'glib2' 'gtk3' 'hicolor-icon-
theme' 'libsoup' 'pango' 'webkit2gtk')
makedepends=('git' 'file' 'openssl' 'appmenu-gtk-module' 'libappindicator-gtk3'
'librsvg' 'base-devel' 'curl' 'wget' 'rustup' 'npm' 'nodejs' 'dpkg')
provides=('<pkgname>')
conflicts=('<binname>' '<pkgname>')
options=('!strip' '!emptydirs')
source=('git+[Link]
sha256sums=('SKIP')
prepare() {
cd <project>
npm install
npm run tauri build
}
package() {
cd "$srcdir"/<project>/src-tauri/target/*unknown-linux*/release/bundle/deb
dpkg-deb -x *.deb here
cd here

install -Dm755 usr/bin/myapp "$pkgdir"/usr/bin/myapp

# Install desktop file

install -Dm644 usr/share/applications/[Link]
"$pkgdir"/usr/share/applications/[Link]

# Install icons
install -Dm644 usr/share/icons/hicolor/128x128/apps/[Link]
"$pkgdir"/usr/share/icons/hicolor/128x128/apps/[Link]
install -Dm644 usr/share/icons/hicolor/256x256@2/apps/[Link]
"$pkgdir"/usr/share/icons/hicolor/256x256@2/apps/[Link]
install -Dm644 usr/share/icons/hicolor/32x32/apps/[Link]
"$pkgdir"/usr/share/icons/hicolor/32x32/apps/[Link]
# Extract package data
}

localhost:3000/[Link] 251/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Pacstall
Pacstall is similar to the Arch User Repository, however it is meant for debian based distros. It is
rapidly gaining popularity.

Step 1. Create a fork of pacstall-programs at [Link]

Step 2. Create a folder within the packages directory with your apps name. Step 3. Create your
pacscript. It is simplest to use the debian package that would be automatically released on
github. All pacscripts that use a debian package source are required to be suffixed -deb . Using
a debian source makes it much faster to install your application.

pkgname="appname-deb"
gives="${pkgname/-deb/}"
pkgver="2.0.3"
pkgdesc="A Bible App developed with tauri"
arch=('amd64' 'arm64' 'armhf')
url="[Link]
maintainer=("Firstname Lastname <email>")
depends=('libwebkit2gtk-4.1-dev' 'build-essential' 'curl' 'wget' 'file' 'libxdo-
dev' 'libssl-dev' 'libayatana-appindicator3-dev' 'librsvg2-dev')
source=
("[Link]
p_${pkgver}_${CARCH}.deb")
sha256sums_amd64=
('81c917fdce366aa6d417fdae65306c5f4860fb9dc26c8ffa9a9b62c0d206c54a')
sha256sums_arm64=
('bad20bfad1c337db35ee3f95d59ad5e70c4947b64aa6118de0953ddfec4c1538')
sha256sums_armhf=
('8a8140bf7dcea4852a265b55bca332bb904d249627521b1bd1a985b383fd8307')

The pkgname variable is given your apps name with the suffix of -deb
The gives variable defines your executables name
The pkgver variable is the version of your app and can be used when defining your
source to improve maintainability.
The pkgdesc is a required variable that contains a short description of your app.
The arch variable contains information on which architectures your app supports.
The url variable links to your apps homepage.
The maintainer variable defines who is currently maintaining the pacscript
The depends variable contains a list of packages in which your app is dependent on.
The source variable uses previously defined variable to improve maintainability and links
to your apps deb files.

Step 4. Clone The pacstall-programs Repository

localhost:3000/[Link] 252/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

git clone [Link]

Step 5. Enter the repositorys main directory

cd pacstall-programs

Step 6. Generate the SRCINFO for your package

./scripts/[Link] add ${pkgname}

Step 7. Upload your changes to github Step 8. Open a Pull request with following title format

add: `pkgname`

localhost:3000/[Link] 253/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Snapcraft
Snapcraft is a universal software bundler for linux. Software uploaded to [Link] can be
displayed on software stores such as Discover and Gnome Software

Step 1. Install Snap On Your Chosen Distro

Debian

sudo apt install snapd

Arch

sudo pacman -S --needed git base-devel

git clone [Link]
cd snapd
makepkg -si
sudo systemctl enable --now [Link]
sudo systemctl start [Link]
sudo systemctl enable --now [Link]

Fedora

sudo dnf install snapd

# Enable classic snap support
sudo ln -s /var/lib/snapd/snap /snap

Step 2. Install a base snap

sudo snap install core22

3. Install snapcraft

sudo snap install snapcraft --classic

localhost:3000/[Link] 254/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Configuration
1. Create an UbuntuOne account.
2. Go to the Snapcraft website and register an App name.
3. Create a [Link] file in your projects root.
4. Adjust the names in the [Link] file.

localhost:3000/[Link] 255/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

name: appname
base: core22
version: '0.1.0'
summary: Your summary # 79 char long summary
description: |
Your description

grade: stable
confinement: strict

layout:
/usr/lib/$SNAPCRAFT_ARCH_TRIPLET/webkit2gtk-4.1:
bind: $SNAP/usr/lib/$SNAPCRAFT_ARCH_TRIPLET/webkit2gtk-4.1

apps:
appname:
command: usr/bin/appname
desktop: usr/share/applications/[Link]
extensions: [gnome]
#plugs:
# - network
# Add whatever plugs you need here, see [Link]
interfaces for more info.
# The gnome extension already includes [ desktop, desktop-legacy, gsettings,
opengl, wayland, x11, mount-observe, calendar-service ]

package-repositories:
- type: apt
components: [main]
suites: [noble]
key-id: 78E1918602959B9C59103100F1831DDAFC42E99D
url: [Link]

parts:
build-app:
plugin: dump
build-snaps:
- node/20/stable
- rustup/latest/stable
build-packages:
- libwebkit2gtk-4.1-dev
- build-essential
- curl
- wget
- file
- libxdo-dev
- libssl-dev
- libayatana-appindicator3-dev
- librsvg2-dev
- dpkg
stage-packages:
- libwebkit2gtk-4.1-0
- libayatana-appindicator3-1

localhost:3000/[Link] 256/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

source: .
override-build: |
set -eu
npm install
npm run tauri build -- --bundles deb
dpkg -x src-tauri/target/release/bundle/deb/*.deb $SNAPCRAFT_PART_INSTALL/
sed -i -e
"s|Icon=appname|Icon=/usr/share/icons/hicolor/32x32/apps/[Link]|g"
$SNAPCRAFT_PART_INSTALL/usr/share/applications/[Link]

Explanation

The name variable defines the name of your app and is required to be set to the name
that you have registered earlier.
The base variable defines which core you are using.
The version variable defines the version, and should be updated with each change to
the source repository.
The apps section allows you to expose the desktop and binary files to allow the user to
run your app.
The package-repositories section allows you to add a package repository to help you
satisfy your dependencies.
build-packages / build-snaps defines the build dependencies for your snap.
stage-packages / stage-snaps defines the runtime dependencies for your snap.
The override-pull section runs a series of commands before the sources are pulled.
craftctl default performs the default pull commands.
The organize section moves your files to the proper directories so that the binary and
desktop file can be exposed to the apps sections.

Building Your Snap

When building your snap be sure to run this command while located in the same directory as
your manifest

sudo snapcraft

Testing

snap run your-app

localhost:3000/[Link] 257/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Releasing Manually

snapcraft login # Login with your UbuntuOne credentials

snapcraft upload --release=stable mysnap_latest_amd64.snap

Building automatically

1. Add your manifest to your projects root directory on github

2. On your apps developer page click on the builds tab.
3. Click login with github .
4. Enter in your repository's details.

localhost:3000/[Link] 258/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Distribution

Flathub

localhost:3000/[Link] 259/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Creating MetaInfo for Your Flathub App

Crafting Your Metadata File

To create a metadata file for your Flathub application, you need to follow a specific XML
structure. Below is an example of how your metadata file should look:

localhost:3000/[Link] 260/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<?xml version="1.0" encoding="UTF-8"?>

<component type="desktop-application">
<id>[Link]</id>
<launchable type="desktop-id">[Link]</launchable>
<name>Your App's Name</name>
<developer id="[Link]">
<name>Your Name</name>
</developer>
<content_rating type="oars-1.1">
</content_rating>
<keywords>
<keyword>Keyword1</keyword>
<keyword>Keyword2</keyword>
</keywords>
<branding>
<color type="primary" scheme_preference="light">#00ffff</color>
<color type="primary" scheme_preference="dark">#0c9aff</color>
</branding>
<recommends>
<display_length compare="ge">360</display_length>
</recommends>
<summary>Your Summary</summary>

<metadata_license>MIT</metadata_license>
<project_license>MIT</project_license>
<url type="homepage">[Link]

<supports>
<control>pointing</control>
<control>keyboard</control>
<control>touch</control>
</supports>

<description>
<p>
Your Description
</p>
</description>
<screenshots>
<screenshot type="default">
<image>[Link]
<caption>Your Caption</caption>
</screenshot>
</screenshots>
<releases>
<release version="1.0.0" date="2024-11-02" >
<description>
<ul>
<li>Updated UI</li>
<li>Added Electronic Genre</li>
</ul>
</description>
</release>

localhost:3000/[Link] 261/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

</releases>
<update_contact>your-email@[Link]</update_contact>
</component>

Required Sections

Your metadata file must include the following sections:

<id> : A unique identifier for your application, which should match the ID in your
manifest file.
<project_license> : Specifies the license under which your project is distributed.
<name> : The name of your application as it will appear to users.
<summary> : A brief summary of what your application does.
<developer> : Information about the developer of the application, including an ID and a
name. Example:

<developer id="[Link]">
<name>Developer Name</name>
</developer>

<description> : A detailed description of your application, which can include paragraphs,

emphasized text, code snippets, lists, and more. Example:

<description>
<p>Some <em>description</em></p>
<p>Some <code>description</code></p>
<p>A list of features</p>
<ul>
<li>First Feature</li>
<li>Second Feature</li>
<li>Third Feature</li>
</ul>
<p>The app can do:</p>
<ol>
<li>First Feature</li>
<li>Second Feature</li>
<li>Third Feature</li>
</ol>
</description>

localhost:3000/[Link] 262/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

<launchable> : Specifies how the application can be launched, typically referencing a

desktop entry file. Example:

<launchable type="desktop-id">[Link]</launchable>

Adding Your MetaInfo File to Your Linux Bundles

To include your metainfo file in your Linux bundles, you need to specify the file paths in your
configuration. Below is an example configuration for Debian and RPM packages:

"linux": {
"deb": {
"files": {
"/usr/share/metainfo/[Link]":
"relative/path/from/your/[Link]/to/your/[Link]"
}
},
"rpm": {
"files": {
"/usr/share/metainfo/[Link]":
"relative/path/from/your/[Link]/to/your/[Link]"
}
}
}

localhost:3000/[Link] 263/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Designing a Manifest

Designing a Manifest for Open Source Software

1. Get your required tools

First, you need to gather the necessary tools to start building your Flatpak. Use the following
commands to add the required submodule and install the necessary dependencies:

git submodule add [Link]

cd flatpak-builder-tools/node/flatpak_node_generator
pipx install . # Change this to your preferred installation method

2. Generate your sources

Depending on whether you use Yarn or NPM, you will need to generate your Node and Cargo
sources.

Yarn

To generate your Node sources with Yarn, use the following command:

flatpak-node-generator --no-requests-cache -o [Link] yarn

/path/to/your/lock/file/[Link]

Next, generate your Cargo sources:

python3 flatpak-builder-tools/cargo/[Link] -o cargo-

[Link] src-tauri/[Link]

NPM

If you are using NPM, generate your Node sources with this command:

localhost:3000/[Link] 264/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

flatpak-node-generator --no-requests-cache -o [Link] npm

/path/to/your/lock/file/[Link]

Then, generate your Cargo sources:

python3 flatpak-builder-tools/cargo/[Link] -o cargo-

[Link] src-tauri/[Link]

3. Create your manifest

Now, create your Flatpak manifest. This file defines the configuration and build instructions for
your application. Here is an example manifest:

localhost:3000/[Link] 265/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

id: [Link]

runtime: [Link]
runtime-version: '47'
sdk: [Link]

command: tauri-app
finish-args:
- --socket=wayland # Permission needed to show the window
- --socket=fallback-x11 # Permission needed to show the window
- --device=dri # OpenGL, not necessary for all projects
- --share=ipc
sdk-extensions:
- [Link].node20
- [Link]-stable
build-options:
append-path: /usr/lib/sdk/node20/bin:/usr/lib/sdk/rust-stable/bin

modules:
- name: your-command
buildsystem: simple
env:
HOME: /run/build/your-module
CARGO_HOME: /run/build/your-module/src-tauri
XDG_CACHE_HOME: /run/build/your-module/flatpak-node/cache
yarn_config_offline: 'true'
yarn_config_cache: /run/build/your-module/flatpak-node/yarn-cache
sources:
- type: git
url: [Link]
tag: v1.2.2
- [Link]
- [Link]
build-commands:
- echo -e 'yarn-offline-mirror "/run/build/your-module/flatpak-node/yarn-
mirror"\nyarn-offline-mirror-pruning true' > /run/build/your-module/.yarnrc
- mkdir -p src-tauri/.cargo && echo -e '[[Link]-io]\nreplace-with =
"vendored-sources"\n\n[[Link]-sources]\ndirectory = "/run/build/your-
module/cargo/vendor"' > src-tauri/.cargo/[Link]
- yarn install --offline --immutable --immutable-cache --inline-builds
- yarn run tauri build -- -b deb
- ar -x src-tauri/target/release/bundle/deb/*.deb
- tar -xf src-tauri/target/release/bundle/deb/your-app/[Link]
- install -Dm755 src-tauri/target/release/bundle/deb/your-
app/data/usr/bin/your-command /app/bin/your-command
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/applications/[Link]
/app/share/applications/[Link]
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/icons/hicolor/128x128/apps/[Link]
/app/share/icons/hicolor/128x128/apps/[Link]
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/icons/hicolor/32x32/apps/[Link]

localhost:3000/[Link] 266/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

/app/share/icons/hicolor/32x32/apps/[Link]
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/icons/hicolor/256x256@2/apps/[Link]
/app/share/icons/hicolor/512x512/apps/[Link]
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/icons/hicolor/scalable/apps/[Link]
/app/share/icons/hicolor/scalable/apps/[Link]
- install -Dm644 src-tauri/target/release/bundle/deb/your-
app/data/usr/share/metainfo/[Link] /app/share/metainfo/[Link]

Submitting To Flathub
To submit your application to Flathub, follow these steps:

1. Fork the Flathub Repository.

2. Clone your forked repository:

git clone --branch=new-pr git@[Link]:your_github_username/[Link]

3. Enter the repository:

cd flathub

4. Create a new branch:

git checkout -b your_app_name

5. Open a pull request against the new-pr branch on GitHub.

6. Your app will now enter the review process, during which you may be asked to make
changes to your project.

Designing a Manifest for Closed Source Software

Step 1. Install flatpak and flatpak-builder

To build Flatpaks locally, you need the flatpak and flatpak-builder tools. Install them using
the following commands based on your distribution:

localhost:3000/[Link] 267/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

Debian

sudo apt install flatpak flatpak-builder

Arch

sudo pacman -S --needed flatpak flatpak-builder

Fedora

sudo dnf install flatpak flatpak-builder

Gentoo

sudo emerge --ask \

sys-apps/flatpak \
dev-util/flatpak-builder

Step 2. Install the Gnome Runtime

Install the Gnome runtime with the following command:

flatpak install flathub [Link]//46 [Link]//46

Step 3. Build the .deb of your tauri-app

Follow the instructions here to build the .deb package of your Tauri app.

Step 4. Create the manifest

Create your Flatpak manifest for the closed source software:

localhost:3000/[Link] 268/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

id: [Link]

runtime: [Link]
runtime-version: '46'
sdk: [Link]

command: tauri-app
finish-args:
- --socket=wayland # Permission needed to show the window
- --socket=fallback-x11 # Permission needed to show the window
- --device=dri # OpenGL, not necessary for all projects
- --share=ipc

modules:
- name: binary
buildsystem: simple
sources:
- type: file
url:
[Link]
1.0.1_amd64.deb
sha256: 08305b5521e2cf0622e084f2b8f7f31f8a989fc7f407a7050fa3649facd61469 #
This is required if you are using a remote source
only-arches: [x86_64] # This source is only used on x86_64 Computers
build-commands:
- ar -x *.deb
- tar -xf [Link]
- 'install -Dm755 usr/bin/tauri-app /app/bin/tauri-app'
- install -Dm644 usr/share/applications/[Link]
/app/share/applications/[Link]
- install -Dm644 usr/share/icons/hicolor/128x128/apps/[Link]
/app/share/icons/hicolor/128x128/apps/[Link]
- install -Dm644 usr/share/icons/hicolor/32x32/apps/[Link]
/app/share/icons/hicolor/32x32/apps/[Link]
- install -Dm644 usr/share/icons/hicolor/256x256@2/apps/[Link]
/app/share/icons/hicolor/256x256@2/apps/[Link]
- install -Dm644 [Link]
/app/share/metainfo/[Link]

The Gnome 46 runtime includes all dependencies of the standard Tauri app with their correct
versions.

Step 5. Install and Test the app

Install and test your Flatpak application with the following commands:

localhost:3000/[Link] 269/270
1/23/25, 12:49 PM HTML, CSS, JavaScript, and Rust for Beginners: A Guide to Application Development with Tauri

# Install the flatpak

flatpak -y --user install <local repo name> <your flatpak id>

# Run it
flatpak run <your flatpak id>

# Update it
flatpak -y --user update <your flatpak id>

Adding additional libraries

If your final binary requires more libraries than the default Tauri app, you need to add them to
your Flatpak manifest. There are two ways to do this:

1. For fast local development, you can include the already built library file ( .so ) from your
local system. However, this is not recommended for the final build of the Flatpak, as your
local library file is not built for the Flatpak runtime environment. This can introduce
various bugs that can be very hard to find.
2. It is recommended to build the library your program depends on from source inside the
Flatpak as a build step.

localhost:3000/[Link] 270/270