WebDEV

💡 Современные и эффективные CSS-раскладки ▍Часть 18 Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой, тринадцатой, четырнадцатой, пятнадцатой, шестнадцатой и семнадцатой частями. ▍Сохранение пропорций: aspect-ratio: <width> / <height> Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, следует использовать хак с padding-top, задав padding 56.25%. Но сСкоро у нас появится свойство, позволяющее не прибегать к этому хаку и вычислению процентов. Можно сделать квадрат с соотношением сторон 1 / 1 или прямоугольник с соотношением 2 / 1, или любым другим, необходимым для изображения определённых размеров.

.square {
  aspect-ratio: 1 / 1;
}

Хотя эта функция все еще находится на стадии разработки, о ней полезно знать, поскольку она решает множество споров разработчиков, с которыми я и сама много раз сталкивалась, особенно когда речь идет о видео и фреймах. #советы #coding #css

🛠 Screenshot to Code — отличный инструмент, который превращает макеты дизайна в статические веб-сайты. Он основан на нейронной сети, которая анализирует изображения дизайна, разбивает их на компоненты HTML и отображает макет дизайна на основе Bootstrap. #инструменты

📑 До свидания, Google Fonts. Последний аргумент Шрифты Google Fonts страшно популярны. Их загружают более 42,8 миллиона сайтов, в том числе Хабр. Библиотека Google Fonts содержит 1023 свободных шрифта и программные интерфейсы для их внедрения через CSS. Очень удобно, казалось бы. Во многих статьях отмечалось, в какую цену обходятся многочисленные запросы через API. Совет самостоятельно хостить шрифты дают много лет. Даже сама Google давала такой совет на конференции Google I/O 2018 года в выступлении на тему веб-производительности. Так почему же многие до сих пор загружают шрифты через Google Fonts API? Ну, был последний аргумент — кэширование. Мол, благодаря общему CDN пользователю не нужно скачивать шрифт заново с каждого сайта. Однако в октябре 2020 года этот аргумент перестал работать... #статьи

♥️ Наши телеграм боты UI8 Bot — бот предоставляет безлимитный доступ к сайту ui8.net Стоимость доступа на сайте стартует от 188$ с ограничениями на загрузки. Стоимость в нашем боте начинается от 4$ в месяц без каких-либо ограничений. Craftwork Bot — предоставляет полный доступ к сайту craftwork.design намного дешевле. Боты работают очень просто: присылаете ссылку в бота, а бот в ответ присылает файл для скачивания. Попробуйте сами!

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

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

💡 Современные и эффективные CSS-раскладки ▍Часть 17 Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой, тринадцатой и четырнадцатой, пятнадцатой и шестнадцатой частями. ▍Сохранение пропорций: aspect-ratio: <width> / <height> И, наконец, последний инструмент - самый экспериментальный из всех. Он был недавно представлен в Chrome Canary в Chromium 84, а Firefox ведёт активную работу над его внедрением, но пока что в стабильных версиях браузеров он не поддерживается. Тем не менее, я хочу упомянуть и его, потому что он решает достаточно часто встречаемую проблему - сохранение пропорций изображений. При использовании свойства aspect-ration, когда я изменяю размер карточки, зелёный блок сохраняет пропорции 16x9: aspect-ration: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

Продолжение следует... #советы #coding #css

🛠 Jimp — это библиотека обработки изображений для Node. Она предлагает множество инструментов для рисования, добавления фильтров, работы с цветом и многого другого. Библиотека полностью построена на JavaScript и не имеет зависимостей, поэтому она должна сразу же работать на любом терминале Node. #инструменты #js

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

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

📑 Интеграция чат-бота Dialogflow с Angular-приложением Существует множество публикаций о разработке чат-ботов с использованием возможностей платформы Dialogflow. Но для выхода на решение, которое применимо на практике, просто создать бота недостаточно. Бота надо подключить к веб-интерфейсу. Это — интересная и сложная задача. Чат-боты используются в различных веб-проектах, в том числе тех, которые созданы с использованием Angular — популярного, постоянно развивающегося фреймворка для разработки веб-приложений. Сегодня мы поговорим о том, как интегрировать чат-бота Dialogflow с Angular-приложением. #статьи #angular #typescript #js

♥️ Наши каналы для программистов На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое. На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов. Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.

🔥 Лучшее на канале за неделю 1. TypeScript: Ох уж эта весёлая система типов. 2. DropCSS — тщательный очиститель CSS, который берет ваш HTML и CSS и возвращает только те стили, которые действительно используются. 3. Современные и эффективные CSS-раскладки.

🎁 Бесплатная раздача для подписчиков Специально для подписчиков наших каналов о программировании, мы бесплатно раздаем файл 📦 TaskEz Productivity App iOS UI Kit через UI8 Bot. Чтоб получить этот файл бесплатно, достаточно нажать на кнопку под постом. Внимание! Раздача ограничена по времени.

В телеграме FirstVDS сейчас в разгаре розыгрыш Apple-девайсов на 300 000 рублей в честь 18-летия компании. Среди призов MacBook Air (M1, 2020) и iPhone 12 Pro 128 гб. В розыгрыше принимают участие все клиенты, купившие VDS стоимостью от 600 рублей, а победителя выберут в прямом эфире 29 декабря. В общем, если вам нужен сервер для ваших проектов — самое время.

💡 Современные и эффективные CSS-раскладки ▍Часть 16 Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой, одиннадцатой, двенадцатой, тринадцатой и четырнадцатой и пятнадцатой частями. ▍Стилизация с помощью Clamp: clamp(<min>, <actual>, <max>) ...Это обеспечивает больше удобства при чтении, так как блок текста не будет слишком широким (более 46ch) или слишком сжатым и узким (менее 23ch). Это также отличный способ реализовать отзывчивый размер шрифта. Например, можно написать: font-size: clamp(1.5rem, 20vw, 3rem). В этом случае размер шрифта заголовка всегда будет оставаться в пределах между 1.5rem и 3rem, но будет увеличиваться или уменьшаться в зависимости от размера экрана, соответствуя значению 20vw. Это отличный способ обеспечить удобство чтения, но помните, что данное свойство поддерживается ещё не во всех современных браузерах, поэтому убедитесь, что не забыли про фолбек. #советы #coding #css

🛠 Instant Page ускоряет загрузку, предварительно растягивая ссылки, когда пользователь наводит на них курсор. Это ускоряет загрузку страницы, когда пользователь фактически нажимает на ссылку и переходит на следующую страницу. Она также может автоматически получать все ссылки на странице - идеально подходит для статического контента. #инструменты