WebCraft - ремесло веб разработки – Telegram
WebCraft - ремесло веб разработки
5.52K subscribers
2.16K photos
322 videos
2 files
352 links
Интересуешься php , js , css , html , Laravel , Vue ? Этот канал для тебя

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

Купить рекламу: https://telega.in/c/web_craft
Download Telegram
Определение окружения

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

Забыли? Вернитесь к посту от 19.08.2025.

👉 @web_craft | #frontend
2
Какое свойство браузера помогает определить операционную систему пользователя?
Anonymous Quiz
44%
Navigator.platform.
40%
Navigator.userAgent.
9%
Window.os.
7%
Document.system.
2
Фильтрация записей по времени

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

В Laravel существуют элегантные методы whereDate(), whereNowOrPast() и whereFuture(), которые упрощают такие запросы. whereNowOrPast выбирает записи с датой в прошлом или настоящем, а whereFuture — только с датой в будущем. Это делает код более читаемым и декларативным.

<?php

use App\Models\Event;

// Задача: получить все прошедшие и будущие события отдельно.

// Стандартный подход:
$pastEvents = Event::where('starts_at', '<=', now())->get();
$futureEvents = Event::where('starts_at', '>', now())->get();

// Подход с новыми методами:
$pastEventsClean = Event::whereNowOrPast('starts_at')->get();
$futureEventsClean = Event::whereFuture('starts_at')->get();


👉 @web_craft | #laravel
👍71
Безопасные динамические шаблоны

При создании регулярного выражения из динамической строки возникает проблема специальных символов. Символы вроде . или + имеют особое значение. Для их корректной обработки предназначен статический метод RegExp.escape(). Он экранирует все спецсимволы в строке, подготавливая её для безопасного включения в шаблон. Данный метод является кандидатом в стандарт ECMAScript (Stage 3).

// Строка от пользователя, которую нужно найти
const userQuery = 'node.js (v18+)';

// Неправильный подход: спецсимволы ломают шаблон
const brokenRegex = new RegExp(userQuery);
// Получится /node.js (v18+)/, что ищет совсем не то, что нужно.
console.log(brokenRegex.test('I use node.js (v18+)')); // false

// Правильный подход с использованием предложенного метода
const escapedQuery = RegExp.escape(userQuery);
// escapedQuery станет 'node\\.js \\(v18\\+\\)'

const correctRegex = new RegExp(escapedQuery);
console.log(correctRegex.test('I use node.js (v18+)')); // true


👉 @web_craft | #frontend
2👍1
Автоматизация анонимизации данных для GDPR в Symfony

Процесс анонимизации пользовательских данных для GDPR-запросов часто выполняется вручную и подвержен ошибкам. Статья предлагает решение для автоматизации этой задачи в Symfony. В ней разбирается паттерн с использованием PHP-атрибутов для разметки персональных данных, что позволяет запускать анонимизацию для связанных сущностей одной консольной командой.

👉 @web_craft | #php
👍3
Что вас добило?

👍 – C# на .php.

❤️ – PHP на .asp.

👉 @web_craft |#юмор
14👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Fancy border style button

Кнопки с анимированной рамкой на чистом CSS.

👉 @web_craft | #frontend
2👍1
Про IT в 2025 году

Раздутые зарплаты, сомнительное качество работы, фейковые резюме и требования работать по 2-3 часа в день являются реалиями современного IT. Статья представляет собой трезвый и критический взгляд на индустрию от разработчика с 20-летним опытом. Автор анализирует, как рынок дошёл до текущего состояния и прогнозирует, как он будет меняться в ближайшем будущем.

👉 @web_craft | #собес
👍3
Ваш проект движется так же уверенно?

👍 – Один в один.

❤️ – У нас ещё тестировщик сбоку толкает.

👉 @web_craft |#юмор
11👍3🔥1
Как передать параметры в addEventListener

Попытка передать параметры в обработчик addEventListener напрямую часто приводит к тому, что функция выполняется сразу, а не по событию. Статья наглядно объясняет, почему так происходит, и разбирает правильные подходы. Рассматриваются чистые решения с использованием анонимных функций и метода .bind() для корректной передачи данных.

