Команда 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
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
Fwdays
Конференція JavaScript fwdays’23
Conference for JavaScript developers
Forwarded from ІТ спільнота targer.dev 👨💻👩🏼💻 (Oleksii Shnyra)
Субдомени для локалхоста! 🤩
Це вже працює в твоєму хром браузері, не потрібно нічого конфігурити.✅
Як це?❓
1️⃣ - запусти свою фронтенд апку як зазвичай, наприклад localhost:3000
2️⃣ - пропиши будь-який субдомен і та сама апка буде працювати, наприклад admin.localhost:3000 💫
Для чого це?❓
Цей підхід дуже зручно використовувати для багато-ролевих апок.
Тому що кожен субдомен - це як окремий домен для браузера.
А значить:
→ ізольований контекст (LocalStorage, Cookies, Notifications etc)
→ окремі збережені паролі, підсказки автокомпліта
Щоб в одному браузері відкрити різні таби апки з різними субдоменами - і авторизуватись різними ролями / юзерами і тестувати як працює взаємодія між ними.
Кілька слів про браузери:
→ працює в сучасних версіях Chrome, Firefox
→ не працює в Safari
→ має працювати в інших chromium-based браузерах
Стосовно запуску різних проєктів✍️
Можна різні проєкти запускати на різних субдоменах щоб зберігати різні автокомпліти, авторизацію.
❗️ Але я рекомендую запускати різні апки на різних портах, тобто localhost:3040, localhost:4050 тощо.
Кожна апка для локального девелопменту повинна мати свій унікальний порт.✍️
Тому що:
→ не має конфлікту контекстів різних апок (не перетирається localStorage, не міксуються кукі та інші persistent data тощо)
→ різні апки можна запустити одночасно
→ кожен порт прописується в коді (енвах) = хороша конвенція
Отримав користь?
Репости друзям, вподобай цей допис щоб ще більше девелоперів дізналось😉
#coding #dx
Це вже працює в твоєму хром браузері, не потрібно нічого конфігурити.
Як це?
Для чого це?
Цей підхід дуже зручно використовувати для багато-ролевих апок.
Тому що кожен субдомен - це як окремий домен для браузера.
А значить:
→ ізольований контекст (LocalStorage, Cookies, Notifications etc)
→ окремі збережені паролі, підсказки автокомпліта
Щоб в одному браузері відкрити різні таби апки з різними субдоменами - і авторизуватись різними ролями / юзерами і тестувати як працює взаємодія між ними.
Кілька слів про браузери:
→ працює в сучасних версіях Chrome, Firefox
→ не працює в Safari
→ має працювати в інших chromium-based браузерах
Стосовно запуску різних проєктів
Можна різні проєкти запускати на різних субдоменах щоб зберігати різні автокомпліти, авторизацію.
Кожна апка для локального девелопменту повинна мати свій унікальний порт.
Тому що:
→ не має конфлікту контекстів різних апок (не перетирається localStorage, не міксуються кукі та інші persistent data тощо)
→ різні апки можна запустити одночасно
→ кожен порт прописується в коді (енвах) = хороша конвенція
Отримав користь?
Репости друзям, вподобай цей допис щоб ще більше девелоперів дізналось
#coding #dx
Please open Telegram to view this post
VIEW IN TELEGRAM
Сем Альтман за рішенням ради директорів залишив посаду 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 для відстеження видимості елементів.
Завантажуйте медіа тільки коли елемент стає видимим.
🔍 Що таке 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
}
}
const myBook = new Book('1984', 'Джордж Орвелл', 1949);
console.log(myBook.getSummary());
Використовуйте класи ES6 для більш складних застосунків, де важливі організація, читабельність та структура успадкування вашого коду. Вони корисні для масштабних застосунків та при роботі в команді, де потрібні чіткі та стандартизовані практики кодування.
В 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.
Не існує універсальної відповіді на питання про найкращий та найшвидший спосіб створення об'єктів, оскільки це значною мірою залежить від конкретних вимог та контексту вашого застосунку. Однак, з точки зору простоти та швидкості, літерали об'єктів є найшвидшим і найпростішим способом створення об'єктів, особливо для простих, одноразових об'єктів. Для більш складних та структурованих застосунків класи 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, яка дозволяє вам організовувати та модулювати ваш код. Використовуючи модулі, ви можете інкапсулювати функціональність, заохочувати повторне використання та покращити зручність обслуговування вашого коду. Оператори імпорту та експорту дозволяють вам імпортувати функції, об'єкти або класи з інших файлів та експортувати їх для використання в інших модулях.
🔹Деструктуризація присвоєнь: За допомогою деструктуризації присвоєнь ви легко можете витягувати значення з масивів або об'єктів. Замість традиційного присвоєння змінних, ви можете безпосередньо витягувати конкретні значення за допомогою лаконічного синтаксису. Це допомагає писати чистіший, більш зрозумілий код, особливо при роботі зі складними структурами даних.
🔹Синтаксис розповсюдження: Синтаксис розповсюдження (три крапки: ...) дозволяє вам розширювати масиви, об'єкти або аргументи функцій на окремі елементи. Це надзвичайно корисно для завдань, таких як злиття масивів, клонування об'єктів або динамічне передавання кількох аргументів функції. Ця функція спрощує маніпуляції з даними та може значно зменшити мовність вашого коду.
🔹Опціональне ланцюження: Опціональне ланцюження (?.) - це потужна функція, яка запобігає помилкам при доступі до вкладених властивостей або методів об'єкта. Дозволяє вам елегантно обробляти ситуації, коли деякі властивості або методи можуть бути не визначені або 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 і можете зашивати його в посилання 😉
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 і можете зашивати його в посилання 😉
З наближенням випуску React 19 обіцяються деякі чудові функції. Цей реліз не просто чергове оновлення, він має на меті перевизначити наш підхід до коду React. Обіцяючи надати покращену швидкість, ефективність та більш зручний досвід кодування, React 19 має на меті підняти веб-розробку на новий рівень. Давайте поглибимося в те, що React 19 готує для нас у майбутньому релізі.
🔹Компілятор React
Введення компілятора React у версії 19 означає значну трансформацію у розробці React, встановлюючи новий стандарт оптимізації продуктивності. З кодовою назвою "Forget", цей інноваційний компілятор розроблений для трансформації коду React у стандартний JavaScript, потенційно подвоюючи його ефективність.
Основна проблема, яку адресує "Forget", - відоме обмеження в React — непотрібне повторне рендеринг цілих компонентів, навіть коли змінюються лише незначні частини. Історично, розробники React використовували хук useMemo для кешування результатів між рендерингами, процес, який вимагав ручного втручання і часто призводив до більш складних структур коду. Компілятор React елегантно автоматизує цю оптимізацію, обіцяючи не лише підвищену продуктивність, але й перехід до чистішого та більш організованого коду.
Значним досягненням для компілятора React є його впровадження у виробниче середовище на Instagram, що демонструє його ефективність та стабільність. Однак важливо зазначити, що наразі цей компілятор залишається пропрієтарним, ще не випущеним як відкрите програмне забезпечення. Це обмежує ширший доступ спільноти та інтеграцію, але це значний крок вперед у демонстрації практичного застосування та переваг цієї технології у реальному, масштабному середовищі.
🔹Екшини (Action): Легше робота з даними
React 19 вводить Екшини, що спрощує роботу з даними у вашому додатку. Думайте про Екшини як про розумний спосіб з'єднати функції з речами, такими як форми у вашому додатку. Вони організовано обробляють дані, незалежно від того, чи дії відбуваються негайно, чи займають деякий час. Це робить написання коду для форм і оновлень даних простішим і більш організованим.
🔹 Серверні компоненти: Швидші веб-сайти та краще SEO
Компоненти сервера є однозначно чудовою новою функцією в React 19. Вони дозволяють частинам вашого веб-сайту рендеритися на сервері, а не лише у браузері користувача. Це означає, що ваш веб-сайт завантажується швидше, коли хтось відвідує його вперше, і це краще для SEO. Це особливо корисно для веб-сайтів, які мають багато контенту або потребують легкого знаходження у пошукових системах.
🔹Завантаження ресурсів ( assets) : Більше не треба чекати на зображення та стилі
Це все про забезпечення плавної роботи вашого веб-сайту. Чи коли-небудь ви бачили текст або зображення, що раптово з'являються на веб-сайті? Завантаження ресурсів виправляє це, переконуючись, що все завантажено і готове до показу користувачу. Це означає більш професійний вигляд для вашого сайту.
🔹Метадані: З SEO стане все простіше
React 19 полегшує управління SEO-частиною вашого веб-сайту. З Метаданими документа ви можете легше контролювати речі, такі як заголовок сторінки та описи по всьому вашому сайту. Це допомагає вашому веб-сайту краще ранжуватися у результатах пошуку та зберігати ваш бренд однаковим скрізь.
Дійсно захоплює бачити, як функції на кшталт компілятора React, Метаданих документа та екшинів розвиваються.
Вони починалися як просто ідеї, з якими експериментувала команда React, а тепер готуються до реального використання. Буде чудово побачити, як вони працюють у реальних проектах, і я дійсно з нетерпінням чекаю на можливість спробувати їх у React 19!
Переклад статті 👉https://javascript.plainenglish.io/react-19-is-changing-everything-abff82a13f3e
🔹Компілятор React
Введення компілятора React у версії 19 означає значну трансформацію у розробці React, встановлюючи новий стандарт оптимізації продуктивності. З кодовою назвою "Forget", цей інноваційний компілятор розроблений для трансформації коду React у стандартний JavaScript, потенційно подвоюючи його ефективність.
Основна проблема, яку адресує "Forget", - відоме обмеження в React — непотрібне повторне рендеринг цілих компонентів, навіть коли змінюються лише незначні частини. Історично, розробники React використовували хук useMemo для кешування результатів між рендерингами, процес, який вимагав ручного втручання і часто призводив до більш складних структур коду. Компілятор React елегантно автоматизує цю оптимізацію, обіцяючи не лише підвищену продуктивність, але й перехід до чистішого та більш організованого коду.
Значним досягненням для компілятора React є його впровадження у виробниче середовище на Instagram, що демонструє його ефективність та стабільність. Однак важливо зазначити, що наразі цей компілятор залишається пропрієтарним, ще не випущеним як відкрите програмне забезпечення. Це обмежує ширший доступ спільноти та інтеграцію, але це значний крок вперед у демонстрації практичного застосування та переваг цієї технології у реальному, масштабному середовищі.
🔹Екшини (Action): Легше робота з даними
React 19 вводить Екшини, що спрощує роботу з даними у вашому додатку. Думайте про Екшини як про розумний спосіб з'єднати функції з речами, такими як форми у вашому додатку. Вони організовано обробляють дані, незалежно від того, чи дії відбуваються негайно, чи займають деякий час. Це робить написання коду для форм і оновлень даних простішим і більш організованим.
🔹 Серверні компоненти: Швидші веб-сайти та краще SEO
Компоненти сервера є однозначно чудовою новою функцією в React 19. Вони дозволяють частинам вашого веб-сайту рендеритися на сервері, а не лише у браузері користувача. Це означає, що ваш веб-сайт завантажується швидше, коли хтось відвідує його вперше, і це краще для SEO. Це особливо корисно для веб-сайтів, які мають багато контенту або потребують легкого знаходження у пошукових системах.
🔹Завантаження ресурсів ( assets) : Більше не треба чекати на зображення та стилі
Це все про забезпечення плавної роботи вашого веб-сайту. Чи коли-небудь ви бачили текст або зображення, що раптово з'являються на веб-сайті? Завантаження ресурсів виправляє це, переконуючись, що все завантажено і готове до показу користувачу. Це означає більш професійний вигляд для вашого сайту.
🔹Метадані: З SEO стане все простіше
React 19 полегшує управління SEO-частиною вашого веб-сайту. З Метаданими документа ви можете легше контролювати речі, такі як заголовок сторінки та описи по всьому вашому сайту. Це допомагає вашому веб-сайту краще ранжуватися у результатах пошуку та зберігати ваш бренд однаковим скрізь.
Дійсно захоплює бачити, як функції на кшталт компілятора React, Метаданих документа та екшинів розвиваються.
Вони починалися як просто ідеї, з якими експериментувала команда React, а тепер готуються до реального використання. Буде чудово побачити, як вони працюють у реальних проектах, і я дійсно з нетерпінням чекаю на можливість спробувати їх у React 19!
Переклад статті 👉https://javascript.plainenglish.io/react-19-is-changing-everything-abff82a13f3e
https://www.jetbrains.com/phpstorm/whatsnew/?map=4 - тут можете ознайомитись з новим оновлення PhpStorm 2024.1
JetBrains
PhpStorm – What’s New in 2024.2
Log files support, auto-completion in the terminal for Laravel, Symfony, WordPress, and Composer, refactoring in a floating toolbar, and more!
Memoization є потужним прийомом оптимізації, що дозволяє значно підвищити швидкість виконання програм, особливо тих, що використовують рекурсивні функції або функції з високовитратними обчисленнями. Ідея memoization полягає у збереженні результатів виконання функцій, щоб у майбутньому при повторному виклику з тими ж аргументами можна було просто повернути збережений результат, минаючи необхідність перерахунку.
Переваги Memoization
🔹Основна перевага memoization полягає у значному зменшенні часу виконання програми за рахунок уникнення повторних обчислень.
🔹Для функцій, що виконують складні або ресурсоємні обчислення, memoization може сильно зменшити використання ресурсів.
🔹У рекурсивних функціях, таких як обчислення чисел Фібоначчі, memoization запобігає необхідності повторного обчислення вже відомих результатів.
Переваги Memoization
🔹Основна перевага memoization полягає у значному зменшенні часу виконання програми за рахунок уникнення повторних обчислень.
🔹Для функцій, що виконують складні або ресурсоємні обчислення, memoization може сильно зменшити використання ресурсів.
🔹У рекурсивних функціях, таких як обчислення чисел Фібоначчі, memoization запобігає необхідності повторного обчислення вже відомих результатів.
Давайте розглянемо приклад memoization із використанням в реальному проекті, наприклад, для оптимізації функції, що обчислює результати складних обчислень або запитів до бази даних. Уявімо, що ми розробляємо веб-сайт електронної комерції, де потрібно відображати вартість товарів у різних валютах в залежності від курсу валют, що часто змінюється.
Без memoization кожен запит користувача на перегляд ціни товару у певній валюті вимагав би нового запиту до API для отримання актуального курсу валют, що може бути витратно з точки зору часу та ресурсів.
Цей приклад показує, як мемоізація може бути використаний для підвищення продуктивності в реальних проектах, зменшуючи кількість звернень до зовнішніх сервісів та оптимізуючи швидкість відповіді сервера.
Без memoization кожен запит користувача на перегляд ціни товару у певній валюті вимагав би нового запиту до API для отримання актуального курсу валют, що може бути витратно з точки зору часу та ресурсів.
function currencyConverter() {
const cache = {};
return async function convert(amount, fromCurrency, toCurrency) {
const key = `${fromCurrency}_to_${toCurrency}`;
//Перевірка кешу для ключа: ${key}
if (key in cache) {
return cache[key] * amount;
}
// Якщо курс валют не знайдено у кеші. Запит до API для отримання курсу "fromCurrency" до "toCurrency"
// Припустимо, fetchCurrencyRate() це функція, що робить запит до зовнішнього API для отримання курсу валют
const rate = await fetchCurrencyRate(fromCurrency, toCurrency);
//Отримано курс валют - "rate" і зберігаємо його в кеш
cache[key] = rate;
return rate * amount;
}
}
Цей приклад показує, як мемоізація може бути використаний для підвищення продуктивності в реальних проектах, зменшуючи кількість звернень до зовнішніх сервісів та оптимізуючи швидкість відповіді сервера.
До речі, приклад що вище буде брати значення з кешу, навіть якщо данні по курсу зміняться. Тому щоб цього уникнути, можна, наприклад, зробити щоб кеш можна було оновлювати ще і за терміном його актуальності.
Можна зберігати час останнього оновлення курсу валют разом із самим курсом і перевіряти, чи не перевищив кеш зазначений як термін актуальності перед тим, як використовувати дані.
Можна зберігати час останнього оновлення курсу валют разом із самим курсом і перевіряти, чи не перевищив кеш зазначений як термін актуальності перед тим, як використовувати дані.
function currencyConverter() {
const cache = {};
const ttl = 3600000; // Час життя кешу в мілісекундах, наприклад, 1 година
return async function convert(amount, fromCurrency, toCurrency) {
const key = `${fromCurrency}_to_${toCurrency}`;
const currentTime = new Date().getTime();
if (key in cache && (currentTime - cache[key].timestamp) < ttl) {
return cache[key].rate * amount;
}
const rate = await fetchCurrencyRate(fromCurrency, toCurrency);
cache[key] = { rate: rate, timestamp: currentTime };
return rate * amount;
}
}
Радий вам представити JavaScript fwdays’24 — 14-та технічна конференція, яка присвячена JS, від команди Fwdays 🙌
🗓 Дата: 25 травня
🗣 Формат: офлайн (у Києві) та онлайн
🎙 Мови доповідей: українська та англійська
Спікери та їх доповіді:
📍Сергій Бабіч – Solution Architect у Edvantis.
У своїй доповіді “Як розпочати рефакторинг чужого коду, і при цьому не звільнитися за місяць”, Сергій розповість про те, з якими жахами довелося зіткнутися під час роботи над чужим кодом, як вдалося опанувати себе та почати одночасно додавати нові фічі й потихеньку осучаснювати старі.
📍Ілля Климов – 18 років пише на JavaScript, вже пʼятий рік – у GitLab.
Під час доповіді «Либідь, рак і щука: такий різний frontend у 2024» Ілля розкаже на чому встиг пописати (React Server Components, App Router, Qwik + Qwik City, HTMX + Alpine.js) і що з цього обрати.
📍Роман Савіцький – лідер веб та мобільної практики. Співзасновник BeerJS Zhytomyr.
Під час його доповіді “Javascript. Розвиток стандарту, коли всім начхати” спробуємо розібрати запитання: чи варто подивитись на JS, коли всі пишуть на TypeScript, що відбувається зі стандартом, що ми отримали минулого року, які новинки очікуємо цього та наступного року, і головне, коли стандартизують Observer?
Та не тільки!
Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3xCbDqf
Приєднуйтесь до JavaScript fwdays’24!
🗓 Дата: 25 травня
🗣 Формат: офлайн (у Києві) та онлайн
🎙 Мови доповідей: українська та англійська
Спікери та їх доповіді:
📍Сергій Бабіч – Solution Architect у Edvantis.
У своїй доповіді “Як розпочати рефакторинг чужого коду, і при цьому не звільнитися за місяць”, Сергій розповість про те, з якими жахами довелося зіткнутися під час роботи над чужим кодом, як вдалося опанувати себе та почати одночасно додавати нові фічі й потихеньку осучаснювати старі.
📍Ілля Климов – 18 років пише на JavaScript, вже пʼятий рік – у GitLab.
Під час доповіді «Либідь, рак і щука: такий різний frontend у 2024» Ілля розкаже на чому встиг пописати (React Server Components, App Router, Qwik + Qwik City, HTMX + Alpine.js) і що з цього обрати.
📍Роман Савіцький – лідер веб та мобільної практики. Співзасновник BeerJS Zhytomyr.
Під час його доповіді “Javascript. Розвиток стандарту, коли всім начхати” спробуємо розібрати запитання: чи варто подивитись на JS, коли всі пишуть на TypeScript, що відбувається зі стандартом, що ми отримали минулого року, які новинки очікуємо цього та наступного року, і головне, коли стандартизують Observer?
Та не тільки!
Використайте промокод POPOVJS10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3xCbDqf
Приєднуйтесь до JavaScript fwdays’24!
Fwdays
Конференція JavaScript fwdays’24
Conference for JavaScript developers
Що, якби ви мали реальний контроль над світлим/темним режимами для кожного сайту?
Про це можна почитати в цікавій статейці де на цю тему розмірковує Bramus Van Damme
https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/
Про це можна почитати в цікавій статейці де на цю тему розмірковує Bramus Van Damme
https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/
Bram.us
What if you had real control over Light Mode / Dark Mode on a per-site basis?
Dark Mode Toggle Buttons should be a browser feature. Thanks to the Web Preferences API, that might become a reality someday.
Temporal — це новий підхід до роботи з датами та часом у JavaScript, який включено до новітніх стандартів ECMAScript 2023. Він надає зручні об'єкти та методи для легшої роботи з датами, часом та часовими зонами. Цей API дозволяє працювати з різними календарями та підтримує виконання датових обчислень без залучення додаткових бібліотек. Наразі Temporal доступний для використання в проектах через поліфіл, який можна буде видалити після остаточного впровадження Temporal у стандарт ECMAScript
https://tc39.es/proposal-temporal/docs/
https://tc39.es/proposal-temporal/docs/
Про React 19: найцікавіше з оновлення - https://dou.ua/forums/topic/48550/
DOU
Про React 19: найцікавіше з оновлення
Подивився я, що нам готують хлопці з FB та Vercel, і що можу сказати: революції для таких розробників, як ми з вами, поки що не очікується.
Опишу те, що побачив з цікавого
Додали новий хук use </co
Опишу те, що побачив з цікавого
Додали новий хук use </co
Мій власний фронтенд дайджест із новин і статей які я виділив для себе з яким вирішив поділитися з вами😁
Якщо вам зайшло, чи було корисно, обовязково лайк 😉
Даджет новин і статей #1
Використання API Popover для підказок HTML - https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/
Створення інтеграції чату з Google Gemini - https://www.raymondcamden.com/2024/04/30/building-a-chat-integration-with-google-gemini
Безпечне відкриття посилань у новій вкладці: «Target=_blank» та «rel=noopener» - https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/
Використання CSS Scroll-Driven Animations , для індикаторів прогресу прокрутки на основі розділів - https://frontendmasters.com/blog/using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators/ і ще ось ця стаття про CSS Scroll-Driven Animations https://developer.chrome.com/blog/scroll-driven-animations-video-course
Створення різноманітних геометричних фігур за допомогою CSS Shapes - The Modern Guide For Making CSS Shapes
CSS Anchor position API - https://developer.chrome.com/blog/anchor-positioning-api
Нова альтернатива innerHTML - https://fullystacked.net/innerhtml-alternatives/
Якщо вам зайшло, чи було корисно, обовязково лайк 😉
Даджет новин і статей #1
Використання API Popover для підказок HTML - https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/
Створення інтеграції чату з Google Gemini - https://www.raymondcamden.com/2024/04/30/building-a-chat-integration-with-google-gemini
Безпечне відкриття посилань у новій вкладці: «Target=_blank» та «rel=noopener» - https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/
Використання CSS Scroll-Driven Animations , для індикаторів прогресу прокрутки на основі розділів - https://frontendmasters.com/blog/using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators/ і ще ось ця стаття про CSS Scroll-Driven Animations https://developer.chrome.com/blog/scroll-driven-animations-video-course
Створення різноманітних геометричних фігур за допомогою CSS Shapes - The Modern Guide For Making CSS Shapes
CSS Anchor position API - https://developer.chrome.com/blog/anchor-positioning-api
Нова альтернатива innerHTML - https://fullystacked.net/innerhtml-alternatives/
Frontendmasters
Using the Popover API for HTML Tooltips – Frontend Masters Boost
We can *mostly* use HTML alone for this API. But here, we'll use CSS to style the
Дайджет новин і статей №2
🔹Найпростіший спосіб розгорнути веб-сайт, щоб можна було поділитися ним з іншими людьми? - https://frontendmasters.com/blog/exactly-how-to-deploy-local-files-to-make-a-live-website/
🔹5 крутих функцій Chrome DevTools, про які більшість розробників не знають - https://javascript.plainenglish.io/5-cool-chrome-devtools-features-most-developers-dont-know-about-cf55d3b46c95
🔹Як зробити форми доступнішими використовуючи псевдокласи - https://css-tricks.com/accessible-forms-with-pseudo-classes/
Також, ви можете допомогти формувати дайджет скидаючі цікаві новини і статті про розробку і фронтент сюди - @denispopov_web
🔹На іменовані ідентифікатори елементів можна посилатися як на JavaScript-глобали - https://css-tricks.com/named-element-ids-can-be-referenced-as-javascript-globals/ ( цікава статейка. Вийшла ще в 2022 а я на ней тільки зараз наткнувся )
🔹Цікава статистика від State of HTML - https://2023.stateofhtml.com/ua-UA/demographics/
🔹Якщо слідкуєте за оновлення браузерів, то можете дізнатись що нового в 🔹🔹Chrome 125 - https://developer.chrome.com/blog/new-in-chrome-125
а також, що нового буде в DevTools - https://developer.chrome.com/blog/new-in-devtools-125
🔹Як краще зрозуміти errors та warnings краще разом з Gemini - https://developer.chrome.com/docs/devtools/console/understand-messages
🔹Про FireFox 126 - https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126
🔹І куди ж без Safari. Webkit фічі в Сафарі 17.5 - https://webkit.org/blog/15383/webkit-features-in-safari-17-5/
Також ви можете взяти участь у формуванні цього дайджесту і закинути цікаві статті або новини про фронтенд розробку сюди 👉 @denispopov_web
🔹Найпростіший спосіб розгорнути веб-сайт, щоб можна було поділитися ним з іншими людьми? - https://frontendmasters.com/blog/exactly-how-to-deploy-local-files-to-make-a-live-website/
🔹5 крутих функцій Chrome DevTools, про які більшість розробників не знають - https://javascript.plainenglish.io/5-cool-chrome-devtools-features-most-developers-dont-know-about-cf55d3b46c95
🔹Як зробити форми доступнішими використовуючи псевдокласи - https://css-tricks.com/accessible-forms-with-pseudo-classes/
Також, ви можете допомогти формувати дайджет скидаючі цікаві новини і статті про розробку і фронтент сюди - @denispopov_web
🔹На іменовані ідентифікатори елементів можна посилатися як на JavaScript-глобали - https://css-tricks.com/named-element-ids-can-be-referenced-as-javascript-globals/ ( цікава статейка. Вийшла ще в 2022 а я на ней тільки зараз наткнувся )
🔹Цікава статистика від State of HTML - https://2023.stateofhtml.com/ua-UA/demographics/
🔹Якщо слідкуєте за оновлення браузерів, то можете дізнатись що нового в 🔹🔹Chrome 125 - https://developer.chrome.com/blog/new-in-chrome-125
а також, що нового буде в DevTools - https://developer.chrome.com/blog/new-in-devtools-125
🔹Як краще зрозуміти errors та warnings краще разом з Gemini - https://developer.chrome.com/docs/devtools/console/understand-messages
🔹Про FireFox 126 - https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126
🔹І куди ж без Safari. Webkit фічі в Сафарі 17.5 - https://webkit.org/blog/15383/webkit-features-in-safari-17-5/
Також ви можете взяти участь у формуванні цього дайджесту і закинути цікаві статті або новини про фронтенд розробку сюди 👉 @denispopov_web
Frontendmasters
Exactly How to Deploy Local Files to Make a Live Website – Frontend Masters Boost
A very basic step-by-step guide of exactly how to do it for static files like .html, .css, and .js files.