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
Почему все неправы в споре «Стартап или бизнес»?

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

- Новый? Udemy и AirBnb искали ProductMarketFit (Состояние продукта достойное рынка, считается что начинать продажи стоит только при его достижении) более 2-х лет, а Roblox заявляют почти о 10-ти годах.

- Технологичный? Скажите это стартапу, который придумал добавить кармашек на кросовки, чтобы во время бега не носить ключи (оборот 158 млн), а также Российскому «Бери заряд!», который сдает павербанки в аренду. Там нет сложных технологий, но это стартапы.

- Убыточный? Startupplanner стали прибыльными на 2-й месяц, при продаже второго заказа. Или Zappos, который торговал обувью сразу в прибыль, не сразу но достаточно быстро стал прибыльным и GitHub — сервис для управления версионностью программного кода.

- Маленький? На своем старте Tesla сразу нанимала сотни сотрудников, как и стриминговый сервис Quibi, стартовал с инвестициями в 1,75 миллиарда и несколькими сотнями сотрудников.

Что же тогда отличает стартап от бизнеса? Отсутствие рабочей бизнес-модели.
Стартап — это временная организация по поиску работающей бизнес‑модели. Когда вы придумали новую бизнес‑модель и нет уверенности, что это все будет работать, то это стартап. Как только вы ее проверили и поняли, что это рабочая схема — вы бизнес. Граница между стартапом и бизнесом весьма размыта, но это все равно самое точное и верное определение из всех доступных.

👉 @seniorFront
👎5👍42
Как понять продукт и зачем это нужно разработчику

Если вы не понимаете бизнес своей компании, вы не сможете полностью реализовать свои технические навыки. Крутой технарь на позиции СТО, который знает нюансы TOGAF и отличия Raft от Paxos — это хорошо, но мало. Вы должны принимать решения не только исходя из технических деталей задачи, но и с учётом реалий бизнеса, его потребностей и направления развития.

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

👉 @seniorFront
👍4
Какой он, отличный день для Frontend-разработчиков? 🤔

21 сентября на A?.Frontend Day мы вместе с сотней IT-специалистов создали именно такую атмосферу! Офлайн в Москве и онлайн это событие собрало тех, кто готов делиться опытом и узнавать новое.

🌟 Что было:
Вадим Царегородцев из Ostrovok.ᅠru представил Valibot — инновационный инструмент для гибкой и безопасной валидации данных в JavaScript.
Сергей Попов из Skillbox раскрыл методы преодоления проблем внедрения изменений в компаниях.
Никита Мамизеров рассказал о сложностях и успехах внедрения BDUI в Альфа-Онлайн.
Никита Ульшин из Т-Банка поделился паттернами отказоустойчивости, помогающими минимизировать риски.
Андрей Смирнов из X5 Tech рассмотрел карьерные ловушки для тимлидов и объяснил, как их избежать.
Евгений Смирнов из Альфа-Банка провёл дискуссию о том, как ИИ и Copilot меняют разработку и что ждёт программирование в будущем.

И это только часть того, что происходило на A?.Frontend Day! А ещё были квизы, розыгрыши подарков и афтепати с нетворкингом.

Хотите увидеть, как это было? Переходите по ссылке и смотрите подробный отчёт с мероприятия!❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
👎3👍2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-driven animated card stack with scroll snap events.

Свёрстано на HTML и SCSS. Переключение реализовано при помощи события "scrollsnapchange".

👉 @seniorFront
👍14🔥4
Media is too big
VIEW IN TELEGRAM
Creative Radio Buttons

В этом видео создаются кастомные анимированные радио-кнопки на HTML и CSS.

👉 @seniorFront
👍52
This media is not supported in your browser
VIEW IN TELEGRAM
Когда используешь <div> как <button>:

👉 @seniorFront
35👍9🤔5🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Color Palette Generator

Оригинальное приложение - генератор цветовых палитр, созданное на angular.

👉 @seniorFront
13👍4🔥2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Gallery Hover Effect

Карточки с CSS трансформациями, которые запускаются при наведении.

👉 @seniorFront
👍82🤔1
Media is too big
VIEW IN TELEGRAM
Split Slider

В этом видео создается слайдер картинок на чистом CSS.

👉 @seniorFront
5
This media is not supported in your browser
VIEW IN TELEGRAM
Product card

Вёрстка реализована на HTML и SCSS. Логика смены классов при нажатии на кнопки реализована в JS.

👉 @seniorFront
👍9🤔4🔥3
Unique In Order

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

Пример:
uniqueInOrder('AAAABBBCCDAABBB')  //   ['A', 'B', 'C', 'D', 'A', 'B']
uniqueInOrder('ABBCcAD') // ['A', 'B', 'C', 'c', 'A', 'D']
uniqueInOrder([1,2,2,3,3]) // [1,2,3]


👉 @seniorFront
3👍1👎1🔥1
Как матрица компетенций помогает развитию команды

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

👉 @seniorFront
👎3👍21
Успей принять участие в хакатоне Т1.Самара

