About Frontend

#видео дня Итак, системы сборки проектов. Бандлеры, по простому. Старые и современные. От Webpack до OXC. Зачем были нужны и как появились. Как развивались и при чём тут Rust. Почему oxc быстрее swc в пять раз, но это не всегда имеет значение. На всё это отвечает Девон Говетт, создатель Parcel.js и разработчик проектов React Aria и React Spectrum в Adobe: https://www.youtube.com/watch?v=JUS6EPMbk0U&feature=youtu.be Очень погружающая лекция, затрагивающая даже архитектуру проектов, чтобы было что сравнивать. Если вы, котаны, запутались в JS-тулинге — вот самое оно. #js #bundler #swc #webpack

Держал долго потому что до последнего хотел сделать рефакторинг и не позориться. Исходники скоро закину Спойлер: Рефакторинг, конечно, я не сделал

Проект Спешу объявить в догонку к ранее закинутому посту Проект вышел в релиз! Получи доступ: 🧠 ChatGPT 🌐 YouTube 🌐 Insta И другим любимым сервисам Под капотом пашет протокол VLESS один из последних-не заблокированных и маскирующийся под обычный трафик. Поддерживает любые устройства: — IOS/macOS — Android — Smart TV WAYVPN Канал WAYVPN #реклама #работа #петпроект

🔴 В последнее время прослеживаю дефицит в творческой деятельности. Не могу сказать, что я очень компетентный разработчик, но так или иначе рытье в спеке языка и ковыряния ядра фреймворков довольно таки не интересное занятия для подавляющего большинства (не для всех) Поэтому хотел бы узнать у вас, какой контент триггерит вас на лайк или написания комментария. Чуть позже сделаю опрос. А сейчас хотелось бы чтобы вы что-то написали) #вопросответ

☕️ Просто компухтер #разное

Что такое дизайн-система? Дизайн-система — это набор правил и компонентов, которые обеспечивают согласованность и масштабируемость интерфейса. Она включает в себя: - Цветовые палитры: Основные и дополнительные цвета, используемые в интерфейсе. - Типографика: Шрифты, размеры, межстрочные интервалы и другие параметры текста. - Компоненты: Готовые элементы интерфейса (кнопки, формы, карточки и т.д.), которые можно повторно использовать. - Отступы и размеры: Стандартные значения для отступов, размеров элементов и других пространственных характеристик. - Использование CSS свойств Шаги по созданию дизайн-системы 1. Определение базовых стилей: - Нормализация: Использование нормализатора (например, Normalize.css) для устранения различий в стилях браузеров. - Переменные: Объявление основных цветов, шрифтов, отступов и других значений в виде CSS переменных. - Базовые стили: Определение базовых стилей для элементов (например, body, h1, p). 2. Создание компонентов: - Визуальные компоненты: Создание компонентов, которые отображают пользовательский интерфейс (кнопки, формы, карточки и т.д.). - Абстрактные компоненты: Создание компонентов, которые не имеют визуального представления, но содержат логику и стили (например, компоненты для работы с цветом, типографикой). Ключевые моменты для запоминания: - Постоянство: Придерживайтесь единого стиля во всех компонентах. - Модульность: Разбивайте дизайн-систему на небольшие, независимые компоненты. - Гибкость: Создавайте компоненты, которые можно адаптировать под различные сценарии использования. - Тестирование: Регулярно тестируйте дизайн-систему, чтобы убедиться в ее корректной работе. Пример:

/* variables.css */
:root {
  --primary-color: #007bff;
  --font-family: sans-serif;
}

/* BaseButton.vue */
.button {
  background-color: var(--primary-color);
  padding: 1rem 2rem;
  cursor: pointer;
  ...
}

#webdesign #css

Оговорюсь, что не имеет на чем вы будете писать и какой будет интерфейс: тг-мини апп, чат-бот, веб-апп, мобайл апп, десктоп и тд...

💀

Фраза дня:

Если ChatGPT заменит джунов, то из кого будут вырастать сеньоры?

А как думаете вы? #разное

Перезалив с адекватной разметкой 🎙 Было бы интересно участвовать в мини-хакатоне с призами: 🥇 1-е место подписка тг-премиум на 6 мес. 🥈 2-е место подписка на vpn сервис 3 мес. 🥉 3-е место подписка на vpn сервис 1 мес. P.S. Сервис VPN из грядущего анонса проекта))

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

Скоро покажу пет-проект над которым работал и из-за которого не хватало времени на посты) #работа

#мемы

#humor

18 качественных отличий Vue от React от Artyom Tuchkov - отсутствие легаси-абсурда: @change во вью - это реальный change, а не input, как в реакте, мимикрирующий под change - отсутствие stale closure и всех связанных с ним проблем - автоматический трекинг зависимостей, нет костылей типа useCallback - удобные хелперы из коробки (привет либам clsx и classnames) - удобный DSL, а не стремный JSX - нет useEffect и миллиарда статей и докладов на тему “вы неправильно используете useEffect” - нет проблем с воображением, когда добавляют новые фичи - useImperativeHandle и dangerouslySetInnerHTML - есть сахар для работы с формами - v-model - есть слоты - нет костыльного стриктмода, который, прости хоспаде, твой код запускает дважды, чтобы тебе было приятнее работать избавить тебя от багов - нет monkey-patching’а нативных console и fetch - нет ререндеров на любой чих - нет 50 вложенных контекстов в руте приложения - нет прекрасного forwardRef - есть нормальная система плагинов - есть реактивность для Map/Set из коробки - есть нормальная мутабельность без сотни копий всего подряд - есть nextTick, не надо костылить с flushSync #react #vuejs