☑️ ИНТЕРАКТИВНОЕ СРАВНЕНИЕ ИЗОБРАЖЕНИЙ ИЛИ «БЫЛО — СТАЛО» НА ЧИСТОМ CSS

Временами появляется надобность показать зрительные различия меж 2-мя изображениями, как правило, до и после сопоставления. К примеру, презентация эффектов фото манипуляции в портфолио, итогов косметических процедур, видимых результатов катастрофического события или как меняются объекты с течением времени.

Первое что приходит в голову это изменять размер контейнера через JS на onmousedown & onmousemove. Но можно ли решить такую задачу без JavaScript? Оказалось что можно, и решение оказывается в css свойстве resize.
Вы скорее всего использовали это свойство с элементами textarea (указывает, можно ли пользователю изменять размеры текстового поля). На Mozilla MDN сказано:
Applies to elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes. То есть применить можно к любому элементу, у которого свойство overflow отличается от visible.
Принимает он такие значения: none | both | horizontal | vertical. Мы будем использовать свойство horizontal.

💭 Далее реализуем разметку:
<div class="slider">
<div class="resize-image">
<img src="" />
</div>
<img src="" />
</div>

💭 Через CSS накладываем одно изображение на другое при помощи абсолютного позиционирования.
.slider {
position: relative;
}

.resize-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}

.resize-image::before {
// стилизируем ресайзер
}

Готово, получаем отличное решение без скриптов.

Однако есть и недостатки у этого способа:
— пользователь может изменить размер верхнего изображения только из его правого нижнего угла
— управление слайдером недоступно с клавиатуры.

PS: Это решение нашлось в книге, которой я с вами делался еще в самом первом посте (Секреты CSS. Идеальные решения ежедневных задач).

☑️ АРГУМЕНТЫ ФЛАГИ

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

Рассмотрим пример кода (очень близко к тому, который я встретил в реальном проекте), который делает запрос за данными, получает список пользователей, и выводит их на страницу:

const users = await userService.fetch();

userComponent.render(users);

Этот код используется во многих частях проекта, чтобы его не дублировать, мы вынесем его в отдельную функцию. Обычная практика DRY.

const UserFacade = {
update: async () => {
const users = await userService.fetch();

userComponent.render(users);
}
}

Все хорошо, но клиент требует показывать лоадер при обновлении пользователей (т. е. при вызове данной функции). Но лоадер нужно показывать не всегда, а только при вызове из определенных мест в коде. Простым решением может показаться добавление флага (или даже нескольких):

const UserFacade = {
update: async (showLoader = false) => {
if (showLoader) { // показываем лоадер если нужно
userComponent.renderLoader(true);
}

const users = await userService.fetch();

userComponent.render(users);
userComponent.renderLoader(false); // скрываем лоадер в любом случае
}
}

UserFacade.update и userComponent.renderLoader теперь принимают флаги true и false.
В зависимости от переданного аргумента выполняется конкретная логика: либо мы отображаем список пользователей без лоадера либо с ним.
Получившийся код оказывается очень сложным для чтения, для понимания и нарушает множество принципов проектирования. Чтобы понять, что делают эти методы нам нужно заглядывать в названия параметров функции. Потому что вызов UserFacade.update(true) и UserFacade.update(false) не дают абсолютно никакого понимания о том, что происходит внутри.

Мне встречались подобные методы принимающие 4(!) аргумента, 3 из которых были флагами. Выглядело это примерно так:

SomeFacace.updateSomeData(uuid, true, false, true)

Мало того, что аргументов слишком много, так еще и совершенно не понятно что они делают.
Этот метод использовался во многих местах, а время на рефакторинг не было, я переписал его так, чтобы он принимал объект.

SomeFacace.updateSomeData(uuid, {
showLoader: true,
updateCases: false,
scrollToCase: true
});

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

Улучшить код в примере с UserFacade можно следующим образом. Переписать UserFacade и userComponent так, чтобы они не принимали флаги.

const UserFacade = {
updateWithLoader async () => {
userComponent.showLoader();
await this.update();
userComponent.hideLoader();
},
update: async () => {
const users = await userService.fetch();

userComponent.render(users);
}
}

Код стал чище, понятнее, а функции теперь вообще не принимают никаких аргументов.

И в подтверждение моих слов цитата из книги Роберта Мартина «Чистый код»:
«Аргументы-флаги уродливы. Передача логического значения функции — воистину ужасная привычка. Она немедленно усложняет сигнатуру метода, громко провозглашая, что функция выполняет более одной операции…»

☑️ ВОПРОСЫ НА СОБЕСЕДОВАНИИ #3

Третья статья про вопросы на собеседовании, в этот раз про СSS каскад.

Два предыдущих поста про вопросы на собеседовании:
#1 https://t.me/frontend_tips/16
#2 https://t.me/frontend_tips/27

☑️ РУКОВОДСТВО ПО ФОРМАТИРОВАНИЮ ТЕКСТА В HTML & CSS

