React Hook Component Conditional Rendering

The HTML is rerendered after click and displays the chosen content.

We use a stateful variable.

The stateful variable (here, a boolean) is called ‚condition‘ 😉 :

const [condition, setCondition] = useState(false);

The #useEffect method to react on variable state change:

useEffect(() => {
    ...
},[condition]);

The methods for the buttons:

const handleClickSomething01 = () => setCondition(true);
const handleClickSomething02 = () => setCondition(false);

The returned HTML:

if (condition === true) {
    return (
        <div>
            <Button variant="contained" 
                    color="primary" 
                    onClick={handleClickSomething02}>
                Primary
            </Button>
            <Button variant="contained" 
                    color="secondary" 
                    onClick={handleClickSomething01}>
                Secondary
            </Button>CONDITION fullfilled
        </div>
    );
} else {
    return (
        <div>
            <Button variant="contained" 
                    color="primary" 
                    onClick={handleClickSomething02}>
                Primary
            </Button>
            <Button variant="contained" 
                    color="secondary" 
                    onClick={handleClickSomething01}>
                Secondary
            </Button>CONDITION not fulfilled
        </div>
    );
}

You will notice that this example uses duplicated code (sort of, a few details differ).
Why did I do this?
I have debugged so many unmaintainable Frontends during the last two decades and nearly always the obstacles where too many detailed conditions in the HTML.

Instead, by using IF/ELSE and clearly depict the HTML without conditional renderings within, the Code will be easier to maintain in the long run.

Of course, this is my personal experience and also a matter of Clean Code paradigms.
In some cases, am using inline conditions, inside the HTML lines, too. But as we Architects like to say: IT DEPENDS 😉




Chrome – add insecure origins as secure

  1. Navigate to `chrome://flags/#unsafely-treat-insecure-origin-as-secure` in Chrome.
  2. Find and enable the `Insecure origins treated as secure` section (see below).
  3. Add any addresses you want to ignore the secure origin policy for. Remember to include the port number too (if required).
  4. Save and restart Chrome.

React – use CSS depending on states (change class according to a variable’s state)

For this example I use React Hooks and a Component with a stateful variable.
When the variable is changed, the CSS class is changed accordingly.
The part in the component is automatically re-rendered on the fly.

//The variable is called 'active'. 
//This is an example. Choose any name.
const [active, setActive] = useState(0);

We use the constant #getStyle to return a CSS class name based on the variable.

    const getStyle = (input) => {
        if (input === active){
            // This example is freely chosen. 
            //button-active is the CSS class' name
            return "button-active";
        } else {
            return "button-inactive";
        }
    };

The return statement returns rendered HTML.

//The hard coded value 0 can be any dynamic 
//variable from JS or React, like one from the 
//props (Properties) object
return (
  <div className={getStyle(0)}>
  </div>
);
  • Stateful variable called ‚active‘
  • Const named #getStyle with an input parameter
  • render method returning HTML with a css class name
  • Input is provided to the #getStyle const
  • If the variable ‚active‘ is changed by the application somewhere, the HTML is re-rendered
  • The input is compared to the variable and the name of the CSS class returned

CSS Grid Layout Example – Visible Structure – Easy Tutorial

4 Items, stretched with different sizes across a Matrix 4×4 grid.

You can see the Grid structure in the CSS in this example.

Picture:

CSS:

.item-a {
    grid-area: itemA;
    border: 1px solid violet;
}
.item-b {
    grid-area: itemB;
    border: solid 1px cyan;
}
.item-c {
    grid-area: itemC;
    border: solid 1px yellow;
}
.item-d {
    grid-area: itemD;
    border: solid 1px red;
}

.container {
    height: 100%;
    border: solid 1px green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
            "itemA itemA itemC itemC"
            "itemA itemA itemC itemC"
            "itemA itemA itemD itemD"
            "itemA itemA itemD itemD";

HTML (in this example a React JS Grid):

return (
        <Grid className={"container"}>
            <Grid item className={"item-a"}></Grid>
            <Grid item className={"item-b"}></Grid>
            <Grid item className={"item-c"}></Grid>
            <Grid item className={"item-d"}></Grid>
        </Grid>
    );

React – stateful variables and objects (State) & Hooks & Components

Imagine you want to re-render a Component when a variable changes its state.

Your Component:

function MyComponent(props) {

Your variable, a name:

const [name, setName] = useState("OLD NAME");

A #useEffect method to react to changes of that specific variable:

useEffect(()=>{
    alert('new name!');//a small alert to show you the effect immediately
    setName('NEW NAME');
}, [name]);

…and a return with that name being rendered:

return (
    <div className={"someFancyCssClass"}>{name}</div>            
);

Note that, in this example, the initial OLD NAME is immediately replaced.
Reason for it: we set the name during initialization in the const.

Multiple Webapps with Docker Compose

  • Learn how to setup a custom network for your containers: container A talks to container B
  • Learn how to run multiple webapps inside Docker containers on different ports with Docker Compose

Download complete source code here

  • Create the network with $docker network create skynet
  • Run with $docker-compose up
  • Stop with $<Ctrl + C>
  • Clean up from time to time (beware, network will be deleted as well) with $docker system prune -a -f
  • access via http://localhost:8080/sample
  • access via http://localhost:8081/sample

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%*/
}