👉 @web_craft | #frontend
3
Поведение при сбое в пуле

Что произойдет по умолчанию, если один из запросов в пуле исчерпает все повторные попытки, указанные в методе retry?

Забыли? Вернитесь к посту от 25.08.2025.

👉 @web_craft | #laravel
2
Типы аргументов

Что из перечисленного может выступать аргументом для import.meta.resolve()?

Забыли? Вернитесь к посту от 26.08.2025.

👉 @web_craft | #frontend
3
Что из перечисленного может выступать аргументом для import.meta.resolve()?
Anonymous Quiz
40%
Только относительные пути.
19%
Только имена пакетов.
30%
Импорт из node_modules.
12%
Только URL-адреса.
3
Создание коллекций с повторяющимися элементами

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

Статический метод Collection::times() предлагает более декларативный подход. Он создает новую коллекцию, запуская переданную функцию указанное количество раз. Индекс текущей итерации передается в функцию, что позволяет легко генерировать уникальные значения.

use Illuminate\Support\Collection;

// Задача: создать коллекцию из 10 пользователей
// с уникальными именами User 1, User 2 и т.д.

// Традиционный подход с циклом for:
$users = new Collection();
for ($i = 1; $i <= 10; $i++) {
$users->push((object)['name' => 'User ' . $i]);
}

// Подход с методом times():
$users = Collection::times(10, function (int $number) {
return (object)['name' => 'User ' . $number];
});


👉 @web_craft | #laravel
👍7🤔2
Асинхронная координация потоков

SharedArrayBuffer можно создавать с изменяемым размером, указав опцию maxByteLength и вызывая метод resize(). Для координации потоков без блокировок предназначен Atomics.waitAsync(). Он асинхронно ожидает, пока другой поток изменит значение в указанной ячейке памяти. После изменения worker вызывает Atomics.notify().

// Главный поток
const sab = new SharedArrayBuffer(1024, { maxByteLength: 4096 });
const int32 = new Int32Array(sab);

console.log('Ожидаем изменения от воркера...');
const asyncWait = Atomics.waitAsync(int32, 0, 0); // Ждем, пока значение в 0-м индексе станет не 0

asyncWait.promise.then((result) => {
console.log('Ожидание завершено:', result); // 'ok'
console.log('Новый размер буфера:', sab.byteLength);
});

// Код, который мог бы быть в воркере (worker.js)
/*
// ... получает sab и int32 ...
// Растит буфер
sab.resize(2048);
// Обновляет флаг
Atomics.store(int32, 0, 1);
// Уведомляет главный поток
Atomics.notify(int32, 0);
*/


👉 @web_craft | #frontend
4
Атрибут #[\NoDiscard] в PHP 8.5

Случайное игнорирование возвращаемого значения «чистой» функции может привести к трудноуловимым багам. Статья рассказывает об атрибуте #[\NoDiscard] в PHP 8.5, который решает эту проблему. При его использовании PHP выдаст предупреждение, если результат выполнения функции не был использован, что помогает статическим анализаторам находить потенциальные ошибки в коде.

👉 @web_craft | #php
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Ваши ожидания от удалёнки оправдались?

👍 – Да, всё как мечтал(а) — работаю и кайфую.

❤️ – Есть и плюсы, и минусы, но в целом устраивает.

🤔 – Не моё, максимум гибрид.

👉 @web_craft |#юмор
👍167🤔3
This media is not supported in your browser
VIEW IN TELEGRAM
Button Animation

Кнопка с многоступенчатой анимацией на чистом CSS.

👉 @web_craft | #frontend
2👍1
АНТИ-План по устройству в бигтех, или Как всё пошло не по плану

Многие разработчики месяцами готовятся к поиску работы мечты: доделывают портфолио и «тренируются» на неинтересных вакансиях. Автор статьи не стал исключением.

👉 @web_craft | #собес
2
Похоже на ваш рабочий день?

👍 – Да, если бы не было тимлида.

❤️ – Нет, я потом до вечера проверяю код от нейронки.

👉 @web_craft |#юмор
11🤔2