Приветствую фронты! Давно уже слышал про такую тему как
Задача: Отображать разные картинки в зависимости от размера девайса
Можно сделать и через CSS, но минус такого подхода в том что рендерится все-равно 2 картинки, а если элементов в которых нужно сделать такую подмену много(как у меня было) то это влияет на производительность. В итоге вспомнил про picture и применил его:
Выглядит примерно так:
<picture /> но применить на практике пришлось вот только недавно.Задача: Отображать разные картинки в зависимости от размера девайса
Можно сделать и через CSS, но минус такого подхода в том что рендерится все-равно 2 картинки, а если элементов в которых нужно сделать такую подмену много(как у меня было) то это влияет на производительность. В итоге вспомнил про picture и применил его:
Выглядит примерно так:
<picture>
<source media="(min-width:650px)" srcset="big_pic.jpg">
<source media="(min-width:465px)" srcset="small_pic.jpg">
<img src="pic.jpg" alt="pic" style="width:auto;">
</picture>
В общем вот вам, экспериментируйте =)Какое из перечисленных CSS правил использует псевдокласс?
Anonymous Quiz
6%
а - span {color: blue }
10%
* { color:blue }
32%
a:visited { color: blue }
52%
a::after { color: blue }
This media is not supported in your browser
VIEW IN TELEGRAM
Memory Game
Суть игры в том, что надо найти пары одинаковых карточек. Логика сделана на JS.
Суть игры в том, что надо найти пары одинаковых карточек. Логика сделана на JS.
Статья дня. Что такое SPA - плюсы и минусы, некоторые особенности.
Краткая заметка, которая подойдет для подготовки к собеседованию.
Читать статью
#читать
Краткая заметка, которая подойдет для подготовки к собеседованию.
Читать статью
#читать
KeyCDN
Single-Page Applications: A Comprehensive Guide
Single-Page-Applications (SPAs) are websites that load all their content into a single page. Learn the benefits of SPAs and when they're best for your website.
Roguelike Development with JavaScript
Автор: Andre Alves Garzia
Год издания: 2020
Рецензия на книгу:
Плюсы:
1. Множество примеров кода;
2. Хороший авторский стиль.
Минусы:
1. Не замечено.
#JavaScript
Скачать книгу
Автор: Andre Alves Garzia
Год издания: 2020
Рецензия на книгу:
Плюсы:
1. Множество примеров кода;
2. Хороший авторский стиль.
Минусы:
1. Не замечено.
#JavaScript
Скачать книгу
This media is not supported in your browser
VIEW IN TELEGRAM
3D hover plane effect
Простой эффект 3D-плоскости при наведении, реализованный с помощью CSS-свойства transform и jQuery.
Простой эффект 3D-плоскости при наведении, реализованный с помощью CSS-свойства transform и jQuery.
Javascript вопрос: Какого типа данных нет в JS?
Anonymous Quiz
6%
Symbol
38%
Char
3%
Null
47%
Bight
6%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Driving through the Mountains
Сцена создана при помощи препроцессоров Haml и SCSS. В JS реализована логика установки расстояний между деревьями.
Сцена создана при помощи препроцессоров Haml и SCSS. В JS реализована логика установки расстояний между деревьями.
Что выведется в консоль?
Anonymous Quiz
37%
undefined и undefined
18%
number и number
7%
number и undefined
18%
undefined и number
20%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Hamburgers
Подборка бургер кнопок, анимированных в CSS. В JS создана логика изменения размера иконок.
Подборка бургер кнопок, анимированных в CSS. В JS создана логика изменения размера иконок.