Что делать когда взяли на первую работу

Некоторое время назад у меня была статья о том как искать работу, какие шаги предпринимать и тд. Теперь решил поделиться некоторыми советами и опытом о том, что делать, когда вас уже взяли на вашу первую работу в IT. В связи с тем, что я фронтендер, то некоторые примеры будут основываться из этой области, в частности языки, фреймворки и т. д.

👉 @frontendInterview

Открыт новый навык. Применяем с понедельника.

👉 @frontendInterview

​Что такое интерполяция?

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

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

Как это используется?
Для примера возьмём JavaScript и его шаблонные строки. Шаблонные строки заключаются в обратные кавычки (``) и позволяют включать выражения внутри них с помощью конструкции ${}.

Пример кода:

const name = 'Иван';
const age = 30;
const greeting = `Привет, меня зовут ${name} и мне ${age} лет.`;

console.log(greeting); // Вывод: Привет, меня зовут Иван и мне 30 лет.

В данном примере переменные name и age интерполируются в строку greeting.

Как это работает и почему это удобно?
- Читаемость: Шаблонные строки делают код более читабельным и понятным, так как видна вся строка целиком, без необходимости объединения отдельных частей.

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

- Избежание ошибок: Снижает вероятность ошибок, которые могут возникнуть при ручной конкатенации строк.

Шаблонные строки также поддерживают выполнение выражений внутри интерполяции:

const a = 5;
const b = 10;
const result = Сумма ${a} и ${b} равна ${a + b}.;

console.log(result); // Вывод: Сумма 5 и 10 равна 15.

👉 @frontendInterview

Simplified JavaScript for Very Important Programmers: The Fast Track to Mastering Essential JavaScript Concepts

Это практическое руководство для всех, кто хочет освоить основные разделы JavaScript, не тратя время на запутанные объяснения и не пытаясь понять смысл неоднозначных слов. Книга наполнена реальными примерами и четким, лаконичным языком, который разбивает технические концепции на легкие для понимания фрагменты.

👉 @frontendInterview

Partial Word Searching

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

Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.

Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».

Пример:

 wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]

👉 @frontendInterview

Является ли drag and drop частью спецификации?

Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.

Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

Какие события есть в Drag and Drop?
Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).

Где используется Drag and Drop?
- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.

Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.

👉 @frontendInterview

👉 @frontendInterview

Правильно ли заполнено поле ввода с цифрами? Проверяем прямо в браузере.

Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range.

- :in-range для полей, в которых введённое значение попадает в диапазон от min до max;
- :out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max.

Пример

<input class="with-range" type="number" min="10" max="20" step="1">

.with-range {
  border: 1px solid black;
}

.with-range:in-range {
  border-color: green;
  background-color: rgb(0 255 0 / 20%);
}

.with-range:out-of-range {
  border-color: red;
  background-color: rgb(255 0 0 / 20%);
}

👉 @frontendInterview

🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище!

На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API.

Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов!

⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3tv4/?erid=2W5zFGKafuz 

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Интернет мельчает. К чему привели тенденции Web дизайна

Открывая очередной сайт с компьютера, я вижу одну и ту же картину. На странице так много «воздуха» в виде отступов, что дышать просто невозможно, это просто перебор.

Половина пространства не занята абсолютно ничем. И это на любом разрешении, выше мобилок / планшетов. Основной блок кажется сплюснутым по центру, сжатым. Контенту просто визуально тесно на странице, ощущается как будто уменьшили масштаб. Но поверьте, это обычный 100% масштаб, обычное разрешение (1920х1080 для ПК и 2048х1330 для ноутбука).

👉 @frontendInterview

Как владельцы Макбуков в модной кофейне видят твой Lenovo ThinkPad

👉 @frontendInterview

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

В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).

Через тэг <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

Через CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

Используя fetch() – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

Используя XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

На <canvas> – если нужно редактировать изображение
Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

👉 @frontendInterview

Full-Stack React Projects

React в сочетании с проверенными в отрасли серверными технологиями, такими как Node, Express и MongoDB, позволяет разрабатывать и развертывать надежные полнофункциональные веб-приложения. Данное обновленное второе издание фокусируется на последних версиях и соглашениях технологий в этом стеке, а также на их новых фичах, таких как хуки в React и async / await в JavaScript. В книге также раскрываются сложные темы, такие как создание веб-приложения для учебных занятий и визуализация данных в приложении для отслеживания расходов.

👉 @frontendInterview

Simple CSS selector comparison

Создайте функцию, которая сравнивает переданные CSS селекторы и возвращает самый специфичный.

Примеры:

 "body p",  "div"     --->  return "body p"
 ".class",  "#id"     --->  return "#id"
 "div.big", ".small"  --->  return "div.big"
 ".big",    ".small"  --->  return ".small" (because it appears later)

👉 @frontendInterview

Зачем нужен eslint?

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

Проблемы без ESLint
- Разные стили написания кода
- Пропущенные точки с запятой или лишние пробелы
- Неиспользуемые переменные
- Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

**Решение с ESLint:**
- Автоматически находит ошибки и предупреждения
- Подсказывает лучшие практики
- Поддерживает кастомные правила
- Работает в IDE и CI/CD (автоматическая проверка)

Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

Как установить и настроить ESLint?
Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

👉 @frontendInterview