​Что такое inline block в отличии от inline элемента ?

Есть несколько значений для свойства display, которые определяют, как элемент будет отображаться на странице. Два из этих значений — inline и inline-block — имеют некоторые сходства, но и значительные отличия.

Inline элементы - элементы с display: inline; ведут себя как часть текста. Это значит, что:
- Они располагаются на одной строке с другими инлайн-элементами или текстом, если только ширина родительского элемента не заставляет их обтекать.
- У инлайн-элементов нельзя задать ширину (width) и высоту (height), так как размеры определяются содержимым.
- Вертикальные отступы (margin-top и margin-bottom) и вертикальные внутренние отступы (padding-top и padding-bottom) не влияют на расстояние между инлайн-элементами вертикально, хотя могут влиять на фоновое изображение или цвет.
- Горизонтальные отступы и внутренние отступы применяются нормально.

Inline-block элементы - элементы с display: inline-block; комбинируют некоторые свойства инлайн и блочных элементов:
- Как и инлайн элементы, эти элементы располагаются на одной строке с другими инлайн-элементами или текстом.
- В то же время, у них можно задать ширину и высоту, как у блочных элементов.
- Вертикальные и горизонтальные отступы (margin и padding) работают как у блочных элементов, влияя на расстояние вокруг элемента во всех направлениях.
- Элементы могут содержать другие блочные или инлайн элементы.

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

👉 @seniorFront

Photo Filter With Range Sliders

Значение для CSS фильтров задаются через JS по событию input.

👉 @seniorFront

​Приходят в компанию, а уходят от руководителя: проявления негатива, которых стоит избегать в рабочей коммуникации

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

1. Невербальный негатив
Это всё, что не озвучено явно — мимика, жесты, позы тела, взгляды, эмоции, тембр и громкость голоса. Довольно большой и богатый спектр, чтобы выразить почти любые чувства. Не все такое умеют считывать, так как не обладают достаточной степенью эмпатии или просто равнодушны к собеседникам. На мой взгляд, это на самом деле ключевой маркер поведения, который даёт больше информации, чем слова.

2. Троллинг
Это различные шуточные подколы или фотожабы на что-либо. Не все понимают, как на них реагировать, в том числе, например, на злобные комменты к текстам в социальных сетях. В последнее время люди привыкли к таким действиям и уже даже выработали какой-то иммунитет — не обращают внимания. Но тролли бывают разные и мастера манипуляций в тонком стиле способны довести неподготовленного человека до остервенения.

3. Токсичность
Пожалуй, самое затасканное понятие, которое часто неверно понимают. Токсичность — это не «плохое поведение», а действия, которые отравляют окружение при контакте. К примеру, собеседник вполне себе вежлив, но капля сарказма тут, усмешка там и вот уже с ним нет желания говорить даже в чате, не то, что в реале.

4. Пассивная агрессия
Как ни странно, иногда самый действенный метод для того чтобы пробить тупость людей) Не советую злоупотреблять, но в некоторых случаях можно использовать, чтобы разрулить ситуацию без доведения до открытого конфликта — это лучше, чем допустить драку. В рабочих отношениях будет вызывать раздражение, но если директор не хочет решать какие-то трудности менеджмента, то именно такое отношение он и получит в результате.

5. Хамство
Одна из самых старых форм выражения эмоций, которую на фоне остального негатива почти уже не обращают внимания, так как просто привыкли и очерствели от окружающего. Один послал на другого, тот в ответ сказал то же самое — все «довольные» разошлись. В коллективе же такое поведение медленно разъедает команду, люди перестают доверять друг другу и просто общаться.

👉 @seniorFront

Почему вам лучше не работать проджектом

Часто слышу от людей, которые только хотят войти в IT, что “если ты гуманитарий, а в QA идти не хочется, то есть один путь – в менеджеры проектов”. Им кажется, что рабочий день выглядит так: провел 2-3 встречи, выпил 3 чашки кофе, построил Гант, промотивировал команду и можно идти домой.

Я уже больше 10 лет работаю менеджером проектов и видел много коллег, которые бросали профессию и уходили заниматься всем чем угодно, только лишь бы потушить вечно горящую задницу. Я утешал рыдающих коллег-проджектов, меня выгоняли охранники из офисного здания заказчика с фонариками, потому что оно закрывалось в 11 вечера, а мне надо было еще работать.

Данная статья это попытка рассказать тем, кто хочет попробовать стать менеджером проектов о изнанке профессии и проблемах, с которыми вы точно столкнетесь и о которых лучше знать заранее.

👉 @seniorFront

Star Ratings

В JS созданы обработчики события click для каждой звезды. При нажатии изменяются определенные стили.

👉 @seniorFront

CSS + SVG Animation Effects

В этом видео создается анимированная SVG картинка - loader.

👉 @seniorFront

Хочешь знать откуда эти шрамы?

👉 @seniorFront

PIXI Displacement Map

Реализовано при помощи библиотек Pixi.js и TweenMax.

👉 @seniorFront

CSS3 loading animations

Подборка анимаций загрузки, реализованных на HTML и Less.

👉 @seniorFront

👉 @seniorFront

Cursor Move + Card Hover Effects

В этом видео создается эффект при наведении на карточку, привязанный к курсору пользователя на CSS и JS.

👉 @seniorFront

Glitching Text

Анимация искажения текста, реализованная в SCSS.

👉 @seniorFront

Write Number in Expanded Form

Вам будет дан номер, и вам нужно будет вернуть его в виде строки в расширенной форме
Все числа будут целыми числами больше 0

