validate PIN code

Банкоматы позволяют использовать 4-6-значные PIN-коды, а PIN-коды не могут содержать ничего, кроме 4-х цифр или 6-ти цифр.
Если функция передана корректной PIN-строке, верните true, иначе верните false.

Пример:
"1234" --> true
"12345" --> false
"a234" --> false

👉 @frontendInterview

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

SVG-спрайт — это файл, получаемый в результате объединения нескольких файлов SVG. Файл-спрайт используется для сокращения количества запросов к сети — вместо загрузки нескольких файлов, грузится только один. Также для уменьшении размеров и читаемости HTML-кода при многократном использовании векторной графики в разметке.

Как создать SVG-спрайт
Предположим что уже имеется подготовленный набор отдельных SVG-иконок. Перейдём к формированию SVG-спрайта.

Для начала создадим отдельный файл с расширением .svg. Внутрь созданного файла добавим обёртку для SVG-файла состоящую из тега <svg> и атрибута xmlns, указывающего используемый диалект XML.

 <svg xmlns="https://www.w3.org/2000/svg">
  ...
 </svg>

Далее каждая SVG-иконка помещается внутрь тега <symbol>, который предоставляет возможность группировать элементы. При этом данные объекты не отображаются до тех пор пока на них не будут ссылаться при помощи тега <use>.

Код ниже сокращён для удобства чтения.

 <svg xmlns="https://www.w3.org/2000/svg">
  ...
  <symbol id="social-facebook" viewBox="0 0 6 12">
    <path d="M1.09903 2.72854C1.09903 ..."/>
  </symbol>

  <symbol id="social-twitter" viewBox="0 0 16 11">
    <path d="M13.3758 4.62011C14.2231 ..."/>
  </symbol>
  ...
 </svg>

Каждый элемент <symbol> содержит атрибут id с уникальным идентификатором, который будет использоваться для ссылки на иконку в HTML. Также, каждая иконка содержит атрибут viewBox, который определяет размеры окна отображения. Управляя данным атрибутом, можно указать в какой части холста находится конкретная иконка. Это позволяет использовать в спрайте иконки разных размеров и масштабировать их.

Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега <svg> тег <use> с обязательным атрибутов href. Данный атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.

 <svg class="social-icon" viewBox="0 0 24 24" width="24" height="24">
   <use href="sprite.svg#social-vk" x="0" y="0"></use>
 </svg>

Полученные таким образом элементы можно стилизовать с помощью CSS, как и обычные HTML-элементы.

👉 @frontendInterview

Драг-н-дроп для загрузки файлов

Задача
Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Текущие возможности JavaScript позволяют нам выбирать нужный файл простым его перетаскиванием в установленную область страницы браузера.

Широкую поддержку событий перетаскивания обеспечивают современные десктопные браузеры, среди мобильных браузеров такая поддержка пока низкая. Поэтому, если необходимо реализовать передачу файла на сервер также и для пользователей мобильных устройств, стоит добавлять возможность выбрать файл с использованием элемента <input type="file">.

В статье будет рассматриваться вариант выбора файла с использованием перетаскивания.

Загрузка файла на сервер состоит из трёх частей:
1. Выбор пользователем файла на своём устройстве.
2. Проверка параметров обработки файла и формирование данных с обращением к серверу.
3. Обработка данных на сервере и отправка ответа клиенту.

👉 @frontendInterview

О найме. Взгляд оттуда

В этой статье автор проанализировал процессы найма в США (FAANG) и в России, Указал на преимущества и недостатки. Разобрал все этапы и предоставил советы как для собеседующих, так и для соискателей. Прочитать эту статью будет полезно для каждого, кто собирается проходить собеседования в IT.

👉 @frontendInterview

Наглядная разница между джунами и сеньорами

👉 @frontendInterview

Чистый Agile. Основы гибкости

Автор: Роберт Мартин

Agile — это всего лишь небольшая подборка методов и инструментов, помогающая небольшим командам программистов управлять небольшими проектами,… но приводящая к большим результатам, потому что каждый крупный проект состоит из огромного количества кирпичиков. Пять десятков лет работы с проектами всех мыслимых видов и размеров позволяют Дяде Бобу показать, как на самом деле должен работать Agile. Если вы хотите понять преимущества Agile, не ищите лёгких путей — нужно правильно применять Agile. «Чистый Agile» расскажет, как это делать разработчикам, тестировщикам, руководителям, менеджерам проектов и клиентам.

👉 @frontendInterview

Reverse every other word in the string

