Code Ready | Frontend
20.1K subscribers
688 photos
307 videos
17 files
456 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

Заявления РКН: № 5383712961
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Сниппеты для JS, HTML и CSS

Плагин HTML/CSS/JavaScript Snippets для VSCode позволяет ускорить процесс написания кода, предоставляя готовые шаблоны и фрагменты кода

📣 Code Ready | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍5👎1
👩‍💻 Выпадающее меню на CSS

Привет! Сегодня мы создадим многоуровневое выпадающее меню с помощью CSS. Это удобный инструмент для структурирования навигации на сайте, особенно если у вас много категорий и подкатегорий.

Основное свойство, которое мы будем использовать, — position, чтобы позиционировать подменю относительно родительского элемента.


🔥 — если было полезно

📣 Code Ready | #гайд #css
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥64👍14🤝5
This media is not supported in your browser
VIEW IN TELEGRAM
Frontend Practice — реальные интерфейсы и макеты для создания сложных веб-приложений и практики адаптивной вёрстки.

📌 Ссылочка: frontendpractice.com

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍7
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Атрибут for

Он связывает элемент <label> с соответствующим полем <input>, позволяя пользователям кликать по тексту метки для выбора или фокуса на связанном элементе управления.

Значение атрибута for должно совпадать с id связанного элемента, что улучшает доступность и удобство взаимодействия с формами.


📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Полезные горячие клавиши VSCode

Ctrl + Shift + K — Удаляет текущую строку целиком.

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.

📣 Code Ready | #клавиши
Please open Telegram to view this post
VIEW IN TELEGRAM
👍47🔥17
👩‍💻 Перенос текста на новую строку

Свойство word-break определяет, как будет переноситься на новую строку текст при достижении края родительского контейнера.

Возможные значения:

normal — по умолчанию, длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы.

break-all — при достижении границы, перенос строки будет вставлен между любыми двумя символами.

keep-all — перенос строки не будет использован в тексте на китайском, японском или корейском языках.


📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥10😁2
👩‍💻 Создание и использование кастомных событий

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

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

📣 Code Ready | #гайд #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥8
📱 Шпаргалка CSS

В этой шпаргалке собраны все основные CSS-свойства, которые точно понадобятся всем разработчикам.


⬇️ Скачать полную версию

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥11
This media is not supported in your browser
VIEW IN TELEGRAM
Webcode,tools — это онлайн-инструмент для генерации и настройки различных HTML, CSS и JS кода, который помогает разработчикам быстро создавать веб-элементы и видеть результаты в реальном времени.

Ссылочка: https://webcode.tools/

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥5😁1
😁116👍16🔥16
👩‍💻 Мемоизация: оптимизируем функции через кэширование

1. Простая функция мемоизации — Функция memoize создаёт кэш для хранения результатов.
function memoize(fn) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key]) return cache[key];
return cache[key] = fn(...args);
};
}


2. Используем мемоизацию с функцией факториала — Теперь мемоизируем вычисление факториала, чтобы избежать повторных вычислений.
const factorial = memoize(function(n) {
return n <= 1 ? 1 : n * factorial(n - 1);
});
console.log(factorial(5)); // Первый вызов рассчитывает
console.log(factorial(5)); // Берется из кэша


3. Для тяжёлых функций
— Мемоизация особенно эффективна для сложных задач, например, при работе с большими данными или многократными запросами.
const heavyCalc = memoize((x, y) => {
// Симуляция сложных вычислений
for (let i = 0; i < 1e6; i++) {}
return x * y;
});
console.log(heavyCalc(3, 4)); // Медленно
console.log(heavyCalc(3, 4)); // Быстро, взято из кэша


📣 Code Ready | #техсобес
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥9🤝3
👍9🔥3
Что будет в консоли?
Anonymous Quiz
11%
A
10%
B
68%
C
10%
D
👍19🔥7