​Для чего используется метод scrollIntoView

Если говорить научным языком, то метод Element.scrollIntoView() интерфейса Element прокручивает контейнер родителя так, чтобы элемент, на котором был вызван scrollIntoView(), стал виден пользователю.

Проще говоря, метод scrollIntoView() прокручивает указанный элемент в видимую область окна браузера.

Допустим, у вас есть элемент с id «el». Тогда код будет выглядеть так, как показано на картинке ниже.

Этот метод может быть полезен, к примеру, для продаж на вашем сайте. Допустим, есть некое описание товара, а внизу кнопка «получить скидку». Когда пользователь нажмёт на неё, данный метод поможет вам перенести внимание пользователя на раздел «скидки».

#основы

​Стек вызовов 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