Александр Ламков — Friendly Frontend のテレグラム投稿

🧬 CSS Анимация за N шагов — функция steps

➡️ https://youtube.com/shorts/jxCwnTqMda0

#фронтенд_лайфхак

😱 А правда, что ИИ заменит разработчиков?

* с нехилой такой задержкой подключаюсь к актуальной в последние годы теме *

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

Давайте взглянем на эту тему рационально.

За что разработчики получают относительно неплохую зарплату?

За написание кода к уже продуманному алгоритму? Или за продумывание этого самого алгоритма? А может быть за декомпозирование больших задач на маленькие? Или может за перевод задачи с менеджерского / заказчиского языка на язык технический? А может за погружение в дерьм плохой код и внесение в него корректировок или внедрение в него нового функционала? Или быть может самое ценное и нужное в таком специалисте — знания нюансов, от которых зависит качество финального продукта (а иногда и его работоспособность в принципе)?

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

😳 А кто ещё, кроме программиста, умеет писать код по четко расписанной задаче? Пррр-авильно — ИИ.

😎 ИИ как самый умный ботаник в классе, который в теории — может всё, но на практике — выдаст неудачное решение из не самой умной книжки и виду не подаст, пока лично не укажешь на ошибку в его результатах.

😎 ИИ не переспрашивает, не уточняет, не сомневается в поставленной перед ним задаче, в общем, не разбирается в контексте вопроса, а сразу самоуверенно выдает результат с припиской «да этот код точно решает твою задачу, прям точно, гарантирую, я так уже сто раз делал, верь мне».

Это я ещё молчу про зачастую ужасающе огромную кодовую базу проекта, которую обязательно нужно учитывать при решении какой-либо «разработческой» задачки.

💻 Ну и как такому самоуверенному инструменту доверить большой проект? И кто вообще может провалидировать результаты работы ИИ в виде кода, чтобы оценить адекватность решения и возможность поддержки кодовой базы в дальнейшем? Только разработчик.

Ну и делаем выводы.

ИИ — не замена разработчика. ИИ — его инструмент, «более умный поисковик», не более того. Конечно, со временем ИИ поумнеет, но без умного «оператора ИИ», который сам знает разработку от и до, проект целиком и полностью ИИ не доверят.

😶 А как вы относитесь к ИИ? Сможем ли мы когда-нибудь делегировать ему, к примеру, всю фронтенд-разработку, как считаете?

#рефлексия_о_фронтенде

🤩 CSS Псевдокласс has — вы никогда не захотите верстать по старинке

➡️ https://youtube.com/shorts/EdHXZ-WJ6CI

#фронтенд_лайфхак #фронтенд_новинка

🎉 Настроение подвести итоги года. В цифрах (все же любят цифры?)

Да, выглядит как самохвальство, но почему бы и нет? Может вдохновлю кого 🥰

😊 В начале 2024-го завёл тут, в телеграмме, два канала, основной и чат коммьюнити, и разрослись они до 2000 и 3000 человек соответственно

🤪 На ютуб-канале аудитория выросла с 5000 до 40000 подписчиков

😘 Выпущено 59 полноценных видео и 70 шортсов

✅ Полностью закончен курс по JS из 42 уроков суммарно на почти 13 часов

⚠️ Выпущен 3-й мастер-класс по верстке аж на 12 часов концентрированного конента

🤪 Проведён 1 стрим, где ревьюил код участников платформы PREAX

😑 В связи с «замедлением» ютуба пришлось завести каналы на Дзене и Rutube, аудитории там набралось скромные 500 и 700 человек, а ещё там за полгода монетизации накапали солидные 3000 ₽ (ни в чем себе не отказываю)

🫥 Завёл TikTok, набрал там перезаливами шортсов аж 6000 подписчиков

😐 Провёл на GetMentor 78 частных менторских консультаций

👻 Посетил 14 фронтендерских митапов и конференций, завел множество полезных связей

Из личной жизни

🚙 Отдохнул в Бангкоке, Стамбуле, Дубае

🥰 Сделал предложение девушке на воздушном шаре, как в фильмах, как всегда мечтал

😔 Переехал с любимой кошкой к будущей жене (кстати, она тоже фронтенд-разработчица ☺️) в уютный район Москвы

🎸 Урвал билеты на ближайший концерт любимой группы Linkin Park в Токио, предвкушаю интереснейший отпуск

💬 А какие у вас успехи за этот год? Что интересного произошло? И ставите ли вы ежегодные цели или я один помешан на чеклистах?

🎄 Ну и с наступающим всех вас, дорогие мои зрители и окружающее меня коммьюнити! Спасибо за то, что вы у меня есть ❤️

📝 CSS Контроль висячих строк в тексте — свойство text-wrap pretty

➡️ https://youtube.com/shorts/LlY4XvzqX68

#фронтенд_новинка

🤸 CSS Грид-элемент на все колонки — трюк с grid-column

➡️ https://youtube.com/shorts/SLom4wkFQ7c

