​Как изменить вид маркера списка?

С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li

ul {
    list-style-type: square; /* Квадратные маркеры */
}

Использование псевдоэлемента ::before
Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ

li {
    list-style-type: none; /* Убираем маркеры у списка */
}
li::before {
    content: "►"; /* Маркер списка */
    padding-right: 0.5em; /* Расстояние от маркера до текста */
}

Использование псевдоэлемента ::marker
Псевдоэлемент ::marker позволяет управлять настройками маркера списка и работает схожим с ::before образом. При этом убирать исходные маркеры, как это делалось в предыдущем примере, необходимости нет.
Для ::marker не работают свойства margin и padding, поэтому для изменения расстояния от маркера до текста свойство padding-left добавляется к селектору li

li {
    padding-left: 0.5em; /* Расстояние от маркера до текста */
}
li::marker {
    content: "►"; /* Маркер списка */
}

👉 @frontendInterview

Где учиться IT: 70% опрошенных проходили онлайн-курсы

Эта статья про самое важное — обучение. Как вообще IT-специалисты относятся к онлайн-образованию и в чем разница с полноценным обучением в университете. Авторы статьи провели опрос. Ожидания от ответов были разные, но вот, что они выяснили:

- 70% опрошенных IT-специалистов, которые сейчас работают, проходили онлайн-курсы — кто-то из них получал полноценную профессию, а кто-то прокачивал навыки;
- половина из них относятся к такому формату обучения положительно.

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

👉 @frontendInterview

Ставь лайк, если получал чашку/ручку/блокнотик от компании.

👉 @frontendInterview

Что такое Веб-компоненты и какие технологии в них используются?

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

Веб-компоненты включают четыре технологии, каждая из которых может использоваться отдельно от других:
- Custom Elements — API для создания собственных HTML элементов.
- HTML Templates — тег template позволяет реализовывать изолированные DOM-элементы.
- Shadow DOM — изолирует DOM и стили в разных элементах.
- HTML Imports — импорт HTML документов.

👉 @frontendInterview

Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Что такое статический метод класса (static)?

Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.

 class Repo {
    static getName() {
      return "Repo name is modern-js-cheatsheet"
    }
  }

  // нам не нужно создавать объект класса Repo
  console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"

  let r = new Repo();
  console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией

Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.

👉 @frontendInterview

Что такое статический метод класса (static)?

Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.

 class Repo {
    static getName() {
      return "Repo name is modern-js-cheatsheet"
    }
  }

  // нам не нужно создавать объект класса Repo
  console.log(Repo.getName()) // "Repo name is modern-js-cheatsheet"

  let r = new Repo();
  console.log(r.getName()) // необработанная ошибка TypeError: r.getName не является функцией

Cтатические методы вызываются через имя класса. Вызывать статические методы через имя объекта запрещено. Статические методы часто используются для создания вспомогательных функций приложения.

👉 @frontendInterview

Портфолио, которое хотят видеть рекрутеры

Не тратьте время на пет-проекты. Сделайте проект на микросервисной структуре на Kafka и заберите свой оффер в крупную IT-компанию. Все потому что проект не должен быть стандартным crud-приложением, а иметь в основе то, чего ждет каждый работодатель – микросервисы.

Ребята из FAANG School подготовили полезную лекцию, где расскажут, как собрать идеальный проект для портфолио:

– что ждет работодатель и какие темы выбрать для проекта
– какой стек технологий самый востребованный
– как перейти от древнего монолита к современным микросервисам
– когда и зачем добавлять Kafka в проект-портфолио

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

Переходите и забирайте Большую Шпаргалку по Kafka с подробной информацией об основных концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.

👉 @frontendInterview

Успейте заскочить на фронтенд-практику к фулстак-разработчику. Скоро начало.

https://itlogia.ru/intensive/front?utm_source=tg&utm_medium=group&utm_campaign=fr_2907&utm_content=230724_seniorFront&erid=LjN8Juyoz

Как сделать отступ первой строки абзаца?

Отступ первой строки называется также «красная строка» и применяется для выделения отдельных абзацев и быстрого к ним перехода.
Для создания красной строки предназначено стилевое свойство text-indent, значение которого управляет величиной отступа. Причём значение может быть положительным, и тогда первая строка сдвигается вправо

В качестве значения text-indent можно использовать пиксели, em, rem и другие единицы размера CSS. Само свойство пишется для селектора P, тем самым все абзацы будут иметь указанный отступ первой строки.

p {
  text-indent: 15px;
}

В примере на картинке применяется единица ch, которая определяет ширину символа 0. Для моноширинного шрифта (вроде Courier), где все буквы имеют одинаковую ширину, 2ch показывает что первая строка абзаца сдвигается на две буквы вправо.

👉 @frontendInterview

Как вернуть энергию и интерес

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

👉 @frontendInterview

Офер в Яндекс для опытных фронтендеров за два дня

24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться.

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

Узнать подробности и зарегистрироваться.

Реклама. ООО "Яндекс". ИНН 7736207543

Самая сложная часть собеседования

👉 @frontendInterview

Что такое Компонент высшего порядка (Higher-Order Component, HOC)?

Говоря просто, компонент высшего порядка — это функция, которая принимает компонент и возвращает новый компонент. HOC часто встречаются в сторонних библиотеках, например connect в Redux и createFragmentContainer в Relay.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Давайте реализуем функцию withSubscription — она будет создавать компоненты и подписывать их на обновления DataSource (наподобие CommentList и BlogPost). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

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

Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC оборачивает оригинальный компонент в контейнер посредством композиции. HOC является чистой функцией без побочных эффектов. Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп data. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся.

👉 @frontendInterview

Как устроен JavaScript

Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функции, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.

👉 @frontendInterview