Прогрессивная деградация - HTML Шорты
Вставка
- Опубліковано 28 чер 2017
- - Прогрессивное улучшение на примере формы входа - htmlacademy.ru/demos/1
- Так ли дорого прогрессивное улучшение? - htmlacademy.ru/blog/8-is-it-e...
- Есть вопросы? - htmlacademy.ru/shorts
Ближайшие интенсивы:
- «HTML и CSS, уровень 1» - htmlacademy.ru/intensive/htmlcss
- «HTML и CSS, уровень 2» - htmlacademy.ru/intensive/adap...
- «JavaScript, уровень 1» - htmlacademy.ru/intensive/java...
- «JavaScript, уровень 2» - htmlacademy.ru/intensive/ecma...
- «JavaScript, уровень 3» - htmlacademy.ru/intensive/react
- профессия «Фронтенд разработчик» - htmlacademy.ru/profession/fro...
- профессия «React-разработчик» - htmlacademy.ru/profession/react
- «Node.js, уровень 1» - htmlacademy.ru/intensive/nodejs
- «PHP, уровень 1» - htmlacademy.ru/intensive/php
- «PHP, уровень 2» - htmlacademy.ru/intensive/php2
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
Хорошая аналогия с эскалатором, лайк.
да можно было б сразу в начале видео сказать это и не смотреть. )
Делая прогрессивное улучшение, учитывайте, что когда-то вам придется удалять старый код.
Несколько лет назад я начал делать прогрессивное улучшение с помощью modernizr. Например, я улучшал флоаты до флексов, опираясь на класс «flexbox». Сначала шёл монолитный кусок вёрстки с флоатами и прочими стилями, потом отдельным слоем за классом «flexbox» улучшение до флексов.
Сейчас я не могу просто так взять и удалить modernizr и всё, что касается флоатов. Надо вчитываться в код, вычищать классы от modernizr'а, отделять скин от лэйаута - делать полный рефакторинг, вместо удаления нескольких строк старого кода как в постепенной деградации.
Теперь я сразу подготавливаю код к удалению в будущем: разделяю геометрию и скин, выношу устаревающий код в отдельный блок с комментариями «удалять отсюда досюда». Надеюсь, в будущем это «окупится». Хороший код должно быт легко удалять.
Круть)) Спасибо за понятное объяснение!
Отдельный плюс за принт на футболке))
Спасибо!
Мне кажется, суть graceful degradation как раз не в постепенности, а в изящности. Помните рекламу из 90-х, когда у тётки отломался каблук, а она отломала второй и дальше пошла? Изящность в том, что для стороннего наблюдателя такая правильная деградация почти незаметна, как будто так и должно было быть.
Хороший пример с эскалатором, но он про деградацию, а в качестве улучшения можно привести дом, в нем всегда сначала строят лестницу и только потом ставят лифт)
Спасибо! Хотелось бы послушать про оптимизацию загрузки ресурсов. В частности различные тонкости навроде: будет ли браузером грузиться картинка с display:none и прочее. И да, в описании под каждым выпуском хорошо бы оставлять ссылку на футболку из выпуска :)
👍 Спасибо за вопрос! Про футболку подумаем 😁
Здравствуйте, Вадим!
Недавно смотрел запись Вашего доклада "Мой ванильный CSS" и понячл, что Вы не являетесь поклонником SASS, хотя, наверняка у Вас большой опыт его использования :) Поэтому хочу спросить: в каких случаях такой инструмент как SASS-maps является очень удобным и есть ли какие-то особенности его использования? Я буду безумно благодарен, если этот мой вопрос будет затронут в одном из выпусков HTML-shorts. И спасибо за подкасты!
Спасибо за вопрос
Спасибо за выпуск!) очень толково!
Последнее время меня терзает вопрос: В каких случаях стоит использовать переменные в CSS вместо препроцессоров less/sass/stylus? Буду рад, если сможете ответить в рамках HTML Шорт)
Спасибо за вопрос 🙂
Что такое WebKit, Chromium, Gecko ? На каких движках работают какие браузеры и что нам дают знания об этом ? Почему один и тот же браузер работает по-разному на разных ОС ?
Спасибо за вопрос 👍
Опять верхами пошёл. Больше конкретики!
Спасибо за шорты :)
Можно подробней про препроцессоры, хотелось бы услышать ваше мнение какой выбрать ? Sass/Less для самых маленьких так сказать)
Dementeey у Вадима есть доклад на эту тему. Спойлер: он за чистый CSS
Расскажем про препроцессоры, спасибо за вопрос 🙃
Сложность возрастет экспоненциально.
Я правильно понял, что тут речь шла о поддержке браузеров. Я так понял можно изначально делать для старых и постепенно наворачивать, а можно сразу по последнему слову, а потом половину удалять чтобы в старых работало? )))
Я не слушал... Уссался с футболки ))
Мне не хватает подкаста вебстандартов. Возвращайтесь.
4 дня назад же вышел 74-й выпуск - soundcloud.com/web-standards 🙀
Огромная благодарность, как я пропустил оповещение даже хз.
Вадим, я, конечно, не евангелист, но в чём проблема с логином? Зачем его открывать в отдельном окне (тем более "на читалках")? Тут либо очень абстрактный ответ, либо поддержка ФФ2.0, что странно в любом из случаев.
Нельзя ли конкретнее (чисто из интереса)?
Dmitry Anderson страница логина здесь в качестве примера. Сайт или приложение может работать в разных окнах и речь о том, что лучше организовать всё на ссылках, а уже поверх накрутить скрипты. Плюс я частенько жду когда скрипты при медленной загрузке инициализируются, а так бы просто кликнул по ссылке. Но нет, жду кнопку.
ничего не понял((
Приходите на интенсив - htmlacademy.ru/intensive/htmlcss, всё станет понятно 😊
ничего страшного. Это придет с опытом. У вас будет либо прогрессивное улучшение, либо прогрессивная деградация
Задам может быть глупый вопрос. Почему width: 100% работает, а height: 100% - нет?
Нужен контекст. Где не работает и как? У родителя тоже 100%? 100% это не полный экран это полная родительская высота. Допустим по умолчанию родительская высота у body и html равна высоте контента. Так что даже если внутри body есть тег с высотой в 100% то ничего особо не изменится так как высота body все равно равна его высоте
Виктор Васильев А разве высота body по умолчанию не равна высоте экрана
Ну тут смотря в каком браузере. В последних - да, все верно равна высоте :) В общем нужен пример твоего кода чтобы можно было понять проблему :)
Виктор Васильев Ок. Обычный div. Родитель body. Задаю диву width: 100%. Всё хорошо. А height: 100% не работает. Только в пикселях или vh
Сделай пример на codepen нельзя быть телепатом :)
ничего не понятно, какой-то набор слов.