Привет! В этом гайде создаём UI-компонент, который позволяет редактировать текст не открывая отдельные формы — просто кликом по элементу.
Ключевые моменты:
• HTML: один элемент, автоматически переходящий в режим редактирования.
• CSS: два визуальных состояния — отображение и ввод — с тенью, скруглениями и мягкой цветовой палитрой.
• JS: обработка Enter/Escape, аккуратное восстановление DOM-структуры.
Такой элемент подходит для админок, дашбордов, списков задач, inline-настроек, динамических панелей и любых UI, где важно редактирование "по месту" без перегрузки интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥9👍7🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeSnap — расширение, которое делает аккуратные, читаемые скриншоты кода прямо из VS Code. Выделяете нужные строки и получаете чистое изображение с подсветкой синтаксиса, сглаженными шрифтами.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥8🤝8❤1
👍16❤9🔥7
Прозрачный основной текст с контуром, а два псевдослоя дублируют надпись и смещаются в разные стороны. При наведении слои расходятся, создавая 3D-смещение в стиле глич-дизайна.
Как работает:
• Прозрачный основной текст оставляет только контур;
• ::before и ::after выводят копию строки поверх него;
• При hover слои уходят в противоположные направления, формируя глубину;
• Всё построено на transform и text-stroke.
Минимальный код, но эффект отлично выделяет заголовки, hero-блоки и промо-элементы.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤14🔥9🤝2
Например,
<head> содержит метаданные страницы, теги вроде <div> и <span> используются для структурирования разметки, а <h1>–<h6> — для иерархии заголовков.На картинке — компактная шпаргалка с базовыми HTML-тегами: структура документа, текстовая разметка, списки, таблицы, формы и основные события форм.
Сохрани, чтобы не забыть!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥9❤6🤝2
Универсальное чтение файлов: текст, JSON и бинарные данные!
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
Теперь можно читать файл как текст:
Читаем как
Читаем картинку в виде
Читаем бинарные данные:
🔥 Одна функция заменяет несколько обработчиков чтения файлов.
📣 Code Ready | #совет
Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.
Можно сделать универсальный ридер:
const readFile = (file, as = 'text') =>
new Promise(r => {
const fr = new FileReader();
fr.onload = () => r(fr.result);
fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
});
Теперь можно читать файл как текст:
const txt = await readFile(file, 'text');
Читаем как
JSON:const obj = JSON.parse(await readFile(file, 'text'));
Читаем картинку в виде
base64:const base64 = await readFile(file, 'dataURL');
Читаем бинарные данные:
const buf = await readFile(file, 'arrayBuffer');
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝16❤8🔥6👍1
В этой шпаргалке собраны основные методы и свойства Mutation Observer API для отслеживания структурных и атрибутных изменений DOM. Здесь отражены инструменты, позволяющие наблюдать за добавлением и удалением узлов, изменениями атрибутов и текстового содержимого, а также управлять жизненным циклом наблюдателя в прикладных сценариях.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍14🤝9❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Здесь собраны проверенные рекомендации, которые помогают улучшать структуру проектов, писать более чистый и поддерживаемый код, избегать типичных ошибок и повышать безопасность приложений. Все советы объяснены простым языком и подходят как для начинающих, так и для опытных разработчиков.
Оставляю ссылочку: GitHub📱
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🔥9👍7