Випущено Htmx 2.0, що має на меті замінити складні фреймворки JavaScript зрозумілими атрибутами HTML - https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/

DEVCLASS

Htmx 2.0 released, aims to replace complex JavaScript frameworks with easily understood HTML attributes  • DEVCLASS

The Htmx project to extend HTML has released version 2.0, the first major version since 1.0 in November […]

Чистий круговий текст CSS (без використання моноширинних шрифтів) - https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/

Frontendmasters

Pure CSS Circular Text (without Requiring a Monospace Font) – Frontend Masters Boost

Setting text on a circle in CSS isn't straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.

BEM-модифікатори у чистому CSS-Nesting - https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/

whatislove.dev

BEM Modifiers in Pure CSS Nesting | Vladyslav Zubko

Learn to use BEM modifiers with native CSS nesting for cleaner, efficient stylesheets without preprocessors. Discover tips and tricks for modern CSS development.

Зустрічайте Highload fwdays'24 — унікальну та єдину в Україні конференцію від Fwdays, присвячену практичним питанням розробки високонавантажених систем, архітектури, масштабування, роботи з базами даних, DevOps ?

? Дата: 15 червня
? Формат: офлайн (у Києві) та онлайн
? Мови доповідей: українська та англійська

Спікери та їх доповіді:
? Олена Сирота –Software architect у Star, викладач у SET University.
У доповіді "Як обрати правильний тип скейлінгу" ми спочатку проаналізуємо підходи до масштабування, а потім виберемо найкращий для нашої системи.

?Тарас Кльоба – Microsoft, Senior Partner Solutions Architect, Data & Artificial Intelligence. Має понад 14 років досвіду в ІТ-індустрії, банківській справі та кібербезпеці
У доповіді "NATO Hackathon Winner: AI-Powered Drug Search" буде йти мова про те, як можна ефективно використовувати функції PostgreSQL і служби штучного інтелекту Azure для значного покращення функціональності пошуку в будь-якій програмі.

? Greg Young – творець Command Query Responsibility Segregation, незалежний консультант, автор книги про паттерни.
У доповіді, "Event Souring Patterns", мова піде про серію паттернів від AW: Design Patterns, Enterprise Integration Patterns та ін, засновані на книзі про паттерни, автором якої є сам Greg Young.

Та не тільки!

Використайте промокод POPOVHL10 та отримайте знижку 10%, деталі за посиланням ? https://bit.ly/3KB3SEl

Приєднуйтесь до Highload fwdays'24!

Fwdays

Конференція Highload fwdays'24

Highload fwdays'24 - конференція присвячена питанням архітектури та розробки високонавантажених систем.

Дайджет новин і статей №3

? Коли слід використовувати компоненти, а коли просто HTML? - https://chrissmith.xyz/blog/2024/when-should-we-use-components-and-when-should-we-just-use-html/

? Як розширення Chrome впливають на продуктивність веб-сайту у 2024 році? - https://www.debugbear.com/blog/chrome-extensions-website-performance

?5 найкращих передових методів JavaScript - https://thenewstack.io/top-5-cutting-edge-javascript-techniques/

? Підсумки реакт конф 2024 - https://react.dev/blog/2024/05/22/react-conf-2024-recap

https://javascript.plainenglish.io/react-conf-2024-highlights-b7cc29fb5109

?Альтернатива Websocket: як використовувати Firestore для прослуховування подій у реальному часі - https://canopas.com/websocket-alternative-how-to-use-firestore-to-listen-to-realtime-events-141e634d04bc

?ECMAScript 2024 - Promise.withResolvers() - https://2ality.com/2024/05/proposal-promise-with-resolvers.html

?Трохи про CSS Gap - https://ishadeed.com/article/the-gap/

? Старі методи, нові трюки CSS - https://mxb.dev/blog/old-dogs-new-css-tricks/

? Нова магія для CSS Анімаціі - https://chasem.co/2024/05/css-animations/

?CSS якірне позиціонування на практиці - https://geoffgraham.me/css-anchor-positioning-in-practice-winging-it-live/

? CSS Timer - https://frontendmasters.com/blog/how-to-make-a-css-timer/

chrissmith.xyz

When should we use components and when should we just use HTML?

A lot of UI frameworks or design systems include a component library, a series of components that can be dropped into a page to add functionality

Дайджет новин і статей №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

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.

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

Без memoization кожен запит користувача на перегляд ціни товару у певній валюті вимагав би нового запиту до API для отримання актуального курсу валют, що може бути витратно з точки зору часу та ресурсів.

`` function currencyConverter() { const cache = {}; return async function convert(amount, fromCurrency, toCurrency) { const key =${fromCurrency}_to_${toCurrency}`;

}
```

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

Застосування купона WooCommerce до кошика через URLhttp://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 і можете зашивати його в посилання ?