WebCraft - ремесло веб разработки
6.73K subscribers
1.51K photos
222 videos
2 files
172 links
Интересуешься php , js , css , html , Laravel , Vue ? Этот канал для тебя

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/web_craft
Download Telegram
Работа метода padEnd()

Что делает метод padEnd()?

👉 @web_craft | #frontend
Проверка целых чисел в JavaScript

Number.prototype.isInteger это метод, который проверяет, является ли переданное значение целым числом. Он определяется на прототипе объекта Number и доступен для всех чисел.

Как работает:
Number.prototype.isInteger возвращает true для целых чисел (положительных, отрицательных и нуля) и false для любого другого типа данных, включая:
- Десятичные числа (например, 3.14, -5.2).
- NaN (Not a Number).
- Infinity.
- Строки, которые не могут быть преобразованы в целые числа (например, "hello", "123abc").

Пример использования:
console.log(Number.isInteger(42)); // true
console.log(Number.isInteger(3.14)); // false
console.log(Number.isInteger(Math.PI)); // false (PI is a non-integer constant)
console.log(Number.isInteger(Infinity)); // false
console.log(Number.isInteger("10")); // false ("10" is a string)
console.log(Number.isInteger(10.0)); // true (exactly represents an integer)


👉 @web_craft | #frontend
Как добавить программируемый поиск от Google на свой сайт?

В этой статье объясняется как на свой сайт добавить программируемый поиск от Google.Начинается туториал с создания поисковой системы посредством панели управления. После этого идет настройка данной системы. И в завершении, получение её кода и встраиванием его на свой сайт.

👉 @web_craft | #frontend
Media is too big
VIEW IN TELEGRAM
Just Ice

Анимированная сцена с объемным кубиком льда на CSS и JavaScript.

👉 @web_craft | #frontend
Правила использования директивы use module

Где нужно добавить директиву use module?

👉 @web_craft | #frontend
Доступ к элементам массива в JavaScript

Array.prototype.at() - это метод в JavaScript, который позволяет получить элемент массива по указанному индексу. Он принимает один аргумент - индекс элемента, который вы хотите получить. Отличие от обычного доступа к элементам массива заключается в том, что метод at() позволяет использовать отрицательные индексы и работает с диапазоном индексов, выходящим за границы массива.

Синтаксис:
array.at(index);

Параметры:
index: Целое число, указывающее индекс элемента, к которому нужно получить доступ.

Пример:
const numbers = [10, 20, 30, 40, 50];

// Получить первый элемент
console.log(numbers.at(0)); // 10

// Получить последний элемент
console.log(numbers.at(-1)); // 50

// Получить элемент, третий с конца
console.log(numbers.at(-3)); // 30



👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Визуализация JavaScript: выполнение промисов

Иллюстрированный гайд с анимацией и 8-минутным видео, раскрывающий внутренние механизмы и возможности промисов в JavaScript.

👉 @web_craft | #frontend
Media is too big
VIEW IN TELEGRAM
Future Sticky Navigation with Glas Effect

Навигация с эффектом блюра на JS.

👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Cally

Cally — набор небольших, многофункциональных компонентов календаря с открытым исходным кодом для выбора отдельных дат или диапазонов дат. Независимый от платформы, поддерживающий темы, локализуемый и доступный.

👉 @web_craft | #frontend
Метод для группировки данных

Какой метод можно использовать для группировки объектов, если ключи не строки?

Забыли? Изучали функционал в посте от 16.04.2024.

👉 @web_craft | #frontend
Интерактивное редактирование содержимого веб-страницы

Document.designMode — это функция в JavaScript, позволяющая делать веб-страницу редактируемой. По умолчанию, это свойство установлено в "off", и его активация в "on" позволяет пользователю редактировать содержимое страницы.

Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Редактируемая страница</title>
</head>
<body>
<h1>Добро пожаловать на нашу редактируемую страницу!</h1>
<p>Нажмите кнопку, чтобы начать редактирование.</p>
<button onclick="toggleDesignMode()">Редактировать</button>

