Frontend Interview - собеседования по Javascript / Html / Css
11.8K subscribers
2.08K photos
115 videos
316 files
520 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Работаешь все праздники в надежде на премию
Начальство:

👉 @frontendInterview
👍4
Реализуйте полифил для Promise.allSettled

Для начала вспомним работу оригинального Promise.allSettled.

Он принимает коллекцию промисов, начинает одновременно их выполнять и возвращает массив результатов исполнения полученных промисов. Объект каждого результата содержит свойство status. Если status имеет значение fulfilled (выполнено), то объект будет содержать свойство value. Если status имеет значение rejected (отклонено), то объект будет содержать свойство reason. Свойства value или reason будут содержать значение, с которым был выполнен или отклонён промис.

Решение
// На вход приходит массив промисов
Promise.allSettled = (promises) => {
// Запустим все промисы с помощью .all
return Promise.all(
promises.map((promise) =>
Promise.resolve(promise)
// Если промис завершается успешно
.then((value) => ({ status: "fulfilled", value }))
// Если промис был отклонён
.catch((e) => ({ status: "rejected", reason: e }))
)
)
}


👉 @frontendInterview
👍12
Основы алгоритмизации и программирования

В учебном пособии представлены абстрактные типы данных, описание алгоритмов обхода графов и деревьев в глубину и в ширину, нахождения путей в графе, различных видов циклов, определение максимального потока в графе и поиск паросочетаний. Приведены алгоритмы построения каркасов графа, алгоритмы с возвратом, рассмотрены задачи, решения которых опираются на использование этих алгоритмов.
Учебное пособие предназначено для изучения дисциплины «Основы алгоритмизации и программирования»

👉 @frontendInterview
👍3
Хочешь освоить или улучшить свои навыки во фронтенде?

В канале Frontend Developer есть всё необходимое — бесплатные курсы по фронтенду(HTML, CSS, JS , React и др.), готовый код, полезные ресурсы и статьи. А также чат, где мы помогаем друг другу и делимся опытом

Обучайтесь бесплатно вместе с @byFrontDeveloper
👍5
Ordered Count of Characters

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

Пример:
orderedCount("abracadabra") == [['a', 5], ['b', 2], ['r', 2], ['c', 1], ['d', 1]]

👉 @frontendInterview
👍3
Какая разница между 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
👍3
Что выведется в консоль?
Anonymous Quiz
54%
true
46%
false
👍12
This media is not supported in your browser
VIEW IN TELEGRAM
Ленивая загрузка картинок с цветным превью

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

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

👉 @frontendInterview
👍4
Кадровое агентство в 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
👍3
Каков типичный случай использования анонимных функций?

Типичными случаями для использования анонимных функций в 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
9🔥2👍1
{Вы пока еще не знаете JS} Область видимости и замыкания. 2-е межд. издание

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

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

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

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

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

➡️ Так что советую подписаться
👍3
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
👍7👎1