Data Structures & Algorithms with JavaScript
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
👍3
Find numbers with 3 divisors
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
👉 @frontendInterview
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8
👉 @frontendInterview
Какое значение примет result?
Anonymous Quiz
10%
"undefined"
64%
"string"
19%
"number"
4%
"1"
4%
"null"
CSS cвойство margin
Margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing.
Схлопывание
Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два <div> расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются.
Отрицательные значения
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.
В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».
👉 @frontendInterview
Margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing.
Схлопывание
Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два <div> расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются.
Отрицательные значения
Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.
В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».
👉 @frontendInterview
👍7
Story Points или искусство делать ставку на выдуманные числа
Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.
Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.
👉 @frontendInterview
Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.
Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.
👉 @frontendInterview
❤3
Зачем использовать семантические классы в CSS?
Anonymous Quiz
8%
Для ускорения рендеринга страницы
82%
Для создания читаемого и понятного кода, упрощающего поддержку и масштабирование
6%
Для автоматического подключения стилей к HTML-элементам
4%
Для замены CSS-препроцессоров
👍4
Как реализовать перегрузку функции в TypeScript?
TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров.
👉 @frontendInterview
TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров.
class Foo {
myMethod(a: string);
myMethod(a: number);
myMethod(a: number, b: string);
myMethod(a: any, b ? : string) {
alert(a.toString());
}
}👉 @frontendInterview
Программирование в алгоритмах
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Find the stray number
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
👉 @frontendInterview
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3
👉 @frontendInterview
Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.
ИИ не убил профессию. Он убрал самое страшное — барьер входа.
Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.
Именно это мы и делаем на бесплатном 7-дневном практикуме.
Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.
Стартуем завтра.
👉 Приходи на бесплатный практикум
🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
ИИ не убил профессию. Он убрал самое страшное — барьер входа.
Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.
Именно это мы и делаем на бесплатном 7-дневном практикуме.
Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.
Стартуем завтра.
👉 Приходи на бесплатный практикум
🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
👎5
System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса.
В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.
В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.
Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.
Ссылка на видео: https://youtu.be/PgC7LzIG29k
В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.
В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.
Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.
Ссылка на видео: https://youtu.be/PgC7LzIG29k
YouTube
Ультимативный гайд по System Design (все IT направления) / Пройти интервью на Middle+
➡️ Забирай разбор домашек, текстовую расшифровку курса и главу про системный дизайн в аналитике: https://boosty.to/m0rtymerr/posts/359aeeac-6216-42e6-803b-b26b0f233c2c
👉 Менторы, принявшие участие в записи курса:
Инара Гаврилина: https://t.me/find_it_m…
👉 Менторы, принявшие участие в записи курса:
Инара Гаврилина: https://t.me/find_it_m…
🧭 Разбираем React вместе с Podlodka React Crew
Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.
Базового понимания фреймворка становится недостаточно для результативной работы.
💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».
С 23 по 27 марта ее участники:
⚙️ узнают, как устроен рендер и внутренние механизмы в современном React
🧠 познакомятся с архитектурой приложений, где применяются React Server Components
📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak
🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы
Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами.
Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇
🎟Забрать early-bird билет: https://podlodka.io/reactcrew
Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.
Базового понимания фреймворка становится недостаточно для результативной работы.
💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».
С 23 по 27 марта ее участники:
⚙️ узнают, как устроен рендер и внутренние механизмы в современном React
🧠 познакомятся с архитектурой приложений, где применяются React Server Components
📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak
🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы
Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами.
Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇
🎟Забрать early-bird билет: https://podlodka.io/reactcrew
CSS-анимация на примере аналоговых часов
Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3.
Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки).
Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок.
Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов <i>.
Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения.
Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread.
📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/
👉 @frontendInterview
Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3.
Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки).
Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок.
Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов <i>.
Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения.
Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread.
📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/
👉 @frontendInterview
👎1
Первый проект по фронтенду → +22 500₽.
🔥 С 2019 года Айтилогия помогает новичкам в IT с обучением, практикой, заказами на фрилансе и собеседованием.
👉 Забирай бесплатный 7-дневный курс по фронтенд-разработке с куратором
Реклама. ИП Чернова О. А., ИНН:771399721044
🔥 С 2019 года Айтилогия помогает новичкам в IT с обучением, практикой, заказами на фрилансе и собеседованием.
👉 Забирай бесплатный 7-дневный курс по фронтенд-разработке с куратором
Реклама. ИП Чернова О. А., ИНН:771399721044
Кастомизация списков: от
Современный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами.
Разбираем три основных подхода.
✅ Псевдоэлемент
Самый быстрый способ изменить стандартную точку или цифру.
Что можно: менять color, font-size и font-family.
Ограничение: нельзя задать фон или произвольное позиционирование.
Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки.
✅ Директива
Инструмент для создания собственных систем нумерации (Baseline 2023).
system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕).
system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.).
✅ Полный контроль через
Когда возможностей ::marker не хватает для сложного дизайна.
Доступность: при list-style: none обязательно добавляйте role="list" в HTML, иначе Safari перестанет озвучивать список корректно.
Механика: используйте функции counter(list-item) для простых списков или counters(list-item, ".") для вложенной нумерации (1.1, 1.2).
Верстка: через position: absolute маркеру можно задать любые размеры, фон и точное положение относительно текста.
Источник: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
👉 @frontendInterview
::marker до @counter-styleСовременный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами.
Разбираем три основных подхода.
::markerСамый быстрый способ изменить стандартную точку или цифру.
Что можно: менять color, font-size и font-family.
Ограничение: нельзя задать фон или произвольное позиционирование.
Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки.
@counter-styleИнструмент для создания собственных систем нумерации (Baseline 2023).
system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕).
system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.).
::beforeКогда возможностей ::marker не хватает для сложного дизайна.
Доступность: при list-style: none обязательно добавляйте role="list" в HTML, иначе Safari перестанет озвучивать список корректно.
Механика: используйте функции counter(list-item) для простых списков или counters(list-item, ".") для вложенной нумерации (1.1, 1.2).
Верстка: через position: absolute маркеру можно задать любые размеры, фон и точное положение относительно текста.
Источник: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/
👉 @frontendInterview
Please open Telegram to view this post
VIEW IN TELEGRAM
Piccalilli
An in-depth guide to customising lists with CSS
Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.
This media is not supported in your browser
VIEW IN TELEGRAM
90% каналов про ИИ - пересказ чужих новостей.
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: https://t.me/+1VlUYn5LCBM0MmQ6
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: https://t.me/+1VlUYn5LCBM0MmQ6
1❤2👍1🔥1