<script>
function toggleDesignMode() {
document.designMode = document.designMode === "off" ? "on" : "off";
console.log("Режим редактирования: " + document.designMode);
}
</script>
</body>
</html>


В этом примере, нажатие кнопки позволяет пользователю переключать режим редактирования.

👉 @web_craft | #frontend
Названия ветвей и комментарии к коммитам в Git: лучшие практики

В этой статье разбираются лучшие практики для работы с ветвями и коммитами.

👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Предварительный просмотр изображения перед загрузкой

Реализовано на HTML, CSS и JS.

👉 @web_craft | #frontend
Работа метода Number.prototype.isInteger

Какой тип данных вернет метод Number.prototype.isInteger для десятичных чисел?

Если забыли, то вернитесь к посту от 23.04.2024.

👉 @web_craft | #frontend
Форматирование относительного времени в JavaScript

Intl.RelativeTimeFormat — объект в JavaScript для локализованного форматирования времени. Это часть библиотеки Intl, облегчающей интернационализацию программ. Intl.RelativeTimeFormat позволяет форматировать численные значения в контексте временного интервала (например, "через 5 дней" или "3 часа назад").

Как работает:
Экземпляр Intl.RelativeTimeFormat создаётся с использованием конструктора, который может принимать два аргумента: локаль и опции. Локаль управляет языком отображения, а опции могут включать стиль, числовой формат и другие параметры.

Пример:
const rtf = new Intl.RelativeTimeFormat('ru', { style: 'long' });

console.log(rtf.format(-1, 'day')); // "1 день назад"
console.log(rtf.format(2, 'day')); // "через 2 дня"
console.log(rtf.format(3, 'second')); // "через 3 секунды"


В этом примере Intl.RelativeTimeFormat используется для форматирования количества дней и секунд в русской локализации.

👉 @web_craft | #frontend
Многопользовательские приложения с однопользовательскими базами данных SQLite в глобальных контейнерах Tigris

Статья описывает использование однопользовательских баз данных SQLite в многопользовательских приложениях, размещённых на Fly.io. Основная идея заключается в хранении баз данных SQLite в глобально распределённых контейнерах Tigris и их эксплуатации на виртуальных машинах Fly.io. Автор делится методикой построения приложения на JavaScript, которое взаимодействует с SQLite, а также подробно разбирает настройку окружения, включая конфигурацию хранилища и клиента S3 для работы с Tigris.

👉 @web_craft | #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Icon Hover Effect Using

Иконки с эффектом выделения при наведении на HTML и CSS.

👉 @web_craft | #frontend
Метод для получения элемента массива

Какой метод JavaScript используется для получения элемента массива по указанному индексу?

Если сомневаетесь, то в посте от 30.04.2024 мы разбирали этот функционал.

👉 @web_craft | #frontend
Асинхронная отправка данных

navigator.sendBeacon() - это метод JavaScript API, предназначенный для асинхронной отправки небольших
HTTP-запросов на сервер.

Как работает:

navigator.sendBeacon() отправляет данные в фоне, используя HTTP POST запрос, не ожидая ответа от сервера. Это позволяет скриптам продолжать работу или завершать выполнение без ожидания завершения запроса.

Синтаксис:

navigator.sendBeacon(url, data);

- url: URL-адрес сервера, на который отправляется запрос.
- data: Данные, отправляемые в запросе. Может быть строкой, Blob, FormData или ReadableStream.

Пример использования:

window.addEventListener("unload", function(event) {
var data = {username: "user", sessionId: "xyz123"};
var url = "https://example.com/analytics";
navigator.sendBeacon(url, JSON.stringify(data));
});


В этом примере, при событии unload (закрытие вкладки или окна браузера), данные о сессии пользователя отправляются на сервер аналитики.

👉 @web_craft | #frontend
Создание приложения Remix локально с Docker

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

👉 @web_craft | #frontend