Forem: Yasser Beyer

Javascript, the duct tape that holds the frontend together

Yasser Beyer — Thu, 27 Jan 2022 17:47:56 +0000

Javascript, the duct tape that holds the frontend together?

I say, no!

JavaScript is not just a duck tape that binds the front end haphazardly. Javascript is taking over the world and beyond.
JavaScript is even used to support a modern touchscreen-based UI for the Space-X Dragon spacecraft.

JavaScript is like gravity - a force that keeps the Universe in a certain order.

React Functional Hooks Components > Stateful Class Components

Yasser Beyer — Tue, 22 Oct 2019 18:05:41 +0000

With a quick glance at the examples below, it's immediately clear that with hooks:

managing state is simplified
there is no more dealing with "this"
code is much shorter
life is much better

Stateful Class Component

import React, { Component } from "react";

class ClickCount extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.clickHandler}>Click me</button>
      </div>
    );
  }
}

Functional Component with Hooks

import React, { useState } from "react";

function ClickCount() {
  const [count, setCount] = useState(0);

  function clickHandler() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={clickHandler}>Click me</button>
    </div>
  );
}

Hooks was introduced with the release of React 16.8. Follow this link to learn more about React Hooks.

Sticky Footer with Flexbox

Yasser Beyer — Wed, 18 Sep 2019 19:27:03 +0000

Flexbox is a method of positioning elements in horizontal or vertical stacks and in my experience, the best method to keep a footer at the bottom of a page.

<body>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

To keep a footer stuck to the bottom of the page or the viewable window using Flexbox, you will need to:

Set the footer's parent element's CSS display value to flex and flex-direction value to column.
```
body {
  display: flex;
  flex-direction: column;
}
```
display: flex; makes the <body> element a flexible box layout module and enables a flex context for all its direct children.

flex-direction: column; stacks all the children elements in a vertical top-to-bottom position.
Set the footer's sibling expandable element's CSS flex value to:
- 1 - to stick the footer to the bottom of the viewable screen
- 1 0 auto - to stick the footer to the bottom of the page
```
main {
  flex: 1 0 auto;
}
```
flex: 1; defines the ability of the element to grow if necessary. If there is available space inside the flex container, the item should take it up. This then pushes the <footer> down and stuck to the bottom.

Common Gotchas:

Main content element does not expand to occupy all available space.
- applying min-height: auto; to the <main> element will fix this.
- Also, make sure that the body element's height is set to 100%.

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  flex: 1 0 auto;
  min-height: auto;
}

If you are new to flexbox and would like to learn more and understand how it works, this comprehensive guide to CSS flexbox layout explains everything about the method.