HowTo – responsive font size with CSS

Example of responsive font size where 30px is the minimum size with the smallest viewport width of 300px and where 70px is the maximum size at the largest viewport width of 1800px.

What does ‚responsive‘ mean?.
The content will adapt to the window size. It will become larger when the window becomes larger to an extent where the maximum font-size definition is reached.
Or vice versa, it will shrink the content when the window size becomes smaller.

Your CSS file will contain:

/* Example of responsive font size where 30px is the minimum size with the smallest viewport width of 300px
and where 70px is the maximum size at the largest viewport width of 1800px: */
font-size: calc(30px + (70 - 30) * ((100vw - 300px) / (1800 - 300)));

Why not simply use „vh“ or „vw“?

font-size: 10vh;

The vh will not relate to the window size in relation. It will only take either width OR height as indication and thus mess up.
To maintain the relation, use the formula as described above.

How to fill display with CSS – determine display size

Usually, when using percentage values, CSS will always refer to the parent container (DIV).

If you want to set the size according to the overall display, the area in which the client and browser displays your content, use vh.

An example CSS class:

.myCssClass {
height: 100vh /*vh resolves to the display size, not the parent container size. It will now fill the screen 100%*/
}

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

React Hook Lifecycle – control WHEN functions are executed

By defining the dependencies in your #useEffect method, you can control the execution of methods and the rendering.

Execute only once when component is first rendered
By passing an empty array for a #useEffect method, you guarantee that the method is only executed once:

useEffect(() => {
     //do something....
}, [])

Now it behaves like #componentDidMount in the old React class architecture.

Execute after every render cycle
If no array is passed to #useEffect, the method will be executed AFTER EVERY render cycle:

useEffect(() => {
     //do something...
})//no array here

Execute only if some value has changed
If #useEffect shall only be executed when a certain variable has changed, do:

useEffect(() => {
     //do something...
   ...myValue...
}, [myValue])//myValue defined in the array

Helper functions in JavaScript / JS – use lodash

For instance in my JS Applications I do often need some helper functions, like I know them from Java, like #equals etc..

lodash provide an elegant suite of helper tools.
For instance in my React App, I do

import _ from "lodash";

And I can use their functions, like in this example:

if (_.isEmpty(this.myFooAttribute)) {...

Of course you need lodash as a dependency.
In your package.json do:

 "dependencies": {
     ...
    //version is an example. I always try to use the latest.
    "lodash": "^4.17.15",