JavaScript_Mania 🇺🇦

2023-01-14 18:42:01 Кожному потрібен RoadMap

Вченими будо доведенно, якщо людина має чіткий покроковий план дій, вона з більшою вірогідністю виконає їх.

Тому пропоную вам також спробувати.

Тримайте узагальнений roadmap для Front-end

https://roadmap.sh/frontend

#motivation || JavaScript_Mania

Відкрити / Коментувати

2023-01-10 01:11:04 А вам відомо, що ви можете продавати свій код як цифровий товар?

TemplateMonster -
заснована в Україні
https://www.templatemonster.com/

Envato(раніше ThemeForest) - Австралійска компанія
https://themeforest.net/

Якщо ви веб-девелопер та бажаете продавати свій код як товар, то раджу вам розглянути ці дві платформи.

Це маркетплейси цифрових товарів для сайтів. Там ви зможете як купити , так і продати - шаблони сайтів, різні js-сценарії, php-сценарії та багато іншого.

Для цього вам потрібно зареєструватись на цих платформах, підготувати свій код як потребує того маркетплейс та почати продавати.

За кожну продажу, платформа утримує з вас процент, він може бути різним - це залежить від того наскільки унікальний контент ви продаєте на платформі(якщо ви свій код більше ніде не продаете) та інше.

Багато веб-студій взагалі працювали виключно на цих платформах та продавали комплексно з підтримкою.

#info || JavaScript_Mania Відкрити / Коментувати

2023-01-06 16:00:18 https://vincentgarreau.com/particles.js/

Екосистема JavaScript налічує безліч цікавих бібліотек.

Ось, тримайте лінк на одну стару, але цікаву лібу.

Ліба була популярна серед компаній, котрі хотіли презентувати себе в інтернеті, але не могли багато витрачати на сайт. На допомогу приходили ліби схожі на цю.

За невеликий час і бюджет можна було зробити доволі презентабельний сайт(зазвичай, візитівка або лендінг). Популярність цієї ліби була дуже стрімкою, тому і спад відповідно також дуже сильний. Відразу як заходишь на сайт, то можна було впізнати цю лібу.

Тому мета компаній отримати красивий і дійсно цікавий сайт с крутими анімаціями перетворилось на те, що всі почали використовувати одні і тіж ліби - що і «вбило» індивідуальність кожного сайту.

З технічної точки зору, для використання ця ліба має суттєвий недолік, а саме її перфоманс. Так як будь-яка анімація потребує ресурсів для своєї роботи, юзери часто стикались з тим, що сайт на який вони хотіли зайти - або дуже сильно глючив, а якщо ж цей сайт ще мав багато інших медіа ресурсів, то ж чекаючи поки він завантажиться, цікавість до нього падала.

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

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

Підсумок:

анімація реально крута, якщо включити її то можна «залипнути» в неї

анімація дозволяє швидко зробити цікаву сторінку на сайті для юзера

потребує багато ресурсів для рендеру, тому використання обмежено

ліби такого типу дуже впізнавані, тому індивідуальність сайту буде страждати

#education || JavaScript_Mania Відкрити / Коментувати

2023-01-01 17:52:37 Чому вам буде складно в IT

Ви не готові постійно вчитися новому
- Технології дуже швидко розвиваються, потрібно постійно актуалізувати свої знання.

- Також недостатньо просто вивчати нові бібліотеки, фреймворки тощо. Необхідно підтягувати фундаментальні знання у сфері алгоритмів, патернів проектування, розбиратися як працюють технології, що вони “під капотом”. За умови, що ви не хочете бути простим ремісником, який навчився лише керувати молотком та сокирою.

- Сучасне життя прискорилося мінімум у 2 рази, потрібно вчитися швидко освоювати нову інформацію та забувати стару (непотрібну), вчити та застосовувати нові технології для вирішення бізнес-завдань.

Ви непоправний перфекціоніст
- Найчастіше виходить так, що написаний вами код скоро перепишуть або зовсім викинуть як непотрібний.

- Ви повинні вміти керувати цією властивістю в собі, іноді для бізнесу важливіша швидкість виконання завдання. Викотити на прод перший mvp краще, ніж вилизувати код і прикручувати поверх різні поліпшення. Таким чином, бізнес може отримувати вже фідбек або отримувати прибуток від вашого модуля.

