Senior Frontend - javascript, html, css
25.7K subscribers
1.27K photos
2.25K videos
690 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
longest_palindrome

Найдите длину самой длинной подстроки в заданной строке s, которая совпадает с ней в обратном порядке. В качестве примера, если вводимая строка была "I like racecars that go fast", длина подстроки (racecar) будет равна 7. Если длина входной строки равна 0, возвращаемое значение должно быть равно 0.

Пример:
 longestPalindrome("baabcd") = 4


👉 @seniorFront
👍1
Рекрутеры — паразиты? Отказ на свою же должность в IT

Любой айтишник в 2024 году сталкивался с реалиями найма:
- бред в вакансиях, иррациональные требования от 10 лет опыта, спам и холодные рассылки «Привет,%USERNAME%»
- игнорирование присланного резюме, автоматические отказы «мы решили продолжить с другим кандидатом»
- HR-скрининги со странными вопросами от людей без технических компетенций

Но как-то на работу устраиваются, и вакансии закрываются. До недавнего времени у меня были сомнения: может, так и надо? Вдруг это помогает выстроить эффективную воронку поиска кандидатов? Наверняка, это не рекрутеры некомпетентны, а я чего-то не понимаю.

Но 2 месяца назад завирусился тред с редитта, где менеджер негодует на свой HR отдел, высылающий автоматический отказ всем кандидатам (включая его).

Этот пост мотивировал меня провести такой же эксперимент на СНГ рынке. Результаты ошеломляют.

👉 @seniorFront
👍51🤔1
Почему не стоит писать все стили в style ?

Написание всех стилей непосредственно в атрибуте style не является хорошей практикой по ряду причин:

1. Разделение структуры и презентации

Стилизация и структура должны быть разделены для лучшей организации и поддерживаемости кода. Когда стили находятся в CSS-файлах, а структура — в HTML, это облегчает чтение и редактирование кода.

2. Переиспользование стилей
Позволяет переиспользовать стили на нескольких элементах и страницах. Если писать стили в атрибуте style, то каждый элемент должен иметь свои стили, что ведет к дублированию кода.

3. Упрощение изменений и обновлений
Изменение стилей в одном месте (CSS-файл) проще и быстрее, чем изменение атрибутов style для каждого элемента. Это особенно важно для больших проектов.

4. Улучшение производительности
Браузеры кешируют CSS-файлы, что уменьшает время загрузки страницы. Инлайновые стили загружаются каждый раз, когда загружается HTML-документ, что увеличивает нагрузку на сеть.

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

6. Поддержка медиа-запросов и адаптивного дизайна
CSS-файлы позволяют легко использовать медиа-запросы для адаптивного дизайна. Это сложно и неэффективно делать с инлайновыми стилями.
/* CSS файл */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}


👉 @seniorFront
👍9🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
LAYERED TEXT

Анимировано библиотекой GSAP, логика изменения цвета и текста реализована в JS.

👉 @seniorFront
👍31👎1
Крутить или не крутить?

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

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

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

👉 @seniorFront
👍3👎2
Рефакторинг в условиях жесткого дефицита ресурсов

Я архитектор в одном занимательном продукте в области документооборота…

Продукт разработан другой компанией в давние времена, а теперь унаследован нами.

Качество разработки ниже любых стандартов разработки. И жил он себе потихоньку, с убитым качеством, но вдруг его решили масштабировать, сократить количество инцидентов, сократить сроки их устранения. Только денег дать забыли – ну так бывает у госов, пока там дойдет финансирование…

👉 @seniorFront
🔥5
Разработай прорывное решение для автоматического Code Review с помощью ИИ на хакатоне ЕВРАЗа 3.0🔥

🦾 Создай будущее Code Review с ИИ! 

Участвуйте в нашем уникальном хакатоне по созданию ИИ-чатбота, который станет незаменимым помощником для разработчиков ЕВРАЗа! Выберите одно из направлений — Python, TypeScript или C#, и разработайте решение для анализа кода на соответствие нашим стандартам. 

Дата: 29 ноября – 1 декабря 2024.
Формат: гибридный (онлайн и офлайн).
Призовой фонд: 500.000 рублей.

🧑‍💻 Присоединяйся к хакатону, если ты:
– AI-специалист;
– Frontend / Backend-разработчик;
– Студент или выпускник технического вуза.

⚡️ Зачем участвовать?
– Прокачаешь скиллы и получишь обратную связь от ведущих экспертов отрасли.
– Прикоснешься к ИТ в ЕВРАЗе.
– Получишь возможность стать частью масштабной и амбициозной команды ЕВРАЗа.

🔸 Регистрация уже открыта! Подай заявку до 25 ноября 23:59 МСК по ссылке.
👎2🔥2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Interactive Lit LLaMA

Это SVG картинка, анимированная в CSS.

👉 @seniorFront
🔥11
Media is too big
VIEW IN TELEGRAM
Tooltip Text

В этом видео создается текстовая подсказка, которая следует за курсором пользователя на чистом JS.

👉 @seniorFront
👍3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Главное чтобы задача была интересная

👉 @seniorFront
🔥2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Editor Canvas

Вся сцена - SVG картинка, анимированная библиотекой TweenMax.

👉 @seniorFront
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
envelope with animation

Свёрстано на чистых HTML и CSS. При наведении запускаются CSS трансформации.

👉 @seniorFront
👍8
Какой из следующих процессов не является частью этапа запроса ресурса с сервера пользователем?
Anonymous Quiz
31%
Ввод URL в адресную строку
9%
Отправка HTTP-запроса
42%
Разбор HTML-документа
19%
DNS-разрешение
👍41
Media is too big
VIEW IN TELEGRAM
Our Services Box

