Очень актуально для адаптивных дизайнов. Многие кто разрабатывает адаптивный вариант приложения использует такую единицу измерения как vh, простыми словами высота видимой области, где 1vh равен 1% высоты видимой области. Но есть проблема с vh, в мобильных версиях не учитывается размер браузерной навигации. Сейчас браузеры при использовании стараются максимально освободить пространство, сдвигаю навигацию из поля зрения. И vh с этим не справляется, он не умеет определять динамическую навигацию, от этого появляются проблемы со стилями.
И тут нам на помощь приходят новые единицы измерения, вот они слева направо: svh, lvh, dvh.
Если в кратце че каждый делает:
Новые единицы измерения в CSS о которых я не знал
Очень актуально для адаптивных дизайнов. Многие кто разрабатывает адаптивный вариант приложения использует такую единицу измерения как vh, простыми словами высота видимой области, где 1vh равен 1% высоты видимой области. Но есть проблема с vh, в мобильных версиях не учитывается размер браузерной навигации. Сейчас браузеры при использовании стараются максимально освободить пространство, сдвигаю навигацию из поля зрения. И vh с этим не справляется,...
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.
Новое API позволяет создавать анимированный переход между страницами без JS! Пока находится в стадии разработки, но уже можно ограниченно опробовать. Пока поддерживается браузерами в Chrome 111+. Также есть реализация в фреймворках/библиотеках.
Паралакс эффект, анимация прогресса чтения страниц на чистом css! Добавляется два api, Scroll Progress Timeline и View Progress Timeline. В первом api мы отслеживаем скролл относительно контейнера, от 0% до 100%. В View Progress Timeline мы смотрим на относительное положение определенного элемента в контейнере. Для лучшего понимания советую посмотреть доку или на сайте (https://scroll-driven-animations.style/) где есть все примеры и реализация. Поддержка пока тоже на последних версиях хрома 🫡
Новое API позволяет создавать анимированный переход между страницами без JS! Пока находится в стадии разработки, но уже можно ограниченно опробовать. Пока поддерживается браузерами в Chrome 111+. Также есть реализация в фреймворках/библиотеках.
Ноутбук переодически начинает выдавать лютую хуйню. В какой-то момент начинает дико лагать 5 фпс. Иногда отрубается подключенная зарядка и чуть позже снова подрубается. Страшно...
Наткнулся на статью про "пахнующий" React компонент, пройдусь по пунктам с примерами плохих решений и способах их исправлений. Еще важно уточнить, что это только советы по улучшению кода, а не правила.
На фото твои коллеги смеются с твоего вонючего компонента.
При деплое своего пет приложения на GitHub Pages я столкнулся с проблемой маршрутизации через React Router.
GitHub Pages не поддерживает фичу BrowserRouter, которая используется в React Router. Если мы будем использовать стандартную маршрутизацию на GitHub Pages, приложение не сможет определить, какой маршрут используется, и будет просто показывать ошибку 404. Проблему можно решить, используя HashRouter. Нужно обернуть наше приложение следующим образом:
Для деплоя своих приложений я советую использовать Vercel https://vercel.com/new, по крайней мере не нужно делать костыли и с ним проблем у меня не было. Пока самый удобный вариант держать свои небольшие веб приложения.
Я здесь уже писал, но напишу еще раз. Про свой первый пет проект :coolcat:
Web Nasa - веб-сайт, где можно смотреть фото дня и фото Марса с выбором марсохода и дня. Также есть возможность сохранять понравившиеся посты, и я реализовал это просто через local storage. Была идея также реализовать с привязкой к Firibase, но пришлось бы делать что-то типо авторизации, а мне не хотелось сильно усложнять проект. Плюс в том, что я мог бы на любом устройстве добавлять в избранное посты и была бы синхронизация. В итоге оставил local storage.
Занимался разработкой этого проекта по вечерам, когда мне банально было скучно и нечего делать. Реализация супер простая: использовал React + API NASA https://api.nasa.gov/. По-моему, получилось очень даже мило. Задеплоил проект на Github и добавил его на свой телефон в виде отдельного приложения. Теперь мне удобно изучать космос, даже когда я нахожусь не дома👩🚀
Я здесь уже писал, но напишу еще раз. Про свой первый пет проект :coolcat:
Web Nasa - веб-сайт, где можно смотреть фото дня и фото Марса с выбором марсохода и дня. Также есть возможность сохранять понравившиеся посты, и я реализовал это просто через local storage. Была идея также реализовать с привязкой к Firibase, но пришлось бы делать что-то типо авторизации, а мне не хотелось сильно усложнять проект. Плюс в том, что я мог бы на любом устройстве добавлять в избранное посты и была бы синхронизация....
Но есть проблема с дизайном, с ним уже чуть позже мне помогла моя девушка, которая с недавних пор начала изучать ux/ui. Она решилась сделать для моего пета новый дизайн, я попросил что-то в стиле журнала. Получилось как по мне намного лучше.
Думаю с помощью firebase реализовать счетчик общего количества лайков. Например мы записываем в Local Storage лайк поста и через firebase мы записываем к определённому посту +1. Конечно я могу зайти с мобилки и веба, у меня будет +2, но я не думаю что этого стоит избегать. Я все еще не хочу прикреплять авторизацию, никто лайки не будет ставить :(
Также хотелось бы услышать ваше мнение насчет дизайна 🪐
Недоделанный вариант лежит здесь: nasa-pet.vercel.app
Но есть проблема с дизайном, с ним уже чуть позже мне помогла моя девушка, которая с недавних пор начала изучать ux/ui. Она решилась сделать для моего пета новый дизайн, я попросил что-то в стиле журнала. Получилось как по мне намного лучше.
Думаю с помощью firebase реализовать счетчик общего количества лайков. Например мы записываем в Local Storage лайк поста и через firebase мы записываем к определённому посту +1. Конечно я могу зайти с мобилки и веба, у меня будет +2, но я не думаю что этого стоит...
Очень часто при создании пет проекта для обучения я сталкивался с проблемой идеи. Откуда их брать? Постарался собрать весь пак, откуда можно брать идеи для реализации пет проектов. А также где можно проверить свои навыки, самостоятельно изучая новые инструменты и фреймворки.
Хорошие советы, от себя я добавлю "Не бойтесь выйти из зоны комфорта". У меня есть печальный опыт в 2-3 года, когда я сидел на первой работе и боялся брать таски по сложнее. У меня там был опытный коллега, который мог бы меня подправить, помочь. Но я выбрал легкий путь, сидел на месте и верстал компонентики в реакте 🤡 Я начал двигаться, когда мне стало очень скучно, я уставал даже от того, что ничего не делал. В какой то момент пошел на марафон к Зару, это как кинуть ребенка в воду, пусть учится плавать. Вот на этом марафоне я понял, что нужно "плыть". Это был хороший опыт, работа в стрессовых условиях, сидел до ночи смотрел уроки, читал статьи, лишь бы успеть сдать таску до следующего дня, не хотелось вот так просто вылететь. Я в институте так не парился как на этом марафоне.
Самый хороший совет для меня из прошлого: Выйди из зоны комфорта, не смотри на других, просто продолжай находить новые трудности. Конечно это не всегда работает, но это очень бы помогло мне в то время.
Хорошие советы, от себя я добавлю "Не бойтесь выйти из зоны комфорта". У меня есть печальный опыт в 2-3 года, когда я сидел на первой работе и боялся брать таски по сложнее. У меня там был опытный коллега, который мог бы меня подправить, помочь. Но я выбрал легкий путь, сидел на месте и верстал компонентики в реакте 🤡 Я начал двигаться, когда мне стало очень скучно, я уставал даже от того, что ничего не делал. В какой то момент пошел на марафон к Зару, это как кинуть ребенка в воду, пусть учится...
Влетел в своебразный марафон, где мне нужно вести свой тг канал на айти тему. Таких миллионы, да и ощущения, что я ничего нового, интересного не смогу показать.
Но почему бы и нет, не думаю что от этого мне станет хуже. Всяко лучше чем тупо тиктоки смотреть и в доту играть.
В основном про фронт, заметки, может мысли, идеи, пет проекты, все что угодно. Да хоть пива попить. Срусь пиздец как, реально страшно, а че такова.
Просто пиздец. Вызвали через отельного работника такси до аэропорта. Едем и в какой то момент решил проверить карту, увидел что мы едем не в тот аэропорт.
Мы много раз повторяли нужный нам аэропорт. В итоге таксист в ахуях, мы тоже. Уверен что он думает что мы неправильно сказали и ща будет требовать другую сумму. Он еще включил счетчик, а когда ехали в неправильный аэропорт он был выключен.
Дворец последних османских Султанов. Внутри фоткать запрещено, в одном зале я ахуел от масштабов. К сожалению многие места были закрыты, но за три часа мы обошли весь дворец со всеми доступными комнатами и соседний гарем. При том что взяли аудиогид и прослушали все что можно.
Вчера ездили до Istanbull Mall на метро, в одну сторону 3 пересадки, целый час добирались до туда. Сделали одну ошибку и вышли после 2-х пересадок, пришлось пешком еще минут 20 идти и потом понять, что нужно было еще пересесть на третью ветку и не пришлось бы идти по какой то стремной пром зоне.
На обратном пути было легче, т.к. не час пик и больше на чиле все было. Впринципе удобно, теперь прошаренный в стамбульском метро.
Сам тц чет не особо, хотя у него 70к оценок и ожидал чего то прям ваааау, но увы.
Вчера ездили до Istanbull Mall на метро, в одну сторону 3 пересадки, целый час добирались до туда. Сделали одну ошибку и вышли после 2-х пересадок, пришлось пешком еще минут 20 идти и потом понять, что нужно было еще пересесть на третью ветку и не пришлось бы идти по какой то стремной пром зоне.
На обратном пути было легче, т.к. не час пик и больше на чиле все было. Впринципе удобно, теперь прошаренный в стамбульском метро.
Gregory's Server
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.
Все единицы измерения имеют хорошую браузерную поддержку (https://caniuse.com/?search=svh%2C%20lvh%2C%20dvh). Примеры можно глянуть на картинке ниже.
А вообще новых единиц дохрена и больше, можно почекать здесь (https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/), я рассказал ток про самые главные и важные для меня 🤡
#css #frontend
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.