scrollIntoView

Метод scrollIntoView позволяет программно прокрутить окно до определённого элемента вне зависимости от положения элемента в окне.

let element = document.querySelector("#about") // в element должен быть любой DOM-элемент на странице
element.scrollIntoView()

У scrollIntoView может быть аргумент типа boolean:
- Если указать true, то скролл будет перемещён чтобы верхняя граница элемента совпала с верхней границе окна.
- Если указать false, то скролл остановится так, чтобы нижняя граница элемента была вровень с нижней границей окна.

А ещё в scrollIntoView() можно передать объект с опциями скролла, где:
- behavior отвечает за анимацию прокрутки. Принимает smooth, чтобы было плавно, по умолчанию резкое auto;
- block за вертикальное выравнивание. Принимает start, center, end и nearest;
- inline за горизонтальное выравнивание. Принимает то же, что и block.

👉 @frontendInterview

TypeScript. Подробное Руководство (4.9 beta)

TypeScript — это язык программирования со статической типизацией, позиционирующий себя как язык, расширяющий возможности jаvascript. Typescript код компилируется в jаvascript код, который можно запускать как на клиентской стороне (браузер), так и на стороне сервера (Node.js). Мультиплатформенный компилятор TypeScript отличается высокой скоростью компиляции и публикуется под лицензией Apache, а в его создании принимают участие разработчики со всего мира, что привело к традиции выпускать новую версию каждые два месяца. Несмотря на такую периодичность, версии долгое время сохраняют совместимость, а по истечению долгого времени устаревшее поведение остается доступным при активизации специальных флагов компилятора.

👉 @frontendInterview

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