maxwell coding
208 subscribers
27 photos
1 video
89 links
Frontend разработка: новости, полезная информация, работа, практика, и многое многое другое.

Чат: @front_room
Download Telegram
▶18:00 МСК, сегодня.

⌨️ Буду работать над мобильным приложением на React Native и Expo. Это тот же самый коммерческий проект, по которому я в последнее время проводил стримы. Теперь уже настал черед показать процесс работы над мобилкой.

🌳 Сегодня по плану:

🛑Если все успею, заменить Gluestack на React Native Paper
🛑Внедрить react-hook-form

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

https://www.youtube.com/live/55BgQk0BoOo?si=JBB60TjWu4s10mzd
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Перезапустил стрим. Го
🔥4
🔧 Не забываем чистить код от forwardRef с 19 версии React
Please open Telegram to view this post
VIEW IN TELEGRAM
👀5🔥1
😲 Чекните React Bits - крутая коллекция анимированных, интерактивных и полностью настраиваемых компонентов React для создания красивых пользовательских интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Оператор IF в CSS на простом примере.

Как мы привыкли делать
@media (max-width: 600px) {
body {
background-color: red
}
}


Через IF
body {
background-color: if(media(max-width: 600px): red);
}


❓ Кто-то уже пользуется в проектах?

😓 К сожалению эта фича пока не поддерживается во всех браузерах.

🔗 Тут можно почитать подробнее и глянуть иные примеры
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
🌚 Новые CSS функции sibling-index() и sibling-count()

🛑sibling-index() - для получения индекса текущего элемента относительно всех его соседних элементов;
🛑sibling-count() - для получения общего количества соседних элементов.

😓 Работает пока только в Хром

Вот пример - динамически устанавливаем ширину border и opacity:
<div class="container">
<div></div>
<div></div>
<div></div>
...
</div>


.container div { 
border: calc(sibling-index()*2px) solid;
opacity: calc(sibling-index()/sibling-count());
}
.container div::before {
content: counter(i) "/" counter(N);
counter-reset: N sibling-count() i sibling-index()
}


🔗 Почитать побольше и посмотреть полный код можно тут:
https://css-tip.com/element-index/
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍1
☕️ Скоро - новая должность
Please open Telegram to view this post
VIEW IN TELEGRAM
9111
🚀 Сейчас пилю новую фичу - динамические страницы.

🛑В админке (React + TS + React Admin) нужно сделать возможность создавать страницы — задавать название и контент, все уходит в Firebase;
🛑В мобильном приложении (React Native + TS + Expo) эти страницы будут подгружаться, парситься и отображаться.

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

Буду разбираться, как лучше хранить контент (HTML/Markdown/структура) и как динамически рендерить страницы в приложении. Сложность тут в том, что админка это WEB, и подходы верстки и рендера в WEB и приложениях разные.

🔴 Хочу постримить процесс — что думаете?
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
📖 Реакт ужасен - книга по Реакт, которую сгенерировал ИИ

😲 На удивление точная (и забавная!) книга о React, созданная с помощью искусственного интеллекта Claude. Я одновременно оскорблён и впечатлён. Тон книги немного токсичный, так что воспринимайте её осторожно.

📕 React is Awful
Please open Telegram to view this post
VIEW IN TELEGRAM
😍11
This media is not supported in your browser
VIEW IN TELEGRAM
🎹 Вдруг если вам не хватает внимательности во время кодинга.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁42
🤬 У Cloudflare случился сбой в работе из-за бага в useEffect.

🤬 Я однажды находил баг в проде из-за подобной проблемы.

P.S. бесят эти массивы зависимостей. С ними надо быть аккуратнее.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2