🍉🍑 Новый CSS и HTML

На мой взгляд, полезнее, чем этот ролик сделать мне в своей жизни больше ничего не получится!
Можете отписываться 🙃

Надеюсь оцените труды лайком!

К просмотру!

И теперь вы можете оформить подписку мои плюшки с НЕ российских карт через Telegram Donate!

Там правда чуть побольше стоимость из-за ограничений бота, но думаю загладим этот момент дополнительными бонусами!

Подписка с НЕ российской карты!
Подписка c российской карты!

🤯⚔️ HTMX заменит Frontend?! WTF?

Доклад про самую обсуждаемую фронтендерскую новинку этого года!

К просмотру!

Всем привет!
Вход в фронтенд-комьюнити теперь БЕСПЛАТНЫЙ!

Чаты комьюнити:
- Вайтишная (главный чат)
Топики: Флудилка, JS/TS, React.js, HTML/CSS, вопросы новичков

- Околоайтишная
Топики: Вакансии, Собесы, конференции

- Академия
Тут собираемся в группы и пилим стартапы.
Также это место для общения начинающих талантов.

- Вьюшная
Все о Vue.js

- Ангулярная
Все про Angular

- Шахматная
Играем в шахматные турниры

- Редакционная
Тут можно предложить интересные темы для публикации в телеге/роликах.

- Мемная
Тут делимся мемами про айтишечку. Лучшие публикуем в новом мемном канале

Ссылка сразу на всю папку чатов:
https://t.me/addlist/9TYYN_UDOCY5ZTc6

Будем создавать новые чаты и модифицировать старые при необходимости.
За изменениями следите тут =)

База знаний комьюнити:
https://foamy-stag-bb6.notion.site/Hero-ddba190b4e5c48488fdbaac13e54d863?pvs=4

Скажу честно: у меня не хватает времени ее пополнять.
Ищем активных ребят, чтобы ее развивать.
Имена героев будут увековечены в базе.

В Редакционном чате ждем альтруистов!

Доступы к тренажерам от HTML Academy вы можете получить, постучавшись ко мне в ЛС!
https://t.me/How_to_learn_IT

Могу отвечать с небольшой задержкой 👽

❄️ Экосистема React.js 2023

Мир Реакта меняется постоянно.
Твой прошлогодний модный стек, сегодня уже считается устаревшим.
Разбираемся в том, что модно носить сегодня!

К просмотру!

💫 Экосистема React.js 2023

1. Песочницы
- codesandbox
- stackblitz

2. Сборка
- если клиентский SPA - Vite
- если SSR - Next.js, Remix

3. Роутинг
- если клиентский SPA - React Router / TanStack router
- если SSR - Next.js routing

4. Стейт менеджеры
- клиентские: Redux Toolkit, Zustand, Effector, Mobx
- серверные: RTK Query, Tanstack Query (React Query), Apollo

5. Работа с формами
- Formik
- React Hook Form (Лучше использовать эту либу)
- валидация: zod, yup

6. Тестирование
- раннеры unit-тестов: Jest, Vitest, Bun (Экспериментально)
- React Testing Library - для тестирования компонентов
- Playwright - end-to-end

7. Стилизация
- Tailwind (Для последователей Bootstrap)
- css-in-js: Styled Components или Emotion
- css modules

8. UI-киты
- Material UI, Mantine UI, Ant Design, Chakra
- Нестилизованные библиотеки: Headless UI, React Aria, Downshift, Base UI, Radix, Reach UI, Lion

9. Анимации
- React Spring
- Motion

10. Визуализация данных
- Victory Chart
- react-chartjs-2
- recharts

11. Таблицы
- Tanstack Table

12. I18n
- react-i18next
- format.js

13. Инструменты разработчика
- React Dev Tools
- Redux Dev Tools
- Testing Playground
- Dev Tools для React Hook Form
- Dev Tools для TanStack Query

14. Документация
- Docusaurus 2.0
- Nextra для приложений на Next.js
- Storybook - для дизайн-систем

15. Type Checking
- TypeScript

16. Мобильные приложения
- React Native
- Flutter (Не js/react, но по просьбам трудящихся добавим)

17. Остальное
- dnd kit - для drag-and-drop
- react-dropzone - для файлов
- Firebase, Supabase платформы
- работа с датами: day.js, date-fns

*****************************
Пост будет пополняться.
Пишите в комменты: какие инструменты стоит добавить в список актуальных технологий?

🧅 Bun 1.0

Самой горячей новостью недели стал релиз Bun 1.0!
Много споров породил: кто-то восхищался скоростью, кто-то снисходительно вспоминал Deno.
На вопрос "Заменит ли Bun ноду?" я не отвечу и предлагаю подискутировать в комментах вам.

