Senior Frontend - javascript, html, css
Kanalga Telegram’da o‘tish
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Ko'proq ko'rsatish2025 yil raqamlarda

26 762
Obunachilar
-1924 soatlar
-917 kunlar
-28630 kunlar
Postlar arxiv
Photo unavailableShow in Telegram
Сравнение строк
Напишите функцию, которая проверяет, может ли строка быть воссоздана с использованием символов двух других строк.
Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки
Функция не должна быть чувствительна к регистрам, а также должна использовать все символы из строк.
Примеры:
isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false
👉 @seniorFront👍 3
CodeWars
Photo unavailableShow in Telegram
Современная магистратура от Центрального университета
Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой?
Поступай в магистратуру Центрального университета!
- 4 офлайн программы по востребованным направлениям ИТ
- Онлайн-программа по машинному обучению
- 300 мест с грантами до 1,2 млн руб.
- Вечерние занятия и учеба по выходным — удобно совмещать с работой
- Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса
- Возможность стажировок и трудоустройства в ведущих компаниях
- Государственный диплом за 2 года
Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии.
Оставляй заявку на грант уже сейчас!
Подать заявку
#реклама 16+
apply.centraluniversity.ru
О рекламодателе
👍 1
00:07
Video unavailableShow in Telegram
Wow Winter Blanket
Реализовано с использованием библиотеки Three.js
👉 @seniorFront
2025-06-20 15-46-24.mp49.98 MB
👍 4
CodePen
10:01
Video unavailableShow in Telegram
Wavy Shape Card
В этом видео создается карточка с границей в форме волны на чистом CSS
👉 @seniorFront
CSS_Only_Wavy_Shape_Card_UI_Design_Html_CSS_@OnlineTutorialsYT.mp442.02 MB
👍 4🔥 2
Оригинальное видео
Какая директива в Angular используется для реализации двустороннего связывания?Anonymous voting
- *ngFor
- [(ngModel)]
- *ngIf
- [ngClass]
👍 5
00:10
Video unavailableShow in Telegram
One Page sliding Nav
Навигационное меню, реализованное с использованием препроцессоров Pug и Stylus.
👉 @seniorFront
2025-06-20 15-47-13.mp43.65 MB
🔥 8👍 1
CodePen
00:06
Video unavailableShow in Telegram
Space Junk preloader
Оригинальный загрузчик, реализованный на HTML и CSS. Анимирован библиотекой TweenMax.
👉 @seniorFront
2025-06-20 15-46-49.mp42.43 KB
❤ 5👍 1
CodePen
00:11
Video unavailableShow in Telegram
Pov: выдал джуну задачу и наблюдаешь за работой
👉 @seniorFront
IMG_6136.MP43.78 MB
👍 10❤ 6👎 1
13:12
Video unavailableShow in Telegram
CSS Card Hover Effects
В этом видео создаются карточки с 3D эффектом переворота при наведении на HTML и CSS.
👉 @seniorFront
CSS Card Hover Effects Html & CSS 3D Flip.mp435.91 MB
👍 5
Оригинальное видео
00:12
Video unavailableShow in Telegram
Get lost into space
Сцена создана и анимирована при помощи библиотеки Three.js
👉 @seniorFront
2025-06-20 15-45-57.mp42.74 MB
👍 6❤ 3👎 1
CodePen
Photo unavailableShow in Telegram
Роль СТО: как из разработчика вырасти в технологического лидера
В этом посте я поделюсь своим видением эволюции технического лидера команды до CTO крупного подразделения, про возникавшие на моем пути вызовы и постараюсь сформулировать практические советы, которые помогли мне с ними справляться. Надеюсь, они будут полезны и вам.
👉 @seniorFront
👍 4👎 1
Статья
КАША в голове, КАША в коде — как навести порядок
Новички в программировании часто ныряют в сложные проекты, вдохновившись успехами других. Но без фундамента — это дорога к хаосу. Вот 7 советов, чтобы не сгореть на старте:
Фундамент важнее фасада
Сначала разберись в основах, а потом строй "свой Instagram". Без понимания основ твой код — декорация, которая рухнет на первом вопросе.
Пиши понятный код
Назови переменные так, чтобы через неделю не гадать, что делает doIt(). Простые имена и структура спасут нервы тебе и коллегам.
Не зубри, а ищи
Не пытайся запомнить всё. Знай, что инструмент существует, и умей его найти (Google/ИИ в помощь).
Копипаст — не грех
Гуглить и копировать — норм. Главное, учись задавать вопросы чётко, а не "у меня не работает".
Уточняй проблему
Не понимаешь код? Разбей проблему на части: что именно неясно? Назови проблему — и половина уже решена.
Простота > сложность
Сложные имена и конструкции не делают код умнее. Делай понятно, читабельно и без лишних заморочек.
Экспериментируй
Первое решение — не всегда лучшее. Пробуй разные подходы, сравнивай, учись. Пока учишься, ошибаться не страшно.
Итог: строй фундамент, пиши просто, не бойся гуглить и экспериментировать. Тогда каша в голове превратится в порядок!
👉 @seniorFront
❤ 7🔥 3👍 2
Статья
Photo unavailableShow in Telegram
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе
👍 1
00:04
Video unavailableShow in Telegram
Lowpoly holy space cow
Это SVG картинка, анимированная в JS.
👉 @seniorFront
2025-06-20 15-45-33.mp42.46 KB
👍 3👎 2
CodePen
Зачем размещают статический контент на отдельные домены?
Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
- CSS, JavaScript
- Изображения, видео
- Шрифты, иконки
Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.
Зачем использовать отдельные домены для статики?
Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее
Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.
Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру
Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (
static.example.com), это снижает трафик
Как настроить отдельный домен для статики?
Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com
Настроить веб-сервер или CDN
Если используем NGINX:
server {
server_name static.example.com;
root /var/www/static;
}
👉 @seniorFront👍 7❤ 6🔥 1
Статья
Photo unavailableShow in Telegram
Команда на одной волне: неформальные правила ИТ разработки, которые реально работают
Последние полгода у меня зрела мысль поделиться накопленным опытом нашей ИТ-команды, но подходящего повода не находилось, пока я не попал на мероприятие по «практикам прозрачных процессов». Там я снова услышал знакомую проблему — одни и те же абстрактные ответы без примеров и конкретных решений на вопросы коллег. Хотя я всего лишь рядовой участник воркшопов, а не спикер, регулярно замечаю эту тенденцию.
Поэтому ничего другого не остаётся, как описать реальные практики, которые наша команда успешно использует уже несколько лет. Это не теория из учебников, а проверенные решения, которые действительно работают в наших условиях.
👉 @seniorFront
❤ 1👍 1
Статья
Photo unavailableShow in Telegram
Merged String Checker
На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.
Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.
Пример:
'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false
👉 @seniorFront❤ 2👍 1👎 1
CodeWars
00:05
Video unavailableShow in Telegram
Monument Valley in Space
Оригинальная карточка с эффектом при наведении, реализованная на angular.
👉 @seniorFront
2025-06-13 17-11-17.mp46.99 KB
👍 3
CodePen
10:31
Video unavailableShow in Telegram
Animated Circular Progress Bar
В этом видео создаётся анимированная полоса загрузки на CSS и JS.
👉 @seniorFront
How_to_Make_an_Animated_Circular_Progress_Bar_in_CSS_&_Javascript.mp432.72 MB
👍 3❤ 1
Оригинальное видео
Какой будет ширина содержимого элемента с box-sizing: border-box, если заданы width: 200px, padding: 20px и border: 10px solid?Anonymous voting
- 200px
- 140px
- 260px
- 180px
👍 8👎 5
