Обложка канала

Frontend Головного Мозга

Настоящий клондайк для frontend-разработчиков.

  • Frontend Головного Мозга

    👨🏻‍💻 Объясните, что такое z-index и как формируется контекст наложения. Любой элемент в HTML документе может быть либло на переднем, либо на заднем плане. Если свойства z-index и позиционирование не заданы явно, то порядок наложения равен порядку следования элементов в HTML. Если позиционирование элементов (и их детей) указано явно, то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. Если задан z-index. Во-первых, z-index учитывается только на явно позиционированных элементах. Если попытаться установить z-index на непозиционированный элемент, то ничего не произойдет. Во-вторых, значения z-index могут создавать контекст наложения. Контекст наложения Элементы с общими родителями, перемещающиеся на передний или задний план вместе, известны как контекст наложения. Контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе все дочерние элементы также попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону. Новый контекст может быть сформирован в следующих случаях: Если элемент — корневой элемент документа Если элемент позиционирован не статически и его значение z-index не равно auto. Если элемент имеет прозрачность менее 1. Порядок наложения: Background и border элемента. Позиционированные элементы и его дети с z-index < 0. Элементы блочного уровня в нормальном потоке, то есть у которых position = static. Плавающие(float) элементы. inline-элементы. Элементы с z-index = 0 или auto. Элементы со свойством opacity < 1. Frontend Головного Мозга
  • Frontend Головного Мозга

    Курсы бесплатно, то есть даром Без лишних слов: в Архиватор залили более 10 террабайт курсов. Среди школ: • Скилы (конечно же) • Гикбрейнс (есть пара новинок) • Скилфектори (даже то, чего нигде не было) • Яндекс Практикум ("крутая защита" говорили они) Не теряй возможности, обучайся бесплатно: Архиватор
  • Frontend Головного Мозга

    🤖 Изоморфные React-приложения с React.js , Next.js и TRPC. Фуллстек разработка с SSR никогда не была такой простой и доступной! 🔵14 августа в 20:00 мск открытый урок онлайн курса «React.js Developer» от OTUS. На этом вебинаре мы: - научимся бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью - на примере разберем настройку сборки, процесс разработки и развертывания приложения - получим удобный набор для старта разработки любого веб-приложения на современном стеке! 🟠Это отличная возможность перенять опыт преподавателя и посмотреть на процесс обучения изнутри. Оплата курса возможна любым удобным для вас способом. ➡️ Для участия в вебинаре зарегистрируйтесь: https://otus.pw/OFKq/ Нативная интеграция. Информация о продукте www.otus.ru
  • Реклама

  • Frontend Головного Мозга

    Multi Colored Text with CSS

    Design from: https://in.pinterest.com/pin/680184349975292472/...

    CodePen
  • Frontend Головного Мозга

    Программировали, программировали и переросли свои задачи? Работайте над масштабными ИТ-проектами в Тинькофф. Здесь тимлид хороший и задачи интересные. А работать можно прямо там, где живете: у Тинькофф есть ИТ-хабы в 25 городах России, в Беларуси, Армении и Казахстане. Вакансии тут: https://v.tinkoff.ru/it_pro_tinkoff
  • Frontend Головного Мозга

    ⁉️ Присматриваетесь к Flutter? 🚀 Открыть для себя мир разработки красивых и высокопроизводительных приложения для Android и iOS поможет онлайн-курс «Flutter Mobile Developer» от OTUS! 💎 Благодаря единому коду, богатому набору готовых компонентов и высокой производительности, переход на Flutter упрощает и ускоряет процесс разработки и позволяет охватывать большую аудиторию пользователей. 🦾 За 4 месяца на живых вебинарах с практикующими разработчиками вы овладеете языком Dart, погрузитесь в устройство Flutter, освоите передовые библиотеки и фреймворки и научитесь воплощать потрясающие анимации. 🔥 За время обучения вы пополните портфолио своим проектом на Flutter и сможете показывать его при трудоустройстве. 👉 Оставьте заявку на курс по ссылке - https://otus.pw/L2tOm/ 💵 Приобрести курс можно любым удобным способом. Нативная интеграция информация о продукте www.otus.ru
  • Frontend Головного Мозга

    При применении этого свойства происходит следующее: Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам. Frontend Головного Мозга
  • Frontend Головного Мозга

    📊 Высокая производительность, обработка больших объемов данных, универсальность и гибкость — и это далеко не все, что предоставляет Spark дата-инженеру. 🚀 Хотите стать экспертом в обработке и анализе больших объемов данных? Тогда онлайн-курс «Spark Developer» от OTUS именно то, что вам нужно! 💻 Через 4 месяца вы сможете: — Собирать готовые проекты для использования приложения на Scala — Освоите методы оптимизации приложений Spark — Использовать open source Spark для ML — Писать приложения для потоковой обработки данных на open source Spark — Настраивать мониторинг и логирование для Spark-приложений 💣 А самое главное — в рамках выпускного проекта вы создадите свою собственную ETL-систему на основе Hadoop. Вы примените полученные знания и навыки для разработки масштабируемого решения, способного обрабатывать большие объемы данных. 🔥 Оставьте заявку на курс по ссылке - https://otus.pw/srD2/ Нативная интеграция информация о продукте www.otus.ru
  • Frontend Головного Мозга

    Наша рекомендация на остаток лета: научитесь хакингу. Тот, кто разбирается в Kali linux — сможет что угодно и заработает состояние. А если вы хотите разобраться, в информационной безопасности и хакинге — читайте канал: @linuxkalii Там просто и доступно объясняют: как взломать беспроводные сети или любые аккаунты, почему не нужно использовать PowerShell и как обезопасить себя в вебе, чтобы не стать жертвой взлома. Подписывайтесь, сделайте гигантские интеллектуальный подарок себе: @linuxkalii
  • Frontend Головного Мозга

    Sunrise over still lake

    _Created for the [February 2021 CodePen Challenge](https://codepen.io/challenges/2021/February)_...

    CodePen
  • Frontend Головного Мозга

    Сброс (reset) сбрасывает все стили элементов. Normalize приводит стили к единому виду во всех браузерах. Я бы выбрал Normalize из-за кроссбраузерности. Frontend Головного Мозга
  • Frontend Головного Мозга

    Руководитель группы фронтенд-разработки IT-инфраструктуры Яндекс #Москва #гибрид #TeamLead Мы создаём и поддерживаем продукты, которые позволяют сотрудникам Яндекса общаться с IT- и HR-отделами и помогают сконцентрироваться на непосредственных рабочих задачах, не отвлекаясь на бытовые. Отвечаем за внутренний и внешний портал Service Desk, вендинговые аппараты для получения компьютерных аксессуаров, внутренние чат-боты, электронные очереди для сервисных подразделений и многое другое. Мы ищем руководителя команды, который поможет нам управлять группой и процессами фронтенд-разработки IТ-инфраструктуры, запускать новые продукты для тысяч сотрудников Яндекса и совершенствовать существующие. Если вы любите автоматизировать работу и решать сложные задачи, готовы отвечать за команду, изучать и внедрять самые последние технологии, вам у нас точно понравится. Подробнее о вакансии и отклики: https://goo.su/VRadqo Связаться с рекрутером: @alfed28
  • Frontend Головного Мозга

  • Frontend Головного Мозга

    🔥Тест по React JS от OTUS🔥 — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 🚀ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁Пройдете успешно тест, получите доступ к открытым урокам курса. Хотите посмотреть как проходит обучение? Приходите на открытый урок курса. 01.08 - регистрация на открытый урок "Тема SSR и серверные компоненты. Новый подход к организации фронтенда" https://otus.pw/X7Bf/ Нативная интеграция. Информация о продукте www.otus.ru
  • Frontend Головного Мозга

    Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/frontend_mind 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
  • Реклама

  • Frontend Головного Мозга

    Fluid text hover

    WebGL text effect using OGL https://github.com/oframe/ogl Background picture by Vinicius Amano https://unsplash.com/photos/f9oQZOk9vnk...

    CodePen
  • Frontend Головного Мозга

    SPB Frontend х X5 Tech meetup Митап для разработчиков в центре Санкт-Петербурга состоится уже послезавтра! В этом году партнёром мероприятия выступает X5 Tech. В программе: 📣 4 спикера и несколько важных и полезных тем: как создать мобильное приложение за короткий срок, как ускорить фронтенд, что включает в себя выполнение запроса пользователя - от ввода в адресную строку до картинки на экране 🗣 Обмен опытом 🔥 Афтепати Участие очное и онлайн. Регистрация и подробности по ссылке 📆 19 июля, старт в 19:00 📍Особняк «Пальма», пер. Пирогова, 18
  • Frontend Головного Мозга

    В следующем списке типы селекторов расположены по возрастанию специфичности: селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before). селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover) селекторы идентификаторов (например, #example). Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют) Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей. Расчёт специфичности тег и псевдоэлемент имеют специфичность 0001 класс, псевдокласс, атрибут - 0010 id имеет специфичность 0100 инлайновый стиль имеет приоритет 1000 Frontend Головного Мозга