Vowel one

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

Примеры:
vowelOne( "abceios" ) // "1001110"
vowelOne( "aeiou, abc" ) // "1111100100"

👉 @frontendInterview

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

 <h2 id="first-noscript" class="magical" rel="friend">David Walsh</h2>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-noscript), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] {
/* woohoo! */
}
Существует множество вариантов их использования. Примеры можно посмотреть в статье.

👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:

•разработать мессенджер, используя только JavaScript, Typenoscript, CSS и API браузера;
•познакомиться с теорией и отработать её на практике в больших проектах;
•научиться брать ответственность за решения и вкладываться в общий результат;
•самостоятельно декомпозировать задачи и распределять время;
•исследовать смежные сферы программирования, без которых невозможен фронтенд:
•информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.

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

Начать учиться: https://practicum.yandex.ru/middle-frontend

👉 @frontendInterview

BigInt в JavaScript (ES11)

В JavaScript для работы с числами до недавнего времени использовался 64-битный формат IEEE-754, однако данные числа ограничены по длине (2 в степени 53).

Пример:

 let num = Number.MAX_SAFE_INTEGER
 console.log(num) // 9007199254740991
 num + 1 //  9007199254740992
 num + 2 //  9007199254740992 ???

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

1. Передать в число в BigInt конструктор;

2. Дописать n в конце числа;

 typeof 99 // ‘number’
 typeof 99n // ‘bigint’

Решим выше рассмотренный пример с использованием нового типа:
let bigInt = BigIng(num) + BigIng(2)
console.log(bigInt) // 9007199254740993n

👉 @frontendInterview

Привет, это HTML Academy!

Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.

Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.

👉 @frontendInterview

👉 @frontendInterview

​Ссылки против кнопок в современных веб-приложениях

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками.

Кнопки
Могучая кнопка и правда крутая. Вот что она может:

1. Получать фокус с клавиатуры по умолчанию
2. Отправлять данные формы на сервер
3. Очищать форму
4. Блокироваться с помощью атрибута disabled
5. Давать подсказку скринридеру с помощью неявного атрибута role="button"
6. Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить скрипта,кнопка идеальный элемент для:
1. Открывания модального окна
2. Вызова всплывающего меню
3. Переключения интерфейса

Ссылки
Вот несколько базовых возможностей ссылок, или якорей

1. Создавать гипертекст, сеть онлайн-ресурсов
2. Перевести пользователя на новую страницу или окно
3. Изменять URL
4. Вызвать браузерные перерисовку/перезагрузку
5. Переходить по якорям внутри страницы
6. Способны принимать фокус по умолчанию с помощью атрибута href
7. Регистрируют клик с помощью клавиши Enter
8. Не блокируются как кнопки (но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true")

Лично для меня главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственное исключение). Кнопка же переключает что-то в интерфейсе или вызывает новый контент в том же самом контексте.

👉 @frontendInterview

Production Ready GraphQL (2020)

Данная книга содержит полное описании того, что входит в создание GraphQL API: дизайн, архитектура, реализация и даже документации.
Примеры в книге не зависит от языка. Вместо этого они фокусируется на концепциях и шаблонах, которые реализуются независимо от того, как вы создаете сервер GraphQL.

👉 @frontendInterview

Largest Elements

Вам даны два параметра - n (число) и массив чисел. Создайте функцию, которая вернет n самых больших чисел из массива.

Пример:
largest(2, [7,6,5,4,3,2,1])
// => [6,7]

👉 @frontendInterview

Всплытие событий

Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом:
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>

Клик по внутреннему <p> вызовет обработчик onclick:
1. Сначала на самом <p>.
2. Потом на внешнем <div>.
3. Затем на внешнем <form>.
И так далее вверх по цепочке до самого document.

Поэтому если кликнуть на <p>, то мы увидим три оповещения: p → div → form.

Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.

Ключевое слово в этой фразе – «почти».
Например, событие focus не всплывает. Однако, стоит понимать, что это скорее исключение, чем правило.

YaTalks: 3-4 декабря

Уже совсем скоро состоится главная конференция Яндекса для IT-сообщества. Спикеры обсудят интересные проекты и жизнь индустрии в новой реальности.

На фронтенд-треке нас ждут:

🎯Дискуссия «Веб в 2022. Что изменилось?»
🎯 Доклад «Chrome DevTools — спрятанные полезности»
🎯Доклад «Яндекс Маркет, который вы не видите» об интерфейсах для логистов и другие темы.

Участники могут записаться на индивидуальные консультации с экспертами отрасли. Среди них, например, Алёна Батицкая, тимлид команды фронтенда в Дока, и Евгений Кот, director of development в Wrike.

Подробная программа и регистрация

👉 @frontendInterview

Как определить, поддерживается ли CSS свойство в браузере пользователя?

CSS директива @supports помогает разработчикам определять справится ли браузер пользователя с CSS свойством или нет.

Синтаксис директивы @supports такой же, как и у @media запросов:

 @supports(prop:value) {
   /* стили */
 }

Простая проверка свойства

 @supports (display: flex) {
   div { display: flex; }
 }

Ключевое слово not
@supports в паре со словом not осуществляет проверку на отсутствие поддержки какого-либо свойства:
@supports not (display: flex) {
div { float: left; }
}

👉 @frontendInterview

A?.Frontend х Selectel: приглашаем вас в гости frontend-сообщества 💌

Когда: 7 декабря (среда), в 19:00
Где: Санкт-Петербург, ул. Цветочная, д. 19

💡 «Добро пожаловать в Storybook Community»
Доклад Никиты Дукина, Frontend-разработчика в Альфа-Банке. Расскажем об инструменте Storybook.

💡 «Оптимизируем графику для веба like a boss»
Ведущий разработчик сайта в Selectel, Евгений Полосухин поделится секретами создания изображения для веб-приложений.

💡 «Патология вёрстки»
C Николаем Громовым, ведущим разработчиком интерфейсов в ООО «Наука», рассмотрим описание клинической картины и принципов лечения некоторых болезней вёрстки.

Модерирует встречу Ольга Болотова, руководитель направления JavaScript в Альфа-Банке.

Это ещё не все 🎄

🎅🏼 Будем вместе создавать новогоднее настроение, играть в «Тайного Санту».

Необходимо только зарегистрироваться https://alfa-digital-org.timepad.ru/event/2245478/ и для входа в офис захватить с собой паспорт.

Подписывайтесь на сообщество фронтенда: https://news.1rj.ru/str/alfa_frontend