M3 | WebDev
@m3webdev
103 subscribers
105 photos
4 videos
14 links
Your guide to the world of programming 🌐🚀
Download Telegram
About
Blog
Apps
Platform
Join
M3 | WebDev
103 subscribers
M3 | WebDev
🌍 Доступность веб-сайтов: Почему это важно и как её обеспечить? 🌍


🔍 Что такое доступность веб-сайтов?

Доступность веб-сайтов — это практика создания веб-контента, который может быть использован всеми людьми, независимо от их физических, когнитивных или технических ограничений. Это включает в себя пользователей с нарушениями зрения, слуха, двигательных функций, когнитивными особенностями, а также тех, кто использует вспомогательные технологии, такие как экранные чтецы, клавиатурные навигации и другие устройства. ♿️

✨ Почему доступность важна?

1. Инклюзивность: Доступный веб-сайт предоставляет равные возможности всем пользователям, независимо от их физических способностей. Это делает интернет более инклюзивным и справедливым пространством. 🌐

2. Юридические требования: Во многих странах существуют законы, требующие соблюдения стандартов доступности (например, ADA в США или WCAG). Несоблюдение может привести к юридическим последствиям и штрафам. ⚖️

3. Улучшение пользовательского опыта (UX): Доступные сайты, как правило, имеют более чёткую структуру, лучший контент и удобную навигацию, что улучшает UX для всех пользователей. 📈

4. SEO-преимущества: Многие аспекты доступности, такие как семантическая разметка и описательные альтернативные тексты, также положительно влияют на SEO, помогая вашему сайту занимать более высокие позиции в поисковой выдаче. 🔍

🛠 Как обеспечить доступность?

Создание доступного веб-сайта требует соблюдения ряда рекомендаций и стандартов. Вот несколько ключевых шагов:

1. Семантическая разметка HTML

Используйте правильные HTML-теги для элементов, таких как заголовки (<h1>, <h2>), списки (<ul>, <ol>), и формы (<form>, <label>). Семантическая разметка помогает экранным чтецам и другим вспомогательным технологиям правильно интерпретировать содержимое страницы.

<h1>Главный заголовок</h1>
<p>Это параграф текста, который следует за заголовком.</p>
<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
</ul>


2. Альтернативные тексты для изображений

Каждое изображение на вашем сайте должно иметь описательный альтернативный текст (alt), который экранные чтецы могут использовать для описания изображения людям с нарушениями зрения.

<img src="photo.jpg" alt="Описание изображения">


3. Контрастность текста и фона

Убедитесь, что текст на вашем сайте достаточно контрастен по отношению к фону, чтобы он был легко читаемым даже для людей с нарушениями зрения. Инструменты, такие как WebAIM Contrast Checker помогут вам проверить контрастность.

4. Доступная навигация с клавиатуры

Убедитесь, что ваш сайт можно использовать только с клавиатурой, особенно для людей с ограниченными возможностями двигательного аппарата. Проверяйте, чтобы все интерактивные элементы (кнопки, ссылки) были доступны с помощью клавиши Tab.

5. Использование ARIA-атрибутов

ARIA (Accessible Rich Internet Applications) — это набор специальных атрибутов, которые помогают улучшить доступность динамических элементов и взаимодействий на веб-сайтах. Используйте их для обеспечения более полного доступа.

<button aria-label="Закрыть окно">X</button>


💬 Заключение

Доступность — это не просто рекомендация, это обязательный аспект веб-разработки, который делает интернет лучше для всех. Инклюзивные, доступные веб-сайты не только удовлетворяют потребности пользователей с ограниченными возможностями, но и создают лучшие условия для всех посетителей.

Тэги : #верстка #доступность
637 views
M3 | WebDev
640 views
M3 | WebDev
🧩 Понимание DOM: Управление веб-страницей изнутри 🧩

📜 Что такое DOM?

DOM — это объектная модель документа, которая представляет HTML-документ как древовидную структуру, где каждый элемент является объектом. Вы можете динамически изменять содержание, структуру и стиль страницы, используя DOM и JavaScript.

🌳 Структура DOM:

Представьте вашу веб-страницу как дерево:

- Корневой элемент: <html> — вершина дерева.
- Дочерние элементы: <head>, <body> — ветви, идущие от корня.
- Листья: Текст и другие вложенные элементы.

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Текстовый параграф</p>
  </body>
</html>


На этой структуре построено всё взаимодействие с элементами страницы.

🔧 Работа с DOM в JavaScript:

1. Доступ к элементам
Вы можете получить доступ к элементам страницы с помощью методов, таких как getElementById, getElementsByClassName, querySelector, и querySelectorAll.

   const header = document.getElementById('main-header');
   const paragraphs = document.querySelectorAll('p');