Переверните все четные слова в заданной строке и верните исправленную строку. Отбросьте пробелы в начале и конце строки, при этом оставьте ровно один пробел между каждым словом. Знаки препинания должны рассматриваться как часть слова.

Пример:
reverse("Reverse this string, please!") =>
"Reverse siht string, !esaelp"

👉 @frontendInterview

Array.of()

Это статический метод, который создаёт массив из переданных ему аргументов. Array.of() и конструктор массива Array() работают практически одинаково. Разница возникает, если передавать этим функциям один аргумент, причём этот аргумент должен быть числом. В этом случае для конструктора Array() аргумент будет считаться длинной массива, а для Array.of() — первым элементом массива.

Пример
Array.of('🐱', 0b001, document.createElement('div')); // ['🐱', 1, div]
Array.of(3); // [3]
Array(2) // [empty × 2] — массив из двух пустых элементов

// Для строк всё работает одинаково
Array.of('котик') // ['котик']
Array('котик') // ['котик']

Array.of(10.5) // [10.5]
Array(10.5) // RangeError: Invalid array length

👉 @frontendInterview

Скажите что-то на карьерном

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

Реклама АО «Тинькофф Банк» ИНН 7710140679

👉 @frontendInterview

Если ты ждал знак, то это он!
🔹Перед тобой дверь в IT от YKul🔹

За ней тебя ждут:
📌 обучение с опытными разработчиками в комфортном режиме
📌 резюме с проектами, которые ты выполнишь во время обучения
📌 общение с ментором при любых возникающих вопросах
📌 быстрая обратная связь
📌 помощь в трудоустройстве

Кому подойдет обучение:
✅ новичкам, которые хотят сменить работу
✅ всем, кто уже начал обучение IT и хочет его продолжить
✅ программистам, которые хотят выучить новый язык
✅ студентам – после обучения будет возможность пройти практику на проекте, получить документальное подтверждение и кейс в портфолио

Убедись, что тебе подходит формат и содержание занятий: первая неделя обучения – ❗️бесплатно❗️

https://clck.ru/39VQsj

Реклама: ИП Кулагин Андрей Николаевич, ИНН: 740411652688

Мгновенная валидация форм

Кто из нас не знаком с той неприятной ситуацией, когда усердно заполняешь форму, вводишь данные, а потом, с надеждой нажимая на кнопку «Отправить», обнаруживаешь, что что-то пошло не так и все усилия пропали даром? Для этого есть решение — мгновенная валидация при помощи JavaScript!

Отличный пользовательский опыт — ключ к успеху. Валидация форм с помощью HTML не может предоставить того уровня UX (пользовательского опыта), который требуется стандартами веб-разработки. Ему на помощь приходит валидация через JavaScript. Она обеспечивает мгновенную обратную связь при заполнении формы и аккуратно подсказывает, что нужно исправить прежде чем форма отправится.

В этой статье представлено готовое решение и пошаговый разбор того, как оно работает.

👉 @frontendInterview

Как создать монорепозиторий с несколькими сервисами, используя Lerna и Yarn?

Для разработчиков построение масштабируемых и поддерживаемых приложений может быть значительным вызовом, особенно при работе с большими кодовыми базами и несколькими сервисами. К счастью, использование подхода монорепозитория в сочетании с мощными инструментами, такими как NX, Lerna и Yarn, может обеспечить упрощенный процесс разработки, который повышает общность кода и возможность повторного использования.

Эта статья нацелена на помощь разработчикам в настройке монорепозитория с использованием NX, Lerna и Yarn. Она включает подробную информацию о начальной настройке, структуре каталогов, управлении зависимостями, тестировании и развёртывании.

👉 @frontendInterview

Работаешь все праздники в надежде на премию
Начальство:

👉 @frontendInterview

​Реализуйте полифил для Promise.allSettled

Для начала вспомним работу оригинального Promise.allSettled.

Он принимает коллекцию промисов, начинает одновременно их выполнять и возвращает массив результатов исполнения полученных промисов. Объект каждого результата содержит свойство status. Если status имеет значение fulfilled (выполнено), то объект будет содержать свойство value. Если status имеет значение rejected (отклонено), то объект будет содержать свойство reason. Свойства value или reason будут содержать значение, с которым был выполнен или отклонён промис.

Решение
// На вход приходит массив промисов
Promise.allSettled = (promises) => {
// Запустим все промисы с помощью .all
return Promise.all(
promises.map((promise) =>
Promise.resolve(promise)
// Если промис завершается успешно
.then((value) => ({ status: "fulfilled", value }))
// Если промис был отклонён
.catch((e) => ({ status: "rejected", reason: e }))
)
)
}

👉 @frontendInterview