Code Ready | Frontend

📱

Range API — работа с фрагментами DOM!

В этой шпаргалке собраны основные методы Range API для программной работы с диапазонами и фрагментами DOM. Здесь показано, как задавать начальную и конечную границы диапазона, выбирать узел целиком или только его содержимое, копировать и извлекать выбранные фрагменты, вставлять новые DOM-узлы в заданную позицию, а также получать текстовое содержимое диапазона.

📣

Code Ready | #шпора

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍13❤7🔥5

1.66K views06:12

Code Ready | Frontend

✍️

Полезная статья недавно вышла на Хабре: «Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind»!

В этой статье:

• Узнаете, как удобнее стилизовать контент с помощью `:not()` и управлять специфичностью через CSS-слои;

• Научитесь увеличивать кликабельную область элементов без изменения их размеров;

• Разберёте полезные приёмы с CSS Grid ить контент с пом которые упрощают адаптивную вёрстку.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥12👍7🤝7

1.67K views06:12

Code Ready | Frontend

👩‍💻 Семантически выделяет математические выражения и переменные!

Тег <var> используется для семантического выделения переменных в математических выражениях, формулах, программном коде и технической документации.

Например, с его помощью можно обозначить:

• переменную в формуле — x, y, r;
• аргумент функции;
• параметр программы или команды;
• значение, которое пользователь должен подставить самостоятельно.

По умолчанию браузеры обычно отображают содержимое <var> курсивом, однако внешний вид можно изменить с помощью CSS.

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

📣

Code Ready | #атрибут

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥14👍6❤5🤝3

1.59K views06:12

Code Ready | Frontend

Правильный порядок фокуса в сложном Grid без перестановки DOM!

CSS Grid позволяет визуально переставлять элементы, но раньше это создавало неприятную проблему: пользователь видит один порядок, а при нажатии Tab фокус может идти по исходному DOM.

Теперь для этого появился reading-flow.

Для Grid можно заставить последовательную навигацию следовать визуальным строкам:

.cards {
  reading-flow: grid-rows;
}

Для Flex есть отдельный режим:

.toolbar {
  reading-flow: flex-visual;
}

А если нужен контролируемый порядок, контейнер переводится в source-order, после чего отдельным детям можно задавать reading-order.

.list {
  reading-flow: source-order;
}

.featured {
  reading-order: -1;
}

Это полезно в адаптивных интерфейсах, где Grid/Flex визуально меняет расположение карточек или контролов, но переписывать DOM только ради порядка клавиатурной навигации неудобно.

🔥

reading-flow решает проблему расхождения визуального порядка и последовательной навигации на уровне CSS.

📣

Code Ready | #совет

Please open Telegram to view this post

VIEW IN TELEGRAM

❤15👍7🔥6

1.33K views13:12

Code Ready | Frontend

0:08

This media is not supported in your browser

VIEW IN TELEGRAM

✍️

Краткое руководство по HTML — основные теги и структура веб-страницы!

Здесь собраны основы HTML с понятными примерами: структура HTML-документа, работа с <head> и метатегами, HTML5-разметка, заголовки и текст, ссылки, изображения, таблицы и основные атрибуты элементов. В конце есть удобная таблица с популярными тегами и их назначением.

Оставляю ссылочку: GitHub

📱

📣

Code Ready | #репозиторий

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥12👍7❤5

1.25K views06:12

Code Ready | Frontend

🔥 Хочешь быстрее расти в IT? Хватит учиться в одиночку

Окружение решает больше, чем кажется.

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

AI: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Хакинг: t.me/linuxkalii
ВАЙБКОДИНГ: t.me/data_analysis_ml
DevOps: t.me/DevOPSitsec
Docker: https://t.me/+90Z5TAyfuNU5YmRi
Golang: t.me/Golang_google
Rust: t.me/rust_code
C++: t.me/cpluspluc
C#: t.me/csharp_1001_notes
Java: t.me/javatg
JavaScript: t.me/javascriptv
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Базы данных: t.me/sqlhub
Big Data: t.me/bigdatai
Математика: t.me/data_math

Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy
Папка Frontend: https://t.me/addlist/mzMMG3RPZhY2M2Iy
ИТ-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy

Max Ai: https://max.ru/ai_machinelearning_big_data
Max python: https://max.ru/pythonl
ТЕХНО: https://max.ru/vistehno
Max Go: https://max.ru/Golang_google
Max Linux: https://max.ru/linuxkalii
Devops: https://max.ru/DevOPSitsec
C#: https://max.ru/csharp_ci
C++: https://max.ru/cpluspluc
SQL: https://max.ru/sqlhub
Java: https://max.ru/javatg

Подписывайся на нужные направления и собирай себе ленту, которая реально двигает вперёд.

❤4👍4🔥3

1.07K views14:36

Code Ready | Frontend

Делаем «сквиркл»-углы нативно в CSS!

Обычный border-radius строит эллиптическое скругление. Но в интерфейсах часто нужны более плавные, «квадратные» скругления — squircle.

Раньше для точной формы приходилось использовать SVG, clip-path или маски.

Теперь форму угла можно менять отдельно от его радиуса:

.card {
  corner-shape: squircle;
}

При этом border-radius всё ещё определяет область скругления — без ненулевого радиуса corner-shape визуально ничего не изменит.

