Lead Software Engineer в Mate academy
  • Оживлюємо UI: дорожня карта підходів до CSS animations

    Дякую за цікаві деталі 📹

  • Оживлюємо UI: дорожня карта підходів до CSS animations

    Різні фільтри дають різний ефект. Базу можна прочитати в статті від CSS Tricks

    Загалом калькуляція відбувається в основному на CPU. Браузери також можуть юзати GPU для обчислення фінального результату, але дані ще потрібно підготувати для підрахунку і передати на GPU. Тут важливо розуміти, що є фільтри і властивості, які впливають на пікселі 1:1, а є більш затратні. До 1:1 можна віднести, наприклад, той же filter: grayscale чи mix-blend-mode. Коли 1 піксель елемента, до якого примінили властивість, впливає на 1 піксель в документі. До більш затратних фільтрів можна віднести filter: blur(5px) чи drop-shadow. Наприклад blur(5px) для кожного пікселя елементу має прорахувати сусідні точки в радіусі 5px. Тому дуже затратно не те що анімувати, а навіть рендерити фільтри, особливо, якщо вони впливають на документ не 1:1. Яскравий приклад — сторінка apple airpods. Тут можна побачити, що safari, наприклад, дуже оптимізований для використання filter:blur(). Відео добре програється і розмивається в safari, а в chrome — глючить.

    Я б рекомендував використовувати фільтри чи blend-mode для статичних елементів. Наприклад, відрендерити текст над картинкою з blend-mode — OK. А от робити fixed header з умовним backdrop-filter: blur() вже не так добре. При скролі браузер постійно перераховуватиме ефект і це вплине на fps.

    Поддержали: Каte Ilchenko, Oleksandr
  • Оживлюємо UI: дорожня карта підходів до CSS animations

    Загалом правила ± однакові для всіх браузерів. Але сафарі тут трохи відрізняється. Навіть transform чи opacity можуть давати просадку в fps. Я в таких випадках точково додаю
    transform: translateZ(0);
    або
     backface-visibility: hidden;
    до потрібного елемента і це допомагає.

    Детальніше про backface-visibility тут

    Також важливо не заграватися з винесенням всього підряд в окремі шари. Мені доводилось дебажити сайт, який, при відкритті на iOS, просто крешив девайс і змушував його перезавантажуватись. Коли зменшив кількість шарів — проблема зникла.

    Проблема в тому, що кожен шар потребує виділення додаткової пам’яті і телефон може просто аварійно завершити роботу, коли пам’яті треба занадто багато.

    Детальніше про це описано в в статті

  • Mate academy, кто, что скажет?

    Легко. Работает, проверил лично. Скачиваешь «Полный справочник по C#» Шилдта ...

    Ти перевірив на власному досвіді і оперуєш даними одного випадку. Тут дуже велика ймовірність натрапити на «помилку того, хто вижив». Раджу спробувати відповісти на декілька запитань:

    — скільки з твоїх знайомих так і не змогли влаштуватись на роботу, прочитавши дані книги?

    — чому саме ці автори? Є дані по працевлаштуванню, якщо читати інші книги?

    Ми оперуємо даними 700+ працевлаштованих студентів з рівнем працевлаштування ~90% і бачимо на власному досвіді, як зміни в програмі впливають на знаходження роботи.

    Загалом ринок джуніор вакансій зараз дуже конкурентний і вказівки вроді «прочитай книгу» і «напиши pet project» не працюють, якщо людина взагалі не знає, куди рухатись. Потрібен ментор, який розблокує в потрібний момент, порев’ювить код і допоможе структурувати всі теоретичні знання.

    Тут ми підходимо до наступного пункту:

    Вы читаете книжки вслух за большие деньги.

    Крім теорії, яка досить добре структурована в навчальній програмі, в нас передбачаються також
    — практичні заняття: домашні завдання з код рев’ю, ранкові задачі для покращення розуміння синтаксису мови програмування а також розробка проектів, які потім не соромно додати в CV
    — перевірка засвоєння матеріалу: екзамени, тех-чеки з ментором (це коли тебе ганяють по теорії і звертають увагу, що треба «підтягнути»)
    — заняття з англійської декілька разів на день. Студенти мають змогу відвідувати заняття з будь якого рівня на протязі всього терміну співпраці (читай 4 місяці навчання + 2 роки після працевлаштування)

    З групою працює безпосередньо тренер та 4 ментори. Всі з актуальним production досвідом.

    Для людей «з нуля» ми зробили безкоштовний курс по основах Javascript. Ми віримо, що, пройшовши цей курс, в людей буде достатньо знань, щоб пройти співбесіду і почати повноцінне навчання в Mate. Якщо ж курс не зайде, ми будемо раді почути фідбек і зробити його ще краще.

    mate.academy/...​sign-up/javascript-basics

    Я называю это «кабальный договор» ...

    В світі правильно це називати «Income share agreement».
    en.wikipedia.org/...​ki/Income_share_agreement

    Доречі, якщо відсоток від ЗП лякає, в нас є опція оплати всієї суми безпосередньо після працевлаштування.

    Також є опція навчання за передплатою. Та ж сама програма з код рев’ю і «плюшками» фултайм навчання, тільки в своєму темпі.

    Поддержал: Максим Журавлёв