​Какая разница между hidden, aria-hidden="true", role="presentation" и role="none"?

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

2. aria-hidden="true" — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.

3. role="presentation" — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.

4. role="none" — это синоним role="presentation", который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.

👉 @frontendInterview

👉 @frontendInterview

Ленивая загрузка картинок с цветным превью

Ленивая загрузка (lazy loading) — это асинхронная загрузка картинок на веб-странице. Это означает, что картинки загружаются после полной загрузки страницы или когда они появляются в видимой части окна браузера. Следовательно, если пользователь не будет прокручивать экран, то изображения, размещённые за пределами экрана, не будут загружаться.

Иногда хочется, чтобы изображение появлялось не внезапно, а чтобы пользователь заранее знал, что оно там будет благодаря превью.
В этой статье представлено готовое решение с пошаговым разбором.

👉 @frontendInterview

Кадровое агентство в IT: способ найти место потеплее, о котором мы с вами забыли

В этой статье автор рассказала, как работают ИТ-рекрутеры и кадровые агентства. Привела примеры из практики, рассказала про сложности для кандидатов. В финале рассказывается про то, чем может быть полезен кандидату рекрутер из кадрового агентства.

👉 @frontendInterview

🚀Начните осваивать разработку на Node.js и расширьте свои карьерные возможности в IT

Приходите на бесплатный практический урок «Serverless Node.JS» от OTUS. На вебинаре разберем:

✅что такое serverless и как его используют;
✅примеры работы с Node.JS на базе одного из облачных решений.

Занятие пройдёт 2 апреля в 20:00 мск в рамках курса «Node.js Developer».

➡ Пройдите короткий тест прямо сейчас, чтобы посетить бесплатный урок и получить запись: https://otus.pw/Pkng/

💥Бонус:
- доступ ко всем открытым урокам курса
- спец. цену на курс и даже рассрочку
- курс по Git в записи бесплатно
Erid 2SDnjcBpj6Z

Да это же буквально я

👉 @frontendInterview

Каков типичный случай использования анонимных функций?

Типичными случаями для использования анонимных функций в JavaScript являются замыкания, обработчики событий, таймеры и callback-и для методов и других функций. Приведу несколько примеров:

1. Callback метода массива:

 const numbers = [1, 2, 3, 4, 5];
 const squared = numbers.map(num => num * num);

 console.log(squared); // [1, 4, 9, 16, 25]

2. Обработчик события для HTML элемента. Стоит обратить внимание, что в таком случае не получится удалить его через removeEventListener.

 document.getElementById('buttonId').addEventListener('click', () => {
   console.log('Кнопка была нажата!');
 });

