DEV Community: Hieu

How to inspect the tooltips

Hieu — Sun, 25 Oct 2020 08:38:25 +0000

There are some cases when we suffering the web and see something with interesting style, amazing animation, you’re curious and want to know to how the web’s author implement that, especially if you’re a web designer. So the easiest way to answer that question is using inspect tool to inspect that element. But the problem is whenever we run inspect element tool, the style we want to inspect is disappear immediately regardless of how much effort. For example: tooltips, popups or something happen very quickly.

The example below show you how difficult to inspect tooltip content element that will disappear very quickly

To make our life become easier, in this blog I gonna show you 2 ways how to force the web stop immediately in order to use inspect element tool to inspect something only visible in a short period of time. Both of them base on the idea that we put a break point and force the website run into that breakpoint, by doing that we can force it stop their behavior and we can do everything wen want

The first way is using Event Listener Breakpoint

To use Event listener breakpoint, we just simple open chrome developer tool (by pressing F12), navigate to “Sources” tab, expand “Event Listener Breakpoints” and check “contextmenu” under “Mouse” event.

By doing this, we force the application jump right to the breakpoint whenever we trigger a right click event, stop their functionalities and let’s us do whatever we want while the application is in “sleep mode”. The reason we choose context menu rather than other events due to it’s rarely used, so we can make sure our breakpoint event can easily trigger and unique

But this way also have one drawback that it need one trigger to force stop the application which is not suitable in some case. SO to overcome that problem we need to find another way that can force application jump to breakpoint automatically, without require any more event trigger. This lead us to the second solution is setTimeout

We also can use setTimeout to make the breakpoint

Yes you don’t see wrong, setTimeout can be able to used to put the breakpoint. setTimeout is very handy in some cases it’s impossible to trigger another event to put the breakpoint due to website’s behavior. Let’s me show you how to do that

Firstly, open chrome developer tool, navigate to console tab and execute this line of code



