COFFEE

Вам дана строка, которая может содержать слово coffee. Некоторые буквы слова могут быть заглавными. Сделайте все буквы этого слова заглавными и верните строку.

Пример:
Input: "Coffee! Buy me a COFFEE!"
Output: "COFFEE! Buy me a COFFEE!"

👉 @frontendInterview

​Для чего используется WebSocket? В чем принцип его работы?

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.

Чтобы открыть веб-сокет-соединение, нам нужно создать объект new WebSocket, указав в url-адресе специальный протокол ws:
let socket = new WebSocket("ws://javascript.info");


Как только объект WebSocket создан, мы должны слушать его события. Их всего 4:
- open – соединение установлено,
- message – получены данные,
- error – ошибка,
- close – соединение закрыто.

Вот пример:

  let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
  
  socket.onopen = function(e) {
    alert("[open] Соединение установлено");
    alert("Отправляем данные на сервер");
    socket.send("Меня зовут Джон");
  };
  
  socket.onmessage = function(event) {
    alert(`[message] Данные получены с сервера: ${event.data}`);
  };
  
  socket.onclose = function(event) {
    if (event.wasClean) {
      alert(`[close] Соединение закрыто чисто, код=${event.code} причина=${event.reason}`);
    } else {
      // например, сервер убил процесс или сеть недоступна
      // обычно в этом случае event.code 1006
      alert('[close] Соединение прервано');
    }
  };
  
  socket.onerror = function(error) {
    alert(`[error] ${error.message}`);
  };

Вызов socket.send(body) принимает body в виде строки или любом бинарном формате включая Blob, ArrayBuffer и другие. Дополнительных настроек не требуется, просто отправляем в любом формате. При получении данных, текст всегда поступает в виде строки. А для бинарных данных мы можем выбрать один из двух форматов: Blob или ArrayBuffer.

👉 @frontendInterview

👉 @frontendInterview

Бесплатный практический вебинар: Профессия «Frontend-разработчик».

⏰ Когда: 25 июля в 19:00 по мск.

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

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

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

С помощью 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