Mind-Blowing Pixel Button

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

👉 @seniorFront

Day and Night - SVG Animation

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

👉 @seniorFront

More Zeros than Ones

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

Примеры:

 'abcde' === ["1100001", "1100010", "1100011", "1100100", "1100101"]
               True       True       False      True       False
                   
         --> ['a','b','d']
    
 'DIGEST'--> ['D','I','E','T']

👉 @seniorFront

Тёмная тема не для всех: о чём молчит веб-разработка, когда речь заходит об этике и доступности

Когда мы говорим об интерфейсах, слишком часто упор идёт на скорость, удобство и эстетику. А что насчёт того, чтобы быть понятным, полезным и доступным для всех? Эта статья — попытка по-человечески и технически осмыслить роль этики в разработке веб-интерфейсов. С примерами, с кодом, с шероховатостями.

👉 @seniorFront

​Как работает метод toString?

Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных.

У примитивов
Числа, строки, булевы значения, null, undefined
Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

У массивов
Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

У объектов
По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

У классов
Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

У функций
Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

👉 @seniorFront

Panel 3D Tilt

Реализовано на HTML и SCSS. Анимировано библиотекой TweenMax.

👉 @seniorFront

​Токсичная продуктивность – это диагноз или иллюзия?

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

Токсичность – токсикометрический показатель, определяемый как величина, обратная средней смертельной дозе или концентрации ядовитого вещества.

То есть получается, что дословно «токсичная продуктивность» – это ядовитый продукт вашего труда.

А теперь посмотрим на эти самые «ярлыки». В качестве примера я буду использовать вашего гипотетического коллегу.

- «Всё, что написано про меня!» - так звучит самый частый комментарий к статьям на данную тему. Мораль такова, что ваш коллега доволен своей уникальностью и принадлежностью к современному псевдо-диагнозу и скорее всего не захочет ничего менять. Продолжит страдать и жаловаться на объем работы. Вы будете тратить время на его спасение или пусть остается уникальным?

- «У меня столько работы, я ничего не успеваю, поэтому задерживаюсь!». В этом случае стоит задуматься, что является причиной дедлайна – неправильно распределенное рабочее время, имитация бурной деятельности или, возможно, нежелание идти домой по личным причинам?

- Если ваш гипотетический коллега говорит: «Мне стыдно, когда я ухожу с работы вовремя или отдыхаю в свободное время, а мог бы поработать», я вас поздравляю – этим человеком можно легко манипулировать. Если вам еще и любопытно, то понаблюдайте кто из других коллег является его «кумиром» и кому посвящено это признание.

- «Люди старшего поколения много работали и в выходные в том числе, отсюда и стереотип – нужно много трудиться, без дела сидеть нельзя». Может быть пора перестать винить родителей/бабушек/дедушек в своих убеждениях и взять ответственность за свою жизнь?

- «Я не могу отказать руководителю в выполнении новой задачи!». Каждая выполненная задача в трудовых отношениях оплачивается деньгами или предшествует получению нужной выгоды (повышение в должности, признание, новый проект). Если нет оплаты, то ваш коллега вряд ли согласится долго работать на таких условиях.

- Современные эксперты рекомендуют в перерывах отложить изучение, например, бизнес-литературы. Но если это действительно интересно и полезно, то к чему такое ограничение?

- «Я почитал, что страдаю «токсичной продуктивностью», но я кайфую от того, что много работаю. Как быть в этой ситуации?». Если ваш коллега вам это сказал, спросите у него – честен ли он с собой в этом момент и нет ли серьезных проблем в других важных сферах жизни из-за отсутствия времени? Если да, то может быть стоит получать удовольствие, занимаясь любимым делом?

👉 @seniorFront

Тебя точно собираются уволить

Вы приходите на работу — а вам больше не дают задач. Коллеги внезапно перестают здороваться, а начальник при всех называет вас «бесполезным балластом». Вас нагружают невыполнимым объемом работы, а потом обвиняют в «профнепригодности». Было ли у вас такое? Может вы были свидетелем таких процессов?

👉 @seniorFront

Smooth 3d perspective slider

Создано с использованием препроцессора Pug. Логика поворота карточки реализована на чистом JS.

👉 @seniorFront

Explosive Pixel Card Effect

В этом видео создается анимация при наведении на карточку на CSS и JS.

👉 @seniorFront

Когда сказал боссу, что без проблем сможешь работать на удалёнке

Также ты в первый же рабочий созвон:

👉 @seniorFront

🧑🏻‍💻Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать?

На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать!

После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке.

👉Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/3y2Z/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjcWo6Bo

Split 3D Carousel

Создано и анимировано на HTML и Stylus. Логика работы карусели реализована в JS.

👉 @seniorFront

Flipping Cards

Карточки с эффектом Parallax, реализованные на HTML и CSS.

👉 @seniorFront

Stunning Liquid Ripple Card Hover Effects

В этом видео создается эффект жидкости, следующей за курсором на карточке.

👉 @seniorFront

Product Showcase UI

Логика переключения слайдов реализована при помощи библиотеки Swiper.

👉 @seniorFront

Split Strings

Создайте функцию, которая принимает строку и разбивает эту строку на массив пар символов. Если последнему символу не хватает пары, то к нему добавляется ('_').

Примеры:
'abc' => ['ab', 'c_']
'abcdef' => ['ab', 'cd', 'ef']

👉 @seniorFront

React 19: что нового, что полезного, и куда мы движемся

Команда React подготовила много интересного — обновление обещает упростить разработку, повысить производительность и открыть новые горизонты для создания современных приложений.

Так что вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React.

👉 @seniorFront

​AbortController

Это встроенный объект, который позволяет отменять выполнение любых операций. Появился в ES2018 (ES9) для отмены fetch запросов, но позже его применение расширилось на другие операции.

Пример:

// Создаём контроллер
const controller = new AbortController()
const API_URL = 'https://jsonplaceholder.typicode.com'

// Делаем запрос с сигналом
fetch(`${API_URL}/posts/1`, { signal: controller.signal })
  .then((response) => response.json())
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Запрос был отменён')
    }
  })

// Отменяем запрос через 5 секунд
setTimeout(() => {
  controller.abort()
}, 5000)

Плюсы:
Простой способ узнать момент отмены операции;
Лаконичный синтаксис;
Не нужно хранить ссылку на функцию-обработчик.

Минусы:
Можно установить только один обработчик;
При повторном присвоении предыдущий обработчик теряется;
Нет прямого способа удалить обработчик (только присвоить null).

AbortController упрощает отмену асинхронных запросов в React-компоненте. Это особенно полезно при использовании React.StrictMode, чтобы избежать лишних запросов к серверу, так как StrictMode в development режиме запускает дополнительный цикл установки и сброса useEffect.

function SearchComponent() {
  const [search, setSearch] = useState('')
  const API_URL = 'https://jsonplaceholder.typicode.com'

  useEffect(() => {
    const controller = new AbortController()

    // Запрос отменится при новом поиске или размонтировании
    fetch(`${API_URL}/posts?userId=${search}`, { signal: controller.signal })
      .then(response => response.json())
      .then(data => console.log('Результаты:', data))
      .catch(error => {
        if (error.name === 'AbortError') return
        console.error(error)
      })

    // Очистка при размонтировании и ререндере
    return () => controller.abort()
  }, [search])

  return (/* ... */)
}

👉 @seniorFront

Glitchy button

Эффект при наведении создается при помощи библиотеки vfx-js.

👉 @seniorFront