👩‍💻 Вопрос с собеседования

Как организовать обработку ошибок в JavaScript?

Ответ:

1. Использование try...catch: Позволяет ловить и обрабатывать ошибки в блоке кода.

try {
  throw new Error('Что-то пошло не так');
} catch (error) {
  console.log(error.message); // Что-то пошло не так
}

2. Обработка ошибок в промисах: С помощью метода catch.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Обработка ошибки
fetchData().catch(error => {
  console.log(error.message); // Ошибка при получении данных
});

3. Обработка ошибок в async/await: Используется try...catch внутри асинхронных функций.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Асинхронная функция с await
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error.message); // Ошибка при получении данных
  }
}
getData();

➡️ @code_ready | #техсобес

✅ Готовый макет 2rism

Оставляю уже готовый макет с кодом:
Github (без адаптива) 😸

• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет

Ссылка на макет — Figma 👩‍💻

➡️ @code_ready | #github

html-css-javascript-projects — это репозиторий представляет собой сборник более 100 проектов для веб-разработки, включая готовые коды для создания лендингов, пользовательских интерфейсов и веб-приложений.

⛓ Ссылочка: https://github.com/solygambas/html-css-javascript-projects?tab=readme-ov-file

➡️ @code_ready | #ресурсы

✅ Интерактивный конвертор валют

Это веб-приложение — современный конвертер валют, оно обеспечивает быструю и удобную конвертацию суммы из одной валюты в другую с помощью простого интерфейса

😸 Ссылочка на репозиторий:

https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/Currency%20Converter

➡️ @code_ready | #github

👨‍💻 Форма с капчей

Реализовано на HTML, CSS и JS

⛓ Ссылочка: https://codepen.io/Frontend-Portal/pen/oNRbjXG

➡️ @code_ready | #кодпен

👩‍💻 Последние 2 фильтра для картинок

Мы с вами уже рассмотрели 11 атрибутов свойства filter в css. Эти 2 - последние в этой рубрике, в следующем посте всё объединю одной шпаргалкой)

• Сепия — эффект, достигаемый при использовании оттенков коричневого цвета. Атрибут sepia() преобразует входное изображение в сепию. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью соответствует сепии).

• Атрибут drop-shadow() используется не только в свойстве filter. Создает эффект тени к входному изображению. В примере мы используем первое число 20px — для смещения тени по оси X. Второе число 20px — для смещения тени по оси Y. 12px — радиус размытия, и последние это цвет тени

➡️ @code_ready | #свойство #css

➡️ @code_ready | #мем

👩‍💻 Вопрос с собеседования

Как использовать модули в JavaScript?

Ответ:

1. Экспортирование модулей: Позволяет делать функции, объекты или переменные доступными для других файлов. Используется export для экспорта нескольких элементов из модуля.

// utils.js
export function add(a, b) {
  return a + b;
}
export const pi = 3.14159;

2. Импортирование модулей: Позволяет использовать ранее экспортированные элементы. Используется import для импорта отдельных элементов из модуля.

// main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

3. Экспорт по умолчанию: Используется для экспорта одного основного элемента из модуля. Это может быть функция, класс или объект. Используется export default для этого.

// math.js
export default function multiply(a, b) {
  return a * b;
}

4. Импорт по умолчанию: Осуществляется без фигурных скобок. Можно дать импортируемому элементу любое имя.

// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

5. Динамический импорт: Позволяет загружать модули асинхронно, что полезно для загрузки модулей по требованию. Используется import() для динамического импорта.

// main.js
async function loadModule() {
  const { add } = await import('./utils.js');
  console.log(add(5, 10)); // 15
}
loadModule();

6. Импорт всего содержимого модуля:
Иногда нужно импортировать все содержимое модуля под одним именем. Используется import * as для этого.

// main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

➡️ @code_ready | #техсобес

Всем привет 😕

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