2. Изменение содержания
С помощью DOM можно изменять текст, HTML-контент и атрибуты элементов.

   header.textContent = 'Новый заголовок';
   paragraphs[0].innerHTML = '<strong>Обновленный текст</strong>';


3. Создание и удаление элементов
Вы можете добавлять новые элементы на страницу или удалять существующие.

   const newElement = document.createElement('div');
   newElement.textContent = 'Новый элемент';
   document.body.appendChild(newElement);

   document.body.removeChild(paragraphs[1]);


💡 Зачем изучать DOM?

Работа с DOM — это основа создания динамических веб-страниц. Без понимания DOM трудно эффективно управлять контентом, взаимодействием с пользователем и реализацией интерактивных функций.

Тэги : #javascript
699 views
M3 | WebDev
721 views
M3 | WebDev
📄 Формы в HTML: Классика vs. Современные Подходы 🚀

💡 Что могут делать формы?

1. Отправка данных на сервер 📤

Самая основная функция формы — это отправка пользовательских данных на сервер. Это делается с помощью таких атрибутов, как action (URL назначения) и method (HTTP-метод).

   <form action="/submit" method="post">
     <label for="name">Имя:</label>
     <input type="text" id="name" name="name" required>
     
     <label for="email">Электронная почта:</label>
     <input type="email" id="email" name="email" required>
     
     <button type="submit">Отправить</button>
   </form>

📌 Что здесь происходит? — При нажатии на кнопку "Отправить" данные формы отправляются на сервер без необходимости использования JavaScript.

2. Валидация на стороне клиента ✅

Формы поддерживают встроенные механизмы валидации, позволяющие проверять корректность данных до их отправки. Например, атрибут required проверяет, что поле не пустое, а pattern — что оно соответствует определённому шаблону.

   <input type="text" name="username" required pattern="[A-Za-z]{3,}" placeholder="Введите имя">

🛠 Зачем это нужно? — Это помогает предотвратить отправку некорректных данных, но с ограничениями.

3. Автозаполнение и placeholders ✍️

Браузеры могут автоматически подставлять данные и показывать подсказки пользователям, чтобы облегчить заполнение форм.

   <input type="text" name="username" autocomplete="on" placeholder="Ваше имя">

💡 Преимущества: Удобно для пользователей, но опять же — это лишь небольшая часть функционала, который нужен в современных приложениях.

⚖️ Почему формы считаются устаревшими?

1. Перезагрузка страницы: Каждая отправка формы приводит к перезагрузке страницы, что может ухудшать пользовательский опыт в динамических приложениях.

2. Ограниченная функциональность: Без JavaScript формы не могут выполнять сложные операции, например, асинхронные запросы или обработку ответов сервера.

3. Меньше контроля: С использованием современных методов, таких как Fetch API или библиотеки, можно точнее контролировать процесс отправки и обработки данных.

🚀 Современные альтернативы традиционным HTML-формам:

- AJAX: Это общий подход, позволяющий отправлять данные на сервер и получать ответы без перезагрузки страницы. AJAX может быть реализован с использованием разных инструментов, таких как XMLHttpRequest или более современный Fetch API.

- Fetch API: Это современная реализация идей AJAX, предлагающая более удобный и лаконичный способ выполнения асинхронных запросов на сервер. Fetch API часто используется в современных веб-приложениях, поскольку он предоставляет более гибкий и мощный интерфейс для работы с запросами по сравнению с XMLHttpRequest.

- Фреймворки и библиотеки (React, Vue.js, Angular): Эти инструменты предлагают удобные средства для работы с формами и данными. Они обычно используют AJAX-запросы, реализованные через Fetch API или другие методы, для обработки форм и взаимодействия с сервером. Таким образом, вы можете использовать Fetch API непосредственно внутри компонентов этих фреймворков для реализации асинхронного поведения.

✨ Вывод

Хотя HTML-формы по-прежнему могут быть полезными, особенно в простых сценариях, современные веб-приложения требуют более гибких и мощных решений. А как вы решаете задачи с формами в своих проектах? Делитесь в комментариях! 👇

Тэги : #верстка
818 viewsedited  
M3 | WebDev
848 views
M3 | WebDev
🔍 Все Виды Input Полей в HTML: Как Использовать и Что Они Могут? 🛠

1. Текстовые поля 📝

Самый базовый вид input — текстовое поле:

<input type="text" name="username" placeholder="Введите имя">

💡 Где использовать? — Подходит для ввода коротких строк, таких как имя пользователя или адрес.

2. Пароль 🔒

Для ввода пароля используется тип password, который скрывает вводимые символы:

<input type="password" name="password" placeholder="Введите пароль">

🔐 Особенность: Символы скрыты, что обеспечивает конфиденциальность.

