DEV Community: nour

How It Differs from HTML and Differences

nour — Thu, 02 May 2024 15:25:01 +0000

Hey Devs!

Let’s delve into the world of markup languages and unravel the mysteries of XML (eXtensible Markup Language) while distinguishing it from HTML (HyperText Markup Language). While both XML and HTML are markup languages, they serve different purposes and have distinct features.

XML (eXtensible Markup Language):

Extensibility: As the name suggests, XML is extensible, meaning you can define your own tags and structure, making it highly adaptable to various data formats and requirements.
Data Representation: XML primarily focuses on describing data. It’s commonly used in situations where data needs to be stored, exchanged, or processed independently of presentation. This makes it ideal for tasks such as configuration files, data interchange between systems, and representing hierarchical data structures.
Syntax: XML has strict syntax rules. Every opening tag must have a corresponding closing tag, and attributes must be quoted. This ensures consistency and clarity in data representation.
Validation: XML allows the use of Document Type Definitions (DTD) or XML Schemas to define the structure and validate the content against predefined rules. This ensures data integrity and helps in error detection.

5.Complexity: XML supports complex data structures and nesting, making it suitable for representing hierarchical data with multiple levels of relationships.

HTML (HyperText Markup Language):

Presentation: Unlike XML, HTML is primarily concerned with the presentation of content on the web. It defines the structure of web pages using elements like
,
,

, etc., along with attributes for styling and layout.
Fixed Tags: HTML has a predefined set of tags and attributes designed specifically for creating web pages. While it offers some flexibility through classes and IDs, the core structure remains fixed.
Rendering: HTML is rendered by web browsers to display content visually. It includes features like links, images, forms, and multimedia elements that enhance the user experience.
Simplicity: HTML syntax is simpler compared to XML. It allows for optional closing tags and is forgiving of minor syntax errors, which makes it more forgiving for writing web pages.
Interactivity: HTML can incorporate JavaScript for adding interactivity and dynamic behavior to web pages, making them more engaging and responsive.

Differences:

Purpose: XML is designed for data representation and exchange, while HTML is designed for content presentation on the web.
Extensibility: XML is highly extensible, allowing for custom tags and structures, whereas HTML has a fixed set of tags tailored for web development.
Syntax: XML has strict syntax rules, while HTML syntax is more forgiving and designed for ease of use.
Validation: XML supports validation against predefined schemas, ensuring data integrity, while HTML relies on browser interpretation for rendering.
Complexity: XML supports complex data structures and nesting, making it suitable for diverse data representation needs, while HTML focuses on simplicity and ease of use for web development.

Understanding the distinctions between XML and HTML is crucial for choosing the right tool for your specific requirements, whether it's data representation, web development, or content management.

Keep coding!
[Nourbouch]

Create Dark and Light Modes via CSS for Astro sites

nour — Thu, 02 May 2024 13:26:20 +0000

In this post, we’ll look at how to add support for dark mode to your website in two ways: first with CSS and then with a JavaScript toggle.

Prerequisites I highly recommend you go ahead and fork a Astro starter from Astro.new.

You can choose a template of your choice and then open the template in CodeSandbox which will automatically handle the required dependencies.

Creating our Dark Mode Component

Inside the components folder, I’ve added a new component called ThemeChange.astro. It’s basic functionality includes a clickable element alongside our svg images for our toggle.

<div class="theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="#FCD53F"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-sun"
              >
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
              </svg>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="#FCD53F"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="feather feather-moon"
              >
                <path
                  d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
                ></path>
              </svg>
            </div>
          </label>
        </div>

We’ll immediately import this component into the Header component.

import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../config';
import Toggle from './ThemeChange.astro';
---

<header>
    <Toggle />
    <h2>
        {SITE_TITLE}
    </h2>
    <nav>
        <HeaderLink href="/">Home</HeaderLink>
        <HeaderLink href="/blog">Blog</HeaderLink>
        <HeaderLink href="/about">About</HeaderLink>
        <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
        <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
    </nav>
</header>
<style>
    header {
        margin: 0em 0 2em;
    }
    h2 {
        margin: 0.5em 0;
    }
</style>

Using CSS variables for themes

CSS Variables enable us to define reusable values that can be changed at runtime. First, on the root element, define all available colours. Then, using these colours, create two opposing data-themes: light and dark.

:root {
  --color-bg: #f2f2f2;
  --color-text: #444444;
  --bold-text: #222;
  --nav-text: #000000;
  --code: #f2f2f2;
  --block-quote-border: #999;
  --block-quote-text: #222;
  --slider-bg: #dddddd;
  --slider-bg-before: #fff;
  --slider-input-bg: #8758ff;
}

[data-theme="light"] {
  --color-bg: #f2f2f2;
  --color-text: #444444;
  --bold-text: #222;
  --nav-text: #000000;
  --code: #f2f2f2;
  --block-quote-border: #999;
  --block-quote-text: #222;
  --slider-bg: #dddddd;
  --slider-bg-before: #fff;
  --slider-input-bg: #8758ff;
}

[data-theme="dark"] {
  --color-bg: #000;
  --color-text: #dddddd;
  --bold-text: #eeeeee;
  --nav-text: #dddddd;
  --code: #f2f2f2;
  --block-quote-border: #8e32dc;
  --block-quote-text: #dddddd;
}

💡 Note - When the data-theme="dark" is applied to the element, the background-color of the component changes from white to black.

Apply this same concept to all of the colours in your web app, and you’ve got yourself a theme switcher! What’s missing is a toggle element that, when checked, adds or removes the data-theme from the body element.

Lastly, we’ll apply the rest of our toggle element’s styles as shown below.

.theme-switch-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: var(--slider-bg);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  background-color: var(--slider-bg-before);
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--slider-input-bg);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider svg {
  color: #222;
  position: absolute;
  transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
  pointer-events: none;
}

