DEV Community: Eelco Verbrugge

Achieving WCAG 2.1 Status A: Accessible Menubar

Eelco Verbrugge — Tue, 06 Feb 2024 09:26:50 +0000

Unlock the secrets of building a Menubar that meets WCAG 2.1 Status A guidelines. My step-by-step guide makes accessibility in webdevelopment simple and effective.

Accessibility Considerations (WCAG 2.1 Level A):

1.4.1 Use of Color: Ensure that color is not the only means of conveying information or indicating an action.

2.1.1 Keyboard: The MenuBar, including dropdowns and submenus, must be fully navigable using a keyboard.

1.3.1 Info and Relationships: The structure of the menu and its items should be clearly defined for assistive technologies.

2.4.4 Link Purpose (In Context): Ensure that the purpose of each menu item link is clear from its text or context.

Key words

Menubar= A Menubar is the container of items that represents any choices
Menuitem = A Menuitem is each choice within a Menubar
Menu = A Menu opens a submenu, also known as a parent Menuitem.

Rules

A Menubar should exist of these semantic html elements <nav>, <ul>, <li> and <a> .
If there are multiple menu's, use aria-label to distinguish them from each other.
A Menu has the aria-expanded set to false when collapsed and set to true when expanded
The menu has the attribute tabindex set to -1 or 0
The menu has the attribute aria-activedescendant set to the ID of the focused item
Each item in a menu has the attribute tabindex set to -1, except in a menubar where the first item has tabindex 0
Whenever a menuitem is disabled the attribute aria-disabled is set to true
A menubar has the attribute aria-label OR aria-labeledby when the menubar has a visible label. Aria-labeledby refers to the labelling element.
The menubar has a default value of aria-orientation for horizontally orientation. If it is vertically oriented, set the attribute aria-orientation to vertical.

Hamburgermenu

If some trigger will open a Menu (submenu) or mobile version of the Menubar, set aria-haspopup to true to indicate
Add aria-label=“Menu” when there is a hamburger icon within the button and not any text
Hamburgemenu icon preferably needs to be 44 x 44 pixels
Button need to be triggered by Enter or Space key
When expanded, focus need to stay on hamburgemenu
When Tab is pressed, the first element of the content must be selected
When javascript turned off, the menu should be expanded

Example

<nav aria-label="Accessible Menubar">
    <ul role="menubar" aria-label="Accessible Menubar">
        <li role="none">
            <a role="menuitem" href="#home"> Home </a>
        </li>
        <li role="none">
            <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#about">
                About
            </a>
            <ul role="menu" aria-label="About">
                <li role="none">
                    <a role="menuitem" href="#overview">Overview</a>
                </li>
                <li role="none">
                    <a role="menuitem" href="#administration">Administration</a>
                </li>
                <li role="none">
                    <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#facts">
                        Facts
                    </a>
                    <ul role="menu" aria-label="Facts">
                        <li role="none">
                            <a role="menuitem" href="#history">History</a>
                        </li>
                        <li role="none">
                            <a role="menuitem" href="#current-statistics">Current Statistics</a>
                        </li>
                        <li role="none">
                            <a role="menuitem" href="#awards">Awards</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Sources:

Simple navbar in html, css and javascript

Eelco Verbrugge — Sun, 17 Dec 2023 18:40:06 +0000

This navbar will feature a centered logo, menu items, a call-to-action (CTA) button, and a custom hamburger menu for mobile screens. We'll use HTML, CSS, and a bit of JavaScript.

Step 1: Setting Up the HTML Structure

First things first, we gotta lay down the basic structure for our navigation bar in html.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <nav class="navbar">
        <div class="menu-left">
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About</a>
        </div>
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <div class="menu-right">
            <a href="#" class="cta-button">Contact Us</a>
            <div class="hamburger" onclick="toggleMobileMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>
    <div id="mobileMenu" class="mobile-menu">
        <a href="#" class="closebtn" onclick="toggleMobileMenu()">&times;</a>
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#" class="cta-button">Contact Us</a>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Now, let's get fancy with the visuals. We're talking modern design vibes here—subtle shadows, smooth transitions, the works.