#фронтенд_лайфхак

🤪 Как я справляюсь с выгоранием?

За мои 4.5 года работы фронтенд-разработчиком у меня, как у большинства нормальных человеков в этой, да и, уверен, в любой сфере деятельности, случались периодические, пускай даже не полноценные выгорания, но припёки ⛽️ уж точно.

😐 На первой работе уставал от начальства, которое «само знало как лучше» и указывало как мне делать мою фронтендерскую работу.

🥣 На второй работе уставал от пустых обещаний крутых будущих проектов, которые всё так и не появлялись.

🙀 Да даже на этапе обучения я горел тлел от того, что поступающей в мозг информации слишком много и конца и края её было не видно.

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

🤩 Но что самое интересное — со временем я четко распознал сценарий подобных моих выгораний и определил стратегию по восстановлению себя в строй.

На работе — делаю минимум, «лишь бы работало». Вне работы — даю себе волю на всё, ухожу в отрыв. Ну, нет, не в пьянки-гулянки или что похуже, а просто позволяю себе безудержное безделье без угрызений совести. Занимаюсь всем тем, чем не позволяю себе в обычном ритме жизни больше определенного количества часов в неделю. Сутками смотрю сериалы, играю в видеоигры, ем что хочется. Ну вот просто обычные человеческие приземленные хотелки.

🥱 И что по итогу? Спустя неделю-две такого режима жизни я и от него выгораю! Ну невыносимо скучно мне становится. Сериалы сливаются в единый пласт клишированного сюжета. Видеоигры перестают цеплять, начинаю видеть в них лишь репетативность одних и тех же действий. Ну а еда… любимые вкусы перестают быть желанными, когда весь рацион состоит исключительно из них.

Ретроспективно смотрю на это, казалось бы, бесцельно проведенное время и прихожу к осознанию, что я, блин, хочу кайфовать от всех этих вещей, хочу видеть контраст между серой жизнью и её яркими всплесками. Мне нужен дофамин как исключительно дозированная подпитка, а не постоянный корм.

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

❕ А как у вас с этим обстоят дела? Вы целенаправленно избегаете «выгорание»? Или научились с ним бороться? А может подобного с вами не случалось вовсе? Поделитесь в комментариях!

😑 Как скринридер видит ваш сайт?

➡️ https://youtube.com/shorts/E_2wGVZA-kg

🆕 Третий мастер-класс: Вёрстка сайта с нуля • HTML, SCSS, JS практика • Подробное объяснение по шагам • Проект в портфолио

🫡 12 часов концентрированного контента, результат сотни часов моих трудов

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Пошагово профессионально верстаем многостраничный сайт по макету Figma. Разметку пишем по БЭМ методологии. В разработке используем препроцессор стилей Sass (SCSS) и активно применяем адаптивные rem-единицы измерения. Пишем много JavaScript и реализуем такие компоненты как BurgerButton, Tabs, VideoPlayer, ExpandableContent, InputMask и даже непростой кастомный Select.

🧑‍🍳 Каталог со всеми моими рецептами и лайфхаками фронтенд-разработки в формате Shorts

(буду актуализировать списки в этом посте по мере выхода контента)

HTML-теги
• <details>
• <dialog>
• <link>
• <output>
• <search>
• <summary>

HTML-атрибуты
• aria-labelledby
• enterkeyhint
• href="sms:+1234"
• href="#:~:text=lorem"
• inert
• reversed

CSS-свойства
• accent-color
• anchor-name
• appearance
• aspect-ratio
• box-shadow
• block-size
• caret-color
• content
• counter-increment
• counter-reset
• hyphens
• initial-letter
• inline-size
• inset
• line-clamp
• outline
• overscroll-behavior
• position-anchor
• rotate
• scale
• scrollbar-behavior
• scrollbar-color
• scrollbar-gutter
• scrollbar-padding
• scrollbar-width
• scroll-snap-align
• scroll-snap-type
• text-align-last
• text-overflow
• transform
• transition-behavior
• translate
• user-select

CSS связки свойство: значение
• background-attachment: fixed
• content: counter(custom-counter, decimal-leading-zero)
• display: contents
• fill: currentColor
• position: sticky [1]
• position: sticky [2]
• stroke: currentColor
• text-wrap: balance

CSS-псевдоклассы
• :empty
• :focus-visible
• :focus-within
• :is()
• :nth-child(* of selector)
• :nth-last-child()
• :picture-in-picture
• :placeholder-shown
• :user-invalid

CSS-псевдоэлементы:
• ::first-letter
• ::spelling-error
• ::target-text

CSS-функции
• anchor()
• calc(infinity)
• color-mix()
• counter()
• drop-shadow()
• rem()

CSS-директивы
• @media (hover: hover)
• @media (hover: none)
• @media (width <= 768px)
• @starting-style

JavaScript
• console.debug()
• mouseup и click

DevTools
• Break on: subtree modifications
• monitorEvents()
• Performance CSS Selectors