3. Электронная почта 📧

Тип email проверяет, что введённая строка соответствует формату адреса электронной почты:

<input type="email" name="email" placeholder="Введите email">

✉️ Преимущество: Встроенная валидация формата email.

4. Номер телефона 📱

Используйте тип tel для ввода телефонных номеров:

<input type="tel" name="phone" placeholder="Введите телефон">

📞 Применение: Подходит для ввода телефонных номеров, но без строгой валидации формата.

5. Числа 🔢

Тип number позволяет вводить только числа и устанавливать шаг, минимальные и максимальные значения:

<input type="number" name="age" min="0" max="100" step="1" placeholder="Введите возраст">

📊 Функционал: Подходит для числовых данных, например, возраста или количества.

6. Дата и время 📅

Типы date, time, и datetime-local позволяют пользователю выбирать дату и/или время:

<input type="date" name="birthday">
<input type="time" name="meeting">
<input type="datetime-local" name="appointment">

🗓 Где использовать? — Для выбора даты рождения, времени встреч и других событий.

7. Файлы 📂

Для загрузки файлов на сервер используется тип file:

<input type="file" name="resume">

📎 Преимущество: Позволяет пользователю загружать файлы, например, резюме или изображения.

8. Слайдеры и диапазоны 🎚

Тип range создаёт ползунок для выбора значения из диапазона:

<input type="range" name="volume" min="0" max="100">

🎛 Где использовать? — Для выбора громкости, яркости или других настроек.

9. Цвет 🎨

Тип color позволяет выбрать цвет из палитры:

<input type="color" name="favcolor">

🌈 Функционал: Отлично подходит для выбора цвета, например, для настройки интерфейса.

10. Флажки и переключатели ✅

Типы checkbox и radio позволяют выбирать одно или несколько значений:

<input type="checkbox" name="agree" value="yes"> Я согласен
<input type="radio" name="gender" value="male"> Мужчина
<input type="radio" name="gender" value="female"> Женщина

🔘 Использование: Флажки — для множественного выбора, переключатели — для выбора одного варианта.

Тэги : #верстка
858 viewsedited  
M3 | WebDev
861 views
M3 | WebDev
🛠 Что будет выведено в консоль?
Anonymous Quiz
44%
0, 1, 2
34%
3, 3, 3
15%
undefined, undefined, undefined
7%
Ошибка
41 voters891 views
M3 | WebDev
874 views
M3 | WebDev
752 views
M3 | WebDev
🛠 Разбираемся в отличиях: var, let, и const в JavaScript! 🌟

Сегодня мы погрузимся в основные различия между тремя способами объявления переменных в JavaScript: var, let, и const. Каждый из них имеет свои особенности, которые важно понимать, чтобы писать эффективный и безопасный код.


1. var — 🏛 Редкоиспользуемый в нынешнем времени

- Область видимости (Scope): var имеет функциональную область видимости. Это означает, что если вы объявите переменную внутри функции, она будет доступна только внутри этой функции. Если же переменная объявлена в глобальной области, она будет доступна везде.
- Hoisting (Поднятие переменных): Переменные, объявленные с var, поднимаются (hoisting). Это значит, что объявление переменной доступно до её фактического появления в коде, но инициализация остаётся на месте.
- Поведение в циклах: Переменные, объявленные с помощью var, не имеют блочной области видимости, что может приводить к неожиданным результатам в циклах (как в примере с setTimeout выше).
- Переопределение: Переменную, объявленную с помощью var, можно переопределить в той же области видимости.

var a = 10;
var a = 20; // Допустимо
2. `let` — 🔒 Безопасный выбор

- Область видимости (Scope): let имеет блочную область видимости. Переменные, объявленные с let, существуют только внутри того блока кода, где они были объявлены (например, внутри {}).
- Поведение в циклах: В отличие от var, let создаёт новую переменную для каждой итерации цикла, что помогает избежать ошибок.
- Переопределение: Переменную, объявленную с let, нельзя объявить заново в той же области видимости, но можно изменить её значение.

let b = 10;
b = 20; // Допустимо
3. const — 🛡 Для неизменяемых значений

- Область видимости (Scope): Как и let, const имеет блочную область видимости, что делает её использование безопасным.
- Инициализация: Переменную, объявленную с const, необходимо инициализировать сразу. Её значение нельзя изменять после присвоения.
- Константность: Хотя значение переменной нельзя изменить, если const ссылается на объект или массив, вы можете изменять свойства объекта или элементы массива.

const c = 30;
// c = 40; // Ошибка

const obj = { name: 'John' };
obj.name = 'Doe'; // Допустимо

💡 Когда что использовать?

- var: Используйте с осторожностью .
- let: Отличный выбор для переменных, значение которых будет изменяться.
- const: Идеально подходит для значений, которые не должны изменяться.

