🚀 Хотите стать экспертом в Angular? Пройдите тест и узнайте, готовы ли вы к нашему курсу!

Перед тем как погрузиться в мир Angular, проверьте свои знания JavaScript с помощью нашего вступительного теста. Это не только отличный способ оценить ваш уровень, но и первый шаг к освоению одного из самых востребованных фреймворков для веб-разработки. 🌍

Что вас ждёт на курсе Angular Developer?

- Создание SPA приложений с использованием лучших практик.
- Работа с TypeScript для создания чистого и поддерживаемого кода.
- Глубокие знания Angular для реальных проектов.
- Освоение реактивного программирования с помощью RxJS.
- Оптимизация производительности приложений.

👨‍💻 Для кого этот курс?

- JavaScript-разработчики, желающие углубить свои знания и освоить Angular.
- Backend-разработчики, стремящиеся стать Fullstack-разработчиками.
- Начинающие фронтендеры, готовые освоить строгий и структурированный фреймворк.

Что даст вам курс?

- Вы научитесь создавать высококачественные приложения с Angular.
- Освоите современные подходы в разработке с использованием TypeScript и RxJS.
- Станете уверенным в написании масштабируемого и легко поддерживаемого кода.

🔥 Проходите тест и узнайте свой уровень! Он поможет вам понять, насколько готовы к курсу, а также какие темы стоит освежить перед началом обучения.

Тест и подробнее о курсе Angular Developer - https://clck.ru/3N4Z2n

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Erid 2SDnjc5sRWe

Тревожное утро

👉 @frontendInterview

​Настраиваем внешний вид клавиши ввода.

Глобальный атрибут enterkeyhint применяется к элементам формы (например, <input>, <textarea>) или для любых элементов с атрибутом contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре.

Пример

<input type="text" enterkeyhint="search">
<p contenteditable enterkeyhint="enter"></p>

Атрибут enterkeyhint принимает одно из следующих значений:
enter - Значение по умолчанию. Метка будет изменена на текст return или иконку ↵. Означает переход на новую строку.

done - Метка изменится на текст done или иконку ✓. Означает, что больше нечего вводить и виртуальная клавиатура закроется.

go - Метка изменится на текст go или иконку →. Означает переход к следующему целевому объекту введённого текста.

next - Метка изменится на текст next или иконку ⇥. Означает переход к следующему полю ввода.

previous - Метка изменится на текст return или иконку ⇤. Означает переход к предыдущему полю ввода.

search - Метка изменится на текст search или иконку 🔍. Означает переход к результатам поиска.

send - Метка изменится на текст send. Означает отправку текста.

Посмотрите на смартфоне или планшете Демо, чтобы увидеть, как будет изменяться клавиша ввода в каждом из полей:

👉 @frontendInterview

Pearls of Algorithm Engineering (2023)

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

👉 @frontendInterview

Square Every Digit

Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.

👉 @frontendInterview

Сколько есть способов что-то сделать асинхронно?

В JavaScript существует несколько способов выполнения асинхронных операций. Основные из них включают коллбеки (callbacks), промисы (promises) и async/await.

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

function fetchData(callback) {
  setTimeout(() => {
    const data = "some data";
    callback(data);
  }, 1000);
}

fetchData((result) => {
  console.log(result);
});

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

Как используется
Передаем функцию в качестве аргумента и вызываем её, когда данные готовы. Почему так: Это простой способ передать управление после завершения асинхронной операции, но может привести к "аду коллбеков" (callback hell) при множественных вложенных вызовах.

Промисы (Promises)
Промисы были введены для упрощения работы с асинхронным кодом и для решения проблемы вложенности, характерной для коллбеков. Промис представляет собой объект, который может находиться в одном из трёх состояний: ожидание (pending), выполнено (fulfilled) или отклонено (rejected).

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

Почему это нужно
Промисы делают код более читаемым и управляемым, особенно при наличии цепочек асинхронных операций. Как используется: Создаем новый промис и возвращаем его из функции. Затем используем методы then и catch для обработки результата или ошибки. Промисы позволяют избежать вложенности и обеспечивают более линейный и понятный поток выполнения.

async/await
Это синтаксический сахар поверх промисов, который делает код ещё более читаемым и похожим на синхронный.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "some data";
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

Почему это нужно:
async/await упрощает написание и чтение асинхронного кода, устраняя необходимость использования методов then и catch. Как используется: Объявляем функцию с ключевым словом async и используем await для ожидания завершения промиса. Async/await делает асинхронный код более похожим на синхронный, улучшая его читаемость и поддержку.

👉 @frontendInterview

👉 @frontendInterview

Скелетон

Скелетон — это временная «заглушка». Он показывается вместо основного контента страницы на время загрузки данных. Пользователь видит не пустоту, а однотонные блоки, похожие на будущее содержимое: текст, кнопки или картинки. Часто их анимируют, что создаёт эффект загрузки. Это распространённый паттерн в веб-интерфейсах.

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

