React.js: Документальный фильм

React - это одна из самых популярных библиотек, используемых сегодня. Учитывая, что она была создана в таком гиганте, как Facebook, можно предположить, что она всегда была обречена на успех.

А что если мы скажем вам, что первое знакомство React с публичной сферой было совсем не гламурным? Документальный фильм React.js: The Documentary расскажет вам полную историю ранних дней React, сосредоточившись на преданной группе разработчиков, которые помогли вывести его на мировую арену. Эту историю рассказывает звездный состав разработчиков, таких как Том Оккино, Кристофер Чедо, Пит Хант, Себастьян Маркбоге, Дэн Абрамов и многие другие.

Загляните на сайт cult.honeypot.io, где собраны нерассказанные истории разработчиков, связанные с открытым исходным кодом, карьерой и другими интересными вещами, которыми занимаются разработчики.

Honeypot - это платформа для трудоустройства разработчиков, цель которой - обеспечить разработчиков отличной работой. Хотите увидеть, что мы собой представляем? Посетите сайт honeypot.io, чтобы найти работу по душе.

источник

✍️ @React_lib

Интерактивный учебник по использованию дженериков в TypeScript

https://github.com/total-typescript/typescript-generics-workshop

👉 @frontend_1

Рассказываем о пользе и вреде FullStack-фреймворков на примере Meteor.js

Коротко расскажу о том, как я вообще пришел к Node.js.

В начале пути, около 8 лет назад, я писал на C++, Ruby, немного на Python и еще нескольких языках. Конечно же, был в моей жизни и frontend. В JavaScript я заметил интересную особенность, которую до этого видел только у Qt — можно не опрашивать что-либо в цикле и не ждать выполнения системного вызова, а подписаться на событие и, когда оно произойдет, выполнить некоторые действия.

Чуть позже я услышу термин «реактивное программирование» и, спустя еще некоторое время, свяжу это с миром JS — мне покажется, что за этим будущее. Потом я узнаю о Node.js, перестану плеваться от асинхронных операций (в этом изрядно помогут промисы и async/await). И вот я здесь.

https://habr.com/ru/company/ncloudtech/blog/690464/

👉 @frontend_1

Открыта регистрация на серию митапов для начинающих разработчиков Intern Meetup Week в Яндексе с 17 по 20 апреля🎉

18 апреля состоится митап для направления Frontend. Будет доступен офлайн и онлайн формат.

Регистрация по ссылке: https://clck.ru/33qVyG

При отборе на митап у вас есть шанс получить приглашение на пробное собеседование на стажировку в Яндекс 🔥

В программе лекции экспертов о технологиях, общение с руководителями команд и рекрутерами, нетворкинг и подарки.

📆Когда: 18 апреля 18:00 - 21:30, сбор гостей с 17:30
🌐Где: офис Яндекса, ул. Льва Толстого, 16, м.Парк Культуры и трансляция онлайн

Все подробности и регистрация по ссылке: https://clck.ru/33qVyG

А чтобы быть в курсе всех новостей Young&&Yandex, подписывайтесь на чат-бот.

VK поддержит разработчиков мини-приложений облачными ресурсами.

Разработчики мини-приложений на платформе VK Mini Apps получили доступ к программе поддержки VK Cloud. Каждому участнику программы будет ежемесячно начисляться бонус в 2500 рублей на счет в личном кабинете, которые он сможет потратить на облачные сервисы.

Всего в VK Cloud доступно около 30 инфраструктурных и платформенных сервисов, а также современные инструменты для разработки отказоустойчивых приложений.

Программа действует до конца 2023 года. Для участия необходимо создать учетную запись на платформе VK Cloud и заполнить специальную форму, указав ID проекта. Более подробная информация доступна по ссылке.

👉 @frontend_1

Стили заголовков в CSS: картинки, тени, анимации

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

У сайта есть примерно 500 миллисекунд (0,05 секунды), чтобы произвести впечатление, поэтому давайте узнаем, как их использовать!

https://blog.logrocket.com/five-cool-css-header-styles-with-cross-browser-compatibility/

👉 @frontend_1

Как легко управлять зависимостями в JS Monorepo

Управление зависимостями в JavaScript monorepo значительно упрощается с помощью pnpm и Bit.

Управление зависимостями в JavaScript - это боль номер 1 для разработчиков согласно опросу 2021 года "State of JS". В этом нет ничего удивительного. Недалеко от него, на втором месте, идет архитектура кода.

https://blog.bitsrc.io/how-to-easily-manage-dependencies-in-a-js-monorepo-6216bd6621ea

👉 @frontend_1

