\ No newline at end of file
+#css
\ No newline at end of file
diff --git a/posts/about-css-conf-eu-berlin-2018/index.html b/posts/about-css-conf-eu-berlin-2018/index.html
index 6232e7a..58aa233 100644
--- a/posts/about-css-conf-eu-berlin-2018/index.html
+++ b/posts/about-css-conf-eu-berlin-2018/index.html
@@ -1,4 +1,4 @@
- CSSconf EU 2018 - Hey ๐
+ CSSconf EU 2018 - ~/
@@ -400,4 +400,4 @@
I will also write a blog post about the JSConf that happened in the following two days where Iโll also talk about Berlin and the venue to give you a real insider perspective on the conference so that you can properly decide whether or not you will attend it next year.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
I will also write a blog post about the JSConf that happened in the following two days where Iโll also talk about Berlin and the venue to give you a real insider perspective on the conference so that you can properly decide whether or not you will attend it next year.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/about-js-conf-eu-berlin-2018/index.html b/posts/about-js-conf-eu-berlin-2018/index.html
index 53c95c5..ee39328 100644
--- a/posts/about-js-conf-eu-berlin-2018/index.html
+++ b/posts/about-js-conf-eu-berlin-2018/index.html
@@ -1,4 +1,4 @@
- JSConf EU 2018 - Hey ๐
+ JSConf EU 2018 - ~/
@@ -561,4 +561,4 @@
Part 5 - Awesome RxJS and Reactive Programming Resources
-
Last modified on 12, Oct, 2024
\ No newline at end of file
+
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/best-http-request-mock-tool/index.html b/posts/best-http-request-mock-tool/index.html
index b8f672f..00f51ce 100644
--- a/posts/best-http-request-mock-tool/index.html
+++ b/posts/best-http-request-mock-tool/index.html
@@ -1,4 +1,4 @@
- How to Mock API Calls - Hey ๐
+ How to Mock API Calls - ~/
@@ -90,5 +90,5 @@
}
Now you can go ahead and remove all those 100 characters long relative imports at the beginning of your JavaScript files.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
Now you can go ahead and remove all those 100 characters long relative imports at the beginning of your JavaScript files.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/browser-polyfill-madness-mozilla-internet-explorer/index.html b/posts/browser-polyfill-madness-mozilla-internet-explorer/index.html
index 606736a..5e2d2a6 100644
--- a/posts/browser-polyfill-madness-mozilla-internet-explorer/index.html
+++ b/posts/browser-polyfill-madness-mozilla-internet-explorer/index.html
@@ -1,4 +1,4 @@
- Browser polyfill madness, Mozilla and IE - Hey ๐
+ Browser polyfill madness, Mozilla and IE - ~/
@@ -119,4 +119,4 @@
I might have spent one or two days trying to figure out how to bring all these pieces together, but having done it, believe that it increased my productivity in ways that by far compensate the invested time. I hope you find this article useful especially if it saves you one day of trouble trying to figure out the right configs.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
I might have spent one or two days trying to figure out how to bring all these pieces together, but having done it, believe that it increased my productivity in ways that by far compensate the invested time. I hope you find this article useful especially if it saves you one day of trouble trying to figure out the right configs.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/destructuring-the-not-so-good-parts/index.html b/posts/destructuring-the-not-so-good-parts/index.html
new file mode 100644
index 0000000..7678f91
--- /dev/null
+++ b/posts/destructuring-the-not-so-good-parts/index.html
@@ -0,0 +1,154 @@
+ Destructuring in JavaScript: the not so good parts - ~/
+
+
+
Generally speaking, I would say everybody loves the destructuring assignment, and for good reasons. Next, I list some of the amazing things one can achieve with destructuring in JavaScript.
The most significant dilemma of destructuring itโs related with the fact that relies on properties of nested structures that can only be evaluated at runtime, let me give you an example.
+
functionaddEmailToList(list, { email }) {
if (email) {
list.push(email)
}
}
const list = ['a@mail.com', 'b@mail.com']
const user = undefined
+
addEmailToList(list, user)
// Uncaught TypeError: Cannot destructure property `email` of 'undefined' or 'null'
+
On the other hand, if you write this without destructuring, you wonโt make assumptions on the user, you can double check whether the given user is valid.
Just a note, for you to be conscious that as in default assignment default parameters the null value itโs not considered false, thus you canโt fall back to some default value in destructuring a property whose value is null.
+
functionformatAddress(info) {
const { country = '-',city = '-' } = info
return`${country}, ${city}`
}
+
const info = { country: 'Portugal', city: null }
const result = formatAddress(info)
// "Portugal, null" it's what you get instead of "Portugal, -"
+
Every feature above mentioned exists for you to use, but we should find a balance (as in everything else in life). Below I list a few guidelines/rules that will help you find the balance when using destructuring.
You might have noticed some previous warning sings (โ ๏ธ) in some of the listed usages of destructuring. I left those signs there because I consider those use cases potentially harmful.
+
+
Donโt use nested destructuring on data that comes from any external data sources (such as REST APIs, GraphQL endpoints or files). You never know when these APIs change their data contracts. Hopefully all of this itโs synced between teams, but sometimes we get lost on the tiny details such as that one small property in some nested object that got renamed and instead of using snake_case it uses now camelCase just because it made more sense from an aesthetic point of view. Now your marvelous single page application is burning and falling into pieces because you were unsafely accessing this property when you could have protected yourself against it.
+
Donโt use nested destructuring on function arguments that have long or complicated signatures. It makes it super hard to understand what the actually API of the function is, and you might get breaking behavior because someone decided to use your function, but in some edge case they do not provide you the valid input for you to destruct upon.
+
Donโt use destructuring to retrieve a value if you rely on order. I listed the possibility of skipping elements with destructuring, it might sound tempting, but you might end up again breaking your website because your simple routine relies on the access of the Nth element of some inputted array. Also, you can still retrieve data out of the array, but it might be that in that position you donโt get what you were expecting. If you choose this path, at this point, it should also be arguable that thereโs something very wrong either with your code or with the data model from where youโre your reading data, use this one with care.
\ No newline at end of file
diff --git a/posts/developers-bad-at-testing-own-code/index.html b/posts/developers-bad-at-testing-own-code/index.html
index cdfda2c..ac09f50 100644
--- a/posts/developers-bad-at-testing-own-code/index.html
+++ b/posts/developers-bad-at-testing-own-code/index.html
@@ -1,4 +1,4 @@
- Why are developers bad at (manually) testing their code? - Hey ๐
+ Why are developers bad at (manually) testing their code? - ~/
@@ -88,8 +88,8 @@
border-color: #bee5eb;
color: #d1ecf1;
}
-
Why are developers bad at (manually) testing their code?
Manual testing of any software itโs a vital activity to ensure its quality and long-term stability. Together with their coding activities, developers test their code changes to understand if they produce the desired outcome without breaking any existing software functionality. So far, so good.
+
Why are developers bad at (manually) testing their code?
Manual testing of any software itโs a vital activity to ensure its quality and long-term stability. Together with their coding activities, developers test their code changes to understand if they produce the desired outcome without breaking any existing software functionality. So far, so good.
Today Iโm writing a few points on why developers are bad at manual testing their own code changes, especially at detecting unwanted side-effects in areas of the software often unrelated to the modified parts.
Iโm writing because, at this point in time, I have experienced two very different setups towards software testing:
\ No newline at end of file
diff --git a/posts/guide-to-custom-react-hooks-with-mutationobserver/index.html b/posts/guide-to-custom-react-hooks-with-mutationobserver/index.html
new file mode 100644
index 0000000..d66f470
--- /dev/null
+++ b/posts/guide-to-custom-react-hooks-with-mutationobserver/index.html
@@ -0,0 +1,162 @@
+ Guide to custom React Hooks (wrap the MutationObserver) - ~/
+
+
+
This article was originally published by LogRocket. You can checkout the original post here.
+
With the introduction of React Hooks, the amount of shareable code within React codebases has exploded. Because Hooks are thin APIs on top of React, developers can collaborate by attaching reusable behavior to components and segregating these behaviors into smaller modules.
+
While this is similar to how JavaScript developers abstract business logic away in vanilla JavaScript modules, Hooks provide more than pure JavaScript functions. Instead of taking data in and out, developers can stretch the spectrum of possibilities of what can happen inside a Hook.
+
For instance, developers can:
+
+
Mutate and manage a piece of state for a specific component or an entire application
+
Trigger side effects on a page, like changing the title of a browser tab
+
Rectify external APIs by tapping into React componentsโ lifecycle with Hooks
+
+
In this post weโll explore the latter possibility. As a case study, weโll abstract the MutationObserver API in a custom React Hook, demonstrating how we can build robust, shareable pieces of logic in a React codebase.
+
Weโll create a dynamic label that updates itself to indicate how many items we have in a list. Instead of using the provided React state array of elements, weโll use the MutationObserver API to detect added elements and update the label accordingly.
The following code is a simple component that renders our list. It also updates a counter value that represents the number of fruits currently in the list:
<buttononClick={()=>setFruits([...fruits,`random fruit ${fruits.length}`])}>Add random fruit</button>
<ulref={listRef}>
{fruits.map((f)=> (
<likey={f}>{f}</li>
))}
</ul>
</div>
)
}
+
We want to trigger a callback function whenever our list element is mutated. Within the callback we refer to, the elementโs children give us the number of elements in the list.
+
ยปImplementing the useMutationObservable custom Hook
The above useMutationObservable custom Hook abstracts the necessary operations to observe changes on the element passed as the first parameter. It then runs the callback passed as the second parameter whenever the target element changes.
In the Hook, there are a number of boilerplate operations to understand. First, we must provide a set of options that comply with the MutationObserver API.
+
Once a MutationObserver instance is created, we must call observe to listen for changes in the targeted DOM element.
+
When we no longer need to listen to the changes, we must call disconnect on the observer to clean up our subscription. This must happen when the App component unmounts:
All the above work, including initializing the MutationObserver with the right parameters, observing changes with the call to observer.observe, and cleaning up with observer.disconnect, are abstracted away from the client.
+
Not only do we export functionality, but we also clean up by hooking into the React componentsโ lifecycle and by leveraging cleanup callbacks on effect Hooks to tear down the MutationObserver instance.
+
Now that we have a functional and basic version of our Hook, we can think about improving its quality by iterating on its API and enhancing the developer experience around this shareable piece of code.
One important aspect when designing custom React Hooks is input validation. We must be able to communicate to developers when things are not running smoothly or a certain use case is hitting an edge case.
+
Usually, development logs help developers understand unfamiliar code to adjust their implementation. Likewise, we can enhance the above implementation by adding runtime checks and comprehensive warning logs to validate and communicate issues to other developers:
console.warn(`You must provide a valid callback function, instead you've provided ${cb}`)
return
}
const { debounceTime } = options
const obs = newMutationObserver(cb)
setObserver(obs)
}, [cb,options,setObserver])
useEffect(()=> {
if (!observer) return
if (!targetEl) {
// B)
console.warn(`You must provide a valid DOM element to observe, instead you've provided ${targetEl}`)
}
const { config } = options
try {
observer.observe(targetEl,config)
} catch (e) {
// C)
console.error(e)
}
return()=> {
if (observer) {
observer.disconnect()
}
}
}, [observer,targetEl,options])
}
+
In this example, weโre checking that a callback is passed as a second argument. This API check at runtime can easily alert the developer that something is wrong on the caller side.
+
We can also see whether the provided DOM element is invalid with an erroneous value provided to the Hook at runtime or not. These are logged together to inform us to quickly resolve the issue.
+
And, if observe throws an error, we can catch and report it. We must avoid breaking the JavaScript runtime flow as much as possible, so by catching the error, we can choose to either log it or report it depending on the environment.
If we want to add more capabilities to our Hook, we should do this in a retro-compatible fashion, such as an opt-in capability that has little or no friction towards its adoption.
+
Letโs look at how we can optionally debounce the provided callback function so callers can specify an interval of time when no other changes in the target element trigger. This runs the callback once rather than running the same amount of times the element or its children mutated:
`You must provide a valida callback function, instead you've provided ${cb}`
);
return;
}
const { debounceTime } = options;
const obs = newMutationObserver(
debounceTime > 0 ? debounce(cb,debounceTime) : cb
);
setObserver(obs);
}, [cb,options,setObserver]);
// ...
+
This is handy if we must run a heavy operation, such as triggering a web request, ensuring it runs the minimum number of times possible.
+
Our debounceTime option can now pass into our custom Hook. If a value bigger than 0 passes to MutationObservable, the callback delays accordingly.
+
With a simple configuration exposed in our Hook API, we allow other developers to debounce their callbacks which can result in a more performant implementation given that we might drastically reduce the number of times the callback code gets executed.
+
Of course, we can always debounce the callback on the client side, but this way we enrich our API and make the caller-side implementation smaller and declarative.
Testing is an essential part of developing any kind of shared capability. It helps us ensure a certain level of quality for generic APIs when they are heavily contributed to and shared.
+
The guide to testing React Hooks has expansive detail around testing that can be implemented into this tutorial.
Documentation can level up the quality of custom Hooks and make it developer-friendly.
+
But even when writing plain JavaScript, JSDoc documentation can be written for custom hook APIs to ensure the Hook passes the right message to developers.
+
Letโs focus on the useMutationObservable function declaration and how to add formatted JSDoc documentation to it:
+
/**
* This custom hooks abstracts the usage of the Mutation Observer with React components.
* Watch for changes being made to the DOM tree and trigger a custom callback.
* @param{Element}targetEl DOM element to be observed
* @param{Function}cb callback that will run when there's a change in targetEl or any
* child element (depending on the provided options)
Writing this is not only useful for documentation, but it also leverages IntelliSense capabilities that autocomplete Hook usage and provide spot information for the Hookโs parameters. This saves developers a few seconds per usage, potentially adding up to hours wasted on reading through the code and trying to understand it.
With different kinds of custom Hooks we can implement, we see how they integrate extrinsic APIs into the React world. Itโs easy to integrate state management within Hooks and run effects based on inputs from components using the Hook.
+
Remember that to build quality Hooks, itโs important to:
+
+
Design easy-to-use, declarative APIs
+
Enhance the development experience by checking for proper usage and logging warnings and errors
+
Expose features through configurations, such as the debounceTime example
This part of the series itโs all about getting your hands dirty! Part 3 is a tutorial on core techniques to build an application with reactive streams using RxJS.
Weโre going to start with a small refresher from the previous article, implementing a click event handler with RxJS. Next, weโll have a brief overview of RxJS, followed by the main challenge of building a small animated game the reactive way.
Hereโs how a usual JavaScript event handler function looks like.
+
<buttonid="btn">+1</button>
+
const btn = document.getElementById('btn')
let counter = 0
btn.addEventListener('click', (event)=> {
counter++
console.log(counter)
})
+
In the above code, weโre incrementing counter that is global and logging its value each time we update it.
+
Usually, we donโt increment globals or console.log directly in real-life apps, but we do have other side-effects in place (like updating something else in the UI, triggering a web request, firing an animation, etc.). You can always organize your code to split concerns, but it seems the event handler is already doing two very distinct things, and weโre barely getting started.
+
Letโs take a look at how this looks like in the reactive world, with RxJS. Hereโs how you should visualize and implement a stream of click events.
+
+
Note: e stands for event and itโs the value pushed to the stream at each click in the button element, just like you would have an event argument in the typical onClick callback (event handler) at each click.
+
let counter = 0
const click$ = fromEvent(btn, 'click')
click$.subscribe((event)=> {
counter++
console.log(counter)
})
+
A few things to notice here:
+
+
+
+ fromEvent
+ is the tool in RxJS that will allow you to transform any DOM event into an Observable, a stream of events of a given
+type (like click, drag, scroll etc.).
+
+
+
+subscribe is a must! Without subscribing to our stream, nothing would ever happen.
+
The $ is just a common (non-standard) notation to identify streams in your code - totally optionally, no need to follow.
+
+
Opposite to the click event handler, you can subscribe to the stream of clicks as many times as you want and split all kinds of different tasks into separate subscriptions that share the same event listener! Attaching event handlers to the DOM is costly especially due to the event attaching phase that happens at page load (onload or DOMContentReady events) a busy period for modern web applications - paraphrased from โHigh Performance JavaScriptโ, book by Nicholas C. Zakas.
+
In a way, things are opening up, you get a more flexible model to organize your code, compared to the classic event handler callback.
+
+
Anything can be a stream, remember that, let it be the cornerstone of your reactive thinking.
+
+
This should get you warmed up for the real challenge later in the article. Before that, thereโs something I want to mention about the RxJS library.
I would highly recommend you later to go through the RxJS official docs overview; it complements a few concepts Iโve covered in the previous article giving you a more mature view into the fundamentals. But for now, I want to focus on two things only: creating streams and manipulating them. Looking at RxJS, youโll see that you can identify two big groups of โthingsโ:
+
+
Stream creators/producers are tools that will allow you to take anything and make it a stream. In the previous section, for example, we used fromEvent to transform DOM click events into an Observable, a stream that you can subscribe to.
+
Operators are instruments that will allow you to not only hook into the stream to perform operations with the data flowing through it but also combine them.
Now weโve had our refresher, we can jump into building a small animated game with RxJS, something more complex.
+
The game weโre building is called โTake the cat to the partyโ, hereโs how it goes down.
+
+
+
Thereโs a cat in a motorbike in your top left corner (draggable HTML element).
+
Thereโs a decoy at the bottom left corner (draggable HTML element).
+
Thereโs a party at the right bottom corner of the page (our drop zone).
+
We need to drop the cat at the party in less than 5 seconds to win. Nothing should happen if the decoy is the dragged element.
+
While dragging, thereโs an animation of the cat driving to the party and a counter appearing at the top right corner.
+
Per each attempt, if the cat is dragged for longer than 5 seconds you lose.
+
+
Weโre going to split this into 4 levels. Per each level, Iโll explain the goal weโre trying to achieve, show you how the implementation looks like, and what it does with plenty of detail. Feel free to try and code the levels yourself before checking the suggested solution. You can check out this repo if youโre willing to give it a try. The file cat-party-empty.html contains the necessary boilerplate in a single HTML file. You can just open it in the browser and start coding.
+
Before we start, letโs take a look at some boilerplate code already in place.
+
There are a bunch of RxJS taken from the global window at the top (Iโm just injecting RxJS via <script> at the top of the HTML file). Then we have our markup appended to the elementโs appinnerHTML. Just some boilerplate, donโt bother with the detail.
Finally, we introduce three streams that weโll use quite often while going through the challenge. These are the most basic building blocks of our solutions.
We should be able to take the cat to the party by dragging it.
+
+
Place the cat inside the party together with other cats.
+
We also want to hide the original cat element while dragging it for a better user experience.
+
+
+
+
Letโs follow a bottom-up approach. Weโll start by building some specific streams that will allow us to assemble more complex behaviors as we move along.
+
Letโs start by answering the following: how do we know that an HTML element has been dropped at the party? Weโll need to detect any drop event that occurs in the party element.
+ e stands for event and it's the value pushed to the stream at each drop event in the whole document!{" "}
+ e1, e2 and e3 have different event.target (target DOM elements).
+
+ )}
+/>
+
Cool, we now have a stream that emits a drop event every time something is dropped in the party, we ensure that using the filter operator.
+
I would like to pause and add further detail on this marble diagram. Notice that we read from top to bottom, meaning the last timeline is the only one that really matters, itโs the fine grained stream that gives us more useful values. In this case since we wonโt subscribe to drop$ directly, think of it as an auxiliary conceptual timeline which is a step towards shaping the ideal stream to tackle our task: partyDrop$.
+
Another relevant detail on the marbles diagram: e1 and e2 marbles donโt make it to partyDrop$ (bottom stream). For those events,
+event.target itโs not party, this means the user did not drop the HTML element in the party.
+
At this point we can already notice the exceptional compositional capabilities of streams and how easy it is to plug & play the smaller blocks (such as drop$) to build higher level streams.
+
Next, letโs see how we can detect that the cat is dropped at the party.
Alright, a few things are going on here. Weโre familiar with withLatestFrom, but this time, itโs a bit more complex to perceive. Weโre looking into a stream of dragstart events dragstart$ and asking it for the last value emitted in that stream; this is the same as saying that we want the last draggable element in the page that emitted a dragstart event! Next, we have filter again. Weโre going to use filter to narrow down our stream to allow dragstart events to pass through only if their target element is cat! And thatโs it! We have a stream that will emit an event every time we drop the cat at the party.
+
+
+
In the above diagram, e1, e2 and e3 are dragstart events (dragstart$ stream) that might come from anywhere in the page. de represents a drop event at the party. Notice how withLatestFrom operates by bringing together the last element on dragstart$ which is e3 and with the party element which is published to the dragend$ stream. Now because e3 event target is actually the cat youโll get e3 pushed to our final stream catAtParty$!
+
But weโre not finished just yet; we need to leverage the work weโve constructed so far to actually render the cat in the party. For that, we just need to subscribe to our catAtParty$ stream and do some DOM manipulations.
+ The console.log reveals the drop and dragstart events as payload for our subscription. We
+ also log the event.type of each individual event.
+
+ )}
+/>
+
If youโre following this point, youโll notice that although we can drag the cat perfectly, we still see the original cat element while carrying it. We see the original cat element while dragging it.
+
+
+
Setting the catโs element opacity to 0 yields a more natural user experience.
+
+
To achieve the same behavior we have in the above GIF, we want to toggle the cat elementโs opacity while dragging. Yes, another side effect, we can actually simply create another subscription to take care of this.
I want to leave a challenge for the reader. Looking at how weโre setting the opacity value of the cat element, could we somehow handle everything in one single subscription instead of two? I would suggest you to read the whole article and come back to this one later, you should be then able to nail it then.
ยปLevel 2 - Hacking race conditions with artificial delays
+
+
We should announce the catsโ arrival with a window.alert message.
+
+
Before triggering the window.alert weโll want to make sure the cat is actually rendered at the party.
+
+
+
+
So we already have a stream that emits an event each time we drag the cat to the party, itโs called catAtParty$. Our work here is mostly done. We just need to subscribe to it.
+
catAtParty$.subscribe(()=> {
window.alert('Cat is at the party! You win!')
window.location.reload()
})
+
+
+
window.alert is triggered when we drop the cat at the party, but the cat is not rendered!
+
+
Hmm.. strange, we did everything right but the window.alert triggers before we get to actually render the cat at the party, what a bummer.
+
It seems that the DOM changes donโt kick in before we trigger the alert; thatโs because the rendering is asynchronous, and the page only gets updated later on after weโre done with executing this function and dismissing the alert. I donโt want to spend much time fixing this since I donโt have any mechanism to tell me whether the DOM node has been rendered successfully, Iโm going to code a hack and trigger the alert inside a setTimeout that should buy us some time to correctly render the cat element.
+
catAtParty$.subscribe(()=> {
setTimeout(()=> {
window.alert('Cat is at the party! You win!')
window.location.reload()
}, 100)
})
+
+
Great! The window.alert is triggered after the cat element is rendered at the party!
+
+
It works. We can achieve a similar hack with RxJS without having a solution based on callbacks keeping our subscription handler clean (but still a hack!).
+
catAtParty$.pipe(delay(100)).subscribe(()=> {
window.alert('Cat is at the party! You win!')
window.location.reload()
})
+
See that delay there? Thatโs another operator. It allows you to hold the value in the stream for a determined amount of time before pushing it to the subscribers. So whatโs happening here is that instead of the Observer (subscription) being aware that we have to code a hack to trigger the alert after the cat enters the party, we shift that responsibility to the Observable, the stream is now the hacky code that is delaying the whole thing. This is super powerful, the way you can shift responsibilities and broadcast your changes to all the subscribers. Yes, all the subscribers will receive a delayed update! This can be simultaneously a gift and a wrecking footgun!
In our markup, thereโs a GIF positioned at the top right corner. We want to show it while dragging the cat and hide it again once we drop the cat.
+
We already have two streams: catDragStart$ and catDragEnd$ . We need to combine them to form a new stream. Letโs try and draw a small diagram of what that stream should look like.
+
+ (
+
+ In the image, ds symbolizes a dragstart event, and de represents a dragend event.
+
+ )}
+/>
+
Our GIF is wrapped in an HTML element whose display attribute is set to "none" by default. Weโll want to set it to "" (empty string) to make it visible and back to "none" once itโs time to hide it again. Our side effect should look something like this:
+
// shouldHideGIF would be true in case we need to hide the GIF
const v = shouldHideGIF ? 'none' : ''
loading.style.setProperty('display', v)
+
Letโs try to build a stream to feed to this function a value for display that reflects whether the cat is being dragged or not. Our stream should remove the necessity of the imperative logic dictated by the ternary operator, weโll create values that react to changes to replace the imperative code.
+
First, letโs look back at our streams catDragStart$ and catDragEnd$. When catDragStart$ emits a value, we want to set the display to "". So this means we need to somehow transform our stream of events into a stream of empty strings. Each time a string is emitted, we shall pass that value onto the function that will set the display property on the loading element.
+
+
+
After you apply an operator, you transform your stream into a more refined one, ideally better suited to the task youโre trying to tackle! Youโre making every pushed value to the topmost timeline flow through a function provided in the map operator. That function will map each value into the bottom timeline, your โfinalโ stream. If you subscribe to it now, you will receive empty strings instead of DOM events!
+
The same thing should happen to catDragEnd$.
+
+
+
Now we have two streams, and we could just subscribe to each one of them and set the value of the "display" property for the loading element!
Although this works, we could further refine our streams and merge them into a single one.
+
+ (
+
+ A single stream becomes the source of truth for the display property value of the loading{" "}
+ element throughout time.
+
+ )}
+/>
+
Awesome! The merge operator gives us the power to take to streams and merge them into one so that the values of the "display" flow through a single stream (a single source of truth). Hereโs how the code looks like.
I feel overwhelmed by the tremendous amount of operators offered by RxJS, its API is considerably large. We could further simplify the above implementation with the operator mapTo.
You get the same result as applying map but without needing to provide a function, because weโre really not doing anything else rather than returning a hardcoded value on that inline function.
Youโve might have noticed that Iโm creating a new variable per each stream, this allows me to better explain the building blocks of each solution and map them to the diagrams. Although this helps keeping the code readable, this is not mandatory, it can be overkill per times!. Streams can be inlined. Letโs look again to a small refactor of the above solution to understand what Iโm referring to.
We could drop catDragStartDisplay$ and catDragEndDisplay$ by inlining them in the merge operator.
+
ยปLevel 4 - Flatten observables, timers and cancellation
+
+
The cat needs to make it to the party in less than 5 seconds! He only has 5 seconds of gas in his bike.
+
+
We need to code a new path in our game, the one where the user loses the cat isnโt dragged to the party within 5 seconds. This looks like a countdown, with a few actions tied to it:
+
+
The countdown must be interrupted if the player manages to win within 5 seconds.
+
In case the countdown ends, and the cat was not dropped anywhere, we need to display a โgame overโ message.
+
+
As in the previous levels, letโs build this incrementally. First, letโs build a countdown. To emphasize how RxJS shines here, letโs first see how we would make a countdown with native JavaScript APIs.
+
functioncountdown(seconds) {
let secondsLeft = seconds
let intervalId
+
intervalId=setInterval(()=> {
if (secondsLeft===0) {
console.log("time's up!")
clearInterval(intervalId)
} else {
console.log(secondsLeft)
secondsLeft--
}
},1000)
}
countdown(5)
+
Thatโs a rough implementation of a countdown. We need to keep track of the timer identifier in a variable to ensure we clean up after running the setInterval provided callback the expected amount of times.
+
Now hereโs how you can do the same with RxJS.
+
const countdown$ = timer(0, 1000).pipe(
map((t) => 5 - t),
takeWhile((t) => t > 0),
)
countdown$.subscribe({
next: (secondsLeft)=>console.log(secondsLeft),
complete: ()=>console.log("time's up!"),
})
+
Letโs examine the above code ๐คฏ. This time weโre not creating a stream from an event or anything like that. Instead, we use timer from RxJS to generate a timer stream that emits a new numeric value every second.
+
Now a timer emits values in ascending order (0, 1, 3, etc.). Weโll want to reverse that to display an actual countdown. To reverse the numerical value on the stream, we simply use map. We should only give the user 5 seconds to drag the cat to the party. This translates to stop emitting values when we hit the mark of the 0 seconds, this is controlled by the takeWhile operator. A few evident advantages compared with the classic implementation:
+
+
No global variablessecondsLeft and intervalId.
+
Less error-prone code by relying on takeWhile and other built-in operators to be the rail guards of our business logic.
+
Once the stream emits the 6th value, it will complete automatically and stop emitting values! We donโt need to worry about cleanup logic - with setInterval we need to worry about cleaning the interval with clearInterval so that it does not run indefinitely!
+
+
+
+
In the above image, the bottom timeline represents the stream; notice the pipe (|) at the end of the timeline indicates that the stream completes after emitting the value 1.
+
A crucial aspect to notice is that youโll trigger a new timer as soon as you subscribe. This is a Cold Observable. Our countdown$ will start emitting values right away upon subscription, so we canโt just .subscribe() Weโll have to subscribe to the countdown when the user starts dragging the cat element.
+
Now remember we had a stream catDragStart$; weโll use that to trigger our countdown. But how can we trigger a subscription to a stream from within another stream? In my opinion, this is a hard concept to comprehend.
+
Presenting the switchMap operator. switchMap allows you to trigger a subscription from within a stream to a second stream. Not clear yet? Think of it this way switchMapallows you to switch to a new observable. Ok, letโs look at our countdown implementation, now that we have this information.
Note: You might have noticed that Iโm using t => t >= 0 โgreater or equal toโ in our predicate. This is just for convenience, so that we get 0 pushed onto the stream to easily rendered it, finishing the countdown at 0.
+
+
We're switching from one stream to another and subscribing to it immediately.
} />
+
Notice the return value of switchMap is countdown$, this means that when a dragstart event is emitted in catDragStart$ the following things will happen:
+
+
Since we subscribed, the DOM event will flow through the pipe and hit our switchMap operator.
+
Weโll automatically subscribe to countdown$ and start emitting its values leaving the dragstart event behind (because we donโt really need it for this task).
+
In our subscription handler, we simply do a DOM mutation to the element that displays our countdown value so that the user gets the time left displayed on the screen.
+
+
Once more, as soon as a ds (dragstart event in the diagram) is pushed to our catDragStart$ stream, switchMap will kick in and subscribe to our countdown$ stream, โpassing the ballโ (moving the flow of control) to the countdown$. Weโll start to push to our subscribers the seconds left in the countdown like if we had subscribed to the countdown$ in the first place, but in this case we programmatically triggered the subscription.
+
Although weโre going more deep into flattening Observables in this level, weโve already seen this before in this article. If youโre thinking about withLatestFrom from Level 1, youโre right! That operator also triggers a inner subscription.
+
We can now leverage countdownRunning$ to display an alert.
We have a filter to check for the second 0; this way, weโre basically ensuring that we just emit a value when the countdown runs out. Similarly to Level 2, we have a delay with random time to safeguard our countdown value gets rendered with 0 on the screen before we trigger the alert.
+
Only one thing left! If youโre following up until this point, youโre probably wondering why the counter is not reset once you stop dragging the cat. See the following GIF to understand what Iโm referring to.
+
+
Hmm.. Strange the counter does not reset once we drop the cat! It should, since the 5 seconds didnโt ran out while we were dragging the cat. Letโs look at our countdown$ implementation once more.
Now, itโs pretty clear that weโre not doing anything to โstopโ the counter. Once we subscribe to countdown$ with the switchMap operator, thereโs no stopping it, it will go on until it reaches the end, and when this happens, weโll display the alert to the user. Ideally, we would stop the counter upon any of the two following events:
+
+
When the cat arrives at the party. Also partially done, we have a stream catAtParty$, once a value is pushed into this stream, you know the cat was dropped at the party.
+
We stop dragging the cat. We already have a stream catDragEnd$, each emitted value means we just dropped the cat element. You might be thinking the first point would be enough, but remember the cat can be dropped literally anywhere on the screen. We have no guarantees that it will get dropped at the party.
+
+
Meet takeUntil, this operator allows you to listen to a stream until something happens! Letโs look at the implementation of the countdown$.
+
const countdown$ = timer(0, 1000).pipe(
map((t) => 5 - t),
takeWhile((t) => t >= 0),
takeUntil(/*something we'll figure out later*/),
)
+
Now, what is the argument of the takeUntil operator? takeUntil receives a stream, once that stream emits a value, our countdown$ will stop emitting, thus canceling the timer and giving our users another chance to dragging the cat to the party.
+
But we have two streams, catDragEnd$ and catAtParty$, can we make it one? Yes, we can! Weโve already met merge! This operator can take multiple streams and combine into a single one, think of it as a funnel.
+
Letโs call this last stream cancelCountdown$. After we declare it, we can feed it as an input to our takeUntil operator. Hereโs the final implementation of Level 4 with cancellation.
+ In this diagram, our stream gets cancelled after the value 3 is published. The first dragend event
+ causes the countdownRunning$ to stop emitting values.
+
Here are the concepts youโve learned by building this game:
+
+
Creating streams from DOM events.
+
Manipulating streams with basic operators such as map, filter.
+
Combining streams with operators such as: withLatestFrom, switchMap, and merge.
+
Cancellation, being able to stop listening to a specific stream based on another. In our last level, we used takeUntil to achieve this.
+
+
Now go out there and try to apply these concepts to build your own applications. I would be pleased to hear from you if youโve learned something here today.
+
In the upcoming articles, Iโll share with you the good and bad parts of adopting reactive programming and start using RxJS in your codebase, and at last, Iโll share with you a bunch of fantastic resources to learn RxjS and reactive programming.
\ No newline at end of file
diff --git a/posts/hidden-potential-webpack-define-plugin/index.html b/posts/hidden-potential-webpack-define-plugin/index.html
new file mode 100644
index 0000000..27304f2
--- /dev/null
+++ b/posts/hidden-potential-webpack-define-plugin/index.html
@@ -0,0 +1,133 @@
+ The hidden potential of webpack DefinePlugin - ~/
+
+
+
The odds are high that youโre using webpack to bundle your assets. If youโre looking into an excellent way to feed environment variables to your applications, DefinePlugin might well be the answer.
One of these days, I had this exciting challenge, I was integrating some third party that required from me to provide the current commit hash of the code to a JavaScript SDK that performs some magic in bug tracking and versioning.
+
Well seemed pretty simple for me at the time. I need to take the commit hash at build time and somehow feed it to our JavaScript, whatever that means.
+
In this blog post, Iโll explain step by step how to implement the following:
+
+
We want to log in the console the link to the GitHub history of the application
+that points to the commit of the current version of the application.
Now, letโs dive into the webpack.config.js. Well itโs not that complicated, the only nasty detail is that even if you want to pass in a simple string, you need to wrap it with a JSON.stringify otherwise, webpack dumps whatever text comes out of your environment variable and dump it in your JavaScript, and you get a very nasty syntax error. So letโs use the DefinePlugin:
Pro Tip: You might be wondering why the strange naming __commitHash__, well the prefix and suffix underscores are just a way to prevent naming collisions. I hope that you donโt often use __var__ as a style to name variables in JavaScript, well I donโt, thatโs why I found this extremely unlikely to collide.
In the end, we use the environment variable. In this case to console.log a helpful GitHub link:
+
console.log(
`You are running on this commit of the application https://github.com/danielcaldas/el-conversor/commit/${__commitHash__}`,
)
+
You can see the final result in the image below, it logs:
+
+
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/tags/softwaretesting/index.html b/posts/how-to-copy-file-android/index.html
similarity index 56%
rename from tags/softwaretesting/index.html
rename to posts/how-to-copy-file-android/index.html
index 59839d4..60cb329 100644
--- a/tags/softwaretesting/index.html
+++ b/posts/how-to-copy-file-android/index.html
@@ -1,4 +1,4 @@
- posts - Hey ๐
+ How to overengineer copying files from any Android device - ~/
@@ -32,7 +32,77 @@
}
setup()
-
tl;dr SSH into your android and download the files with scp. This one works for me.
+
So this afternoon, I had decided to take some time to clear my smartphone, archive some old pictures and stuff. I usually park them on an external drive. Anyways, it happens that my OnePlus 6 does not connect to my new shiny MacBook Pro.
Hope this tip helps you out in case you get stuck due to the usual apple mumbo jumbo.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/how-to-fix-github-password-authentication/index.html b/posts/how-to-fix-github-password-authentication/index.html
index d6237da..1138b93 100644
--- a/posts/how-to-fix-github-password-authentication/index.html
+++ b/posts/how-to-fix-github-password-authentication/index.html
@@ -1,4 +1,4 @@
- How to Fix GitHub Actions: Support for password authentication was removed - Hey ๐
+ How to Fix GitHub Actions: Support for password authentication was removed - ~/
@@ -118,4 +118,4 @@
RxJS is known to be the go to library when it comes to programming with streams. Reactive programming is famous for making complex things easier by offering an extensive API of operators that give developers extreme power and flexibility when writing complex event-driven user interfaces.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
RxJS is known to be the go to library when it comes to programming with streams. Reactive programming is famous for making complex things easier by offering an extensive API of operators that give developers extreme power and flexibility when writing complex event-driven user interfaces.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/my-two-cents-on-tech-job-interviews/index.html b/posts/my-two-cents-on-tech-job-interviews/index.html
index 9bb1762..5fff216 100644
--- a/posts/my-two-cents-on-tech-job-interviews/index.html
+++ b/posts/my-two-cents-on-tech-job-interviews/index.html
@@ -1,4 +1,4 @@
- My 2 cents on (tech) job interviews - Hey ๐
+ My 2 cents on (tech) job interviews - ~/
@@ -227,4 +227,4 @@
Again much of the written above is just my opinion. I hope you find useful some of the sections of this post even if you donโt work on the tech industry.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
Again much of the written above is just my opinion. I hope you find useful some of the sections of this post even if you donโt work on the tech industry.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/open-source-dilemma/index.html b/posts/open-source-dilemma/index.html
index ec05f5b..771f9fb 100644
--- a/posts/open-source-dilemma/index.html
+++ b/posts/open-source-dilemma/index.html
@@ -1,4 +1,4 @@
- There's something off about Open Source - Hey ๐
+ There's something off about Open Source - ~/
@@ -90,7 +90,7 @@
}
I didnโt modify this article. I donโt fully agree with my views here anymore. The problem is not on FOSS, but rather on peoplesโ expectations and approach to FOSS. Iโm still of the opinion that FOSS is not at a fully sustainable stage. Major projects today are typically funded and itโs no longer rare to see full-time employed developers work on maintaining FOSS these days.
I have this poor habit you knowโฆ Whenever I accumulate a lot of git stashes in some repository I just get a little maniac and start cleaning everything.
+
+
+
I found it sometimes even funny to open the terminal and play around with some bash to delete the stashes, look:
+
Terminal window
# if you're just flashing by don't copy and past this line into your terminal
foriin {1..10}; dogitstashdrop; done
+
Well, it happens that today (a few hours ago actually) I just did this and regretted the moment I did because there was this huge feature that for some reason I had locally stashed and not committed ยฏ\_(ใ)_/ยฏ.
+
Good news!, the commits are not actually gone until git runs garbage collection, so to check the list of commits that might still be rescued just go ahead and type:
+
Terminal window
gitfsck--unreachable
+
or maybe
+
Terminal window
gitfsck--unreachable|grepcommit
+
because you actually need to check whether your hash is somewhere referenced as a unreachable commit.
+
Then all you need to do once you find your stash (if you donโt know the hash Iโm afraid you will have to apply stashes until you find it) is just:
During the past two months, Iโve been developing a side project at work, this started with me doing a simple refactor task. At the time I looked at the solution we had in place, and it was dirty, but it was necessary to skip some considerable performance penalty. Maybe it was something that we just had to learn to live withโฆ
Hell no! At the time the alternatives werenโt that promising, but soon I realized the untapped potential of doing work at build time with babeljs. Iโm very proud to present babel-plugin-cloudinary. In this trivago tech blog article, you can find all the details and motivation behind the plugin.
+And by the way, if you want to know what the heck am I talking about, just take a look at the official repository of babel-plugin-cloudinary.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/reactive-programming-fundamentals/index.html b/posts/reactive-programming-fundamentals/index.html
new file mode 100644
index 0000000..7979842
--- /dev/null
+++ b/posts/reactive-programming-fundamentals/index.html
@@ -0,0 +1,277 @@
+ Reactive Series (pt. 2) - Fundamentals of Reactive Programming - ~/
+
+
+
You might have encountered several diagrams and explanations of the Observer pattern. For those of you that might not yet be familiar
+with it, allow me to explain it with an example-based approach, a very different one than what I had at school.
+
+
โDefine a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.โ by sourcemaking.com
+
+
I didnโt get it for the first time with this definition and set me away instead of fascinating me. I thought this would be
+a super tricky thing to get. But not if youโve had explained it to me with something we all know like youtube.
Letโs look at youtube.com for a second. Iโll use it as an example to explain this patternโs two core participants: Observer and Observable.
+
Your browsing on youtube and you find a new channel. You want to receive notifications anytime some new
+content is published into that youtube channel, but for that, youโll need to hit the subscribe button first. You are the Observer, consuming the content posted (published) by that youtube channel. This makes the youtube channel the Observable. Another vital aspect to see is the multiplicity of this relationship. Thereโs one youtube channel to many youtube users (subscribers).
Keeping this analogy in mind, letโs clarify a couple more concepts that complement the relationship between an Observable and its Observables.
+
+
Producer or creator - something that generates/publishes content. Back to our analogy, the content creator is the youtube
+channel owner. An Observable produces data.
+
Consumer or client - something that subscribes to new content (data) published by the producers; our user is the consumer in our analogy. He or she gets notified when new content is out.
+
Subscription - think of it as an object that holds the information about you subscribing to that youtube channel. One crucial thing that the subscription must own is a way for you to unsubscribe from that youtube channel when you no longer want to be notified of new content.
+
Pull - we talk about a pull protocol when a consumer/client explicitly decides when to get data from the producer/creator. For instance, when we create a simple function and call it to do some work for us.
+
Push - in these systems, the consumer/client doesnโt know exactly when new content is published. Our youtube analogy describes such a system where the channel subscribers have no clue when a new video will be posted.
+
+
These concepts are more comfortable to follow when backing them up with some real-life example, but most importantly, it is good that you possess a grasp of the jargon. Itโs crucial to clearly express yourself with your peers. Last but not least, this becomes super relevant when youโre trying to Google your away around some issue.
+
ยปA naive use case for the Observer pattern in JavaScript
+
Now letโs get our hands on and implement the Observer pattern for our youtube case study. The idea is to use the Observer pattern to notify many youtube users when a new video is published into the channel. Weโll keep the example slim and straightforward. The main idea is to have an end-to-end perception of how the data flows in our application when using Observables. We wonโt have a UI here. We will just use console.log to signal some events in our small program.
+
classVideo {
constructor(title) {
this.title=title
}
}
+
classChannel {
constructor(name, subscribers= []) {
this.name=name
this.subscribers=subscribers
this.videos= []
}
+
// subscribes a user to an instance of channel
// returns the unsubscription function
subscribe(user) {
this.subscribers.push(user)
+
const userIndex = this.subscribers.length - 1
+
// remember we need to allow our users
// to unsubscribe anytime
const unsubscribe = () => {
this.subscribers.splice(userIndex, 1)
}
+
returnunsubscribe
}
+
// publishes a new video in this channel notifying
The Video is just really the contract for the payload we sent out to subscribers, it can really be anything.
+
+
I hope this example clarifies that you can leverage the Observer pattern with no additional libraries in any programming language. I found this knowledge of paramount importance to understand more complex use cases in reactive programming, specially when using libraries, we sit as a client, we go one layer of abstraction above what youโve seen in the previous example. With reactive programming libraries, you can juggle with Observables in fantastic ways effortlessly.
+
As a side note, if youโre keen on learning more about the Observer pattern (or any other design pattern), I highly recommend the following resources:
Observables are everywhere these days. Libraries such as RxJS has an internal implementation of an Observable type, an refers to it as a first-class citizen.
+
I would like to highlight the tc39 Observable proposal. Observables are a very natural fit to handle many programming challenges. I think this has become more noticeable given that people are even considering bringing it into the language (in this case JavaScript)! I believe we are blurring the line between language specification and library, but Iโm happy to see the proliferation of Observablesโ discussions.
Reactive Programming is programming with streams of data. Streams are vessels of values pushed over time. Streams can be transformed into and combined with other streams.
+
To make the above clearer, letโs go over a few essential concepts, those youโll hear all the time.
There are 3 very important aspects about Observables in reactive programming. Maybe some of them donโt make sense now, but they will, once you have some hands-on experience with some reactive library.
+
Observables areโฆ
+
+
a primitive type with 0 to many values, pushed over any amount of time (yes, mentioned quite a few times already).
+
cancellable, you can cancel a subscription by sending stuff to these observables: โI donโtโ want you to send me those values anymore.โ
+
lazy. Observables donโt do anything until you subscribe. This is the complete opposite of Promises. Promises are eager, thatโs why we often wrap them in a function, making them lazy, so they only execute when we call them.
An overused term these days, but Iโll try to make it simple.
+First of all, a stream is an Observable; youโll find that these two concepts are often interchangeable. Simply put, a stream is a collection of values pushed over time. Letโs think of โlive streamingโ in the video industry for a moment; on one end, thereโs your laptop observing the stream; on the other end, something is pushing several bits of data over the wire. Simple right? But how to think about streams in the conceptual world? Thatโs where diagrams (more precisely marble diagrams) come in handy. At the most basic level, a stream is simply represented by a horizontal line, representative of time, with geometric figures. Each figure represents an emitted value on the stream. Whatโs an emitted value? If a stream emits a value, it means that everyone looking into the stream will get notified of that value. Hopefully, the following figure makes it crystal clear.
+
+
The following represents a stream that emits 4 values (1 value emitted per second).
Streams alone are useful as they allow multiple Observers to subscribe to it for updates. Things start to get more enjoyable when you want to manipulate a stream. As mentioned, streams can be transformed and even combined. The power itโs all yours. Letโs look at two essential operations, mapping, and filtering. Take a look at the following animation.
As you can see on the left, map applied over the left-most stream generates a new stream of values where each value in the original stream goes through the function isEven provided to the mapping operation. Subscribing to this stream, you would get a boolean (true vs. false) or number (0 vs. 1) that tells you whether a given value is even or odd. Now letโs look at filter. With filter, instead of transforming each value, youโre actually creating a new stream that only emits the original value when the same itโs even. So from an Observer perspective, you would be notified half of the times, while with map your Observer will be notified for every single value.
This is a concept that Iโve experienced before understanding it, and it can be daunting.
+
A Hot Observable emits values before the subscription happens. Think of it as a live music concert in a stadium. You will only get to see the full performance if you enter the stadium (subscribe) before the show starts (stream emits values). Of course, you can arrive at the venue to see the concert at any future time. Everyone at the stadium shares the same experience (meaning the values are shared among subscribers).
+In a real use case, a Hot Observable can be a stream of click events on the page (there might be clicks happening before you subscribe to it) in a user interface.
+
A Cold Observable only starts emitting values upon subscription. Think of it as a movie on Netflix. The film only starts playing once you press play on your laptop. You wonโt miss pieces of the movie since you can start playing from the very start. If someone else watches the same movie on Netflix, they wonโt share your timeline; each user has its own individual timeline (values are not shared among subscribers).
+In a real use case, a cold Observable can be a countdown clock where each subscriber has its own clock.
According to my research in the paper Functional Reactive Animation (1997), we see some first mentions to things such as: reactivity. Some kind of temporal representation animations resembles the concept of a stream.
+
Haskell mentions in its WiKi page :
+
+
โFunctional Reactive Programming (FRP) integrates time flow and compositional events into functional programming.โ
+
+
The phrasing here is bit complicated. Thereโs this concept of a primitive type called Behavior, which is defined as a time-varying value. This resembles a stream, right? A stream is somehow a time-varying value since you can get different values pushed to the stream over time, not that the reference to the stream changes, but its contents instead.
+
Today reactive is not only used to manage animated user interfaces. Itโs on every platform, from the web to mobile, from UIs to servers. Hereโs a couple of the most famous reactive programming libraries today:
I hope this section offers some other views (and their sources) on reactive programming, expressed in a different way that might complement or even wholly build your understanding of things so far.
+
+
โReactive Programming raises the level of abstraction of your code so you can focus on the interdependence of events that define the business logic, rather than having to constantly fiddle with a large amount of implementation details"
Itโs good that you discovered these concepts before you jump into practice. In my opinion, these canโt be absorbed only by reading. Go over to the next blog post, where weโll build a small game together so that you can materialize the things Iโve covered in this blog post.
\ No newline at end of file
diff --git a/posts/reactive-rxjs-pros-cons/index.html b/posts/reactive-rxjs-pros-cons/index.html
new file mode 100644
index 0000000..c87fdbb
--- /dev/null
+++ b/posts/reactive-rxjs-pros-cons/index.html
@@ -0,0 +1,221 @@
+ Reactive Series (pt. 4) - Reactive Programming: The Good and the Bad - ~/
+
+
+
After seeing reactive streams in action with RxJS, I would now like to expand โPart 1 - Why you should consider Reactive Programmingโ by debating some of the gains & pains of reactive streams and RxJS.
+As of now, weโve covered some fundamental aspects of reactive programming, and weโve seen some code as well!
+In this part of the series, Iโll be compacting some of the benefits I felt while using reactive programming and some of the major pain points of adopting it. Since weโve used RxJS, Iโll make occasional mentions of this reactive libraryโs ups and downs.
Working with streams means nothing happens until you subscribe to them, which is terrific! Because any code path now has a โfree of chargeโ stop & play capability! Without any effort, your computations become lazy by default executing when needed - Promises are eager. They start running as soon as you construct them. Itโs common to wrap a Promise with a function to make it lazy.
As weโve seen in the hands-on part of this series, youโll likely have to model events and think about what parties are interested in consuming such events. Youโll spend less time focusing on the implementation details. Youโll rather spend your time drawing a mental map of the eventsโ interdependency that define your business logic. In my experience, this often results in more compact implementations, making it more accessible to capture the big picture of the internal flows in your application.
It only makes sense that if you have an ecosystem, such as RxJS, in your arsenal, youโll spend less time implementing behaviors that are already built-in in some operator (e.g., debouncing, throttling, etc.). Just like youโll spend less time mutating the DOM directly when you use a UI framework such as React or Vue, youโll think more about how your UI looks like and what data binds to what parts of your UI.
In my opinion, an overlooked easy win of coding with streams and RxJS is how easy it becomes to implement cancellation. What kind of behavior does cancellation concern, you ask? Letโs see an example.
+
+
In the above GIF, we have a list of items. Hovering on each item in the list triggers an ajax request to fetch some data from the server. The problem of eagerly (compared with clicking the item, for instance) triggering the requests upon mouse hovering is that you can potentially fetch the data for all the items but ending up not displaying any of the data to the end-user. To avoid that, we cancel an itemโs request when the userโs mouse leaves it.
+
(Note: oh, btw on the above GIF, Iโm not calling a real API, Iโm just using the tweak browser extension to mock the HTTP requests seamlessly)
+
+
Hereโs the snippet of the above pattern, implemented with switchMap and takeUntil.
Did it ever happen that your addEventListener handle is just executing too many times? For instance, while running an event handler for the scroll event? Itโs common to use a debounce strategy to run your event handler only after X time has passed since the last scroll event. Again, with built-in operators such as debounce in RxJS, you can quickly relieve the load in your consumer functions (event handlers). The operator single-handedly takes care of debouncing emissions for you!
Iโve covered this in greater detail during โPart 1 - Why you should consider Reactive Programmingโ the gist is that working with streams when done right, might make callbacks, Promises, and async/await nearly obsolete. I say nearly because youโ might still use Promises under the hood, but your code now can look the same whether youโre tackling synchronous or asynchronous tasks.
I want to reinforce that you can leverage reactive libraries such as RxJS to solve complex problems with little effort. If you havenโt watched the talk โComplex features made easy with RxJSโ by Ben Lesh, I would highly recommend it. In the first 10 minutes, youโll see how easy it becomes to tackle some of the following problems with the help of RxJS:
Avoid double submission through a button that involves an asynchronous Ajax call [7:04]
+
Throttle autosuggestion field that involves fetching data with a given search term [7:24]
+
+
If you aim to solve one of the problems mentioned in the above list, you can avoid reinventing the wheel by following the reactive patterns demonstrated in the video.
There are two aspects of maintainability that I would point out. First, youโll write less code; thereโs a lot of heavy lifting that RxJS can do for you; if you leverage that, youโll undoubtedly ending writing less code. The second is that a combination of streams with powerful operators solve complex problems in a very declarative manner. Code will look concise and straightforward; instead of verbose branching and imperative logic, youโll have a few combinations of operators that will do all the magic for you.
+However, with RxJS and streams, maintainability is a double-edged sword. Weโre going to cover that in the next part of this article.
Any modern JavaScript codebase uses a cocktail of libraries. RxJS (or whatever library you would adopt) would be just one more thing youโll have to teach newcomers. But donโt take this as a light decision. Youโre not only introducing a new library in the codebase, but youโre also introducing a new paradigm. I feel thereโs quite a learning curve towards mastering reactive programming and RxJS. Not only youโre exposed to an entirely new ecosystem with new APIs, but you also need the time to process this different paradigm of programming with streams. As weโve experienced in previous articles, it can be quite different from a traditional writing code style (compared with imperative programming, for example).
+
Depending on how broadly youโll embrace this paradigm, you might need to ship new tooling for unit testing and master additional concepts such as marble diagrams - which helps you properly model and assert data streams. However, it might require you and your team to learn another tricky DSL (domain-specific language) to deal with these diagrams.
+
Some might argue that the โlearning curveโ is a โone-time costโ. As it turns out, in the software industry, software engineers tend to move a lot (due to the high demand for the skill these days), and they might be sticking around in the same company for an average of 2 to 3 years before embracing a new challenge. The bustling job market makes me believe that it is not wise to think of the โlearning curveโ as a one time cost because soon, your freshly trained engineer with RxJS skills might say goodbye.
Just the same way, you can split your code into several functions, and those functions call other functions which, without some structure, might end up in spaghetti code. Likewise, you can end up entangled in a spaghetti of streams and not know which way to turn. I think simple functions are usually more straightforward to debug, given that they are composed sequentially. Youโre reading a function; that function might call other N functions and so forth. Well, with streams, it might not be that candid because thereโs no such thing as a stream invoking another stream. Instead, youโll have a stream plugging with other streams in mixed ways depending on the operators that join them. It might feel overweighing at some point to find your way around some particular flow (hopefully, you wonโtโ reach that point because your code is clear and concise).
+
Another aspect that you might run into while debugging streams is that such an amount of abstractions and compact implementation will let no space for you to plug into a stream and debug it or inspect it the same way you debug a function. Things tend to be on a higher level of abstraction - which is beneficial because it will free up your mind on some implementation details. Hence when it comes to the point you need to dig further down, understanding whatโs going on at the very core of your flow, you might need to tap into streams here and there to figure out whatโs the issue. Although old this article, it might be one of the best walkthroughs of the problem Iโm trying to surface here. It will give you a solid strategy to debug streams (even if youโre looking at that particular code for the first time) - tip for reading it: mentally replace do per tap.
Kiss: Keep it Simple, Stupid, not easy with reactive streams and RxJS tough. Iโll tell from personal experience that it will come the day youโll look at your code, and although itโs just fine, youโll feel this voice inside your head: โAre you sure thereโs nothing else much fancier in the RxJS API that would allow you to write less two lines of code?โ - fight that voice! Creative solutions with RxJS might often result in dreadful consequences for your product and team. But yet, RxJS has such a unique and evolving ecosystem that will feel tempting with time to start to chime in some new operators just for the sake of adding more operators. Fight that in code reviews - this is the place you can understand why your colleague is shipping that new exotic operator and challenge simpler alternatives already in use. I guess this is general advice. I wouldnโt apply it to reactive programming only. If you donโt have a code review process, ยฏ\_(ใ)_/ยฏ.
As usual, with powerful tools, there is increased responsibility towards their use. If you pick RxJS as your weapon of choice, there are things youโll need to be extra careful. I want to highlight one: shareReplay. We didnโt look into this operator in particular during this series, but we did learn the difference between Hot and Cold observables, a quick refresher:
+
+
Hot Observables - multicast; all subscribers get data from the same producer (e.g., a live music concert in a stadium).
+
Cold Observables - unicast; each subscriber gets data from different producers (e.g., a show on Netflix).
shareReplay
+ allows you to take a cold observable and make it hot in the sense that you can now multicast the underlying computation
+to multiple subscribers ๐คฏ - thatโs share. With this operator, new subscribers will be able to โcatch upโ with
+previously emitted values at any point in time - thatโs replay.
+
+
Donโt want to get into extensive detail of what the operator pertains to; be mindful of your implementation gaps that might trigger massive memory leaks in your application by using this operator. The gist is that using shareReply without refCount may origin a memory leak because the operator doesnโt automatically close the stream after all its consumersโ have unsubscribed.
+
Also, historically, there have been some issues around its implementation [1][2].
Finally, yet notably, error handling. Something I did not cover in the previous articles. Error handling is yet something else that changes considerably. Letโs look at a simple example comparing reactive vs. non-reactive.
console.log(`Done fetching data for item ${response.item.id}!`);
}),
+
For a more natural integration, youโll have to stick with the catchError operator. As a beginner, I would tend to wrap stuff around with try/catch, but things work slightly differently with streams. Observable is our primitive here, remember?
+Something mentioned as a โgotchaโ of RxJSis the fact that an RxJS Observable does not โtrapโ errors; when an error bubbles to the end of the observer chain, when unhandled, the error, it will be re-thrown.
Would I use reactive programming and RxJS in my next project? Dependsโฆ Thereโs a great deal of learning involved in using these technologies, so even though I might not always use them, Iโm confident that these skills will (and are!) playing an essential role in my evolution as a software engineer. Just know that I would do it again (all the learning and writing).
+
I do think Reactive is powerful and useful, but itโs not a holy grail that will solve all your problems overnight.
+
Please focus on the problem first, scrutinize the use cases, and Reactive shall reveal itself a solution.
+
I hope youโve enjoyed this series is now approaching its end. This series is far from the perfect learning resource, but I hope that my perspective and way of explaining things fit some of you, complementing your learnings in a way. To close, Iโll leave you with a list of fantastic learning resources for reactive programming and RxJS.
According to the official documentation, you can use Puppeteer with Firefox, with the caveat that you might encounter some issues since this capability is experimental at the time of this writing. You can specify which browser to run via puppeteer.launch options API that Iโve covered in this section.
-
What are your favorite bits of Puppeteer? What would you recommend me to learn next?
Last modified on 12, Oct, 2024
\ No newline at end of file
+
What are your favorite bits of Puppeteer? What would you recommend me to learn next?
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/tips-jest-unit-testing/index.html b/posts/tips-jest-unit-testing/index.html
index 1b9a3ec..4de41ff 100644
--- a/posts/tips-jest-unit-testing/index.html
+++ b/posts/tips-jest-unit-testing/index.html
@@ -1,4 +1,4 @@
- Unrevealed tips for unit testing with Jest - Hey ๐
+ Unrevealed tips for unit testing with Jest - ~/
@@ -149,4 +149,4 @@
ยป๐ฐ Bonus section: development watch mode for fixtures
Another thing that comes in handy when setting up our testing workflow, is to have a way to update the fixtures by tweaking existing test case inputs or adding new ones and automatically re-running the run-fixtures.js script and the unit tests with Jest. How would that go?
If you never tried nodemon, now itโs a good time to check it out. Itโs a mighty tool to restart some job based on specific changes in your project. Letโs use nodemon to set up a npm script that seamlessly re-runs our fixtures. The idea is that we achieve the same workflow that we would normally have with jest โwatchAll, on our fixtures folder. After installing nodemon, we just need to use the โwatch option to check for changes in our fixtures.
-
"fixtures:run": "node run-fixtures && jest ./fixtures/tests/fixtures.spec.js",
"fixtures:clean": "...",
"fixtures:watch": "nodemon --watch ./fixtures --ignore ./fixtures/tests --exec \"npm run fixtures:run\""
+
package.json
"fixtures:run": "node run-fixtures && jest ./fixtures/tests/fixtures.spec.js",
"fixtures:clean": "...",
"fixtures:watch": "nodemon --watch ./fixtures --ignore ./fixtures/tests --exec \"npm run fixtures:run\""
As already mentioned, all the code examples in this blog post are in a public GitHub repository.
I hope that if you went through the article, you have now one more testing software pattern on your toolbelt that will (for the right use cases) allow you scale the tests in your codebase effortlessly and a in self-documented/self-organized fashion.
-
What do you think about having a fixture based testing architecture? Do you have any project in mind where you see that this could be the right fit?
Last modified on 12, Oct, 2024
\ No newline at end of file
+
What do you think about having a fixture based testing architecture? Do you have any project in mind where you see that this could be the right fit?
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/web-compatible-developers/index.html b/posts/web-compatible-developers/index.html
index 3674cab..1a7993f 100644
--- a/posts/web-compatible-developers/index.html
+++ b/posts/web-compatible-developers/index.html
@@ -1,4 +1,4 @@
- Keeping the web compatible for developers - Hey ๐
+ Keeping the web compatible for developers - ~/
@@ -105,4 +105,4 @@
I hope this short episode makes you aware that you can help to make the web compatible and help the community get relieved of all of these annoying nuances of the different JavaScript APIs in the various browsers, especially when working with Internet Explorer and Edge.
Last modified on 12, Oct, 2024
\ No newline at end of file
+
I hope this short episode makes you aware that you can help to make the web compatible and help the community get relieved of all of these annoying nuances of the different JavaScript APIs in the various browsers, especially when working with Internet Explorer and Edge.
Last modified on 12, Oct, 2024
\ No newline at end of file
diff --git a/posts/why-reactive-programming/index.html b/posts/why-reactive-programming/index.html
index 7af2342..1e3bff0 100644
--- a/posts/why-reactive-programming/index.html
+++ b/posts/why-reactive-programming/index.html
@@ -1,4 +1,4 @@
- Reactive Series (pt. 1) - Why You Should Consider Reactive Programming - Hey ๐
+ Reactive Series (pt. 1) - Why You Should Consider Reactive Programming - ~/
@@ -209,43 +209,10 @@
+Mock or modify your HTTP requests to test, develop and demo your web application. tweak allows you to mock and
+ modify HTTP requests without leaving the browser.
+
Interactive and configurable graphs with react and d3 effortlessly.
\ No newline at end of file
diff --git a/rss.xml b/rss.xml
index 73a6d27..800fd4d 100644
--- a/rss.xml
+++ b/rss.xml
@@ -1,4 +1,4 @@
-Hey ๐Blogpost, note taking and other thingshttps://danielcaldas.github.io/CSSconf EU 2018https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/My notes on the CSSconfg EU 2018Sun, 17 Jun 2018 00:00:00 GMT<p>Hello all!! I decided to write this blog post to share with you the new things I learned attending this year's edition of <a href="https://2018. cssconf.eu" target="_blank" title="cssconf.eu official web page">CSSconf EU</a> in Berlin (Friday, June 1st). In this post I will focus more on the talks, I will cover other venue details in <a href="https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/" target="_blank" title="JSconf EU 2018 | Blog">another blog post</a> on <a href="https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/" target="_blank" title="JSconf EU 2018 | Blog">JSConf EU</a> that had a similar organization.</p>
+~/Blogpost, note taking and other thingshttps://danielcaldas.github.io/CSSconf EU 2018https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/My notes on the CSSconfg EU 2018Sun, 17 Jun 2018 00:00:00 GMT<p>Hello all!! I decided to write this blog post to share with you the new things I learned attending this year's edition of <a href="https://2018. cssconf.eu" target="_blank" title="cssconf.eu official web page">CSSconf EU</a> in Berlin (Friday, June 1st). In this post I will focus more on the talks, I will cover other venue details in <a href="https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/" target="_blank" title="JSconf EU 2018 | Blog">another blog post</a> on <a href="https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/" target="_blank" title="JSconf EU 2018 | Blog">JSConf EU</a> that had a similar organization.</p>
<h3>For starters</h3>
<p>If you were there as I was, you were probably wondering whether you were at the right conference, since at the beginning you would ask yourself <strong>where is the CSS</strong>?</p>
<p><img src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3liNnh6dTM4ZmlwNnZiemxhMmR3aWNlYWh0ZndiZWhydGsxdWFzaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hEc4k5pN17GZq/giphy.webp" alt="where is the css, john travolta">
@@ -1267,7 +1267,7 @@ export default function App() {
<li>On your root folder create a <code>.vscode</code> folder (it may already exist, in that case, jump this step).</li>
<li>Create a <code>launch.json</code> file inside the <code>.vscode</code> directory with the following configuration or click on the gear icon in the debug tab on vscode:</li>
</ol>
-<pre><code class="language-json:title=.vscode/launch.json">{
+<pre><code class="language-json">{
"version": "0.2.0",
"configurations": [
{
@@ -1375,6 +1375,131 @@ export default createStore(reducer, {}, composeEnhancers(middleware))
<h3>Conclusions</h3>
<p><img src="./assets/debugging-javascript-with-vscode/debug-animation-2.gif" alt="vscode setup redux final" title="vscode setup redux final"></p>
<p>I might have spent one or two days trying to figure out how to bring all these pieces together, but having done it, believe that it increased my productivity in ways that by far compensate the invested time. I hope you find this article useful especially if it saves you one day of trouble trying to figure out the right configs.</p>
+Destructuring in JavaScript: the not so good partshttps://danielcaldas.github.io/posts/destructuring-the-not-so-good-parts/https://danielcaldas.github.io/posts/destructuring-the-not-so-good-parts/Destructuring in JavaScript: the not so good partsThu, 20 Jun 2019 00:00:00 GMT<p>Generally speaking, I would say everybody loves the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank" title="the destructuring assignment syntax MDN web docs">destructuring assignment</a>, and for good reasons. Next, I list some of the amazing things one can achieve with destructuring in JavaScript.</p>
+<h4>Object destructuring</h4>
+<pre><code class="language-javascript">const user = { username: 'captain', email: 'captain@email.com', age: 30 }
+const { username, age } = user
+</code></pre>
+<p><br /></p>
+<h4>Provide default values</h4>
+<pre><code class="language-javascript">const user = { email: 'captain@email.com', age: 30 }
+const { username = 'unknown', age } = user
+// you can now use username with value 'unknown'
+</code></pre>
+<p><br /></p>
+<h4>Renaming variables on creation</h4>
+<pre><code class="language-javascript">const user = { username: 'captain', email: 'captain@email.com', age: 30 }
+const { username, age: userAge } = user
+// you know have age value 30 in the variable userAge
+</code></pre>
+<p><br /></p>
+<h4>Nested object destructuring โ ๏ธ</h4>
+<pre><code class="language-javascript">const user = { username: 'captain', age: { value: 30, label: '30 years old' } }
+const {
+ username,
+ age: { label },
+} = user
+// you can now use label directly
+</code></pre>
+<p><br /></p>
+<h4>Array destructuring</h4>
+<pre><code class="language-javascript">const rgb = [200, 255, 100]
+const [red, green, blue] = rgb
+// the variables red, green and blue match the elements order in rgb array
+</code></pre>
+<p><br /></p>
+<h4>Works with any iterable on the right-side (e.g <code>Set</code>)</h4>
+<pre><code class="language-javascript">let [a, b, c] = 'abc' // ["a", "b", "c"]
+let [one, two, three] = new Set([1, 2, 3])
+</code></pre>
+<p><br /></p>
+<h4>Swapping Variables</h4>
+<pre><code class="language-javascript">let a = 1
+let b = 2
+;[b, a] = [a, b]
+</code></pre>
+<p><br /></p>
+<h4>Swapping array positions</h4>
+<pre><code class="language-javascript">const arr = [1, 3, 2, 4, 5]
+;[arr[1], arr[2]] = [arr[2], arr[1]]
+// arr is now [1, 2, 3, 4, 5]
+</code></pre>
+<p><br /></p>
+<h4>Skipping items โ ๏ธ</h4>
+<pre><code class="language-javascript">const rgb = [200, 255, 100]
+// skip the first two items
+// assign the only third item to the blue variable
+const [, , blue] = rgb
+</code></pre>
+<p><br /></p>
+<h4>Nested array destructuring โ ๏ธ</h4>
+<pre><code class="language-javascript">const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']
+// use nested destructuring to assign red, green and blue
+const [hex, [red, green, blue]] = color
+console.log(hex, red, green, blue) // #FF00FF 255 0 255
+</code></pre>
+<p><br /></p>
+<h4>Function parameter destructuring โ ๏ธ</h4>
+<pre><code class="language-javascript">function getUserInfo({ username, email }) {
+ return `Username: ${username}; Email: ${email}`
+}
+const user = { username: 'captain', email: 'captain@email.com' }
+const userInfo = getUserInfo(user)
+</code></pre>
+<p><br /></p>
+<h3>What's not so good here</h3>
+<p>The most significant dilemma of destructuring it's related with the fact that relies on properties of nested structures that can only be evaluated at runtime, let me give you an example.</p>
+<pre><code class="language-javascript">function addEmailToList(list, { email }) {
+ if (email) {
+ list.push(email)
+ }
+}
+const list = ['a@mail.com', 'b@mail.com']
+const user = undefined
+
+addEmailToList(list, user)
+// Uncaught TypeError: Cannot destructure property `email` of 'undefined' or 'null'
+</code></pre>
+<p>On the other hand, if you write this without destructuring, you won't make assumptions on the user, you can double check whether the given user is valid.</p>
+<pre><code class="language-javascript">function addEmailToList(list, user) {
+ if (user && user.email) {
+ list.push(user.email)
+ }
+}
+const list = ['a@mail.com', 'b@mail.com']
+const user = undefined
+
+addEmailToList(list, user)
+</code></pre>
+<p><br /></p>
+<h4>null - a catastrophe waiting to happen</h4>
+<p>Just a note, for you to be conscious that as in default assignment <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters" target="_blank" title="default function parameters allow named parameters to be initialized with default values">default parameters</a> the <code>null</code> value it's not considered false, thus you can't fall back to some default value in destructuring a property whose value is <code>null</code>.</p>
+<pre><code class="language-javascript">function formatAddress(info) {
+ const { country = '-', city = '-' } = info
+ return `${country}, ${city}`
+}
+
+const info = { country: 'Portugal', city: null }
+const result = formatAddress(info)
+// "Portugal, null" it's what you get instead of "Portugal, -"
+</code></pre>
+<p>Every feature above mentioned exists for you to use, but we should find a balance (as in everything else in life). Below I list a few guidelines/rules that will help you find the balance when using destructuring.</p>
+<p><img src="./assets/destructuring-the-not-so-good-parts/fat-cat-balance.jpg" alt="cat kong fu balance" title="cat kong fu balance"></p>
+<p><cite>source: https://imgflip.com/tag/fat+cat+balance</cite></p>
+<h3>The 3 Golden Rules</h3>
+<p>You might have noticed some previous warning sings (โ ๏ธ) in some of the listed usages of destructuring. I left those signs there because I consider those use cases potentially harmful.</p>
+<ol>
+<li><strong>Don't use nested destructuring on data that comes from any external data sources (such as REST APIs, GraphQL endpoints or files)</strong>. You never know when these APIs change their data contracts. Hopefully all of this it's synced between teams, but sometimes we get lost on the tiny details such as that one small property in some nested object that got renamed and instead of using <code>snake_case</code> it uses now <code>camelCase</code> just because it made more sense from an aesthetic point of view. Now your marvelous single page application is burning and falling into pieces because you were unsafely accessing this property when you could have protected yourself against it.</li>
+<li><strong>Don't use nested destructuring on function arguments that have long or complicated signatures</strong>. It makes it super hard to understand what the actually API of the function is, and you might get breaking behavior because someone decided to use your function, but in some edge case they do not provide you the valid input for you to destruct upon.</li>
+<li><strong>Don't use destructuring to retrieve a value if you rely on order.</strong> I listed the possibility of skipping elements with destructuring, it might sound tempting, but you might end up again breaking your website because your simple routine relies on the access of the <em>Nth</em> element of some inputted array. Also, you can still retrieve data out of the array, but it might be that in that position you don't get what you were expecting. If you choose this path, at this point, it should also be arguable that there's something very wrong either with your code or with the data model from where you're your reading data, use this one with care.</li>
+</ol>
+<h4>References</h4>
+<ul>
+<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank" title="the destructuring assignment syntax MDN web docs">MDN web docs: Destructuring assignment</a></li>
+<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" target="_blank" title="medium es6 destructuring the complete guide">ES6 Destructuring: The Complete Guide</a></li>
+<li><a href="https://javascript.info/destructuring-assignment" target="_blank" title="javascript info destructuring assignment">JAVASCRIPT.INFO: Destructuring assignment</a></li>
+<li><a href="https://github.com/getify/You-Dont-Know-JS" target="_blank" title="A book series on JavaScript">You Don't Know JS: ES6 & Beyond</a></li>
+</ul>
Why are developers bad at (manually) testing their code?https://danielcaldas.github.io/posts/developers-bad-at-testing-own-code/https://danielcaldas.github.io/posts/developers-bad-at-testing-own-code/Why are developers bad at (manually) testing their code?Tue, 06 Apr 2021 00:00:00 GMT<p>Manual testing of any software it's a vital activity to ensure its quality and long-term stability. Together with their coding activities, developers test their code changes to understand if they produce the desired outcome without breaking any existing software functionality. So far, so good.</p>
<p>Today I'm writing a few points on <strong>why developers are bad at manual testing</strong> their own code changes, especially at detecting unwanted side-effects in areas of the software often unrelated to the modified parts.</p>
<p>I'm writing because, at this point in time, I have experienced two very different setups towards software testing:</p>
@@ -1711,6 +1836,732 @@ mutated).
]
</code></pre>
<p></Accordion></p>
+Guide to custom React Hooks (wrap the MutationObserver)https://danielcaldas.github.io/posts/guide-to-custom-react-hooks-with-mutationobserver/https://danielcaldas.github.io/posts/guide-to-custom-react-hooks-with-mutationobserver/Guide to custom React Hooks with MutationObserverWed, 21 Jul 2021 00:00:00 GMT<p><!-- canonicalUrl: "https://blog.logrocket.com/guide-to-custom-react-hooks-with-mutationobserver/" --></p>
+<p>This article was originally published by <a href="https://logrocket.com/" target="_blank" title="LogRocket Modern Frontend Monitoring and Product Analytics">LogRocket</a>. You can checkout the original post <a href="https://blog.logrocket.com/guide-to-custom-react-hooks-with-mutationobserver/" target="_blank" title="Guide to custom React Hooks with MutationObserver LogRocket Blog">here</a>.</p>
+<p>With the introduction of React Hooks, the amount of shareable code within React codebases has exploded. Because Hooks are thin APIs on top of React, developers can collaborate by attaching reusable behavior to components and segregating these behaviors into smaller modules.</p>
+<p>While this is similar to how JavaScript developers abstract business logic away in vanilla JavaScript modules, Hooks provide more than pure JavaScript functions. Instead of taking data in and out, developers can stretch the spectrum of possibilities of what can happen inside a Hook.</p>
+<p>For instance, developers can:</p>
+<ul>
+<li>Mutate and manage a piece of state for a specific component or an entire application</li>
+<li>Trigger side effects on a page, like changing the title of a browser tab</li>
+<li>Rectify external APIs by tapping into React componentsโ lifecycle with Hooks</li>
+</ul>
+<p>In this post weโll explore the latter possibility. As a case study, weโll abstract the <code>MutationObserver</code> API in a custom React Hook, demonstrating how we can build robust, shareable pieces of logic in a React codebase.</p>
+<p>Weโll create a dynamic label that updates itself to indicate how many items we have in a list. Instead of using the provided React state array of elements, weโll use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">MutationObserver API</a> to detect added elements and update the label accordingly.</p>
+<p><img src="./assets/guide-to-custom-react-hooks-with-mutationobserver/fruits-example.gif" alt="'Update the dynamic label to count the number of fruits in the list'" title="Update the dynamic label to count the number of fruits in the list"></p>
+<p><cite>source: https://blog.logrocket.com/guide-to-custom-react-hooks-with-mutationobserver/</cite></p>
+<h2>Implementation overview</h2>
+<p>The following code is a simple component that renders our list. It also updates a counter value that represents the number of fruits currently in the list:</p>
+<pre><code class="language-javascript">export default function App() {
+ const listRef = useRef()
+ const [count, setCount] = useState(2)
+ const [fruits, setFruits] = useState(['apple', 'peach'])
+ const onListMutation = useCallback(
+ (mutationList) => {
+ setCount(mutationList[0].target.children.length)
+ },
+ [setCount],
+ )
+
+ useMutationObservable(listRef.current, onListMutation)
+
+ return (
+ <div>
+ <span>{`Added ${count} fruits`}</span>
+ <br />
+ <button onClick={() => setFruits([...fruits, `random fruit ${fruits.length}`])}>Add random fruit</button>
+ <ul ref={listRef}>
+ {fruits.map((f) => (
+ <li key={f}>{f}</li>
+ ))}
+ </ul>
+ </div>
+ )
+}
+</code></pre>
+<p>We want to trigger a callback function whenever our <code>list</code> element is mutated. Within the callback we refer to, the elementโs children give us the number of elements in the list.</p>
+<h2>Implementing the <code>useMutationObservable</code> custom Hook</h2>
+<p>Letโs look at the integration point:</p>
+<pre><code class="language-javascript">useMutationObservable(listRef.current, onListMutation)
+</code></pre>
+<p>The above <code>useMutationObservable</code> custom Hook abstracts the necessary operations to observe changes on the element passed as the first parameter. It then runs the callback passed as the second parameter whenever the target element changes.</p>
+<p>Now, letโs implement our <code>useMutationObservable</code> custom Hook.</p>
+<p>In the Hook, there are a number of boilerplate operations to understand. First, we must provide a set of options that comply with the <code>MutationObserver</code> API.</p>
+<p>Once a <code>MutationObserver</code> instance is created, we must call <code>observe</code> to listen for changes in the targeted DOM element.</p>
+<p>When we no longer need to listen to the changes, we must call <code>disconnect</code> on the observer to clean up our subscription. This must happen when the <code>App</code> component unmounts:</p>
+<pre><code class="language-javascript">const DEFAULT_OPTIONS = {
+ config: { attributes: true, childList: true, subtree: true },
+}
+function useMutationObservable(targetEl, cb, options = DEFAULT_OPTIONS) {
+ const [observer, setObserver] = useState(null)
+
+ useEffect(() => {
+ const obs = new MutationObserver(cb)
+ setObserver(obs)
+ }, [cb, options, setObserver])
+
+ useEffect(() => {
+ if (!observer) return
+ const { config } = options
+ observer.observe(targetEl, config)
+ return () => {
+ if (observer) {
+ observer.disconnect()
+ }
+ }
+ }, [observer, targetEl, options])
+}
+</code></pre>
+<p>All the above work, including initializing the <code>MutationObserver</code> with the right parameters, observing changes with the call to <code>observer.observe</code>, and cleaning up with <code>observer.disconnect</code>, are abstracted away from the client.</p>
+<p>Not only do we export functionality, but we also clean up by hooking into the React componentsโ lifecycle and by leveraging cleanup callbacks on effect Hooks to tear down the <code>MutationObserver</code> instance.</p>
+<p>Now that we have a functional and basic version of our Hook, we can think about improving its quality by iterating on its API and enhancing the developer experience around this shareable piece of code.</p>
+<h3>Input validation and development</h3>
+<p>One important aspect when designing custom React Hooks is input validation. We must be able to communicate to developers when things are not running smoothly or a certain use case is hitting an edge case.</p>
+<p>Usually, development logs help developers understand unfamiliar code to adjust their implementation. Likewise, we can enhance the above implementation by adding runtime checks and comprehensive warning logs to validate and communicate issues to other developers:</p>
+<pre><code class="language-javascript">function useMutationObservable(targetEl, cb, options = DEFAULT_OPTIONS) {
+ const [observer, setObserver] = useState(null)
+
+ useEffect(() => {
+ // A)
+ if (!cb || typeof cb !== 'function') {
+ console.warn(`You must provide a valid callback function, instead you've provided ${cb}`)
+ return
+ }
+ const { debounceTime } = options
+ const obs = new MutationObserver(cb)
+ setObserver(obs)
+ }, [cb, options, setObserver])
+ useEffect(() => {
+ if (!observer) return
+ if (!targetEl) {
+ // B)
+ console.warn(`You must provide a valid DOM element to observe, instead you've provided ${targetEl}`)
+ }
+ const { config } = options
+ try {
+ observer.observe(targetEl, config)
+ } catch (e) {
+ // C)
+ console.error(e)
+ }
+ return () => {
+ if (observer) {
+ observer.disconnect()
+ }
+ }
+ }, [observer, targetEl, options])
+}
+</code></pre>
+<p>In this example, weโre checking that a callback is passed as a second argument. This API check at runtime can easily alert the developer that something is wrong on the caller side.</p>
+<p>We can also see whether the provided DOM element is invalid with an erroneous value provided to the Hook at runtime or not. These are logged together to inform us to quickly resolve the issue.</p>
+<p>And, if <code>observe</code> throws an error, we can catch and report it. We must avoid breaking the JavaScript runtime flow as much as possible, so by catching the error, we can choose to either log it or report it depending on the environment.</p>
+<h3>Extensibility via configuration</h3>
+<p>If we want to add more capabilities to our Hook, we should do this in a retro-compatible fashion, such as an opt-in capability that has little or no friction towards its adoption.</p>
+<p>Letโs look at how we can optionally debounce the provided callback function so callers can specify an interval of time when no other changes in the target element trigger. This runs the callback once rather than running the same amount of times the element or its children mutated:</p>
+<pre><code class="language-javascript">import debounce from "lodash.debounce";
+
+const DEFAULT_OPTIONS = {
+ config: { attributes: true, childList: true, subtree: true },
+ debounceTime: 0
+};
+function useMutationObservable(targetEl, cb, options = DEFAULT_OPTIONS) {
+ const [observer, setObserver] = useState(null);
+ useEffect(() => {
+ if (!cb || typeof cb !== "function") {
+ console.warn(
+ `You must provide a valida callback function, instead you've provided ${cb}`
+ );
+ return;
+ }
+ const { debounceTime } = options;
+ const obs = new MutationObserver(
+ debounceTime > 0 ? debounce(cb, debounceTime) : cb
+ );
+ setObserver(obs);
+ }, [cb, options, setObserver]);
+ // ...
+</code></pre>
+<p>This is handy if we must run a heavy operation, such as triggering a web request, ensuring it runs the minimum number of times possible.</p>
+<p>Our <code>debounceTime</code> option can now pass into our custom Hook. If a value bigger than <code>0</code> passes to <code>MutationObservable</code>, the callback delays accordingly.</p>
+<p>With a simple configuration exposed in our Hook API, we allow other developers to debounce their callbacks which can result in a more performant implementation given that we might drastically reduce the number of times the callback code gets executed.</p>
+<p>Of course, we can always debounce the callback on the client side, but this way we enrich our API and make the caller-side implementation smaller and declarative.</p>
+<h3>Testing</h3>
+<p>Testing is an essential part of developing any kind of shared capability. It helps us ensure a certain level of quality for generic APIs when they are heavily contributed to and shared.</p>
+<p>The <a href="https://blog.logrocket.com/a-quick-guide-to-testing-react-hooks-fa584c415407/">guide to testing React Hooks</a> has expansive detail around testing that can be implemented into this tutorial.</p>
+<h3>Documentation</h3>
+<p>Documentation can level up the quality of custom Hooks and make it developer-friendly.</p>
+<p>But even when writing plain JavaScript, <a href="https://jsdoc.app/">JSDoc documentation</a> can be written for custom hook APIs to ensure the Hook passes the right message to developers.</p>
+<p>Letโs focus on the <code>useMutationObservable</code> function declaration and how to add formatted JSDoc documentation to it:</p>
+<pre><code class="language-javascript">/**
+ * This custom hooks abstracts the usage of the Mutation Observer with React components.
+ * Watch for changes being made to the DOM tree and trigger a custom callback.
+ * @param {Element} targetEl DOM element to be observed
+ * @param {Function} cb callback that will run when there's a change in targetEl or any
+ * child element (depending on the provided options)
+ * @param {Object} options
+ * @param {Object} options.config check \[options\](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe)
+ * @param {number} [options.debounceTime=0] a number that represents the amount of time in ms
+ * that you which to debounce the call to the provided callback function
+ */
+function useMutationObservable(targetEl, cb, options = DEFAULT_OPTIONS) {
+</code></pre>
+<p>Writing this is not only useful for documentation, but it also leverages IntelliSense capabilities that autocomplete Hook usage and provide spot information for the Hookโs parameters. This saves developers a few seconds per usage, potentially adding up to hours wasted on reading through the code and trying to understand it.</p>
+<h2>Conclusion</h2>
+<p>With different kinds of custom Hooks we can implement, we see how they integrate extrinsic APIs into the React world. Itโs easy to integrate state management within Hooks and run effects based on inputs from components using the Hook.</p>
+<p>Remember that to build quality Hooks, itโs important to:</p>
+<ul>
+<li>Design easy-to-use, declarative APIs</li>
+<li>Enhance the development experience by checking for proper usage and logging warnings and errors</li>
+<li>Expose features through configurations, such as the <code>debounceTime</code> example</li>
+<li>Ease Hook usage by writing JSDoc documentation</li>
+</ul>
+<p>You can check the <a href="https://codepen.io/danielcaldas/pen/BaWPWEw">full implementation of the custom React hook here</a>.</p>
+Reactive Series (pt. 3) - Hands-on Reactive Programming with RxJShttps://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs/https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs/Reactive Series (pt. 3) - Hands-on Reactive Programming with RxJSWed, 16 Sep 2020 00:00:00 GMT<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Part 2 - Fundamentals of Reactive Programming</a></li>
+<li><strong>Part 3 - Hands-on Reactive Programming with RxJS</strong></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+<p>This part of the series it's all about getting your hands dirty! Part 3 is a tutorial on core techniques to build an application with reactive streams using <a href="https://rxjs-dev.firebaseapp.com/" target="_blank" title="A reactive programming library for JavaScript">RxJS</a>.</p>
+<ul>
+<li><a href="#warmup---handle-a-click-event-with-rxjs">Warmup - Handle a click event with RxJS</a></li>
+<li><a href="#rxjs-overview">RxJS Overview</a></li>
+<li><a href="#lets-build-something">Let's build something!</a></li>
+<li><a href="#level-1---combining-streams-of-dom-events">Level 1 - Combining streams of DOM events</a></li>
+<li><a href="#level-2---hacking-race-conditions-with-artificial-delays">Level 2 - Hacking race conditions with artificial delays</a></li>
+<li><a href="#level-3---merging-streams-into-one-stream">Level 3 - Merging streams into one stream</a>
+<ul>
+<li><a href="#bonus-for-level-3">Bonus for Level 3</a></li>
+<li><a href="#note-about-the-coding-style">Note about the coding style</a></li>
+</ul>
+</li>
+<li><a href="#level-4---flatten-observables-timers-and-cancellation">Level 4 - Flatten observables, timers and cancellation</a></li>
+<li><a href="#closing-notes">Closing Notes</a></li>
+</ul>
+<p>We're going to start with a small refresher from <a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">the previous article</a>, implementing a click event handler with <a href="https://rxjs-dev.firebaseapp.com/" target="_blank" title="A reactive programming library for JavaScript">RxJS</a>. Next, we'll have a brief overview of RxJS, followed by the main challenge of building a small animated game the reactive way.</p>
+<h4>Warmup - Handle a click event with RxJS</h4>
+<p>Here's how a usual JavaScript event handler function looks like.</p>
+<pre><code class="language-html"><button id="btn">+1</button>
+</code></pre>
+<pre><code class="language-javascript">const btn = document.getElementById('btn')
+let counter = 0
+btn.addEventListener('click', (event) => {
+ counter++
+ console.log(counter)
+})
+</code></pre>
+<p>In the above code, we're incrementing <code>counter</code> that is global and logging its value each time we update it.</p>
+<p>Usually, we don't increment globals or <code>console.log</code> directly in real-life apps, but we do have other side-effects in place (like updating something else in the UI, triggering a web request, firing an animation, etc.). You can always organize your code to split concerns, but it seems the event handler is already doing two very distinct things, and we're barely getting started.</p>
+<p>Let's take a look at how this looks like in the reactive world, with RxJS. Here's how you should visualize and implement a stream of click events.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-0-1.png" alt="marbles diagram of a click event stream" title="marbles diagram of a click event stream"></p>
+<p>Note: <b>e</b> stands for <b>event</b> and it's the value pushed to the stream at each click in the button element, just like you would have an <b>event</b> argument in the typical <b>onClick</b> callback (event handler) at each click.</p>
+<pre><code class="language-javascript">let counter = 0
+const click$ = fromEvent(btn, 'click')
+click$.subscribe((event) => {
+ counter++
+ console.log(counter)
+})
+</code></pre>
+<p>A few things to notice here:</p>
+<ul>
+<li><a href="https://rxjs-dev.firebaseapp.com/api/index/function/fromEvent" target="_blank" title="RxJS - fromEvent">
+fromEvent
+</a> is the tool in RxJS that will allow you to transform any DOM event into an Observable, a stream of events of a given
+type (like click, drag, scroll etc.).</li>
+<li><code>subscribe</code> is a must! Without subscribing to our stream, nothing would ever happen.</li>
+<li>The <code>$</code> is just a common (non-standard) notation to identify streams in your code - totally optionally, no need to follow.</li>
+</ul>
+<p>Opposite to the click event handler, you can subscribe to the stream of clicks as many times as you want and split all kinds of different tasks into separate subscriptions that <strong>share the same event listener</strong>! <strong>Attaching event handlers to the DOM is costly</strong> especially due to the event attaching phase that happens at page load (<code>onload</code> or <code>DOMContentReady</code> events) a busy period for modern web applications - <i>paraphrased from <a href="https://www.oreilly.com/library/view/high-performance-javascript/9781449382308/" target="_blank" rel="nofollow" title="High Performance JavaScript, book by Nicholas C. Zakas">"High Performance JavaScript", book by Nicholas C. Zakas</a></i>.</p>
+<p>In a way, things are opening up, you get a more flexible model to organize your code, compared to the classic event handler callback.</p>
+<blockquote>
+<p>Anything can be a stream, remember that, let it be the cornerstone of your reactive thinking.</p>
+</blockquote>
+<p>This should get you warmed up for the real challenge later in the article. Before that, there's something I want to mention about the RxJS library.</p>
+<h4>RxJS Overview</h4>
+<p>I would highly recommend you later to go through the <a href="https://rxjs-dev.firebaseapp.com/guide/overviewhttps://rxjs-dev.firebaseapp.com/guide/overview" target="_blank" title="RxJS - Introduction">RxJS official docs overview</a>; it complements a few concepts I've covered in <a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">the previous article</a> giving you a more mature view into the fundamentals. But for now, I want to focus on two things only: <strong>creating streams and manipulating them</strong>. Looking at RxJS, you'll see that you can identify two big groups of "things":</p>
+<ul>
+<li><strong>Stream creators/producers</strong> are tools that will allow you to take anything and make it a stream. In the previous section, for example, we used <code>fromEvent</code> to transform DOM click events into an Observable, <strong>a stream that you can subscribe to</strong>.</li>
+<li><strong>Operators</strong> are instruments that will allow you to not only hook into the stream to perform operations with the data flowing through it but also combine them.</li>
+</ul>
+<h4>Let's build something!</h4>
+<p>Now we've had our refresher, we can jump into building a small animated game with RxJS, something more complex.</p>
+<p>The game we're building is called <strong>"Take the cat to the party"</strong>, here's how it goes down.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/take-cat-to-party.gif" alt="'take the cat to the party game demonstration'" title="take the cat to the party game demonstration"></p>
+<ul>
+<li>There's a cat in a motorbike in your top left corner (draggable HTML element).</li>
+<li>There's a decoy at the bottom left corner (draggable HTML element).</li>
+<li>There's a party at the right bottom corner of the page (our drop zone).</li>
+<li><strong>We need to drop the cat at the party in less than 5 seconds to win</strong>. Nothing should happen if the decoy is the dragged element.</li>
+<li>While dragging, there's an animation of the cat driving to the party and a counter appearing at the top right corner.</li>
+<li>Per each attempt, if the cat is dragged for longer than 5 seconds you lose.</li>
+</ul>
+<p>We're going to split this into <strong>4 levels</strong>. Per each level, I'll explain the goal we're trying to achieve, show you how the implementation looks like, and what it does with plenty of detail. Feel free to try and code the levels yourself before checking the suggested solution. You can <a href="https://github.com/danielcaldas/take-the-cat-to-the-party" target="_blank" title="danielcaldas/take-the-cat-to-the-party: Learn reactive programming with RxJS the fun way">check out this repo</a> if you're willing to give it a try. The file <a href="https://github.com/danielcaldas/take-the-cat-to-the-party/blob/master/cat-party-empty.html" target="_blank" title="danielcaldas/take-the-cat-to-the-party: Learn reactive programming with RxJS the fun way template file">cat-party-empty.html</a> contains the necessary boilerplate in a single HTML file. You can just open it in the browser and start coding.</p>
+<p>Before we start, let's take a look at some boilerplate code already in place.</p>
+<p>There are a bunch of RxJS taken from the global <code>window</code> at the top (I'm just injecting RxJS via <code><script></code> at the top of the HTML file). Then we have our markup appended to the element's <code>app</code> <code>innerHTML</code>. Just some boilerplate, don't bother with the detail.</p>
+<pre><code class="language-html"><head>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js.map"></script>
+</head>
+<body>
+ <div id="app"></div>
+ <script>
+ const {
+ map,
+ // ...
+ } = window.rxjs.operators
+ const {
+ fromEvent,
+ // ...
+ } = window.rxjs
+ // ...
+ document.getElementById('app').innerHTML = `
+ <h2>Take the ๐ to the ๐</h2>
+ <div id="loader" style="display:none;position:absolute;right:0;z-index:-1;">
+ <img src="https://media2.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.webp?cid=ecf05e479338392950f1cf8bade564aaec071e3aae3b68b0&rid=giphy.webp" width="248" height="248" style="opacity:0.5;"/>
+ <span id="countdown" style="top:0;right:0;position:absolute;z-index:9999;font-weight:bold;font-size:46px;">-</span>
+ </div>
+ <div id="drop-zone" style="position:absolute;right:5px;bottom:5px;width:180px;height:180px;border:2px dashed black;z-index:2;"></div>
+ <img src="https://i.ebayimg.com/images/g/qHEAAOSw01pdVAaZ/s-l300.jpg" width="150" height="150" style="position:absolute;right:20px;bottom:20px;"/>
+ </div>
+ <img id="cat" draggable="true" src="https://image.shutterstock.com/image-vector/vintage-scooter-cat-cool-stuff-260nw-429646657.jpg" width="100" height="100" style="position:absolute;z-index:1;margin:18px 16px;text-align:center;cursor:grab;"/>
+ <div id="decoy" draggable="true" style="font-size:28px;position:absolute;left:20px;bottom:10px;text-align:center;cursor:grab;font-weight:bold;">DECOY</div>
+ `
+ </script>
+</body>
+</code></pre>
+<p>The next block contains a few of the DOM elements we'll often be referring to.</p>
+<pre><code class="language-javascript">const cat = document.getElementById('cat')
+const party = document.getElementById('drop-zone')
+const loading = document.getElementById('loader')
+const countdown = document.getElementById('countdown')
+</code></pre>
+<p>Finally, <strong>we introduce three streams that we'll use quite often while going through the challenge. These are the most basic building blocks of our solutions.</strong></p>
+<pre><code class="language-javascript">const dragstart$ = fromEvent(document, 'dragstart')
+const dragend$ = fromEvent(document, 'dragend')
+const drop$ = fromEvent(document, 'drop')
+</code></pre>
+<p><br />
+<br /></p>
+<h4>Level 1 - Combining streams of DOM events</h4>
+<ul>
+<li>We should be able to take the cat to the party by dragging it.
+<ul>
+<li>Place the cat inside the party together with other cats.</li>
+<li>We also want to hide the original cat element while dragging it for a better user experience.</li>
+</ul>
+</li>
+</ul>
+<p>Let's follow a bottom-up approach. We'll start by building some specific streams that will allow us to assemble more complex behaviors as we move along.</p>
+<p>Let's start by answering the following: how do we know that an HTML element has been dropped at the <code>party</code>? We'll need to detect any <code>drop</code> event that occurs in the <code>party</code> element.</p>
+<pre><code class="language-javascript">const partyDrop$ = drop$.pipe(filter((event) => event.target === party))
+</code></pre>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-1-1.png" alt="marbles diagram filter event target on drop event" title="marbles diagram filter event target on drop event"></p>
+<p><Caption
+text={() => (
+<p>
+<b>e</b> stands for <b>event</b> and it's the value pushed to the stream at each drop event in the whole document!{" "}
+<b>e1</b>, <b>e2</b> and <b>e3</b> have different <b>event.target</b> (target DOM elements).
+</p>
+)}
+/></p>
+<p>Cool, we now have a stream that emits a <code>drop</code> event every time something is dropped in the <code>party</code>, we ensure that using the <a href="https://rxjs-dev.firebaseapp.com/api/operators/filter" target="_blank" title="RxJS - filter">filter</a> operator.</p>
+<p>I would like to pause and add further detail on this marble diagram. Notice that we read from top to bottom, meaning the last timeline is the only one that really matters, it's the fine grained stream that gives us more useful values. In this case since we won't subscribe to <code>drop$</code> directly, think of it as an auxiliary conceptual timeline which is a step towards shaping the ideal stream to tackle our task: <code>partyDrop$</code>.</p>
+<p>Another relevant detail on the marbles diagram: <code>e1</code> and <code>e2</code> marbles don't make it to <code>partyDrop$</code> (bottom stream). For those events,
+<code>event.target</code> it's not <code>party</code>, this means the user did not drop the HTML element in the <code>party</code>.</p>
+<p><strong>At this point we can already notice the exceptional compositional capabilities of streams and how easy it is to plug & play the smaller blocks (such as <code>drop$</code>) to build higher level streams.</strong></p>
+<p>Next, let's see how we can detect that the <code>cat</code> is dropped at the <code>party</code>.</p>
+<pre><code class="language-javascript">const catAtParty$ = partyDrop$.pipe(
+ withLatestFrom(dragstart$),
+ filter(([dropEvent, dragStartEvent]) => dragStartEvent.target === cat),
+)
+</code></pre>
+<p>Alright, a few things are going on here. We're familiar with <a href="https://rxjs-dev.firebaseapp.com/api/operators/withLatestFrom" target="_blank" title="RxJS - withLatestFrom">withLatestFrom</a>, but this time, it's a bit more complex to perceive. We're looking into a stream of <code>dragstart</code> events <code>dragstart$</code> and asking it for the last value emitted in that stream; this is the same as saying that we want the last draggable element in the page that emitted a <code>dragstart</code> event! Next, we have <code>filter</code> again. We're going to use <code>filter</code> to narrow down our stream to allow <code>dragstart</code> events to pass through only if their target element is <code>cat</code>! And that's it! We have a stream that will emit an event every time we drop the cat at the party.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-1-2.png" alt="marbles diagram filter event target on drop event" title="marbles diagram filter event target on drop event"></p>
+<p><Caption /></p>
+<p>In the above diagram, <code>e1</code>, <code>e2</code> and <code>e3</code> are <code>dragstart</code> events (<code>dragstart$</code> stream) that might come from anywhere in the page. <code>de</code> represents a <code>drop</code> event at the <code>party</code>. Notice how <code>withLatestFrom</code> operates by bringing together the last element on <code>dragstart$</code> which is <code>e3</code> and with the <code>party</code> element which is published to the <code>dragend$</code> stream. Now because <code>e3</code> event target is actually the <code>cat</code> you'll get <code>e3</code> pushed to our final stream <code>catAtParty$</code>!</p>
+<p>But we're not finished just yet; we need to leverage the work we've constructed so far to actually render the <code>cat</code> in the <code>party</code>. For that, we just need to subscribe to our <code>catAtParty$</code> stream and do some DOM manipulations.</p>
+<pre><code class="language-javascript">catAtParty$.subscribe(([partyDropEvent, dragStartEvent]) => {
+ // some console.logs to check what we really get subscribing to catAtParty$
+ // console.log({ partyDropEvent, dragStartEvent });
+ // console.log({ partyDropEvent: event.type, dragStartEvent: event.type });
+ cat.remove()
+ party.appendChild(cat)
+})
+</code></pre>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/game-level-1-2.png" alt="result of subscribing to cat at party stream" title="result of subscribing to cat at party stream"></p>
+<p><Caption
+text={() => (
+<p>
+The <b>console.log</b> reveals the <b>drop</b> and <b>dragstart</b> events as payload for our subscription. We
+also log the <b>event.type</b> of each individual event.
+</p>
+)}
+/></p>
+<p>If you're following this point, you'll notice that although we can drag the cat perfectly, we still see the original <code>cat</code> element while carrying it. We see the original cat element while dragging it.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/game-level-1-opacity-before.gif" alt="'dragging the cat without manipulating the opacity value'" title="dragging the cat without manipulating the opacity value"></p>
+<p><br /></p>
+<p>Setting the cat's element opacity to <b>0</b> yields a more natural user experience.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/game-level-1-opacity-after.gif" alt="'dragging the cat with opacity manipulation'" title="dragging the cat with opacity manipulation"></p>
+<p>To achieve the same behavior we have in the above GIF, we want to toggle the <code>cat</code> element's opacity while dragging. Yes, another side effect, we can actually simply create another subscription to take care of this.</p>
+<pre><code class="language-javascript">const catDragStart$ = dragstart$.pipe(filter((event) => event.target === cat))
+const catDragEnd$ = dragend$.pipe(filter((event) => event.target === cat))
+catDragStart$.subscribe((event) => {
+ cat.style.opacity = 0
+})
+catDragEnd$.subscribe((event) => {
+ cat.style.opacity = 1
+})
+</code></pre>
+<p>And done with Level 1!</p>
+<p>I want to leave a challenge for the reader. Looking at how we're setting the opacity value of the <code>cat</code> element, could we somehow handle everything in one single subscription instead of two? I would suggest you to read the whole article and come back to this one later, you should be then able to nail it then.</p>
+<p><Accordion summary="Hint">
+Check the operator <b>merge</b>.
+</Accordion></p>
+<p><br /></p>
+<p><Accordion summary='Solution'></p>
+<pre><code class="language-javascript">const catDragStart$ = dragstart$.pipe(filter((event) => event.target === cat))
+const catDragEnd$ = dragend$.pipe(filter((event) => event.target === cat))
+const opacity$ = merge(catDragStart$.pipe(mapTo(0)), catDragEnd$.pipe(mapTo(1)))
+
+opacity$.subscribe((value) => {
+ cat.style.opacity = value
+})
+</code></pre>
+<p></Accordion></p>
+<p><br /></p>
+<h4>Level 2 - Hacking race conditions with artificial delays</h4>
+<ul>
+<li>We should announce the cats' arrival with a <code>window.alert</code> message.
+<ul>
+<li>Before triggering the <code>window.alert</code> we'll want to make sure the <code>cat</code> is actually rendered at the <code>party</code>.</li>
+</ul>
+</li>
+</ul>
+<p>So we already have a stream that emits an event each time we drag the cat to the party, it's called <code>catAtParty$</code>. Our work here is mostly done. We just need to subscribe to it.</p>
+<pre><code class="language-javascript">catAtParty$.subscribe(() => {
+ window.alert('Cat is at the party! You win!')
+ window.location.reload()
+})
+</code></pre>
+<p><br />
+<br /></p>
+<p><b>window.alert</b> is triggered when we drop the cat at the <b>party</b>, but the <b>cat</b> is not rendered!</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/game-level-2-no-cat.gif" alt="'demonstration asynchronous rendering cat DOM element'" title="demonstration asynchronous rendering cat DOM element"></p>
+<p>Hmm.. strange, we did everything right but the <code>window.alert</code> triggers before we get to actually render the <code>cat</code> at the <code>party</code>, what a bummer.</p>
+<p>It seems that the DOM changes don't kick in before we trigger the alert; that's because the rendering is asynchronous, and the page only gets updated later on after we're done with executing this function and dismissing the alert. I don't want to spend much time fixing this since I don't have any mechanism to tell me whether the DOM node has been rendered successfully, I'm going to code a hack and trigger the alert inside a <code>setTimeout</code> that should buy us some time to correctly render the <code>cat</code> element.</p>
+<pre><code class="language-javascript">catAtParty$.subscribe(() => {
+ setTimeout(() => {
+ window.alert('Cat is at the party! You win!')
+ window.location.reload()
+ }, 100)
+})
+</code></pre>
+<p><br /></p>
+<p>Great! The <code>window.alert</code> is triggered after the <strong>cat</strong> element is rendered at the <strong>party</strong>!</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/take-cat-to-party.gif" alt="'take the cat to the party game demonstration after applying delay on render'" title="take the cat to the party game demonstration after applying delay on render"></p>
+<p>It works. We can achieve a similar <strong>hack</strong> with RxJS without having a solution based on callbacks keeping our subscription handler clean (<strong>but still a hack!</strong>).</p>
+<pre><code class="language-javascript">catAtParty$.pipe(delay(100)).subscribe(() => {
+ window.alert('Cat is at the party! You win!')
+ window.location.reload()
+})
+</code></pre>
+<p>See that <a href="https://rxjs-dev.firebaseapp.com/api/operators/delay" target="_blank" title="RxJS - withLatestFrom">delay</a> there? That's another operator. It <strong>allows you to hold the value in the stream for a determined amount of time before pushing it to the subscribers</strong>. So what's happening here is that instead of the Observer (subscription) being aware that we have to code a hack to trigger the alert after the cat enters the party, we shift that responsibility to the Observable, the stream is now the <em>hacky</em> code that is delaying the whole thing. This is super powerful, the way you can shift responsibilities and broadcast your changes to all the subscribers. Yes, all the subscribers will receive a delayed update! <strong>This can be simultaneously a gift and a wrecking footgun!</strong></p>
+<h4>Level 3 - Merging streams into one stream</h4>
+<ul>
+<li>We want to display a GIF while the cat is moving.</li>
+</ul>
+<p>In our markup, there's a GIF positioned at the top right corner. We want to show it while dragging the cat and hide it again once we drop the cat.</p>
+<p>We already have two streams: <code>catDragStart$</code> and <code>catDragEnd$</code> . We need to combine them to form a new stream. Let's try and draw a small diagram of what that stream should look like.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-3-1.png" alt="streams of events for dragging and dropping the cat respectively" title="streams of events for dragging and dropping the cat respectively"></p>
+<p><Caption
+text={() => (
+<p>
+In the image, <b>ds</b> symbolizes a <b>dragstart</b> event, and <b>de</b> represents a <b>dragend</b> event.
+</p>
+)}
+/></p>
+<p>Our GIF is wrapped in an HTML element whose <code>display</code> attribute is set to <code>"none"</code> by default. We'll want to set it to <code>""</code> (empty string) to make it visible and back to <code>"none"</code> once it's time to hide it again. Our side effect should look something like this:</p>
+<pre><code class="language-javascript">// shouldHideGIF would be true in case we need to hide the GIF
+const v = shouldHideGIF ? 'none' : ''
+loading.style.setProperty('display', v)
+</code></pre>
+<p>Let's try to build a stream to feed to this function a value for <code>display</code> that reflects whether the cat is being dragged or not. Our stream should remove the necessity of the imperative logic dictated by the ternary operator, <strong>we'll create values that react to changes to replace the imperative code</strong>.</p>
+<p>First, let's look back at our streams <code>catDragStart$</code> and <code>catDragEnd$</code>. When <code>catDragStart$</code> emits a value, we want to set the <code>display</code> to <code>""</code>. So this means we need to somehow transform our stream of events into a stream of empty strings. Each time a string is emitted, we shall pass that value onto the function that will set the <code>display</code> property on the <code>loading</code> element.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-3-2.png" alt="stream mapping dragstart events to an empty string" title="stream mapping dragstart events to an empty string"></p>
+<p><Caption text={"Mapping each event to an empty string."} /></p>
+<p>After you apply an operator, you transform your stream into a more refined one, ideally better suited to the task you're trying to tackle! You're making every pushed value to the topmost timeline flow through a function provided in the <code>map</code> operator. That function will map each value into the bottom timeline, your <em>"final"</em> stream. If you subscribe to it now, you will receive empty strings instead of DOM events!</p>
+<p>The same thing should happen to <code>catDragEnd$</code>.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-3-3.png" alt="stream mapping dragend events to none" title="stream mapping dragend events to none"></p>
+<p><Caption text={"Mapping each event to 'none'."} /></p>
+<p>Now we have two streams, and we could just subscribe to each one of them and set the value of the <code>"display"</code> property for the <code>loading</code> element!</p>
+<pre><code class="language-javascript">const catDragStartDisplay$ = catDragStart$.pipe(map((event) => ''))
+const catDragEndDisplay$ = catDragEnd$.pipe(map((event) => 'none'))
+
+catDragStartDisplay$.subscribe((value) => loading.style.setProperty('display', value))
+catDragEndDisplay$.subscribe((value) => loading.style.setProperty('display', value))
+</code></pre>
+<p>Although this works, we could further refine our streams and <strong>merge</strong> them into a single one.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-3-4.png" alt="two streams merged into a single" title="two streams merged into a single one"></p>
+<p><Caption
+text={() => (
+<p>
+<b>A single stream becomes the source of truth</b> for the <i>display</i> property value of the <b>loading</b>{" "}
+element throughout time.
+</p>
+)}
+/></p>
+<p>Awesome! The <a href="https://rxjs-dev.firebaseapp.com/api/operators/merge" target="_blank" title="RxJS - merge">merge</a> operator gives us the power to take to streams and merge them into one so that the values of the <code>"display"</code> flow through a single stream (a single source of truth). Here's how the code looks like.</p>
+<pre><code class="language-javascript">const catDragStartDisplay$ = catDragStart$.pipe(map((event) => ''))
+const catDragEndDisplay$ = catDragEnd$.pipe(map((event) => 'none'))
+const display$ = merge(catDragStartDisplay$, catDragEndDisplay$)
+
+display$.subscribe((value) => loading.style.setProperty('display', value))
+</code></pre>
+<p>One subscription to handle the toggling of showing/hiding the GIF.</p>
+<h6>Bonus for Level 3</h6>
+<p>I feel overwhelmed by the tremendous amount of operators offered by RxJS, its API is considerably large. We could further simplify the above implementation with the operator <a href="https://rxjs-dev.firebaseapp.com/api/operators/mapTo" target="_blank" title="RxJS - mapTo">mapTo</a>.</p>
+<pre><code class="language-javascript">const catDragStartDisplay$ = catDragStart$.pipe(mapTo(''))
+const catDragEndDisplay$ = catDragEnd$.pipe(mapTo('none'))
+const display$ = merge(catDragStartDisplay$, catDragEndDisplay$)
+
+display$.subscribe((value) => loading.style.setProperty('display', value))
+</code></pre>
+<p>You get the same result as applying <code>map</code> but without needing to provide a function, because we're really not doing anything else rather than returning a hardcoded value on that inline function.</p>
+<h6>Note about the coding style</h6>
+<p>You've might have noticed that I'm creating a new variable per each stream, this allows me to better explain the building blocks of each solution and map them to the diagrams. <strong>Although this helps keeping the code readable, this is not mandatory, it can be overkill per times!</strong>. Streams can be inlined. Let's look again to a small refactor of the above solution to understand what I'm referring to.</p>
+<pre><code class="language-javascript">const display$ = merge(catDragStart$.pipe(mapTo('')), catDragEnd$.pipe(mapTo('none')))
+
+display$.subscribe((value) => loading.style.setProperty('display', value))
+</code></pre>
+<p>We could drop <code>catDragStartDisplay$</code> and <code>catDragEndDisplay$</code> by inlining them in the <code>merge</code> operator.</p>
+<h4>Level 4 - Flatten observables, timers and cancellation</h4>
+<ul>
+<li>The cat needs to make it to the party in less than 5 seconds! He only has 5 seconds of gas in his bike.</li>
+</ul>
+<p>We need to code a new path in our game, the one where the user loses the cat isn't dragged to the party within 5 seconds. This looks like a countdown, with a few actions tied to it:</p>
+<ol>
+<li>The countdown must be <strong>interrupted</strong> if the player manages to win within 5 seconds.</li>
+<li>In case the countdown ends, and the cat was not dropped anywhere, we need to display a "<em>game over</em>" message.</li>
+</ol>
+<p>As in the previous levels, let's build this incrementally. First, let's build a countdown. To emphasize how RxJS shines here, let's first see how we would make a countdown with native JavaScript APIs.</p>
+<pre><code class="language-javascript">function countdown(seconds) {
+ let secondsLeft = seconds
+ let intervalId
+
+ intervalId = setInterval(() => {
+ if (secondsLeft === 0) {
+ console.log("time's up!")
+ clearInterval(intervalId)
+ } else {
+ console.log(secondsLeft)
+ secondsLeft--
+ }
+ }, 1000)
+}
+countdown(5)
+</code></pre>
+<p>That's a rough implementation of a countdown. We need to keep track of the timer identifier in a variable to ensure we clean up after running the <code>setInterval</code> provided callback the expected amount of times.</p>
+<p>Now here's how you can do the same with RxJS.</p>
+<pre><code class="language-javascript">const countdown$ = timer(0, 1000).pipe(
+ map((t) => 5 - t),
+ takeWhile((t) => t > 0),
+)
+countdown$.subscribe({
+ next: (secondsLeft) => console.log(secondsLeft),
+ complete: () => console.log("time's up!"),
+})
+</code></pre>
+<p>Let's examine the above code ๐คฏ. This time we're not creating a stream from an event or anything like that. Instead, we use <a href="https://rxjs-dev.firebaseapp.com/api/index/function/timer" target="_blank" title="RxJS - mapTo">timer</a> from RxJS to generate a timer stream that emits a new numeric value every second.</p>
+<p>Now a timer emits values in ascending order (0, 1, 3, etc.). We'll want to reverse that to display an actual countdown. To reverse the numerical value on the stream, we simply use <code>map</code>. We should only give the user 5 seconds to drag the <code>cat</code> to the <code>party</code>. This translates to stop emitting values when we hit the mark of the <code>0</code> seconds, this is controlled by the <a href="https://rxjs-dev.firebaseapp.com/api/operators/takeWhile" target="_blank" title="RxJS - takeWhile">takeWhile</a> operator. A few evident advantages compared with the classic implementation:</p>
+<ol>
+<li><strong>No global variables</strong> <code>secondsLeft</code> and <code>intervalId</code>.</li>
+<li><strong>Less error-prone code</strong> by relying on <code>takeWhile</code> and other built-in operators to be the rail guards of our business logic.</li>
+<li>Once the stream emits the 6th value, <strong>it will complete automatically</strong> and stop emitting values! <strong>We don't need to worry about cleanup logic</strong> - with <code>setInterval</code> we need to worry about cleaning the interval with <code>clearInterval</code> so that it does not run indefinitely!</li>
+</ol>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-4-1.png" alt="diagram depicting the countdown stream" title="diagram depicting the countdown stream"></p>
+<p><Caption /></p>
+<p>In the above image, the bottom timeline represents the stream; notice the pipe (<strong>|</strong>) at the end of the timeline indicates that the stream completes after emitting the value <strong>1</strong>.</p>
+<p>A crucial aspect to notice is that you'll trigger a new timer as soon as you subscribe. This is a <a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals/#hot-observable-vs-cold-observable" target="_blank" title="Fundamentals of Reactive Programming, Cold Observable">Cold Observable</a>. Our <code>countdown$</code> will start emitting values right away upon subscription, so we can't just <code>.subscribe()</code> We'll have to subscribe to the countdown when the user starts dragging the <code>cat</code> element.</p>
+<p>Now remember we had a stream <code>catDragStart$</code>; we'll use that to trigger our countdown. <strong>But how can we trigger a subscription to a stream from within another stream?</strong> In my opinion, this is a hard concept to comprehend.</p>
+<p>Presenting the <a href="https://rxjs-dev.firebaseapp.com/api/operators/switchMap" target="_blank" title="RxJS - switchMap">switchMap</a> operator. <code>switchMap</code> allows you to trigger a subscription from within a stream to a second stream. Not clear yet? Think of it this way <code>switchMap</code> <strong>allows you to switch to a new observable</strong>. Ok, let's look at our countdown implementation, now that we have this information.</p>
+<pre><code class="language-javascript">const countdown$ = timer(0, 1000).pipe(
+ map((t) => 5 - t),
+ takeWhile((t) => t >= 0),
+)
+const countdownRunning$ = catDragStart$.pipe(switchMap((event) => countdown$))
+
+countdownRunning$.subscribe((secondsLeft) => {
+ countdown.innerText = `${secondsLeft}`
+})
+</code></pre>
+<p><strong>Note</strong>: You might have noticed that I'm using <code>t => t >= 0</code> "<em>greater or equal to</em>" in our predicate. This is just for convenience, so that we get <code>0</code> pushed onto the stream to easily rendered it, finishing the countdown at <code>0</code>.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-4-2.png" alt="diagram to demonstrate the switchMap operator" title="diagram to demonstrate the switchMap operator"></p>
+<p><Caption text={() => <p>We're switching from one stream to another and subscribing to it immediately.</p>} /></p>
+<p>Notice the return value of <code>switchMap</code> is <code>countdown$</code>, this means that when a <code>dragstart</code> event is emitted in <code>catDragStart$</code> the following things will happen:</p>
+<ol>
+<li>Since we subscribed, the DOM event will flow through the pipe and hit our <code>switchMap</code> operator.</li>
+<li>We'll automatically subscribe to <code>countdown$</code> and start emitting its values leaving the <code>dragstart</code> event behind (because we don't really need it for this task).</li>
+<li>In our subscription handler, we simply do a DOM mutation to the element that displays our countdown value so that the user gets the time left displayed on the screen.</li>
+</ol>
+<p>Once more, as soon as a <code>ds</code> (<code>dragstart</code> event in the diagram) is pushed to our <code>catDragStart$</code> stream, <code>switchMap</code> will kick in and subscribe to our <code>countdown$</code> stream, <em>"passing the ball"</em> (moving the flow of control) to the <code>countdown$</code>. We'll start to push to our subscribers the seconds left in the countdown like if we had subscribed to the <code>countdown$</code> in the first place, but in this case <strong>we programmatically triggered the subscription</strong>.</p>
+<p>Although we're going more deep into <em>flattening</em> Observables in this level, we've already seen this before in this article. If you're thinking about <code>withLatestFrom</code> from <strong>Level 1</strong>, you're right! That operator also triggers a inner subscription.</p>
+<p>We can now leverage <code>countdownRunning$</code> to display an alert.</p>
+<pre><code class="language-javascript">countdownRunning$.pipe(filter((secondsLeft) => secondsLeft === 0)).subscribe(() => {
+ window.alert("Cat didn't make it! You lose!")
+ window.location.reload()
+})
+</code></pre>
+<p>We have a filter to check for the second <code>0</code>; this way, we're basically ensuring that we just emit a value when the countdown runs out. Similarly to <strong>Level 2</strong>, we have a <code>delay</code> with random time to safeguard our countdown value gets rendered with <code>0</code> on the screen before we trigger the alert.</p>
+<p>Only one thing left! If you're following up until this point, you're probably wondering why the counter is not reset once you stop dragging the cat. See the following GIF to understand what I'm referring to.</p>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/take-cat-to-party-no-cancel.gif" alt="'counter does not stop demonstration'" title="counter does not stop demonstration"></p>
+<p>Hmm.. Strange the counter does not reset once we drop the cat! It should, since the 5 seconds didn't ran out while we were dragging the cat. Let's look at our <code>countdown$</code> implementation once more.</p>
+<pre><code class="language-javascript">const countdown$ = timer(0, 1000).pipe(
+ map((t) => 5 - t),
+ takeWhile((t) => t >= 0)
+);
+const countdownRunning$ = catDragStart$.pipe(switchMap((event) => countdown$);
+</code></pre>
+<p>Now, it's pretty clear that we're not doing anything to "stop" the counter. Once we subscribe to <code>countdown$</code> with the <code>switchMap</code> operator, there's no stopping it, it will go on until it reaches the end, and when this happens, we'll display the alert to the user. Ideally, we would stop the counter upon any of the two following events:</p>
+<ol>
+<li><strong>When the cat arrives at the party</strong>. Also partially done, we have a stream <code>catAtParty$</code>, once a value is pushed into this stream, you know the <code>cat</code> was dropped at the <code>party</code>.</li>
+<li><strong>We stop dragging the cat</strong>. We already have a stream <code>catDragEnd$</code>, each emitted value means we just dropped the <code>cat</code> element. You might be thinking the first point would be enough, but remember the cat can be dropped literally anywhere on the screen. We have no guarantees that it will get dropped at the party.</li>
+</ol>
+<p>Meet <a href="https://rxjs-dev.firebaseapp.com/api/operators/takeUntil" target="_blank" title="RxJS - takeUntil">takeUntil</a>, this operator allows you to listen to a stream until something happens! Let's look at the implementation of the <code>countdown$</code>.</p>
+<pre><code class="language-javascript">const countdown$ = timer(0, 1000).pipe(
+ map((t) => 5 - t),
+ takeWhile((t) => t >= 0),
+ takeUntil(/*something we'll figure out later*/),
+)
+</code></pre>
+<p>Now, what is the <strong>argument</strong> of the <code>takeUntil</code> operator? <code>takeUntil</code> receives a stream, once that <strong>stream</strong> emits a value, our <code>countdown$</code> will stop emitting, thus canceling the timer and giving our users another chance to dragging the <code>cat</code> to the <code>party</code>.</p>
+<p>But we have two streams, <code>catDragEnd$</code> and <code>catAtParty$</code>, can we make it one? Yes, we can! We've already met <code>merge</code>! This operator can take multiple streams and combine into a single one, think of it as a funnel.</p>
+<p>Let's call this last stream <code>cancelCountdown$</code>. After we declare it, we can feed it as an input to our <code>takeUntil</code> operator. Here's the final implementation of Level 4 with cancellation.</p>
+<pre><code class="language-javascript">const cancelCountdown$ = merge(catDragEnd$, catAtParty$);
+const countdown$ = timer(0, 1000).pipe(
+ map((t) => 5 - t),
+ takeWhile((t) => t >= 0),
+ takeUntil(cancelCountdown$)
+);
+const countdownRunning$ = catDragStart$.pipe(switchMap((event) => countdown$);
+
+countdownRunning$.subscribe((secondsLeft) => {
+ countdown.innerText = `${secondsLeft}`;
+});
+countdownRunning$
+ .pipe(
+ filter((secondsLeft) => secondsLeft === 0),
+ delay(100)
+ )
+ .subscribe(() => {
+ window.alert("Cat didn't make it! You lose!");
+ window.location.reload();
+ });
+</code></pre>
+<p><img src="./assets/hands-on-reactive-programming-rxjs/marbles-level-4-3-4.png" alt="stream representation of the countdown with cancellation" title="stream representation of the countdown with cancellation"></p>
+<p><Caption
+text={(a) => (
+<p>
+In this diagram, our stream gets cancelled after the value <b>3</b> is published. The first <b>dragend</b> event
+causes the <b>countdownRunning$</b> to stop emitting values.
+</p>
+)}
+/></p>
+<p>You can check out <a href="https://github.com/danielcaldas/take-the-cat-to-the-party" target="_blank" title="danielcaldas/take-the-cat-to-the-party: Learn reactive programming with RxJS the fun way">the complete implementation of this challenge here</a>.</p>
+<p><br /></p>
+<h4>Closing Notes</h4>
+<p>Here are the concepts you've learned by building this game:</p>
+<ol>
+<li><strong>Creating streams</strong> from DOM events.</li>
+<li><strong>Manipulating streams</strong> with basic operators such as <code>map</code>, <code>filter</code>.</li>
+<li><strong>Combining streams</strong> with operators such as: <code>withLatestFrom</code>, <code>switchMap</code>, and <code>merge</code>.</li>
+<li><strong>Cancellation</strong>, being able to stop listening to a specific stream based on another. In our last level, we used <code>takeUntil</code> to achieve this.</li>
+</ol>
+<p>Now go out there and try to apply these concepts to build your own applications. I would be pleased to hear from you if you've learned something here today.</p>
+<p>In the upcoming articles, I'll share with you the good and bad parts of adopting reactive programming and start using RxJS in your codebase, and at last, I'll share with you a bunch of fantastic resources to learn RxjS and reactive programming.</p>
+<p><br /></p>
+<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Part 2 - Fundamentals of Reactive Programming</a></li>
+<li><strong>Part 3 - Hands-on Reactive Programming with RxJS</strong></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+The hidden potential of webpack DefinePluginhttps://danielcaldas.github.io/posts/hidden-potential-webpack-define-plugin/https://danielcaldas.github.io/posts/hidden-potential-webpack-define-plugin/You can author content using the familiar markdown syntax you already know. All basic markdown syntax is supported.Thu, 30 May 2019 00:00:00 GMT<p>The odds are high that you're using <a href="https://webpack.js.org/" target="_blank" title="a bundler for javascript and friends">webpack</a> to bundle your assets. If you're looking into an excellent way to feed environment variables to your applications, <a href="https://webpack.js.org/plugins/define-plugin/#usage" target="_blank" title="the defineplugin allows you to create global constants which can be configured at compile time">DefinePlugin</a> might well be the answer.</p>
+<h3>tl;dr</h3>
+<p>If you want to pass environment variables and use it within your JavaScript, you need to:</p>
+<ol>
+<li>Create the environment variable.</li>
+</ol>
+<pre><code class="language-bash">MY_ENV_VAR="sweet env var"
+</code></pre>
+<ol start="2">
+<li>In your webpack config, use the <code>webpack.DefinePlugin</code>.</li>
+</ol>
+<pre><code class="language-javascript">new webpack.DefinePlugin({
+ // it won't work without JSON.stringify!!!
+ myEnvVar: JSON.stringify(process.env.MY_ENV_VAR),
+})
+</code></pre>
+<ol start="3">
+<li>In your JavaScript.</li>
+</ol>
+<pre><code class="language-javascript">console.log(`Accessing my env var like a ninja: ${myEnvVar}`)
+</code></pre>
+<p><br />
+<br /></p>
+<h3>Some Background</h3>
+<p>One of these days, I had this exciting challenge, I was integrating some third party that required from me to provide the current commit hash of the code to a JavaScript SDK that performs some magic in bug tracking and versioning.</p>
+<p>Well seemed pretty simple for me at the time. I need to take the commit hash at build time and somehow feed it to our JavaScript, whatever that means.</p>
+<p>In this blog post, I'll explain step by step how to implement the following:</p>
+<blockquote>
+<p>We want to log in the console the link to the GitHub history of the application
+that points to the commit of the current version of the application.</p>
+</blockquote>
+<h4>The step by step</h4>
+<p>Here's a step by step implementation of the previously announced challenge. I will use one of my open source pet projects on GitHub, <a href="https://github.com/danielcaldas/el-conversor" target="_blank" title="a number to word list converter as a node backend and react/redux fronted">el-conversor</a>.</p>
+<h5>Step 1 - Grab the commit hash</h5>
+<p>I'm going to do this within a npm script in the <a href="https://github.com/danielcaldas/el-conversor/blob/master/package.json#L17" target="_blank" title="a number to word list converter as a node backend and react/redux fronted package.json">package.json</a>. In the <code>dev</code> npm script you can find the following:</p>
+<pre><code class="language-javascript">"dev": "COMMIT_HASH=\"$(git rev-parse HEAD)\" npm-run-all --parallel *:dev",
+</code></pre>
+<p>So in <code>COMMIT_HASH=\"$(git rev-parse HEAD)\"</code> we are basically assigning the output of the command <code>git rev-parse HEAD</code> to an env variable <code>COMMIT_HASH</code>.</p>
+<h5>Step 2 - Configure webpack.DefinePlugin</h5>
+<p>Now, let's dive into the <a href="https://github.com/danielcaldas/el-conversor/blob/master/package.json#L17" target="_blank" title="a number to word list converter as a node backend and react/redux fronted package.json">webpack.config.js</a>. Well it's not that complicated, the only nasty detail is that even if you want to pass in a simple string, you need to wrap it with a <code>JSON.stringify</code> otherwise, webpack dumps whatever text comes out of your environment variable and dump it in your JavaScript, and you get a very nasty syntax error. So let's use the <a href="https://webpack.js.org/plugins/define-plugin/#usage" target="_blank" title="the defineplugin allows you to create global constants which can be configured at compile time">DefinePlugin</a>:</p>
+<pre><code class="language-javascript">new webpack.DefinePlugin({
+ __commitHash__: JSON.stringify(process.env.COMMIT_HASH),
+})
+</code></pre>
+<p><strong>Pro Tip</strong>: You might be wondering why the strange naming <code>__commitHash__,</code> well the prefix and suffix underscores are just a way to prevent naming collisions. I hope that you don't often use <code>__var__</code> as a style to name variables in JavaScript, well I don't, that's why I found this extremely unlikely to collide.</p>
+<h5>Step 3 - Use the environment variables</h5>
+<p>In the end, we use the environment variable. In this case to <code>console.log</code> a helpful GitHub link:</p>
+<pre><code class="language-javascript">console.log(
+ `You are running on this commit of the application https://github.com/danielcaldas/el-conversor/commit/${__commitHash__}`,
+)
+</code></pre>
+<p>You can see the final result in the image below, it logs:</p>
+<p><img src="./assets/hidden-potential-webpack-define-plugin/console-log.png" alt="final result in console of el-conversor" title="final result in console of el-conversor"></p>
+<p><Caption /></p>
+How to overengineer copying files from any Android devicehttps://danielcaldas.github.io/posts/how-to-copy-file-android/https://danielcaldas.github.io/posts/how-to-copy-file-android/(especially if you have an Apple computer)Thu, 01 Jul 2021 00:00:00 GMT<p><strong>tl;dr</strong> SSH into your android and download the files with <a href="https://linux.die.net/man/1/scp" target="_blank" title="scp(1): secure copy - Linux man page">scp</a>. <a href="https://play.google.com/store/apps/details?id=com.arachnoid.sshelper" target="_blank" title="SSHelper - Apps on Google Play">This one</a> works for me.</p>
+<p>So this afternoon, I had decided to take some time to clear my smartphone, archive some old pictures and stuff. I usually park them on an external drive. Anyways, it happens that my <a href="https://www.oneplus.com" target="_blank" title="OnePlus 6 - OnePlus (Nederland)">OnePlus 6</a> does not connect to my new shiny <a href="https://www.apple.com/macbook-pro/" target="_blank" title="MacBook Pro - Apple">MacBook Pro</a>.</p>
+<p><br />
+(โฏยฐโกยฐ)โฏ๏ธต โปโโป
+<br />
+<br />
+<br /></p>
+<h4>USB/USB-C Cables</h4>
+<p>I tried, but Apple doesn't make it easy to recognize other devices.</p>
+<h4>SSH to the rescue!</h4>
+<p>I start browsing the Google Play store for some apps that allow me to run an SSH server on my smartphone. Quickly I've stumbled into <a href="https://play.google.com/store/apps/details?id=com.arachnoid.sshelper" target="_blank" title="SSHelper - Apps on Google Play">this</a>.</p>
+<p>Straightforward setup, as you can see in the screenshot below.</p>
+<p><img src="./assets/how-to-copy-file-android/ssh-server-helper-android-sm.png" alt="ssh server app running on android device" title="ssh server app running on android device"></p>
+<p>Since my laptop and my smartphone are on the same network, they can communicate.</p>
+<pre><code class="language-bash">ssh admin@<my_phone_ip> -p <ssh_server_port_from_app>
+# enter password...
+
+# then just copy stuff to my MacBook
+scp -r Images <my_macbook_user>@<my_macbook_ip>:~/Desktop
+</code></pre>
+<p>Hope this tip helps you out in case you get stuck due to the usual apple <em>mumbo jumbo</em>.</p>
How to Fix GitHub Actions: Support for password authentication was removedhttps://danielcaldas.github.io/posts/how-to-fix-github-password-authentication/https://danielcaldas.github.io/posts/how-to-fix-github-password-authentication/Linking private repos as npm dependencies the proper wayMon, 01 Aug 2022 00:00:00 GMT<p>Today the GitHub PAT (<em>personal access token</em>) expired in <a href="https://tweak-extension.com">one of my projects</a>, I literally waked up to this:</p>
<pre><code>npm ERR! code 128
npm ERR! An unknown git error occurred
@@ -1935,7 +2786,7 @@ hand remember that you getting each time more experiment and more comfortable ar
</ul>
<h3>Final note</h3>
<p>Again much of the written above is just my opinion. I hope you find useful some of the sections of this post even if you don't work on the tech industry.</p>
-There's something off about Open Sourcehttps://danielcaldas.github.io/posts/open-source-dilemma/https://danielcaldas.github.io/posts/open-source-dilemma/OSS dilemmaSat, 02 Mar 2024 00:00:00 GMT<blockquote>
+There's something off about Open Sourcehttps://danielcaldas.github.io/posts/open-source-dilemma/https://danielcaldas.github.io/posts/open-source-dilemma/OSS dilemmaWed, 16 Dec 2020 00:00:00 GMT<blockquote>
<p><strong>Update Oct 12th 2024</strong></p>
<p>I didn't modify this article. I don't fully agree with my views here anymore. The problem is not on FOSS, but rather on peoples' expectations and approach to FOSS. I'm still of the opinion that FOSS is not at a fully sustainable stage. Major projects today are typically funded and it's no longer rare to see full-time employed developers work on maintaining FOSS these days.</p>
</blockquote>
@@ -1967,7 +2818,593 @@ hand remember that you getting each time more experiment and more comfortable ar
</ol>
<p>I'm mostly worried about the last point. Would this mean that restrictions on who can contribute to the source would damage its quality? Simultaneously, would software companies that are just starting out be completely crashed because they now have to pay for every software they use?</p>
<p>This is quite a dilemma for me. I'm interested to see how all this is going pan out. My bet is on the money. Money wins, most of the time.</p>
-techReactive Serieshttps://danielcaldas.github.io/posts/reactive-series-preface/https://danielcaldas.github.io/posts/reactive-series-preface/A series of articles on Reactive Programming and RxJSWed, 22 Jul 2020 00:00:00 GMT<p>Over the past two years, I invested some time learning <a href="https://en.wikipedia.org/wiki/Reactive_programming" target="_blank" title="Reactive programming - Wikipedia">Reactive Programming</a> (with <a href="https://rxjs-dev.firebaseapp.com/" target="_blank" title="RxJS">RxJS</a>) and
+Deleted my git stash! Please send help!https://danielcaldas.github.io/posts/please-help-deleted-my-git-stash/https://danielcaldas.github.io/posts/please-help-deleted-my-git-stash/You can author content using the familiar markdown syntax you already know. All basic markdown syntax is supported.Sun, 09 Dec 2018 00:00:00 GMT<p>I have this poor habit you know... Whenever I accumulate a lot of git stashes in some repository I just get a little maniac and start cleaning everything.</p>
+<p><img src="./assets/please-help-deleted-my-git-stash/please-send-help.jpg" alt="please send help" title="please send help doggo meme"></p>
+<p><Caption source="https://me.me/i/please-send-help-none-c0081e69a4f4419a824e82a234ac09e6" /></p>
+<p>I found it sometimes even funny to open the terminal and play around with some bash to delete the stashes, look:</p>
+<pre><code class="language-bash"># if you're just flashing by don't copy and past this line into your terminal
+for i in {1..10}; do git stash drop; done
+</code></pre>
+<p>Well, it happens that today (a few hours ago actually) I just did this and regretted the moment I did because there was this huge feature that for some reason I had locally stashed and not committed <br/> ยฏ\_(ใ)_/ยฏ.</p>
+<p><strong>Good news!</strong>, the commits are not actually gone until git runs <a href="https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)#Reachability_of_an_object" target="_blank" title="wiki page garbage collection"><em>garbage collection</em></a>, so to check the list of commits that might still be rescued just go ahead and type:</p>
+<pre><code class="language-bash">git fsck --unreachable
+</code></pre>
+<p>or maybe</p>
+<pre><code class="language-bash">git fsck --unreachable | grep commit
+</code></pre>
+<p>because you actually need to check whether your hash is somewhere referenced as a <strong>unreachable commit</strong>.</p>
+<p>Then all you need to do once you find your <em>stash</em> (if you don't know the hash I'm afraid you will have to apply stashes until you find it) is just:</p>
+<pre><code class="language-bash">git stash apply <hash>
+</code></pre>
+<p>Here, some cool references on git stash:</p>
+<ul>
+<li><a href="https://www.atlassian.com/git/tutorials/saving-changes/git-stash" target="_blank" title="atlassian tutorials git stash">Atlassian - Git stash</a></li>
+<li><a href="https://community.atlassian.com/t5/Sourcetree-questions/Retrieve-a-deleted-stash/qaq-p/162673" target="_blank" title="atlassian community recover deleted stash">Atlassian community - Retrieve a deleted stash</a></li>
+</ul>
+<p>Notice that the references above are from Atlassian, which I highly recommend when it comes to quick search into a specific Git topic.</p>
+<p>And that's it, hope this saves you just like it saved me.</p>
+<p>Have a nice day.</p>
+Presenting babel-plugin-cloudinaryhttps://danielcaldas.github.io/posts/presenting-babel-plugin-cloudinary/https://danielcaldas.github.io/posts/presenting-babel-plugin-cloudinary/Presenting babel-plugin-cloudinaryThu, 04 Apr 2019 00:00:00 GMT<p>During the past two months, I've been developing a side project at work, this started with me doing a simple refactor task. At the time I looked at the solution we had in place, and it was dirty, but it was necessary to skip some considerable performance penalty. Maybe it was something that we just had to learn to live with...</p>
+<p><img src="./assets/presenting-babel-plugin-cloudinary/wrong-kido.jpg" alt="wrong kiddo meme" title="wrong kiddo meme"></p>
+<p><cite>source: https://imgur.com/gallery/J3WYR</cite></p>
+<p>Hell no! At the time the alternatives weren't that promising, but soon I realized the untapped potential of doing work at build time with <a href="https://babeljs.io/" target="_blank" title="babel or babel.js is a free and open-source javascript compiler and configurable transpiler used in web development">babeljs</a>. I'm very proud to present <a href="https://github.com/trivago/babel-plugin-cloudinary" target="_blank" title="official repository for babel-plugin-cloudinary compile cloudinary urls at build time.">babel-plugin-cloudinary</a>. In <a href="https://tech.trivago.com/2019/04/02/presenting-babel-plugin-cloudinary/" target="_blank" title="trivago tech blog official tech blog for babel-plugin-cloudinary">this trivago tech blog article</a>, you can find all the details and motivation behind the plugin.
+And by the way, if you want to know what the heck am I talking about, just take a look at the official repository of <a href="https://github.com/trivago/babel-plugin-cloudinary" target="_blank" title="official repository for babel-plugin-cloudinary compile cloudinary urls at build time.">babel-plugin-cloudinary</a>.</p>
+Reactive Series (pt. 2) - Fundamentals of Reactive Programminghttps://danielcaldas.github.io/posts/reactive-programming-fundamentals/https://danielcaldas.github.io/posts/reactive-programming-fundamentals/Reactive Series (pt. 2) - Fundamentals of Reactive ProgrammingThu, 03 Sep 2020 00:00:00 GMT<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><strong>Part 2 - Fundamentals of Reactive Programming</strong></li>
+<li><a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">Part 3 - Hands-on Reactive Programming with RxJS</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+<p><br></p>
+<ul>
+<li><a href="#the-observer-pattern">The Observer Pattern</a>
+<ul>
+<li><a href="#observer-pattern-real-life-analogy">Observer Pattern: Real-Life Analogy</a></li>
+<li><a href="#naming-the-things-we-already-know">Naming the things we already know</a></li>
+<li><a href="#a-naive-use-case-for-the-observer-pattern-in-javascript">A naive use case for the Observer pattern in JavaScript</a></li>
+<li><a href="#observable-as-a-first-class-citizen">Observable as a first-class citizen</a></li>
+</ul>
+</li>
+<li><a href="#reactive-programming">Reactive Programming</a>
+<ul>
+<li><a href="#core-properties-of-observables">Core Properties of Observables</a></li>
+<li><a href="#stream">Stream</a></li>
+<li><a href="#operators">Operators</a></li>
+<li><a href="#hot-observable-vs-cold-observable">Hot Observable VS Cold Observable</a></li>
+<li><a href="#brief-history-of-reactive-programming">Brief History of Reactive Programming</a></li>
+<li><a href="#quotes">Quotes</a></li>
+</ul>
+</li>
+</ul>
+<p>Let's continue our journey on Reactive Programming. This part will highlight some of this paradigm's key concepts for quick learning.</p>
+<h4>The Observer Pattern</h4>
+<p>You might have encountered several diagrams and explanations of the Observer pattern. For those of you that might not yet be familiar
+with it, allow me to explain it with an example-based approach, a very different one than what I had at school.</p>
+<blockquote>
+<p>"Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically." by <a href="https://sourcemaking.com/design_patterns/observer" target="_blank" title="Observer Design Pattern">sourcemaking.com</a></p>
+</blockquote>
+<p>I didn't get it for the first time with this definition and set me away instead of fascinating me. I thought this would be
+a super tricky thing to get. But not if you've had <strong>explained it to me with something we all know</strong> like youtube.</p>
+<h5>Observer Pattern: Real-Life Analogy</h5>
+<p>Let's look at <em>youtube.com</em> for a second. I'll use it as an example to explain this pattern's <strong>two core participants</strong>: <strong>Observer</strong> and <strong>Observable</strong>.</p>
+<p>Your browsing on youtube and you find a new <strong>channel</strong>. You want to <strong>receive notifications</strong> anytime some new
+<strong>content is published into that youtube channel</strong>, but for that, you'll need to <strong>hit the subscribe button first</strong>. You are the <strong>Observer</strong>, consuming the content posted (published) by that youtube channel. This makes the youtube channel the <strong>Observable</strong>. Another vital aspect to see is the multiplicity of this relationship. There's <strong>one youtube channel to many youtube users</strong> (subscribers).</p>
+<h5>Naming the things we already know</h5>
+<p>Keeping this analogy in mind, let's clarify a couple more concepts that complement the relationship between an Observable and its Observables.</p>
+<ul>
+<li><strong>Producer or creator</strong> - something that generates/publishes content. Back to our analogy, the content creator is the youtube
+channel owner. An Observable produces data.</li>
+<li><strong>Consumer or client</strong> - something that subscribes to new content (data) published by the producers; our user is the consumer in our analogy. He or she gets notified when new content is out.</li>
+<li><strong>Subscription</strong> - think of it as an object that holds the information about you subscribing to that youtube channel. One crucial thing that the subscription must own is a way for you to unsubscribe from that youtube channel when you no longer want to be notified of new content.</li>
+<li><strong>Pull</strong> - we talk about a pull protocol when a consumer/client explicitly decides when to get data from the producer/creator. For instance, when we create a simple function and call it to do some work for us.</li>
+<li><strong>Push</strong> - in these systems, the consumer/client doesn't know exactly when new content is published. Our youtube analogy describes such a system where the channel subscribers have no clue when a new video will be posted.</li>
+</ul>
+<p>These concepts are more comfortable to follow when backing them up with some real-life example, but most importantly, it is good that you possess a <strong>grasp of the jargon</strong>. <strong>It's crucial to clearly express yourself</strong> with your peers. Last but not least, this <strong>becomes super relevant when you're trying to Google your away around some issue</strong>.</p>
+<h5>A naive use case for the Observer pattern in JavaScript</h5>
+<p>Now let's get our hands on and implement the Observer pattern for our youtube case study. The idea is to use the Observer pattern to notify many youtube users when a new video is published into the channel. We'll keep the example slim and straightforward. The main idea is to have an end-to-end perception of how the data flows in our application when using Observables. We won't have a UI here. We will just use <code>console.log</code> to signal some events in our small program.</p>
+<pre><code class="language-javascript">class Video {
+ constructor(title) {
+ this.title = title
+ }
+}
+
+class Channel {
+ constructor(name, subscribers = []) {
+ this.name = name
+ this.subscribers = subscribers
+ this.videos = []
+ }
+
+ // subscribes a user to an instance of channel
+ // returns the unsubscription function
+ subscribe(user) {
+ this.subscribers.push(user)
+
+ const userIndex = this.subscribers.length - 1
+
+ // remember we need to allow our users
+ // to unsubscribe anytime
+ const unsubscribe = () => {
+ this.subscribers.splice(userIndex, 1)
+ }
+
+ return unsubscribe
+ }
+
+ // publishes a new video in this channel notifying
+ // all its subscribers
+ publish(video) {
+ this.videos.push(video)
+ this.subscribers.forEach((user) => {
+ user.notify(`
+ Hey there ${user.email}!
+ There's a new video from ${this.name}
+ ${video.title}
+ `)
+ })
+ }
+}
+
+class User {
+ constructor(email) {
+ this.email = email
+ }
+
+ // just logs a notification update
+ notify(update) {
+ console.log(update)
+ }
+}
+
+function main() {
+ // our platform has 3 users: elisa, hans and mark
+ const elisa = new User('elisa@gmail.com')
+ const hans = new User('hans@gmail.com')
+ const mark = new User('mark@gmail.com')
+
+ // our platform has 1 channel "#FunnyVide0s"
+ const funnyVideosChannel = new Channel('#FunnyVide0s')
+
+ // Our scenario
+
+ // elisa, hans and mark hit the subscribe button on "#FunnyVide0s"
+ const subscriptions = [elisa, hans, mark].map((user) => {
+ return funnyVideosChannel.subscribe(user)
+ })
+
+ // oh! it seems a new video is about to come out on "#FunnyVide0s"
+ const newVideo = new Video('funny cats (part 1)')
+ funnyVideosChannel.publish(newVideo)
+
+ // no! is seems like elisa didn't like the video "funny cats (part 1)"
+ // she unsubscribes from the channel
+ const unsubscribeElisa = subscriptions[0]
+
+ unsubscribeElisa()
+
+ // but "#FunnyVide0s" it's not going to stop!
+ // we have a new cats video, of course this time
+ // only Hans and Mark are notified
+ const yetAnotherNewVideo = new Video('funny cats (part 2)')
+ funnyVideosChannel.publish(yetAnotherNewVideo)
+}
+
+main()
+// The output is:
+//
+// Hey there elisa@gmail.com!
+// There's a new video from #FunnyVide0s
+// funny cats (part 1)
+//
+// Hey there hans@gmail.com!
+// There's a new video from #FunnyVide0s
+// funny cats (part 1)
+//
+// Hey there mark@gmail.com!
+// There's a new video from #FunnyVide0s
+// funny cats (part 1)
+//
+// Hey there hans@gmail.com!
+// There's a new video from #FunnyVide0s
+// funny cats (part 2)
+//
+// Hey there mark@gmail.com!
+// There's a new video from #FunnyVide0s
+// funny cats (part 2)
+</code></pre>
+<p>Let's map the entities of the above example:</p>
+<ul>
+<li>The <code>User</code> is our <code>Observer</code>.</li>
+<li>The <code>Channel</code> is our <code>Observable</code>.</li>
+<li>The <code>Video</code> is just really the contract for the payload we sent out to subscribers, it <strong>can really be anything</strong>.</li>
+</ul>
+<p>I hope this example clarifies that you can leverage the Observer pattern with no additional libraries in any programming language. I found this knowledge of paramount importance to understand more complex use cases in reactive programming, specially when using libraries, we sit as a client, we go one layer of abstraction above what you've seen in the previous example. With reactive programming libraries, you can juggle with Observables in fantastic ways effortlessly.</p>
+<p>As a side note, if you're keen on learning more about the Observer pattern (or any other design pattern), I highly recommend the following resources:</p>
+<ul>
+<li><a href="https://sourcemaking.com/design_patterns/observer" target="_blank" title="Observer Design Pattern">sourcemaking.com</a></li>
+<li><a href="https://en.wikipedia.org/wiki/Design_Patterns" target="_blank" rel="nofollow" title="Design Patterns: Elements of Reusable Object-Oriented Software">Design Patterns: Elements of Reusable Object-Oriented Software</a></li>
+<li><a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank" rel="nofollow" title="Learning JavaScript Design Patterns">Learning JavaScript Design Patterns</a> - a better resource if you want to learn these concepts with JavaScript.</li>
+</ul>
+<h5>Observable as a first-class citizen</h5>
+<blockquote>
+<p>"Observables never had a chance to shine on their own. The real win, IMO, to RxJS is the Observable type itself. Not the operators." from <a href="https://dev.to/benlesh/observables-reactive-programming-and-regret-4jm6" target="_blank" title="Observables, Reactive Programming, and Regret - DEV">"Observables, Reactive Programming and Regret"</a></p>
+</blockquote>
+<p>Observables are everywhere these days. Libraries such as RxJS has an internal implementation of an Observable type, an refers to it as a <a href="https://en.wikipedia.org/wiki/First-class_citizen" target="_blank" title="First-class citizen - Wikipedia">first-class citizen</a>.</p>
+<p>I would like to highlight the <a href="https://tc39.es/proposal-observable/" target="_blank" title="TC39 โ Specifying JavaScript, Observable proposal">tc39 Observable proposal</a>. Observables are a very natural fit to handle many programming challenges. I think this has become more noticeable given that people are even considering bringing it into the language (in this case JavaScript)! I believe we are blurring the line between language specification and library, but I'm happy to see the proliferation of Observables' discussions.</p>
+<h4>Reactive Programming</h4>
+<p><strong>Reactive Programming is programming with streams of data. Streams are vessels of values pushed over time. Streams can be transformed into and combined with other streams</strong>.</p>
+<p><strong>To make the above clearer</strong>, let's go over a few essential concepts, those you'll hear all the time.</p>
+<h5>Core Properties of Observables</h5>
+<p>There are <strong>3 very important aspects about Observables</strong> in reactive programming. Maybe some of them don't make sense now, but they will, once you have some hands-on experience with some reactive library.</p>
+<p><strong>Observables are</strong>...</p>
+<ul>
+<li><strong>a primitive type</strong> with 0 to many values, pushed over any amount of time (yes, mentioned quite a few times already).</li>
+<li><strong>cancellable</strong>, you can cancel a subscription by sending stuff to these observables: "I don't' want you to send me those values anymore."</li>
+<li><strong>lazy. Observables don't do anything until you subscribe.</strong> This is the complete opposite of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" title="Promise - JavaScript | MDN">Promises</a>. Promises are eager, that's why we often wrap them in a function, making them lazy, so they only execute when we call them.</li>
+</ul>
+<h5>Stream</h5>
+<p>An overused term these days, but I'll try to make it simple.
+First of all, <strong>a stream is an Observable</strong>; you'll find that these two concepts are often interchangeable. Simply put, a stream is a collection of values pushed over time. Let's think of <em>"live streaming"</em> in the video industry for a moment; on one end, there's your laptop observing the stream; on the other end, something is pushing several bits of data over the wire. Simple right? But <strong>how to think about streams in the conceptual world</strong>? That's where diagrams (more precisely marble diagrams) come in handy. At the most basic level, a stream is simply represented by a horizontal line, representative of time, with geometric figures. Each figure represents an emitted value on the stream. What's an emitted value? If a stream emits a value, it means that everyone looking into the stream will get notified of that value. Hopefully, the following figure makes it crystal clear.</p>
+<p><br /></p>
+<p>The following represents a stream that emits 4 values (1 value emitted per second).</p>
+<p><img src="./assets/reactive-programming-fundamentals/stream-basic-four-values.gif" alt="'simple stream animation of four values pushed over time'" title="stream animation"></p>
+<p><cite>source: https://rxviz.com/</cite></p>
+<p><br /></p>
+<p>From now on, whenever you hear <strong>"stream"</strong>, try to visualize the above in your head.</p>
+<h5>Operators</h5>
+<p>Streams alone are useful as they allow multiple Observers to subscribe to it for updates. Things start to get more enjoyable when you want to <strong>manipulate a stream</strong>. As mentioned, streams can be transformed and even combined. The power it's all yours. Let's look at two essential operations, <strong>mapping, and filtering</strong>. Take a look at the following animation.</p>
+<p><br />
+<br /></p>
+<p><img src="./assets//reactive-programming-fundamentals/map-filter-stream.gif" alt="'visualization of map and filter when applied to streams'" title="map and filter stream"></p>
+<p><cite>source: https://reactive.how/filter</cite></p>
+<p><br /></p>
+<p>As you can see on the left, <code>map</code> applied over the left-most stream generates a new stream of values where each value in the original stream goes through the function <code>isEven</code> provided to the mapping operation. Subscribing to this stream, you would get a boolean (true vs. false) or number (0 vs. 1) that tells you whether a given value is even or odd. Now let's look at filter. With <code>filter</code>, instead of transforming each value, you're actually creating a new stream that only emits the original value when the same it's even. So from an Observer perspective, you would be notified half of the times, while with map your Observer will be notified for every single value.</p>
+<h5>Hot Observable VS Cold Observable</h5>
+<p>This is a concept that I've experienced before understanding it, and it can be daunting.</p>
+<p>A <strong>Hot Observable</strong> emits values before the subscription happens. <strong>Think of it as a live music concert in a stadium</strong>. You will only get to see the full performance if you enter the stadium (subscribe) before the show starts (stream emits values). Of course, you can arrive at the venue to see the concert at any future time. Everyone at the stadium shares the same experience (meaning the values are shared among subscribers).
+In a real use case, a Hot Observable can be a stream of click events on the page (there might be clicks happening before you subscribe to it) in a user interface.</p>
+<p>A <strong>Cold Observable</strong> only starts emitting values upon subscription. <strong>Think of it as a movie on Netflix</strong>. The film only starts playing once you press play on your laptop. You won't miss pieces of the movie since you can start playing from the very start. If someone else watches the same movie on Netflix, they won't share your timeline; each user has its own individual timeline (values are not shared among subscribers).
+In a real use case, a cold Observable can be a countdown clock where each subscriber has its own clock.</p>
+<h5>Brief History of Reactive Programming</h5>
+<p>According to my research in the paper <a href="http://conal.net/papers/icfp97/" target="_blank" title="Functional Reactive Animation paper">Functional Reactive Animation (1997)</a>, we see some first mentions to things such as: <strong>reactivity</strong>. Some kind of temporal representation animations resembles the concept of a stream.</p>
+<p>Haskell mentions in its WiKi page <a href="https://wiki.haskell.org/Functional_Reactive_Programming" target="_blank" title="Functional Reactive Programming - HaskellWiki"></a>:</p>
+<blockquote>
+<p>"Functional Reactive Programming (FRP) integrates time flow and compositional events into functional programming."</p>
+</blockquote>
+<p>The phrasing here is bit complicated. There's this concept of a primitive type called <code>Behavior</code>, which is defined as a time-varying value. This resembles a stream, right? A stream is somehow a time-varying value since you can get different values pushed to the stream over time, not that the reference to the stream changes, but its contents instead.</p>
+<p>Today reactive is not only used to manage animated user interfaces. <strong>It's on every platform, from the web to mobile, from UIs to servers.</strong> Here's a couple of the most famous reactive programming libraries today:</p>
+<ul>
+<li><a href="http://baconjs.github.io/" target="_blank" title="Bacon.js - Functional Reactive Programming library for JavaScript">bacon.js</a></li>
+<li><a href="https://vertx.io/" target="_blank" title="Eclipse Vert.x">
+vertex.io
+</a></li>
+<li><a href="http://reactivex.io/" target="_blank" title="ReactiveX">
+ReactiveX
+</a>(<a href="https://github.com/ReactiveX/RxJava" target="_blank" title="ReactiveX/RxJava: RxJava โ Reactive Extensions for the JVM โ a library for composing asynchronous and event-based programs using observable sequences for the Java VM"
+<blockquote>
+<p>RxJava</a>, <a href="https://github.com/ReactiveX/RxSwift" target="_blank" title="ReactiveX/RxSwift: Reactive Programming in Swift">RxSwift</a>, <a href="https://github.com/ReactiveX/rxjs" target="_blank" title="ReactiveX/rxjs: A reactive programming library for JavaScript"
+RxJS</a> and others)</p>
+</blockquote>
+</li>
+<li><a href="https://kefirjs.github.io/kefir/" target="_blank" title="Kefir.js โ fast and light Reactive Programming library for JavaScript inspired by Bacon.js and RxJS">kefir</a></li>
+</ul>
+<h5>Quotes</h5>
+<p>I hope this section offers some other views (and their sources) on reactive programming, expressed in a different way that might complement or even wholly build your understanding of things so far.</p>
+<blockquote>
+<p>"Reactive Programming raises the level of abstraction of your code so you can focus on the interdependence of events that define the business logic, rather than having to constantly fiddle with a large amount of implementation details"</p>
+</blockquote>
+<p><small>
+<a
+href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754"
+target="_blank"
+title="The introduction to Reactive Programming you've been missing"</p>
+<blockquote></blockquote>
+<pre><code>"The introduction to Reactive Programming you've been missing"
+</code></pre>
+<p></a>
+</small></p>
+<p><br /></p>
+<blockquote>
+<p>"When you fully embrace RP, the core of your app ends up being a declaration of a graph through which your data flows."</p>
+</blockquote>
+<p><small>
+<a
+href="https://dassur.ma/things/streams-for-reactive-programming/"
+target="_blank"
+title="Streams for reactive programming"</p>
+<blockquote></blockquote>
+<pre><code>"Streams for reactive programming"
+</code></pre>
+<p></a>
+</small></p>
+<p><br /></p>
+<blockquote>
+<p>"Never store a mutable state on your types. Instead, when you generate a new value in response to a change, send it in to a channel."</p>
+</blockquote>
+<p><small>
+<a
+href="https://www.cocoawithlove.com/blog/reactive-programming-what-and-why.html#a-description-of-reactive-programming"
+target="_blank"
+title="What is reactive programming and why should I use it?"</p>
+<blockquote></blockquote>
+<pre><code>"What is reactive programming and why should I use it?"
+</code></pre>
+<p></a>
+</small></p>
+<p><br /></p>
+<p>It's good that you discovered these concepts before you jump into practice. In my opinion, these can't be absorbed only by reading. Go over to the next blog post, where we'll build a small game together so that you can materialize the things I've covered in this blog post.</p>
+<p><br></p>
+<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><strong>Part 2 - Fundamentals of Reactive Programming</strong></li>
+<li><a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">Part 3 - Hands-on Reactive Programming with RxJS</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+Reactive Series (pt. 4) - Reactive Programming: The Good and the Badhttps://danielcaldas.github.io/posts/reactive-rxjs-pros-cons/https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons/Reactive Series - Part 4Thu, 03 Dec 2020 00:00:00 GMT<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Part 2 - Fundamentals of Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">Part 3 - Hands-on Reactive Programming with RxJS</a></li>
+<li><strong>Part 4 - Reactive Programming: The Good and the Bad</strong></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+<p><br></p>
+<p>After seeing reactive streams in action with RxJS, I would now like to expand <a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">"Part 1 - Why you should consider Reactive Programming"</a> by debating some of the gains & pains of reactive streams and RxJS.
+As of now, we've covered some fundamental aspects of reactive programming, and we've seen some code as well!
+In this part of the series, I'll be compacting some of the benefits I felt while using reactive programming and some of the major pain points of adopting it. Since we've used RxJS, I'll make occasional mentions of this reactive library's ups and downs.</p>
+<ul>
+<li><a href="#the-good">The good</a>
+<ul>
+<li><a href="#your-code-becomes-inheritably-lazy">Your code becomes inheritably lazy</a></li>
+<li><a href="#your-code-is-likely-to-be-more-concise">Your code is likely to be more concise</a></li>
+<li><a href="#youre-likely-to-write-less-code">You're likely to write less code</a></li>
+<li><a href="#effortless-cancellation">Effortless cancellation</a></li>
+<li><a href="#easier-to-deal-with-backpressure">Easier to deal with backpressure</a></li>
+<li><a href="#converging-towards-a-single-style-of-coding">Converging towards a single style of coding</a></li>
+<li><a href="#complicated-things-made-easy">Complicated things made easy</a></li>
+<li><a href="#maintainability">Maintainability</a></li>
+</ul>
+</li>
+<li><a href="#the-bad">The bad</a>
+<ul>
+<li><a href="#learning-curve">Learning curve</a></li>
+<li><a href="#debugging-does-not-get-any-easier">Debugging does not get any easier</a></li>
+<li><a href="#human-creativity">Human creativity</a></li>
+<li><a href="#with-great-power">With great power</a></li>
+<li><a href="#error-handling">Error handling</a></li>
+</ul>
+</li>
+<li><a href="#closing-notes">Closing notes</a></li>
+</ul>
+<h4>The good</h4>
+<p>Let's explore some beneficial aspects of adopting reactive programming and RxJS now that we have looked at <a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">how to approach a problem and model it with streams</a>.</p>
+<h5>Your code becomes inheritably lazy</h5>
+<p>Working with streams means nothing happens until you subscribe to them, which is terrific! Because any code path now has a "free of charge" stop & play capability! Without any effort, your computations become lazy by default executing when needed - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" title="Promise - JavaScript | MDN">Promises</a> are eager. They start running as soon as you construct them. It's common to wrap a Promise with a function to make it lazy.</p>
+<h5>Your code is likely to be more concise</h5>
+<p>As we've seen in the <a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">hands-on</a> part of this series, you'll likely have to model events and think about what parties are interested in consuming such events. You'll spend less time focusing on the implementation details. You'll rather spend your time drawing a mental map of the events' interdependency that define your business logic. In my experience, this often results in more compact implementations, making it more accessible to capture the big picture of the internal flows in your application.</p>
+<h5>You're likely to write less code</h5>
+<p>It only makes sense that if you have an ecosystem, such as RxJS, in your arsenal, you'll spend less time implementing behaviors that are already built-in in some operator (e.g., <a href="https://www.learnrxjs.io/learn-rxjs/operators/filtering/debounce" target="_blank" title="debounce - Learn RxJS">debouncing</a>, <a href="https://www.learnrxjs.io/learn-rxjs/operators/filtering/throttle" target="_blank" title="throttle - Learn RxJS">throttling</a>, etc.). Just like you'll spend less time mutating the DOM directly when you use a UI framework such as React or Vue, you'll think more about how your UI looks like and what data binds to what parts of your UI.</p>
+<h5>Effortless cancellation</h5>
+<p>In my opinion, an overlooked easy win of coding with streams and RxJS is how easy it becomes to implement cancellation. What kind of behavior does cancellation concern, you ask? Let's see an example.</p>
+<p><img src="./assets/reactive-rxjs-pros-cons/rxjs-free-cancellation.gif" alt="'cancellation of http request on hover items in a list'" title="rxjs free cancellation"></p>
+<p>In the above GIF, we have a list of items. Hovering on each item in the list triggers an ajax request to fetch some data from the server. The problem of eagerly (compared with clicking the item, for instance) triggering the requests upon mouse hovering is that you can potentially fetch the data for all the items but ending up not displaying any of the data to the end-user. To avoid that, we cancel an item's request when the user's mouse leaves it.</p>
+<p><small>(<b>Note</b>: oh, btw on the above GIF, I'm not calling a real API, I'm just using the <a href="https://tweak-extension.com" target="_blank" title="tweak browser extension mock API simulator">tweak browser extension</a> to mock the HTTP requests seamlessly)</small></p>
+<p><br /></p>
+<p>Here's the snippet of the above pattern, implemented with <a href="https://rxjs-dev.firebaseapp.com/api/operators/switchMap" target="_blank" title="RxJS - switchMap">switchMap</a> and <a href="https://rxjs-dev.firebaseapp.com/api/operators/takeUntil" target="_blank" title="RxJS - takeUntil">takeUntil</a>.</p>
+<pre><code class="language-javascript">const listEl = document.getElementById('list')
+const resEl = document.getElementById('res')
+const fetchById = (id) => ajax(`https://some-service.com/api/items/${id}`).pipe(map((r) => r.response))
+const mouseOutItem$ = fromEvent(listEl, 'mouseout')
+const mouseOverItem$ = fromEvent(listEl, 'mouseover')
+ .pipe(
+ switchMap((event) => {
+ const id = event.target.id
+ resEl.innerHTML = `loading item ${id}...`
+ console.log(`Fetching data for item ${id}...`)
+ return fetchById(id)
+ }),
+ map((response) => {
+ resEl.innerHTML = JSON.stringify(response, null, 2)
+ console.log(`Done fetching data for item ${response.item.id}!`)
+ }),
+ takeUntil(
+ mouseOutItem$.pipe(
+ tap(() => {
+ console.log(`โ Cancelled fetch data for item ${event.target.id}!`)
+ resEl.innerHTML = '...'
+ }),
+ ),
+ ),
+ repeat(),
+ )
+ .subscribe()
+</code></pre>
+<p><br /></p>
+<p><Accordion summary='Expand to see example full code'></p>
+<pre><code class="language-html"><!doctype html>
+
+<head>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js.map"></script>
+ <style>
+ li {
+ padding: 4px;
+ border: 1px dashed green;
+ color: black;
+ }
+
+ li:hover {
+ background-color: lightblue;
+ color: blueviolet;
+ cursor: pointer;
+ font-weight: bold;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="app"></div>
+ <script>
+ const { delay, filter, map, mapTo, switchMap, takeUntil, takeWhile, tap, withLatestFrom, repeat } =
+ window.rxjs.operators
+ const { fromEvent, merge, timer } = window.rxjs
+ const ajax = window.rxjs.ajax.ajax
+
+ // preventing the default event on dragover
+ // so that we're allowed to drop an element
+ fromEvent(document, 'dragover')
+ .pipe(tap((event) => event.preventDefault()))
+ .subscribe()
+
+ // all the game markup goes here
+ document.getElementById('app').innerHTML = `
+ <h2>Hover on the items to fetch some async data</h2>
+ <ul id="list">
+ <li id="item-1">item 1 (mouse over to fetch data)</li>
+ <li id="item-2">item 2 (mouse over to fetch data)</li>
+ <li id="item-3">item 3 (mouse over to fetch data)</li>
+ <li id="item-4">item 4 (mouse over to fetch data)</li>
+ </ul>
+ <h3>Item detail</h3>
+ <pre id="res">...</pre>
+ `
+
+ const listEl = document.getElementById('list')
+ const resEl = document.getElementById('res')
+ const fetchById = (id) => ajax(`https://some-service.com/api/items/${id}`).pipe(map((r) => r.response))
+ const mouseOutItem$ = fromEvent(listEl, 'mouseout')
+ const mouseOverItem$ = fromEvent(listEl, 'mouseover')
+ .pipe(
+ switchMap((event) => {
+ const id = event.target.id
+ resEl.innerHTML = `loading item ${id}...`
+ console.log(`Fetching data for item ${id}...`)
+ return fetchById(id)
+ }),
+ map((response) => {
+ resEl.innerHTML = JSON.stringify(response, null, 2)
+ console.log(`Done fetching data for item ${response.item.id}!`)
+ }),
+ takeUntil(
+ mouseOutItem$.pipe(
+ tap(() => {
+ console.log(`โ Cancelled fetch data for item ${event.target.id}!`)
+ resEl.innerHTML = '...'
+ }),
+ ),
+ ),
+ repeat(),
+ )
+ .subscribe()
+ </script>
+</body>
+</code></pre>
+<p></Accordion></p>
+<p><br />
+<br /></p>
+<h5>Easier to deal with backpressure</h5>
+<blockquote>
+<p>"Backpressure is when the progress of turning that input to output is resisted in some way. In most cases that resistance is computational speed", from <a href="https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7" target="_blank" title="Backpressure explained โ the resisted flow of data through software | by Jay Phelps | Medium">"Backpressure explained โ the resisted flow of data through software"</a></p>
+</blockquote>
+<p>Did it ever happen that your <code>addEventListener</code> handle is just executing too many times? For instance, while running an event handler for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event" target="_blank" title="Document: scroll event - Web APIs | MDN">scroll event</a>? It's common to use a debounce strategy to run your event handler only after X time has passed since the last scroll event. Again, with built-in operators such as debounce in RxJS, you can quickly relieve the load in your consumer functions (event handlers). The operator single-handedly takes care of debouncing emissions for you!</p>
+<h5>Converging towards a single style of coding</h5>
+<p>I've covered this in greater detail during <a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">"Part 1 - Why you should consider Reactive Programming"</a> the gist is that working with streams when done right, might make callbacks, Promises, and async/await nearly obsolete. I say nearly because you' might still use Promises under the hood, but your code now can look the same whether you're tackling synchronous or asynchronous tasks.</p>
+<h5>Complicated things made easy</h5>
+<p>I want to reinforce that you can leverage reactive libraries such as RxJS to solve complex problems with little effort. If you haven't watched the talk <a href="https://www.youtube.com/watch?v=B-nFj2o03i8" target="_blank" title="Complex features made easy with RxJS - YouTube">"Complex features made easy with RxJS"</a> by <a href="https://twitter.com/BenLesh" target="_blank" title="Ben Lesh (@BenLesh) / Twitter">Ben Lesh</a>, I would highly recommend it. In the first 10 minutes, you'll see how easy it becomes to tackle some of the following problems with the help of RxJS:</p>
+<ul>
+<li>Basic drag & drop implementation <a href="https://youtu.be/B-nFj2o03i8?t=351" target="_blank" title="Complex features made easy with RxJS - YouTube">[5:54]</a></li>
+<li>Avoid double submission through a button that involves an asynchronous Ajax call <a href="https://youtu.be/B-nFj2o03i8?t=424" target="_blank" title="Complex features made easy with RxJS - YouTube">[7:04]</a></li>
+<li>Throttle autosuggestion field that involves fetching data with a given search term <a href="https://youtu.be/B-nFj2o03i8?t=444" target="_blank" title="Complex features made easy with RxJS - YouTube">[7:24]</a></li>
+</ul>
+<p>If you aim to solve one of the problems mentioned in the above list, you can avoid reinventing the wheel by following the reactive patterns demonstrated in the video.</p>
+<h5>Maintainability</h5>
+<p>There are two aspects of maintainability that I would point out. First, you'll write less code; there's a lot of heavy lifting that RxJS can do for you; if you leverage that, you'll undoubtedly ending writing less code. The second is that a combination of streams with powerful operators solve complex problems in a very declarative manner. Code will look concise and straightforward; instead of verbose branching and imperative logic, you'll have a few combinations of operators that will do all the magic for you.
+However, with RxJS and streams, maintainability is a double-edged sword. We're going to cover that in the next part of this article.</p>
+<h4>The bad</h4>
+<p>Let's look at the not so bright side.</p>
+<h5>Learning curve</h5>
+<p>Any modern JavaScript codebase uses a cocktail of libraries. RxJS (or whatever library you would adopt) would be just one more thing you'll have to teach newcomers. But don't take this as a light decision. You're not only introducing a new library in the codebase, but you're also introducing a new paradigm. I feel there's quite a learning curve towards mastering reactive programming and RxJS. Not only you're exposed to an entirely new ecosystem with new APIs, but you also need the time to process this different paradigm of programming with streams. As we've experienced in previous articles, it can be quite different from a traditional writing code style (compared with imperative programming, for example).</p>
+<p>Depending on how broadly you'll embrace this paradigm, you might need to ship new tooling for unit testing and master additional concepts such as <a href="https://rxmarbles.com/" target="_blank" title="RxMarbles: Interactive diagrams of Rx Observables">marble diagrams</a> - which helps you properly model and assert data streams. However, it might require you and your team to learn another tricky <strong>DSL</strong> (<strong>d</strong>omain-<strong>s</strong>pecific <strong>l</strong>anguage) to deal with these diagrams.</p>
+<p>Some might argue that the "learning curve" is a "one-time cost". As it turns out, in the software industry, software engineers tend to move a lot (due to the high demand for the skill these days), and they might be sticking around in the same company for an average of 2 to 3 years before embracing a new challenge. The bustling job market makes me believe that it is not wise to think of the "learning curve" as a one time cost because soon, your freshly trained engineer with RxJS skills might say goodbye.</p>
+<h5>Debugging does not get any easier</h5>
+<p>Just the same way, you can split your code into several functions, and those functions call other functions which, without some structure, might end up in spaghetti code. Likewise, you can end up entangled in a spaghetti of streams and not know which way to turn. I think simple functions are usually more straightforward to debug, given that they are composed sequentially. You're reading a function; that function might call other N functions and so forth. Well, with streams, it might not be that candid because there's no such thing as a stream invoking another stream. Instead, you'll have a stream plugging with other streams in mixed ways depending on the operators that join them. It might feel overweighing at some point to find your way around some particular flow (hopefully, you won't' reach that point because your code is clear and concise).</p>
+<p>Another aspect that you might run into while debugging streams is that such an amount of abstractions and compact implementation will let no space for you to plug into a stream and debug it or inspect it the same way you debug a function. Things tend to be on a higher level of abstraction - which is beneficial because it will free up your mind on some implementation details. Hence when it comes to the point you need to dig further down, understanding what's going on at the very core of your flow, you might need to <a href="https://www.learnrxjs.io/learn-rxjs/operators/utility/do" target="_blank" title="tap / do - Learn RxJS">tap</a> into streams here and there to figure out what's the issue. Although old this article, it might be one of the best walkthroughs of the problem I'm trying to surface here. It will give you a solid strategy to debug streams (even if you're looking at that particular code for the first time) - <em>tip for reading it: mentally replace <code>do</code> per <code>tap</code></em>.</p>
+<h5>Human creativity</h5>
+<p><strong>Kiss</strong>: <strong>K</strong>eep <strong>i</strong>t <strong>S</strong>imple, <strong>S</strong>tupid, not easy with reactive streams and RxJS tough. I'll tell from personal experience that it will come the day you'll look at your code, and although it's just fine, you'll feel this <strong>voice inside your head: "Are you sure there's nothing else much fancier in the RxJS API that would allow you to write less two lines of code?" - fight that voice!</strong> Creative solutions with RxJS might often result in dreadful consequences for your product and team. But yet, RxJS has such a unique and evolving ecosystem that will feel tempting with time to start to chime in some new operators just for the sake of adding more operators. Fight that in code reviews - this is the place you can understand why your colleague is shipping that new exotic operator and challenge simpler alternatives already in use. I guess this is general advice. I wouldn't apply it to reactive programming only. If you don't have a code review process, ยฏ\_(ใ)_/ยฏ.</p>
+<h5>With great power</h5>
+<p>As usual, with powerful tools, there is increased responsibility towards their use. If you pick RxJS as your weapon of choice, there are things you'll need to be extra careful. I want to highlight one: shareReplay. We didn't look into this operator in particular during this series, but we did learn the difference between <a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals#hot-observable-vs-cold-observable" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Hot and Cold observables</a>, a quick refresher:</p>
+<ul>
+<li><strong>Hot Observables</strong> - multicast; all subscribers get data from the same producer (e.g., a live music concert in a stadium).</li>
+<li><strong>Cold Observables</strong> - unicast; each subscriber gets data from different producers (e.g., a show on Netflix).</li>
+</ul>
+<p><a
+href="https://www.learnrxjs.io/learn-rxjs/operators/multicasting/sharereplay"
+target="_blank"
+title="shareReplay - Learn RxJS"</p>
+<blockquote>
+<p>shareReplay
+</a> allows you to take a cold observable and make it hot in the sense that you can now multicast the underlying computation
+to multiple subscribers ๐คฏ - that's <b>share</b>. With this operator, new subscribers will be able to "catch up" with
+previously emitted values at any point in time - that's <b>replay</b>.</p>
+</blockquote>
+<p>Don't want to get into extensive detail of what the operator pertains to; be mindful of your implementation gaps that might trigger massive memory leaks in your application by using this operator. The gist is that <strong>using shareReply without refCount may origin a memory leak because the operator doesn't automatically close the stream</strong> after all its consumers' have unsubscribed.</p>
+<p>Also, historically, there have been some issues around its implementation <a href="https://github.com/ReactiveX/rxjs/issues/3336">[1]</a> <a href="https://github.com/ReactiveX/rxjs/issues/5034">[2]</a>.</p>
+<h5>Error handling</h5>
+<p>Finally, yet notably, error handling. Something I did not cover in the previous articles. Error handling is yet something else that changes considerably. Let's look at a simple example comparing reactive vs. non-reactive.</p>
+<pre><code class="language-javascript">switchMap(event => {
+ try {
+ const id = event.target.id;
+ resEl.innerHTML = `loading item ${id}...`;
+ console.log(`Fetching data for item ${id}...`);
+ return fetchById(id);
+ } catch (error) {
+ // that's not how this works with streams...
+ }
+}),
+map(response => {
+ resEl.innerHTML = JSON.stringify(response, null, 2);
+ console.log(`Done fetching data for item ${response.item.id}!`);
+}),
+</code></pre>
+<pre><code class="language-javascript">switchMap(event => {
+ const id = event.target.id;
+ resEl.innerHTML = `loading item ${id}...`;
+ console.log(`Fetching data for item ${id}...`);
+ return fetchById(id);
+}),
+catchError(error => {
+ if (error) {
+ console.error(error);
+ }
+ // fallback to an empty item and a message
+ // we need to return an observable!
+ return of({
+ item: {},
+ message: 'something went wrong',
+ });
+}),
+map(response => {
+ resEl.innerHTML = JSON.stringify(response, null, 2);
+ console.log(`Done fetching data for item ${response.item.id}!`);
+}),
+</code></pre>
+<p>For a more natural integration, you'll have to stick with the <a href="https://www.learnrxjs.io/learn-rxjs/operators/error_handling/catch" target="_blank" title="catch / catchError - Learn RxJS">catchError operator</a>. As a beginner, I would tend to wrap stuff around with try/catch, but things work slightly differently with streams. Observable is our primitive here, remember?
+Something mentioned as a <a href="https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93#.pcmlgg1mx" target="_blank" title="On The Subject Of Subjects (in RxJS) | by Ben Lesh | Medium"><i>"gotcha"</i> of RxJS</a> <strong>is the fact that an RxJS Observable does not "trap" errors</strong>; when an error bubbles to the end of the observer chain, when unhandled, the error, it will be re-thrown.</p>
+<h4>Closing notes</h4>
+<p>Would I use reactive programming and RxJS in my next project? <strong>Depends...</strong> There's a great deal of learning involved in using these technologies, so even though I might not always use them, I'm confident that these skills will (and are!) playing an essential role in my evolution as a software engineer. Just know that <strong>I would do it again</strong> (all the learning and writing).</p>
+<p>I do think Reactive is powerful and useful, but it's not a holy grail that will solve all your problems overnight.</p>
+<p><strong>Please focus on the problem first, scrutinize the use cases, and Reactive shall reveal itself a solution.</strong></p>
+<p>I hope you've enjoyed this series is now approaching its end. This series is far from the perfect learning resource, but I hope that my perspective and way of explaining things fit some of you, complementing your learnings in a way. To close, I'll leave you with a <a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">list of fantastic learning resources for reactive programming and RxJS</a>.</p>
+<p><br /></p>
+<ul>
+<li><a href="https://danielcaldas.github.io/posts/why-reactive-programming" target="_blank" title="Why You Should Consider Reactive Programming | danielcaldas.github.io">Part 1 - Why You Should Consider Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Part 2 - Fundamentals of Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">Part 3 - Hands-on Reactive Programming with RxJS</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
+</ul>
+Reactive Serieshttps://danielcaldas.github.io/posts/reactive-series-preface/https://danielcaldas.github.io/posts/reactive-series-preface/A series of articles on Reactive Programming and RxJSWed, 22 Jul 2020 00:00:00 GMT<p>Over the past two years, I invested some time learning <a href="https://en.wikipedia.org/wiki/Reactive_programming" target="_blank" title="Reactive programming - Wikipedia">Reactive Programming</a> (with <a href="https://rxjs-dev.firebaseapp.com/" target="_blank" title="RxJS">RxJS</a>) and
working with Observables and Streams to build interactive UIs. The opportunity to learn RxJS never popped up until the company I
was working with started investing heavily in RxJS. I had to learn at the job.</p>
<p><strong>I'm announcing a series of articles</strong> that I'm writing on Reactive Programming. I want to demonstrate to you <strong>why you should consider
@@ -2798,7 +4235,7 @@ title="GitHub, Daniel Caldas, test-fixtures-pattern case study project,
<h4>๐ฐ Bonus section: development watch mode for fixtures</h4>
<p>Another thing that comes in handy when setting up our testing workflow, is to have a way to update the fixtures by tweaking existing test case inputs or adding new ones and automatically re-running the <code>run-fixtures.js</code> script and the unit tests with Jest. How would that go?</p>
<p>If you never tried <a href="https://github.com/remy/nodemon" target="_blank" title="Monitor for any changes in your node.js application and automatically restart the server - perfect for development">nodemon</a>, now it's a good time to check it out. It's a mighty tool to restart some job based on specific changes in your project. Let's use nodemon to set up a <a href="https://docs.npmjs.com/misc/scripts" target="_blank" title="npm cli documentation about scripts field">npm script</a> that seamlessly re-runs our fixtures. The idea is that we achieve the same workflow that we would normally have with <a href="https://jestjs.io/docs/en/cli#watchall" target="_blank" title="Jest cli, watch all option">jest --watchAll</a>, on our fixtures folder. After installing nodemon, we just need to use the <a href="https://github.com/remy/nodemon#monitoring-multiple-directories" target="_blank" title="Monitor for any changes in your node.js application and automatically restart the server - perfect for development, watch mode">--watch</a> option to check for changes in our fixtures.</p>
-<pre><code class="language-json:package.json">"fixtures:run": "node run-fixtures && jest ./fixtures/tests/fixtures.spec.js",
+<pre><code class="language-json">"fixtures:run": "node run-fixtures && jest ./fixtures/tests/fixtures.spec.js",
"fixtures:clean": "...",
"fixtures:watch": "nodemon --watch ./fixtures --ignore ./fixtures/tests --exec \"npm run fixtures:run\""
</code></pre>
@@ -3027,44 +4464,11 @@ complexity seems to be one of the main barriers to its adoption. Reactive <st
things that in other times you would think of impossible or had to implement become so much easier.</p>
<p>If you feel like taking a shot at Reactive Programming, I'll gladly guide you through it!</p>
<p><br /></p>
-<hr>
<ul>
<li><strong>Part 1 - Why You Should Consider Reactive Programming</strong></li>
-<li><a
-href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals"
-target="_blank"
-title="Fundamentals of Reactive Programming | danielcaldas.github.io"
-<blockquote>
-<p>Part 2 - Fundamentals of Reactive Programming
-</a></p>
-</blockquote>
-</li>
-<li><a
-href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs"
-target="_blank"
-title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io"
-<blockquote>
-<p>Part 3 - Hands-on Reactive Programming with RxJS
-</a></p>
-</blockquote>
-</li>
-<li><a
-href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons"
-target="_blank"
-title="Reactive Programming: The Good and the Bad | danielcaldas.github.io"
-<blockquote>
-<p>Part 4 - Reactive Programming: The Good and the Bad
-</a></p>
-</blockquote>
-</li>
-<li><a
-href="https://danielcaldas.github.io/posts/awesome-reactive"
-target="_blank"
-title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io"
-<blockquote>
-<p>Part 5 - Awesome RxJS and Reactive Programming Resources
-</a></p>
-</blockquote>
-</li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-programming-fundamentals" target="_blank" title="Fundamentals of Reactive Programming | danielcaldas.github.io">Part 2 - Fundamentals of Reactive Programming</a></li>
+<li><a href="https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs" target="_blank" title="Hands-on Reactive Programming with RxJS | danielcaldas.github.io">Part 3 - Hands-on Reactive Programming with RxJS</a></li>
+<li><a href="https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons" target="_blank" title="Reactive Programming: The Good and the Bad | danielcaldas.github.io">Part 4 - Reactive Programming: The Good and the Bad</a></li>
+<li><a href="https://danielcaldas.github.io/posts/awesome-reactive" target="_blank" title="Awesome RxJS and Reactive Programming Resources | danielcaldas.github.io">Part 5 - Awesome RxJS and Reactive Programming Resources</a></li>
</ul>
\ No newline at end of file
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/sitemap-0.xml b/sitemap-0.xml
index 9305d23..3966b17 100644
--- a/sitemap-0.xml
+++ b/sitemap-0.xml
@@ -1 +1 @@
-https://danielcaldas.github.io/https://danielcaldas.github.io/about/https://danielcaldas.github.io/bookshelf/https://danielcaldas.github.io/bookshelf/example/https://danielcaldas.github.io/categories/tech/https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/awesome-reactive/https://danielcaldas.github.io/posts/best-http-request-mock-tool/https://danielcaldas.github.io/posts/better-imports-webpack-alias/https://danielcaldas.github.io/posts/browser-polyfill-madness-mozilla-internet-explorer/https://danielcaldas.github.io/posts/call-react-hooks-inside-conditions/https://danielcaldas.github.io/posts/debugging-javascript-with-vscode/https://danielcaldas.github.io/posts/developers-bad-at-testing-own-code/https://danielcaldas.github.io/posts/functional-bits-tips/https://danielcaldas.github.io/posts/how-to-fix-github-password-authentication/https://danielcaldas.github.io/posts/how-to-svelte-rxjs/https://danielcaldas.github.io/posts/my-two-cents-on-tech-job-interviews/https://danielcaldas.github.io/posts/open-source-dilemma/https://danielcaldas.github.io/posts/reactive-series-preface/https://danielcaldas.github.io/posts/sli-slo-sla/https://danielcaldas.github.io/posts/tips-end-to-end-testing-puppeteer/https://danielcaldas.github.io/posts/tips-jest-unit-testing/https://danielcaldas.github.io/posts/unit-testing-with-fixtures-unleashed/https://danielcaldas.github.io/posts/web-compatible-developers/https://danielcaldas.github.io/posts/why-reactive-programming/https://danielcaldas.github.io/tags/berlin/https://danielcaldas.github.io/tags/conference/https://danielcaldas.github.io/tags/css/https://danielcaldas.github.io/tags/functional-programming/https://danielcaldas.github.io/tags/javascript/https://danielcaldas.github.io/tags/job-market/https://danielcaldas.github.io/tags/open-source/https://danielcaldas.github.io/tags/opinion/https://danielcaldas.github.io/tags/ops/https://danielcaldas.github.io/tags/productivity/https://danielcaldas.github.io/tags/react/https://danielcaldas.github.io/tags/reactive-programming/https://danielcaldas.github.io/tags/software-testing/https://danielcaldas.github.io/tags/softwaretesting/https://danielcaldas.github.io/tags/svelte/https://danielcaldas.github.io/tags/vscode/https://danielcaldas.github.io/tags/webpack/
\ No newline at end of file
+https://danielcaldas.github.io/https://danielcaldas.github.io/bookshelf/https://danielcaldas.github.io/bookshelf/example/https://danielcaldas.github.io/posts/about-css-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/about-js-conf-eu-berlin-2018/https://danielcaldas.github.io/posts/awesome-reactive/https://danielcaldas.github.io/posts/best-http-request-mock-tool/https://danielcaldas.github.io/posts/better-imports-webpack-alias/https://danielcaldas.github.io/posts/browser-polyfill-madness-mozilla-internet-explorer/https://danielcaldas.github.io/posts/call-react-hooks-inside-conditions/https://danielcaldas.github.io/posts/debugging-javascript-with-vscode/https://danielcaldas.github.io/posts/destructuring-the-not-so-good-parts/https://danielcaldas.github.io/posts/developers-bad-at-testing-own-code/https://danielcaldas.github.io/posts/functional-bits-tips/https://danielcaldas.github.io/posts/guide-to-custom-react-hooks-with-mutationobserver/https://danielcaldas.github.io/posts/hands-on-reactive-programming-rxjs/https://danielcaldas.github.io/posts/hidden-potential-webpack-define-plugin/https://danielcaldas.github.io/posts/how-to-copy-file-android/https://danielcaldas.github.io/posts/how-to-fix-github-password-authentication/https://danielcaldas.github.io/posts/how-to-svelte-rxjs/https://danielcaldas.github.io/posts/my-two-cents-on-tech-job-interviews/https://danielcaldas.github.io/posts/open-source-dilemma/https://danielcaldas.github.io/posts/please-help-deleted-my-git-stash/https://danielcaldas.github.io/posts/presenting-babel-plugin-cloudinary/https://danielcaldas.github.io/posts/reactive-programming-fundamentals/https://danielcaldas.github.io/posts/reactive-rxjs-pros-cons/https://danielcaldas.github.io/posts/reactive-series-preface/https://danielcaldas.github.io/posts/sli-slo-sla/https://danielcaldas.github.io/posts/tips-end-to-end-testing-puppeteer/https://danielcaldas.github.io/posts/tips-jest-unit-testing/https://danielcaldas.github.io/posts/unit-testing-with-fixtures-unleashed/https://danielcaldas.github.io/posts/web-compatible-developers/https://danielcaldas.github.io/posts/why-reactive-programming/https://danielcaldas.github.io/projects/https://danielcaldas.github.io/tags/berlin/https://danielcaldas.github.io/tags/conference/https://danielcaldas.github.io/tags/css/https://danielcaldas.github.io/tags/functional-programming/https://danielcaldas.github.io/tags/javascript/https://danielcaldas.github.io/tags/job-market/https://danielcaldas.github.io/tags/open-source/https://danielcaldas.github.io/tags/opinion/https://danielcaldas.github.io/tags/ops/https://danielcaldas.github.io/tags/productivity/https://danielcaldas.github.io/tags/react/https://danielcaldas.github.io/tags/reactive-programming/https://danielcaldas.github.io/tags/software-testing/https://danielcaldas.github.io/tags/svelte/https://danielcaldas.github.io/tags/vscode/https://danielcaldas.github.io/tags/webpack/
\ No newline at end of file
diff --git a/tags/berlin/index.html b/tags/berlin/index.html
index 16ce686..fcfa751 100644
--- a/tags/berlin/index.html
+++ b/tags/berlin/index.html
@@ -1,4 +1,4 @@
- posts - Hey ๐
+ posts - ~/
@@ -32,8 +32,8 @@
}
setup()
-
