Frontender's notes. Страница 12

​​🖥Использование адаптивных изображений в веб-разработке В этой статье автор расскажет, как реализовать адаптивные изображения с JS-обработкой на фронтенде, и почему изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения, а также вы узнаете какой самый современный и наиболее правильный способ работы с адаптивными изображениями. Читать...

Самый недооценённый канал для фронтендеров Контент создаётся вместе с тимлидами с опытом работы в Вконтакте, Яндексе, Telegram Open Network и Frogly! Собрали подборку полезных статей и видео оттуда, читайте и подписывайтесь: ▫️ChatGPT во фронтенде — для всех, кто хочет понять, как применять нейросети в веб-разработке  ▫️Как повысить качество кода — и облегчить работу для всех, кто работает над проектом ▫️Как прокачаться от джуна до миддла — секреты быстрого роста от middle frontend-разработчика из VK ▫️Как писать чистый код — о том, как делать код понятным и читаемым ▫️Что случилось с CSS в 2022 — об основных изменениях за последний год Ещё у сообщества есть чат, в котором можно задать любой вопрос по фронтенд-разработке. А помимо полезного контента там и мемы про разработку бывают:) Канал: @karpovdev

​​🤔7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами В этой статье автор расскажет, как в заранее определенной гибкой сетке макета мы можем размещать дочерние элементы, и почему Grid Layout позволяет кардинально изменять структуру визуального макета, не требуя соответствующих изменений разметки, а также вы узнаете как комбинируя медиа-запросы со свойствами CSS, можно легко добавлять адаптивность для отображения на мобильных устройствах, сохраняя при этом более идеальную семантическую структуру HTML кода. Читать...

​​🔥Styled Components — идеальная стилизация React-приложения В этой статье авто расскажет, почему TypeScript будет отличным помощником в написании стилизованных компонентов, и почему совместное размещение стилизованных компонент с вашими фактическими компонентами упрощает файловую структуру вашего проекта, а также вы узнаете почему Styled Components — это идеальный инструмент для React проектов, где мы можем позволить себе инновации, уникальные подходы и массу вариативности. Читать...

​​HolyJS — конференция для всех, кто пишет на JavaScript.  В программе технические доклады от спикеров из топовых компаний, личный опыт, боль, практика и много кода. Поговорим про ИИ во фронтенд-разработке, разберемся в устройстве плееров анимаций на примере lottie-web, обсудим, почему Playwright лучше Jest — и это только малая часть программы. Будут и более софт-скилловые доклады, например про апгрейд карьеры, а также круглые столы и дискуссии. Вы можете пообщаться с коллегами из разных компаний, увидеть новые лица JS-мира, а в офлайне поиграть в старую-добрую JS-игру: ищите в словаре случайное слово, гуглите, есть ли JS-библиотека с таким названием. Если есть, выпиваете пиво :) Если билет вам покупает работодатель, то пришлите ему эту ссылку. Если идете за свой счет, то ищите билеты здесь. А по промокоду FRONTENDNOTES они будут еще дешевле.

​​⚡️Как работает JS: WebRTC и механизмы P2P-коммуникаций В этой статье автор расскажет, что такое WebRTC, что такое веб-сокет, какие есть различия между WebRTC и WebSocket, а также вы узнаете как настроить внешний интерфейс и сервер для приложения видео чата. Читать...

​​🗓Работа с датами в JS В этой статье вы узнаете альтернативы Moment.js который прекратил свою поддержку, узнаете какую библиотеку выбрать для роботы с датой, а также вы узнаете почему лучше использовать Day.js. Читать...

​​Офер в Яндекс всего за два дня Приходите на Weekend Offer Frontend 27–28 мая. Всего за два дня вы сможете пройти все технические секции, выбрать команду по душе и получить офер. Ждём фронтендеров на JavaScript и TypeScript с опытом работы от 4 лет. С нашей стороны вас ждут 13 команд: Маркет, Рекламные продукты, Cloud, HR Tech, 360, Суперапп, Лавка, Бизнес-приложения, Еда, Умный дом, Инфраструктура, Поиск и Учебник.  Нанимаем разработчиков в любой офис России и Беларуси. Некоторые команды приглашают в международные хабы в Армении, Казахстане и Сербии. Регистрация открыта до 24 мая, все подробности ищите здесь.

