Имитация чернильных клякс

Выполнена на canvas + JS
«Кляксы» можно добавлять кликом по холсту. Обратите внимание, что старые бледнеют при добавлении новых, «впитываясь» в «бумагу», что добавляет реалистичности.

​​💥ОСВОЙТЕ FLUTTER!💥

28 июля на платформе Skill-Branch стартует практический онлайн-курс «Flutter в мобильной разработке»!

Начните создавать современные приложения под Android и IOS, как это уже делают Google, Alibaba, eBay и другие мировые компании.✊🏼

«Flutter в мобильной разработке» от Skill-Branch – это:

• 3,5 месяца обучения мультиплатформенной разработки
• 40+ академических часов лекций
• 100+ часов практики
• 11 закрытых мастер-классов
• Система автоматической проверки заданий
• Апгрейд портфолио: мобильное приложение на Flutter, созданное вами👍🏼
• Сертификат, подтверждающий полученные знания
• Живой чат сообщества для общения. Присоединяйтесь!

⚠️Количество мест ограничено!⚠️

⚡️Рассрочка 0/0/24 - Учитесь за 1630 ₽/мес.
⚡️Программа лояльности и скидки
⚡️Обучение за счёт работодателя

Оставьте заявку на сайте сейчас!

CSS @font-face

@font-face - это правило, которое позволяет указать шрифты для отображения текста на веб-страницах.

Как использовать @font-face
1. Необходимо определить имя шрифта, и место где его можно найти.
@font-face {
font-family: DeliciousRoman;
src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}
2. Затем уже его можно использовать.
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

Также, можно подключать шрифты локально:
@font-face {
font-family: DeliciousRoman;
src: url('.../Delicious-Roman.otf');
}

Несколько дополнительных свойств @font-face:
font-display - Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
font-stretch - с помощью него можно определить ширину начертания букв.
font-style - позволяет определить наклонный шрифт или курсив.
font-weight - определяет насколько “толстым” должно быть начертание букв.

А вы знали что спрятано тут в обсуждениях?

Чат анонимных фронтендеров - там можно общаться, обсуждать контент и с проблемами по фронтенду помогают

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

Примеры:
toTime(3600); // => '1 hour(s) and 0 minute(s)'
toTime(3601); // => '1 hour(s) and 0 minute(s)'
toTime(3500); // => '0 hour(s) and 58 minute(s)'
toTime(323500); // => '89 hour(s) and 51 minute(s)'

«Сеть» из неоновых огоньков

Проведя курсором по «сети», вы увидите красивую анимацию ее разрыва.
Технологии: canvas, WebGL, particles.js.

Мир IT - странная штука, неправда ли ? Загадочная и совершенно непонятная для обычного человека.

А что если это не так? Что если все, да с точностью наоборот?

В данный момент, я уже как полгода занимаю должность Junior JavaScript Developer, важна деталь - без бумажки о высшем образовании.

И Я ХОЧУ ВАМ РАССКАЗАТЬ:

👨🏻‍💻Как живёт IT САМУРАЙ

🔥Чем он питается и дышит

👨🏻‍🏫 Играет ли роль высшее образование в жизни программиста


❗️Так же я запускаю бесплатное обучение по веб-разработке

Не упускай свой шанс постичь IT вселенную и скорее присоединяйся!

Переключатель на flexbox

Автор стилизует inputtype="radio", при нажатии на которые происходит трансформация элемента с помощью CSS свойства transform(scale).

🔴 Запускаю новый канал по Web стеку

Всех кто интересуется не только фронтендом приглашаю на наш второй канал Senior WebDev

Там будут публиковаться материалы для изучения PHP, Node.js, Sql и конечно же по фронтенду

Все как вы любите:
👉 Обучающие статьи
👉 Задачки на проверку знаний
👉 Примеры кода для разных задач

JS for...of и for...in

Оба оператора, и for...in и for...of производят обход объектов. Разница лишь в том, как они это делают.

Оператор for...of выполняет обход по элементам коллекций, вызывая на каждом шаге итерации значение, а не ключ.
Для массивов работает аналогично forEach, но имеет преимущества: возможность использовать continue и break для контроля итераций.

 let arr = [10, 20, 30];

for (let value of arr) {
  value += 1;
  console.log(value);
}
// 11 21 31

Цикл for...in проходит по каждому отдельному элементу, вызывая на каждом шаге ключ. Цикл for...in проходит по свойствам в произвольном порядке, поэтому его не следует использовать для массивов.

 var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(obj[prop]);
}

// 1 2 3

Анимация кнопки при наведении

Выполнена на чистом CSS.
Изначально происходит бесконечная анимация с помощью CSS @keyframes.
При наведении на кнопку анимированные элементы увеличиваются в размерах с помощью свойства transform