🤔Вы когда-нибудь задумывались, как работает реактивность в вашем любимом фреймворке? Что ж, пришло время разобраться.

Для фронтенд-библиотеки реактивность — это способ автоматического выполнения обновлений в ответ на событие. В статье CTO builder.io углубляется в реактивность и сравнивает фреймворки.

🔗 Читать

Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.

Автор статьи как раз рассматривает основные техники рефлексии JavaScript/TypeScript и показывает, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждая из техник показана на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке.

🔗 Читать

#холивар

🤔Что самое трудное в работе программиста? Правильно, выдумывать имена для переменных.

💬Как вы считаете, насколько важен хороший нейминг для сущностей (функций/переменных/констант/классов/модулей) в вашем коде? И есть ли у вас или в вашей команде общепринятые правила или лучшие практики, которым вы следуете при нейминге?

Если да, поделитесь опытом👇

❗Ищем копирайтера

Нам нужен человек, который:
— Любит IT и русский язык.
— Понимает разницу между бэкендом и фронтендом, OWASP и MISRA, функциональным программированием и ООП, микроконтроллером и миникомпьютером, UX и UI.
— Имеет опыт работы от 1 года.
— Будет плюсом, если вы программируете на каком-нибудь языке на уровне стажера/джуна.

Что нужно делать:
— Готовить подборки, ТОПы книг, ютуб- и телеграм-каналов по языкам программирования.
— Делать расшифровки топовых Ютуб-роликов по теме программирования и оформлять их в виде статей.
— Готовить новостные заметки.
— Актуализировать старые статьи.
— Брать интервью у экспертов. Мы поможем с поиском экспертов.
— Иногда писать небольшие рекламные посты в телеграм.
— Писать статьи с кодом, переводить статьи (по желанию, оплачивается отдельно).

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

Условия:
— Белая зарплата: 50 000 руб.
— Возможность работать удаленно.

👉Присылайте свои резюме: [email protected]

⚒ Turbo — набор инструментов нового поколения для фронтенд-разработчика, написанный на Rust. Он состоит из 3-х больших частей:

🔸Turbopack — упаковщик (преемник Webpack).
🔸Turborepo — система сборки
🔸Движок Turbo

На скриншоте — статистика проекта за последние 28 дней. Выводы сделаете сами.

🔗 GitHub

#javascript #tip by Alex Sidorenko

GitHub аутентификация в Next.js 13 с использованием NextAuth: наглядный пример для фронтенд-разработчика

💬 Кофаундер Jeff Atwood еще в далеком 2007-м говорил: «Любое приложение, которое можно написать на JavaScript, в конечном итоге будет написано на JavaScript». Что мы там имеем на практике?

Дмитрий Рычков, веб-разработчик, который начинал карьеру во времена IE6, решил разобраться в первопричинах такой популярности веб-технологий и JavaScript. Пробежался и по истории интернета, и косточки фронтендерам перемыл, и заключение неутешительное сделал.

🔗 Читать

#css #tip by reactive_dude

✨Никакого фотошопа. Просто добавьте немного CSS.

🤔Чистая архитектура во фронтенде: для чего нужна, как выглядит идеальная архитектура фронтенда и чем могут помочь такие инструменты, как Bit и Nx

Главные преимущества чистой архитектуры во фронтенде — это удобство сопровождения и масштабируемость.

📌Почему это так важно и какие инструменты могут нам в этом помочь?

🔸Важность архитектуры: несмотря на сомнения многих, архитектура фронтенда так же критична, как и бэкенда. Она помогает в выполнении бизнес-требований, сокращает риски и упрощает понимание проекта.
🔸Многоуровневая архитектура: пример выше показывает, как использовать слои — от API до глобального хранилища и домена. 
🔸Полезные инструменты. Bit и Nx — инструменты, которые помогут вам обеспечивать правильные зависимости между слоями и поддерживать чистоту кода.
🔸Принципы и анти-паттерны: не забудьте о SOLID, KISS и DRY, когда работаете с компонентами. И остерегайтесь типичных ошибок, таких как импорт ненужных библиотек или добавление бизнес-логики в шаблоны.
🔸И помните, что даже с идеальной архитектурой вам все равно потребуется уделять внимание код-ревью и постоянному совершенствованию.

☝️Pdf-файл для тех, у кого не открывается Medium.

⚒Radix Primitives — низкоуровневая библиотека UI-компонентов, ориентированная на доступность, настройку и удобство разработки.

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

На скриншоте — статистика проекта за последние 28 дней.

DOM, DI и View: разбираемся в деревьях в Angular

Деревья в Angular легко перепутать: они похожи и иногда даже имеют прямое соответствие. Александр Инкин, фронтенд-разработчик команды Angular UI Kit, разобрал их различия и объяснил, какие фичи помогут избежать трудностей.

🔗Читать

#холивар

🤔В современной фронтенд-разработке масштабируемость и поддерживаемость кода играют критически важную роль, особенно при работе над крупными и долгосрочными проектами.

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

💬С учетом этого, какие конкретные подходы, паттерны проектирования или инструменты вы применяете, чтобы обеспечить масштабируемость вашего кода?

Как вы структурируете свои проекты, чтобы они оставались легко поддерживаемыми, даже когда команда разработчиков растет или технологии меняются?

#перечитываястарое

⚒️Prettier — инструмент для форматирования кода, который обеспечивает единообразный стиль.

Он анализирует ваш код и переписывает его по определеннвм правилам. В поддержке: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown и YAML.

🔗GitHub

#devtool #tip

⚡В новом Chrome появились удобочитаемые коды состояния HTTP

Теперь вы можете быстрее выяснить, что случилось с запросом. Тот же результат можно получить, если навести курсор на код состояния в таблице запросов.