Привет 👨💻
Недавно Figma перевела Dev Mode в платную подписку. У многих есть проблемы связанные с оплатой или высокой стоимостью. Однако, благодаря гибкости платформы Figma, которая позволяет интегрировать сторонние плагины, появилась возможность найти альтернативное решение.
Для тех, кто ищет альтернативу, рекомендую ознакомиться с плагином Inspect Styles.
Делитесь другими своими находками в комментариях)
Недавно Figma перевела Dev Mode в платную подписку. У многих есть проблемы связанные с оплатой или высокой стоимостью. Однако, благодаря гибкости платформы Figma, которая позволяет интегрировать сторонние плагины, появилась возможность найти альтернативное решение.
Для тех, кто ищет альтернативу, рекомендую ознакомиться с плагином Inspect Styles.
Делитесь другими своими находками в комментариях)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥5❤3
Мы часто используем в своих проектах сброс или нормализацию стилей. А знаете в чем разница? Понимание их отличий может пригодиться не только в повседневной работе, но и на собеседованиях.
Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.
Преимущества сброса:
- Предоставляет полный контроль над стилизацией.
- Устраняет несоответствия между стилями по умолчанию в различных браузерах, упрощая создание консистентного внешнего вида.
- Идеален для проектов, где необходима полная кастомизация стилей без зависимости от браузерных умолчаний.
Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.
Преимущества нормализации:
- Сохраняет полезные браузерные стили, улучшая кросс-браузерную совместимость.
- Исправляет баги и расхождения в отображении элементов между браузерами.
Вывод
Выбор между сбросом и нормализацией зависит от ваших целей и предпочтений. Если вы хотите полностью контролировать все стили на странице и начать с "чистого листа", сброс будет вашим выбором. Если же вам важно сохранить некоторые полезные умолчания и обеспечить единообразие без лишнего труда, нормализация станет отличным решением.
#css
Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.
Преимущества сброса:
- Предоставляет полный контроль над стилизацией.
- Устраняет несоответствия между стилями по умолчанию в различных браузерах, упрощая создание консистентного внешнего вида.
- Идеален для проектов, где необходима полная кастомизация стилей без зависимости от браузерных умолчаний.
Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.
Преимущества нормализации:
- Сохраняет полезные браузерные стили, улучшая кросс-браузерную совместимость.
- Исправляет баги и расхождения в отображении элементов между браузерами.
Вывод
Выбор между сбросом и нормализацией зависит от ваших целей и предпочтений. Если вы хотите полностью контролировать все стили на странице и начать с "чистого листа", сброс будет вашим выбором. Если же вам важно сохранить некоторые полезные умолчания и обеспечить единообразие без лишнего труда, нормализация станет отличным решением.
#css
👍14🔥5❤4👾3
Я считаю, что очень важно получать фидбек в IT и этот канал не исключение. Для меня крайне важно создавать контент, который был бы не просто интересен, но и действительно полезен для вас. Вы можете заметить, что мой контент сильно отличается от большинства каналов. В связи с этим, хотел бы узнать ваше мнение о постах, опубликованных на этой неделе.
Были ли они полезны для вас? Что бы вы хотели увидеть в будущем? Возможно, у вас есть предложения по новым рубрикам или темам, которые были бы вам интересны? Или же вы хотели бы больше постов по уже существующим темам?
Делитесь своими мыслями и предложениями. Ваш фидбек важен для меня🧑💻
P.S. Не стесняйтесь оставлять свои реакции на этот пост🥰
Были ли они полезны для вас? Что бы вы хотели увидеть в будущем? Возможно, у вас есть предложения по новым рубрикам или темам, которые были бы вам интересны? Или же вы хотели бы больше постов по уже существующим темам?
Делитесь своими мыслями и предложениями. Ваш фидбек важен для меня
P.S. Не стесняйтесь оставлять свои реакции на этот пост
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25👨💻6👍4🤔2🦄2👏1
Привет всем! Давно не виделись 🏠
Многие заметили, что посты перестали выходить. Это произошло неожиданно, особенно учитывая, что последний пост был о том, как можно улучшить контент. Я не планировал прекращать, но в один момент у меня пропало вдохновение.
Пока не могу точно сказать, буду ли продолжать вести этот канал. Нужен перерыв, чтобы перезагрузиться и определиться.
Долго готовился к написанию этого поста, и вот он наконец вышел. Надеюсь на ваше понимание!
Многие заметили, что посты перестали выходить. Это произошло неожиданно, особенно учитывая, что последний пост был о том, как можно улучшить контент. Я не планировал прекращать, но в один момент у меня пропало вдохновение.
Пока не могу точно сказать, буду ли продолжать вести этот канал. Нужен перерыв, чтобы перезагрузиться и определиться.
Долго готовился к написанию этого поста, и вот он наконец вышел. Надеюсь на ваше понимание!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤27🤯7👀7👍5👨💻3🔥1
Всем привет! 👋
Очень давно не было постов, и для начала хочу извиниться за своё отсутствие. Иногда в жизни случается что-то, что выбивает из колеи. У меня был именно такой период, и я понял, что самое главное не сдаваться и двигаться вперёд. Сейчас я возвращаюсь и искренне надеюсь, что не разочарую вас🙂
Хочу поздравить каждого из вас с наступившим Новым годом!🎄
Желаю, чтобы этот год стал годом роста и новых возможностей. Пусть всё задуманное сбудется, а трудности обходят вас стороной✨
От себя хочу добавить, что у меня большие планы на этот год, и я искренне верю, что всё задуманное сбудется. Контент будет двигаться в более авторскую сторону (хотя он и был таким). Это значит, что помимо технических тем, я буду больше делиться мыслями о развитии, мотивации и других вещах, которые не менее важны для профессионального и личного роста.
В одном из последних постов я уже просил фидбек и предложения, но с тех пор многое могло измениться. Если у вас появились новые мысли, обязательно напишите в комментариях. Ваш фидбек и предложения помогают делать контент интересным🫶
Спасибо, что остались, и надеюсь на ваше понимание🙏
P.S Ваши реакции и комментарии очень важны. Это помогает мне понимать, что вам интересно и служит огромной мотивацией)
Очень давно не было постов, и для начала хочу извиниться за своё отсутствие. Иногда в жизни случается что-то, что выбивает из колеи. У меня был именно такой период, и я понял, что самое главное не сдаваться и двигаться вперёд. Сейчас я возвращаюсь и искренне надеюсь, что не разочарую вас
Хочу поздравить каждого из вас с наступившим Новым годом!
Желаю, чтобы этот год стал годом роста и новых возможностей. Пусть всё задуманное сбудется, а трудности обходят вас стороной
От себя хочу добавить, что у меня большие планы на этот год, и я искренне верю, что всё задуманное сбудется. Контент будет двигаться в более авторскую сторону (хотя он и был таким). Это значит, что помимо технических тем, я буду больше делиться мыслями о развитии, мотивации и других вещах, которые не менее важны для профессионального и личного роста.
В одном из последних постов я уже просил фидбек и предложения, но с тех пор многое могло измениться. Если у вас появились новые мысли, обязательно напишите в комментариях. Ваш фидбек и предложения помогают делать контент интересным
Спасибо, что остались, и надеюсь на ваше понимание
P.S Ваши реакции и комментарии очень важны. Это помогает мне понимать, что вам интересно и служит огромной мотивацией)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21🔥8👍6⚡1
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! 👋
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве
Оно имеет два возможных значения:
1.
При значении
2.
При значении
Главное отличие:
При использовании
Я подготовил пример, где вы можете изменять ширину таблиц с помощью ползунка. Попробовать можно тут JSFiddle(клик) / Codepen(клик)
@TrueFrontender #CSS #HTML
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве
table-layout, которое определяет, как браузер вычисляет ширину столбцов в таблицах.table-layout — это CSS-свойство, которое определяет, как браузер должен рассчитывать ширину столбцов в таблице. Оно имеет два возможных значения:
1.
table-layout: auto;При значении
auto ширина столбцов определяется на основе их содержимого. Браузер сначала анализирует данные в таблице, чтобы рассчитать ширину каждого столбца, а затем отрисовывает её. Ширина таблицы зависит от контента в каждой ячейке, а сама таблица подстраивается под содержимое динамически. 2.
table-layout: fixed;При значении
fixed ширина столбцов определяется заранее — на основе ширины таблицы и возможных указанных ширин столбцов (<col> или <th>). Контент внутри ячеек больше не влияет на ширину столбца. Ширина столбцов фиксируется сразу после загрузки страницы. Контент, который не помещается, просто обрезается или переносится (в зависимости от свойств колонки).Главное отличие:
При использовании
table-layout: fixed таблица загружается быстрее, потому что ширина столбцов вычисляется сразу. А со значением auto браузер должен сначала обработать всё содержимое таблицы, чтобы вычислить ширину столбцов.Я подготовил пример, где вы можете изменять ширину таблиц с помощью ползунка. Попробовать можно тут JSFiddle(клик) / Codepen(клик)
@TrueFrontender #CSS #HTML
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥6👀2
Сегодня коротко про один малоиспользуемый HTML-тег —
Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.
Как он работает?
Тег
1.
2.
Результат:
1. Ссылка будет открываться в новом окне и вести на страницу https://truefrontender.t.me/about.html.
2. Изображение загрузится с https://truefrontender.t.me/images/logo.png.
Когда это полезно?
— Если у вас большой проект, где ссылки и ресурсы ссылаются на один и тот же базовый URL. Вместо указания полного пути каждый раз, вы просто задаёте его через
— При миграции сайта на новый домен — можно временно добавить
Ограничения:
- Тег
А вы когда-нибудь видели или использовали
#HTML
<base>.Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.
Как он работает?
Тег
<base> вставляется внутри <head> и имеет два атрибута:1.
href — задаёт базовый URL.2.
target — задаёт целевое окно (например, _blank, _self, _parent, _top).
<head>
<base href="https://truefrontender.t.me/" target="_blank">
</head>
<body>
<a href="about.html">О канале</a>
<img src="images/logo.png" alt="Логотип">
</body>
Результат:
1. Ссылка будет открываться в новом окне и вести на страницу https://truefrontender.t.me/about.html.
2. Изображение загрузится с https://truefrontender.t.me/images/logo.png.
Когда это полезно?
— Если у вас большой проект, где ссылки и ресурсы ссылаются на один и тот же базовый URL. Вместо указания полного пути каждый раз, вы просто задаёте его через
<base>.— При миграции сайта на новый домен — можно временно добавить
<base> для тестирования.Ограничения:
- Тег
<base> работает только один раз на документ. Если их несколько, браузер берёт только первый.А вы когда-нибудь видели или использовали
<base>? #HTML
2👍12🔥5👀2
Наконец-то закончилась эта долгая и тяжелая рабочая неделя… Надеюсь, у всех получилось хоть немного влиться в работу после праздников. Я уже успел устать 🥲
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете🫶
Всем хороших выходных🍻
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете
Всем хороших выходных
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
Всех с понедельником 😭
Сегодня разберём задачу с собеседования про пропущенное число в массиве.
Условие задачи:
У нас есть неупорядоченный массив n-длины, содержащий числа от 1 до n+1. Одно из этих чисел отсутствует. Нужно найти пропущенное число.
Решение с сортировкой
Самый простой способ — отсортировать массив и сравнить его элементы с ожидаемой последовательностью чисел.
Алгоритм:
1. Отсортировать массив.
2. Пройти по нему и найти, где последовательность нарушается.
Решение через сумму арифметической прогрессии
Более быстрый способ — воспользоваться суммой арифметической прогрессии.
Алгоритм:
1. Сначала вычислить ожидаемую сумму чисел от 1 до n+1. Формула: (n+1) * (n+2) / 2.
2. Далее найти фактическую сумму всех чисел в массиве.
3. Разница между ожидаемой суммой и фактической даёт пропущенное число.
Как вам задача и как бы вы решили ее?
И не забывайте, что можно просто тыкнуть реакцию на пост😏
#interview #JavaScript #algorithm
Сегодня разберём задачу с собеседования про пропущенное число в массиве.
Условие задачи:
У нас есть неупорядоченный массив n-длины, содержащий числа от 1 до n+1. Одно из этих чисел отсутствует. Нужно найти пропущенное число.
Решение с сортировкой
Самый простой способ — отсортировать массив и сравнить его элементы с ожидаемой последовательностью чисел.
Алгоритм:
1. Отсортировать массив.
2. Пройти по нему и найти, где последовательность нарушается.
function findMissingNumberSort(arr) {
arr.sort((a, b) => a - b); // Сортируем массив
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== i + 1) {
return i + 1; // Если число не совпадает с ожидаемым
}
}
return arr.length + 1; // Если пропущено последнее число
}
console.log(findMissingNumberSort([3, 1, 4, 6, 2])); // 5
Решение через сумму арифметической прогрессии
Более быстрый способ — воспользоваться суммой арифметической прогрессии.
Алгоритм:
1. Сначала вычислить ожидаемую сумму чисел от 1 до n+1. Формула: (n+1) * (n+2) / 2.
2. Далее найти фактическую сумму всех чисел в массиве.
3. Разница между ожидаемой суммой и фактической даёт пропущенное число.
function findMissingNumberSum(arr) {
const n = arr.length + 1; // Учитываем пропущенное число
const expectedSum = (n * (n + 1)) / 2; // Ожидаемая сумма
const actualSum = arr.reduce((acc, num) => acc + num, 0); // Сумма массива
return expectedSum - actualSum; // Пропущенное число
}
console.log(findMissingNumberSum([3, 1, 4, 6, 2])); // Результат: 5
Как вам задача и как бы вы решили ее?
И не забывайте, что можно просто тыкнуть реакцию на пост
#interview #JavaScript #algorithm
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡14👍6🔥3👀3
Сегодня про проблемы начинающих (и не только) разработчиков — использование
Почему
CSS-свойств много, и когда вы используете
Например:
Что произойдёт, если вы решите менять ещё и
Как правильно?
Используйте только те свойства, которые действительно нужно анимировать:
Здесь мы явно указали, что хотим анимировать только
Итог
#CSS #BestPractices
transition: all. Это может казаться удобным, но на практике часто приносит больше вреда, чем пользы.Почему
transition: all проблема?CSS-свойств много, и когда вы используете
all, вы переходите в режим «а пусть плавно изменится всё». Это может вызвать неожиданные эффекты, если вы добавите или измените свойства в будущем.Например:
button {
transition: all 0.3s ease;
}
button:hover {
background-color: #ff5722;
transform: scale(1.1);
}
Что произойдёт, если вы решите менять ещё и
box-shadow или добавите border? Всё будет анимироваться, даже если вы этого не хотите. В результате — неочевидный баг на проде.Как правильно?
Используйте только те свойства, которые действительно нужно анимировать:
button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
Здесь мы явно указали, что хотим анимировать только
background-color и transform.Итог
transition: all — это как "универсальный ключ", который вроде как открывает всё, но может сломать половину замков. Не ленитесь и всегда указывайте только нужные свойства.#CSS #BestPractices
❤11👍3🔥2👀1
Это среда, мои чуваки 🐸
Сегодня предлагаю разобраться с загрузкой и выполнением скриптов. Этот вопрос частенько всплывает на собеседованиях, но на практике мы редко сталкиваемся с ним, ведь почти всегда у нас есть одна точка входа. Однако понимание того, как работает загрузка, всё же важно и лучше разобраться.
Как работает загрузка без атрибутов?
Если вы подключаете скрипт обычным способом:
То браузер выполняет следующие шаги:
1. Останавливает парсинг HTML.
2. Загружает скрипт.
3. Выполняет его.
4. Возвращается к разбору HTML.
Если такой скрипт подключён в
Решение: async и defer
С помощью атрибутов
async
1. Скрипт загружается параллельно с HTML.
2. Выполняется сразу после загрузки, останавливая парсинг HTML.
3. Порядок выполнения не гарантирован, если таких скриптов несколько.
Пример:
defer
1. Скрипт загружается параллельно с HTML, как и async.
2. Выполняется только после завершения парсинга HTML.
3. Гарантировано выполняется в порядке объвления.
Пример:
Особенности
1.
2.
Когда использовать?
—
—
Заключение
Атрибуты
Шпаргалку со сравнением можно найти в прикрепленном изображении.
#JavaScript #Perfomance #HTML #interview
Сегодня предлагаю разобраться с загрузкой и выполнением скриптов. Этот вопрос частенько всплывает на собеседованиях, но на практике мы редко сталкиваемся с ним, ведь почти всегда у нас есть одна точка входа. Однако понимание того, как работает загрузка, всё же важно и лучше разобраться.
Как работает загрузка без атрибутов?
Если вы подключаете скрипт обычным способом:
<script src="main.js"></script>
То браузер выполняет следующие шаги:
1. Останавливает парсинг HTML.
2. Загружает скрипт.
3. Выполняет его.
4. Возвращается к разбору HTML.
Если такой скрипт подключён в
<head>, это заблокирует загрузку страницы, пока скрипт не будет загружен и выполнен. Это критично для производительности и серьезно влияет на пользовательский опыт. Наши заказчики будут серьезно недовольны)Решение: async и defer
С помощью атрибутов
async и defer можно избежать блокировки парсинга HTML.async
1. Скрипт загружается параллельно с HTML.
2. Выполняется сразу после загрузки, останавливая парсинг HTML.
3. Порядок выполнения не гарантирован, если таких скриптов несколько.
Пример:
<script src="main.js" async></script>
defer
1. Скрипт загружается параллельно с HTML, как и async.
2. Выполняется только после завершения парсинга HTML.
3. Гарантировано выполняется в порядке объвления.
Пример:
<script src="main.js" defer></script>
Особенности
1.
defer и async работают только с внешними скриптами (src). Если вы напишете инлайн-скрипт, атрибуты проигнорируются2.
type="module" автоматически включает defer. Когда использовать?
—
async подходит для независимых скриптов, таких как аналитика, рекламные библиотеки, виджеты и трекеры.—
defer используется для скриптов, которые зависят от DOM или должны выполняться строго в порядке их подключения. Например, это основной код вашего приложения или скрипты с полифилами.Заключение
Атрибуты
async и defer дают простой способ улучшить производительность и не блокировать страницу. Шпаргалку со сравнением можно найти в прикрепленном изображении.
#JavaScript #Perfomance #HTML #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤6👏2👀1
Закончим неделю на лайтовом посте, но который поможет сделать вашу жизнь немного продуктивнее 🧑💻 Многие из нас ведут заметки, но не всегда их удобно организовать и структурировать. Сегодня пост как раз про приложение, которое поможет решить эту проблему.
Obsidian — это инструмент для создания заметок, который превращает информацию в настоящую базу знаний.
Почему стоит попробовать Obsidian?
— Все записи полностью локальны и создаются в формате
— Обсидиан позволяет связывать заметки друг с другом. Просто пишите
— Обширная библиотека плагинов позволяет добавлять задачи, трекеры, канбан-доски, базы данных, аналитику и многое другое.
Для чего и почему я использую Obsidian?
Я использую Obsidian для работы, ведения этого канала и структурирования своих мыслей. Можно сказать, что это моя персональная вики.
Кстати, этот пост не исключение и он тоже хранится у меня в заметках)
Скачать и попробовать Obsidian можно тут obsidian.md
Кто-то уже пробовал? Интересно узнать ваше мнение и рекомендации.
#Markdown #Продуктивность
Obsidian — это инструмент для создания заметок, который превращает информацию в настоящую базу знаний.
Почему стоит попробовать Obsidian?
— Все записи полностью локальны и создаются в формате
Markdown. — Обсидиан позволяет связывать заметки друг с другом. Просто пишите
[[Название заметки]], и вы создадите связь. А встроенный Graph View визуализирует всю вашу базу знаний в виде сети.— Обширная библиотека плагинов позволяет добавлять задачи, трекеры, канбан-доски, базы данных, аналитику и многое другое.
Для чего и почему я использую Obsidian?
Я использую Obsidian для работы, ведения этого канала и структурирования своих мыслей. Можно сказать, что это моя персональная вики.
Кстати, этот пост не исключение и он тоже хранится у меня в заметках)
Скачать и попробовать Obsidian можно тут obsidian.md
Кто-то уже пробовал? Интересно узнать ваше мнение и рекомендации.
#Markdown #Продуктивность
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍5🤔3⚡1
Наступают выходные, а это значит, что пора отдыхать 🍻
На всякий случай хочу сказать, что посты выходят только по будним дням, и следующий будет уже в понедельник.
А пока небольшая подборка старых интересных постов:
1. Разбор задачи с собеседования про анаграммы
2. Отложенная загрузка изображений
3. Простой лоадер для вашего сайта
Спасибо за ваши подписки и активность🫶 Обнял, поднял ☺️
Хороших выходных, увидимся в понедельник🤜
На всякий случай хочу сказать, что посты выходят только по будним дням, и следующий будет уже в понедельник.
А пока небольшая подборка старых интересных постов:
1. Разбор задачи с собеседования про анаграммы
2. Отложенная загрузка изображений
3. Простой лоадер для вашего сайта
Спасибо за ваши подписки и активность
Хороших выходных, увидимся в понедельник
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤6🦄2
Редкий атрибут, про который многие даже не слышали, — это
Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут
Как работает?
Добавьте этот атрибут к
Браузер покажет это так:
Кто-нибудь знал про этот атрибут?
#HTML
reversed для <ol>. Довольно простая и базовая штука, но, возможно, однажды пригодится)Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут
reversed позволяет отображать элементы списка в обратном порядке нумерации. Вместо того чтобы начинать с единицы, счёт стартует с максимального числа и идёт вниз.Как работает?
Добавьте этот атрибут к
<ol>, например:
<ol>
<li>Первое место</li>
<li>Второе место</li>
<li>Третье место</li>
</ol>
Браузер покажет это так:
3. Первое место
2. Второе место
1. Третье место
Кто-нибудь знал про этот атрибут?
#HTML
🔥12👍8👀2
Сегодня кажется, что почти каждая команда работает по Scrum или чему-то приближенному. Но довольно часто вижу, что у многих из встреч остаются только базовые. Однако есть одна практика, о которой знают далеко не все — особенно если в вашей команде никогда не было скрам-мастера. Это встреча «Три амиго».
Что это за встреча?
Это встреча на которой пересекаются бизнес, разработка и тестирование, чтобы превратить идеи в понятные, четко сформулированные задачи.
Кто учавствует?
1. Бизнес — задаёт контекст и отвечает на главный вопрос: «Зачем это нужно?».
2. Разработчик — оценивает технические аспекты и предлагает: «Как это сделать?».
3. Тестировщик — добавляет перспективу качества и спрашивает: «Как проверить, что это работает правильно?».
Что происходит на встрече?
1. Разбираются пользовательские истории или фичи, чтобы у всех было единое понимание.
2. Выявляются «узкие места» в реализации, чтобы избежать сюрпризов.
3. Определяются четкие критерии готовности (DoD), чтобы не допустить размытых требований.
Когда эта встреча пригодится?
— Если задачи слишком размыты, встреча помогает превратить абстрактные идеи в четко сформулированные задачи.
— Когда в команде есть разногласия. Если разработчики, тестировщики и бизнес понимают задачу по-разному, такая встреча устранит недоразумения.
— При работе над сложными или технически рискованными фичами можно заранее выявить узкие места, оценить риски и спланировать, как их избежать.
— Когда сроки поджимают, четкое определение критериев готовности и понимание объёма работ помогут сосредоточиться на главном и избежать потери времени на лишние доработки.
— Если важно качество, тестировщики на встрече могут заранее обозначить свои ожидания от задачи, предложить тестовые сценарии и уточнить, как проверить, что всё сделано правильно.
Что в итоге?
Такие встречи помогают синхронизировать участников процесса, предотвратить недоразумения и экономить время на доработках.
Кто-то из вас участвовал в таких встречах? В моем опыте это довольно редкая практика.
Запущу опрос ниже, чтобы понять, насколько популярна эта практика)
#Scrum #Продуктивность #BestPractices
Что это за встреча?
Это встреча на которой пересекаются бизнес, разработка и тестирование, чтобы превратить идеи в понятные, четко сформулированные задачи.
Кто учавствует?
1. Бизнес — задаёт контекст и отвечает на главный вопрос: «Зачем это нужно?».
2. Разработчик — оценивает технические аспекты и предлагает: «Как это сделать?».
3. Тестировщик — добавляет перспективу качества и спрашивает: «Как проверить, что это работает правильно?».
Что происходит на встрече?
1. Разбираются пользовательские истории или фичи, чтобы у всех было единое понимание.
2. Выявляются «узкие места» в реализации, чтобы избежать сюрпризов.
3. Определяются четкие критерии готовности (DoD), чтобы не допустить размытых требований.
Когда эта встреча пригодится?
— Если задачи слишком размыты, встреча помогает превратить абстрактные идеи в четко сформулированные задачи.
— Когда в команде есть разногласия. Если разработчики, тестировщики и бизнес понимают задачу по-разному, такая встреча устранит недоразумения.
— При работе над сложными или технически рискованными фичами можно заранее выявить узкие места, оценить риски и спланировать, как их избежать.
— Когда сроки поджимают, четкое определение критериев готовности и понимание объёма работ помогут сосредоточиться на главном и избежать потери времени на лишние доработки.
— Если важно качество, тестировщики на встрече могут заранее обозначить свои ожидания от задачи, предложить тестовые сценарии и уточнить, как проверить, что всё сделано правильно.
Что в итоге?
Такие встречи помогают синхронизировать участников процесса, предотвратить недоразумения и экономить время на доработках.
Кто-то из вас участвовал в таких встречах? В моем опыте это довольно редкая практика.
Запущу опрос ниже, чтобы понять, насколько популярна эта практика)
#Scrum #Продуктивность #BestPractices
🔥6👏4👍2
Проводите встречи «Три амиго»?
Anonymous Poll
8%
Да, регулярно 💪
6%
Иногда 🤔
6%
Знаю, но не проводим ☕️
80%
Первый раз слышу 😬
❤3👨💻2
Разберём Intersection Observer — это API для отслеживания появления элементов в зоне видимости.
Синтаксис выглядит так:
Опции для настройки:
1.
2.
3.
Методы:
Что внутри entries и entry?
intersectionRatio — степень видимости элемента (например, 0.5 для 50%).
Когда использовать?
Intersection Observer отлично подходит для появления элементов при скролле, ленивой загрузки изображений и аналитики.
Я использую в своей работе для аналитики и отслеживания действий.
P.S Сделал шпаргалку на всякий случай. Сохраняйте чтобы не забыть)
#JavaScript #webapi #шпаргалка
Синтаксис выглядит так:
const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);
Опции для настройки:
1.
root — Контейнер, в пределах которого отслеживается пересечение. По умолчанию — null (viewport). 2.
rootMargin — Отступы вокруг контейнера, например, 50px 0px отслеживает на 50px раньше. 3.
threshold — Уровень видимости элемента (например, 0.5 для 50% видимости или массив значений [0, 0.5, 1], чтобы отслеживать видимость элемента на 0%, 50% и 100%).Методы:
observe() — Начинает отслеживать указанный элемент. unobserve() — Прекращает отслеживание элемента. disconnect() — Полностью останавливает работу Observer. takeRecords() — Возвращает список всех записей о пересечении, которые ещё не были обработаны.Что внутри entries и entry?
entries — это массив объектов, содержащих информацию о каждом отслеживаемом элементе. entry — один из этих объектов. Вот его свойства:isIntersecting — true, если элемент пересёк границы видимости.target — сам элемент DOM, за которым ведётся наблюдение.intersectionRatio — степень видимости элемента (например, 0.5 для 50%).
boundingClientRect — размеры и положение элемента относительно viewport.intersectionRect — область пересечения элемента с видимой частью контейнера.rootBounds — размеры контейнера (root), если он указан.Когда использовать?
Intersection Observer отлично подходит для появления элементов при скролле, ленивой загрузки изображений и аналитики.
Я использую в своей работе для аналитики и отслеживания действий.
P.S Сделал шпаргалку на всякий случай. Сохраняйте чтобы не забыть)
#JavaScript #webapi #шпаргалка
👍8🔥4👏4
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера я рассказывал про Intersection Observer , а сегодня подготовил пример его использования. С помощью Intersection Observer будем "печатать" текст, когда он попадает в зону видимости, и скрывать при прокрутке вверх.
Посмотреть пример можно тут JSFiddle / CodePen
#CSS #HTML #JavaScript
Посмотреть пример можно тут JSFiddle / CodePen
#CSS #HTML #JavaScript
🔥9👀4👍3
Завершаем эту неделю постом, который, возможно, вдохновит кого-то покопаться в интересном проекте на выходных.
Может быть, кто-то помнит бородатые времена UCOZ? У них был довольно прикольный интерфейс в виде рабочего стола.
Я нашел интересный проект, который написан на чистом JavaScript и может быть поднят локально.
Что интересно:
— Написан на чистом JavaScript.
— Можно поднять локально.
— Работает как полноценная операционная система в браузере.
Репозиторий проекта: GitHub
Демонстрация: Puter.com
#JavaScript #OpenSource
Может быть, кто-то помнит бородатые времена UCOZ? У них был довольно прикольный интерфейс в виде рабочего стола.
Я нашел интересный проект, который написан на чистом JavaScript и может быть поднят локально.
Что интересно:
— Написан на чистом JavaScript.
— Можно поднять локально.
— Работает как полноценная операционная система в браузере.
Репозиторий проекта: GitHub
Демонстрация: Puter.com
#JavaScript #OpenSource
Всем привет 👋 Начнем эту неделю с очень простой темы)
Если вы хоть раз верстали, то наверняка сталкивались с тегами, которые не нужно закрывать. Сегодняшний пост как раз о них🙂
Что это за элементы и как они называются?
Void-элементы— это тип HTML-элементов, которые не требуют закрывающего тега. Такие элементы предназначены для случаев, когда контент внутри недопустим. Например,
Полный список void-элементов:
На что обратить внимание?
Итого
Void-элементы — это HTML-элементы, которые не требуют закрытия, не допускают вложений и в HTML5 не нуждаются в слэше перед закрытием.
#HTML #шпаргалка
Если вы хоть раз верстали, то наверняка сталкивались с тегами, которые не нужно закрывать. Сегодняшний пост как раз о них
Что это за элементы и как они называются?
Void-элементы— это тип HTML-элементов, которые не требуют закрывающего тега. Такие элементы предназначены для случаев, когда контент внутри недопустим. Например,
<img> используется для добавления изображений, а <br> — для переноса строки.Полный список void-элементов:
<area> — для создания активных областей в <map>.<base> — задаёт базовый URL для документа.<br> — перенос строки.<col> — определяет колонки в таблицах.<embed> — для вставки мультимедиа-контента.<hr> — горизонтальная линия для разделения секций.<img> — для добавления изображений.<input> — для создания полей ввода.<link> — подключение внешних ресурсов, например, CSS.<meta> — метаинформация о документе.<source> — источник для <audio> и <video>.<track> — субтитры и текстовые дорожки для видео.<wbr> — возможный разрыв длинного слова.На что обратить внимание?
1. Не закрывайте void-элементы вручную:
<img src="photo.jpg"></img> <!-- Ошибка -->
2. Void-элементы не могут содержать вложений:
<hr>---</hr> <!-- Так нельзя -->
3. В HTML5 не нужно добавлять слэш перед закрытием:
<img src="example.jpg" alt="Описание"> <!-- Добавляем без слэша -->
Итого
Void-элементы — это HTML-элементы, которые не требуют закрытия, не допускают вложений и в HTML5 не нуждаются в слэше перед закрытием.
#HTML #шпаргалка
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5