Ви не вмієте відпочивати
- Як не дивно, але вміти відпочивати і перемикатися від роботи - це ще та навичка, яку потрібно розвивати. Професія має на увазі, що ви постійно завантажуватимете свій мозок на 100%, від такої активності потрібно правильно відпочивати. Я впевнений, що кожен з нас хоч раз відчував таке почуття, ніби голова "ватна" і складно сконцентрувати увагу.

– Звучить банально, але спорт – це важливо. Займайтеся спортом, будь-яким, хоч би зарядкою. Інакше – біль у спині, нервові зриви, зайва вага, слабкість тощо. Воно вам треба?

#motivation || JavaScript_Mania Відкрити / Коментувати

2023-01-01 17:52:13 Відкрити / Коментувати

2023-01-01 17:25:12 https://codepen.io/javascript_mania/pen/vYaKGRK

Всім привіт!

GO розбирати фліп-анімацію?

ЩО?
ФЛІП - анімація

ДЕ?
ФЛІП-анімація найчастіше використовується на картці, в якій винесено ключові властивості або переваги товару, послуги тощо.

ЗВЕРНУТИ УВАГУ

Ця анімація реалізується за допомогою таких властивостей CSS
backface-visibility
transform-style
perspective

АНІМАЦІЯ:

При наведенні курсору на картку вона повинна перевертатися задньою гранню

ЯК?:
Готуємо HTML-розмітку

Картка складається з обгортки, в якій є 2 блоки, передня та задня частина відповідно. Дані елементи повинні бути накладені один на одного і в початковому стані її задня частина повинна бути перевернута на 180 градусів, ніби розташована до нас спиною.



Маємо грані абсолютним позиціонуванням один на одному і додамо їм властивість backface-visibility, ця властивість визначає видимість задньої грані елемента

Даній властивості надамо значення «hidden», таким чином ми приховуємо задню частину карток, що обертаються.

Додамо властивість transform-style: preserve-3d, тому що картки повинні обертатися в 3D-просторі

щоб анімація виглядала правильно - потрібно додати час виконання анімації transition: all 500ms linear; , без неї картка миттєво змінюватиме грань і користувач не побачить ефекту повороту

Щоб поворот картки виглядав красиво - додаємо властивість perspective: 1000px; , що надає перспективу елементу, що позиціонується у 3D-просторі

—

-Властивість backface-visibility визначає, чи видно задню грань елемента, коли він повернутий до користувача.

-hidden Задня поверхня прихована, що робить елемент невидимим, коли він повернуто від користувача.

-Властивість CSS perspective визначає відстань між площиною z = 0 і користувачем для того щоб надати 3D-позиціонується елементу ефект переспективи.

-Властивість transform-style CSS визначає положення дочірнього елемента в 3D-просторі або в тій же площині, що і батьківський елемент.

-preserve-3d - Показує, що дочірній елемент має бути спозиційований у 3D-просторі.

—

Анімація готова!

#education || JavaScript_Mania Відкрити / Коментувати

2023-01-01 17:22:36 Відкрити / Коментувати

2022-12-31 00:47:00 Що таке JavaScript?

Це мова програмування, яка здебільшого використовується для створення сценаріїв у веб додатках що надає можливість на боці браузера взаємодіяти з користувачем, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд вебсторінки.

Цей потужний інструмент, використовується в кожному сучасному веб додатку. Його екосистема налічує більше ніж 1000 різних бібліотек та фреймворків. Завдяки цьому, програмісти можуть вирішувати різноманітні бізнес-задачі у своїй роботі.

Вивчивши JavaScript ти можеш:

- писати сценарії для вебсторінок
- створювати односторінкові вебзастосунки
- створювати програми на боці сервера
- мобільні застосунки
- Та багато іншого…

#info || JavaScript_Mania Відкрити / Коментувати

2022-12-30 23:57:55 Channel name was changed to «JavaScript_Mania » Відкрити / Коментувати

2022-12-30 23:56:01 Channel name was changed to «JavaScript_Mania» Відкрити / Коментувати