style.css

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu-left, .menu-right, .logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 50px;
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
}

.hamburger span {
    background-color: white;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.cta-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

.mobile-menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: width 0.5s ease;
    padding-top: 60px;
}

.mobile-menu a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 22px;
    color: white;
    display: block;
    transition: color 0.3s ease;
}

.mobile-menu a:hover {
    color: #ddd;
}

.mobile-menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .menu-left, .menu-right .cta-button {
        display: none;
    }

    .menu-right .hamburger {
        display: flex;
    }
}

@media screen and (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ddd;
}

.navbar a:not(.cta-button) {
    padding: 10px 15px;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.navbar a:not(.cta-button):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

Step 3: Adding JavaScript for Interactivity

For the mobile crowd, we'll sprinkle a bit of JavaScript magic. When you hit that burger menu, it'll conjure up the mobile menu in style.

function toggleMobileMenu() {
    const menu = document.getElementById("mobileMenu");
    if (menu.style.width === "100%") {
        menu.style.width = "0";
    } else {
        menu.style.width = "100%";
    }
}

Conclusion

And there you have it, a super cool and responsive navigation bar, ready to rock the digital world.

Install Drupal 10 with Lando

Eelco Verbrugge — Thu, 16 Nov 2023 19:45:10 +0000

In this post, we will guide you through the process of setting up a Drupal 10 project using Lando, a powerful local development environment.

Before we begin, make sure you have PHP, Composer, Docker and Lando installed on your system. We'll then download Drupal 10 and configure a basic Lando setup.

Step 1: Install PHP

Ensure PHP is installed on your machine. You can follow the official PHP installation guide for your operating system.

php.net

Step 2: Install Composer (Make it Global)

Install Composer and make it globally accessible. You can download it from getcomposer.org and follow the installation instructions.

Step 3: Install Docker

Download and install Docker from the official Docker website.

docs.docker.com

Step 4: Install Lando

Install Lando by following the instructions on the official Lando website or by using a package manager like Homebrew.

docs.lando.dev

Step 5: Download Drupal 10

Download Drupal 10 to your desired location. You can use git or download the tarball from Drupal's official website.

drupal.org

Step 6: Initialize Lando

Navigate to your Drupal 10 project directory and run the following commands:

$ lando init

Follow the prompts:

Choose current working directory as the app's codebase.
Select 'drupal10' as the recipe.
Set the webroot relative to the init destination as './web'.
Name your app, e.g., 'my-first-drupal-10-project'.

Step 7: Start Lando

Start your Lando environment:

$ lando start

Step 8: Check Database Information

To access your database, use the following command:

$ lando info

Take note of the database name, password, user, and optionally, the hostname.

Go to your browser and follow the Drupal installation.

Bonus

Step 9: Stop Lando

Stop your Lando environment when needed:

$ lando stop

Step 10: Modify PHP Version

Edit your .lando.yml file to set the PHP version to 7.4 under the config section.

Step 11: Restart Lando with PHP 7.4

Restart Lando to apply the changes:

$ lando start

Step 12: Verify PHP Version

Access your Lando environment and check the PHP version:

$ lando ssh
$ php --version

Step 13: Rebuild Lando

If needed, rebuild your Lando environment:

$ lando rebuild

Step 14: Verify PHP Version Again

After rebuilding, check the PHP version once more:

$ lando ssh
$ php --version

Summary:

Congratulations! You've successfully set up a Drupal 10 project using Lando, managing PHP versions seamlessly. Remember, these steps provide a foundation for your local development environment, allowing you to efficiently work on your Drupal projects.

Next.js 13: Introducing App Router and Server Components

Eelco Verbrugge — Thu, 08 Jun 2023 10:49:50 +0000

Next.js 13 is a major release of the popular React framework that introduces several new features and improvements.

App Router and Server Components

One of the significant changes in Next.js 13 is the introduction of a new routing system called App Router. This new routing system is a complete rewrite of the previous one and coexists with the existing pages directory. The new App Router comes with a concept called Server Components (RSC), a new type of React component that runs on the server and returns compiled JSX to the client. Server Components are the default component type in the new app directory.

Layouts and Performance Improvements

Layouts are another important feature introduced in Next.js 13. They are foundational components that wrap pages and allow for displaying a common UI across pages and reusing logic and data fetching. Layouts also solve the waterfall problem that was present in the previous routing system and provide performance improvements.

Enhanced Router and Flexible Component Structure

The enhanced router in Next.js 13 allows for adding various types of components in the app directory using conventional filenames, enabling a more flexible and organized structure. Pages, layouts, errors, and loading states can be defined using specific filenames, contributing to a more flexible component structure.

Server Components and Constraints

Server Components, the new default component type in Next.js, run on the server and return compiled JSX to the client. They are useful for rendering the skeleton of a page, reducing the amount of JavaScript sent to the client, and improving routing performance for server-rendered pages. Server Components have some constraints, such as not being able to use browser-only APIs, React hooks, or Context.

Server Actions and Complex Logic

Server Actions, although still in the alpha stage, offer a new way to execute functions on the server without wiring them through an API handler. They are useful for executing server-side logic such as sending emails or updating a database. Server Actions can be used for submitting forms, executing server-side logic, and redirecting the user to a new page. They also provide the ability to revalidate data fetched from Server Components, eliminating the need for complex client-side state management.

Pages, Metadata, and Loading Indicators

Pages in the new app directory are defined with the page.tsx convention. Page metadata and SEO information can be specified using the metadata property, and dynamic data can be accessed using the generateMetadata function. Static pages can be generated using the generateStaticParams function. Loading indicators can be implemented using the loading.tsx file, which can be defined in every directory.

Conclusion

Next.js 13 brings significant improvements and new capabilities to the framework, making it even more powerful and efficient for building React applications. The new routing system, Server Components, enhanced router, layouts, and other features contribute to improved performance, code organization, and developer productivity.

Server-Side Rendering (SSR) or Static Site Generation (SSG)?

Eelco Verbrugge — Fri, 02 Jun 2023 15:06:24 +0000

When it comes to Next.js development, choosing the right data fetching and rendering approach can greatly impact your application's performance and user experience. Two popular methods at your disposal are server-side rendering (SSR) and static site generation (SSG). In this blog post, we'll explore the factors to consider when deciding between SSR and SSG, helping you make an informed choice for your Next.js projects.

Understanding Server-Side Rendering (SSR)

Server-side rendering involves generating HTML content on the server for each incoming request. Here are some scenarios where SSR might be the preferred approach:

Dynamic Content: If your application relies heavily on dynamic data that frequently changes, SSR is an excellent choice. By fetching data on the server and rendering it dynamically, you can ensure that users receive up-to-date information.
Search Engine Optimization (SEO): SSR is highly beneficial for SEO. Search engines can easily crawl and index server-rendered content, leading to better discoverability and improved search engine rankings for your pages.
Personalized User Experience: SSR allows you to personalize the content based on user-specific data. This is useful when you need to show personalized recommendations, user-specific data, or implement features that require user authentication.

Exploring Static Site Generation (SSG)

Static site generation involves pre-rendering your application's content at build time, generating static HTML files that can be served to users. Consider the following scenarios where SSG might be the right choice:

Content Stability: If your application's content does not change frequently or requires periodic updates, SSG can be an efficient approach. By pre-rendering and serving static files, you can reduce the load on your server and deliver fast-loading pages to your users.
Performance and Scalability: SSG provides excellent performance benefits, as users receive pre-rendered HTML files that load quickly. Additionally, CDNs can cache these static files, enhancing scalability and reducing server load, making it ideal for high-traffic websites.
Offline Availability: With SSG, you can leverage service workers to make your application available offline. Pre-rendered HTML content allows users to access your application even when they have limited or no internet connectivity.

Choosing the Right Approach:

To determine whether SSR or SSG is the right fit for your Next.js project, consider the following factors:

Data Freshness: If your application requires real-time or frequently updated data, SSR is the way to go. However, if your content is relatively stable and periodic revalidation is sufficient, SSG can provide excellent performance benefits.
SEO Requirements: If search engine visibility is crucial for your application, SSR is recommended. Search engines can crawl and index server-rendered content more effectively, improving your website's discoverability.
User Experience: Consider whether you need to provide a personalized user experience based on dynamic data. SSR allows you to fetch user-specific data on the server, while SSG requires additional client-side rendering or data fetching techniques for personalization.
Build Time Considerations: SSG requires content to be generated at build time, which may increase the overall build time for larger applications. Evaluate whether the build time impact is acceptable for your project.

Conclusion

Both SSR and SSG offer distinct advantages for Next.js development, and choosing the right approach depends on your project's requirements. SSR excels in scenarios where dynamic content, SEO, and personalization are crucial. On the other hand, SSG provides exceptional performance benefits, scalability, and offline availability for applications with stable or periodically updated content.

Evaluate the freshness of your data, SEO needs, user experience requirements, and build time considerations to make an informed decision. Remember, Next.js offers the flexibility to combine SSR and SSG techniques, allowing you to tailor the data fetching and rendering approach according to specific pages or components within your application.

May the Forms be with You: A Jedi's Guide to onBlur, onChange and onTouched

Eelco Verbrugge — Fri, 05 May 2023 09:23:49 +0000

React Hook Form (RHF) knows the modes: onChange, onBlur and onTouched. If you are familiar with RHF but don’t know what they do, you could use some help of a Jedi master!

onChange

Let's start with onChange. Like a Jedi using the Force to feel the will of the user, onChange is triggered whenever there is a change in the value of an input field. Whether the change comes from the user typing or from a programmatic change of the value, onChange is there to help you update the value of the input field as the user types.

But beware, young Padawan, for there is a dark side to onChange. If you're not careful, it can be dangerous and negatively impact the performance of your app. Imagine you have a text field where users can enter their name. If you use onChange to update the value with every keystroke, it can lead to unnecessary re-rendering and delays in your app. So use onChange with care and wisdom.

onBlur

Now let's move on to onBlur. Like a Jedi focusing on feeling the energy of their surroundings, onBlur is triggered when an input field loses focus. For example, if the user moves to another field, onBlur is triggered to help you validate the entered value.

But be careful, young Jedi, as there are certain circumstances where onBlur is not triggered. For example, if the user clicks the browser's back button or refreshes the page, onBlur is not triggered. So if you're using onBlur to validate data, make sure to use other methods to ensure your data is safe.

onTouched

Last but not least, onTouched. Like a Jedi using their powers to sense the thoughts of others, onTouched is triggered when a user touches or interacts with an input field. This is useful if you want to let the user know which fields they have already touched and where they still need to work.

But beware, as onTouched can sometimes be misleading, just like the dark side of the Force. It doesn't necessarily mean that data has actually been entered into the input field. Sometimes a user can touch a field and then decide not to enter data into it. So use onTouched in conjunction with other validation methods to ensure your data is accurate and complete.

Multi-step Docker build process

Eelco Verbrugge — Wed, 05 Apr 2023 07:41:58 +0000

Multi-step Docker build process is a technique that allows you to optimize your Docker images by breaking the build process into multiple stages, and it involves the following steps:

1. Define the base image

Start by defining the base image for your Dockerfile using the FROM statement. This is the image that will be used to create the first stage of the build process.

2. Copy the necessary files

Use the COPY or ADD command to copy the necessary files and folders into the first stage of the Docker build.

3. Build your application

Run any necessary build commands, such as compiling code, installing dependencies, or running tests, within the first stage of the build process.

4. Define the second stage

Use another FROM statement to define a second stage for the build process. This second stage will be based on a different image, such as a minimal runtime image, and will not include any unnecessary files or dependencies from the first stage.

5. Copy files from the first stage

Use the COPY --from= command to copy the necessary files and artifacts from the first stage into the second stage of the Docker build.

6. Define the startup command

Finally, use the CMD or ENTRYPOINT command to define the startup command for the second stage of the Docker build.

By using a multi-step Docker build process, you can create smaller and more efficient Docker images by only including the necessary files and dependencies in the final image.

Let’s get started

make sure you have nodejs installed
$ node -v
Create a React app called frontend
$ npx create-react-app frontend
React startup commands are:

Development server: $ npm run start
Run tests: $ npm run test
Builds a production version: $ npm run build

Create Dockerfile.dev

FROM node:16-alpine

WORKDIR '/app'

#copy package.json to /app
COPY package.json .
#install all our dependencies
RUN npm install

#copy everything else from our project directory
COPY . .

#startup our project
CMD ["npm", "run", "start"]

Build our docker container in our development env
$ docker build -t frontend -f Dockerfile.dev .
Run your build
$ docker run frontend -p 3000:3000 -v /app/node_modules -v $(pwd):/app

Check out http://localhost/3000 to see your brand new app running in a docker container.

Docker compose

Docker Compose is a tool that allows you to define and run multi-container Docker applications. It is used to manage the dependencies and services required by your application, and it simplifies the process of defining, running, and connecting multiple Docker containers.

In a Docker Compose file, you define the services that make up your application, including the images used, environment variables, volumes, network connections, and other settings. You can then use the docker-compose command to create and start all the necessary containers for your application.

Docker Compose simplifies the process of building and running complex multi-container applications by providing a simple and flexible way to manage the dependencies and configurations of your services.

Let’s create a docker-compose file for our dev environment so we can run our container in just 1 simple command.

Create docker-compose.yml

version: '3'
services:
  web:
    container_name: web
    build:
      context: . #specifying where we want all the files and folders for this image to be pulled from
      dockerfile: Dockerfile.dev #location of dockerfile to be used
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules #this means "do not try to map a folder up against node_modules inside the container"
      - .:/app #the . is the current folder outside the container: the /app folder is inside the container

Run your docker-compose file $ docker-compose up

Check out http://localhost/3000 again to see your app is running, but this time from a single command with the help of docker-compose.

Production

For the production we need nginx as a webserver to run our website. Let’s see how this works.

Multi-step Docker build process:

Build Phase: Use node:alpine -> Copy the package.json file -> Install dependencies -> Run 'npm run build'
Run Phase: Use nginx -> Copy over the result of 'npm run build' -> Start nginx

Create Dockerfile

#Build Phase
FROM node:16-alpine as builder #tagged as the builder-fase
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

#Run Phase
FROM nginx
COPY --from =builder /app/build  /usr/share/nginx/html #copy the stuff we care about from the other phase to this specifical nginx folder
#default command of the ngxin container/image is going to startup nginx for us

Build your container
$ docker build .
Run your build
$ docker run -p 8080:80 [build_image_id]

In production we won’t use docker-compose, this is only for our dev environment.

React class to functional: states

Eelco Verbrugge — Wed, 28 Dec 2022 11:08:08 +0000

In 2018 React introduced Hooks. "They let you use state and other React features without writing a class." Hooks can be used in functional components but a lot of projects are still written in class components.

In this serie I'll explain how easy it is to convert/refactor your class component to a functional component so you can use Hooks.

States

class component

import React from 'react';
import {Button} from "react-bootstrap";

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
        this.handleShow = this.handleShow.bind(this);
    }

    handleShow() {
        this.setState({show: true});
    }

    render() {
        const {show} = this.state;

        return (
            <>
                <Button onClick={this.handleShow}>Show</Button>
                {show && <h1>Awesome</h1>}
            </>
        )
    }
}

