https://codepen.io/frankyjo/pen/JjMqyNK - Делаем каркасную загрузку контента ( skeleton ) 🙂

PyScript убийца JavaScript ?

Не так давно на PyCon 2022, который проходил 27.04 - 03.05, был сделан анонс и объявили о новой технологии PyScript 🙂

Я немного прочитал про нее и вот, что узнал 🤔

Разработчики рассказали, что теперь можно будет писать код на Python, встраивать его, используя специальные HTML-теги, подключать JavaScript библиотеки и все это благодаря PyScript 🙂

Звучит вроде неплохо. К тому же, с PyScript не надо думать о развертывании специального программного обеспечения. Также, создатели рассказали, что теперь можно будет поделиться дашбордами и моделями в html-файле, который будет запускать код всякий раз, когда другие открывают этот файл в веб-браузере.

Что же такого интересного в PyScript?🤔
А то, что он построен Pyodide ( Pyodide предоставляет способ запуска Python в браузере ) . А в будущем, PyScript может начать поддерживать написание и выполнение кода и на других языках🙃

Альфе-версию вы можете посмотреть на сайте pyscript.net

В общем, Python теперь в браузере благодаря PyScript

https://codepen.io/frankyjo/pen/dydKRgZ - красивая карточка на чистом CSS

https://codepen.io/frankyjo/pen/vYRerEB - пульсирующая кнопка

https://codepen.io/frankyjo/pen/vYRzzXP - анимированный текст

https://codepen.io/frankyjo/pen/jOzjaGb - анімація тексту

https://codepen.io/frankyjo/pen/eYrzbvM - Цікавий ховер ефект при наведенні на карточку

Сьогоді стартує перше всеукраїнське змагання по джаваскрипту - JS Dark Ninja 🥷

Такого ще ніхто не робив! 🔥

КОЛИ: 8 квітня 2023 з 14 до 18 год.

ДЕ: Онлайн.

ЯК: Купуй квиток на сайті https://targer.dev

Спеціально для читачів каналу 50% знижки по промокоду POPOV 😏 - усього 6 дол, а скільки користі!

Виріши всі таски швидше і краще ніж інші учасники і отримай:
→ Почесний титул JS Dark Ninja 🥷
→ Винагороду переможця - 4096 грн 🤑
→ Усі топ три учасники отримають круті футболки
→ 50% доходів йде на донат ЗСУ.

Поспішай зареєструватись 👍

Репост другу якого інвайтиш на змагання 🤙

Команда Fwdays запрошує на онлайн-конференцію JavaScript fwdays’23!

Next.js, Vue.js, blockchain, Firebase, CRDT, System Design interview, memory management та багато іншого 🙌

🗓 Основні дні конференції – 16 та 20 травня (вівторок та субота).
🗣 Доповіді англійською та українською мовами.
💻 Додаткові будні дні з воркшопами.

А також вони готують дещо цікаве в офлайн форматі 🤫

🎙 Серед спікерів:
Kent C. Dodds – виступить із доповіддю “Caching for Cash”.
Олексій Левжинський (Grammarly) – презентує доповідь “Grokking System Design interview for Front-end Engineer”.
Катерина Поршнєва – поділиться “Visualised guide to memory management in JavaScript”.
Ілля Климов (JavaScript.Ninja) 🤩

Є два варіанти участі:
✔️FREE ONLINE
✔️FULL ONLINE (доступ до записів всіх ефірів після івенту, участь у воркшопах)

Реєструйтесь безкоштовно або використайте промокод Денис10% та отримайте знижку 10%, деталі за посиланням 🔗https://bit.ly/3ZwY57M

Для тих мене постійно про неї питає

Сем Альтман за рішенням ради директорів залишив посаду CEO OpenAI
Що думаєте про це?

Lazy Loading у React: Ефективне Завантаження Медіафайлів 🚀

🔍 Що таке Lazy Loading?
Lazy Loading - це техніка в веб-розробці, яка дозволяє затримати завантаження об'єктів на сторінці (наприклад, зображень) до того моменту, коли вони стають необхідними. Це може значно покращити продуктивність та час завантаження сторінок.

🌟 Як використовувати Lazy Loading у React?

1. React.lazy та Suspense:

React.lazy дозволяє динамічно імпортувати компоненти, які завантажуються тільки за потреби.
Використовуйте <Suspense> для відображення запасного контенту, поки компонент завантажується.


2. Бібліотеки для лінивої загрузки зображень:

Використовуйте готові рішення, такі як react-lazy-load-image-component.
Ці бібліотеки дозволяють легко завантажувати зображення, коли вони потрапляють у поле зору.

3. Власна реалізація з Intersection Observer API:

Створіть компонент, який використовує Intersection Observer API для відстеження видимості елементів.
Завантажуйте медіа тільки коли елемент стає видимим.

5️⃣ способів створення об'єкта в JavaScript

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

1. Літерали об'єктів

Літерали об'єктів - це найпростіший і найшвидший спосіб створення об'єктів у JavaScript за допомогою фігурних дужок {}. Цей метод ідеально підходить для створення окремих, самостійних об'єктів, яким не потрібен шаблон або повторне створення.

const car = {
make: 'Toyota',
model: 'Corolla',
year: 2021
};

console.log(car);

2. Синтаксис new Object()

