​Стек вызовов JavaScript: объяснение с помощью иллюстраций

Стек представляет собой структуру данных, организованных по принципу LIFO, т.е. в порядке обратной очередности (last-in — first-out, последним вошел — первым вышел).

Автор статьи объясняет, как это работает в JavaScript:

https://nuancesprog.ru/p/17792/

#javascript

Птица, которую суждено приручить только фулстеку

Анимация прогресса загрузки

Чтобы ваши пользователи могли следить за прогрессом загрузки, вы можете добавить подобный элемент на ваш сайт.

Проект реализован с помощью CSS и JavaScript.

Полный код по ссылке:

https://codepen.io/codercatdev/pen/VwQgLBy

#codepen

​Обработка событий CSS-переходов в JavaScript

В этой статье автор рассказал, какие события возникают в DOM при CSS-переходах и как их можно использовать в JavaScript. А также, рассмотрел несколько примеров на эту тему:

https://itchief.ru/javascript/transition-events

#css

​Как заниматься разработкой бесплатно и без смс

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

https://tproger.ru/articles/top-besplatnogo-programmnogo-obespecheniya-dlya-veb-programmista

#подборка

​Разница между let и var в JavaSript

В мире JS использование var стало менее популярным и не рекомендуется в новом коде. Однако эта статья поможет вам понять различия между var и let, а также предложит лучшие практики использования этих ключевых слов.

Эффективное объявление переменных и управление областями видимости — важные аспекты разработки на JavaScript.

https://www.geeksveda.com/javascript-let-vs-var/

#javascript

​Tproger расширяет команду разработки и ищет Vue.js разработчика

Мы предлагаем удаленную работу с гибким графиком, конкурентную заработную плату и компенсацию профильных курсов.

Мы работаем на стеке Nuxt 3, Node.js, Laravel, WordPress. Поэтому от вас ожидаем:

— опыт коммерческой разработки;
— уверенное знание JavaScript, TypeScript и Vue.js;
— понимание адаптивной вёрстки;
— опыт работы с Git, Jira.

Если хотите стать частью команды, то вам сюда:

https://tproger.ru/jobs/vue-js-developer

#вакансии

​Что предпочтительней монолит или микросервисы?

Микросервисы vs монолит — вечная дилемма разработчиков.
В этом видео разбираются достоинства и недостатки обеих архитектур, а также даются рекомендации, когда стоит выбирать микросервисы, а когда — монолит.

#подкаст #микросервисы #монолит

​У нас в самом разгаре конкурс пет-проектов. Выбирайте понравившиеся работы и продвигайте их к победе своими лайками и просмотрами

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

Агрегатор фестивального кино: код решает проблему отложенной публикации фестивального кино.
Удивительный пример того, как интерес к теме помогает разработчику годами развивать систему.

Аналог BGInfo для корректного отображения обоев на нескольких экранах: Дмитрий Беликов «лечит» программу BgInfo, исправляет режим заполнения обоев для нескольких экранов.

#diy #конкурс

​Повышаем производительность: обработка данных в 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