.feather-moon {
  opacity: 0;
  left: 9px;
  bottom: 9px;
  transform: translateX(4px);
}

.feather-sun {
  opacity: 1;
  right: 10px;
  bottom: 9px;
  transform: translateX(0px);
}

input:checked + .slider .feather-moon {
  opacity: 1;
  transform: translateX(0);
}

input:checked + .slider .feather-sun {
  opacity: 0;
  transform: translateX(-4px);
}

💡 Note - If you get stuck on picking colors for your CSS variables then discover the newest hand-picked palettes from Color Hunt.

JavaScript

In JavaScript, local storage is an object that is part of the window object, so we can directly access it and try to find an item that is stored inside. We use the getItem function and pass in the property we want to find inside of our

ThemeChange.astro component.

<script>
          const themeToggle = document.querySelector(
            '.theme-switch input[type="checkbox"]'
          );
          const currentTheme = localStorage.getItem("theme");
          if (currentTheme) {
            document.documentElement.setAttribute("data-theme", currentTheme);
            if (currentTheme === "dark") {
              themeToggle.checked = true;
            }
          }
          function switchTheme(e) {
            if (e.target.checked) {
              document.documentElement.setAttribute("data-theme", "dark");
              localStorage.setItem("theme", "dark");
            } else {
              document.documentElement.setAttribute("data-theme", "light");
              localStorage.setItem("theme", "light");
            }
          }
          themeToggle.addEventListener("change", switchTheme, false);

</script>

Here’s the final result once all the components are in place:

Thank you for reading

Angular Data Binding , one Way - two Way - event Binding

nour — Wed, 01 May 2024 22:11:22 +0000

are u diving into Angular and feeling overwhelmed by the concept of data binding ? Data binding lies at the heart of Angular and mastering it can unlock powerful capabilities for ur website let's delve into the fundamentals and advanced techniques of Angular data binding together

Understanding Data Binding in Angular:

data binding establishes a connection between the application UI and its underlying data.. it ensures that any changes in the model state are immediately reflected in the view .. and vice versa, providing a seamless user experience..

Types of Data Binding:

One-Way Data Binding: this involves binding data from the component class to the template view.. changes in the component class reflect in the template but not the other way around

**TypeScript**
export class AppComponent {
    title = 'Welcome';
}

**HTML**
<h1>{{ title }}</h1>

Two-Way Data Binding: this allows data synchronization between the component class and the template .. changes in the template reflect in the component class and vice versa

**TypeScript**
export class AppComponent {
    name = 'Nour Bouch';
}

**HTML**
<input type="text" [(ngModel)]="name">
<p>Hello, {{ name }}</p>

Advanced Data Binding Techniques:

1.** Event Binding:** In Angular u can bind methods to events triggered by user interactions such as clicks keypresses and mouse movements.

**HTML**
<button (click)="onButtonClick()">Click me!</button>

**TypeScript**
export class AppComponent {
    onButtonClick(): void {
        console.log('Button clicked!');
    }
}

Property Binding: This allows u to set an element's property to the value of a template expression.

**HTML**
<img [src]="imageUrl">

**TypeScript**
export class AppComponent {
    imageUrl = 'path/to/image.jpg';
}

Conclusion

learning data binding in angular is essential for building dynamic and responsive web applications. by understanding the different types of data binding and employing advanced techniques, you can create seamless user experiences and unlock the full potential of Angular development.

build a Simple Todo with ReactJs Angular VueJs

nour — Wed, 01 May 2024 21:09:25 +0000

Introduction

todoApps are a classic project for learning new frameworks and building one with Reactjs & Angular & Vue can provide valuable insights into the strengths and differences of each. in this Post we will walk through the process of creating a basic todo app with each of these popular frameworks and we'll delve into the differences between these popular frameworks and explore their strengths and use cases.

Note
Before you start make sure u have Nodejs and npm installed

1. Creating the Project:

React :

npx create-react-app todo-react
cd todo-react

Angular :

npm install -g @angular/cli
ng new todo-angular
cd todo-angular

Vue :

npm install -g @vue/cli
vue create todo-vue
cd todo-vue

2. Implementing the Todo List:

React :

import React, { useState } from 'react';
function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };
  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Angular :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: string[] = [];
  inputValue: string = '';

  addTodo() {
    this.todos.push(this.inputValue);
    this.inputValue = '';
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

<input type="text" [(ngModel)]="inputValue">
<button (click)="addTodo()">Add</button>
<ul>
  <li *ngFor="let todo of todos; let i = index">
    {{ todo }} <button (click)="removeTodo(i)">Remove</button>
  </li>
</ul>

Vue :

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }} <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      inputValue: ''
    };
  },
  methods: {
    addTodo() {
      this.todos.push(this.inputValue);
      this.inputValue = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
}
</script>

3. Running the App :

React :

npm start

Angular :

npm start || ng serve

Vue :

npm run serve

congratulations you have successfully built a simple todo app using React & Angular & Vue

DEV Community: nour

How It Differs from HTML and Differences

XML (eXtensible Markup Language):

HTML (HyperText Markup Language):

, etc., along with attributes for styling and layout.

Differences:

Create Dark and Light Modes via CSS for Astro sites

Prerequisites I highly recommend you go ahead and fork a Astro starter from Astro.new.

Creating our Dark Mode Component

Using CSS variables for themes

JavaScript

Angular Data Binding , one Way - two Way - event Binding

Understanding Data Binding in Angular:

Types of Data Binding:

Advanced Data Binding Techniques:

Conclusion

build a Simple Todo with ReactJs Angular VueJs

Introduction

React :

Angular :

Vue :

React :

Angular :

Vue :

React :

Angular :

Vue :