Новые единицы измерения в вебе — svh, lvh и dvh: для чего нужны и как их использовать?
Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.
Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.
Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.
#веб #фронтенд
Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.
Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.
Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.
#веб #фронтенд
Media is too big
VIEW IN TELEGRAM
Такого ужасного интерфейса вы ещё не видели
Наверное, все однажды встречали неудобную форму для ввода данных на сайте, но насколько она было неудобной? А что, если в одной месте будет собрана целая коллекция форм ввода номера с адовым UX.
Попробуйте ввести свой номер хотя бы в 3 формы и не получить при этом нервный срыв: https://fun.mishasaidov.com/badux/
#кек #веб
Наверное, все однажды встречали неудобную форму для ввода данных на сайте, но насколько она было неудобной? А что, если в одной месте будет собрана целая коллекция форм ввода номера с адовым UX.
Попробуйте ввести свой номер хотя бы в 3 формы и не получить при этом нервный срыв: https://fun.mishasaidov.com/badux/
#кек #веб
Что изменилось в CSS за последние несколько лет
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.
О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.
И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.
#веб #фронтенд #css
CSS в 2023 году: главные изменения
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.
Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.
#веб #фронтенд #cs
Media is too big
VIEW IN TELEGRAM
Как исполняется код JavaScript и почему эти знания — суперсила веб-разработчиков?
После получения файла JavaScript с сервера код JS преобразуется в то, с чем компьютер может работать. В этом компьютеру помогают движки, встроенные в браузеры. В них и кроется суперсила использования JavaScript.
Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.
Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:
1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/
#javascript #веб
После получения файла JavaScript с сервера код JS преобразуется в то, с чем компьютер может работать. В этом компьютеру помогают движки, встроенные в браузеры. В них и кроется суперсила использования JavaScript.
Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.
Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:
1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf
2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/
#javascript #веб
Подборка игр для обучения веб-разработке:
1. В Elevator Saga вам предстоит управлять лифтом с помощью JavaScript, разгадывая задачки. Игра опенсорс, так что можно покопаться в исходниках: https://play.elevatorsaga.com/
2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: https://www.hexinvaders.com/
3. Если вы хотите изучить Ruby, то Ruby Warrior — то, что вам нужно: отличная игра для начинающих программистов. Есть два уровня сложности: https://www.bloc.io/ruby-warrior/
4. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: https://flexboxfroggy.com/
5. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/
#начинающим #веб
1. В Elevator Saga вам предстоит управлять лифтом с помощью JavaScript, разгадывая задачки. Игра опенсорс, так что можно покопаться в исходниках: https://play.elevatorsaga.com/
2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: https://www.hexinvaders.com/
3. Если вы хотите изучить Ruby, то Ruby Warrior — то, что вам нужно: отличная игра для начинающих программистов. Есть два уровня сложности: https://www.bloc.io/ruby-warrior/
4. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: https://flexboxfroggy.com/
5. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/
#начинающим #веб
Разбираемся с CORS
Cross-origin resource sharing (CORS) — это механизм браузера, который обеспечивает контролируемый доступ к ресурсам, расположенным за пределами заданного домена. В вебе это довольно важная тема.
Поэтому держите небольшой набор статей, который поможет понять, как это вообще устроено. А если уже понимаете, но вас задолбали ошибки, то и с этим тоже:
Лайтовое введение в CORS: история возникновения, как устроен и оптимальные методы работы: https://habr.com/ru/companies/macloud/articles/553826/
Более серьёзное руководство с многочисленными примерами и дополнительной информацией: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Наиболее частые ошибки и способы их устранения: https://fatimamo.com/become-a-cors-wizard
#cors #веб
Cross-origin resource sharing (CORS) — это механизм браузера, который обеспечивает контролируемый доступ к ресурсам, расположенным за пределами заданного домена. В вебе это довольно важная тема.
Поэтому держите небольшой набор статей, который поможет понять, как это вообще устроено. А если уже понимаете, но вас задолбали ошибки, то и с этим тоже:
Лайтовое введение в CORS: история возникновения, как устроен и оптимальные методы работы: https://habr.com/ru/companies/macloud/articles/553826/
Более серьёзное руководство с многочисленными примерами и дополнительной информацией: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Наиболее частые ошибки и способы их устранения: https://fatimamo.com/become-a-cors-wizard
#cors #веб
Next.js: руководство по структурированию крупномасштабных проектов
Хорошая структура важна в любом проекте, а особенно в крупном, если, конечно, только вы не хотите чувствовать себя Индианом Джонсом, продирающимся сквозь густые джунгли компонентов, хуков и конфигурационных файлов.
Эта статья посвящена именно этому. Следуя приведённой структуре, вы потратите меньше времени на размышления о том, куда что идет, и больше времени на создание потрясающих функций.
#веб #js
Хорошая структура важна в любом проекте, а особенно в крупном, если, конечно, только вы не хотите чувствовать себя Индианом Джонсом, продирающимся сквозь густые джунгли компонентов, хуков и конфигурационных файлов.
Эта статья посвящена именно этому. Следуя приведённой структуре, вы потратите меньше времени на размышления о том, куда что идет, и больше времени на создание потрясающих функций.
#веб #js
Forwarded from Точка входа в программирование
Как повысить производительность сайта: улучшаем UX за счет сокращения времени загрузки
Мы все сталкивались с раздражением от ожидания долгих загрузочных экранов. Обычно это происходит из-за того, что сайт пытается получить все необходимые данные, как только вы попадаете на страницу.
Одна из возможных способов борьбы с этим явлением — предварительная выборка данных. Это классный трюк для сокращения времени загрузки страниц. В этой статье подробно описывается, как и когда применять эту технику, с примерами кода и полезными советами.
#веб
Мы все сталкивались с раздражением от ожидания долгих загрузочных экранов. Обычно это происходит из-за того, что сайт пытается получить все необходимые данные, как только вы попадаете на страницу.
Одна из возможных способов борьбы с этим явлением — предварительная выборка данных. Это классный трюк для сокращения времени загрузки страниц. В этой статье подробно описывается, как и когда применять эту технику, с примерами кода и полезными советами.
#веб
This media is not supported in your browser
VIEW IN TELEGRAM
Как менялось соотношение популярности браузеров за последние 28 лет — свежая визуализация от Eeagli.
Муд оперы: стабильность залог успеха 😂
#веб
#веб
Please open Telegram to view this post
VIEW IN TELEGRAM