Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Mobile Usability – Custom Scrollbars

On mobile devices, Usability is everything.
Because of this, standard elements are often designed broader and larger.

Example of a 30px wide and 100px thumb custom scrollbar:

/*A custom scrollbar is configurable. 
Here, it is broader than the standard.
This way, it is easier to use on touchscreen 
or other small or mobile devices.*/

/* width */
::-webkit-scrollbar {
    width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    height: 100px!important;
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/*end custom scrollbar*/

React – Howto redirect to other component

Sometimes, for example on a login, you want to redirect the User to another page in your application.

We assume that your Application has the default address of http://localhost:3000.

In this example, the application has the path localhost:3000 and you can navigate to the news with /news.

import {Redirect} from "react-router-dom";
//... your program code goes here...

return(
   <Redirect to='news'/>
);

The return statement will redirect to localhost:3000/news