The Last Toast Library you’ll Ever Need Introducing 3.0 Notyf In this post, I’ll introduce the new features and highlights that comes in the last version of . Notyf What The heck is Notyf? Notyf is a dependency-free, modern and elegant toast library for 2019. It’s well known that there are dozens, if not hundreds, of JavaScript toast libraries out there. is yet another one. Nevertheless, I consider most of these libraries to be missing some important points that are needed in today’s frontend development. In this post, I’ll introduce Notyf 3.0 and will show how it stands out of the crowd to make it a good fit for your project today. Notyf Notyf is a dependency-free, modern, elegant toast library for 2019 Plug it anywhere, play it everywhere It’s no secret that frontend frameworks play a big role in frontend development nowadays. It’s almost pointless to build a UI library which still relies on jQuery or on registering globals in the browser. Notyf deals with this by exposing 3 types of bundles: ES6, CommonJS and vanilla IIFE. Module bundlers like Webpack will grab the ES6 module and work with it. Also, those of us who still maintain legacy codebases with server-side rendering and <scripts> all over the place, are still able to use Notyf by using the IIFE minified bundle. Framework-specific recipes . Notyf has been well tested in React, Vue, and Angular. The recipes are written on top of best practices specific for each framework (Context API for React, provide/inject for Vue, injection token for Angular). are available in the repository Typings everywhere Version 3.0.0 has been rewritten from scratch in TypeScript. That means you get typings for free, no need to install . It’s also a great win for the project in terms of scalability and maintainability. @types/notyf Fully E2E tested Few of the do e2e or unit testing. This is one of the winning points of Notyf as it’s tested with what I consider the best end-to-end testing framework as of today, . This allows Notyf not only to be tested on its public API but also on its actual UI rendering performance. best toast libraries out there Cypress body[data-twttr-rendered="true"] {background-color: transparent;}.twitter-tweet {margin: auto !important;} Testing with is a breeze. It's the definition of "e2e testing that just works and makes sense", like literally. Using it for the next version of Notyf (3.0.0), best decision ever. @Cypress_io https://t.co/VriLfQMLep https://t.co/MoRjzs0iHM — @caroso1222 function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === "#amp=1" && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: "amp", type: "embed-size", height: height}, "*");}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind('rendered', function (event) {notifyResize();}); twttr.events.bind('resize', function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute("width")); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}} A11y matters. Like, a lot. After analyzing some of the , I came to realize that very few of them actually care for visually impaired users who rely on screen readers to browse the web. Notyf takes care of this by giving full a11y support which makes toasts to be immediately read by the screen reader. It relies on the and the use of some aria properties. curated notification libraries announcer technique On perf and stuff All of the toasts you see on the web normally reveal using the good ol’ fade-in opacity animation. Notyf, on the contrary, reveals itself using a ripple-like effect which (personal opinion) makes it look modern and elegant. It does all this while still achieving top performance by avoiding reflow and animating only transform props. You can see in the performance profiling below how the animations run in 60 fps. Performance profiling Help wanted I personally consider this to be a good project to get started into open source, if you still haven’t. The codebase is not daunting and relatively easy to understand. Also, there are still features to be added and some issues to be addressed. I also need help in refining the recipes for React and Vue as I’m not an expert in these frameworks. Head over to the guide and give me a hand to make this the best toast library out there! contributing caroso1222/notyf Shameless self-promotion I normally write about web dev or whatever comes to my mind related to software. You might want to read about or on . If you like what you read then I appreciate you subscribing to my content or head over to twitter and say hi! my experience as a remote worker how I deploy my frontend applications in the most overkill way @caroso1222
