Оставьте сомнения и сделайте уверенный шаг к карьере веб-разработчика на мини-курсе Skillbox. Научитесь зарабатывать на фрилансе! Вы с нуля создадите 3 проекта — сайт, приложение и сервис — и изучите основы самых востребованных технологий.

Регистрация: https://epic.st/I68Wze

На мини-курсе вы научитесь:
— создавать веб-страницы, используя язык разметки HTML и технологию CSS;
— реализовывать серверную часть (backend) веб-приложений на языке PHP;
— работать с базой данных MySQL при помощи языка запросов SQL;
— создавать приложения на языке программирования JavaScript;
— автоматически получать информацию с других сайтов;
— размещать сайты в интернете.

📍Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах.

Каждый участник получит подборку полезных материалов, а также подарки от Skillbox!

🌟Полезные знания — на расстоянии клика. Учитесь где угодно и когда угодно!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Дайте определение функции высшего порядка.

Функция высшего порядка — это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными, и/или возвращает функцию в качестве результата. Классическим примером является метод map, который принимает массив и функцию в качестве аргументов. Затем map использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JS являются filter и reduce.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

В чём разница между классом в ES6 и функцией-конструктором в ES5?

Основное отличие в конструкторе возникает при использовании наследования. Если мы хотим создать класс Student (который будет являться подклассом класса Person) и добавить поле studentId, то в дополнение к вышеописанному мы должны сделать следующее:

// ES5 функция-конструктор

function Student(name, studentId) {
// Вызов конструктора суперкласса для инициализации производных от суперкласса членов.

Person.call(this, name);

// Инициализация собственных членов подкласса.

this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// ES6 класс

class Student extends Person {
constructor (name, studentId) {
super(name);
this.studentId = studentId;
}
}

Наследование в синтаксисе ES5 является намного более многословным, а в ES6 более понятное и усваиваемое.

👉 @frontendInterview

Изучаем vi и Vim. Не просто редакторы, 8-е издание

Среди текстовых редакторов, используемых программистами, самыми важными является vi и его вариации. В обновленном издании пользователи Unix и Linux изучат основы редактирования текста как в vi, так и в Vim (vi improved), прежде чем перейти к более продвинутым инструментам в каждой из программ. Авторы описывают основные новейшие версии Vim.

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

👉 @frontendInterview

Самый высокий и самый низкий

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

Примеры:

 highAndLow("1 2 3 4 5");           // return "5 1"
 highAndLow("1 2 -3 4 5");         // return "5 -3"
 highAndLow("1 9 3 4 -5");        // return "9 -5"

👉 @frontendInterview

for...of

Инструкция for...of выполняет цикл обхода перечисляемых свойств итерируемого объекта.
Итерируемый объект можно воспринимать как коллекцию элементов. К итерируемым объектам относятся: Array, String, Map, Set, TypedArray, а также массивоподобные объекты такие как объект arguments и DOM-коллекции.
В каждой итерации цикла выполняются инструкции, которые могут ссылаться на значение текущего элемента коллекции.

Пример
Выводим форматированное представление для элементов объекта Map:
const skills = new Map()

skills.set(1, 'JS')
skills.set(2, 'CSS')
skills.set(3, 'PHP')

for (let value of skills) {
console.log(`${value[0]}.`, value[1])
}
// 1. JS
// 2. CSS
// 3. PHP

👉 @frontendInterview

👉 @frontendInterview

​forced-colors

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает режим принудительных цветов. Одна из его реализаций — режим высокой контрастности в Windows.

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

Когда браузер узнаёт о выборе режима принудительных цветов, он ограничивает цветовую палитру до небольшого набора цветов. С помощью forced-colors можно гибче настраивать поддержку этого режима на сайте.

Пример
<button class="button button-aqua">
<svg
xmlns="https://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="button-icon"
>
<path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/>
<path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/>
<path d="M8.65 22c.21-.66.45-1.32.57-2"/>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"/>
<path d="M2 16h.01"/>
<path d="M21.8 16c.2-2 .131-5.354 0-6"/>
<path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/>
</svg>
<span class="visually-hidden">
Зайти по отпечатку пальца
</span>
</button>

@media (forced-colors: active) {
.button-icon {
stroke: buttonText;
}
}

Если посмотрите демку в режиме принудительных цветов без директивы и с ней, в первом случае иконка с отпечатком пальца останется чёрной (#000000), а во втором — перекрасится в белый цвет как у кнопки.

👉 @frontendInterview

👉 @frontendInterview

​Какими способами можно визуально скрыть элемент в CSS?

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

1. display: none;
- Свойство display: none; полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице.

2. visibility: hidden;
- Свойство visibility: hidden; скрывает элемент, но все равно оставляет его в потоке документа, так что место на странице будет занято.

3. opacity: 0;
- Установка opacity: 0; делает элемент полностью прозрачным, но он остается в потоке и может влиять на макет страницы.

4. position: absolute; left: -9999px;
- Присвоение элементу position: absolute; left: -9999px; перемещает его за пределы видимой области экрана, сохраняя доступность для скринридеров.

5. clip-path: inset(100%); opacity: 0;
- Этот метод использует clip-path: inset(100%); opacity: 0; для скрытия элемента за пределами видимой области.

6. width: 0; height: 0; overflow: hidden;
- Установка width: 0; height: 0; overflow: hidden; может быть использована для скрытия содержимого элемента.

Каждый из этих методов имеет свои особенности и может применяться в зависимости от требуемого поведения элемента на странице.

👉 @frontendInterview

Программируй & типизируй

Причиной многих программных ошибок становится несоответствие типов данных. Сильная система типов позволяет избежать целого класса ошибок и обеспечить целостность данных в рамках всего приложения. Разработчик, научившись мастерски использовать типы в повседневной практике, будет создавать более качественный код, а также сэкономит время, которое потребовалось бы для выискивания каверзных ошибок, связанных с данными.

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

👉 @frontendInterview