Тёмный
Александр Ламков - Friendly Frontend
Александр Ламков - Friendly Frontend
Александр Ламков - Friendly Frontend
Подписаться
{ Frontend-разработка } с нуля простыми словами

👋 Привет! Меня зовут Александр Ламков, работаю фронтенд-инженером в компании VK.

📌 «Friendly Frontend» - образовательный проект, в рамках которого я делюсь знаниями со всеми желающими, с теми, кто только начинает свой путь во фронтенд-разработке и с теми, кто хочет прокачать свои навыки в этом ремесле.

👨‍💻 Мне действительно есть, что вам рассказать, ибо сам я прошел этот путь относительно недавно. На данный момент имею около четырех лет коммерческого опыта, самоучка. Прошел путь от trainee в безызвестной «галере» со штатом в 15 человек, где верстал простенькие лендинги и интернет-магазины, до фронтенд-инженера в крупнейшей РФ компании, где занимаюсь вопросами архитектуры фронтенд-структур внутренних проектов и их оптимизацией. Между этими занятостями также был опыт работы на фрилансе, в стартапе (3-10 чел.) и в средней компании (50-100 чел.). Имею опыт в проведении оффлайн-митапов, лекций, преподавании и наставничестве.
Комментарии
@biscvie
@biscvie 38 минут назад
Спасибо!
@PavelChupryna
@PavelChupryna 2 часа назад
Подскажите, видел как кто то копирует классы c html в scss c помошью csstractor, и они у него вставляются с вложенностью, а у меня нет. Как повторить трюк?
@AleksanderLamkov
@AleksanderLamkov 2 часа назад
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
@ilyapopov_music
@ilyapopov_music 2 часа назад
Все прекрасно объясняешь, но я не знаю почему все читают хэйт. Хэйт (hate) по-английски - это ненавидеть, а хайт (height) - высота) все-таки новички тоже запоминают, а это неправильно)
@AleksanderLamkov
@AleksanderLamkov 2 часа назад
Начиная с какого-то видео я целенаправленно заставлял себя говорить правильно это слово 😅
@user-ms8wz6bc5e
@user-ms8wz6bc5e 12 часов назад
Млин ваще запутался, такое чувство, что теги div, section, article, nav взаимозаменяемы и похожи по смыслу между собой...
@AleksanderLamkov
@AleksanderLamkov 12 часов назад
Визуально они одинаковы, это правда. Но семантически (по смыслу для поисковиков и скринридеров) они совершенно разные.
@AleksanderLamkov
@AleksanderLamkov 12 часов назад
По-началу вообще не сильно запаривайся по поводу правильности использования подобных тегов. С опытом поймешь, что где лучше подходит.
@user-ms8wz6bc5e
@user-ms8wz6bc5e 12 часов назад
Почему у вас в теге <а>, поставлен слэш? <a href="/">
@AleksanderLamkov
@AleksanderLamkov 12 часов назад
Это ссылка на главную страницу текущего сайта. Я ставлю это всем ссылкам по умолчанию в качестве заглушки.
@mashkanasevere7391
@mashkanasevere7391 13 часов назад
Александр, спасибо! сейчас изучаю -как раз актуально и все по-делу!! Только по-умолчанию get метод
@PavelChupryna
@PavelChupryna 15 часов назад
Может я что то не понял, но это видео не находится ни в одном плейлисте, что усложняет его поиск... Видео по css функциям и переменным тоже не находятся в плейлисте по css.
@AleksanderLamkov
@AleksanderLamkov 14 часов назад
Добавил в отдельный плейлист "CSS": CSS ru-vid.com/group/PL0MUAHwery4ojFkcq8PD-6ylUalMGqXfs В текущий (CSS курс) добавить не могу, т. к. тема этого видео не связана с курсом по CSS напрямую. В любом случае, спасибо за информацию!
@SQ1FU
@SQ1FU 15 часов назад
У меня не получается перестроить сетку в одну колонку, как быть? Я прописываю все тоже самое, что и в видео(буквально копирую с гитхаба), а оно не работает( .motivation-card, .motivation-item:nth-child(even) .motivation-card { flex-direction: column-reverse; }
@AleksanderLamkov
@AleksanderLamkov 14 часов назад
Надо посмотреть по DevTools. Выдели нужный тебе элемент и посмотри вкладку Styles. Если не разберешься, напиши в чат: t.me/friendlyFrontendChat
@PavelChupryna
@PavelChupryna 15 часов назад
Спасибо за работу!
@evgeniy3370
@evgeniy3370 17 часов назад
не сомотрел ещё мастер класс, но интересует вопрос, нужно ли использовать импорты в стилях, я ещё в 22году слышал такое : Это не просто запутывает, но и нарушает независимость блоков. Make sanse ?
@AleksanderLamkov
@AleksanderLamkov 15 часов назад
Если не дублировать импорты, проблем не будет. Ну а если посмотреть итоговый css-файл мастер-класса, то там всё будет ок. Но признаю, Sass-импорты - deprecated, стоит заменит их на use. Просто в этом проекте и с import всё работает хорошо.
@qbite7564
@qbite7564 17 часов назад
А что за прога для скринов у тебя на маке?
@AleksanderLamkov
@AleksanderLamkov 15 часов назад
Teampaper Snap
@love_renata_russia
@love_renata_russia День назад
Здравствуйте, Александр! Можно ли прикреплять ссылку на конспект по лекции или просто текстовую расшифровку? На слух тяжело воспринимаю информацию, текстом легче
@AleksanderLamkov
@AleksanderLamkov День назад
Привет. Увы, мои сценарии не предназначены для конспекта. Там много рабочих заметок. Форматировать под статьи пока некогда.
@love_renata_russia
@love_renata_russia 21 час назад
@@AleksanderLamkov поняла 👌
@stevejobs333
@stevejobs333 День назад
каждое видео от вас удивляет
@hyperpocket.
@hyperpocket. День назад
Не желательное использование приёмчика на 9:20, но в React распространяется?
@AleksanderLamkov
@AleksanderLamkov День назад
В условном рендеринге в JSX-разметке использовать && - это нормально. Иначе пришлось бы с тернарным оператором творить подобное: {something ? <Component/> : null} Главное не заменять в обычном JS-коде инструкцию if, это ухудшает читаемость кода.
@asifabbasov3801
@asifabbasov3801 День назад
Почему то у меня last-child не работает на теге <div>, не работают на нем стили CSS 😮‍💨
@AleksanderLamkov
@AleksanderLamkov День назад
Надо посмотреть по DevTools вкладку Elements. Выдели нужный тебе элемент и посмотри панель Styles.
@patupin
@patupin День назад
музыка конечно заставляет не что то изучать а идти умереть
@AleksanderLamkov
@AleksanderLamkov День назад
С 15 видео этого курса музыки уже нет. И во всех последующих видео на канале тоже. Сразу понял, что так себе была идея 🙃
@daniil2704
@daniil2704 2 дня назад
А не проще убрать лишний параграф?
@AleksanderLamkov
@AleksanderLamkov 2 дня назад
Нет. Мы не всегда это контролируем. Если контент наполняется менеджером через wysywig-редактор cms, например.
@AleksanderLamkov
@AleksanderLamkov 2 дня назад
Нет. Мы не всегда это контролируем. Если контент наполняется менеджером через wysywig-редактор cms, например.
@artcoolmadnessgames6923
@artcoolmadnessgames6923 2 дня назад
Или у юзера лыжи не едут или он плохо оттталкивается
@vitaliy5224
@vitaliy5224 2 дня назад
Круто🔥неужели что-то полезное по css
@sell_channel_tg
@sell_channel_tg 2 дня назад
Красава, информативно
@user-cp1tw2uy5j
@user-cp1tw2uy5j 2 дня назад
Александр, уточните, пожалуйста, в чем преимущество применения псевдокласса для стрелки 14:14, можно ли было просто вставить svg ? Спасибо за ваши уроки!
@AleksanderLamkov
@AleksanderLamkov 2 дня назад
Подобные сугубо декоративные элементы по-возможности стоит размещать в CSS. Если же нас понадобилась бы анимация этой стрелочки или перекраска её внутренностей, то пришлось бы писать её в разметке через <svg>, но такой необходимости у нас не было.
@user-cp1tw2uy5j
@user-cp1tw2uy5j День назад
@@AleksanderLamkov спасибо)
@vladislavvladykin6286
@vladislavvladykin6286 2 дня назад
Огромное спасибо!)
@Ruslan_Emurlaev
@Ruslan_Emurlaev 2 дня назад
Спасибо за видео!
@Ruslan_Emurlaev
@Ruslan_Emurlaev 2 дня назад
Спасибо!
@Ruslan_Emurlaev
@Ruslan_Emurlaev 3 дня назад
Спасибо за видео!
@Ruslan_Emurlaev
@Ruslan_Emurlaev 3 дня назад
Спасибо за видео!
@Ruslan_Emurlaev
@Ruslan_Emurlaev 3 дня назад
Спасибо за урок!
@LibertarianSpeaker
@LibertarianSpeaker 3 дня назад
такая хорошая подача и контент, но музыка... она меня усыпляет прям
@AleksanderLamkov
@AleksanderLamkov 3 дня назад
Музыки не будет примерно с 14-15 урока этого курса и во всех последующих видео на канале. А ведь поначалу мне казалась эта идея хорошей 😅
@litvdan6028
@litvdan6028 3 дня назад
Вчера узнал про это свойство у ChatGPT, но там немного лучше была реализация - при помощи not к псеводоклассу empty, что отображает стили только для заполненных элементов. Не нужно писать отдельный стиль.
@stevejobs333
@stevejobs333 3 дня назад
прикольно, спасибо
@user-lp5yk3gu4y
@user-lp5yk3gu4y 3 дня назад
Дошла до этой темы, так сильно плаваю, очень расстраиваюсь, у всех так в начале ? Или это я просто не способная ? 😢😢 спасибо за видео ! 🔥
@AleksanderLamkov
@AleksanderLamkov 3 дня назад
Препроцессор стилей - это инструмент автоматизации. Лично я начал его использовать спустя месяца 3 плотной работы с голым CSS. Sass решил мои боли, помог сэкономить время на рутинные задачи. Если вам пока сложно разобраться с этим инструментом, то значит вам пока рано с ним взаимодействовать. Наловчитесь с классическим CSS, познайте все его недостатки, помучайтесь, а затем уже осознанно возвращаетесь к Sass.
@user-lp5yk3gu4y
@user-lp5yk3gu4y 3 дня назад
Спасибо 🙏
@evgeniy3370
@evgeniy3370 3 дня назад
А что на счёт организации свойств для каждого элемента ? Порядок написания этих свойств. От кого-то слышал что стартует всё с order, далее position, потом margin,display,padding,with,higth,background и т.д. Я так понимаю это от команды зависит ?
@AleksanderLamkov
@AleksanderLamkov 3 дня назад
Лично я придерживаюсь этим правилам: netology-university.bitbucket.io/codestyle/css/#order А вообще в рабочих проектах нередко используют плагин stylelint для автосортировки свойств.
@yebfudeu3313
@yebfudeu3313 3 дня назад
Ого, не думал что такое есть, я просто всем задавал бордеры топ и боттом с помощь нф чайлд
@user-dr4nt7ng4j
@user-dr4nt7ng4j 3 дня назад
Это проблема js кода
@AleksanderLamkov
@AleksanderLamkov 3 дня назад
При чем тут JavaScript?
@Atractiondj
@Atractiondj 4 дня назад
я хоть знаю это все, но в отличае, а кучи каналов про код из ТГ тут хотя бы говорят не о мамонтовском CSS и JS
@abricoshka
@abricoshka 4 дня назад
overflow: hidden не вариант?
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
Не всегда. Надо лечить симптомы, а не заметать последствия под ковер.
@lysak_coding
@lysak_coding 4 дня назад
У кого была такая проблема?
@Atractiondj
@Atractiondj 4 дня назад
с вордпресс такой иногда возникает в статьях
@yebfudeu3313
@yebfudeu3313 3 дня назад
​@@Atractiondjможешь описать что такое ВордПресс и что она пишет, а то я не до конца понимаю как работает это, она бэк тоже делает для сайта?
@Atractiondj
@Atractiondj 3 дня назад
@@yebfudeu3313 это бесплатная CMS и там есть иногда глюк у статей выдает пустой P, ну или другой способ получить такое это пустое динамическое поле будет с просто тег P без контента
@user-di3qe7xj9q
@user-di3qe7xj9q 4 дня назад
Библиотеки, type script кажутся лишними
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
Но в требованиях к вакансиям всё же часто встречаются.
@MrFarek12
@MrFarek12 4 дня назад
Надо ли учить базу ноды для перехода с реакта в нексту?И какие концепты 100% надо знать в реакте и что помимо них надо знать для некста?
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
Про то, что нужно знать из мира реакта, описывал в этом видео: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1WRJKgwlX9w.html Ну а про NodeJS и NextJS - это мало связанные вещи, как мне кажется. Всё же некст просто фреймворк-надстройка над реактом, хоть и большая.
@user-bi2ud1bs3c
@user-bi2ud1bs3c 4 дня назад
Я просто удалял весь дом через редактор элемента и так смотрел что именно ломается, годный лайфхак)
@humptydumptycongrats
@humptydumptycongrats 4 дня назад
спасибо, теперь после этого гайда у меня появился парень
@user-eb5zg9qp4l
@user-eb5zg9qp4l 4 дня назад
Делаешь очень полезный контент! Даже спустя годы могу подчерпнуть что то новое для себя.
@user-rb6yp8hf5z
@user-rb6yp8hf5z 4 дня назад
ТОП!!! Спасибо, помогло
@TheMrLordicus
@TheMrLordicus 4 дня назад
Да ну нафиг, первый шортс у меня в ленте с годным лайфхаком за последний год
@Flyntik474
@Flyntik474 4 дня назад
Ты рассказываешь больше чем остальные !!! Спасибо тебе !
@user-ms8wz6bc5e
@user-ms8wz6bc5e 4 дня назад
Как вы думаете через сколько лет нейросеть "уничтожит" профессию фронтендера?
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
Уничтожит? Вряд ли. Просто порог входа станет выше, а нейросети будут обязательным инструментом любого разработчика.
@hyperpocket.
@hyperpocket. 4 дня назад
Почему ты назвал 2 специальных типа(object и null), а не просто ссылочный тип object и остальное примитивное?
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
В некоторых источниках трактуют, что null - специальный отдельный тип, несмотря на то, что typeof null вернет 'object'.
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
@ggggsdffdkj2460
@ggggsdffdkj2460 4 дня назад
слишком сложно говоришь
@AleksanderLamkov
@AleksanderLamkov 4 дня назад
Привет! Что именно показалось сложным?