Triangle Shape Checkbox Button

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

👉 @seniorFront

Держимся коллеги

👉 @seniorFront

⚡️ Прими участие в хакатоне MORE.Tech от ВТБ!

Когда: 11-26 октября 2024
Формат: гибридный (онлайн и офлайн) 
Призовой фонд: 1,5 млн рублей 

🔥 Хакатон подойдёт для тебя, если ты:

– Студент или выпускник технического вуза; 
– Backend / Frontend-разработчик;
– Аналитик;
– Проектный менеджер;
– UX/UI-дизайнер;
– Блокчейн-разработчик (Solidity);
– Специалист в области ИБ.

❗️Выбери свой трек:

1. Озеро данных: большие данные, обработка, хранение и анализ с использованием современных технологий.
2. NFT: система верифицированных достижений и сертификатов на основе блокчейн-токенов.
3. Vault: разработка безопасной системы хранения данных, аналог известного решения Vault от Hashicorp.

🔹 На MORE.Tech ты сможешь решить реальные финтех-кейсы и прокачать свои навыки! 

▶️ Регистрация уже открыта! Подай заявку до 19 октября, 23:59 МСК по ссылке.

#реклама
О рекламодателе

Emotion

Создано и анимировано на HTML и CSS. Взаимодействие с курсором пользователя реализовано при помощи библиотеки kicss.js

👉 @seniorFront

Pill Loader

Оригинальный загрузчик, реализованный на чистом CSS.

👉 @seniorFront

Button Ripple Effect

В этом видео создаётся эффект волны при клике на кнопку. Анимация реализована в CSS. Запуск анимации осуществляется в JS.

👉 @seniorFront

Collection of animated loaders

Подборка анимированных загрузчиков, реализованных на HTML и SCSS.

👉 @seniorFront

Найдите гласные

Мы хотим узнать индекс гласных в заданном слове, например, в слове super есть две гласные (вторая и четвертая буквы).

Пример:

Mmmm  => []
Super => [2,4]
Apple => [1,5]
YoMama -> [1,2,4,6]

👉 @seniorFront

Что нового в React 19

React 19 на подходе. Команда React анонсировала предрелизную версию React 19 в апреле. Это крупное обновление принесет с собой ряд улучшений и новых паттернов, нацеленных на повышение производительности, удобство использования и опыта разработки.

Многие из этих возможностей были представлены в экспериментальном режиме в React 18, но в React 19 они станут стабильными. Давайте подготовимся к этому обновлению.

👉 @seniorFront

​.isSupersetOf()

Метод isSupersetOf() сравнивает текущую коллекцию с другой и возвращает true, если текущая коллекция включает в себя все элементы другой коллекции, и false — если нет.

Пример
У Софии и Надежды большие личные библиотеки. София хочет доказать, что её коллекция включает все романы Набокова, которые есть в коллекции Надежды. В этом ей поможет метод isSupersetOf().

У нас есть два массива строк. Определим, входят ли все элементы второго массива также в первый. Для решения задачи создадим Set-объекты из массивов и сравним их, используя метод isSupersetOf():

const booksOfSonya = [ 'Дар', 'Подвиг', 'Защита Лужина', 'Отчаяние' ]
const booksOfNadya = [ 'Подвиг', 'Защита Лужина', 'Дар' ]

const set1 = new Set(booksOfSonya)
const set2 = new Set(booksOfNadya)

console.log(set1.isSupersetOf(set2))
// true
console.log(set2.isSupersetOf(set1))
// false

Сравнение коллекций — часто встречающаяся задача. Метод isSupersetOf() упрощает её решение и избавляет от необходимости писать код обхода и сравнения.

Не путайте метод isSupersetOf() с методом isSubsetOf(), который решает обратную задачу и проверяет, что все элементы текущей коллекции содержатся в другой. Поддержка isSupersetOf() в основных браузерах и в Node.js появилась в 2024 году. Если попробуете использовать метод в более ранних версиях, получите ошибку.

👉 @seniorFront

Todo card stack

Реализовано на React и стилизовано в чистом CSS.

👉 @seniorFront

​Почему все неправы в споре «Стартап или бизнес»?

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

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

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

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

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

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

👉 @seniorFront

Как понять продукт и зачем это нужно разработчику

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

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

👉 @seniorFront

Scroll-driven animated card stack with scroll snap events.

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

👉 @seniorFront

Creative Radio Buttons

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

👉 @seniorFront

Когда используешь <div> как <button>:

👉 @seniorFront

Color Palette Generator

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

👉 @seniorFront

Gallery Hover Effect

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

👉 @seniorFront