Понимание этих различий поможет вам избежать многих распространённых ошибок и писать более чистый код. 🎯

Тэги : #javascript
677 viewsedited  
M3 | WebDev
668 views
M3 | WebDev
👀 Что будет выведено в консоль?
Anonymous Quiz
56%
20, 20
31%
20, 10
3%
10, 10
11%
20 и undefined
36 voters660 views
M3 | WebDev
502 views
M3 | WebDev
Японские ученые представили систему искусственного интеллекта, которая способна самостоятельно обучаться и изменять свой код. Во время одного из тестов, когда ученым показалось, что нейросеть работает слишком медленно, они установили ограничение на время выполнения запросов. Однако вместо того, чтобы ускорить свою работу, ИИ попытался изменить свой код, чтобы увеличить допустимое время выполнения запросов.
513 views
M3 | WebDev
443 views
M3 | WebDev
💡 Типы данных и встроенные объекты в JavaScript 🧑‍💻

JavaScript поддерживает различные типы данных и встроенные объекты, которые можно разделить на примитивные и объектные.

📊 Примитивные типы данных:

- string (Строка)
Последовательность символов, заключённых в кавычки. Примеры: "Hello, World!", 'JavaScript'.

- number (Число)
Числовые значения, как целые, так и дробные. Примеры: 42, 3.14, -7.

- boolean (Булево значение)
Логический тип, принимающий true или false. Примеры: true, false.

- null (Нулевое значение)
Специальное значение, обозначающее отсутствие значения или пустоту. null используется для явного указания на отсутствие объекта. Пример: let value = null;.

Примечание: typeof null возвращает "object", что является историческим багом JavaScript и может быть не совсем интуитивно понятным.

- undefined (Неопределённое значение)
Значение, присваиваемое переменной, которая была объявлена, но не инициализирована. Пример: let x; // x is undefined.

- symbol (Символ)
Уникальное и неизменяемое значение, часто используется как идентификатор для свойств объектов. Пример: const id = Symbol("id");.

- bigint (Большое целое число)
Позволяет работать с числами, выходящими за пределы Number. Пример: const big = 1234567890123456789012345678901234567890n;.


🗂 Объект в JavaScript

Object

Базовый объект, от которого наследуются все другие объекты в JavaScript. Объекты могут содержать свойства (ключи и значения) и методы (функции, работающие с данными объекта). Основные операции включают создание, добавление, удаление и изменение свойств, а также использование встроенных методов.

Пример создания объекта:
const person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

Некоторые из методов объекта:
- `Object.keys(obj)` – возвращает массив ключей объекта.
- `Object.values(obj)` – возвращает массив значений объекта.
- `Object.entries(obj)` – возвращает массив пар [ключ, значение].
- `Object.assign(target, source)` – копирует свойства из одного объекта в другой.


🔍 Некоторые встроенные объекты в JavaScript:

- Function
Особый тип объекта, представляющий собой выполняемый блок кода.
Примечание : typeof для функции возращает "function" , поскольку функции являются частным случаем объектов в JavaScript . Примеры создания функции: 

  function greet(name) {
    return "Hello, " + name;
  }

- Array
Специальный объект, представляющий собой упорядоченный список значений. Массивы могут содержать элементы разных типов данных. Пример: 

  const numbers = [1, 2, 3, "four", true];

- Map
Коллекция пар ключ-значение, где ключи могут быть любого типа, а значения могут быть дубликатами. Пример:

  const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

- Set
Коллекция уникальных значений, без дубликатов. Пример:

  const set = new Set([1, 2, 3, 1]); // Set {1, 2, 3}

- Math
Встроенный объект, предоставляющий математические функции и константы. Примеры:

  const pi = Math.PI; // 3.141592653589793
  const sqrt = Math.sqrt(16); // 4

- Date
Объект для работы с датами и временем. Примеры:

  const now = new Date(); // Текущая дата и время
  const specificDate = new Date('2024-08-18');

- RegExp
Объект для работы с регулярными выражениями, позволяющий выполнять поиск и замену строк. Пример:

  const regex = /abc/;
  const result = regex.test('abcdef'); // true

- Error
Объект для создания и обработки ошибок. Примеры:
  const error = new Error('Something went wrong');

📌 Заключение

Понимание примитивных типов данных и встроенных объектов в JavaScript важно для эффективного программирования. Каждый из них имеет свои особенности и предназначение, что помогает разработчикам создавать более эффективные и сложные приложения.

Тэги : #javascript
434 viewsedited  
M3 | WebDev
345 views
M3 | WebDev
🌟 Что будет выведено в консоль?
Anonymous Quiz
4%
12
4%
15
25%
7
68%
NaN
28 voters353 views