Пример:

expandedForm(12); //  '10 + 2'
expandedForm(42); //  '40 + 2'
expandedForm(70304); //  '70000 + 300 + 4'

👉 @seniorFront

Психологический тупик в ИТ-карьере: как я преодолевал «выгорание» и почему сопротивлялся изменениям

В этой статье я хочу поделиться личным опытом и рассказать о том, как я оказался в «психологическом тупике». Расскажу на что это было похоже, с какими трудностями столкнулся, какие варианты перепробовал и что мне действительно помогло.

👉 @seniorFront

​Как использовать useEffect ?

Это хук, введённый в React 16.8, который позволяет выполнять побочные эффекты в функциональных компонентах. Побочные эффекты включают в себя операции, которые выходят за рамки возвращаемого результатом рендеринга, такие как работа с сетью (запросы к API), подписки, изменение документа и так далее. Он заменяет собой жизненные циклы классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.

Синтаксис:

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

Функция побочного эффекта: Это его основное тело, где вы помещаете код, который должен выполняться после каждого рендеринга (по умолчанию) или когда изменяются определённые зависимости.
Очистка: Функция очистки выполняется перед тем, как компонент будет удалён, а также перед следующим выполнением эффекта. Это идеальное место для отмены подписок, таймеров и других ресурсов, чтобы избежать утечек памяти.
Массив зависимостей: Определяет, при изменении каких значений должен повторно выполняться эффект. Если массив пуст ([]), эффект выполнится один раз после первого рендеринга. Если массив не указан, эффект будет выполняться после каждого рендеринга.

Примеры использования:

Запуск эффекта один раз
Чтобы выполнить эффект один раз после первого рендеринга (аналог componentDidMount в классовых компонентах), используйте пустой массив зависимостей:

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

Выполнение при изменении зависимостей
Чтобы выполнить эффект при изменении определённых значений:

const [count, setCount] = useState(0);

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости

Очистка эффекта
Пример использования функции очистки:

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

👉 @seniorFront

Rotating text, falling letters

В JS создана логика запуска CSS трансформаций для каждой буквы слова.

👉 @seniorFront

Вот вам вопросы для прокрастинации

Вопросы разные, все они присланы пользователями.

Если бы 8-битного бога спросили, какое самое большое число, что он ответил?
255

Как понять, что проект нужно переписывать заново?
Когда время на рефакторинг кода для внедрения изменений (фичи) больше, чем время для написания кода самого изменения (фичи). Зачёт по смыслу.

Согласно легенде ОН — глаз небесного белого орла, который после битвы с черным колдуном упал на Землю и стал камнем. Другой ОН стоил около 4000 рублей и для многих стал первым проводником в мир программирования.
Агат

Что появилось раньше, print(), или 'Hello world!' как фраза, с которой сталкивался каждый программист?
print(), т.к. без него не было бы и 'Hello world!'

В чём отличие геймера от тестировщика игр?
Один тратит деньги, а другой зарабатывает. Зачёт по смыслу.

Одна из татуировок иронично символизирует разделение одного с другим и одновременно неотделимость одного от другого. В коде и одно, и другое так же часто неотделимы. Назовите одно и другое на любом языке.
</head> <body> Зачёт по смыслу.

На одной забавной картинке в интернете собрались вместе театр, лиса, лев, старый грязный унитаз и ЦВЕТ, который есть в лисе, во льве и в театре. Какое слово автор заменил словом «ЦВЕТ»?
Хром (Chrome)

Если камень — это 0, бумага — это 31 а ножницы — 6, то какими числами сказать «отлично», «наберу»?
1, 17. В кулаке согнутые пальцы нули, а выпрямленные единицы рассматриваем как двоичную систему счисления

Нельзя сказать, чтобы их подбрасывало в 6 раз сильнее на таких же по высоте кочках. Но сидеть им было явно неудобно и фактически они стояли при езде. Так что пришлось всё же сделать для них нечто, чтобы их не выбросило вовсе. А что именно сделали для них?
«Ремни безопасности». Их установили на четырёхколёсных транспортных планетоходах для передвижения людей по поверхности Луны.

МРТ, рентген, «дышите‑не‑дышите», простукивание. Подумайте о том, что был же тот, кто первый начал стучать и — назовите тару.
Бочка. В 1761 году в Вене вышла книга молодого врача Ауенбруннера, посвященная распознаванию болезней. Она начиналась словами благодарности отцу врача, потомственному пивовару, за оригинальную идею — выстукивание грудной клетки пациента, по аналогии с выстукиванием пивных бочек. Вот так проверка пивных бочек привела к врачебному способу исследования.

Еще больше вопросов в статье

👉 @seniorFront

14 инструментов для генерации изображений с кодом

В этой статье мы рассмотрим 14 крутых инструментов, которые помогают превращать код в красивые картинки. Каждый из них имеет свои фишки и подойдёт для разных задач. Кто-то любит минимализм, кому-то важна возможность кастомизации, а кто-то вообще хочет делать анимации с кодом — для всех найдётся свой вариант. Эта подборка точно поможет вам найти инструмент, который сделает ваши фрагменты кода не только понятными, но и визуально привлекательными.

👉 @seniorFront

range slider hamster

В зависимости от выбранной скорости запускаются различные CSS анимации.

👉 @seniorFront

Creative Banner Hover Effects

В этом видео создается эффект "проявления" картинки при наведении на CSS и JS.

👉 @seniorFront