✅ Создание списка дел

Приложение To-Do List позволяет создавать и управлять списком задач. Пользователь может добавить новую задачу, а также удалить уже существующую.

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

https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/To%20Do%20List

➡️ @code_ready | #github

✅ Создание CSS-шаблона для html

eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.

➡️ @code_ready | #плагин

✅ Дополнительные фильтры для картинок

Мы уже рассмотрели многие фильтры для картинок свойства filter. Но остались ещё некоторые:

• Атрибут invert() инвертирует образцы во входном изображении. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью инвертирует).

• Атрибут saturate() насыщает изображение. Принимает от 0% (ненасыщенно) до 100% (оставляет входные данные неизменными). Но также он может принимать значения свыше 100%, обеспечивая сверхнасыщенные результаты.

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

✅ Вопрос с собеседования

Какая разница между function declaration и function expression в JS?

Ответ:

Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.

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

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

⛓ Ссылочка: https://overapi.com/

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

👨‍💻 Аккордеон (FAQ)

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

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

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

✅ Эффект свечения

Для его создания долго объяснять ничего не придется, главное понимать как работает Css свойство text-shadow, весь остальной код максимально простой.

В примере на картинке, мы используем этот код:

text-shadow: 0px 0px 14px rgba(255,255,255,0.7);

• Первые 2 параметра (0px, 0px) отвечают за то, на сколько тень будет смещаться по горизонтали и по вертикале.

• Третий параметр (14px) это радиус размытия тени.

• И последний это цвет тени (255,255,255), в нашем случае он белый. Последние цифры в rgba (0.7) это значение альфа-канала, которое определяет прозрачность цвета (значение от 0 до 1).

➡️ @code_ready | #css

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

Как организовать обработку ошибок в 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 | #техсобес