Знакома ситуация на картинке ниже?
Решаем проблему с выпаданием текста за контейнер правильно и красиво.

Перед ознакомлением просьба ответить на один вопрос:
Знаете ли вы о существовании тега wbr в HTML?

☑️ JavaScript tips & tricks #1 Массивы

Полезные практики написания кода связанные с массивами, которые делают код более лаконичным.

☑️ Разбор одного из вопросов, которые мне задавали на собеседовании на должность senior front-end developer в международные и украинские конторы.

Собственно сам вопрос с объяснениями.

☑️ Тесты на знание JavaScript

Встречали такие тесты, в которых приведены примеры кода и нужно сказать что он вернет после исполнения?
Их часто задают на собеседованиях или даже до, чтобы отсеять кандидатов.
Так же, стало модно создавать такие в разных компаниях для привлечения внимания разработчиков (и сбора контактов конечно же).
На очередной такой я наткнулся на dou_ua.
Возможно, некоторые из вас видели Luxoft JavaScript quiz (была реклама на главной) или даже проходили его.
Вопросы были подобраны из разных областей JS и как по мне, тест получился интересным.

Я сделал разбор некоторых технических вопросов c объяснениями.

Welcome: https://telegra.ph/Ocherednoj-JavaScript-test-12-25

Вернулся после долгого перерыва и продолжаю делать контент с новым графиком.
Ждите статьи по понедельникам и четвергам 🗓
Идей для постов собралось много!

Stay tuned 📡

Про особенности JavaScript ходят легенды. Сегодня постараемся прояснить одну из них.

☑️ МЕТОДЫ ПРИМИТИВОВ И БОКСИНГ В JAVASCRIPT

Все типы данных в JavaScript делятся на примитивы и объекты. Примитивы не могут иметь собственных свойств и методов, объекты могут. Почему свойства работают на примитивах и что такое боксинг.

☑️ ЧТО ТАКОЕ ECMASCRIPT И ЧЕМ ЭТО ОТЛИЧАЕТСЯ ОТ JAVASCRIPT

Язык JavaScript изначально так назвали в надежде извлечь выгоду из успеха Java.
Позднее JavaScript прошел стандартизацию в ECMA International.
Это привело к появлению нового языкового стандарта, известного как ECMAScript.

Проясняем разницу между ES и JS здесь.

☑️ ДЕКЛАРАТИВНОЕ И ИМПЕРАТИВНОЕ ПРОГРАММИРОВАНИЕ

На волне популярности React и прочих библиотек/фреймворков люди забывают о читаемости и думают только о красоте кода. Почему стоит смотреть на этот вопрос по другому - тут.

☑️ АЛЬТЕРНАТИВЫ РЕШЕНИЯ ТИПИЧНЫХ ЗАДАЧ


Если максимально декомпозировать любую задачу – она сводится к похожим, конкретным кускам кода, которые мы пишем каждый день.
Собрал несколько альтернативных вариантов решения таких задач.

☑️ ДОСТУПНЫЙ FRONT-END #1

Цикл статей для улучшения доступности приложений.
Будем разбирать как сделать так, чтобы вашим сайтом/веб-приложением хотелось пользоваться.

Первая статья про упрощение взаимодействия с формами.

Привет, спасибо, что читаете!

Появилась идея коротких постов. С упором на визуальный контент и не занимающий много времени на прочтение и осмысление. В телеграмм мне нравится делать большие посты с детальным разбором и описанием или переводить интересные статьи. Есть же вещи, про которые хочется рассказать, но для отдельного поста информации маловато, а собрать что-то схожее не совсем получается.
Для этих целей теперь есть инстаграмм WiseJS.

Многие из вас меня знают только по постам здесь. Исправим это постом знакомства.

PS: Небольшой quiz в стори!

☑️ ВЕБДОСТУПНІСТЬ HTML #2

Який сенс використовувати тег section і чому вам треба звернути увагу на article.
Пост українською 🇺🇦.

☑️ ПЕРЕСТАНОВКА ПЕРЕМЕННЫХ В JavaScript

5 вариантов обмена значений двух переменных.

☑️ БАЗОВЫЕ ЗНАЧЕНИЯ CSS

Разбираем разницу между ключевыми словами "initial", "inherit" и "unset”.

☑️ ЗАЧЕМ _ В АТРИБУТЕ target у ССЫЛОК

Атрибут target определяет, где открывать документ, на который указывает ссылка.
Но почему его значения начинаются с _ ?

☑️ CONTEXT и SCOPE

Проводил недавно собеседования.
Спрашивал про scope и context в JavaScript.

Примерно половина людей думает что это одно и то же, а другая половина путается и теряется.

Особенно важно обратить внимание начинающим разработчикам.
Разбираемся вместе.

☑️ ОТРИЦАТЕЛЬНЫЙ margin

Существует несколько точек зрения на использование отрицательного значения, как резко негативное, так и положительное.
Разбираемся в том, что же это такое: хак или обычное значение?