Выскажу лишь аргумент за и против.

За Bun
В отличии от Deno, Bun полностью совместим с Node.js.
Поэтому если перейти на Bun - дело получаса, то почему бы и нет?

Против Bun
Главная фишка Bun - скорость.
Но проблема в том, что в приложениях узким горлышком производительности является не Node.js, а коннект с базой данных.
А бизнес заинтересован именно в этом показателе перформанса, а не в скорости прогона тестов.

Если пропустили, то вот вам сборник роликов про релиз Bun 1.0

ru:
Bun sh - революция в JavaScript? (Ulbi tv)
Bun 1.0: вместо Node.js? (Anton Larichev)

eng:
Bun 1.0 is here (Официальный канал)
Bun Is Better Than I Hoped (Theo)
Bun is disrupting JavaScript land (Fireship)
Bun 1.0 Release | Prime Reacts (ThePrimeTime)

Итак, подводим итоги!

Добавлены:
- стейт менеджеры: Effector, Mobx
- фреймворк: Remix
- валидация: zod, yup (В ролике упоминались, но в список не вынесены)
- работа с датами: day.js, date-fns (moment.js лучше больше не использовать)
- мобильные приложения: Flutter (Тут он белая ворона, но пусть будет)
- стилизация: css modules

🕵‍♂️ Первый в истории ресерч State of HTML!

Да, частично пересекается с исследованием по CSS, но все равно много нового для себя откроете!

Пройти тест!

🌝 Бесплатные полезные ресурсы по вебу

1) HTML - https://www.w3schools.com/
2) CSS - https://css-tricks.com/
3) UI/UX - https://hackdesign.org/
4) JavaScript - https://scrimba.com/
5) React - https://scrimba.com/
6) Vue - https://vueschool.io/
7) Git - https://learngitbranching.js.org/
8) Web3 - https://learnweb3.io/

Множество интерактивных курсов (очень советую) - https://www.freecodecamp.org/

🇬🇧 Нужен английский

🔑🪆 Новые переменные в JavaScript!

Давненько в JavaScript не появлялись новые способы объявления переменных.
И вот пожалуйста! Разбираемся с using!

Смотреть!

🥶☠️Мой самый большой косяк в карьере!

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

Меня джуна забросили на публичный проект, который нужно было сдать к определенной дате.
На дату эту был запланирован запуск рекламной компании: мало того, что ролики крутили в рекламных блоках по всем каналам, так еще и проект стал генеральным спонсором одного популярного в те времена шоу.

Короче уровень ответственность и стресса в команде зашкаливал. Естественно, мы ничего не успевали и в прямом смысле ночевали на работе.
Но за неделю до дедлайна прила более менее была готова. Осталось только отрегрессить.

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

Поэтому я, недолго думая, взял сайт с Челябинской криминальной сводкой.

Регресс прошел успешно, проект запустили.
Но вот на следующий день мы приходим на работу героями и тут один из высокопоставленных сотрудников компании N звонит нашему продукту и орет в трубку:
"Что за х**ня у вас происходит?"

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

Даа, каким-то образом на прод выкатились статьи с тестового стенда 🤷
И это все в том момент, когда на сайт льется трафик с рекламы.

Разбор полетов был серьезным.
Понятное дело, что это коллективная ошибка, но с той поры я навсегда запомнил, что в тестовые данные херню вставлять не стоит.

🎃 Самый новый HTML!

Возможности хтмла о которых мало кто знает.

К просмотру!

Srcset and sizes атрибуты

Старейшие атрибуты изображений, которые на практике используются очень редко.

Отображение разноформатных изображений в адаптивной верстке - частая задачка.

Условно на телефонах нужно отобразить легкую картинку 1:1, а на десктопах большую и тяжелую 16:9.

Для этого можно использовать связку атрибутов srcset + sizes в <img/>

Атрибут srcset содержит список URL изображений, за которыми следуют сведения о ширине изображений.

Описывая набор изображений таким способом, мы сообщаем браузеру следующее: «Я даю тебе список изображений и доверяю тебе выбор самого подходящего».

Чтобы переключение изображений заработало нужен еще атрибут sizes, где
пишем список медиа-условий и соответствующую ему ширину изображения.

Подробная статья про адаптивные изображения с srcset и sizes тут.

Надо сказать, что чаще для решения тех же задач используется <picture/>.

❄️ State of React 2023

Разгулялись в этом году исследователи из Devographics.
На этот раз изучаем React!

К исследованию!

🎭🎪 Новые CSS-анимации!

Продолжаем знакомиться с новинками фронтенда!

Сегодня разбираемся в мастштабном обновлении CSS анимаций!

К просмотру!

Ссылки на документацию из ролика:

1. View transitions API
2. Scroll driven animation