setTimeout(()=>{
    console.log("Stop");
},5000)
```

After executing that code, wait 5 more seconds to see a log message. when a log message is printed out, we click on the debugger at the rightsize to open the code that print the message. It will bring us to the source tab and show on the setTimeout code we have just executed. Put the breakpoint at line 2.

And now whenever we want to inspect something, just return that piece of code, make sure the element we want to inspect on the view, wait 5 seconds and the application will automatically run in sleep mode without require trigger any extra event

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2f05gg65rhg1tf5tt6yl.gif)
#Final word

Hope that 2 ways above I have just show you will be on your toolbox kit. When we want to inspect something in the view which only visible on the view in very short period of time or simply when we want to stop the application, at least we know more way to do that.

Cheating 10fastfingers

Hieu — Sat, 03 Aug 2019 04:00:58 +0000

10fastfingers.com is an awesome application let you play typing game with your friends. Nothing is funnier than beating your friends by your extremely fast typing. But if you can't type fast, a little cheating is harmless. Moreover, learning the new thing while you make a cheat is a wonderful way to learn new knowledge. Now let start

Trying out 10fastfingers.com

At the first step, we must access 10fastfingers.com and play around with it. The rule of this game is very simple, we have to type as fast and correct as possible to defeat your friends. Who has the highest score will win the game. If you’re like me can’t type fast, we need a little cheat here. Why don’t let the computer type for us? Who can defeat the speed of the computer?

To cheat that game, we need 2 essential things: how to get or retrieve the text for typing and how to send that text to the input field

Retrieve the text for typing

By using our best friend “Developer tool”, we can inspect the element which is highlighted for the current word like

We can easily detect that the text “children” which we want to retrieve is put inside a div element with a class name highlight. To get that value, just easily write



let text = document.querySelector(".highlight").textContent;

try to run this in console window:

We have finished retrieving the word job. Now move on to step 2

Sending the text to the input field

Besides sending the retrieved text to input, we also need to fire and InputEvent in order to let the system to recognize the text and continue with the following texts. Simply like this



let text = document.querySelector(".highlight").textContent + " ";
document.querySelector("input").value = text;
var inputEvent = new InputEvent("input");
document.querySelector("input").dispatchEvent(inputEvent);

Try to run this block of code in the console window to see. If you’re lucky, you will get the error message instead of the input is auto-filled.

Why does this happen? Because you’re unlucky. I’m just kidding :), the problem is because we’re trying to access the highlight and input element which is not the same frame we run the code. Our code at the moment running at “top” frame, but highlight and input are rendered under other frame named 10ff.net. To fix this problem just simply select 10ff.net as a context in the console window and try one more time

Yeah, it works. But how can we defeat other people with we need to paste the code and enter so many times, this process is even slower than your typing, we need to make this code run continuously.

Run the code continuously

Beside run the code continuously, we also need to wait a few moments between each turn to let the system render the next word for us. We can use setTimeout at different time. Something like this:



var i = 0;
while (i < 100) {
    i++;
    setTimeout(() => {
        let text = document.querySelector(".highlight").textContent + " ";
        document.querySelector("input").value = text
        var inputEvent = new InputEvent("input");
        document.querySelector("input").dispatchEvent(inputEvent)
    }, i * 100) //Each turn is 100 miliseconds apart 
}

We won !! But we still have a problem that we set the number of turns we want to run the code at the beginning, in this case, we set 100 times. In the beginning, we create 100 timeout functions, which is 100 milliseconds apart this way works well. However it’s not good enough because in some cases, the number of words is different from 100, so our code may don’t run enough time or run more times than we need. So we need to determine exactly the number of the turn we want to run during the execution time rather than in the beginning time. How can we do that? promises our answer. The promise in javascript give 2 possibilities to run the next turn: resolve lets us run the next turn or reject lets us break the loop. Let's convert our code to using Promise



var run = () => new Promise((resolve, reject) => {
    if (!document.querySelector(".highlight")) {
        console.log("stop")
        reject("stop")
    }
    let text = document.querySelector(".highlight").textContent + " ";
    document.querySelector("input").value = text
    var inputEvent = new InputEvent("input");
    document.querySelector("input").dispatchEvent(inputEvent)
    setTimeout(() => resolve("next"), 10)
})
while (true) {
    try {
        await run();
    } catch (e) {
        console.error("stop");
        break;
    }
}

Enjoy your champion!

Wrap up

In this tutorial, we have just learned the way to inspect element, retrieve the data as well as the way to trigger an input event to simulate the user action. Moreover, we also learned how to create a loop which has the gap between each turn by using Promise comes with await. For deeper learning about Promise, you can visit Promise and Await and async. Please take your time to do this cheating by yourself and learn the new thing. See you soon in the next post

CSS Display property

Hieu — Sat, 15 Jun 2019 08:48:38 +0000

In this post, we have talked about the most important css property: positon. Besides that, it’ll be a big mistake if we forget to mention about 1 more css property which is also very important in our frontend development, that is css display. Let’s come with me and talk about it

What is the purpose of css display

CSS display will define how your HTML element takes place in the view. You want your element takes the full width of the parent element, or adapt the width of the content inside, or even with custom size for your element, CSS display all you want to use in that scenarios.

What are the available value for css display

There are many available values come up with css display such as: block, inline, inline-block, flex, table ....In this post, we are going to mainly focus on 3 most important values: block, inline and inline-block.

What is `display: block`

With css display:block will make your element take the full width of the parent element doesn’t matter how wide the content inside. It’s usually used when we want to make our element stand alone, no other element sit next to the right or next to the left of it. In consequence, this css will make our element more distinguishable from others as well as more noticeable. For that reason, display:block is the default value for the following element:

<div> <h1> – <h6> <p> <form> <header> <footer> <section>
Example

As you can see in the above sample. Every block element is displayed under the previous sibling element, not on the left, not on the right, only on the bottom.

One interesting thing here is the div element. Even it’s defined with a custom width (not full parent width), it’s still displayed in the whole line, because the browser will add margin for block element if it comes up with the custom size css to make sure no one can sit in the same line with block element.

Keep in mind that with block elements, css margin-right has no effect. Except that, we’re free to custom the size block element by css width, height, margin-top, margin-bottom and margin-left.

What should we do if we want to multiple elements sit in the same line? These scenarios, we will use display:inline.

What is `display: inline`

Unlike display:block makes one element stand alone in the whole line, display:inline make us able to put multiple elements in the same line.

display:block is the default value for the following element:

<span> <a> <img>

However, display:inline will ignore our custom size (by css width, height and margin). Inline elements always fit the size of the content inside, no more no less. Simply, you can’t change the size of the inline element except changing the size of the content inside. Only use display:inline only when you’re sure that you want that element fit the content size and no custom size at all.

What about if we want to put multiple elements in the same line with our own custom size? display:inline-block comes to our hand

What is `display: inline-block`

display:inline-block is the combination of display:inline(can put multiple elements in the same line)and display:block(can change the size of element by css width, height, margin).

Firstly, we can put multiple inline-block elements in the same line. Next, we can custom the size for every single element to make it matches our need. We can define the width, the height, margin for those elements freely.

Wrap up

Alongside with CSS position, display in one of the most important CSS property help us to develop attractive web applications. The only way to master css display we need to understand how it works and how to use it properly.
Hope you learned something and see you in the next post. Don’t forget to put your comment below

You can also visit my blog to read more interesting topics: https://frontend.cloudaccess.host/css-display-property/

Dark theme with CSS variable

Hieu — Wed, 12 Jun 2019 15:21:05 +0000

Nowadays, more and more applications and OS are going to adapt to the new trend: dark theme and web applications are not exceptions. Dark theme is not the necessary feature for the web application but it's nice to have. Giving your users more choice base on their preference always help your application more attractive. Today I gonna show you some way to apply the dark theme in your application.

Solution 1: Use css nested

Let imagine that your current web application only supports the light theme, and now you want to add a new feature that allows users to change the application's theme in runtime. So the easiest way to we defined a new class for dark theme, apply that class to the root element (<html> or <body>). Because the application's theme must be consistent for the whole application so to make sure every element of our application follow the selected theme, we must set that class to root element.

After we have a class for the dark theme, we will jump to customize the look & feel for every child inside. 2 most important CSS properties we need bear in mind is colorand background-color. Beside that, we also need to take care of other CSS properties as well depend on your application's implementation.

Something like this

/* Default css for light theme */
body {
  background-color: white;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: lightblue;
}
label{
  color:#0d47a1;
}
/* Custom css for dark theme */
[data-theme=dark-theme] {
  background-color:gray ;
}
[data-theme=dark-theme] .panel {
  background-color: darkgray;
}
[data-theme=dark-theme] label {
  color: rgb(245,245,245);
}

Live demo

This way works perfectly however, it still has one big drawback is we need to duplicate CSS code for every component we want to customize between light theme and dark theme. In the above sample, you can see that we need to redefined CSS for label and panel twice, even worse we also need to repeat [data-theme=dark-theme] many times. To get rid of this disadvantage, I want to introduce you another approach to apply dark theme is using css variable.

Solution 2: CSS variable

The idea behind this solution is we will define some CSS values as a variable, and we define every element will reuse CSS variable instead of defined the new one. It means the value of that variable is flexible during runtime. By this way, we only need to defined customize CSS once (these CSS properties should depend on CSS variable), besides that we also need to define 2 sets of variables: one for dark theme and one for the light theme. This way is much simpler than the solution 1 with nested CSS.

Let take a look on the CSS variable version of above example:

/* Default css for light theme */
body {
  --backgroundColor: white;
  --panelBackgroundColor: lightblue;
  --labelColor: #0d47a1;
}
body[data-theme="dark-theme"] {
  --backgroundColor: gray;
  --panelBackgroundColor: darkgray;
  --labelColor: rgb(245, 245, 245);
}
body {
  background-color: var(--backgroundColor);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all linear 1s;
}
.panel {
  background-color: var(--panelBackgroundColor);
}
label {
  color: var(--labelColor);
}

Live demo:

Live demo

Final words

Hope that you learned something about CSS variable and willing to apply it in your next project, not only for theme changing but also for flexible web application. Let let us know your feeling in the comment section below and see you in the next post.

You can also visit my blog to read more interesting topics: https://frontend.cloudaccess.host/dark-theme-with-css-variable/

DEV Community: Hieu

How to inspect the tooltips

The first way is using Event Listener Breakpoint

We also can use setTimeout to make the breakpoint

Cheating 10fastfingers

Trying out 10fastfingers.com

Retrieve the text for typing

Sending the text to the input field

Run the code continuously

Wrap up

CSS Display property

What is the purpose of css display

What are the available value for css display

What is display: block

What is display: inline

What is display: inline-block

Wrap up

Dark theme with CSS variable

Solution 1: Use css nested

Solution 2: CSS variable

Final words

What is `display: block`

What is `display: inline`

What is `display: inline-block`