🔍 Потестил Qwen и Chat GPT в рамках несложных задач на этой неделе. К примеру, давал им задачи по TypeScript, проблемам настройки Expo, и настройки линтинга. Во всех случаях Chat GPT оказался лучше. По крайней мере его ответы понравились мне больше. Особенно по TypeScript - там не было единственного решения, но в итоге ChatGPT выдал простое и рабочее, которое я лишь немного доработал.

🚙 Кстати, в случае с Owen я использовал две модели - Qwen2.5-Turbo и Qwen2.5-Plus.

☺️ Не буду пока что рубить с плеча - Qwen только недавно вышел в свет. Еще буду тестить, посмотрим что получится. Если будет что-то интересное, то поделюсь результатами.

🛑Подпишись, чтобы не пропустить

⌨️ Переписал проект с JS на TS.

👩‍💻 Тот самый старый блог на React.

Пошагово прошелся по всем частям проекта и показал как все мигрировать на JS:
🛑Обычные JS файлы (с константами, функциями, и т.д.);
🛑Компоненты;
🛑Пропсы;
🛑События;
🛑Код, связанный с подключенными библиотеками.

🔗Ссылка на видео

🛑Не забудь подписаться

😎 Что такое сложность кода? И как ее измерить?

🕵‍♂ СЛОЖНЫЙ_КОД содержит много деталей, которые приходится держать в голове, чтобы его понять. К примеру, там может быть много условий, циклов, они вложены друг в друга, и чтобы разобраться в том, что там происходит, потребуется потратить много времени и усилий. Видите наверно такое в пулл реквестах на работе, да?

✏ Как мы знаем из уроков по информатике, каждое ветвление - это отдельный путь, по которому программа может завершить свою работу. Так вот, каждый такой новый путь усложняет код и добавляет в него новый способ пройти от начала до конца. Чем больше разных путей, тем сложнее нам одновременно держать их в голове. Количество путей, по которым можно пройти от начала функции до её конца, называется цикломатической сложностью (Cyclomatic Complexity) функции.

Мы можем визуализировать количество путей, если представим функцию в виде графа. (см, картинку). Каждое новое условие или цикл добавляет новую ветку, что делает граф и функцию сложнее.

🧠 Есть способы решения этой проблемы:
🛑Вынесение кода в отдельные функции;
🛑Вынесение констант;
🛑Применение раннего возврата. Как говорится, плоское лучше вложенного;
🛑Упрощение условий с применением законов Де Моргана;
🛑Применение паттерн-матчинга (еще это называют словарями), то есть когда мы создаем объект и по ключам быстро обращаемся в нем к нужным данным.

В 👩‍💻 ESLint есть специальное правило - complexity, которое позволяет контролировать сложность кода функции. Считаю, что это очень полезная штука в проекте, где есть начинающие программисты.

📖 Далее продолжу делиться полезной инфой по мере чтения книжки.

🛑Подпишись, чтобы не пропустить.

😄 Пишет создатель FastAPI (фреймворк на Python)

На днях я увидел объявление о работе.
Требовалось 4+ лет опыта работы в Fast API.
Я не смог подать заявку, так как у меня всего 1,5+ года опыта с тех пор, как я создал эту штуку.
Возможно, пришло время пересмотреть принцип «годы опыта = скилл».

▶15:00 МСК

https://www.youtube.com/live/LTsNwe2VaKc

📱Если вы когда-либо и хотели заняться разработкой мобильных приложений, зная JavaScript, то сейчас самое время, когда стоит присмотреться к React Native.

🕵️‍♂️ Вот хорошая статья, в которой найдете аргументы.

😎 Если кратко, то вот:
1️⃣ У React Native очень большое сообщество, которое занимается разработкой и улучшениями. В этом участвуют такие большие акулы, как Meta (запрещенная в России организация), Microsoft, и Expo;
2️⃣Большая экосистема инструментов, для решения разного рода задач из коробки;
3️⃣В последних обновлениях была представлена Новая Архитектура (New Architecture), написанная полностью на 👩‍💻, что позволило значительно увеличить производительность;
4️⃣React Devtools работает из коробки и позволяет дебажить код как мы все привыкли в инструментах разработчика в браузере;
5️⃣Фреймворк Expo стал намного лучше и приятнее, и сейчас является рекомендацией №1 от самой команды RN в качестве входной точки в разработку на RN. Это позволило значительно сократить порог входа, т.к. много чего уже работает из коробки;
6️⃣Как же без Flutter. В течение длительного времени Flutter и RN конкурировали, выясняя кто круче в кроссплатформенной мобильной разработке. На данный момент, RN уже вырвался вперед. И Flutter был форкнут командой Flock.

😃 Разница между джуном и синьором

😐 А как бы мидл сделал?

▶18:00 МСК, сегодня.

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

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

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

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

https://www.youtube.com/live/55BgQk0BoOo?si=JBB60TjWu4s10mzd

▶17:00 МСК, завтра в воскресенье 27.04.2025. Коммерческий проект - мобильное приложение на React Native и Expo.

⌨️ Буду работать над внедрением react-hook-form.

https://youtube.com/live/1yauBwuSEfw

🔧 Не забываем чистить код от forwardRef с 19 версии React

😲 Чекните React Bits - крутая коллекция анимированных, интерактивных и полностью настраиваемых компонентов React для создания красивых пользовательских интерфейсов.

▶ Го, я создал. Завтра, 14.05.2025, в 19:00 по МСК

https://youtube.com/live/KITFr7Od9sw

👩‍💻 Оператор IF в CSS на простом примере.

Как мы привыкли делать

@media (max-width: 600px) {
  body {
    background-color: red
  }
}

Через IF

body {
  background-color: if(media(max-width: 600px): red);
}

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

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

🔗 Тут можно почитать подробнее и глянуть иные примеры

🌚 Новые 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/

☕️ Скоро - новая должность