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

​​React: решение интересной практической задачи Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие: ширина таблицы должна соответствовать ширине слайдера; ширина колонки таблицы должна соответствовать ширине слайда; слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации; таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне); при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов. Если вам это интересно, прошу под кат. 👉 Репозиторий с кодом проекта. 👉 Читать...

​​3 и 4 декабря: YaTalks Уже скоро Яндекс вновь проведет свою главную конференцию для IT-сообщества. В программе: лекции, дискуссии и дебаты о всем важном, что произошло в индустрии и жизни за прошедший год. На фронтенд-треке эксперты из Яндекса, Тинькофф, Bravado, Альфа-Банка и других компаний обсудят изменения и статистику веба, неочевидные, но полезные инструменты разработчика в браузерах и многое другое. Конференция полностью пройдет онлайн. Участие бесплатное. Зарегистрироваться и посмотреть программу можно здесь

​Код-ревьюер: У тебя хороший код Я следующие 5 дней:

​​Прикладная архитектура карт в вебе на React и Mapbox. 1 часть — технологический стек Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. Читать... #longread #js #react

​​Узнай уровень своей крутости! Специально ко Дню программиста Сбер запустил квест с реальными персонажами. Презентация приложения для распознавания голосов птиц «Щебет» начнётся через 30 минут, а продукт ещё не до конца готов! Не теряй время – переходи по ссылке и выбирай, кто ты в команде, выполняй задания и получи возможность сделать игру реальностью!

​​Настройка Webpack 5 Подробное руководство о настройке сборщика Webpack 5 и о создании шаблона, который позволит разрабатывать фронтенд сайтов с использованием Pug, Sass, JavaScript и Markdown Читать... #longread #js #webpack

​​🟡Хардкорный тест по JS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый курс по React.js со скидкой! 🚀За 4 месяца вы научитесь продвинутым возможностям Redux, Redux-Saga, Redux-thunk; созданию SPA-приложений и оптимизации их для production; чистому и лаконичному коду с TypeScript; применению интеграционных и юнит-тестов; работе в GraphQL, Apollo, Relay. 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS 🟡Успевайте воспользоваться 20% cкидкой BF по промокоду BLACKFRIDAY22 — группа стартует уже 30.11!

CSS - min(), max() - функции Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным. Сегодня я хотел бы рассказать о min, max функциях Например мы имеем div и у него свойство width, max-width, min-width: Как мы писали раньше: // Вариант 1 div {max-width: 780px; width: 80%}; // Вариант 2 div {width: 50%; min-width: 400px}; Как это можно написать сейчас: // Вариант 1 div {max-width: min(80%, 780px)}; // Вариант 2 div {width: max(50%, 400px)}; ❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра. ❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.

​​Алоха, товарищи-фронты настоящие и будущие! Для всех, кто хочет понять, что такое фронт и что делает фронтенд-разработчик — у нас тут на днях назревает небольшой интенсивчик. Дата: 28, 29, 30 ноября в 18:00 Что вы узнаете: 👉 Кто такой фронтендер и зачем он нужен; 👉 Зачем вобще нужно выбирать JS; 👉 Узнаете, какие навыки сейчас наиболее востребованы на рынке; В итоге:  👉 Естественно, будет практика - вы сверстаете страницу используя HTML5 и CSS3, а также приправите ее логикой на JS. 👉 Получите фидбэк от эксперта, подарок и полезные навыки; 👉 Добавите проект в портфолио и выгрузите его на GitHub Pages. В общем рекомендую, будет интересно!

Иногда стоит читать доки :)

​​Резиновый десктопный адаптив: как сделать большие экраны одинаковыми Зачастую, когда говорят об адаптиве, подразумевают сужение большого экрана до мобильного размера без потери функциональности. Однако, на самом деле, адаптив также существует между разными десктопными версиями. Обычно разработчики не очень стараются применять адаптивные подходы для больших экранов, ведь если интерфейс поместился на HD разрешении, то он точно поместится на 2K разрешении и больше. Однако контент никак не масштабируется, поэтому имеем на больших разрешениях маленькие элементы, которые трудно уловить взглядом. В этой статье я покажу, как сделать интерфейсы пропорционально одинаковыми на разных десктопных разрешениях. Читать...

