https://www.jetbrains.com/phpstorm/whatsnew/?map=4 - тут можете ознайомитись з новим оновлення PhpStorm 2024.1

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

Переваги Memoization

🔹Основна перевага memoization полягає у значному зменшенні часу виконання програми за рахунок уникнення повторних обчислень.

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

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

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

Без 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!

Що, якби ви мали реальний контроль над світлим/темним режимами для кожного сайту?

Про це можна почитати в цікавій статейці де на цю тему розмірковує 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/

Temporal — це новий підхід до роботи з датами та часом у JavaScript, який включено до новітніх стандартів ECMAScript 2023. Він надає зручні об'єкти та методи для легшої роботи з датами, часом та часовими зонами. Цей API дозволяє працювати з різними календарями та підтримує виконання датових обчислень без залучення додаткових бібліотек. Наразі Temporal доступний для використання в проектах через поліфіл, який можна буде видалити після остаточного впровадження Temporal у стандарт ECMAScript​

https://tc39.es/proposal-temporal/docs/

Про React 19: найцікавіше з оновлення - https://dou.ua/forums/topic/48550/

Мій власний фронтенд дайджест із новин і статей які я виділив для себе з яким вирішив поділитися з вами😁
Якщо вам зайшло, чи було корисно, обовязково лайк 😉


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

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

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

Зустрічайте 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!

Якщо вам не лінь, можете прийняти участь в щорічному опитуванні State of Frontend 2024 - https://stateoffrontend2024.typeform.com/survey

Як використовувати Rem в CSS для доступного дизайну - https://www.a11y-collective.com/blog/what-is-rem-in-css/

Випробування нового HTML-елементу <permission> - https://developer.chrome.com/blog/permission-element-origin-trial?hl=en

Поради щодо написання хорошого CSS - https://andrewwalpole.com/blog/opinions-for-writing-good-css/

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

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

Випущено 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/

Привіт, 19 жовтня відбудеться React+ fwdays'24 — щорічна конференція для всіх, хто цікавиться розробкою на JavaScript 🤩

Основний фокус заходу — React. Проте, цього разу, Fwdays не обмежуються лише React та поговорять і про інші фреймворки, такі як Vue.js, Node.js, Angular, Svelte та інші.

Вас очікують:
📍Цікаві спікери та практичні доповіді про покращення React за допомогою TypeScript, мікро-фронтенд та монорепо, здоровий ґлузд та перфекціонізм під час рефакторингу та багато іншого.
📍Нетворкінг, Q&A зі спікерами, нові знайомства
📍Вайб Halloween під час офлайн частини заходу 👻
📍Розіграші та подарунки від партнерів

Формат: онлайн та офлайн у Києві

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

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