Поэтому мне нужно найти контентщика. Который сможет делать точно такой же контент, как и в этом канале. Знания по html, css и особенно Javascript. Кому интересно отпишите в лс @energy_it.

А также если вам нравится этот канал, и хотите чтобы тут часто выходили качественный посты, поставьте просто реакцию 👍🔥. Спасибо ❤️

👩‍💻 Как работает JSON.stringify() в JS?

Функция JSON.stringify: Преобразует JavaScript-объект или значения в строку JSON (текст, форматированный в соответствии с текущим стандартом)

Аргументы:

• Значение (value) — Это основной аргумент, который указывает, что нужно преобразовать.

• Заменитель (replacer) необязательный — Функция или массив для фильтрации свойств.

• Пробелы (space) необязательный — Число или строка для форматирования с отступами.

➡️ @code_ready | #функция #js

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

⛓ Ссылочка: https://docs.emmet.io/cheat-sheet/

➡️ @code_ready | #ресурсы

👩‍💻 Делаем анимированный счётчик кликов на JS

Сегодня написал простое веб-приложение Click Counter: при каждом нажатии на кнопку счетчик увеличивается, и число кликов плавно анимируется. Интерфейс современный и минималистичный.

Готовый код оставляю ниже, а Css стили для него, кину
в комментарии, т.к его не мало ⬇️

<div class="container">
  <h1>Click Counter</h1>
  <button id="clickButton">Click me!</button>
  <p>Clicks: <span id="clickCount">0</span></p>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const clickButton = document.getElementById('clickButton');
  const clickCount = document.getElementById('clickCount');
  let count = 0;
  clickButton.addEventListener('click', () => {
    count++;
    clickCount.textContent = count;
    clickCount.style.transform = 'scale(1.5)';
    setTimeout(() => {
      clickCount.style.transform = 'scale(1)';
    }, 200);});});

➡️ @code_ready | #обучение #css #js

👩‍💻 Вопрос с собеседования

Что такое замыкание (closure) в JavaScript и как оно работает?

Ответ:

Замыкание — это комбинация функции, которая сохраняет доступ к переменным из своего внешнего окружения, даже после завершения выполнения этой внешней функции.

1️⃣ Запоминание контекста:
Когда функция создается, она запоминает все переменные из своей области видимости. Эти переменные доступны функции даже после завершения работы внешней функции.

2️⃣ Приватные переменные:
Замыкания позволяют создавать приватные переменные, которые нельзя изменить или увидеть снаружи функции. Это делает код более безопасным и организованным.

3️⃣ Постоянные данные:
Замыкания позволяют функциям сохранять состояние между вызовами. Например, счетчики или кэшированные значения.

4️⃣ Асинхронные операции:
Замыкания часто используются в асинхронном коде, чтобы сохранить доступ к переменным из внешнего контекста при выполнении асинхронных задач, таких как таймеры или запросы.

Замыкание используется для:

• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии

➡️ @code_ready | #собеседование #js

👩‍💻 Настраиваемый перенос строки

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

Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную

Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.

➡️ @code_ready | #свойство #css

👨‍💻 Всплывающее уведомление с индикатором
выполнения

Реализовано на HTML, CSS и JS

⛓ Ссылочка: https://codepen.io/code_ready/pen/yLdeqVo

➡️ @code_ready | #кодпен

➡️ @code_ready | #мем

👩‍💻 Как работает window,open в JS?

Функция window,open: метод объекта window позволяет открыть ссылки в новом, всплывающем окне или новой вкладке (в зависимости от введённого параметра)

Она имеет три варианта использования, давайте их разберём:

• windows,open() — Позволяет открыть пустое окно без URL. Первая строка на нашем фото.

• window,open("", "", "width=300,height=200") — Если после свойства указать название окна и размеры, то кнопка откроет попап окно с размерами указанными здесь же.

• window,open('https://gmail.com', '_parent') — Позволяет открыть необходимое окно прямо на этой странице (она является родительской).

➡️ @code_ready | #функция #js