Две культуры программирования: почему обе из них важны?
https://habr.com/ru/company/yandex/blog/709718/
https://habr.com/ru/company/yandex/blog/709718/
Хабр
Две культуры программирования: почему обе из них важны?
Уже несколько лет я замечаю, что программисты и программистские инструменты делятся на две разные культуры: Изначально я человек первой культуры и очень долгое время считал вторую несерьёзной....
Forwarded from For Web — фронтенд, дизайн, программирование
Новая система конфигурации ESLint
1. Предпосылки: как развивалась старая система конфигурации и какие в ней были проблемы
2. Как устроена новая система конфигурации
Новая система уже доступна в свежей версии ESLint.
1. Предпосылки: как развивалась старая система конфигурации и какие в ней были проблемы
2. Как устроена новая система конфигурации
Новая система уже доступна в свежей версии ESLint.
Forwarded from FrontEndDev
Используем деструктивное присваивание пропсов во Vue Composition API
Дмитрий Павлутин рассказывает, как сохранить удобство разработки и не потерять реактивность объектов.
https://dmitripavlutin.com/props-destructure-vue-composition/
Дмитрий Павлутин рассказывает, как сохранить удобство разработки и не потерять реактивность объектов.
https://dmitripavlutin.com/props-destructure-vue-composition/
Forwarded from FrontEndDev
Forwarded from Web Stack
В статье разберётесь с 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
Зачастую таблицы с данными не умещаются в экраны планшетов и смартфонов. Посмотрим, как решить проблему стилизации и читаемости в таких ситуациях.
https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1
Forwarded from FrontEndDev
Пишем крестики-нолики
Пошаговый и итеративный туториал по созданию игры
▫️на чистом HTML/CSS/JS
▫️с добавлением TypeScript
▫️c рефакторингом в React приложение
https://www.youtube.com/watch?v=MsnQ5uepIaE
Пошаговый и итеративный туториал по созданию игры
▫️на чистом HTML/CSS/JS
▫️с добавлением TypeScript
▫️c рефакторингом в React приложение
https://www.youtube.com/watch?v=MsnQ5uepIaE
Улучшение реактивности с помощью VueUse
https://habr.com/ru/companies/otus/articles/728068/
https://habr.com/ru/companies/otus/articles/728068/
Хабр
Улучшение реактивности с помощью VueUse
VueUse — это библиотека из более чем 200 служебных функций, которые можно использовать для взаимодействия с целым рядом API, включая интерфейсы для браузера, состояния, сети, анимации и времени. Эти...
Forwarded from FrontEndDev
Поверхностное и глубокое копирование объектов JS
В чем разница и как реализуются методы копирования объектов в JavaScript.
https://web.dev/structured-clone/
В чем разница и как реализуются методы копирования объектов в 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/
https://blog.oussama-mater.me/laravel-sse/
👍1
Forwarded from amorgunov
Валидация переменных окружения
Валидацией форм или параметров запроса никого не удивить, а вот на переменные окружения часто забивают и используют их напрямую. В чем проблема такого подход? Все переменные окружения в нашем коде будут типа string или undefined, даже если переменная описывает какой-нибудь булеан флаг или число. Поэтому часто в коде можно встретить конструкции типа
А еще, частая ситуация, что кто-то добавляет required переменную и у всех остальных проект начинает падать в рантайме в момент использования этой переменной. Ну или проект не падает, но спустя пол года файл
1. Все переменные можно считывать в одном месте (например, в каком-нибудь
2. Я недавно писал про библиотеку zod, которая позволяет описывать схемы валидации. Она также позволяет трансформировать данные, а в одном из последних релизов появилась возможность приведения (coerce) примитивных типов. Например, в процессе валидации преобразовать входные данные к нужному примитивному типу (в нашем случае для переменных окружений, которые представляют собой числовое значение, преобразовать строку в число). Эта библиотека отлично решают задачу подготовки переменных.
Что нам дают эти два пункта? Приводим переменные окружения к нужному типу, валидируем их и не даем запустить проект при отсутствии обязательных.
Пример валидации env переменных с помощью zod можно посмотреть тут.
Валидацией форм или параметров запроса никого не удивить, а вот на переменные окружения часто забивают и используют их напрямую. В чем проблема такого подход? Все переменные окружения в нашем коде будут типа 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 можно посмотреть тут.
Forwarded from For Web — фронтенд, дизайн, программирование
Cворачиваемые вложенные списки без JS: современное руководство по вёрстке деревьев на HTML/CSS с хорошей семантикой и полноценной навигацией с клавиатуры → https://iamkate.com/code/tree-views/
Forwarded from Бесплатные шрифты
#article
Какие маркеры ставить в списках на кириллице: тире или буллиты?
https://teletype.in/@finegan/97l01mDc_7m
Какие маркеры ставить в списках на кириллице: тире или буллиты?
https://teletype.in/@finegan/97l01mDc_7m
Teletype
Тире или буллит
Какие маркеры ставить в списках на русском языке: тире или буллиты?
Forwarded from ServerAdmin.ru
Предлагаю вам сохранить в закладки простой и удобный скрипт для Linux, который поможет быстро разобраться на сервере, кто и чем занял свободное место — topdiskconsumer. Единственный файл в репозитории, кроме README и есть этот скрипт.
Скрипт автоматически определяет mount point, с которого он запущен. Далее идёт в корень диска и вычисляет top:
▪ 20 самых больших файлов
▪ 20 самых объёмных директорий
▪ 20 самых больших файлов, старше 30-ти дней
▪ 20 самых больших удалённых файлов с незакрытыми handles (удалёнными, но реально всё ещё занимающими место, потому что дескриптор не закрыт)
При этом скрипт ничего не ставит и не использует сторонний софт. Всё реализовано через привычный функционал системы. Например, топ 20 директорий вычисляет вот такая конструкция:
Топ 20 файлов:
Топ 20 старых файлов:
Для удалённых файлов длинная конструкция с использованием lsof. Не буду всю её приводить, можете сами в скрипте посмотреть функцию fnLargestUnlinked.
Размер топа задаётся переменной intNumFiles в самом начале скрипта. Можете изменить при желании на любое другое число. Оно же указывается, если запустить скрипт с ключом
Там много всего полезного.
Скрипт очень понравился, сразу сохранил себе в коллекцию. Когда куда-то утекло место на сервере, поможет быстро оценить обстановку, не вспоминая все эти команды самостоятельно. Я их в разное время и в разных публикациях уже приводил здесь. Причём все, что используются. А тут всё в одном месте собрали.
#script #bash
Скрипт автоматически определяет mount point, с которого он запущен. Далее идёт в корень диска и вычисляет top:
▪ 20 самых больших файлов
▪ 20 самых объёмных директорий
▪ 20 самых больших файлов, старше 30-ти дней
▪ 20 самых больших удалённых файлов с незакрытыми handles (удалёнными, но реально всё ещё занимающими место, потому что дескриптор не закрыт)
При этом скрипт ничего не ставит и не использует сторонний софт. Всё реализовано через привычный функционал системы. Например, топ 20 директорий вычисляет вот такая конструкция:
# du -hcx --max-depth=6 / 2>/dev/null | sort -rh | head -n 20Топ 20 файлов:
# find / -mount -ignore_readdir_race -type f -exec du -h "{}" + 2>&1 \| sort -rh | head -n 20Топ 20 старых файлов:
# find / -mount -ignore_readdir_race -type f -mtime +30 -exec du -h "{}" + 2>&1 \| sort -rh | head -20Для удалённых файлов длинная конструкция с использованием lsof. Не буду всю её приводить, можете сами в скрипте посмотреть функцию fnLargestUnlinked.
Размер топа задаётся переменной intNumFiles в самом начале скрипта. Можете изменить при желании на любое другое число. Оно же указывается, если запустить скрипт с ключом
-l. Описание всех возможностей можно посмотреть вот так:# ./topdiskconsumer --helpТам много всего полезного.
Скрипт очень понравился, сразу сохранил себе в коллекцию. Когда куда-то утекло место на сервере, поможет быстро оценить обстановку, не вспоминая все эти команды самостоятельно. Я их в разное время и в разных публикациях уже приводил здесь. Причём все, что используются. А тут всё в одном месте собрали.
#script #bash