🤘Привет, дорогой друг!🤘
Благодарю, что зашел ко мне в гости, меня зовут Александр и это канал Tech Trails, где я планирую писать о:
Мире технологий
Разработке
Своих проектах
Железе
Играх и т.д.
Для того, чтобы познакомиться поближе лови 5 фактов обо мне:
23 года
5 лет в разработке
2 города за плечами
1 кот в собственности
0 опыта в ведении блога
Это мой первый опыт подобного рода, поэтому, буду рад, если ты, пройдешь этот путь вместе со мной, впереди нас ждет много интересного, местами сложного, а иногда и смешного контента. Если ты дочитал до конца, то думаю, мы подружимся, скорее подписывайся, устраивайся поудобнее и до новых встреч!
Благодарю, что зашел ко мне в гости, меня зовут Александр и это канал Tech Trails, где я планирую писать о:
Мире технологий
Разработке
Своих проектах
Железе
Играх и т.д.
Для того, чтобы познакомиться поближе лови 5 фактов обо мне:
23 года
5 лет в разработке
2 города за плечами
1 кот в собственности
0 опыта в ведении блога
Это мой первый опыт подобного рода, поэтому, буду рад, если ты, пройдешь этот путь вместе со мной, впереди нас ждет много интересного, местами сложного, а иногда и смешного контента. Если ты дочитал до конца, то думаю, мы подружимся, скорее подписывайся, устраивайся поудобнее и до новых встреч!
🔥2
🙄 LeetCode or not LeetCode? That is the question...
🖐 Привет, ребята, я думаю, что ни для кого не секрет, что для того, чтобы получить хорошую работу, вам нужно пройти несколько собеседований, и одним из них будет раздел алгоритмов.
🤨 Многие люди думают, что фактическое знание алгоритмов бесполезно в реальной разработке, но, тем не менее, многие компании задают вопросы об алгоритмах на собеседованиях. И мы, как кандидаты, должны быть готовы к этому.
👀 Итак, я хотел бы знать, какими советами и хитростями вы пользуетесь или применяли их при подготовке к алгоритмам. Какие ресурсы, курсы или даже книги вы считаете полезными для этого.
🖐 Привет, ребята, я думаю, что ни для кого не секрет, что для того, чтобы получить хорошую работу, вам нужно пройти несколько собеседований, и одним из них будет раздел алгоритмов.
🤨 Многие люди думают, что фактическое знание алгоритмов бесполезно в реальной разработке, но, тем не менее, многие компании задают вопросы об алгоритмах на собеседованиях. И мы, как кандидаты, должны быть готовы к этому.
👀 Итак, я хотел бы знать, какими советами и хитростями вы пользуетесь или применяли их при подготовке к алгоритмам. Какие ресурсы, курсы или даже книги вы считаете полезными для этого.
🔥2
😲 Контейнерные стилевые запросы это реальность!
✍ Данный функционал частично реализован в Chrome 111, где можно своими руками попробовать использовать свойства CSS для применения стилей к элементам внутри контейнера.
👀 В этом примере используются данные о погодных условиях, сохраненные в кастомных значениях свойств, таких как дождь, солнце, облачность и т.д, для оформления фона карточек и иконок.
🤫 Но это лишь верхушка айсберга подобных запросов. В будущем планируется создание условных (больше, меньше) запросов, чтобы уменьшить бойлерплейт кода, а в настоящее время идет работа над логическими запросами в диапазоне значений (больше x, но меньше y) для применения стилей на основе данного диапазона. Это позволило бы применять стили, используя процентное значение вероятности дождя или облачного покрова для отображения соответствующих стилей. Выглядит довольно круто!
✍ Данный функционал частично реализован в Chrome 111, где можно своими руками попробовать использовать свойства CSS для применения стилей к элементам внутри контейнера.
👀 В этом примере используются данные о погодных условиях, сохраненные в кастомных значениях свойств, таких как дождь, солнце, облачность и т.д, для оформления фона карточек и иконок.
🤫 Но это лишь верхушка айсберга подобных запросов. В будущем планируется создание условных (больше, меньше) запросов, чтобы уменьшить бойлерплейт кода, а в настоящее время идет работа над логическими запросами в диапазоне значений (больше x, но меньше y) для применения стилей на основе данного диапазона. Это позволило бы применять стили, используя процентное значение вероятности дождя или облачного покрова для отображения соответствующих стилей. Выглядит довольно круто!
❤1🔥1
🤔 Как сделать так, чтобы ваш текст выглядел сбалансированным? Легко!
💡 Свойство CSS text-wrap позволяет вам управлять тем, как текст будет размещен внутри элемента при переносе. Вы можете попробовать балансировку переноса текста для заголовков, используя свойство text wrap со значением balance. Это позволяет создавать более ровные заголовки и удалять одиночные строки текста.
🙌 Вот как выглядит сайт web.dev после балансировки переноса текста. Заголовки и подзаголовки более однородны по длине.
Баланс переноса текста использует текстовый алгоритм Кнута для определения наиболее визуально сбалансированной позиции текста в заголовке.
👉 Несмотря на то, что это отличное прогрессивное усовершенствование, которое вы можете попробовать уже сегодня, важно отметить, что данное API работает только с четырьмя строками текста. Таким образом это отличный инструмент для заголовков, но, скорее всего, не то, что вы бы искали для более длинных фрагментов текста.
💡 Свойство CSS text-wrap позволяет вам управлять тем, как текст будет размещен внутри элемента при переносе. Вы можете попробовать балансировку переноса текста для заголовков, используя свойство text wrap со значением balance. Это позволяет создавать более ровные заголовки и удалять одиночные строки текста.
🙌 Вот как выглядит сайт web.dev после балансировки переноса текста. Заголовки и подзаголовки более однородны по длине.
Баланс переноса текста использует текстовый алгоритм Кнута для определения наиболее визуально сбалансированной позиции текста в заголовке.
👉 Несмотря на то, что это отличное прогрессивное усовершенствование, которое вы можете попробовать уже сегодня, важно отметить, что данное API работает только с четырьмя строками текста. Таким образом это отличный инструмент для заголовков, но, скорее всего, не то, что вы бы искали для более длинных фрагментов текста.
🔥1🥰1😱1
С 2013 года браузеры поддерживают единицы измерения
Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что
Размер указывается в процентах от ширины вьюпорта (viewport width).
Размер в процентах от высоты вьюпорта (viewport height).
Размер в процентах от меньшей размерности вьюпорта cо всеми открытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
Размер в процентах от большей размерности вьюпорта cо всеми открытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
vw, vh, vmin, vmax, которые позволили задавать размер элементам относительно размеров окна браузера (viewport). Однако устройства и их экраны эволюционировали. Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что
100vh или 100% высоты экрана означали высоту, равную высоте экрана устройства, но vh не учитывает адрессную строку и навигационную панель браузера на мобильных устройствах. Поэтому иногда высота контента оказывается слишком большой и появляется лишний скролл. Для решения данной проблемы были созданы новые единицы измерений - sv, lv, dv. svw Размер указывается в процентах от ширины вьюпорта (viewport width).
100svw соответствует полной ширине вьюпорта cо всеми открытыми элементами браузера. 1svw = 1% ширины вьюпорта. svh Размер в процентах от высоты вьюпорта (viewport height).
100svh соответствует полной высоте вьюпорта cо всеми открытыми элементами браузера. 1svh = 1% высоты вьюпорта. smin Размер в процентах от меньшей размерности вьюпорта cо всеми открытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
smax Размер в процентах от большей размерности вьюпорта cо всеми открытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
❤1
Привет, дорогой читатель!
Я продолжаю рассказывать о новых единицах измерения в вебе, сегодня речь пойдет о
Размер указывается в процентах от ширины вьюпорта (viewport width). `100lvw` соответствует полной ширине вьюпорта cо всеми закрытыми элементами браузера.
Размер в процентах от высоты вьюпорта (viewport height). `100lvh`соответствует полной высоте вьюпорта cо всеми закрытыми элементами браузера.
Размер в процентах от меньшей размерности вьюпорта cо всеми закрытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
Размер в процентах от большей размерности вьюпорта cо всеми закрытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
Я продолжаю рассказывать о новых единицах измерения в вебе, сегодня речь пойдет о
lv, где первая буква означает large, таким образом размер элемента с данным стилем будет равен наиболее возможному размеру вьюпорта с закрытыми элементами браузера. lvw Размер указывается в процентах от ширины вьюпорта (viewport width). `100lvw` соответствует полной ширине вьюпорта cо всеми закрытыми элементами браузера.
1lvw = 1% ширины вьюпорта. lvh Размер в процентах от высоты вьюпорта (viewport height). `100lvh`соответствует полной высоте вьюпорта cо всеми закрытыми элементами браузера.
1lvh = 1% высоты вьюпорта. lmin Размер в процентах от меньшей размерности вьюпорта cо всеми закрытыми элементами браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
lmax Размер в процентах от большей размерности вьюпорта cо всеми закрытыми элементами браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
👍1🔥1🐳1
Привет, дорогой друг!
Сегодня будет мой последний пост о новых единицах измерения. Мы рассмотрим последнюю категорию единиц - dv где d означает динамически (dynamic), таким образом элемент с подобными стилями будет иметь максимально возможную ширину и высоту экрана, учитывая элементы браузера и их состояние (открыты они или закрыты).
dvw
Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта.
dvh
Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта.
dvmin
Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
dvmax
Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
Сегодня будет мой последний пост о новых единицах измерения. Мы рассмотрим последнюю категорию единиц - dv где d означает динамически (dynamic), таким образом элемент с подобными стилями будет иметь максимально возможную ширину и высоту экрана, учитывая элементы браузера и их состояние (открыты они или закрыты).
dvw
Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта.
dvh
Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта.
dvmin
Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.
dvmax
Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
❤1🐳1😇1🦄1
Привет! Хочу поделиться хорошей новостью!
Моя первая статья на doka вышла и доступна по ссылке - https://doka.guide/css/sv-lv-dv/. Doka похожа на MDN, только на русском языке. Это своеобразный справочник полезной информации о фронтенде и не только.
В статье я постарался понятно объяснить с примерами, как работают новые единицы измерения, такие как sv, lv, dv, о которых я писал ранее. Приглашаю всех заинтересованных перейти по ссылке и прочитать статью. Буду рад обратной связи и конструктивной критике.
Если ты никогда не контрибьютил в open-source, но такие мысли возникали, то сейчас самое время. Вклад в open-source и комьюнити - это крутой опыт. Развивая его, мы помогаем другим и расширяем свои знания, ведь в конечном итоге всё сводится к взаимопомощи.
Моя первая статья на doka вышла и доступна по ссылке - https://doka.guide/css/sv-lv-dv/. Doka похожа на MDN, только на русском языке. Это своеобразный справочник полезной информации о фронтенде и не только.
В статье я постарался понятно объяснить с примерами, как работают новые единицы измерения, такие как sv, lv, dv, о которых я писал ранее. Приглашаю всех заинтересованных перейти по ссылке и прочитать статью. Буду рад обратной связи и конструктивной критике.
Если ты никогда не контрибьютил в open-source, но такие мысли возникали, то сейчас самое время. Вклад в open-source и комьюнити - это крутой опыт. Развивая его, мы помогаем другим и расширяем свои знания, ведь в конечном итоге всё сводится к взаимопомощи.
Дока
sv, lv, dv — CSS — Дока
Новый подход к единицам измерения относительно размеров окна браузера.
⚡1❤1🐳1🏆1🍾1
Привет!
Хром выкатил очередное мажорное обновление, теперь уже 124ое, что сделали:
- Обновили инструменты разработчика
- Расширили API для вэб сокетов
- Внесли изменения в рендеринг и графику и т.д.
Подробнее читайте по ссылке - https://developer.chrome.com/release-notes/124?hl=ru
Хром выкатил очередное мажорное обновление, теперь уже 124ое, что сделали:
- Обновили инструменты разработчика
- Расширили API для вэб сокетов
- Внесли изменения в рендеринг и графику и т.д.
Подробнее читайте по ссылке - https://developer.chrome.com/release-notes/124?hl=ru
🔥2
Long time no see, как говорится!
Что-то выпал немного из потока и ресурса, не очень представляю себе как эти блоггеры находят в себе силы писать постый каждый день...
Оказалось, что для меня генерация образовательного контента достаточно трудоемкий процесс, в честь чего и длительный, поэтому решил, что на данном этапе постараюсь переформатировать канал в некий дневник одного программиста, в котором будет больше о моих мыслях, каких-то рабочих кейсах и интересных(или не очень) новостях, которые будут попадаться мне в сети Интернет.
А пока, пожелаю вам продуктивной недели и спешу поздравить с первым рабочим днем, который, к счастью, подходит к концу!
Что-то выпал немного из потока и ресурса, не очень представляю себе как эти блоггеры находят в себе силы писать постый каждый день...
Оказалось, что для меня генерация образовательного контента достаточно трудоемкий процесс, в честь чего и длительный, поэтому решил, что на данном этапе постараюсь переформатировать канал в некий дневник одного программиста, в котором будет больше о моих мыслях, каких-то рабочих кейсах и интересных(или не очень) новостях, которые будут попадаться мне в сети Интернет.
А пока, пожелаю вам продуктивной недели и спешу поздравить с первым рабочим днем, который, к счастью, подходит к концу!