export default Example;

functional component

const Example = () => {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow(true);
  }

  return (
    <>
      <Button onClick={handleShow}>Show</Button>
      {show && <h1>Awesome<h1>}
    </>
  );
}

1. Extends
Functional components no longer need to extends from React.Component

2. Constructor
Where as a constructor is needed in a class component to set states, a functional component can use the "useState" hook. Just import this hook to use it import React, {useState} from 'react';

3. Passing Functions to Components
In class components it is necessary to pass functions to components in the constructor by .bind(this) in order to work. Not needed in a functional component anymore.

4. Function
Functions are written a little different. The good old myFunction() { ... } has been replaced by myFunction = () => { ... }

5. Variables
Not needed anymore to point out to this.state.myState, but just use myState

Create generic React components

Eelco Verbrugge — Thu, 17 Nov 2022 16:09:48 +0000

As your application starts to grow, you often write repeated code. A simple example of this is with a form:

const SignupForm = () => {
  return (
    <form onSubmit={handleSubmit}>
      <label>Nickname</label>
      <input
        type="text"
        required
        onChange={handleChange}
        name="nickname"
        value={nickname} />

      <label>Email</label>
      <input
        type="email"
        required
        onChange={handleChange}
        name="email"
        value={email} />

      <label>Password</label>
      <input
        type="password"
        required
        onChange={handleChange}
        name="password"
        value={password} />

      <button type="submit">Submit</button>
    </form>
  )
}

