The Barbarian Developer

RxJs has lots of custom operators but there was recently a problem I could not solve with them. The Problem I have a page with a back button. Within the page you can change settings, which e.g. updates something in a database using a REST API. The page has no save button, so every change is saved instantly. The problem is now that I have to ensure that the API calls are finished before I route to another page. So when the user changes a setting and clicks the back button, I have to block the routing until the api calls returned successfully. So imagine the user is changing multiple settings very quickly and the API call is slow: He ticks a checkbox => Call the API He changes an address => Call the API He unticks again => Call the API He clicks on the back button Wait until the settings are saved Route to the back page So I need an operator which does not emit when there are "next" operations in the queue. I don't need all operations to be executed as each operati...

🔥vs🥶 🔥 Allegory HOT Image you are watching the news on TV but you've started watching in the middle of the show. You don't know what was reported before and you will not know what happened if you do not watch the show from the beginning. If someone else has started watching the news after you, he will not have all the information you have, only from the point onwards where he started watching. The news broadcast on TV is HOT 🔥.  This means there is one source which emits information and you can subscribe to it. But you will only get the information from the time you've subscribed. 🥶 Allegory COLD Imagine you want to create a bank account. You go to the bank and they will tell you: Bring your ID Fill in the form Sign it Login to you mobile app etc. The next person who wants to create an account will get probably the same information in the same order. Creating a bank account is COLD 🥶 This means that each time you want to get the information from the source, the source...

useState - Godfather of the hooks useState is probably the most used and common hook. It is the simplest way to have a state in a functional component. SYNTAX const [value, setValue] = useState(initialValue) useState returns an array first item is the value of the state second item is a method to set the state const [value, setValue] = useState(initialValue) WHAT HAPPENS WHEN YOU SET IT? When you use the "setValue" function to set the value of the state variables, the component gets re-rendered.  You should set values in event handlers or within other hooks like useEffect, because the change triggers a rerendering. Re-rendering should be only done when the rendering of the component is finished. function SomeDumpComponent() { const [text, setText] = useState('') setText('A new text'); // here the rendering of the component is not finished. // The code below for rendering is not executed. // This can cause side-effects. return(<h1>{ t...

When you use a merge tool for Git and you have conflicts you often see these three versions of a file. This is called the three-way-merge. BASE LOCAL REMOTE So what are these files exactly? Imagine you have a branch. While you're working on the code, someone else has already changed the code in the main branch. Now you'll have a conflict if you merge your code into the main branch. The picture above emphasizes the points that are involved into the merge. GREEN : The common anchestor of the change. This is the BASE. RED : Your changes to the code. This is the REMOTE. ORANGE : The code change of someone else. This is the LOCAL. BLUE : The end result file after the merge. Here a more detailed illustration: Sometimes you will fallback to a two-way merge e.g. in cases where you or the other part deleted a file. Some tools refer them as "ours" or "theirs" ours => LOCAL theirs => REMOTE CONFISUNG NAMES? I personally find the naming confusing because why the h...

The Problem Nunjucks was developed synchronous. The architecture behind is synchronous. So if you use nunjucks everything is fine until you hit an asynchronous problem. One easy example is: You want to have a method to download a data as json from a server That is easy to solve, normally. You download the data before creating the nunjucks context and pass the data to nunjucks after download. The problem arises when you don't know the source of the data in front. An example: {% set dataSource = userSelection %} {% set data = loadData('https://mydomain/sources/' + dataSource + '.json') %} The userSelection is e.g. a value from a dropdown on an html page. This can have multiple values. Now you have to download the data while rendering the nunjucks template, because you don't know the value of the "dataSource" variable upfront. Nunjucks Filters Nunjucks Filters are making the language more flexibel. Filters are nothing else then a function. In Nunju...

What are React Hooks? The preferred way to create components in React nowadays are functional components. React Component often have an inner state. They show an image or a text or other UI elements depending on user actions. User actions like clicking a button can change the inner state of a component. In the early days using "evil" 🙃 class components it was easy to hold the state within the component. You had a "state" class property and a "setState" class method to change the state. import React,{Component} from 'react'; class App extends Component { constructor(){ super() // Here I set sth. in my state this.state={ text : 'Welcome to Barbarian Developer' } } private sayGoodbye(){ // here I modify my component state this.setState({ text:'Bye Bye Earthling' }) } render() { return ( <div> <h1>{this.state.text}</h1> ...