Вы не знаете CSS. Мои вопросы о CSS с ответами

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.

👉 @seniorFront

​Зачем нужен Nginx?

Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.

Как Nginx раздаёт фронтенд-приложение?
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

Как Nginx проксирует запросы к бэкенду?
Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Как Nginx балансирует нагрузку?
Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

Как Nginx ускоряет сайт с кэшем?
Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

👉 @seniorFront

Responsive app switcher

Создано на HTML и CSS. Анимация запускается при попадании элемента во viewport. Это реализовано с помощью CSS view().

👉 @seniorFront

​Гореть, но не сгорать: практические советы по борьбе с burnout’ом

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

Что на самом деле нужно делать?
Только системный подход, только хардкор — смена личных и рабочих привычек, выстраивание нового подхода к рабочему процессу. Ниже — несколько советов.

Отказываемся от перфекционизма
Перфекционизм в ИТ не только бесполезен, но даже опасен. Код не обязан быть идеальным с первой попытки, а технический долг — это нормальная история. Можно попробовать упражнение «достаточно хорошо»: установить четкие критерии завершения задачи и не позволять себе бесконечно её улучшать. Никаких больше «Нет предела совершенству».

Меняем отношение к ошибкам и достижениям
Теперь баг — это не не доказательство некомпетентности, а часть нормального рабочего процесса. Параллельно с этим переводим фокус на позитив. Можно отдельно записывать собственные достижения, например, решенные задачи, положительный фидбек от коллег или пользователей. Перечитываем, когда накатывает.

Беремся за физическое восстановление
Здоровье у вас одно, стимуляторы из Fallout у нас пока не изобрели, а бионические протезы не так доступны, как в Cyberpunk 2077. Поэтому беремся за восстановление организма. Учимся замечать усталость. В глазах рябит от кода, в голове туман — идем отдыхать, а не терпим. Можно попробовать внедрить правило 90/30 (30-минутный отдых каждые полчаса) или другой формат перерывов. Естественно, во время отдыха не скроллим ленты и стараемся вообще не смотреть в экран. Обедаем где-нибудь вдали от клавиатуры, если на удаленке — тем более.

Если новые привычки внедрять сложно, делаем это постепенно. Например, сначала учимся по-настоящему уходить на перерыв от работы. Потом отказываемся от гаджетов во время отдыха.

Главное — помните. К этому состоянию вы пришли не за один месяц, а значит, восстановление тоже займет какое-то время. Не ждите, что после недельки в новом режиме или отпуска сразу все наладится.

👉 @seniorFront

5 способов повышения эффективности команды

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

👉 @seniorFront

Sphere Packing

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

👉 @seniorFront

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