Продолжаем разбираться со слайдерами на CSS. Первая часть поста здесь.
В предыдущей части никто не упомянул про CSS-свойство scroll-snap. Это было бы хорошим аргументом за то, чтобы использовать CSS для слайдеров. Спойлер: нет.
Но был очень хороший комментарий про graceful degradation — «Что будет, если JS отключится?». Автор вопроса намекает, что если бы слайдер работал полностью на CSS, то при отключённом JavaScript он продолжил работать. Такой вот железобетонный слайдер, которому ничего не страшно.
В очередной раз повторимся, механизмы работают хорошо, когда их применяют по назначению. Скролснэпом вы как будто пытаетесь делать сетки на float. Да, 10 лет ими делали сетки, но поддержка таких сеток всегда была сложной.
То же самое с scroll-snap для слайдеров. Чуть сложность слайдера вырастает и scroll-snap превращается во врага, а не помощника. Заказчик попросит: сделать бесконечную карусель, добавить кнопки «Показать предыдущий/следующий слайд», сделать созависимые слайдеры, прокрутку не одного слайда, а нескольких, если некоторые слайды маленькие. У scroll-snap сразу лапки, он с такими задачами не справится или справится очень плохо.
Но scroll-snap как раз очень хорошо подойдёт для progressive enhancement. Сначала делаем прокрутку слайдов с помощью scroll-snap, а после докручиваем всю необходимую функциональность с помощью JS. Когда JS есть, слайдер имеет всю функциональность. Когда его нет, слайдер превращается в свою упрощённую версию — просто умею скролить слайды.
#неглупые_вопросы
В предыдущей части никто не упомянул про CSS-свойство scroll-snap. Это было бы хорошим аргументом за то, чтобы использовать CSS для слайдеров. Спойлер: нет.
Но был очень хороший комментарий про graceful degradation — «Что будет, если JS отключится?». Автор вопроса намекает, что если бы слайдер работал полностью на CSS, то при отключённом JavaScript он продолжил работать. Такой вот железобетонный слайдер, которому ничего не страшно.
В очередной раз повторимся, механизмы работают хорошо, когда их применяют по назначению. Скролснэпом вы как будто пытаетесь делать сетки на float. Да, 10 лет ими делали сетки, но поддержка таких сеток всегда была сложной.
То же самое с scroll-snap для слайдеров. Чуть сложность слайдера вырастает и scroll-snap превращается во врага, а не помощника. Заказчик попросит: сделать бесконечную карусель, добавить кнопки «Показать предыдущий/следующий слайд», сделать созависимые слайдеры, прокрутку не одного слайда, а нескольких, если некоторые слайды маленькие. У scroll-snap сразу лапки, он с такими задачами не справится или справится очень плохо.
Но scroll-snap как раз очень хорошо подойдёт для progressive enhancement. Сначала делаем прокрутку слайдов с помощью scroll-snap, а после докручиваем всю необходимую функциональность с помощью JS. Когда JS есть, слайдер имеет всю функциональность. Когда его нет, слайдер превращается в свою упрощённую версию — просто умею скролить слайды.
#неглупые_вопросы
Как организовать учебный процесс, чтобы не потерять интерес к обучению и сохранять мотивацию?
Часто ли вы сталкиваетесь с тем, что загораетесь идеей изучать новое, но в процессе теряете интерес и бросаете начатое? Наша практика и опыт других образовательных платформ показывает, что таких людей много.
Чтобы избежать потери интереса и мотивации в процессе обучения, мы подготовили несколько советов и собрали их в карточки.
Часто ли вы сталкиваетесь с тем, что загораетесь идеей изучать новое, но в процессе теряете интерес и бросаете начатое? Наша практика и опыт других образовательных платформ показывает, что таких людей много.
Чтобы избежать потери интереса и мотивации в процессе обучения, мы подготовили несколько советов и собрали их в карточки.
Марафон «Заверстаю» стартует 1 марта. Перед стартом марафона мы решили провести лайв, на котором ответим на самые частые вопросы пользователей:
— как принять участие,
— кому будет полезен марафон,
— как выстроить процесс работы,
— что нужно для выполнения задания,
— какие критерии проверки.
Поможет ответить на вопросы Лиза Пак — наставница HTML Academy, которая занималась вёрсткой макетов марафонов «Заверстаю 2.0» и «Заверстаю 3.0». И Настя Степанова — SMM-менеджер HTML Academy.
Лайв пройдёт в Инстаграме 25 февраля в 17:00 по московскому времени.
Подписывайтесь на наш Инстаграм, что не пропустить эфир — https://tml.io/22s83
— как принять участие,
— кому будет полезен марафон,
— как выстроить процесс работы,
— что нужно для выполнения задания,
— какие критерии проверки.
Поможет ответить на вопросы Лиза Пак — наставница HTML Academy, которая занималась вёрсткой макетов марафонов «Заверстаю 2.0» и «Заверстаю 3.0». И Настя Степанова — SMM-менеджер HTML Academy.
Лайв пройдёт в Инстаграме 25 февраля в 17:00 по московскому времени.
Подписывайтесь на наш Инстаграм, что не пропустить эфир — https://tml.io/22s83
До начала марафона осталось 6 дней.
В ожидании марафона предлагаем вам поучаствовать в викторине, которую мы организовали совместно с myQuiz.
Проверьте свои знания компьютерных технологий и получите возможность выиграть неделю доступ к тренажёрам HTML Academy по HTML, CSS и JavaScript.
Победит тот, кто даст больше правильных ответов за меньшее количество времени!
Сама викторина откроется 24 февраля в 17:00 по московскому времени.
Записывайся — https://myquiz.ru/p/175104
А чтобы точно прокачаться в вёрстке — присоединяйтесь к нашему бесплатному марафону, который стартует 1 март — https://t.iss.one/joinchat/SohClV1eVFg13f_B
В ожидании марафона предлагаем вам поучаствовать в викторине, которую мы организовали совместно с myQuiz.
Проверьте свои знания компьютерных технологий и получите возможность выиграть неделю доступ к тренажёрам HTML Academy по HTML, CSS и JavaScript.
Победит тот, кто даст больше правильных ответов за меньшее количество времени!
Сама викторина откроется 24 февраля в 17:00 по московскому времени.
Записывайся — https://myquiz.ru/p/175104
А чтобы точно прокачаться в вёрстке — присоединяйтесь к нашему бесплатному марафону, который стартует 1 март — https://t.iss.one/joinchat/SohClV1eVFg13f_B
Завтра в 16:00 по московскому времени состоится лайв «Веб-анимация для фронтендеров. Что выбрать: CSS, JavaScript или SVG».
На лайве обсудим:
— Какие инструменты может применять фронтенд-разработчик для создания анимаций;
— Особенности анимации на CSS: какие свойства применяются, в чём их преимущества и ограничения;
— Какую анимацию можно сделать на JavaScript;
— Вопросы веб-анимации, которые могут волновать фронтендера.
Раскроет тему приглашённый эксперт — Наталья Габитова, ведущий креативный фронтенд-разработчик VisCom by Rambler Group. А поможет ей ведущий мероприятия — Лёша Симоненко, директор по развитию HTML Academy.
Записаться на лайв можно по ссылке
На лайве обсудим:
— Какие инструменты может применять фронтенд-разработчик для создания анимаций;
— Особенности анимации на CSS: какие свойства применяются, в чём их преимущества и ограничения;
— Какую анимацию можно сделать на JavaScript;
— Вопросы веб-анимации, которые могут волновать фронтендера.
Раскроет тему приглашённый эксперт — Наталья Габитова, ведущий креативный фронтенд-разработчик VisCom by Rambler Group. А поможет ей ведущий мероприятия — Лёша Симоненко, директор по развитию HTML Academy.
Записаться на лайв можно по ссылке
Оспариваем утверждение «Я никогда не научусь верстать» и другие мифы о разработке в нашей новой статье на Хабре.
Читать подробнее — https://tml.io/1m48d
Читать подробнее — https://tml.io/1m48d
Хабр
«Я никогда не научусь верстать» и другие мифы о разработке
За 15 лет я успел забыть, что и так можно былоМогу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозн...
Через 5 минут начнётся лайв «Веб-анимация для фронтендеров. Что выбрать: CSS, JavaScript или SVG».
На лайве обсудим:
— Какие инструменты может применять фронтенд-разработчик для создания анимаций;
— Особенности анимации на CSS: какие свойства применяются, в чём их преимущества и ограничения;
— Какую анимацию можно сделать на JavaScript;
— Вопросы веб-анимации, которые могут волновать фронтендера.
Раскроет тему приглашённый эксперт — Наталья Габитова, ведущий креативный фронтенд-разработчик VisCom by Rambler Group. А поможет ей ведущий мероприятия — Лёша Симоненко, директор по развитию HTML Academy.
Записаться на лайв — https://tml.io/k015c
На лайве обсудим:
— Какие инструменты может применять фронтенд-разработчик для создания анимаций;
— Особенности анимации на CSS: какие свойства применяются, в чём их преимущества и ограничения;
— Какую анимацию можно сделать на JavaScript;
— Вопросы веб-анимации, которые могут волновать фронтендера.
Раскроет тему приглашённый эксперт — Наталья Габитова, ведущий креативный фронтенд-разработчик VisCom by Rambler Group. А поможет ей ведущий мероприятия — Лёша Симоненко, директор по развитию HTML Academy.
Записаться на лайв — https://tml.io/k015c
Викторина откроется через 10 минут.
Проверьте свои знания компьютерных технологий и получите возможность выиграть неделю доступ к тренажёрам HTML Academy по HTML, CSS и JavaScript.
Победит тот, кто даст больше правильных ответов за меньшее количество времени!
Сама викторина откроется 24 февраля в 17:00 по московскому времени.
Записывайся — https://myquiz.ru/p/175104
А чтобы точно прокачаться в вёрстке — присоединяйтесь к нашему бесплатному марафону, который стартует 1 март — https://t.iss.one/joinchat/SohClV1eVFg13f_B
Проверьте свои знания компьютерных технологий и получите возможность выиграть неделю доступ к тренажёрам HTML Academy по HTML, CSS и JavaScript.
Победит тот, кто даст больше правильных ответов за меньшее количество времени!
Сама викторина откроется 24 февраля в 17:00 по московскому времени.
Записывайся — https://myquiz.ru/p/175104
А чтобы точно прокачаться в вёрстке — присоединяйтесь к нашему бесплатному марафону, который стартует 1 март — https://t.iss.one/joinchat/SohClV1eVFg13f_B
Публикуем отзыв и советы выпускницы курса «HTML и CSS. Адаптивная вёрстка и автоматизация» #21 Кати Фёдоровой.
«...Есть моменты, о которых ты не знаешь, пока не попробуешь. И не знаешь, как именно тебе с ними справиться. Об этих моментах хочу предупредить...»
Подробнее 👇
https://telegra.ph/Otzyv-i-sovety-vypusknicy-kursa-HTML-i-CSS-Adaptivnaya-vyorstka-i-avtomatizaciya-21-Kati-Fyodorovoj-02-25
«...Есть моменты, о которых ты не знаешь, пока не попробуешь. И не знаешь, как именно тебе с ними справиться. Об этих моментах хочу предупредить...»
Подробнее 👇
https://telegra.ph/Otzyv-i-sovety-vypusknicy-kursa-HTML-i-CSS-Adaptivnaya-vyorstka-i-avtomatizaciya-21-Kati-Fyodorovoj-02-25
Что такое веб-компоненты?
Веб-компоненты — это общее название набора технологий, которые создают переиспользуемые блоки. Они заимствуют многолетний проверенный опыт компонентов фреймворков и превращают их в веб-стандарты, так чтобы это работало прямо в браузере без дополнительных библиотек.
Подобие веб-компонентов создали уже давно. Простейший пример — элемент <select> . Для него есть отдельный тег. Этот тег создает выпадающий список, который появляется по клику. Логика работы этого тега скрыта от нас, к тому же у него есть свои собственные стили. То есть это какая-то заготовка из технологий, которую можно быстро использовать.
📁 Хорошо, а зачем это придумали?
Дело в том, что сейчас бизнесу хочет создавать более крупные и сложные программно веб-продукты. Чтобы можно было как можно большо функций дать клиенту, а ещё все это должно быть красиво оформлено и быстро работать. Такие задачи сами по себе сложные, так еще и накладывается специфичность веб-технологий. Чтобы уменьшить сложность, продукт разделяют на более простые части. Такой компонентный подход уменьшает хаос, улучшает структуру, понимаемость, увеличивает эффективность командной работы.
📁 Можно ещё пример веб-компонента?
С помощью веб-компонентов вы сможете сделать в своём проекте тег <modal>, который будет иметь всю функциональность модальных окон: открытие, закрытие, центрирование контента, оверлей, и это будет всё выглядеть как обычный HTML.
Веб-компоненты это не одна спецификация, а целых 4:
Custom Elements — позволяют создавать новые типы DOM-элементов.
Shadow DOM — позволяет инкапсулировать стиль и разметку в веб-компонентах.
ES Modules — изолирует логику компонента
HTML Template — определяет, как объявлять фрагменты разметки, которые не используются при загрузке страницы, но могут быть созданы позже.
Веб-компоненты полезная, но сложная штука. Чтобы правильно использовать веб-компоненты стоит изучить JavaScript.
Стало понятнее или всё ещё сложно?
#htmlacademy_неглупые_вопросы
Веб-компоненты — это общее название набора технологий, которые создают переиспользуемые блоки. Они заимствуют многолетний проверенный опыт компонентов фреймворков и превращают их в веб-стандарты, так чтобы это работало прямо в браузере без дополнительных библиотек.
Подобие веб-компонентов создали уже давно. Простейший пример — элемент <select> . Для него есть отдельный тег. Этот тег создает выпадающий список, который появляется по клику. Логика работы этого тега скрыта от нас, к тому же у него есть свои собственные стили. То есть это какая-то заготовка из технологий, которую можно быстро использовать.
📁 Хорошо, а зачем это придумали?
Дело в том, что сейчас бизнесу хочет создавать более крупные и сложные программно веб-продукты. Чтобы можно было как можно большо функций дать клиенту, а ещё все это должно быть красиво оформлено и быстро работать. Такие задачи сами по себе сложные, так еще и накладывается специфичность веб-технологий. Чтобы уменьшить сложность, продукт разделяют на более простые части. Такой компонентный подход уменьшает хаос, улучшает структуру, понимаемость, увеличивает эффективность командной работы.
📁 Можно ещё пример веб-компонента?
С помощью веб-компонентов вы сможете сделать в своём проекте тег <modal>, который будет иметь всю функциональность модальных окон: открытие, закрытие, центрирование контента, оверлей, и это будет всё выглядеть как обычный HTML.
Веб-компоненты это не одна спецификация, а целых 4:
Custom Elements — позволяют создавать новые типы DOM-элементов.
Shadow DOM — позволяет инкапсулировать стиль и разметку в веб-компонентах.
ES Modules — изолирует логику компонента
HTML Template — определяет, как объявлять фрагменты разметки, которые не используются при загрузке страницы, но могут быть созданы позже.
Веб-компоненты полезная, но сложная штука. Чтобы правильно использовать веб-компоненты стоит изучить JavaScript.
Стало понятнее или всё ещё сложно?
#htmlacademy_неглупые_вопросы