В рецепте разберём создание анимированного скелетона для карточки статьи.

👉 @frontendInterview

📌 Вам нужно масштабируемое приложение с высокой отказоустойчивостью? Устали от ограничений монолита и хотите перейти на микросервисную архитектуру?

Приглашаем на открытый урок «Создаём масштабируемый микросервис с Nest.js и Kubernetes».

🗓 24 июля в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer».

На открытом уроке мы покажем, как с помощью Nest.js и Kubernetes создавать быстрые и масштабируемые микросервисы. Мы научим вас правильно развертывать приложение, использовать контейнеризацию и обеспечить отказоустойчивость.

🎯Изучите, как организовать Dev/Stage/Prod окружения с Kubernetes, как эффективно использовать HPA для масштабирования и как обеспечить стабильность с помощью readiness и liveness проб. Погрузитесь в практику и разверните свой первый микросервис!

🔗 Ссылка на регистрацию: https://clck.ru/3N8tuP

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
erid 2SDnjeEbUXp

Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда?

В 1985 году учёный Питер Нур будто зрил в будущее, написав свою работу под названием «Programming as Theory Building», которая сегодня стала весьма актуальной. Мы всё чаще видим, как начинающие разработчики бездумно принимают сгенерированный ИИ код, который толком не понимают, а кодовые базы разрастаются лишёнными теоретических основ реализациями. В свете всего этого чётко вырисовывается основная идея Нура: «программа — это не её исходный код».

👉 @frontendInterview

Доверяй, но проверяй

👉 @frontendInterview

​env()

Если «бровки» и «чёлки» устройства заслоняют контент — env() придёт на помощь.

Функция env() используется для вставки значения переменной среды, определенной юзер-агентом, в ваш CSS. Это почти то же самое, что и var() в CSS, но env() переменные определяются агентом пользователя, не самим пользователем. Эти переменные имеют глобальную область действия.

🕵️Агентами пользователя часто называют браузеры.

Свойство уже поддерживается во всех современных браузерах. А если нужно добавить поддержку для старых версий, можно использовать плагин PostCSS Preset Env – он преобразует современные CSS-функции в полифилы.

Пример

.element {
  margin-bottom: env(safe-area-inset-bottom, 16px);
}

Второе значение в скобках — запасное. Если переменная не определена, значение будет равно 16px.

Переменные safe-area-inset-* изначально появились в iOS, чтобы разработчики могли располагать контент в безопасной зоне — там, где его точно не обрежет экран. Сейчас они полезны и на других устройствах с необычными формами экрана.

Частая проблема, которую решает env() — это всплывающие уведомления (пуши), которые могут перекрывать элементы интерфейса. Если задавать фиксированные блоки с учётом env(), они останутся в видимой области и не будут перекрыты.

env() можно применять и в PWA. Такие приложения используют пространство окна по максимуму, включая область, где обычно находится заголовок окна. Переменные titlebar-area-* позволяют размещать элементы прямо в этой зоне, не мешая системным кнопкам.

А переменные keyboard-inset-* сообщают, где на экране появилась виртуальная клавиатура. С их помощью можно узнать отступы от краёв и адаптировать интерфейс так, чтобы элементы не прятались за клавиатуру.

👉 @frontendInterview

Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)

Вы хотите писать красивый, структурированный и удобный JavaScript, применяя современные паттерны проектирования? Вам нужен чистый, эффективный, управляемый код? Хотите быть в курсе последних передовых практик? Если да, то это обновленное второе издание книги - идеальное место для начала работы.

👉 @frontendInterview

Highest and Lowest

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

Примеры:

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

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

Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.

Решает проблему "работает у меня, но не у тебя"
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.

Автоматизирует развертывание
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.

Легко масштабировать
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).

Разделяет зависимости
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.

Работает везде (Windows, Mac, Linux, серверы, облако)
Контейнер можно запустить где угодно, где установлен Docker.

Как работает Docker?

Создаем Dockerfile (инструкция для сборки контейнера)
Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

👉 @frontendInterview

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js".

Запись по ссылке: https://clck.ru/3NDEru

Что будет на вебинаре?

- Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы.
- Почему поверхностные знания API тормозят рост и усложняют задачи.
- Что нужно знать о Node.js и серверной части, даже если вы не fullstack.
- Как уверенное понимание архитектуры влияет на производительность и автономность.
- Почему знание бэкенда усиливает вашу позицию на проекте и на рынке.

Что узнают участники?

- Как работает связка клиент–сервер: от запроса до ответа.
- Какие ошибки делают фронтендеры при работе с API — и как их избегать.
- Как знание Node.js помогает даже тем, кто пишет только клиентскую часть.
- Почему современный разработчик не может быть “только фронтом”.
- Как это знание влияет на скорость разработки.

Не забудьте записаться на урок и получить запись пред. вебинара: https://clck.ru/3NDEru

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Erid 2SDnjcxcqRG