export default SignupForm

The combination of label + input is repeated 3 times with the same attributes but differences in some values.

Generic component

In order to reduce our code we'll create a new component FormInput where we group every label + input so we can reuse this code:

import React from 'react';

const INPUT_TYPE = {
    text: 'text',
    email: 'email',
    password: 'password',
}

const FormInput = ({ label, type, ...otherAttributes  }) => {

    if (!type) {
        throw Error('form input is missing the required type attribute');
    }

    return (
        <div>
            {label && (
                <label className="form-label">{label}</label>
            )}
            <input type={INPUT_TYPE[type]} className="form-input" {...otherAttributes} />
        </div>
    )
}

export default FormInput

I've separate the label prop from all other attributes (...otherAttributes) which can be passed on, to keep it clean and readable. We'll check the label prop to make sure it exists, since maybe in the future we want to use an input without a label.

Now we can import our FormInput to our SignupForm, make sure your path is set right, so we can replace every label + input bij our FormInput component:

import FormInput from "./FormInput" // imports our component

const SignupForm = () => {
  return (
    <form onSubmit={handleSubmit}>
      <FormInput
        label="Nickname" // label prop with title as string
        type="text" // followed by all otherAttributes...
        required
        onChange={handleChange}
        name="nickname"
        value={nickname} />

      <FormInput
        label="Email"
        type="email"
        required
        onChange={handleChange}
        name="email"
        value={email} />

      <FormInput
        label="Password"
        type="password"
        required
        onChange={handleChange}
        name="password"
        value={password} />
    </form>
  )
}