​​⚡️Оптимизация процесса сборки с помощью Webpack В этой статье автор расскажет, как уменшить размер сборки, как ускорить процесс сборки, как правильно делать разделение кода, а также вы узнаете какие инструменты использовать чтобы убрать проблемы отладки. Читать...

​​👤Лучшие практики стилизованных компонентов React В этой статье автор расскажет, почему при работе нескольких разработчиков над одним React-приложением, всегда полезно нацеливать команду на работу с общим набором лучших практик, как сделать совместно расположенные стилизованные компоненты, почему лучше применять подход с использованием класса CSS, и как это станет преимуществом в разработке сайта, а также вы узнаете почему не существует единственного правильного способа использования стилизованных компонентов и как использовать улучшенный вариант отладки стилизованных компонентов. Читать...

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

JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет. Для данной задачи мы будем использовать: 👉 Cвойство window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'.  👉 А так же стандартный JS event visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityState Пример кода: const isVisibilityHiddenState = 'hidden'; const handleVisibility = () => {  if (document.visibilityState === isVisibilityHiddenState) {  console.log('user is on the page');  } else {  console.log('user is not on the page right now');  } } document.addEventListener('visibilitychange', handleVisibility); Надеюсь это было вам полезно. Удачи в экспериментах!

​​❔❔ JS-разработчик? А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js?  ✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!  ⏰ Время прохождения теста ограничено 30 минут ✍️ПРОЙТИ ТЕСТ: https://otus.pw/HR4O/ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. Информация о рекламодателе на сайте www.otus.ru

​​🗣10 советов по CSS для улучшения переходов и анимаций Со статьи вы узнаете как делать качественные переходы и анимации, как делать ускорение и замедление переходов, а также вы узнаете как правильно оптимизировать страницу под браузер. Читать...

​​🔥Создаем CSS разметку в стиле masonry В этой статье вы узнаете, как использовать стиль Masonry, который позволяет создавать эффективные и привлекательные макеты для веб-страниц. Также автор вам расскажет как максимально эффективно использовать пространство на странице. Читать...

​​Б**дский год… Как пережить весь этот трэш, не задушить себя самокритикой и не сдохнуть в пучине стресса и неопределенности? Алкоголь, сигареты, таблетки, психотерапия... А может, нейроинтерфейс?  Да, одно из рабочих решений — нейроинтерфейс от российского стартапа Neiry. Это как фитнес-трекер, только для мозга. В чем суть? • Нервные клетки мозга постоянно генерируют электрические импульсы • Устройства Neiry (на фото) измеряют электрическую активность мозга и расшифровывают ЭЭГ-сигнал в понятные человеку метрики: концентрация, усталость или стресс • Постоянная обратная связь о психоэмоциональном состоянии помогает человеку вернуть сознание в текущий момент, вместо того чтобы волноваться о неопределенности будущего или ошибках прошлого Так человек учится лучше понимать себя и свое состояние. Cфокусироваться на работе будет становится проще, а результаты начинают появляться быстрее. Но главная фишка технологии совсем в другом…  Подробнее тут, переходи → neiry.ru/?utm_source=tg&utm_medium=frnotes

​​🖥 Как начать работать с git В этом гайде вы узнаете как начать работать с git за 10 минут, что такое контроль версий, чем он полезен для веб-сайтов и как этим пользоваться. Гайд...

​​🤦5 ошибок начинающих разработчиков при создании React приложений В этой статье автор рассмотрит свои ошибки при создании проектов на React, здесь вы узнаете инструменты для запуска проектов, почему лучше не использовать propTypes, а также почему лучше не использовать команду импорт React. Читать...