Posts

Showing posts with the label Frontend

How to inspect CSS of elements which disappear when focus is lost using Chrome DevTools

Image
You want to inspect the CSS of elements that get removed when they lost focus and you got stuck. I had the same problem and it is annoying. There is a easy solution for this. Open Inspector in Chrome Press "Ctrl + Shift + P" Type: "Show Rendering" Activate "Emulate a focused page option" And there you go..

What is the difference between Cold and Hot Observables

🔥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...

Basic React Hooks explained

Image
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> ...