Stunning Particle Background Effect

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

👉 @seniorFront

— То, что быстренько поднял, то как будто не ронял.
— Девопс из вас так себе

👉 @seniorFront

Variable Fonts

Текст анимируется в JS. Параметры анимации можно изменять при помощи интерфейса, созданного библиотекой dat.gui.

👉 @seniorFront

🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище!

На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API.

Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов!

⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/tblH/

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

day and night

Переключатель день-ночь, реализованный на чистых HTML и CSS.

👉 @seniorFront

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