3. Замыкания:
function createCounter() {
let count = 0;

return function () {
return ++count;
};
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

👉 @frontendInterview

{Вы пока еще не знаете JS} Область видимости и замыкания. 2-е межд. издание

Вы пока еще не знаете JS. И Кайл Симпсон признается, что тоже его не знает (по крайней мере полностью)… И никто не знает. Но все мы можем начать работать над тем, чтобы узнать его лучше. Сколько бы времени вы ни провели за изучением языка, всегда можно найти что-то еще, что стоит изучить и понять на другом уровне. Вы уже прочитали «Познакомьтесь, jаvascript»? Тогда откройте вторую книгу серии «Вы пока еще не знаете JS», чтобы познакомиться поближе с первым из трех столпов jаvascript — системой областей видимости и функциональными замыканиями, а также с мощным паттерном проектирования «Модуль». Пора освоить правила лексических областей видимости для размещения переменных и функций в правильных позициях. И заглянуть на более низкий уровень, ведь магия с хранением состояния модулей базируется на замыканиях, использующих систему лексических областей видимости.

👉 @frontendInterview

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

У нас не всегда есть время перечитывать учебники, но вот в телеграме мы сидим очень активно 😎 А значит даже быстрый просмотр полезных материалов будет тренировать нашу память

Тем более теперь есть специальный канал для этого: @FrontendPortal

Наглядная теория с примерами, полезные ресурсы, шпаргалки, разбор вопросов с собеседований, викторины - все там есть

➡️ Так что советую подписаться

Sorting Dictionaries

Создайте функцию, возвращающую отсортированный список (ключ, значение) пар (массивы из 2 элементов) .
Список должен быть отсортирован по значению и сортироваться от наибольшего к наименьшему.

Пример:
sortDict({3:1, 2:2, 1:3}) == [[1,3], [2,2], [3,1]]
sortDict({1:2, 2:4, 3:6}) == [[3,6], [2,4], [1,2]]

👉 @frontendInterview

​Почти всё в JavaScript — объект

В JavaScript объект является прародителем всех других сущностей. Все типы данных и структуры, кроме примитивных, являются потомками объекта. По этой причине абсолютно у всех наследников объекта имеется набор общих методов: toString(), valueOf() и другие.

Массивы и функции
Объект — это сущность с набором свойств. Мы можем добавлять, менять и удалять эти свойства.

Если взглянуть на массив, то у него тоже есть набор свойств, но свой. Например, у массива есть длина, есть методы для работы с ним. Обращение к элементу массива по индексу, как можно заметить, это очень похоже на обращение к полю объекта с помощью квадратных скобок.
const shows = ['Breakind Bad', 'The Office', 'Silicon Valley']
shows.length // свойство массива
shows[1] // получить элемент массива, аналогично как у объекта shows['1']

Аналогичная ситуация с функциями — у них тоже есть набор свойств, который можно увидеть, выведя информацию о ней в консоль.
function sum(a, b) {
return a + b
}
sum.arguments // можно вызвать свойство функции
sum.someField = 'value' // можно присвоить значение в поле
console.dir(sum)

В выводе есть и свойство someField, которое мы присвоили, и набор встроенных свойств и методов. Такая структура массивов и функций очень похожа на структуру объектов. Но на самом деле это и есть объекты.

👉 @frontendInterview

Открытое собеседование на Frontend разработчика

Привет! Это Эйч Навыки — команда разработчиков из бигтеха. Мы помогаем фронтенд-разработчикам апнуть грейд, сменить компанию или перейти с другого стека.

3 апреля в 19:30 по мск приходи онлайн на Открытое собеседование от Эйч Навыков. Это классная возможность узнать, чего ждут от кандидатов на middle-позиции и как подготовиться к собесу, чтобы получить оффер 👀

Как это будет:
1. Дима Дорофеев, тимлид в канадском стартапе Truv Inc, ex-VK и ментор Навыков, задаст реальные вопросы разработчику-добровольцу

2. Потом Дима даст подробную обратную связь: объяснит, зачем задавал тот или иной вопрос, как лучше на него ответить или решить задачу

3. В конце можно будет задать Диме любой вопрос о трудоустройстве, менторстве или фронтенде

Что узнаешь на Открытом собеседовании:
- Чего ждут от кандидатов на мидл-позиции во фронтенде
- Какие вопросы задают на интервью и зачем
- Как подготовиться к собесу, чтобы получить заветный оффер

Это бесплатно?
Бесплатно

Просто зарегистрируйся на открытое собеседование в нашем боте: @skills_mentee_bot

Реклама: ООО “Эйч Карьера” erid: LjN8KETkF

👉 @frontendInterview

​Собственный конвертер шрифтов

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

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

В этой статье приведен готовый скрипт с подробным объяснением того, как он работает

👉 @frontendInterview

Как рождаются идеи pet-проектов?

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

👉 @frontendInterview

Как писать код быстрее с помощью российского AI-ассистента

А вы знали, что AI-ассистенты* помогают разработчикам высвободить до 25% времени при написании кода? Они анализируют код и предлагают возможные варианты завершения. В Сбере используется один из таких инструментов — GigaCode. Практика показывает, что такой помощник на основе искусственного интеллекта действительно упрощает работу командам разработки!

GigaCode развивается вместе c сервисом GigaChat. В AI-ассистенте есть нейросетевые модели, которые обучены на больших корпусах исходного кода и специализируются на определенных задачах разработки. GigaCode можно использовать в любой привычной среде разработки, такой как IDEA, PyCharm, VSCode, Jupyter. Он генерирует варианты завершения кода в режиме реального времени, что ускоряет и упрощает процесс работы.

Сейчас ранний доступ к GigaCode предоставляется на площадке GitVerse. Это платформа для работы с исходным кодом от СберТеха. На GitVerse можно хранить открытые и закрытые репозитории, проводить код ревью, приглашать участников в свой проект и общаться с комьюнити.
Чтобы получить доступ к GigaCode, зарегистрируйтесь на портале GitVerse.

*AI, artificial intelligence — искусственный интеллект