​Повышаем производительность: обработка данных в Web Workers

Web Worker — инструмент, предоставляемый браузерами, который позволяет разработчикам запускать дополнительный скрипт в фоновом режиме.

Подробнее о работе с Web Workers читайте в полном тексте статьи: https://habr.com/ru/articles/767494/

#статья #javascript

​Всё больше и больше талантливых разработчиков участвуют в нашем конкурсе пет-проектов!

Читайте кейсы ещё одной тройки игроков:

— PHP-фреймворк для веб-приложений: многогранная работа — полноценный костяк для вашего следующего сайта. Фреймворк содержит базовые компоненты вроде авторизации, Captcha, логирования и позволяет дружить с REST API;
— Локальный деплой проектов в пару кликов: на этот момент — лидер конкурса, терминальный аналог Docker. Определяет CMS (Laravel, WordPress, Bitrix) и при запуске отдаёт локальную ссылку вида site.com.localhost;
— Три React-библиотеки для фронтенда: создание стилизованных компонентов и последующий их импорт из .css, управление состоянием апплета с хуками и заменятор JSX на лямбды. Пожалуй, самая объёмная работа из всех.

Участники будут рады поддержке самых важных, на ваш взгляд, проектов. Плюс вы всё ещё можете принять участие в конкурсе сами — заявки принимаются до 30 октября.

#diy #конкурс

​Перезапросы в микросервисах: не делайте так, как Вася

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

И как порой простое и очевидное решение может потянуть за собой хвост проблем в будущем.

Читать: https://habr.com/ru/companies/yandex/articles/762678/

#статья #микросервисы

​5 советов, которые улучшат ваш код на JavaScript

JavaScript предлагает много интересных возможностей, которые помогают писать более чистый и оптимизированный код. В статье рассказывается про 5 малоизвестных, но очень полезных практик о которых многие разработчики даже не подозревают.

Вы узнаете:
— что такое флатмэп и почему он лучше, чём сочетание filter и mapl;
— как правильно выстраивать цепочки методов массивов, чтобы оптимизировать код;
— зачем нужен метод reduce и в чём его преимущества перед forEach();
— как лучше использовать генераторы;
— Нативные классы JavaScript для упрощения работы с URL и другими объектами.

#javascript

​Комбинаторные селекторы в CSS

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

В статье вы найдёте примеры использования комбинаторов в CSS, включая стилизацию ссылок с иконками и изменение цвета при наведении на элемент.

#статья #css

​Крик верстальщика

В этом видео фронтенд разработчик рассказывает о своих рекомендациях по улучшению верстки.

Важно создать единую политику отступов на проекте и четкую систему z-индексов. Не забывайте о принципе DRY — никогда не повторяйся при написании кода.

#видео #html #css

​Будущее CSS: новейшие возможности языка декорирования в 2023 году

В современном мире цифрового дизайна UX/UI становятся все более важными. Новые фреймворки и сложные веб-приложения требуют инновационного использования CSS для создания адаптивных дизайнов.

В этой статье вы рассмотрите последние обновления CSS в 2023 году:

https://nuancesprog.ru/p/18127/

#css #html #фронтенд

​Делаем доступный интерфейс: лайфхак с атрибутом aria-label

Правильное применение aria-label значительно повышает доступность веб-приложений для людей со скринридерами, нарушениями зрения и когнитивными особенностями. Это простой, но мощный инструмент для прокачки вёрстки.

О самом атрибуте и правилах его использования: https://habr.com/ru/companies/ruvds/articles/764670/

#фронтенд #html

Подборка актуальных вакансий

— UX-редактор в МТС
Где: удалённо
Опыт: от 2 лет

— Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Python-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет

— Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет

— Team Lead Python Developer HR TECH (Проект Мобильный личный кабинет) в Гринатом
Где: удалённо
Опыт: от 5 лет

— Senior / Middle BackEnd Java Developer Центр HR TECH в Гринатом
Где: удалённо
Опыт: от 4 лет

— Senior QA Automation Java / Kotlin в Иннотех
Где: удалённо
Опыт: от 3 лет

— Разработчик BI в Иннотех
Где: удалённо
Опыт: от 3 лет

— Разработчик PIX BI в Иннотех
Где: удалённо
Опыт: от 3 лет

— Senior Fullstack Developer / Фулстек разработчик (.net/react) в Иннотех
Где: удалённо
Опыт: от 5 лет

#вакансии #работа

​WebAssembly — топливо для скоростного веба

WebAssembly (Wasm) — новый формат кода для браузеров и серверов. Он позволяет запускать код на C++, Rust и других языках очень быстро. В Figma уже успешно используется WebAssembly, благодаря чему компания ускорила работу своего сервиса в 3 раза.

Плюсы Wasm:
— малый размер и быстрая загрузка;
— легко кэшируется и повторно используется;
— высокая скорость, гораздо быстрее JavaScript.

В этой статье представлен подробный обзор возможностей WebAssembly на примере Figma.

#wasm #javascript

​Как упростить работу с React при помощи useLoaderData

Традиционный подход с использованием useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Вместо этого стоит использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.

Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/

#react

​​Переменные в CSS

CSS-переменные или пользовательские свойства — это значения, которые можно определить один раз и использовать многократно в коде.

В этой статье автор подробно рассмотрит, как они работают и приведёт примеры создания тем, адаптивного дизайна и повышения кроссбраузерной совместимости.

#статья #css

​Создание приложения погоды на Vue.js

Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.

Подробнее:

https://youtu.be/JLc-hWsPTUY

#видео #vue

​Короткий код для длиннокота

Зарядите ваш указательный палец и приготовьтесь крутить колёсико мыши. Проверьте насколько хватит вашего терпения. Этот длиннокот поможет вам узнать, сколько пикселей вы уже прокрутили листая страницу, а также подскажет вам его рост.

Он реализован на препроцессорах Pug и Scss, а также использует чистый JavaScript. Поиграться и посмотреть код можно здесь:

https://codepen.io/jkantner/pen/QdJMmr

#codepen

​JavaScript-разработчик starter pack:

Астрологи объявили неделю фронтенд-разработчика 🔮

🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!

Раскидать жизнь по ассетам или разобраться с техдолгом?

Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿

Скрин, скрин!

​ИИ для конвертации Figma в код

Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.

Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.

#react #figma

​Аутентификация в React с Firebase

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

В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.

#react #firebase

Читатели Типичного прислали ну очень много работ для конкурса «Лучший пет-проект 2023»

Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:

https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya

#diy #конкурс

​ SSR и SEO в SPA

Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега <head> менялось в зависимости от URL.

Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.

#spa #seo #vue