29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Расширения для VSCode
Небольшая подборка расширений, которые могут сделать ваш процесс разработки удобнее.
https://dev.to/mitchiemt11/cool-vscode-extensions-that-that-ive-discovered-12mg
Испытываем новые возможности элемента <permission>
Управляем доступом к различным фичам с <permission>, который уже скоро будет стандартизирован.
https://developer.chrome.com/blog/permission-element-origin-trial?hl=en
Новинки CSS и веб-интерфейса
Обзор новшеств с I/O 2024, которые уже можно использовать (или в ближайшем будущем).
https://developer.chrome.com/blog/new-in-web-ui-io-2024?hl=ru
Регистрация на ARCHI.Tech от ВТБ уже стартовала!
Предварительный этап, на котором можно заработать дополнительные баллы, уже стартовал! Включайся в работу прямо сейчас: https://cnrlink.com/architechvtbfront
📅 Расписание хакатона:
🔹 31 мая – начало регистрации
🔹 14 июня – старт предварительного этапа и митап для участников
🔹 28 июня – окончание регистрации, публикация задач хакатона
🔹 29 июня – закрытие приема решений, жюри выбирает финалистов
🔹 30 июня – онлайн-питч лучших проектов и награждение победителей в прямом эфире
Тебя ждет погружение в проекты ВТБ, знакомство с экспертами банка, решение практических задач и прокачка технических навыков!
👉 Попробуй себя в архитектуре — участвуй в ARCHI.Тech от ВТБ: https://cnrlink.com/architechvtbfront
Реклама. БАНК ВТБ (ПАО). ИНН 7702070139. erid: LjN8JuZzL
Разбираемся с this в JavaScript
Объяснение this на примерах для различных ситуаций: глобальные объект, методы объекта, хендлер событий и другие
https://www.freecodecamp.org/news/the-javascript-this-keyword-explained-with-examples/
Мидл-специалист отличается от джуниор-разработчика не только опытом и уровнем владения технологиями, но и софт-скилами. На курсе Практикума вы сможете прокачать все необходимые навыки и построить новую карьеру.
На курсе мы поможем вам:
— освоить новые навыки и извлекать больше пользы из своих софт-скилов;
— углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах;
— сделать с нуля 2 проекта — до работающих приложений.
Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком.
→ Начать курс бесплатно
Тестирующие типы в TypeScript
Продвинутое использование типов в TS, которое вам вряд-ли понадобится в обычном приложении, но интересное для общего понимания.
https://frontendmasters.com/blog/testing-types-in-typescript/
Открытый курс по JavaScript запустила команда AvitoTech (а это уже гарантия качественного контента).
• Для всех уровней разработки (но с базой в программировании будет попроще)
• Доступным языком
• Про JavaScript / HTML / CSS
Первый выпуск посвящён базовым понятиям: технология веба, браузер, клиент, сервер. Лекция уже доступна на канале AvitoTech.
Смотрите, это бесплатно!
Создаем Rest API c NextJS 14
Короткий практический курс по NextJS для начинающих.
https://www.youtube.com/watch?v=aEFkWxUNAVc
Утечки памяти в React
Особенности работы замыканий в функциональных компонентах при использовании React Query.
https://schiener.io/2024-05-29/react-query-leaks
Фича ECMAScript 2024: Promise.withResolvers()
Один из способов создания Promise с возможностью использования resolve/reject извне.
https://2ality.com/2024/05/proposal-promise-with-resolvers.html
ESLint Configuration Migrator
Инструмент, позволяющий правильно сконвертировать существующий eslint конфиг для перехода на 9 версию.
https://eslint.org/blog/2024/05/eslint-configuration-migrator/
Сравниваем 5 менеджеров версий для NodeJS
И выбираем лучший для своих потребностей.
nvm vs n vs volta vs fnm vs pnpm.
https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you
Итоги React Conf 2024
Короткая сводка по итогам прошедшей конференции (+ видео с докладами за 2 дня).
https://react.dev/blog/2024/05/22/react-conf-2024-recap
Firestore как альтернатива WebSockets
Как использовать Firestore для прослушивания событий в реальном времени.
https://canopas.com/websocket-alternative-how-to-use-firestore-to-listen-to-realtime-events-141e634d04bc
TC39: новшества и улучшения
Новый статус по различным фичам Javascript: Error.isError(), RegExp Escaping, Promise.try.
https://socket.dev/blog/tc39-advances-key-proposals
😦 Где учиться на фронтенд-разработчика?
Если вы не хотите тратить время на изучение устаревшей информации, советуем онлайн-курс «Профессия Фронтенд-разработчик» от Skillbox.
✨ Во фронтенде всё очень быстро меняется, а ребята из Skillbox как раз недавно обновили курс — внутри только те знания, которые пригодятся в работе.
Курс ведут разработчики «Газпромбанк.Тех» и других топовых компаний — VK, «Шереметьево», «Самолёт». А во время обучения вёрстке вы выполните реальные задания фриланс-биржи «Хабр Фриланс», диджитал-агентства Whitemark и компании «Газпромбанк.Тех».
🙌 Попробовать курс можно бесплатно. Просто оставьте заявку и получите доступ к первым 2 модулям, чтобы понять, подходит ли вам фронтенд. Карту привязывать не нужно, а пройти бесплатные уроки можно в любое время!
Попробовать бесплатно: https://epic.st/Av9kmo?erid=2VtzqwQqaduРеклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
Как выбить 100 очков в Google Lighthouse в 2024
Трюки и хаки для достижения высоких оценок в Lighthouse (правда это не всегда значит ,что у вашего сайта и действительно топ перфоманс).
https://www.smashingmagazine.com/2024/06/how-hack-google-lighthouse-scores-2024/
React Compound Component паттерн
Пример создания компонента рейтинга с Compound Component паттерном.
https://www.freecodecamp.org/news/how-to-build-a-rating-component-with-the-react-compound-component-pattern/
TypeHero
Платформа для изучения TypeScript через решение задач. Есть возможность выбрать трек по своему уровню + создавать и шарить свои задачи.
https://typehero.dev
Полезные техники и трюки CSS
Забытая рубрика с очередными трюками CSS, о которых вы, возможно, не знали.
https://www.smashingmagazine.com/2024/06/css-tips-and-techniques/
Перейди по ссылке, и я узнаю твой номер
Как с помощью cookie можно узнать номер телефона юзера (и вычислить по айпи 😁).
https://habr.com/ru/articles/819595/
Coding Cheatsheets
Набор шпаргалок по frontend технологиям и инструментам.
https://cheatsheets.shecodes.io/
Вебинар «Как повысить скорость и качество обслуживания клиентов с помощью цифровых решений и AI» 11 июня 2024
Узнайте лучшие практики по повышению эффективности отделов технической поддержки:
– Как организовать распределение запросов, чтобы сократить срок выполнения обращения.
– Как увеличить долю обращений, которые решаются без помощи специалиста технической поддержки.
– Как повысить удовлетворенность пользователей с помощью цифровых решений и AI.
В программе:
– Расскажем, как теория моделирования массового обслуживания помогает формировать департамент службы поддержки на основе данных.
– Обсудим, как искусственный интеллект помогает обрабатывать клиентские запросы. Покажем кейсы применения AI в службе технической поддержки.
– Продемонстрируем социальную сеть для администраторов и менеджеров службы поддержки. Узнаете, как отказаться от множества различных систем и замкнуть работу технической поддержки на одной платформе.
Кому полезно мероприятие:
– Собственникам B2B-компаний,
– топ-менеджменту компаний с партнёрской сетью,
– ИТ-директорам,
– руководителям службы поддержки, службы клиентского сервиса,
– DevOps-инженерам.
11 июня в 10:00
Регистрация: https://www.softlab.ru/events/solutions-for-support/Реклама. АО "ЭР-СТАЙЛ СОФТЛАБ". ИНН 7719198440. Erid:2VSb5yeBMrx
ToDo App без использования клиентского JS
Пример реализации простого React приложения с использованием react server actions.
https://dev.to/lazarv/todo-app-with-no-client-side-javascript-using-lazarvreact-server-23ig
Таймер на CSS
Интересный подход к реализации таймера обратного отсчета без использования JS
https://frontendmasters.com/blog/how-to-make-a-css-timer/
Gap
Какие проблемы стилизации решает свойство gap и в каких случаях оно сильно упрощает разработку. Интерактивный гайд от Ахмада Шадида.
https://ishadeed.com/article/the-gap/
🔥 Это база 1400 вопросов с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏
Читать полностью…
Новые методы итераторов
О методах map, filter, reduce, flatMap и других, которые работают на бесконечных коллекциях и могут лениво вычислять результат.
https://v8.dev/features/iterator-helpers
Переключаем с помощью нового HTML контрола
Об использовании checkbox c новым атрибутом switch: работа, стилизация, детектирование возможности использования.
https://www.smashingmagazine.com/2024/05/switching-it-up-html-latest-control/
