Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
23.2K subscribers
2.21K photos
122 videos
38 files
4.63K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
💬 Кофаундер Jeff Atwood еще в далеком 2007-м говорил: «Любое приложение, которое можно написать на JavaScript, в конечном итоге будет написано на JavaScript». Что мы там имеем на практике?

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

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

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

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

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

Теперь вы можете быстрее выяснить, что случилось с запросом. Тот же результат можно получить, если навести курсор на код состояния в таблице запросов.
🔍🤖 40 сервисов на базе AI, которые помогут найти работу в 2023 году

Как составить резюме, оптимизировать сопроводительное письмо и найти вакансию в 2023 году? Использовать сервисы на основе искусственного интеллекта. Какие именно — рассказываем в этой статье.

🔗 Читать статью
🔗 Зеркало
🚀 Опубликованы результаты опроса State of CSS 2023!

Все как обычно: много цифр и данных, которые однозначно стоит проанализировать.

В новом отчете вы можете настраивать диаграммы с помощью собственных фильтров.

🔗 Смотреть отчет
#холивар

😎Первый проект в карьере разработчика — самый волнительный и запоминающийся.

💬А вы помните свои впечатления от первого проекта и стек, на котором он был написан? Как бы вы подошли к своему первому проекту с нынешним опытом?
💼🚫 Устроился на работу, но она разонравилась: 8 советов, что делать

Несколько советов, как адаптироваться и понять, стоит ли оставаться или лучше уволиться.

🔗 Читать статью
🔗 Зеркало
Разбираемся с работой DDD на практике

Станисла Батурин, фронтенд-разработчик в Тинькофф, за много лет изобрел целый «магазин» велосипедов и костылей, пока не познакомился с разработкой, основанной на модели предметной области (Domain-Driven Design). Его наблюдения о DDD — в статье.

🚀А те, кто хочет изучить метод от и до, могут посмотреть разбор книги Влада Хононова Learning Domain-Driven Design от книжного клуба Code of Architecture.
Мок-собеседование — это один из эффективных инструментов подготовки к собеседованию на вакантную позицию.

📌Ловите небольшую подборку и сохраняйте в заметки:

🌐 Мок-собеседование для джуна-фронтендера: собеседование с лайвкодингом / Собеседует Никита Дубко, руководитель службы разработки в HR Tech Яндекса, ведущий подкаста Веб-стандарты
🌐 Собеседование на позицию фронтенд-разработчика для X5Tech / Собеседует Максим Ульянов, руководитель направления frontend-разработки в X5Tech
🌐 Мок-собеседование на позицию джуна-фронтендера (раз и два) / Собеседует Никита Козлов
🌐 Мок-собеседование на позицию фронтенд-разработчика с практическим акцентом на React и JS (раз и два) // Ulbi TV
Please open Telegram to view this post
VIEW IN TELEGRAM
Паттерны реактивности в современном JavaScript

«Реактивность» — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.

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

👀 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🎨 Понимание кривых Безье для фронтендера

Кривые Безье активно используются в компьютерной графике для рисования плавных изгибов, CSS-анимации и других сферах.

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

Сегодня для вас не просто статья, а гайд от фронтенд-разработчика, который использует кривые Безье на практике. Он включает видео, анимацию и интерактивные компоненты.
Please open Telegram to view this post
VIEW IN TELEGRAM
#css

🤩Ожидание (слева)

.toppings {
display: grid;
place-items: center;
}

.slices {
display: grid;
grid-template:
"slice1 slice2"
"slice3 slice4";
}

.slice:nth-child(1) {
grid-area: slice1;
border-top-left-radius: 100%;
}

.slice:nth-child(2) {
grid-area: slice2;
border-top-right-radius: 100%;
}

.slice:nth-child(3) {
grid-area: slice3;
border-bottom-left-radius: 100%;
}

.slice:nth-child(4) {
grid-area: slice4;
border-bottom-right-radius: 100%;
}


🤔Реальность (справа)

.pizza-topping {
float: right;
}
«Библиотека программиста» продолжает поиски контент-менеджера для ведения телеграм-каналов

Ищем человека, который грамотно пишет, разбирается в контенте и в одной из этих тем:
👉С++
👉Frontend
👉мобильная разработка
👉тестирование

Мы предлагаем частичную занятость и полностью удаленный формат работы — можно совмещать с основной и находиться в любом месте🌴

Подробнее о вакансии и форма для отклика — по ссылке.

Ждем вас в команде!
📖 ТОП-10 книг по JavaScript в 2023 году

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

🔗Читать статью
🔗Зеркало