export default SignupForm

Congrats! You just created a generic component.

Pair programming in PHPStorm

Eelco Verbrugge — Thu, 22 Sep 2022 09:15:30 +0000

What is pair programming

According to wikipedia: Pair programming is an agile software development technique in which two programmers work together at one workstation.

Best said: you and your colleague program together at the same time. Wether you sit next to each other or do this online, the idea is you switch roles now and then so you both programmed a part of the code. One is coding and the other will help you while you write your code and both players think out loud.

Like drivers in a rally car:

Why would you pair program

For many reasons:

Problems are better solved, code quality increases
Your code is being reviewed on the go
Better ideas by talking through your ideas and solutions
Learning from each other when having different approaches

How to pair program in PHPStorm

Of course you can share your screen and pair program, but I prefer doing so via PHPStorm and this is how to:

Start a session

Access control
Accept
Send url for invitation

CongratS! You are officially pair programming now

Bonus: follow your colleague

When a sessions is running, you can easily follow each other by clicking on the name of your colleague. It should color your window and say something like "Following colleague..."

Checkout the documentation for more info and how to setup your session from the start (https://www.jetbrains.com/help/idea/code-with-me.html#start-guest)[https://www.jetbrains.com/help/idea/code-with-me.html#start-guest]

Why your password is weak

Eelco Verbrugge — Mon, 18 Jul 2022 10:34:39 +0000

Does your password requires at least the following?

Must be a minimum of 8 characters
Must contain at least 1 number
Must contain at least one uppercase character
Must contain at least one lowercase character
Must contain at least one special character (!@#$%^&*)

Research recently showed this password is cracked in 39 minutes! Yes... you took a risk for brain damage in order to come up with a password like this or let your password manager did the job en still it can be cracked so so fast.

In 2020 this password was cracked in 8 hours. That's just 12 times slower then what it is now, imagine how fast it will be within the next 2 years from now.

Password on steroids

Best possible way to come up with a password is according to the Diceware-method https://diceware.dmuth.org/

Experts use this to add randomness to the words your password contains. Every 5 numbers you throw in a row belongs to a word. Repeat this process until you have at least 7 words and create a passphrase:

CannonVirtuousMovableUnnerveRectifiedCreasing

Safety vs userfriendly

One problem is this won't be acceptable by our minimal requirements like we said in the beginning. Of course we can add a number and exclamation mark or whatever, but this isn't the best solution.

Also this is pretty harshe to ask everyone to do for "just a password". This also depends on what the value is of what you are trying to secure. But since people are lazy, lets come up with a solution that works for everyone.

What we can do is higher the least minimal of characters used. If you go from 8 to 12, this means it can be cracked in 3000 years(!) in 2022. Still in 2020 this was 34000 years, so what will it be within the next 2 years? But this takes waaayyyy more time to crack so hopefully the hackers decides to target an easier victim.

Source: https://www.hivesystems.io/blog/are-your-passwords-in-the-green?utm_source=tabletext

React Redux introduction

Eelco Verbrugge — Fri, 01 Jul 2022 13:12:36 +0000

Introduction

Redux is used to enhance your application when the complicity continues to grow by simplifying the state management. States can include data from 3 different sources:

Servers
Cache
Locally

This can be complicated in order to manage and this is where Redux enters the party. Redux is a State Management Tool for Javascript applications such as React.

Redux stores the entire states of the application in a central location (called a store) so state manipulation and inner communication can be simplified. In the image below, the view is delivered by React with a template and various components. Redux takes the responsibility of managing the states using various components like Actions, Reducers, Action creators and Selectors. In order to connect Redux and the view (React) a Connector is been used in the form of a Container.

Let's get started

Create a new file called index2.html in your public folder of a brand new React application. Past the following code and start adding my sections one by one in place of [ INSERT SECTIONS HERE ]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>REDUX STATES</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" type="text/css">
    <link rel="stylesheet" href="app.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css" type="text/css" />
  </head>
  <body>
    <div id="app">
     Application Initiailizing...
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js" type="text/javascript"></script>
    <script type="text/babel">

[ INSERT SECTIONS HERE ]

    </script>

  </body>
</html>

Libraries

We begin by declaring all the required libraries and objects. I will explain them one by one:

connect and Provider from ReactRedux is used to connect Redux to Reacts components
Redux is used for various methods like createStore which is used to build the store
Component from React is used to build a React component
Map is used to manipulate content

      const {connect, Provider} = ReactRedux;
      const {createStore, compose} = Redux;
      const {Component} = React;
      const {map} = _;

Create Event Handlers

Create a component called ListTable and extend from Component. Add a constructor with props and context. Let's bind our Event Handlers so we can declare them to dispatch. Dispatch will sent the event to Redux to manipulate our states.

      class ListTable extends Component {
        constructor (props, context) {

          super(props, context);
          this.addItem = this.addItem.bind(this);
          this.removeItem = this.removeItem.bind(this);
          this.editItem = this.editItem.bind(this);
        }

        /* EVENT HANDLERS */
        addItem () {
          this.props.dispatch(addItemAction())
        }
        removeItem (index) {
          this.props.dispatch(removeItemAction(index))
        }
        editItem (index, event)  {
          this.props.dispatch(editItemAction(index, event.target.value))
        }

Render

Lets render the outcome of items. Pretty much selfdeclaring, but just to be sure:

onChange is to edit the item on every input
onClick is to remove the item when clicked the delete button
onClick is also used to add a new item when clicked on add

        render () {
          const {items, addItem} = this.props;

          return (<div>
            <table>
              <tbody>
                {map(items, (item, index) => {
                  return (<tr key={index}>
                    <td><input onChange={this.editItem.bind(null, index)} type="text" value={item} /></td>
                    <td>
                      <button onClick={this.removeItem.bind(null, index)} className="delete">
                        remove
                      </button>
                    </td>
                  </tr>);
                })}
              </tbody>
            </table>
            <button onClick={this.addItem} className="add">
            Click
            </button>
            <InfoBox />
          </div>);
        }
      }

Component

This is the most important method, this is how you integrate Redux with React. Whenever there is a change in state, this will call the method mapStateToProps. This will map the states to the props of the React component.

      class InfoBox extends Component {
        render () {
          return (<div>
            <p className="spiel">
             SKill soft redux
            </p>
          </div>);
        }
      }
      /* MAP STATE TO PROPS */

      const mapStateToProps = (state) => {
        return {
          items: state.items,
        }
      }

Reducers

Reducers will listen to all actions that are dispatch and react according to the logic we apply. We now so far that all the states and Redux are immutable because they never change, so we have to return a new state object, that is what we are specifying in the reducer. We are adding appReducer and declaring items following which we are slicing items.

Slice is an important method which clones an array without storing any reference of it. This is used when deciding which event to process. All the events we've specified will be processed through the appReducer.

If the action type is addItem, it push a new item.
If it's removeItem, it will remove an item
And if it's editItem, it will keep the new data value

      /* Reducers */
      const appReducer = (state = {items: []}, action) => {
        let items = state.items.slice();
        console.log('Actions', action); 
        switch (action.type) {
          case 'ADD_ITEM':
            items.push('') // Add an extra element to items
            break;
          case 'REMOVE_ITEM':
            items.splice(action.index, 1); // Removes element at `index`
            break;
          case 'EDIT_ITEM':
            items[action.data.index] = action.data.value; // Change value of `index` to new value
            break;
        }

        const newState = {
          items: items,
        }
        console.log('Current State', newState);
        return newState;
      }

Store

Let's creat a Redux store to store our states. Redux provides the capability of maintaining a centralized store to store the data that we want to project. To specify a store we will create a store with the createStore method and pass our appReducer.

      /* REDUX STORE */
      let store = createStore(appReducer, {
        items: [
          'item1',
          'item2',
          'item3',
          'item4'
        ]
      }, window.devToolsExtension ? window.devToolsExtension() : undefined)

      // Use Redux connect to attach our mapStateToProps and so to our ListTable component
      const ListApp = connect(
        mapStateToProps
      )(ListTable)

Redux DevTools

I have added a devtool which is downloadable for Chrome and Firefox to ensure that Redux connect will attach the method mapStateToProps to the ListTable component.

Chrome: Redux DevTools
Firefox: Redux DevTools

      ReactDOM.render(
        <Provider store={store}>
          <ListApp />
        </Provider>,
        document.getElementById('app')
      );
      if (window.devToolsExtension) {
        window.devToolsExtension.open();
      }

Tadaa!

You have created your own React app with Redux. Checkout your index2.html page in the browser, open the console and try to add, remove and edit items. You should see every action you make as output in the console from the Reducer.

Check out the full index2.html from my Github and see for your self https://github.com/eelcoverbrugge