В этом видео создаются карточки с оригинальным эффектом при наведении на CSS.

👉 @seniorFront
Media is too big
VIEW IN TELEGRAM
Anxious dots

Реализовано на canvas и чистом JS.

👉 @seniorFront
👍1
Descending Order

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

Пример:
Ввод: 42145     —>  вывод: 54421
Ввод: 145263 —> вывод: 654321
Ввод: 123456789 —> вывод: 987654321


👉 @seniorFront
👍5
Гайд: как попасть с докладом на крупную конференцию и на что обратить внимание при подготовке

Меня зовут Лиза, я ex-программный координатор конференции HighLoad++ и в этой статье расскажу базовые шаги, которые помогут спикерам дойти до программы крупной (а то и крупнейшей) профильной конференции страны.

👉 @seniorFront
👎1
BigInt в JavaScript

Тип большого целого BigInt — примитивный тип, который представляет целые числа больше 253-1. Эти числа уже не помещаются в стандартный примитив «число».

Этот тип используют для работы с произвольно большими целыми числами: идентификаторами, криптографическими ключами и другими данными, где требуется высокая точность.

Создать BigInt можно двумя способами:

1. Добавить суффикс n в конец записи числа
const biggy = 9997000254740991n


2. Вызвать конструктор BigInt
const alsoBig = BigInt(9997000254999999)


BigInt поддерживает, например, операции сложения +, вычитания -, умножения *, взятия остатка от деления %, возведения в степень **.
Операция деления / также работает, но дробная часть отбросится:
const seven = 7n
const five = 5n

console.log(seven / five)
// 1


BigInt не сериализуется в JSON, то есть не переводится в последовательность битов. Это усложняет использование данного типа данных в задачах взаимодействия с сервером.

Преобразование типов
В операциях BigInt невозможно использовать напрямую с обычными числами типа number: это приведёт к ошибке.
const biggy = 10n
const number = 5

console.log(biggy + number)
// Uncaught TypeError: Cannot mix BigInt and other types,
// use explicit conversions


Чтобы провести операции между BigInt и обычными числами, их нужно явно преобразовать. Например:
const biggy = 10n
const number = 5

console.log(biggy + BigInt(number))
// 15n

console.log(Number(biggy) + number)
// 15


Ограничения
Нет поддержки дробных чисел. BigInt работает только с целыми числами. Дробные числа нельзя использовать с этим типом данных.

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

В BigInt не поддерживаются операции унарного плюса и сдвига битов вправо.

👉 @seniorFront
👍41
This media is not supported in your browser
VIEW IN TELEGRAM
Temperature line chart

Реализовано на canvas с использованием библиотеки Chart.js

👉 @seniorFront
👍5
Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом

Залетая на очередной собес, я снова и снова встречаю их... Намеки на то, что скоро придется грести веслами: работать до ночи, делать задачи без нормального описания, срывать дедлайны, о которых стало известно буквально за день до окончания, и опять обновлять резюме.

Опоздание или переносы собеседования
Если компания начинает переносить собеседование в последний момент или опаздывает — это первый красный флаг. Конечно, форс-мажоры случаются, но если это регулярность, задумайся. Это может быть признаком плохой организованности и неуважения к твоему времени. Если на собеседовании к тебе не относятся серьезно, что будет потом?

Как реагировать: Один раз — ну ок. Два раза — в мусорку. Цените свое время.

Вакансия = тайна
Когда в вакансии нет подробностей о проекте, задачах или требованиях — это уже настораживает. Если всё держат в секрете, есть вероятность, что что-то не так. Может, проект в кризисе, или просто нет четкого понимания, что они вообще хотят. Если они не могут честно рассказать, с чем работать, скорее всего, тебе не расскажут и о проблемах, с которыми придется столкнуться.

Как реагировать: Иногда во всем виноват слабый HR-отдел. Стоит пробиться до реальных членов команды и узнать у них. Я часто встречал нормальную разработку и никудышный HR-отдел.

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

Как реагировать: Требуем конкретики и четких показателей. Не стоит пытаться узнать все устроившись и поработав. Лучше рассмотреть вариант получше.

У нас все честно!
Если на собеседовании тебе говорят "У нас все честно!" или "У нас все прозрачно" — насторожись. Это чаще всего сигнал, что тебя собираются обмануть. Настоящая честность не требует громких заявлений. Если компании приходится так настойчиво уверять, что они "честные", скорее всего, скрывается что-то неприятное. Не доверяй пустым обещаниям, лучше ищи реальные факты и конкретику — это поможет избежать неприятных сюрпризов в будущем.

Как реагировать: Большой красный флаг. Любой обман начинается с риторики а-ля "Я бы мог тебя обмануть как остальные, но я не такой, я честный"... Ага, "не бита, не крашена, в гараже стояла". Избегайте таких собесов.

Технический процесс? Вижу впервые!
Когда спрашиваешь, как у них организован процесс разработки, а в ответ получаешь: «Мы просто кодим, а потом все собираем» — это уже красный флаг. Неудивительно, что баги в продакшне появляются как кораблики в море, а с деплоем — полная неразбериха.

Как реагировать: Это повод задуматься, но можно попробовать внедрить порядок и развить процессы. Пробовать только если это единственный флаг. В остальных случаях, бежим!

👉 @seniorFront
👍6👎21
Словарь программисткого жаргона без англицизмов

Часто можно встретить словари «программистского жаргона», однако они как правило на 90% состоят из англицизмов. Это не так интересно, поскольку англицизмов можно создать бесконечное количество и они появляются новые каждый день пачками.

Мне интересно было составить «чисто русский словарь», состоящий в основном из омонимов, то есть слов, использующихся в ином значении.

Дополнения и правки приветствуются )

👉 @seniorFront
👎3👍2🔥1