🛠 Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени. Она имеет потрясающий дизайн и анимацию, а также очень удобна в использовании с форматированием чисел, проверкой и определением типа карты.
#инструменты #js
#инструменты #js
💡 Современные и эффективные CSS-раскладки
▍Часть 12
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.
Ключевым моментом данной раскладки является свойство justify-content: space-between, которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...
В следующей части продолжим данную тему.
Видео-демонстрацию смотрите ниже под этим постом.
Продолжение следует...
#советы #coding #css
▍Часть 12
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.
Ключевым моментом данной раскладки является свойство justify-content: space-between, которое размещает первый и последний дочерние элементы у края родителя, поровну распределяя доступное пространство между самими элементами. В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...
В следующей части продолжим данную тему.
Видео-демонстрацию смотрите ниже под этим постом.
Продолжение следует...
#советы #coding #css
📑 Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году
Профессия «фронтенд-разработчик», без сомнения, будет одной из самых востребованных в 2021 году.
Раньше тем, кто работал в этой сфере, для создания интерактивных сайтов достаточно было знать HTML, CSS и, возможно, jQuery. Но сегодня фронтенд-разработчик вынужден существовать в обширной и постоянно меняющейся экосистеме, состоящей из инструментов, библиотек, фреймворков. Разработчику жизненно необходимы навыки владения самыми разными средствами, ему постоянно приходится вкладывать время и силы в самообучение.
В последние несколько лет мир увидел замечательные новые библиотеки и фреймворки, основанные на JavaScript и составляющие сегодня основу практически любого веб-проекта. Это, например, React, Vue, Svelte.
#статьи #frontend
Профессия «фронтенд-разработчик», без сомнения, будет одной из самых востребованных в 2021 году.
Раньше тем, кто работал в этой сфере, для создания интерактивных сайтов достаточно было знать HTML, CSS и, возможно, jQuery. Но сегодня фронтенд-разработчик вынужден существовать в обширной и постоянно меняющейся экосистеме, состоящей из инструментов, библиотек, фреймворков. Разработчику жизненно необходимы навыки владения самыми разными средствами, ему постоянно приходится вкладывать время и силы в самообучение.
В последние несколько лет мир увидел замечательные новые библиотеки и фреймворки, основанные на JavaScript и составляющие сегодня основу практически любого веб-проекта. Это, например, React, Vue, Svelte.
#статьи #frontend
🛠 PWA Asset Generator — инструмент командной строки для создания ресурсов PWA на основе Node.js и Puppeteer. Он генерирует значки и заставки, а затем автоматически добавляет их в manifest.json и HTML вашего проекта.
#инструменты #typescript #js
#инструменты #typescript #js
💡 Современные и эффективные CSS-раскладки
▍Часть 13
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.
Из прошлой части: В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...
Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.
В следующей части рассмотрим стилизацию с помощью
#советы #coding #css
▍Часть 13
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой, восьмой, девятой, десятой и одиннадцатой частями.
Из прошлой части: В нашем случае внутри карточек выбран режим раскладки Flexbox, с вертикальным расположением элементов, заданным с использованием flex-direction: column ...
Это размещает заголовок, описание и блок изображения в одну колонку внутри родительской карточки. Затем применяется свойство justify-content: space-between, прикрепляющее первый (заголовок) и последний (блок изображения) элементы к краям, а блок описания между ними.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
Видео-демонстрацию смотрите ниже под этим постом.В следующей части рассмотрим стилизацию с помощью
Clamp.#советы #coding #css
🔥 Лучшее на канале за неделю
1. Yaml vs Json — что круче?
2. Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени.
3. Современные и эффективные CSS-раскладки.
1. Yaml vs Json — что круче?
2. Vue Interactive Paycard — впечатляющая форма кредитной карты, которая реагирует на ввод пользователя и анимирует карту в реальном времени.
3. Современные и эффективные CSS-раскладки.
♥️ Наши каналы для программистов
На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое.
На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов.
Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.
На канале Daily Coding мы каждый день публикуем интересные задачи с собеседований, обучающие статьи, бесплатные книги, советы разработчикам и многое другое.
На канале Говнокод ежедневно выходят забавные подборки плохого кода и мемы для программистов.
Подписывайтесь! Неважно на каком языке вы пишете, вы обязательно найдете что-то новое и интересное.
📑 Ответ
Anonymous Quiz
16%
20 40 80 160
9%
20 40 20 40
33%
20 20 20 40
26%
NaN NaN 20 40
16%
Узнать ответ
🛠 Lottie — замечательная библиотека от команды разработчиков Airbnb, которая экспортирует анимации Adobe After Effects в формате JSON, анализирует их и визуализирует в исходном виде на Android и iOS или с помощью react native. Это делает анимацию довольно сложной, с большим количеством деталей и ключевых кадров, но при этом очень производительной.
#инструменты
#инструменты
📑 Подробности об использовании CSS-функции minmax() в Grid-макетах
Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Но большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине вышла эта статья. Это — нечто вроде «полного руководства по minmax()», задача которого — дать читателям то, чего не дают им другие публикации на эту тему.
#статьи #css
Существует множество руководств, в которых рассматриваются общие вопросы работы с CSS Grid, с механизмом, позволяющим создавать сеточные макеты. Но большинство существующих публикаций на эту тему либо не вдаются в детали, либо не включают в себя достаточного количества пояснений и примеров из реального мира. А minmax() — это очень мощная и полезная функция. Именно по этой причине вышла эта статья. Это — нечто вроде «полного руководства по minmax()», задача которого — дать читателям то, чего не дают им другие публикации на эту тему.
#статьи #css
🛠 Freezeframe — эта забавная библиотека JavaScript позволяет управлять воспроизведением анимированных GIF-файлов. Например, она может запускать и приостанавливать GIF-файлы на основе пользовательского ввода, такого как щелчки или наведение.
#инструменты #js
#инструменты #js