👉 @frontendInterview

Как размыть текст?

Для размытия содержимого элемента, включая текст, применяется стилевое свойство filter с функцией blur(). Внутри функции указываем степень размытия (например, 5px) — чем больше значение, тем сильнее будет размытие.
div { filter: blur(5px); }

Ещё один способ размытия текста — это использование свойства text-shadow, добавляющее к тексту тень. В параметрах свойства можно регулировать степень размытия тени (здесь это третий параметр), добиваясь нужного эффекта.
div { text-shadow: 0 0 5px #000; color: transparent; }
Поскольку тень располагается за текстом, сам текст не меняется при наложении тени и сохраняет свою читаемость. Поэтому текст следует спрятать, задав ему прозрачный цвет через значение transparent.

👉 @frontendInterview

Почему умение дебажить один из самых важных навыков для разработчика

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

Самое важное в решении проблемы или фиксе бага — найти корень. В этой статье описываются виды отладки, с помощью которых можно найти этот корень.

👉 @frontendInterview

А потом он все доделал и закрыл таск, но это уже совсем другая история...

👉 @frontendInterview

toSpliced()

Метод toSpliced() возвращает новый массив, удаляя определённое количество элементов и/или добавляя новые элементы, начиная с указанного индекса в исходном массиве.

Пример
Создадим массив, удаляя из исходного массива 2 элемента, начиная с элемента с индексом 3:
const months = [
'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь'
]
const newMonths = months.toSpliced(3, 2)

console.log(newMonths)
// ['Май', 'Июнь', 'Июль', 'Октябрь']

В отличие от метода splice(), toSpliced() не меняет исходный массив и не возвращает удаляемые элементы:
const numbers = [10, 20, 30, 40]
const newNumbers = numbers.toSpliced(1, 2)
console.log(newNumbers, numbers)
// [10, 40] [10, 20, 30, 40]

// А вот как работает splice()
const deletedNumbers = numbers.splice(1, 2)
console.log(deletedNumbers, numbers)
// [20, 30] [10, 40]

👉 @frontendInterview

Грокаем функциональное программирование

Вам кажется, что функциональное программирование – это нечто сложное, доступное только гуру программирования? Эта книга развенчает миф об элитарности и позволит любому программисту с легкостью разобраться в хитросплетениях кода.

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

👉 @frontendInterview

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 и загрузить сайт на хостинг.

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

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

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

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