Алексей Соин · zencod.ru
19 subscribers
165 photos
16 videos
4 files
1K links
Статьи по разработке

- frontend
- backend
- server

zencod.ru
Download Telegram
Насколько круто иметь свой сервер в комнате

https://habr.com/ru/company/ruvds/blog/699726/
Конфигурируем веб-сервер для Next.js

https://habr.com/ru/post/706838/
Forwarded from FrontEndDev
Используем деструктивное присваивание пропсов во Vue Composition API

Дмитрий Павлутин рассказывает, как сохранить удобство разработки и не потерять реактивность объектов.

https://dmitripavlutin.com/props-destructure-vue-composition/
Forwarded from FrontEndDev
Нельзя просто так взять и распарсить этот JSON на JavaScript

https://habr.com/ru/post/712618/
Forwarded from Web Stack
🤔Как избежать сдвигов в макете <img>: соотношение сторон и атрибуты ширины и высоты

В статье разберётесь с aspect-ratio и width & heigh атрибутами.

https://jakearchibald.com/2022/img-aspect-ratio/
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from FrontEndDev
Доступные front-end паттерны для отображения таблиц

Зачастую таблицы с данными не умещаются в экраны планшетов и смартфонов. Посмотрим, как решить проблему стилизации и читаемости в таких ситуациях.

https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1
GitFlow в его простоте от dev до prod

https://habr.com/ru/articles/705032/
Forwarded from FrontEndDev
Пишем крестики-нолики

Пошаговый и итеративный туториал по созданию игры
▫️на чистом HTML/CSS/JS
▫️с добавлением TypeScript
▫️c рефакторингом в React приложение

https://www.youtube.com/watch?v=MsnQ5uepIaE
Forwarded from FrontEndDev
Поверхностное и глубокое копирование объектов JS

В чем разница и как реализуются методы копирования объектов в JavaScript.

https://web.dev/structured-clone/
This media is not supported in your browser
VIEW IN TELEGRAM
Реализация в Laravel уведомлений в реальном времени с помощью Server-Sent Events

https://blog.oussama-mater.me/laravel-sse/
👍1
Forwarded from amorgunov
Валидация переменных окружения

Валидацией форм или параметров запроса никого не удивить, а вот на переменные окружения часто забивают и используют их напрямую. В чем проблема такого подход? Все переменные окружения в нашем коде будут типа string или undefined, даже если переменная описывает какой-нибудь булеан флаг или число. Поэтому часто в коде можно встретить конструкции типа process.env.IS_ENABLED === 'true' (здесь true - это строка) или parseInt(process.env.DELAY_MS, 10). И в каждом месте использования нужно не забыть сделать такую проверку.

А еще, частая ситуация, что кто-то добавляет required переменную и у всех остальных проект начинает падать в рантайме в момент использования этой переменной. Ну или проект не падает, но спустя пол года файл .env сильно устаревает. Как решить эти проблемы?

1. Все переменные можно считывать в одном месте (например, в каком-нибудь src/env.ts файле), трансформировать/валидировать данные под нужный формат, а во всех остальных местах использовать уже подготовленные переменные. Как бонус можно запретить использование process.env.* за пределами этого файла с помощью eslint.

2. Я недавно писал про библиотеку zod, которая позволяет описывать схемы валидации. Она также позволяет трансформировать данные, а в одном из последних релизов появилась возможность приведения (coerce) примитивных типов. Например, в процессе валидации преобразовать входные данные к нужному примитивному типу (в нашем случае для переменных окружений, которые представляют собой числовое значение, преобразовать строку в число). Эта библиотека отлично решают задачу подготовки переменных.

Что нам дают эти два пункта? Приводим переменные окружения к нужному типу, валидируем их и не даем запустить проект при отсутствии обязательных.

Пример валидации env переменных с помощью zod можно посмотреть тут.
Cворачиваемые вложенные списки без JS: современное руководство по вёрстке деревьев на HTML/CSS с хорошей семантикой и полноценной навигацией с клавиатуры → https://iamkate.com/code/tree-views/