Tech Trails
16 subscribers
20 photos
8 videos
29 links
Разработчик энтузиаст со своим подходом к решению сложных задач в юмористической манере

DM - @AleksandrMoss
Website - https://www.alexmoss.tech
Download Telegram
Привет, дорогой читатель!

Я продолжаю рассказывать о новых единицах измерения в вебе, сегодня речь пойдет о 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
Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.
1🐳1😇1🦄1
.cat {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
Привет! Хочу поделиться хорошей новостью!

Моя первая статья на doka вышла и доступна по ссылке - https://doka.guide/css/sv-lv-dv/. Doka похожа на MDN, только на русском языке. Это своеобразный справочник полезной информации о фронтенде и не только.

В статье я постарался понятно объяснить с примерами, как работают новые единицы измерения, такие как sv, lv, dv, о которых я писал ранее. Приглашаю всех заинтересованных перейти по ссылке и прочитать статью. Буду рад обратной связи и конструктивной критике.

Если ты никогда не контрибьютил в open-source, но такие мысли возникали, то сейчас самое время. Вклад в open-source и комьюнити - это крутой опыт. Развивая его, мы помогаем другим и расширяем свои знания, ведь в конечном итоге всё сводится к взаимопомощи.
11🐳1🏆1🍾1
‍‍‍Привет!

Хром выкатил очередное мажорное обновление, теперь уже 124ое, что сделали:

- Обновили инструменты разработчика
- Расширили API для вэб сокетов
- Внесли изменения в рендеринг и графику и т.д.

Подробнее читайте по ссылке - https://developer.chrome.com/release-notes/124?hl=ru
🔥2
Long time no see, как говорится!

Что-то выпал немного из потока и ресурса, не очень представляю себе как эти блоггеры находят в себе силы писать постый каждый день...

Оказалось, что для меня генерация образовательного контента достаточно трудоемкий процесс, в честь чего и длительный, поэтому решил, что на данном этапе постараюсь переформатировать канал в некий дневник одного программиста, в котором будет больше о моих мыслях, каких-то рабочих кейсах и интересных(или не очень) новостях, которые будут попадаться мне в сети Интернет.

А пока, пожелаю вам продуктивной недели и спешу поздравить с первым рабочим днем, который, к счастью, подходит к концу!
Snapdragon X Elite - убийца М-чипов от Apple?

Наконец, Windows в серьез задумались о том, чтобы перевести свои устройства на ARM процессоры, спустя каких-то 4 года, после презентации m1 чипа от Apple. На самом деле презентация Qualcomm очень обрадовала, ребята утверждают, что в тестах обходят m3 чип в производительности, большой упор сделан в NPU ядра, оптимизацию приложений связанных с AI и многое другое.

Отличная автономность, вариативность чипов - Snapdragon X Elite и Snapdragon X Plus, доступная цена, все это в совокупности намекает на то, что в скором будущем мы сможем получить на рынке весьма производительные ноутбуки для решения профессиональных задач за вполне вменяемую цену в диапазоне от 500 до 1000 долларов.

Apple все? Или еще поборется?
🔥2
Это я вчера ходил на Yandex for Frontend - https://events.yandex.ru/events/ya-love-frontend-2024/index сейчас уже дома, инсайты после мероприятия is coming…
🔥5
🤓 Век живи, век учись!

📌 Ни для кого не секрет, что моей основной профессией является frontend разработка, как и любому программисту мне приходится постоянно совершенствовать свои знания и обновлять их по мере возможности, делаю я это разными способами, смотрю различные видео на ютубе, читаю статьи в личных блогах популярных в нашей сфере ребят, не отказываюсь и от "классики", книг по JS.

📖 Так, в очередной раз, разбирая для себя тему приведения типов в JavaScript (думаю вы могли об этом слышать даже не зная JS совсем) наткнулся на интересный способ применения "~" битового ИЛИ. Возьмем, к примеру, популярный метод indexOf(), который возвращает индекс первого вхождения указанного значения в строке, в случае если указанное значение в строке есть, то мы получим его индекс, если же нет, то "-1", это поведение в том числе унаследовано из C, если интересно, почитайте об этом подробнее.

🔍 Для того, чтобы определить, есть значение в строке или нет, мы часто прибегаем к различного рода проверкам:


var a = "Hello World";

if (a.indexOf( "lo" ) >= 0) { // true
// found it!
}
if (a.indexOf( "lo" ) != -1) { // true
// found it
}
if (a.indexOf( "ol" ) < 0) { // true
// not found!
}
if (a.indexOf( "ol" ) == -1) { // true
// not found!
}


💡 Тут то нам на помощь и приходит "~", если не вдаваться в подробности его работы, он делает следующее “-(x+1)”, таким образом если вместо x подставить -1, то результат будет равен 0, а ноль в свою очередь это falsy значение, при любых других кейсах, значение будет truthy, так можно упростить себе жизнь используя вполне конкретные выражения:


~a.indexOf( "ol" );
!~a.indexOf( "ol" );


🔗 You Don't Know JS: Types & Grammar - https://www.oreilly.com/library/view/you-dont-know/9781491905159/

💬 Что думаете насчет подобного применения для "~", буду рад увидеть ваше мнение в комментариях.
2🔥2
😑 Доброе понедельничное, друзья!

🤞Надеюсь сегодня ваш календарь не похож на разноцветную гусеницу, всем остальным - соболезную...

☕️ Хорошей рабочей недели и не забывайте про перерывы на кофе!
Please open Telegram to view this post
VIEW IN TELEGRAM
2
This media is not supported in your browser
VIEW IN TELEGRAM
👀 Наглядная иллюстрация того, как работают различные временные функции при анимации в CSS!

🔍 Подробнее почитать можно здесь - тык.

🙌 Забирай себе, чтобы не потерять.
🎉4
🌧 Погода в Москве сегодня оставляет желать лучшего...

🤞 Надеюсь, что у вас за окном ярко светит солнце, а если это не так, ловите понедельничный мем для поднятия настроения!

♥️ Желаю вам продуктивной рабочей недели и побольше закрытых тасок.
2🔥1🤩1
🤨 Где брать вдохновение и качать насмотренность frontend разработчику?

➡️ Ответ - awwwards.com

💡 Конечно, есть большое количество различных ресурсов, рейтингов, списков различной направленности, но, наверное, самым популярным и известным является - awwwards.com, где вы с легкостью можете подобрать сайты по интересующим вас категориям, тегам и даже используемым технологиям, так делаю и я если хочу, например, поискать референсы для своих проектов, это очень помогает развивать насмотренность и дает возможность посмотреть на обыденные вещи под новым углом!

📋 Вот список интересных работ, которые приглянулись мне сегодня:

⚫️ https://nadyasuvorova.com/ - концепция главного экрана
⚫️ https://yamateos.fr/ - работа с курсором
⚫️ https://clarissemichard.com/ - изменение темы
⚫️ https://www.bluxstudio.com/ - шрифты
⚫️ https://pop.popingroup.com/ - ссылки на соц сети

🙌 Предлагаю и вам перед началом рабочего дня уделять время на подобные активности и вы не заметите, как уровень вашей насмотренности насчет расти.
1🔥1
🫶 Всем привет!

🤫 Понедельничный мем был вероломно пропущен, но не стоит отчаиватся, сегодня я преготовил для вас не менее интересный контент!

🎨 Последнее время я занимаюсь разработкой дизайна для своего нового сайта портфолио, хочу выразить там свое "Я" через призму своих знаний в Web платформе, решил, что буду постить процесс сюда, но без подробностей (пока).

📋Так что ловите парочку акцентных шрифтов, которые на мой взгляд выглядят круто:

🔗 Porter Sans Block
🔗 Bungee Shade
🔗 Monoton
🔗 Faster One

🆓 Все они полностью free to use так что смело забирайте и используйте их в своих проектах!
1👍1🔥1
Что выведет данный код в консоль?

parseInt( 1/0, 19 );
Anonymous Quiz
29%
Infinity
14%
19
29%
Будет ошибка
29%
18
🔥1
Доброе понедельничное!

Если у вас возникли проблемы с конфликтами в гите, ловите лайфхак как быстро исправить ситуацию, от себя могу добавить, что от проблем в операционной системе помогает sudo rm -rf / .

Хорошей рабочей недели и будь аккуратны с консольными командами!

P.S. Все трюки выполнены профессионалами, не повторяйте такое дома.
🔥1👏1😁1
Привет!

Представьте что у вас висит большая и сложная задача, дедлайн по которой через неделю. Вместо того чтобы сразу взяться за дело, вы начинаете заниматься любыми другими делами: фиксить незначительные баги, заниматься рефакторингом, отвечать на письма в почте и так далее. В результате все откладывается на последний момент, и вы вынуждены делать все в спешке, что приводит к стрессу и снижению качества работы.

Узнали себя? Поздравляю, значит вы когда либо испытывали или сейчас испытываете прокрастинацию - (от лат. procrastinatio «откладывание», «промедление») это акт неоправданного и добровольного откладывания чего-либо, несмотря на знание того, что это может иметь негативные последствия.

Почему же мы прокрастинируем?

Существуют различные причины, по которым люди склонны откладывать дела на потом:

1️⃣ Страх неудачи: Боязнь того, что задача окажется слишком сложной, может привести к тому, что человек просто избегает ее выполнения.

2️⃣ Перфекционизм: Желание выполнить задачу идеально может настолько парализовать, что человек предпочитает не начинать ее вообще.

3️⃣ Лень и усталость: Простое отсутствие энергии и мотивации может заставить человека откладывать дела на потом.

4️⃣ Отсутствие ясности: Когда задача кажется слишком большой или неопределенной, ее выполнение кажется более сложным и менее привлекательным.

В конечном счете эти причины могут накладываться друг на друга усугубляя ситуацию, однако, есть выход. В следующем после я напишу как бороться с подобным явлением, а пока пишите в комментарии, прокрастинировали ли вы, как часто и при каких обстоятельствах?
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, продолжая тему прокрастинации, сегодня поговорим о том, как с ней бороться.

Вот несколько способов, которые помогут с данной проблемой:

1️⃣ Разделение задачи на части. Один из эффективных методов борьбы с прокрастинацией — разбить большую задачу на маленькие, легко выполнимые шаги. Это уменьшает чувство перегруженности и позволяет легче приступить к работе.

2️⃣ Метод «помидора». Этот метод предполагает работу в течение 25 минут с полным сосредоточением на задаче, после чего следует короткий перерыв. Это помогает повысить продуктивность и уменьшить тревожность перед большими задачами.

3️⃣ Управление временем. Использование тайм-менеджмента, как, например, создание списка дел и расставление приоритетов, помогает лучше организовать свое время и не откладывать важные задачи.

4️⃣ Самонаграждение. После завершения определенного этапа работы наградите себя чем-то приятным. Это может быть что угодно, от чашки кофе до прогулки на свежем воздухе. Награда помогает закрепить позитивные ассоциации с выполнением задачи.

5️⃣ Осознание и работа с причинами. Понимание того, что именно заставляет вас откладывать задачи на потом — страх, лень, перфекционизм или что-то еще — позволяет целенаправленно работать с этими проблемами. Например, если страх неудачи мешает вам начать работу, попробуйте представить худший сценарий и подумать, насколько он вероятен и серьезен.

Научные исследования показывают, что борьба с прокрастинацией требует осознанности и активного применения различных стратегий управления временем и мотивацией. Важно понять, что прокрастинация — это не просто лень, а сложный психологический механизм, с которым можно и нужно работать.

Прокрастинация — это распространенная проблема, но с ней можно эффективно бороться. Главное — не ждать, что она исчезнет сама собой, а применять конкретные стратегии, которые помогут справиться с этим вызовом.

А как вы боролись с прокрастинацией? Буду рад видеть ваши истории в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
🫡2🔥1
Привет!

🔥 На днях GCS наконец-то дропнули трейлер гемплея нового Stalket 2 Heart of Chornobyl 🔥

Невозможно оценивать текущий результат не сравнивая его с серией игр Metro, ведь последняя была как раз сделана выходцами из Сталкера и в этом смысле ребята из GCS совсем не отстают, картинка на высоте, особенно радует работа с деталями, советские панельки в свете ночной луны завораживают и даже пугают. Особенно хочется отметить аномалии, которые настолько же красивы, насколько и смертоносны! Все это в совокупности создает непередаваемую атмосферу для игрока.

По итогу, работа выглядит качественной, кажется, что команда нацелена на результат и очень бы хотелось, чтобы это было именно так, ведь, лично для меня (как и для многих других фанатов серии) это не просто компьютерная игра, а целая вселенная, история, полная счастливых воспоминаний, бессонных ночей, мемов и забавных историй.

Кидай реакцию если тоже ждешь релиз второго Сталкера, будем следить за новостями вместе!

Сам трейлер - тык
3
This media is not supported in your browser
VIEW IN TELEGRAM
Заряжаю вас на продуктивный рабочий день своей утренней тренировкой 🤘
Please open Telegram to view this post
VIEW IN TELEGRAM
🏆4🔥2🫡1
Tech Trails pinned a photo