Есть и другие формы:

.card {
  corner-shape: bevel;
}

И даже вогнутые углы:

.card {
  corner-shape: scoop;
}

Причём границы, фон, outline и тени следуют новой форме углов, а сами формы можно анимировать. Поддержка пока ограничена.

🔥

corner-shape позволяет делать squircle, bevel и вогнутые углы двумя строками CSS — без дополнительной разметки и SVG.

📣

Code Ready | #совет

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14❤10🔥6

1.13K views17:36

Code Ready | Frontend

👩‍💻

Можно ли стилизовать субтитры к видео с помощью CSS?

Псевдоэлемент::cue позволяет стилизовать текст субтитров и других текстовых дорожек, отображаемых внутри элемента <video>. Эти дорожки подключаются с помощью тега <track>. С помощью ::cue вы можете менять цвет, размер шрифта, фон и другие свойства субтитров, чтобы сделать их более читаемыми или соответствующими дизайну вашего сайта.

Внутри ::cue разрешён ограниченный набор свойств:

• background, background-*
• color
• шрифтовые свойства: font, font-*
• outline, outline-*
• ruby-position
• text-combine-upright
• text-decoration, text-decoration-*
• text-shadow
• visibility
• white-space

Поддержка ::cue(<селектор>) может отличаться: в некоторых браузерах он недоступен. Всегда проверяйте поддержку для нужного браузера.

📣 Code Ready | #свойство

Please open Telegram to view this post

VIEW IN TELEGRAM

❤13👍10🔥6

998 views06:12

Code Ready | Frontend

🔴

Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

Please open Telegram to view this post

VIEW IN TELEGRAM

905 views11:12

Code Ready | Frontend

requestAnimationFrame() — почему время выполнения js нельзя привязывать к фиксированной частоте кадров!

Браузер самостоятельно управляет процессом обновления изображения на экране. JavaScript выполняется через event loop и не синхронизирован напрямую с частотой обновления дисплея.

Поэтому анимации, построенные на фиксированных задержках, могут вести себя по-разному на разных устройствах. setTimeout() не является механизмом синхронизации с браузерным rendering pipeline:

let x = 0;

function animate() {
  x += 5;

  element.style.transform = `translateX(${x}px)`;

  setTimeout(animate, 16);
}

animate();

Значение 16 миллисекунд не означает один кадр. Это только минимальная задержка перед следующим выполнением callback. На дисплее 60 Hz это примерно соответствует одному кадру (~16.67 ms), но на устройствах с частотой 120 Hz, 144 Hz и выше браузер не будет синхронизировать выполнение JavaScript с каждым обновлением экрана.

В результате скорость такой анимации зависит от количества вызовов JavaScript, а не от реально прошедшего времени. Для визуальных обновлений используется requestAnimationFrame():

let x = 0;

function animate() {
  x += 5;

  element.style.transform = `translateX(${x}px)`;

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Браузер планирует callback перед следующим обновлением изображения. Это позволяет выполнять изменения визуального состояния внутри стандартного цикла рендеринга.

Но сама привязка к кадрам не делает анимацию корректной. Если браузер пропустит несколько кадров из-за нагрузки, изменение состояния будет зависеть от количества вызовов requestAnimationFrame(), а не от реального времени.

Для независимости от частоты кадров необходимо использовать timestamp, который передаёт requestAnimationFrame():

let startTime = null;

function animate(timestamp) {
  if (startTime === null) {
    startTime = timestamp;
  }

  const elapsed = timestamp - startTime;
  const x = elapsed * 0.1;

  element.style.transform = `translateX(${x}px)`;

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

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

При этом requestAnimationFrame() не отменяет особенности браузерного rendering pipeline. Например, чтение геометрии элемента сразу после изменения стилей может вызвать forced synchronous layout:

element.style.width = '500px';

const height = element.offsetHeight;

После изменения стиля браузеру необходимо получить актуальное значение layout. Поэтому он может выполнить синхронный перерасчёт перед возвратом значения. В больших интерфейсах такие операции внутри animation loop становятся причиной лишней нагрузки и снижения производительности.

Также необходимо управлять жизненным циклом запущенных анимаций. Если компонент удалён, а callback продолжает создавать новые кадры, приложение продолжает выполнять ненужную работу:

let frameId;
let running = true;

function animate() {
  if (!running) return;

  update();

  frameId = requestAnimationFrame(animate);
}

frameId = requestAnimationFrame(animate);

// cleanup
running = false;
cancelAnimationFrame(frameId);

Кроме того, requestAnimationFrame() не делает любую анимацию автоматически дешёвой. Для оптимальной работы браузеру желательно избегать постоянных layout и paint операций. Свойства вроде transform и opacity чаще позволяют обновлять слой через compositor без полного перерасчёта страницы.

🔥

requestAnimationFrame() — это не просто более плавная альтернатива таймерам. Это механизм синхронизации JavaScript с браузерным циклом обновления изображения, который позволяет выполнять визуальные изменения в правильный момент, рассчитывать анимации через реальное время, учитывать разные частоты обновления экранов и избегать лишних операций при работе с интерфейсом.

📣

Code Ready | #практика

Please open Telegram to view this post

VIEW IN TELEGRAM

❤10👍10🔥6

596 views13:12

About

Blog

Apps

Platform