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

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

Тем более теперь есть специальный канал для этого: @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 — искусственный интеллект

Разработчик на JQuery вышел на рынок труда и всех обогнал

👉 @frontendInterview

Внимание, разработчики!
@TopSelectionWeb3

💼Хотите прокачать свой LinkedIn-профиль и привлечь внимание рекрутеров?

🚀Команда TopSel приглашает вас на еженедельный бесплатный Разбор профилей LinkedIn в прямом эфире, который состоится в это воскресенье, 7 апреля, в 14:00 по мск!

💻На этот раз мы сфокусируемся на профилях разработчиков: Frontend, Backend, Fullstack, iOS/Android.

Не упустите возможность улучшить свой LinkedIn профиль и увеличить шансы на трудоустройство!

Делитесь вашими профилями в комментариях под последним постом на канале @TopSelectionWeb3

Как отследить размонтирование функционального компонента в React?

Очень часто useEffect создает ресурсы, которые необходимо очистить или сбросить до того, как компонент покинет экран, например подписку или идентификатор таймера.

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

useEffect(() => {
function handleChange(value) {
setValue(value);
}
SomeAPI.doFunction(id, handleChange);

return function cleanup() {
SomeAPI.undoFunction(id, handleChange);
};
})

👉 @frontendInterview

Принципы юнит-тестирования

Юнит-тестирование — это процесс проверки отдельных модулей программы на корректность ра боты. Правильный подход к тестированию позволит максимизировать качество и скорость разработки проекта. Некачественные тесты, наоборот, могут нанести вред: нарушить работоспособность кода, увеличить количество ошибок, растянуть сроки и затраты. Грамотное внедрение юнит тестирования — хорошее решение для развития проекта.

👉 @frontendInterview

Shortest Word

Дана строка слов, верните длину самого короткого слова.
Строка никогда не будет пустой, и вам не нужно учитывать различные типы данных.

Пример:
findShort("Let's travel abroad shall we") => 2

👉 @frontendInterview

​Web Workers

Web worker — это API, которое позволяет выполнять код вне основного потока. Благодаря этому долгие или сложные вычисления, которые выполняются на воркерах, не блокируют пользовательский интерфейс (UI).

Веб воркер создается в основном потоке. При создании воркеру передается URL-адрес скрипта. После загрузки создается отдельный поток, в котором выполнится скрипт воркера.
У скрипта будет свой собственный контекст, отличный от контекста окна window. В основном потоке глобальный контекст привязывается к переменной window, а в воркере — к переменной self. Контекст выполнения веб воркера WorkerGlobalScope отличается от контекста выполнения основного потока. У него нет доступа к объекту документа document и DOM API.

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

Как создать и запустить?
Воркер использует механизм сообщений для общения с основным потоком. Для отправки сообщения используется метод postMessage().
// Основной поток: app.js
const worker = new Worker('worker.js');

// Отправляем сообщение из основного потока в воркер
worker.postMessage({ message: '415тый, я база, ответьте' });

В глобальном контексте воркера есть обработчик onmessage(). Его можно использовать, чтобы принимать сообщения. Воркер также может отправлять сообщения в основной поток при помощи функции postMessage(). Функцию можно вызывать в любом месте воркера.
// Воркер: worker.js
onmessage = function (e) { // Слушаем сообщения из основного потока
if (e.message === "415ый, я база, ответьте") {
// Отправляем сообщение из воркера в основной поток
postMessage("База, это 415ый, как слышно?");
}
};

Чтобы получать сообщения в основном потоке, используйте метод-обработчик onmessage объекта Worker.
// window context app.js
const worker = new Worker("worker.js");

worker.postMessage({ message: "415тый, я база, ответьте" });

worker.onmessage = function (e) { // Слушаем сообщения из воркера
console.log(e);
// База, это 415-ый, как слышно?
};

👉 @frontendInterview

👉 @frontendInterview

Считаешь себя экспертом в IT? Участвуй в «Цифровом марафоне» от Сбера и «Школы 21» и будь на код впереди! Миллион рублей уже ждёт тебя.

В этом масштабном конкурсе ты будешь соревноваться со специалистами по всей России. Тройка лучших поделит в финале в Москве призовой фонд в 1,8 миллионов рублей.

Но сначала нужно пройти онлайн-игру, тестирование и цифровой диктант. Начнёшь с «разминки» и покажешь свои аналитические и мягкие навыки. Далее — ответь на вопросы теста согласно своему уровню подготовки. Прослушай на диктанте техническое задание и напиши код решения.

Поспеши: 20 апреля — твой последний шанс нажать на кнопку «Хочу участвовать». Переходи на сайт и регистрируйся прямо сейчас!

Плавное раскрытие выпадающего меню

Иногда встречается задача: создать выпадающее меню, которое будет плавно раскрываться. В этом рецепте будет решение на чистом CSS. Вся магия кроется в единицах измерения lh. Будем менять высоту строки, тем самым добившись эффекта плавного раскрытия меню.

👉 @frontendInterview