WebDEV. Страница 41

Выберите правильный вариант 👇🏼 #test #js

📑 TypeScript: Ох уж эта весёлая система типов

В данной статье разбираются курьёзы тайпскриптовой системы типов.

#статьи #typescript #js

♥️ Наши каналы для программистов

На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое.

На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов.

Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.

🔥 Лучшее на канале за неделю

1. Осциллограф в браузере.

2. Lottie — замечательная библиотека от команды разработчиков Airbnb, которая экспортирует анимации Adobe After Effects в формате JSON.

3. Современные и эффективные CSS-раскладки.

♥️ Наши телеграм боты

UI8 Bot — бот предоставляет безлимитный доступ к сайту ui8.net Стоимость доступа на сайте стартует от 188$ с ограничениями на загрузки. Стоимость в нашем боте начинается от 4$ в месяц без каких-либо ограничений.

Craftwork Bot — предоставляет полный доступ к сайту craftwork.design намного дешевле.

Боты работают очень просто: присылаете ссылку в бота, а бот в ответ присылает файл для скачивания. Попробуйте сами!

💡 Современные и эффективные CSS-раскладки

▍Часть 14

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой и тринадцатой частями.

Здесь мы познакомимся с технологией, менее поддерживаемой браузерами, но существенно влияющей на концепцию отзывчивого дизайна интерфейсов. В демо, которое вы найдёте под этим постом, ширина задаётся с использованием функции 'clamp': width: clamp(<min>, <actual>, <max>).

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

.parent {
  width: clamp(23ch, 50%, 46ch);
}

Здесь минимальный размер - 23ch или 23 единицы ширины символа, а максимальный - 46ch. Единицы ширины символа основываются на размере шрифта элемента (в частности, ширине глифа 0). Предпочитаемая или "фактическая" ширина карточки равняется 50%, что означает 50% ширины родительского элемента.

Продолжение следует...

#советы #coding #css

🛠 Freezeframe — эта забавная библиотека JavaScript позволяет управлять воспроизведением анимированных GIF-файлов. Например, она может запускать и приостанавливать GIF-файлы на основе пользовательского ввода, такого как щелчки или наведение.

#инструменты #js

📑 Подробности об использовании CSS-функции minmax() в Grid-макетах

Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Но большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине вышла эта статья. Это — нечто вроде «полного руководства по minmax()», задача которого — дать читателям то, чего не дают им другие публикации на эту тему.

#статьи #css

🛠 Lottie — замечательная библиотека от команды разработчиков Airbnb, которая экспортирует анимации Adobe After Effects в формате JSON, анализирует их и визуализирует в исходном виде на Android и iOS или с помощью react native. Это делает анимацию довольно сложной, с большим количеством деталей и ключевых кадров, но при этом очень производительной.

#инструменты

Подробное объяснение теста в чате @webb_chat

Выберите правильный вариант 👇🏼 #test #js

📑 Осциллограф в браузере

В статье рассказывается об осциллографе в браузере.

#статьи

♥️ Наши каналы для программистов

На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое.

На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов.

Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.

🔥 Лучшее на канале за неделю

1. Yaml vs Json — что круче?

2. Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени.

3. Современные и эффективные CSS-раскладки.

💡 Современные и эффективные CSS-раскладки

▍Часть 13

Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.

Из прошлой части: В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...

Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Видео-демонстрацию смотрите ниже под этим постом.

В следующей части рассмотрим стилизацию с помощью Clamp.

#советы #coding #css

📑 Объектно-ориентированный JavaScript: прототипы

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

#статьи #js

Обсудить тест и почитать объяснения можно в нашем чате @webb_chat

Выберите правильный вариант 👇🏼 #test