Если вы хотите учиться разработке глубоко и системно, приходите в Хекслет! Сейчас открыт набор на онлайн-профессию «Фронтенд-разработчик».

За 10 месяцев вы изучите JavaScript в связке с HTML и CSS. Освоите React для создания сложных компонентов, разберетесь с сопутствующими инструментами (NPM, Git, Webpack, командная строка), получите опыт построения архитектуры полноценного приложения и написания чистого кода.

Уже во время обучения вы станете участником Карьерного трека.

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

🆙 Мы заинтересованы, чтобы вы нашли первую работу. Получите полную консультацию по профессии и карьере в IT!

Css em vs rem

👉 @frontend_1

HTML Tip 💡

👉 @frontend_1

Использование React в приложениях Angular

Два сценария требуют использования React в приложении Angular. Во-первых, в экосистеме React есть компонент, на разработку которого у нас уйдут недели, например, компонент Timeline. Во-вторых, возможно, мы приобрели компанию, использующую React, и нам необходимо интегрировать его в существующее приложение.

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

https://netbasal.com/using-react-in-angular-applications-1bb907ecac91

✍️ @React_lib

Краткий курс aria-description

Мне всегда казалось странным, что разработчики могли задать доступное имя/метку элемента с помощью атрибутов aria-label и aria-labelledby, но только aria-describedby для задания доступных описаний. Поэтому добавление aria-description в Safari стало интересным сюрпризом.

Я решил провести мини-погружение и тестирование поддержки aria-description, чтобы восполнить пробел в знаниях и быть готовым использовать ее, когда придет время. Своего рода краш-курс, если хотите. Я делюсь своими выводами здесь, на случай, если они окажутся ценными для кого-то еще.

https://www.darins.page/articles/aria-description-crash-course

👉 @frontend_1

Будущее рендеринга в React

Популярность React как библиотеки для создания пользовательского интерфейса за последние несколько лет только росла и довольно быстро. На момент написания этой статьи она имеет более 14 миллионов еженедельных загрузок с npm, что, как я знаю, не является корректным показателем популярности библиотеки, но одно только расширение React Devtools chrome имеет более 3 миллионов еженедельных активных пользователей. Тем не менее, шаблоны рендеринга в React практически не менялись до появления React 18.

https://prateeksurana.me/blog/future-of-rendering-in-react/

👉 @frontend_1

Учебник по созданию веб-сайта с 3D-анимацией на React с использованием ThreeJS (WebGi) и GSAP

Узнайте, как создать 3D-анимацию в React, используя такие технологии, как WebGi (на базе Three.js) и GSAP. Сначала мы узнаем, как находить 3D-модели и отображать их на вашем сайте с помощью WebGi. Затем с помощью React и GSAP мы создадим 3D-анимацию этой модели. Далее мы узнаем, как оптимизировать 3D-анимацию в React для мобильных устройств. Наконец, мы создадим сайт для производства и загрузки.

0:00:00 Intro
0:01:27 Project setup
0:07:12 Building website navigation
0:15:02 Building jumbotron
0:21:42 Building sound section
0:29:27 Building display section
0:33:27 How to find and load 3D models
0:36:55 Building WebGi viewer component
0:53:17 Animating 3D model with GSAP scroll animation
1:13:42 Implementing 3D model preview mode
1:32:27 Optimizing 3D animation for mobile phones
1:43:31 Building production-ready website and uploading
1:45:07 Outro

👉 @frontend_1

Cssui — коллекция интерактивных UI-компонентов на чистом CSS без Javascript

https://www.cssui.dev/

👉 @frontend_1

Фишки TypeScript

В этом ролике мы разберем интересные моменты в TypeScript, которые можно будет применять на практике. Поговорим про Union типы, подсветку ошибок, тайпгуарды, утилитарные типы, generic компоненты, условные типы и кортежи, разница между enum vs as const object

00:00 ➝ Введение
00:50 ➝ 1 лайфхак. Exhaustive check
03:50 ➝ 2 лайфак. Typeguard is
06:20 ➝ 3 лайфхак. Enums vs const enum vs as const object
14:00 ➝ 4 лайфхак. ReturnType, Parameters
16:20 ➝ 5 лайфхак. Conditional types. Условные типы
18:45 ➝ 6 лайфхак. Кортежи (tuple)
20:00 ➝ 7 лайфхак. Immutable, readonly
21:20 ➝ 8 лайфхак. Utility types
26:10 ➝ 9 лайфхак. Generic component React
27:50 ➝ Наглядный пример работы Event loop в коде

источник

👉 @frontend_1