22241
Изучаем Frontend. По вопросам сотрудничества: @adv_and_pr Канал на бирже: https://telega.in/c/senior_front https://gosuslugi.ru/snet/67a461dcdc130259d5a631b8
JavaScript. Что будет выведено в консоль?
Ответ
Неизвестно полезный CSS
В этой статье:
- как перестать вредить пользователям свойствами justify-content и align-items
- недавно появившиеся возможности разделять CSS на части и управлять их приоритетом
- неизвестный нюанс применения псевдокласса :nth-child.
https://habr.com/ru/companies/ruvds/articles/849114/
5 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFHdFrfK ИП Галактионов Тихон Витальевич, ИНН 771618975809
Обработка событий CSS-переходов в JavaScript
В этой статье мы изучим, какие события возникают в DOM при CSS-переходах и как их можно использовать в JavaScript. Рассмотрим несколько примеров на эту тему.
https://itchief.ru/javascript/transition-events
Что будет выведено в консоль?
Ответ
Menu micro-interaction with CSS
Анимированное меню, выполненное с помощью SVG и SCSS, без использования JavaScript
https://codepen.io/knyttneve/pen/rNJxwGR
Progress of this year. Keep tracking
Анимированный прогресс года, выполненный с помощью CSS и JavaScript
https://codepen.io/fedot/pen/wvzmmbd
3D Futuristic Room
3D-комната, реализованная с помощью Pug, SCSS и JavaScript.
https://codepen.io/ricardoolivaalonso/pen/LYzwGyW
Blob study
Анимированная 3D-капля, выполненная с помощью CSS и JavaScript.
https://codepen.io/shubniggurath/pen/dyOKjLG
Spider
Создано на canvas и чистом JS.
https://codepen.io/strangerintheq/pen/QWmPzja
JavaScript. Что будет выведено в консоль?
Ответ
Credit Card Checkout
Верстка формы на HTML и SCSS. Значения в карточке устанавливаются в JS.
https://codepen.io/supah/pen/OMdPpW
JavaScript. Задача
Цифровой корень натурального числа — это цифра, полученная в результате итеративного процесса суммирования цифр, на каждой итерации которого для подсчета суммы цифр берут результат, полученный на предыдущей итерации. Этот процесс повторяется до тех пор, пока не будет получена одна цифра.
Необходимо составить программу нахождения цифрового корня натурального числа.
Входные данные: N - натуральное число, где 0 <= N <= 10^9
Вывод: цифровой корень числа N
Ответ
Генераторы
Не стоит забывать про них и недооценивать их возможности. Генератор позволяет определить, какое значение будет возвращено при каждом следующем вызове next().
В целом использовать их в разработке необязательно, полезно лишь знать, как они работают, потому что они активно используются в async/await и могут пригодиться для отладки кода.
👨💻 Фронтенд с AI: что можно делегировать агентам
5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике.
Участники конференции узнают:
• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.
В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.
Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте.
Скидка по промокоду Senior
🔗 Программа и билеты: https://podlodka.io/fecrew
Tab Bar Menu
Переход между элементами реализован при помощи CSS transform.
https://codepen.io/dgknca/pen/ExYGWJw
Book
Для переворота страницы используется CSS transform: rotate. Логика перелистывания реализована в JS.
https://codepen.io/maxew33/pen/LYjKNVx
Contrast
Один из вариантов реализации замены цвета текста в зависимости от цвета фона. Реализация на чистом CSS.
https://codepen.io/alvaromontoro/pen/MWvvMpy
Drag and Drop card
Карточки с функцией перетаскивания, реализованные с помощью Sortable.js.
https://codepen.io/sanketbodke/pen/xxWxRWp
Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript
https://codepen.io/danwilson/pen/abqGjVp
Marquee
Бегущая строка, выполненная с помощью SCSS, без использования JavaScript
https://codepen.io/mxbck/pen/NWyaPve
The Turin Horse - Hadi
Анимированная сцена, выполненная с помощью чистого CSS и SVG
https://codepen.io/leimapapa/pen/GRQGzOZ
JavaScript. Что будет выведено в консоль?
Ответ
JavaScript. Что будет выведено в консоль?
Ответ
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах;
— что в каждом ответе засчитал бы, а что нет — и почему.
Typo-coaster
Анимация текста по определенному пути движения, реализованная с помощью Splitting.js.
https://codepen.io/michellebarker/pen/XWJyydY
JavaScript. Что будет выведено в консоль?
Ответ
Деструктурирующее присваивание с переименованием переменных
Синтаксис деструктурирующего присваивания применяется в JavaScript-выражениях, нацеленных на распаковку элементов массивов или свойств объектов в отдельные переменные. При этом вместо того, чтобы пользоваться существующими именами свойств объектов, соответствующие переменные можно переименовать.
#вопросы_с_собеседований
Что такое цикл событий (event loop) и как он работает?
Движок браузера выполняет JavaScript в одном потоке. Для потока выделяется область памяти — стэк, где хранятся фреймы (аргументы, локальные переменные) вызываемых функций.
Список событий, подлежащих обработке, формирует очередь событий. Когда стек освобождается, движок может обрабатывать событие из очереди. Координирование этого процесса и происходит в event loop.
Это, по сути, бесконечный цикл, в котором выполняются многочисленные обработчики событий. Если очередь пустая — движок браузера ждет, когда поступит событие. Если непустая — первое в ней событие извлекается и его обработчик начинает выполняться. И так до бесконечности.
Когда можно создать стандартную функцию, можно создать и стрелочную. Обычно второй вариант лучше, так как синтаксис проще.
В React часто используют стрелочные функции для создания компонентов и для методов массивов высшего порядка, таких как map() и filter().