Створення об'єкта за допомогою синтаксису new Object() - це більш явний спосіб створення об'єктів у програмуванні на JavaScript. Це схоже на літерали об'єктів, але може бути більш зрозумілим для тих, хто прийшов з інших мов програмування.

const person = new Object();
person.name = 'John';
person.age = 30;
person.isEmployed = true;

console.log(person);

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

3. Конструкторні Функції

Конструкторні функції використовуються для створення декількох екземплярів подібних об'єктів. Вони діють як шаблон для створення об'єктів одного типу в JavaScript.

function Smartphone(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
}

const myPhone = new Smartphone('Apple', 'iPhone 13', 2021);
console.log(myPhone);

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

4. Метод Object.create()

Object.create() в JavaScript створює новий об'єкт із зазначеним прототипом та властивостями. Цей метод надає більше контролю над успадкуванням об'єктів, ніж інші методи.

const animal = {
type: 'Animal',
displayType: function() {
console.log(this.type);
}
};

const dog = Object.create(animal);
dog.type = 'Dog';
dog.displayType(); // Вивід: Dog

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

5.Синтаксис класів ES6
Класи ES6 пропонують більш традиційний, класовий спосіб створення об'єктів у JavaScript. Це синтаксичний цукор над прототипним успадкуванням JavaScript, але надає більш чіткий та знайомий синтаксис для тих, хто прийшов з класових мов.

class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}

getSummary() {
return ${this.title} написана ${this.author} у ${this.year} році;
}
}

const myBook = new Book('1984', 'Джордж Орвелл', 1949);
console.log(myBook.getSummary());

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

Який метод найкращий та найшвидший?

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

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

10 хаків JavaScript для прискорення вашої розробки

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

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

🔹Опціональне ланцюження: Опціональне ланцюження (?.) - це потужна функція, яка запобігає помилкам при доступі до вкладених властивостей або методів об'єкта. Дозволяє вам елегантно обробляти ситуації, коли деякі властивості або методи можуть бути не визначені або null. Використовуючи опціональне ланцюження, ви можете уникнути довгих if-операторів і писати більш лаконічний і надійний код.

🔹Оператор нульового об'єднання: Оператор нульового об'єднання (??) надає лаконічний спосіб присвоєння значення за замовчуванням, коли змінна є null або undefined. Це особливо корисно при роботі з умовними виразами або отриманням значень об'єктів. Використовуючи оператор нульового об'єднання, ви можете усунути втомливі перевірки на null і отримати стрункий код.

🔹Promises і Async/Await: Promises та async/await - це ключові функції для керування асинхронними операціями в JavaScript. Promises дозволяють вам обробляти асинхронні завдання та обробляти успіх або невдачу за допомогою методів .then() та .catch(). Async/await надає більш елегантний і синхронний синтаксис для обробки обіцянок, роблячи асинхронний код більш читабельним та зручним для підтримки.

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

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

🔹Відладка за допомогою консолі: Об'єкт консолі в JavaScript забезпечує потужні можливості відладки. Понад консоль.log(), ви можете використовувати консоль.warn(), консоль.error() і консоль.table(), щоб покращити свій робочий процес відладки. Крім того, використання плейсхолдера %c в консолі.log() дозволяє вам стилізувати ваші повідомлення консолі, роблячи їх більш візуально привабливими та легшими для розрізнення.

🔹Оптимізація продуктивності: Щоб оптимізувати продуктивність вашого JavaScript-коду, розгляньте такі методи, як мінімізація маніпуляцій з DOM, зменшення вимог до мережі та використання пам'яті в кеші браузера. Крім того, використання таких інструментів, як вкладка "Продуктивність" в Chrome DevTools, може допомогти виявити вузькі місця в продуктивності і дати уявлення про можливості оптимізації.

🔹Модулі ES6: ES6 представив власну систему модулів для JavaScript, яка дозволяє вам організовувати та модулювати ваш код. Використовуючи модулі, ви можете інкапсулювати функціональність, заохочувати повторне використання та покращити зручність обслуговування вашого коду. Оператори імпорту та експорту дозволяють вам імпортувати функції, об'єкти або класи з інших файлів та експортувати їх для використання в інших модулях.

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

Застосування купона WooCommerce до кошика через URL

http://yourshop.local/checkout/?add-to-cart=21&coupon=sales20

Направте користувачів прямо на сторінку оформлення замовлення з конкретним продуктом (за ID, 21), доданим до їхнього кошика, і автоматично застосованим кодом купона «sales20».

Що треба зробити щоб це працювало ?

Ви можете додати цей код на свій сайт у function.php

function my_woocommerce_apply_cart_coupon_in_url() {

if ( ! function_exists( 'WC' ) || ! WC()->session ) {
return;
}


if ( empty( $_REQUEST['coupon'] ) ) {
return;
} else {
$coupon_code = esc_attr( $_REQUEST['coupon'] );
}


WC()->session->set_customer_session_cookie(true);


if ( ! WC()->cart->has_discount( $coupon_code ) ) {


WC()->cart->add_discount( $coupon_code );
}
}
add_action('wp_loaded', 'my_woocommerce_apply_cart_coupon_in_url', 30);
add_action('woocommerce_add_to_cart', 'my_woocommerce_apply_cart_coupon_in_url');

Тепер просто згенеруйте url і можете зашивати його в посилання 😉