На хакатоне участникам будут предложены 2 кейса:
1. DataCraft. Конструктор отчётов по проекту;
2. Документы 2.0: Умная автоматизация с LLM.
Призовой фонд: 600 000 рублей.

Почему тебе нужно принять участие:
*️⃣Фирменный мерч в подарок всем офлайн-участникам;
*️⃣Питание — обед и снэк-бар на протяжении всего дня;
*️⃣Обратная связь от топовых менторов и техлидов Т1.

И еще один крутой бонус!
- Участники, попавшие в ТОП-8 по итогам оценки решений, получат разряд по спортивному программированию.
- Победители будут награждены кубками и грамотами.
🤝Партнёр хакатона: Федерация Спортивного Программирования Самарской области.

Даты проведения хакатона:
— 25-26 октября — онлайн
— 27-28 октября — офлайн
📍г. Самара

➡️ Регистрация на хакатон открыта до 23 октября, 23:59 МСК по ссылке.

#реклама
О рекламодателе
👍4👎1
Что такое inline block в отличии от inline элемента ?

Есть несколько значений для свойства display, которые определяют, как элемент будет отображаться на странице. Два из этих значений — inline и inline-block — имеют некоторые сходства, но и значительные отличия.

Inline элементы - элементы с display: inline; ведут себя как часть текста. Это значит, что:
- Они располагаются на одной строке с другими инлайн-элементами или текстом, если только ширина родительского элемента не заставляет их обтекать.
- У инлайн-элементов нельзя задать ширину (width) и высоту (height), так как размеры определяются содержимым.
- Вертикальные отступы (margin-top и margin-bottom) и вертикальные внутренние отступы (padding-top и padding-bottom) не влияют на расстояние между инлайн-элементами вертикально, хотя могут влиять на фоновое изображение или цвет.
- Горизонтальные отступы и внутренние отступы применяются нормально.

Inline-block элементы - элементы с display: inline-block; комбинируют некоторые свойства инлайн и блочных элементов:
- Как и инлайн элементы, эти элементы располагаются на одной строке с другими инлайн-элементами или текстом.
- В то же время, у них можно задать ширину и высоту, как у блочных элементов.
- Вертикальные и горизонтальные отступы (margin и padding) работают как у блочных элементов, влияя на расстояние вокруг элемента во всех направлениях.
- Элементы могут содержать другие блочные или инлайн элементы.

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

👉 @seniorFront
👍101
This media is not supported in your browser
VIEW IN TELEGRAM
Photo Filter With Range Sliders

Значение для CSS фильтров задаются через JS по событию input.

👉 @seniorFront
👍31
Приходят в компанию, а уходят от руководителя: проявления негатива, которых стоит избегать в рабочей коммуникации

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

1. Невербальный негатив
Это всё, что не озвучено явно — мимика, жесты, позы тела, взгляды, эмоции, тембр и громкость голоса. Довольно большой и богатый спектр, чтобы выразить почти любые чувства. Не все такое умеют считывать, так как не обладают достаточной степенью эмпатии или просто равнодушны к собеседникам. На мой взгляд, это на самом деле ключевой маркер поведения, который даёт больше информации, чем слова.

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

3. Токсичность
Пожалуй, самое затасканное понятие, которое часто неверно понимают. Токсичность — это не «плохое поведение», а действия, которые отравляют окружение при контакте. К примеру, собеседник вполне себе вежлив, но капля сарказма тут, усмешка там и вот уже с ним нет желания говорить даже в чате, не то, что в реале.

4. Пассивная агрессия
Как ни странно, иногда самый действенный метод для того чтобы пробить тупость людей) Не советую злоупотреблять, но в некоторых случаях можно использовать, чтобы разрулить ситуацию без доведения до открытого конфликта — это лучше, чем допустить драку. В рабочих отношениях будет вызывать раздражение, но если директор не хочет решать какие-то трудности менеджмента, то именно такое отношение он и получит в результате.

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

👉 @seniorFront
👍63👎1
Почему вам лучше не работать проджектом

Часто слышу от людей, которые только хотят войти в IT, что “если ты гуманитарий, а в QA идти не хочется, то есть один путь – в менеджеры проектов”. Им кажется, что рабочий день выглядит так: провел 2-3 встречи, выпил 3 чашки кофе, построил Гант, промотивировал команду и можно идти домой.

Я уже больше 10 лет работаю менеджером проектов и видел много коллег, которые бросали профессию и уходили заниматься всем чем угодно, только лишь бы потушить вечно горящую задницу. Я утешал рыдающих коллег-проджектов, меня выгоняли охранники из офисного здания заказчика с фонариками, потому что оно закрывалось в 11 вечера, а мне надо было еще работать.

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

👉 @seniorFront
🔥61
This media is not supported in your browser
VIEW IN TELEGRAM
Star Ratings

В JS созданы обработчики события click для каждой звезды. При нажатии изменяются определенные стили.

👉 @seniorFront
👍7👎1
Media is too big
VIEW IN TELEGRAM
CSS + SVG Animation Effects

В этом видео создается анимированная SVG картинка - loader.

👉 @seniorFront
2
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь знать откуда эти шрамы?

👉 @seniorFront
👍6👎2🔥1