​​🎄X-MAS HACK 2022 – время исполнения желаний🎄 👨🏻‍💻Если ты кодишь – ждём тебя в секции «Хакатон» с кейсами от IT-компаний  💡Если ты настоящий генератор идей – ждём в секции «Идеатон», где ты сможешь предложить самые смелые идеи для бизнеса!  Даты хакатона: 15–17 декабря 2022 года  Дедлайн регистрации: 12 декабря 23:59  Регистрация и подробности: Хакатон - https://clck.ru/32joBF Идеатон - https://clck.ru/32joAz Создавай команду или подавай личную заявку, а мы найдем для тебя крутую команду! Регистрируйся, решай новогодний кейс, заводи знакомства, перенимай опыт от топовых экспертов, стань частью X-MAS HACK! И кто знает.. возможно, именно ты заберешь главные призы! 💰Призовой фонд – 1.700.000 рублей! 🎁 Новогодний мерч, подарки от партнеров и сертификаты  🎅🏻 Менторская поддержка от топовых экспертов 🪄 Мастер-классы, лайфхаки и много полезных знакомств Больше хакатонов и призов - https://clck.ru/32joBN

Небольшая шпаргалка вам :)

​​Как найти утекшие объекты в дампах памяти Chrome DevTools Утечки памяти в WEB приложениях могут сильно подпортить представление пользователей о ваших продуктах. О том, как тестировать на утечки памяти есть много туториалов. Однако, мало диагностировать наличие утечки - надо ее суметь отладить и исправить. В своей статье мы поделимся алгоритмом, как в нашей компании мы автоматизированно проводим первоначальную отладку утечек памяти и находим ключевые объекты, которые помогают нам в дальнейшем упростить отладку и исправление ошибки. Читать...

​​26 ноября СберБанк проводит One Day Offer для Frontend-разработчиков. 👉 Пройди fast-интервью и получи оффер от крупнейшего банка страны за один день! Мы ищем специалистов с опытом от 2,5 лет для работы над цифровой образовательной платформой. Нашим продуктом пользуются в тысячах школ по всей стране, а также в адаптационной программе Сбера BootCamp и «Школе 21». Над развитием проекта трудится 35 scrum-команд. Наш стек компетенций: ReactJS, TypeScript, Apollo Client, Styled-Components, Material-UI, Storybook. Задачи, которые мы поручим тебе: ✔ развитие микросервисов; ✔ участие в разработке архитектуры клиентской части; ✔ оптимизация производительности фронта, сборки проекта и первого рендера; ✔ сопровождение и развитие UI kit; ✔ повышение адаптивности интерфейсов; ✔ автоматизация процессов разработки frontend; ✔ настройка пайплайнов (CI/CD), Quality Gates. Присоединяйся к команде! ✍ Отправь заявку на участие в One Day Offer.

​​Как войти в блокчейн через JavaSсript: создаем свой DeFi-проект на базе JS SDK смарт-контрактов Waves Enterprise В этом посте автор рассказывает о JavaScript SDK. А чтобы было интересней, в качестве примера создает на нем простой, но уже полноценный инструмент децентрализованных финансов — CPMM, Constant Product Market Maker (маркет-мейкер на основе постоянной формулы, такой, например, как Swop.fi). Читать...

​​Журнал Академии Яндекса — интересно об IT Помогает молодым IT-специалистам работать с удовольствием и эффективно → Расскажет, как попасть в компанию, которая вдохновляет. → Научит правильно организовать работу, расти в глазах коллег (и профессионально). → Поможет на лету решать проблемы, стать своим в сообществе и работать без стресса. → Покажет, как устроена работа в Яндексе изнутри — с точки зрения команд, продуктов и технологий. → Подсветит гиковские темы: от старых компьютерных игр до редких языков программирования. Подписывайтесь, чтобы не пропустить свежие публикации!

​​Перевезу в iframe. Дешево Представьте, что вы отвечаете за большой веб-сервис со сложным интерфейсом, замысловатой навигацией, авторизацией, платежной системой. Представьте, что однажды к вам приходит ваш PO и просит сделать не одну его часть, не один конкретный бизнес-процесс, а весь этот сервис встраиваемым. И конечно по пути ни один из сотен тысяч пользователей вашего сервиса не должен пострадать. Возможно ли это и насколько это дорого? Читать...