DEV Community: Paul Isaris

Mastering Code Quality in Laravel: Pint with Git Hooks and Docker

Paul Isaris — Tue, 05 Nov 2024 18:19:00 +0000

Mastering Code Quality in Laravel: Pint with Git Hooks and Docker

(image by pexels)

This post was originally published at paulisaris.com

Introduction

As developers, we all know how important clean, consistent code is for maintaining a large-scale Laravel application. Not only does well-formatted code boost readability, but it also ensures team-wide consistency and helps avoid pesky formatting debates during code reviews.

Enter Pint, a powerful tool introduced by the Laravel ecosystem to automatically format PHP code according to opinionated best practices.

In this article, we'll explore how to integrate Pint into your Laravel application and take it a step further by running Pint inside a Docker container using Docker Compose.

This approach ensures that code formatting is consistent across environments and makes it easier for developers using different setups to maintain uniformity in their codebase.
Let's dive into the details! 🚀

Why Use Pint in Laravel?

Pint is a zero-configuration tool that formats PHP code following PHP-CS-Fixer standards. It comes preconfigured to support modern PHP standards, making it an essential part of any Laravel developer's toolkit.
Automating code formatting helps reduce human errors, eliminates minor formatting discussions in code reviews, and accelerates development workflows by enforcing consistent style across all files. 🥷

Why is this important?

Consistency: Pint ensures your code style is uniform across the team. No more personal preferences affecting how the code looks.
Readability: Clean code is easier to read and maintain. Pint automatically handles indentation, spacing, and other small details, making your codebase more readable.
Automation: By integrating Pint in pre-commit Git hooks or running it via Docker, you can automate code formatting, making it one less thing to worry about in your CI pipeline.

Setting Up Pint in a Laravel Application

Let’s walk through the steps of integrating Pint into a Laravel application. For this, we'll use a simple Laravel app as our use case.

Step 1: Create a New Laravel Application

To get started, let's create a new Laravel project:

composer create-project --prefer-dist laravel/laravel pint-demo

This will create a fresh Laravel project in the pint-demo directory.

Step 2: Install Laravel Pint

You can install Pint as a development dependency by running the following command in your Laravel project:

composer require laravel/pint --dev

This will install Pint in the vendor/bin directory, where you can run it whenever you need to format your code. You can run Pint on your PHP files using the following command:

./vendor/bin/pint

Step 3: Automating Pint with Husky and Git Hooks

Running Pint manually can become a chore. To automate this, you can set up a pre-commit Git hook to ensure that Pint runs and formats your code every time you make a commit. This guarantees that all committed code is properly formatted.

In order to make sure Pint runs automatically before every Git commit, we can use Husky, which is a tool that makes it easy to manage Git hooks in npm-based projects. Here's how to set it up in your Laravel project:

Install Husky: First, install Husky as a dev dependency:

npm install husky --save-dev

Set up Husky: Add the following script to your package.json to automatically set up Husky during npm install:

{
  "scripts": {
    "prepare": "husky install"
  }
}

Then, run npm install to initialize Husky:

npm install

Create a Pre-commit Hook: Set up a Git pre-commit hook that runs Pint before every commit:

npx husky add .husky/pre-commit "vendor/bin/pint"

chmod +x .husky/pre-commit

This command creates a pre-commit hook in the .husky directory that ensures Pint runs whenever a developer attempts to commit code.

Using Pint Inside Docker

In a modern development environment, many teams rely on Docker to ensure consistency across different machines. Running Pint inside Docker ensures that your development environment is identical, regardless of your operating system or local setup.

Step 4: Setting Up Docker for Pint

You can run Pint inside a Docker container using Docker Compose. Here's how to set it up:

First, add a docker-compose.yml file to your project if you don’t have one. Here’s an example configuration for a typical Laravel app:

version: '3.8'

services:
  app:
    image: php:8.1-cli
    volumes:
      - .:/var/www
      - ./vendor:/var/www/vendor
    working_dir: /var/www
    command: bash -c "while true; do sleep 1; done"

Modify your pre-commit hook to run Pint inside the Docker container. Open the .husky/pre-commit file and update it as follows:

# .husky/pre-commit

# Load .env variables from the project root, line by line
if [ -f .env ]; then
    while IFS='=' read -r key value || [ -n "$key" ]; do
        # Skip lines that are comments or do not contain valid key=value format
        if echo "$key" | grep -Eq '^[A-Za-z_][A-Za-z0-9_]*$'; then
            export "$key=$value"
        fi
    done < .env
fi

# Get a list of staged files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=d)

# Separate PHP files from other files, only if there are staged files
if [ -n "$STAGED_FILES" ]; then
    PHP_FILES=$(echo "$STAGED_FILES" | grep '\.php$' || true)
    OTHER_FILES=$(echo "$STAGED_FILES" | grep -v '\.php$' || true)
else
    PHP_FILES=""
    OTHER_FILES=""
fi

# Exit early if there are no files staged (unlikely, but for safety)
if [ -z "$STAGED_FILES" ]; then
    echo "No files staged for commit. Exiting."
    exit 0
fi

# Run Pint for PHP files only
if [ -n "$PHP_FILES" ]; then
    if [ "$USE_DOCKER" = "true" ]; then
        echo "Running Pint in Docker for PHP files..."
        docker compose exec -T php vendor/bin/pint $PHP_FILES
        if [ $? -ne 0 ]; then
            echo "Pint failed while running inside Docker."
            exit 1
        fi
    else
        echo "Running Pint locally for PHP files..."
        vendor/bin/pint $PHP_FILES
        if [ $? -ne 0 ]; then
            echo "Pint failed while running locally."
            exit 1
        fi
    fi

    # Restage PHP files after Pint formatting
    echo "$PHP_FILES" | xargs -r git add
fi

# Restage all non-PHP files
if [ -n "$OTHER_FILES" ]; then
    echo "$OTHER_FILES" | xargs -r git add
fi

echo "Pre-commit hook completed successfully."

exit 0

This script checks if the USE_DOCKER environment variable (in your Laravel .env file) is set to "true". If it is, it runs Pint inside the Docker container. Otherwise, it runs Pint locally.

This setup gives flexibility to your team, as developers can choose whether they want to run Pint locally or in Docker.

Step 5: Running Docker Compose

To run Pint in Docker, make sure you have your containers up and running. You can start Docker Compose with:

docker compose up -d

Bonus: Best Practices for Running Pint in Laravel Applications

Here are a few tips and guidelines for fellow developers working with Pint and Docker:

Use Pre-commit Hooks: Automate Pint formatting with pre-commit hooks to enforce consistency.
Use Docker for Consistency: By running Pint inside a Docker container, you ensure that all team members have the same environment.
Customize Pint: Laravel Pint comes pre-configured, but you can customize its rules by adding a pint.json configuration file if you need to enforce specific styles.
Keep Docker Lightweight: In your docker-compose.yml file, mount only the necessary volumes (such as the application and vendor directories) to avoid performance issues.

Conclusion

Using Pint in your Laravel application is a simple yet powerful way to ensure consistent code quality and formatting.

By integrating it with Git hooks, Husky, and Docker, you can automate this process, making it part of your daily development workflow. Whether you run Pint locally or inside a Docker container, it can save time, prevent common formatting errors, and make your codebase cleaner and more maintainable!

Make Windows Terminal Awesome with ZSH and Oh My ZSH!

Paul Isaris — Wed, 15 May 2024 07:10:00 +0000

TL;DR

In this guide, we'll walk you through the installation and configuration of ZSH and Oh My ZSH on Windows, so you can
enjoy the power and flexibility of these tools without leaving the comfort of your Windows environment.

Introduction
Embracing ZSH on Windows
- Introducing ZSH: The Ultimate Shell Experience
- Oh My ZSH!: ZSH Supercharged
Step 1: Install Git + Git Bash for Windows
Step 2: Installation and Configuration of ZSH in Windows
- 2.1: Download ZSH
- 2.2: Install ZSH
- 2.3: Verify the ZSH Installation
- 2.4: Set ZSH as the Default Shell
- 2.5: Fix Displaying of Unexpected Characters
Step 3: Installation and Configuration of Oh My ZSH! on Windows
- 3.1: Installation of Oh My ZSH!
- 3.2: Customization of Oh My ZSH!
- Fonts
- Theme
Conclusion

Introduction

Are you tired of the mundane Windows command prompt?

Do you yearn for the powerful Linux terminal, but don't
want to deal with the complexities of WSL (Windows Subsystem for Linux)?

Well, rejoice, fellow developers, for there is a solution! With the
combination of:

you can transform your Windows command line experience into something truly remarkable.

Embracing ZSH on Windows

Introducing ZSH: The Ultimate Shell Experience

Image description: ZSH logo.

ZSH, or Z Shell, is a powerful command interpreter for UNIX-like operating systems. It offers advanced features
such as
improved tab completion, spelling correction, and extensive customization options.

Oh My ZSH!: ZSH Supercharged

Image description: Oh My ZSH! logo featuring a cute cartoon character with a command prompt.

But what truly takes ZSH to the next level is Oh My ZSH! This open-source framework for managing ZSH configurations
comes packed with a plethora of themes, plugins, and helpers.

Step 1: Install Git + Git Bash for Windows

If you haven't already, download and install Git for Windows from the
official website. This will give you access to Git Bash, which serves as the entry point for ZSH. You can find the
Git for Windows installer here.

Git Bash is needed so that we also have the bash shell available, which is required for ZSH to run, and also for
having the ~/.bashrc file available.
The ~/.bashrc file is installed at C:\Users\<your user name>\.bashrc.

IMPORTANT: Make sure to select the option to use Git from the Windows Command Prompt during the installation.

ALSO IMPORTANT: When opening the Windows Terminal app, make sure to select the Git Bash profile as the default
terminal profile! (Select it from the dropdown menu in the top right corner of the terminal window), and then set it as
default in the Settings.

Image description: Selecting Git Bash as a terminal profile

Step 2: Installation and Configuration of ZSH in Windows

Now that we understand the components, let's get down to business. Here's how you can install and configure ZSH and Oh
My ZSH! on your Windows machine without the need for WSL.

2.1: Download ZSH

Once Bash for Windows is set up, it is time to install ZSH:
Download the latest MSYS2 zsh package from the MSYS2 package repository. The file will be named
like: zsh-#.#-#-x86_64.pkg.tar.zst. You can find the latest version here.

2.2: Install ZSH

Extract the contents of the zip file (which will include etc and usr directories) into your Git Bash
installation directory. This will be in C:\Program Files\Git. You should merge the contents of the folder when
asked (
no files should be getting overridden).

2.3: Verify the ZSH Installation

Open Git Bash and run zsh --version to ensure that ZSH is installed correctly.

2.4: Set ZSH as the Default Shell

After installation, set ZSH as your default shell by appending the following to
your C:\Users\<your user name>\.bashrc file:



   if [ -t 1 ]; then
    exec zsh
   fi

2.5: Fix Displaying of Unexpected Characters

Fix the displaying of garbled characters on terminal by appending this line in
your C:\Users\<your user name>\.bashrc file:



   /c/Windows/System32/chcp.com 65001 > /dev/null 2>&1

Close and reopen the terminal, to save those changes. The first time ZSH will ask for some files creation.

Step 3: Installation and Configuration of Oh My ZSH! on Windows

As we said earlier, Oh My ZSH! is the cherry on top of the ZSH cake. Let's see how you can install and configure
it on your Windows machine.

3.1: Installation of Oh My ZSH!

Install Oh My ZSH!: With ZSH in place, installing Oh My ZSH! is a breeze. Simply run:



sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

3.2: Customization of Oh My ZSH!

Fonts

Download and install manually
the Meslo Nerd Fonts to include
all glyphs and symbols that Powerlevel10k may need.

Theme

There are a lot of themes, with Powerlevel10k being the most popular and
powerful. To install it, check the instructions here.

Conclusion

Congratulations! You've now unlocked the full potential of ZSH and Oh My ZSH! on Windows. With its advanced features and
endless customization options, ZSH is sure to revolutionize your command line workflow. So why wait? Dive in today and
elevate your development experience like never before.

My Hacktoberfest 2022 contributions

Paul Isaris — Sat, 15 Oct 2022 06:20:09 +0000

Intro

My name is Paul, I come from the sunny country of Greece (locaten in Athens), and I am a software engineer with 8 years of experience in the field.
I work at a not-for-profit software company called SciFY, where we build software with a societal impact, like video games for the blind, assistive technologies, e-democracy tools, and more. Check out our Github profile! 🤩👨🏼‍🦽

SciFY Not-for-profit Company · GitHub

SciFY is a NonProfit Organization that develops cutting-edge information technology systems and offers them for free to everyone, to solve real-life problems. - SciFY Not-for-profit Company

github.com

Background

I have studied Computer Science in Greece, and I much enjoy learning new things about everything! 🦾👨🏼‍🚀

Progress

I join Hacktoberfest every year, since 2017. I much enjoy the enthusiasm of the FOSS community, and the hype of open-source software during this month. I also get a chance to work again on small -yet important- updates and improvements of our open-source projects! 🎃🧙

Contributions

This year I decided to contribute to the very own projects of the organization I work for. We have some legacy application that needed revamping, and some others that are in the process of adding new features to.

More specifically:

1. ICSee (I Can See) Android app for people with low-vision

ICSee is an Android app, written in Java. It helps people with low-vision to see small texts through the phone camera, by applying special real-time filters.
In the context of Hacktoberfest 2022, I took the opportunity to upgrade the app to the latest version of OpenCV (the library we use to handle real-time image processing), as well as support new languages.

scify / ICSee

ICSee runs on small portable devices (smartphones, tablets) and makes reading and object identification easier. Simply, conveniently and always available!

ICSee

Abstract

It is an application for small portable devices (smart phones, tablets) that will help people with severe visual impairments see more clearly How? The user simply directs the camera of his/her smartphone or tablet to the point he/she wants and… that was it! The application processes the image on the screen according to the user’s needs (conversion to negative or greyscale, increase the contrast, etc.) and provides in real time an image that is is easier for the user to see! Who is it for? It is intended to be used by people with severe visual impairments. The Application provides an audio tutorial when starting.

Implementation

The ICSee project involves a software solution for Android hand-held devices. We can support filtering on a camera-streamed image (real-time), applying a wide variety of filters on it.

Compilation - Requirements

The minimum SDK version is 16 (Android 4.1) A device with…

View on GitHub

2. Dianoia mobile app for people with emerging, early-stage dementia

People with dementia, due to the ongoing decline in their mental abilities, need proper care at each stage. Their carers feel they have a great responsibility in their hands. Therefore, dementia affects not only the person dealing with it, but the caregivers, too.

Dianoia is an Ionic smartphone app for family caregivers and health professionals in order to provide knowledge about simple techniques of non-pharmaceutical interventions will provide valuable insight and tools.

In the context of Hacktoberfest 2022, I took the opportunity to enrich the app with new content, fix several bugs, and make the UI look much smoother!

scify / Dianoia-app

Mobile (Ionic 3 - Angular 4) app about non-pharmaceutical activities and information for people with dementia.

Dianoia - Ionic Mobile app

A demo of the app (in Greek) can be found here.

Non-pharmaceutical activities for people with dementia.

Pre-setup steps

It is very easy to install multiple versions of NodeJS and npm, by using Node Version Manager (nvm).

This project was built using the following versions of nodejs and npm:

nvm install lts/fermium # (or nvm install v14.21.1)

node -v
v14.21.1

npm -v
6.14.17

Alternatively, if you are using nvm, run this command in order to sync to the correct NodeJS version for the project:

nvm use

Install project dependencies:

$ npm install -g @ionic/cli@6.11.11 

$ npm install -g cordova@8.1.2

$ cd dianoia-app

$ npm install

$ ionic serve

Execution

Then, to run it in a real Android device, cd into dianoia-app and run:

$ ionic cordova platform add android@8.1.0

$ ionic cordova emulate android

Generating icon and splash screen for all platforms

…

View on GitHub

Reflections

Like every year, it is beyond exctiting to see the software development communitu to passionate about such an innovative event. 🧑🏿‍🚀

This year, I also liked the inclusion of low-code or even no-code contributions, since I think that such endeavor will introduce open-source to an even wider audience! ❤️🥳

I look forward to participating in Hacktoberfest every year! 😄👨‍💻

PHP 8 Is here! A step in the right direction?

Paul Isaris — Sun, 11 Apr 2021 10:15:00 +0000

post photo by pexels

Introduction

PHP 8 is finally here!

PHP 8.0 is a major update of the PHP language.
It contains many new features and optimizations including named arguments, union types, attributes, constructor property promotion, match expression, nullsafe operator, JIT, and improvements in the type system, error handling, and consistency.

In this article, we will review all the new features and changes, and share some thoughts about each of the changes, as well as on the roadmap that PHP seems to be carving ahead.

You can read all about these in the official release announcement as well.

New features

Named arguments

In PHP 8, when calling a function, you can omit the non-required arguments, and pass only what is desired.

Named Parameters example

function my_awesome_function(string $name, string $value = "", int $expires = 0) {
    ...
}

Let's say now that we want to call this function, but only specify the $name and $expires attributes.

In PHP 7:

// calling the function. but we only want to specify $name and $expires
my_awesome_function('test', '', time() + 60 * 60 * 2)

In PHP 8:

// calling the function. but we only want to specify $name and $expires
my_awesome_function(name: 'test', expires: time() + 60 * 60 * 2)

My thoughts on named parameters

This is a nice and handy touch. Many languages nowadays support this kind of method calling.

However, this design can lead to functions that break the Single-responsibility_principle, by resulting in methods that "do too much" by having many parameters. So, as always, use with caution ;-)

Attributes

Attributes are the new kid in the block. It is essentially a configuration language embedded directly into code.

Attributes is a native PHP syntax that offers the ability to add structured, machine-readable metadata information on declarations in code: Classes, methods, functions, parameters, properties, etc.

Attributes Example

In PHP 7 (With PHPDocs):

class BookController
{
    /**
     * @Route("/api/books/{id}", methods={"GET"})
     */
    public function get($id) { /* ... */ }
}

In PHP 8:

class BookController
{
    #[Route("/api/books/{id}", methods: ["GET"])]
    public function get($id) { /* ... */ }
}

Constructor property promotion

The basic idea is simple: ditch all the class properties and the variable assignments, and prefix the constructor parameters with public, protected, or private. PHP will take that new syntax, and transform it to normal syntax under the hood, before actually executing the code.

Constructor properties example

In PHP 7:

class Point {
  public float $x;
  public float $y;
  public float $z;

  public function __construct(
    float $x = 0.0,
    float $y = 0.0,
    float $z = 0.0
  ) {
    $this->x = $x;
    $this->y = $y;
    $this->z = $z;
  }
}

In PHP 8:

class Point {
  public function __construct(
    public float $x = 0.0,
    public float $y = 0.0,
    public float $z = 0.0,
  ) {}
}

My thoughts on Constructor property promotion

Constructor property promotion reduces the amount of code that is required, leading to smaller and cleaner classes.

If you still want to have class properties that are not part of the constructor parameters, you can declare them in the old way, and instantiate them (or nor), inside the constructor.

Union types

Union types are a way of declaring multiple types for a property/variable.
So if a function parameter can take either string or int values, you can now declare it as string|int.

This is something that you could not do in PHP 7, only using PHPDocs (so it was not part of the PHP core libraries, but existed in the PHPDocs).

Instead of PHPDoc annotations for a combination of types, you can use native union type declarations that are validated at runtime.

Union types example

In PHP 7:

class Book {
  /** @var int|float */
  private $price;

  /**
   * @param float|int $price
   */
  public function __construct($price) {
    $this->price = $price;
  }
}

new Book('test'); // OK at runtime

In PHP 8, since Union types are part of the PHP runtime library and compiler, this will throw an error:

class Book {
  public function __construct(
    private int|float $price
  ) {}
}

new Book('test'); // TypeError

My thoughts on Union types

As a SOLID Principles advocate, I am not a big fan of this change.

I can understand that it can help speed things up and adds a level of control over my code, but I believe that if your code gets often to the point that you need to use union type for a property, then there is definitely something you need to think about.

Match expression

Match expression syntax is one of the nicest features in PHP 8 that improves the switch syntax in multiple ways.

Let's start by comparing the two. Here's a classic switch example (example from this article):

In PHP 7 (using switch):

switch ($statusCode) {
    case 200:
    case 300:
        $message = null;
        break;
    case 400:
        $message = 'not found';
        break;
    case 500:
        $message = 'server error';
        break;
    default:
        $message = 'unknown status code';
        break;
}

In PHP 8 (using match):

$message = match ($statusCode) {
    200, 300 => null,
    400 => 'not found',
    500 => 'server error',
    default => 'unknown status code',
};

My thoughts on the match expression feature

match will do strict type checks instead of loose ones. It's like using === instead of ==.
In my opinion, this is a good chance, since it makes the code stricter and more expressive.

Also, If you forget to check for a value, and when there's no default arm specified, PHP will throw an UnhandledMatchError exception.

Again more strictness, but it will prevent subtle bugs from going unnoticed.

To fix this, you should wrap the match expression inside a separate method, and deal with the UnhandledMatchError exception there, by returning a default value.

Nullsafe operator

Instead of null check conditions, you can now use a chain of calls with the new nullsafe operator.

When the evaluation of one element in the chain fails, the execution of the entire chain aborts, and the entire chain evaluates to null.

Example of nullsafe operator

In PHP 7:

$country =  null;

if ($book !== null) {
  $author = $book->author;

  if ($author !== null) {
    $address = $author->getAddress();

    if ($address !== null) {
      $country = $address->country;
    }
  }
}

In PHP 8:

$country = $book?->author?->getAddress()?->country;

My thoughts on nullsafe operator

I have mixed feelings about this.

Of course, it is a handy touch since it leads to less and definitely more readable code.

But again, by looking at the big picture, why would our code even need to check so deeply and greedily?

Should our code have Business rules that restrain such behavior?
So, again a handy new feature, but use with caution...

Saner string to number comparisons

When comparing to a numeric string, PHP 8 uses a number comparison. Otherwise, it converts the number to a string and uses a string comparison.

In PHP 7:

0 == 'foobar' // true

In PHP 8:

0 == 'foobar' // false

This is definitely a step in the right direction, but only given that PHP is trying to be a stricter language.

When we say equals, we should mean equals!

My overall thoughts on PHP 8

PHP is undoubtedly trying to become a stricter, more "serious" language.

As a big fan of OOP and SOLID Principles principles, I am totally happy and on board with this direction.

Also, as you will see in the upgrade guide, PHP 8 is generally backwards-friendly, since it does not break a lot of functionality from the previous major releases. Cool!

So let's try to use all the new features of PHP as consciously as possible, and build awesome things!

If you are content with the new PHP version, take a look at the migration guide.

What are your thoughts on PHP 8?

What’s New In the 2020 Scrum Guide Update

Paul Isaris — Sun, 29 Nov 2020 12:58:05 +0000

Post photo by pexels

Originally published on paulisaris.com

Introduction

2020 Is (finally) coming to an end, but it wouldn't leave us with anything less than another surprise!

On November 18, 2020, Ken Schwaber and Jeff Sutherland published an update of the Scrum Guide.

According to the co-creators, the Scrum Guide 2020 aims at “bringing Scrum back to being a minimally sufficient framework by removing or softening prescriptive language”.

In this article, we will review what was added, what was removed, what has not, and what you need to take care of.

For an audio version of the 2020 Scrum Guide, check this link

You can also see a side-by-side comparison of the new Scrum Guide here.

image taken from scrum.org

In a nutshell

Simpler language, more inclusion with the "Scrum team", Addition of "Why?" To Sprint Planning

The new Scrum guide adopted a simpler language and generally removed software-specific terminology.

The authors also reduced it's size, from 19 pages in 2017, to 14 pages.

No more "3 questions", no servant-leadership

The Scrum Guide is now less prescriptive, and more direct.

It eliminates many suggestions such as the Daily Scrum questions, removes the "at least one mandatory action item from the Retrospective becoming a part of the Sprint Backlog" part as well as the advice on why Sprint cancelations are rare events.

There is neither mention of the three questions during the Daily Scrum, nor of the term "servant leadership" of the Scrum Master.

No mention of "agile"

A very interesting fact though, is that there is not mention of the "agile" word!

Instead, there is an abvious shift towards getting Scrum to follow the "lean" principle.

Main motto not stated

Also, the obvious is no longer stated: Scrum is indeed not trivial to master.

In a bigger nutshell

Changes that are worth mentioning

Here are the bolder changes that are worth to review and reflect on:

1. No mention of the three questions during the Daily Scrum

OK, let's begin with the elephant in the room. No more 3 questions imposed in the Daily Scrum meeting!

Even in the 2017 versions, the three questions “What did I do yesterday that helped the Development Team meet the Sprint Goal?” and so on, were optional.

This means that the "Developers" (since there is no more a "Development Team"), can follow any structure they want, provided that it focuses on the plan for the day.

2. No more "Development Team"

That's right! The Development Team is no more. Long live the "Developers"!

This aims to eliminate the team within a team (often forming a silo) and normalize the often alienated relationship between the Product Owner and the Development Team.

Additionally, this change was to increase responsibility for the Product as one team and not just as the Product Owner.

Every member of the Scrum Team has the responsibility of the Product being built!

3. A brand new Sprint Planning

Since 2017, the focus on Sprint Planning was on "what we are building", and "how we are building it"
The Sprint Planning in 2020 has been enriched with a third topic - Why:

To make it easier for stakeholders to inspect a Product, the Scrum Team must now also focus on "Why" they are selecting the designated Backlog items, from the Product Backlog.

It's the job of the Product Owner to propose how this Sprint could increase the product’s value.

4. “Done” now creates a Product Increment

This change was made to embrace the quality of work.

According to the new guide:

"The Definition of Done is a formal description of the state of the Increment when it meets the quality measures required for the product.

The moment a Product Backlog item meets the Definition of Done, an Increment is born."

5. Definition of Done Created By Scrum Team

Alright, so this is a big change.

From the 2020 Scrum Guide:

“The entire Scrum Team is accountable for creating a valuable, useful Increment every Sprint.”

While there are still explicit accountabilities for the Product Owner, Scrum Master, and Developers, all three roles must work together effectively to be successful with Scrum.

This is another evidence that Scrum now is following a more holistic approach.

A Definition of Done is most effective when created as a collaboration among the entire Scrum Team.

So, next time you are planning your Scrum and defining the Definition of Done, don't forget to also include the Product Owner and the Scrum Master in the process!

6. Don't present partially done items in the Sprint Review

That's right. we already knew that partially "Done" items were not accepted as part of the Increment.
But, this version of the guide goes a step further: Don't present them, and never speak about them until they are "Done".

"The Definition of Done is a formal description of the state of the Increment when it meets the quality measures required for the product.

The moment a Product Backlog item meets the Definition of Done, an Increment is born."

7. A new term: The Product Goal

As the new guide states, there is a new kid around the block!

"The Product Goal describes a future state of the product which can serve as a target for the Scrum Team to plan against. […] The Product Goal is the long-term objective of the Scrum Team."

Don't freak out, the Product Goal is not entirely new, since Scrum teams had a goal anyway. (What is the point of building software if you don't have a goal...?)

But it now has a name and it is clearly defined.

The Product Goal provides context to the Product Backlog.

It can be thought of as the "why" we are doing all of this work. It can be used as the elevator pitch to "what is the Scrum Team working on?".

So think of it more as a 1-sentence way of describing the whole product, and why you are building it!

8. Don't treat Sprint Review as a "Release Gate"

Many Scrum teams have shifted from constructive Sprint reviews to "Release Gates", making the Sprint Review just a meeting to tell the Product Owner "You can go ahead and release the increment now!".

The new Scrum guide addresses this by stating that

"The Sprint Review should never be considered a gate to releasing value."

So use the Sprint Review to learn and reflect, and detach it from the release cycle.

9. New Product Explanation

With a brand new Product Explanation, it becomes clear that Scrum now shifts beyond just software. In my opinion, it won't be long before we see Scrum implemented widely in non-software teams, as well.

"A product is a vehicle to deliver value.

It has a clear boundary, known stakeholders, well-defined users, or customers.

A product could be a service, a physical product, or something more abstract."

10. Servant leadership no longer mentioned

Even if servant leadership is not mentioned directly, I don't think that the authors aim to shape Scrum Masters to be anything else than servant leaders.

The new guide describes the Scrum Master as following:

"Scrum Masters are true leaders who serve the Scrum Team and the larger organization."

It is now likely that the "Scrum Master" job title will include a job description that is larger than the accountabilities described in the Scrum Guide since it is treated as an organization leader role.

11. The spotlight is on the Scrum team

"The Scrum Team is responsible for all product-related activities from stakeholder collaboration, verification, maintenance, operation, experimentation, research and development, and anything else that might be required."

This is a more holistic approach than the previous version had. Now, it is clearly stated that it's not only developers who bear responsibility for the product, but the team as a whole!

12. "Commitments"

The Product Goal, the Sprint Goal, and the Definition of Done are now mentioned as "Commitments".

This is a bridge to connect Scrum Values (commitment, focus, respect, courage, openness) with the "Scrum Empiricism": Transparency, Inspection, and Adaptation.

The Scrum Guide describes a commitment as:

“Each artifact contains a commitment to ensure it provides information that enhances transparency and focus against which progress can be measured.”

Each of the three artifacts now contains "commitments" to them.

Product Goal is the commitment for the Product Backlog.
Sprint Goal is the commitment for Sprint Backlog.
Definition of Done is the commitment to the Increment.

Conclusion

The 2020 Scrum Guide includes significant changes to the framework to broaden its appeal to applications beyond software development.

It simplifies the language used, and it empowers the "Scrum Team", in favor of the "Development Team".

It also makes the Sprint more meaningful, by making the Sprint Goal obligatory.
Scrum Master as a role is now treated as a leader of the organization, and not just a mere coach who acts upon request, as a servant leader.

In my opinion, the changes are in the right direction.

More responsibility to the team as a whole, and an apparent need for the Developers to start collaborating more with the Product Owner.

The Product Owner now has more responsibility for the Product Backlog, since they have to explain the current Product Goal to the whole Scrum Team.

But, don't fret. As stated on scrum.org website, Scrum is still Scrum!

What is your opinion on the Scrum Guide 2020 changes?

How to introduce a new developer to a project

Paul Isaris — Mon, 17 Aug 2020 08:03:26 +0000

Introduction

Often, there is a need to introduce a new developer to the team for a specific project.
This onboarding process is never easy and sometimes tends to be painful for the new member and frustrating for the team, which has to keep working on the already defined tasks without a significant impact on their productivity.

Of course, this process differs from team to team and is proportional to the seniority level of the new team member, as well as the time they have been working at the company.

I will try to keep the following guide as abstract as possible, to accommodate most cases. Keep in mind, though, to tailor the recommendations to fit your team's needs and post your thoughts in the comments!

This guide assumes a typical 8-hour workday. It is further divided into subsections, with ideas about what to do during each time of the day. Feel free to update it according to the habits and ceremonies of your team, to maximize value.

The 2-day plan

Day 1

This is the first day that the new team member will start working along with your team. It is a very special day, of course!
You don't want to stress them or to make them feel lost, even though it is highly likely that they will feel overwhelmed anyway.
Try to be as cool as possible and not throw deadlines and project reports to their face.
Your job is to make them feel welcome and productive.

Day 1 - Morning:

A short overview of what the business does (an hour, tops) - understanding how the company makes money is essential. If the new developer is in the company already, then a brief introduction of the project is in order, along with the business side - how the project works and how the client makes revenue.
A short overview of the high-level architecture (no more than a couple of hours). If the team has already decided upon frameworks, Database technologies, 3rd party libraries, or external APIs, this is something that should be communicated in time.
A learning plan for project-specific technologies. The new developer needs to feel not only that they have the time required to get up to speed with all the languages and the frameworks, but also that there is no time to slack off, or feel unproductive.

Day 1 - Afternoon:

Update on the learning plan; Questions, answers, and a small update of what has been taught so far. The goal of this is that the new developer does not waste time researching everything about the new language/framework, but only this 20% that will get them going and become productive, according to the Pareto Principle
** learning** how to set up a project in the new language/framework. They will need to do that anyway so that it will come in handy.

Day 2

During this day, the new team member should get cracking with real project tasks. However, this doesn't mean that the learning stops. On the contrary, the learning now has a supplementary role, and it becomes less important as the tasks progress, and the developer feels more comfortable.

Day 2 - Morning:

** project set up and initialization**. If the project has an existing codebase, the new developer will need to clone it to their machine, set it up, and get it to compile/build/run (depends on the framework). This is usually not easy, and every other developer on the team needs to pay attention here.

Often, this process reveals a lack of proper documentation of the project. Developers sometimes assume things, especially for the installation/set-up procedure of a project. So this is an excellent opportunity to revamp the documentation of the project and make sure that there are no assumptions.
A specific task which gets them familiar with just one or two files in the codebase, done with one of the more experienced programmers sitting with them to help 1:1. It is crucial for a new developer not to feel alone on a task.
The best strategy is to assign them to a task that only exposes them to as few files as possible so that they don't feel lost.

Day 2 - Afternoon:

A couple of short specific tasks with an experienced programmer dedicated to helping a "small group of starters" (typically 2–3).
Flying solo on a small task, but knowing that they can ask for help [this never stops.
Repeat, with increasingly larger tasks, covering more of the codebase.

At this point, the new developer should already feel comfortable and productive. However, remember that as the difficulty of the tasks increase, they may feel overwhelmed again, and that's usually when the Impostor syndrome occurs.
So, it becomes obvious that the new team member should feel free to ask any questions, no matter how "stupid" or "obvious" they may seem.

What to do now - action points

After you have read this guide, it's time to get cracking and create your personalized onboarding plan!
Of course, your organization has its own rules and pain points, and the team your a member of may benefit from different situations and habits.

After all, it's your responsibility to create an onboarding guide that best fits and serves your team's needs.

So, go ahead and don't be afraid to spend some time writing down ideas and situations that you and your team found difficult and unsustainable in the past. Then, write how these problems could be alleviated, by applying the 2-day onboarding plan, and ** don't be afraid to try** your plan (we only get better by trial and error!)

Last thoughts

To conclude, adding a new member to a software team is not an easy task. Sometimes we forget how important the onboarding process can be, resulting in poor estimates (as the onboarding is hugely underestimated), Impostor syndromes, and confusion for the entire team.
Having a solid and effective onboarding plan is crucial as it ensures both productivity and good morale for the entire team.

10 Tips For a Productive Virtual Meeting

Paul Isaris — Wed, 01 Apr 2020 05:41:08 +0000

Photo by John Schnobrich on Unsplash

Originally published at paulisaris.com

Introduction

It's this strange time of the "Social distancing era", because of the coronavirus bizarre situation.
Regardless of how long this lasts or whatever the world will look like after it ends, it is for sure an interesting time to be alive and trying to make a living through a pandemic.

We, as developers, are fortunate enough to be able to still work with little to no severe impacts
in our everyday tasks and projects. Most of us have set-up our homework offices, poured ourselves a cup of
coffee or tea and get cracking with our tasks.

However, with everything that is happening around the world, teams now face the challenge of doing most of their work virtually. Meetings with the team and the clients, code reviews, Scrum events, all work-related social events have been moved to the "virtual world".

What this essentially means, is that we should find a way to remain productive and professional, even in this scenario.
Some of us have been having more experience with this, while some others are just being introduced to the world of virtual meetings, and they need some guidance.

In this post, I share 10 tips for ensuring that we have productive meetings and that value is being delivered, no matter the situation.

The Steps

1. Prepare some material beforehand

It's crucial for the meeting to be targeted towards a well-known goal and subject.
Spend some time to bring together a document (which preferably can be edited online by key participants). This is very important in the case that you are hosting the meeting.
In this document, specify the meeting goal (or leave it to be completed as soon as the meeting starts).

Also, don't forget to prepare any links, presentation files, videos, application credentials and notes that you may need during the meeting.

Being well prepared is a sign of utmost professionalism, something we all like to be congratulated for!

2. Prepare and check your equipment

Nobody likes to join a virtual meeting only to find out that their camera is not working or that their microphone is hissing and making weird noises.

At least 30 minutes before the meeting starts, dedicate some time to set up your equipment. Make sure that the room has the proper lighting for the camera, and that your voice sounds as expected through the microphone.

Most software applications for virtual meetings (eg Skype, Hangouts, Zoom, etc) have a built-in process for doing the tasks above. Spend 2 minutes before the meeting starts to do a final technical check-up and be ready!

3. Please, mute your microphone!

Seriously, I can't stress this enough. As long as you are not speaking, please mute your microphone. It makes everyone's life difficult and makes people want to leave the meeting even more.

Also, when the meeting starts, remind everyone of the golden "Mute when not speaking" rule.
It's extremely easy to unmute your microphone when you want to speak or ask a question.

If the Internet connectivity is not good during the meeting, you can kindly ask the other participants to close their cameras so that you can hear them (even though you will not be able to see them).

4. Set the mood for the meeting

If you are hosting the meeting, it's always a good starter to set the mood.
Start by asking you everyone is doing so that you add a personal touch. Remember, all participants are joining the meeting from their personal space which may include crying kinds, noisy neighbors, shouting construction site workers (even though the latter is not the case in a pandemic).

Begin by sharing the document from step 1, and ask everyone to confirm that they have access to see it. Remark the meeting goal and try to come up with an estimation of how long the meeting should be so that all the participants are on the same page and can organize their after-meeting tasks better.

5. Set the rules for the meeting

Again, this is very important, especially if you are the host. Remember, that some of the participants might be using the virtual meeting software for the first time, so it's a nice idea to take some time and explain how the meeting is going to run.

For example, you can start by prompting everyone to mute their microphones (after the introductions of course) and use the "raise hand" functionality when they want to intervene.

Besides, it goes without saying that if a participant is acting selfishly (by not letting others speak for example), you should address the problem by reminding them of the rules throughout the meeting.

6. Prepare your environment for screen-sharing ;-)

When participating in a virtual meeting, you might need to share your screen for several reasons. Be it that you want to show something to the people or to showcase the application you have been working on to a client.

The thing is that during this pandemic era, we are working from our home setups. This means that you will probably be using your home computer to join the meeting.
So, your desktop, web browser and applications window should be in a "presentation-ready" state ;-)

7. Don't be afraid to close the camera

Working from home also means using the home network. Especially in the case that you are using Wi-Fi, your Internet connectivity might not be the best. To add insult to injury, remember also that, because most people are working from home, Internet networks are stressed already and you might not get a good service.

In the unfortunate event that this happens, excuse yourself by explaining the situation and feel free to close your camera. After all, the important part of the meeting is probably to be able to hear the other participants and be able to communicate with them.

8. Revise often and take notes

It is a common scenario that virtual meetings go on forever, and after a while, people don't pay attention to what is being said. After all, there is no one around to restrain them from checking their phones or open a new tab in the browser...

You should make sure that value is being delivered through the meeting. So note-keeping will both keep you concentrated on the meeting and will result in an organized after-meeting roadmap for the next steps.

Additionally, if you are the host of the meeting, you should often vocally revise what is being said, to wake up the participants who are slacking off and prompt them to voice any objections or additions they might be having.

9. Resist the urge to check your phone

As stated in the previous step, it is a common thing for virtual meetings to result in only a handful of people paying attention while all the others are checking and replying to their e-mails or checking their social media.

It's important to resist the urge to do so! Remember, participating in a meeting -whether virtual or not- means that you have the responsibility to be present in your full professional "outfit". After all, you might miss something really important which will probably result in numerous other meetings and e-mails!

10. There will be chaos. And that's OK!

Sure, everybody will try their best for the meeting to be as efficient and productive as possible. However, bear in mind that chaos (either technical or not) should be expected.

The microphones will not be operating as planned, networks will fail, whole sentences will be asked to be repeated for people who "did not quite catch the last 5 minutes of your talk".

And you know what?

This is perfectly fine. As developers, we are experienced in working with technical difficulties and finding alternate solutions to our problems: Skype is not working? Let's all switch to Zoom. Microphone not working? Fine, write in the chatbox.
The whole meeting thing is not working? Fine, let's either organize another time for it or compress it in an e-mail (after all, most meetings should have been e-mails, right?)

Conclusion

In these strange yet important times, it is more vital than ever that we are able to prove that technology is helping things keep moving and we -as a purely technological field- are obliged to do so.

What are your thoughts on virtual meetings?

Scrum Events demystified - Sprint Planning

Paul Isaris — Tue, 18 Feb 2020 15:29:18 +0000

post photo by pexels

Introduction

This post is the second part of the "Scrum events demystified" post series. You can find the first part here:

Scrum Events demystified - The Sprint

Paul Isaris ・ Feb 2 '20

#agile #productivity

In order to successfully execute the Scrum tasks and maximize the Increment value, a team needs to pay attention to the chronologically first Event in the Sprint; The Sprint Planning event.

About Sprint Planning

Sprint Planning is a time-boxed event (as all events are in Scrum).
Time-boxed means that it has a predefined, specific time span,
and should start and end exactly when this period dictates.

For example, the team might agree upon having one-month Sprints.
Other teams might be more comfortable and productive with 2-week Sprints.

For 1-month Sprints, the Sprint Planning event should be 8-hours long.

Who should attend the Sprint Planning event?

Everyone (Product Owner, Scrum Master, Development team).

The Sprint Planning event's goal is to address the following topics:

Selecting the work to do in the Sprint

The product owner explains the backlog items to the Development team.
The development team determines the number of backlog items that will be brought into the Sprint Backlog
Planning how the sprint work will be done

The Development Team does this. The Development Team needs to only do necessary planning work for the first few days of the Sprint. As the development team analyses the work they selected from the backlog, they can renegotiate the work with the Product Owner.
Ideally, the Sprint Backlog tasks are decomposed so they can be finished within a business day.

During the Sprint Planning event, the Development Team is supposed to construct the Sprint Backlog, a collection of tasks that will be owned and developed by the Developers.

According to the Scrum Guide:

"The Sprint Backlog is a plan with enough detail that changes in progress can be understood at the Daily Scrum”

Most common questions and misconceptions about Sprint Planning

Why is Sprint planning important?

Sprint Planning is important because the outcomes of it are the Sprint Goal and a plan of delivering the Increment. Both the Sprint Goal and -of course- the Increment are integral parts of the product development process and define whether the product will be successful or not.

Should the Sprint Backlog remain intact after Sprint Planning?

No. The Development Team modifies the Sprint Backlog throughout the Sprint, And the Sprint Backlog emerges during the Sprint. This emergence occurs as the Development Team works through the Sprint and gains more knowledge about the work.

Should the tasks in the Product Backlog be User stories?

No. Actually, the tasks in the Sprint Backlog can be expressed however the Development Team desires, as long as they are clear and communicate the work to be done.

How are the Product Backlog items prioritized and by whom?

In Scrum, The Product Owner is responsible for maximizing the value of the product and they manage the Product Backlog as such. During Sprint Planning the Product Owner suggests the objective of the upcoming Sprint and proposes which Product Backlog Items will help achieve this objective. So, the items in the Product Backlog are ordered by value. The most important ones go at the top so that they are selected for the next Sprint Backlog.

Does the whole Scrum team agrees on the estimates for a task?

No. Only the development team creates estimates, which can, of course, be communicated with the other stakeholders (Product Owner and business stakeholders), but in no way negotiated with them.

When a task is assigned to a developer, are they solemnly responsible for it?

No. All tasks in the Sprint Backlog belong to the whole Development Team and the whole Development Team is responsible for them.

Is the Sprint Backlog just a collection of tasks selected from the Product Backlog, to be done in the current Sprint?

No. The Sprint Backlog also contains a plan of how the work will be done. It might contain tasks, sub-tasks, notes, and development guidelines.

Conclusion

In conclusion, the Sprint Planning event is a time-boxed event, during which the Scrum Team discusses the next Sprint, it's goal and how this goal will be achieved. The Product Owner prioritizes the user stories in the Product Backlog and the Development Team picks the user stories and creates estimates for them.

The team discusses in more detail how they will deliver the selected product backlog items. This may (but does not have to) include identifying tasks for the product backlog items, whether there are any dependencies between the items, and discussing the technologies or development paradigms that will be utilized.

In this series, I will be clarifying all Scrum events and demystifying the most common misconceptions about them.

Please share your thoughts in the comments, and stay tuned for the
next part of the series!

Scrum Events demystified - The Sprint

Paul Isaris — Sun, 02 Feb 2020 09:36:49 +0000

post photo by pexels

This post was originally published on my personal blog

Introduction

This post is the first part of the "Scrum events demystified" post series.
In this series, I will try to shed some light on the most common events in the Scrum framework.

First things first, let's begin by defining Scrum:

According to the Scrum Guide:

Scrum (n): A framework within which people can address complex adaptive problems, while productively and creatively delivering products of the highest possible value.

Scrum is a process framework that has been used to manage work on complex products since the early 1990s.

Scrum is not a process, technique, or definitive method. Rather, it is a framework within which you can employ various processes and techniques.

Scrum makes clear the relative efficacy of your product management and work techniques so that you can continuously improve the product, the team, and the working environment.

Indeed, Scrum is successfully used for many years now, from teams that want to carry out risky projects in an Agile way.
A critical part of the Scrum methodology is the Scrum Events.

All in all, Scrum (as much as most Agile methodologies) has an
allergy when it comes to long, pointless meetings that include
business people and only result in:

Countless hours lost from what could have been productive work
Developers wondering what they did to deserve one more PowerPoint presentation
A ton of calories gained from the pastries that are usually served

Today I will be presenting the heart of Scrum,
the most important of all Scrum events; The Sprint.

Disclaimer: Some might argue that the Sprint is , not
an event itself since it merely acts as a container for all other
Scrum events. This, of course, is true, but it is beneficial to treat it as an event (or a pseudo-event) to get a better grasp of what Scrum is about.

About the Sprint

The Sprint is a time-boxed event (as all events are in Scrum).
Time-boxed means that it has a predefined, specific time span,
and should start and end exactly when this period dictates.

For example, the team might agree upon having one-month Sprints.
Other teams might be more comfortable and productive with 2-week Sprints.

It is generally up to the whole Scrum Team to decide the time span,
given considerations such as the team composition, the risk of the project,
and the team members' availability.

Once the Sprint starts, the team focuses on the tasks that were selected for work and that will add up to the final Sprint Increment, for the pre-defined Sprint Goal to be completed.

These tasks (and the Sprint Goal) should have already been defined and agreed upon during Sprint Planning (another Scrum event that will be presented in the next article of the series).

During the Sprint, the team is supposed to work uninterrupted on the tasks that compose the Sprint Backlog. Any external changes and requests are not welcome, since they are destined to decrease productivity, and should either be discarded or be dealt with by the whole Scrum Team.

Most common questions and misconceptions about Sprints

What is the maximum time for a Sprint? Can the team have 2-month Sprints?

The maximum time that a Sprint may last is one month. Anything more
than that decreases focus and should be broken into multiple Sprints.

What does the team need to start a new Sprint?

For a Sprint to start, the team needs 3 things:

A Sprint Goal
The Sprint Goal is set during the Sprint planning and should not change during the Sprint. It describes what the output of the Sprint
should be and is agreed upon by the whole team
A Sprint Backlog
The Sprint Backlog is the collection of tasks that should be done during the Sprint. They are picked from the Development
Team by looking at what the Product Owner has prioritized in the Product Backlog.
A General plan of how the team should do the work
During Sprint Planning, the team decides not only what should
be done during the Sprint, but how things should be done.

This has to do with the Definition of Done the team has set for
the project and should be flexible enough to tolerate unexpected changes, and evolve with them during the Sprint.

Who is responsible for defining the Sprint Goal for a given Sprint?

The Product Owner is responsible for maximizing the value of the product
and they manage the Product Backlog as such.

During Sprint Planning the
Product Owner suggests the objective of the upcoming Sprint and proposes
which Product Backlog Items will help achieve this objective.

Can the Sprint Goal change during the Sprint?

No. As the Scrum Guide states:

No changes are made that would endanger the Sprint Goal.

If the Sprint Goal becomes obsolete or does not make sense anymore,
then the Sprint should be canceled by the Product Owner

Can a Sprint be terminated before the designated date? Who is responsible for terminating it?

Yes. As I described above, a Sprint can be canceled if ** its goal becomes obsolete*. This may happen when the business goals of the company change, or the market needs dictate so.
The only person able to cancel the Sprint is the **Product Owner*.

What if the Development Team finishes all the work that is in the Sprint Backlog?

The Sprint Backlog (the collection of tasks that the team has agreed
to carry out during the Sprint) is subject to change.

If all the tasks are done ("done" as to meet the Definition Of Done), the Development team can choose new tasks from the Product Backlog and bring them into the Sprint Backlog.

What if at the end of the Sprint there are unfinished tasks in the Sprint Backlog?

This is again very common. A remark that should be made here is that
the Development Team agrees to complete a set of tasks during the Sprint,
but is in no way obliged to complete them at any cost.

When the time is over, the Sprint is over as well. Any unfinished tasks
do not count as part of the Sprint output and are put back into the Product Backlog.
Usually, these tasks will be brought into the Sprint Backlog of the next Sprint, for the Development Team to finally complete them.

What happens between 2 Sprints?

Nothing! As soon as the first Sprint is over (and by "over" we mean that all of other events contained in this Sprint are done), the new Sprint begins right away.

What if someone from the Development Team leaves the company during a Sprint?

These changes are not common, but the Development Team and the Sprint should be Agile enough to tolerate such changes.

Usually, there may be a decrease in productivity for some time, and some tasks might remain unfinished and go back into the Product Backlog when the Sprint ends.

Conclusion

In conclusion, the Sprint is a time-boxed event, during which the Development Team works towards a pre-defined goal that will add value to the product (the Increment), and acts as a container for other
Scrum events.

In this series, I will be clarifying all Scrum
events and demystifying the most common misconceptions about them.

Please share your thoughts in the comments, and stay tuned for the
next part of the series!

Creating a pagination component in Vue JS

Paul Isaris — Sat, 12 Oct 2019 12:27:00 +0000

Introduction

This article was originally published at my blog.

post photo by pexels

Vue.js is a progressive JavaScript framework that allows you to create compelling
user interfaces efficiently and easily.

In this post, we are going to create a pagination component, able to have a dynamic number
of steps!

Our final application will look like this:

Of course, you can find the Github repo here:

PavlosIsaris / Vue.js-pagination-example

This is a simple Vue.js application showcasing a basic pagination component.

Project set up

use the vue cli to create out app:

npm install -g @vue/cli

Next, we make use of the CLI to create all the boilerplate for our app:

vue create pagination-component-vue-example

In order to verify that the initialization part was successfully completed,
let's go into our project's directory and serve our app:

cd pagination-component-vue-example
npm run serve

If everything goes as planned, we will receive no error messages, and will
see the Vue.js default page upon navigating to http://localhost:8080/:

Vue runs some initialization commands, and our project has been created.

It's time to design our app!

We will create a pagination component that will take as parameters

And we will use the app component in order to test it.

First thing first, let's get rid of the src/components/HelloWorld.vue.

We are going to create a src/components/PaginationComponent.vue which will hold
the logic for our pagination component.

In this tutorial, I will use Bootstrap in order to
style the HTML in a clean way, but feel totally free to skip this step (or use another HTML library).

Change src/App.vue to reflect the following:

<template>
  <div id="app">
    <pagination-component></pagination-component>
  </div>
</template>

<script>
import PaginationComponent from './components/PaginationComponent.vue'
import 'bootstrap';

export default {
  name: 'app',
  components: {
    PaginationComponent
  }
}
</script>

<style>
  @import "~bootstrap/dist/css/bootstrap.min.css";
</style>

For the time being, we can leave our src/components/PaginationComponent.vue empty and dumb:

<template>
   I'm an example component.         
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Designing our pagination component

Now, we need to converge on what our pagination component should do, what it's limitations would be,
and how it should be used by our app.

In my app, I decided that I would like to have a "only backwards free" strategy, meaning that
Once the user is on the n'th step, they should only be able to navigate to previous steps through
the navigation links.

In order fo the user to move forward, they need to click on the "Next" button.
This may come in handy when you have a paginated form with steps, in which you would like to\
perform some sort of validation before allowing the user to proceed to the next step.

Having these functional requirements in mind, we can construct a steps array that will
be passed from the app component own to the pagination component.

So, let's change our App.vue to reflect the following:

<template>
  <div id="app">
    <pagination-component></pagination-component>
  </div>
</template>
<script>
import PaginationComponent from './components/PaginationComponent.vue'
import 'bootstrap';
export default {
  name: 'app',
  components: {
    PaginationComponent
  },
  data() {
    return {
      steps: [
        {
          title: 'Introduction',
          allowNext: false
        }, {
          title: 'Second',
          allowNext: false
        }, {
          title: 'Third',
          allowNext: false
        }, {
          title: 'Final',
          allowNext: false
        }
      ]
    }
  }
}
</script>

We constructed a steps array, which will define the different "pages" in the pagination component.
The allowNext property can define whether we would like the user to be able to go to the next step by clicking on
the pagination link.

Dynamic number of slots

Next, we would like to hae a way of defining a dynamic number of slots in the pagination
component, so that we can pass as many steps as we want.
Before that, let's redesign our pagination component to reflect the following:

As we can see here, we use the steps prop in order to show the pgination header link (as a
bootstrap breadcrumb item), as well as the corresponding Vue slot.

Creating the dynamic slots

Now, its time to tie it all together!
Update App.vue to reflect the following:

As you can see, we pass a dynamic number of template components, that will serve as each
of the steps' content. The limitation here is that the number of the templates should be equal to
the number of the steps that we create in the data section of App.vue.

Example Usage

Pretty cool, huh?

How to be awesome at your daily stand-up with 7 steps

Paul Isaris — Tue, 20 Aug 2019 15:53:23 +0000

This article was originally published at paulisaris.com

Introduction

A daily stand-up meeting is an essential part of many workplaces these days.

Either when following the Scrum methodology or simply
when wanting to tighten the bonds between the team members and stakeholders,
the performance of the daily stand-up can either make or break your day.

Let's be honest here. Every workplace does their stand-ups differently.
But that's really OK! It's not another formal, dull meeting that requires you to stick
to the procedure. On the contrary, stand-up meetings are part of the Agile
approach, meaning that the practices and procedures should be adaptive and flexible.

A good and compact stand-up meeting is a great way to organize a team and plan your day.
However, sometimes the meeting gets a bad rap.
Some even argue it’s an outdated practice and a waste of time.

So, I put together the best tips and tricks to help your daily stand-up meeting run
like a lean, mean, effective machine.

What is a stand-up meeting, to begin with?

According to Wikipedia:

"A stand-up meeting (or simply "stand-up") is a meeting in which attendees typically participate while standing. The discomfort of standing for long periods is intended to keep the meetings short."

But, why on earth would we want to be uncomfortable when having a meeting?

Truth be told, meetings suck. And, especially in the Software Development industry, meetings suck big time.

Endless hours, managers and other business-related people demanding financial and sales goals, powerpoint presentations, and bowls with stale cookies are usually the settings which make us, developers, wanting to jump out of the closest window.

With the introduction of Agile and Lean development methods, there is a profound need to eliminate these deadly meetings, while keeping all team members informed. And voila, we now have the stand-up meeting, aiming to be extremely compact and productive. No bullshiting, no long introductions, no stale cookies. Just the gist of the day!

So, let's see a list of rules that will help you perform well in your stand-up, and manage to get the most out of it:

1. Cut it short

Make sure you respect the stand-up rules, pal. "The discomfort of standing for long periods is intended to keep the meetings short.", so why torture your fellow co-workers?
A key point here is to plan ahead. Note down the high-level tasks you accomplished last day, and try to focus only on the main problem you face today.
This will not only help in keeping the meeting short, but it will also keep your focus on the main impedance, for which you may ask a co-worker for help after the meeting. ;)

Survival Tip: Keep notes before the meeting

2. Respect (and don't interrupt) others

I know that you want to help. I know that you are just a good comrade who has something to add to the conversation and has to do it NOW.
But for the love of God, let the speaking person finish. They are trying to squeeze a hard ay's work into 1 minute, so don't make it more difficult for them!

Also, try not to converse with others while someone is talking. It's just bad manners. The whole meeting is just a few minutes long, I bet you can wait until it's over.

Survival Tip: Keep notes during the meeting, so that you can elaborate on what others said, later on.

3. Don't look at your phone (or computer screen)

Keeping meetings sane is all about respect. And you may be disrespectful even without knowing it. Glancing at your phone to check your social, or checking your emails/perform an update on your computer may be tempting tasks to perform while someone is talking, but just imagine how you would feel when, while saying something important, everyone was staring at their screens or scrolling through Instagram...

Don't worry, an effective stand-up meeting is only several minutes long, so you will have the chance to re-connect with the online world soon enough.

Survival tip: put your phone away and turn off your screen as soon as the stand-up meeting kicks off.

4. Shape your high-level tasks

I know that you struggled with that Database connection for half a day and tried to debug that @&)&@#! outdated npm package version mismatch for the better part of this day.
Honestly, nobody wants to hear about that, not in this level.

Especially when having non-developers participating in the stand-up meeting, it is crucial to shaping your tasks in a way that will be comprehensible by all members.

Keep in mind that learning how to describe a technical task in a non-technical way is of great importance in general;
It will make you look like a human to non-developers and will boost your soft skills greatly!

Survival tip: Write down your tasks and, for each task, come up with a high-level, non-technical title.

5. Prioritize, prioritize, prioritize

I simply can't stress this enough. Just think about it: You participate in a meeting and you have seconds to describe a full day's work.
Don't make the mistake of beginning with the most recent tasks. I know that it's these tasks that pop into your mind more easily, but you should prioritize first what *would make sense for the other members, as well.

If you have a task involving another member, or if you have an update on a task that concerns someone else, please be a lamb and start with that one!
You will catch everyone's attention more easily, and they will able to chip in with their feedback as well (after the meeting has ended).

Survival tip: Start with tasks concerning other team members, before losing their attention.

6. Ask for help

You heard me. Stand-ups are not just about describing a list of tasks you did. On the contrary, they are also about ensuring that you will make it through the day so that you will be able to describe new tasks tomorrow (hehe).

If you face a problem regarding something and you are passed the point of googling it with no success, you should ask for help. Asking for help is not about being ignorant or lazy. It's about being professional. Your goal is to do your tasks and if some other co-worker can help you with that, then they can help you with your goal.

So, don't be selfish and ask for help before losing more time trying on your own. This does not mean of course that you should ask for help every time you face a problem. You should be (or become) mature enough to admit when you can't go on on your own but would like some help.

Survival tip: Make sure you ask for help on time, by forming the right questions.

7. Proactively offer help

Continuing from the previous item, it's easy to imagine that many people have a hard time when asking for help. Your job is to solve problems, so why making it difficult for them? If you pay attention to what others say during the stand-up, you will find plenty of chances to offer your help.

Being a technical problem you have faced before or a non-technical task you have already encountered, there are many things which you can help alleviate. Your co-workers will look up to you as a role model, and they will become even better at asking and offering help.

Survival tip: Listen carefully to what others say. You will find many chances to offer your help.

Conclusion

Stand-up meetings should not be another dull chore in the office.
When done correctly, they can prove a beneficial asset to any team and
can even strengthen the bonds between the team members.

With the right steps, we can make sure to make the most out of them,
by being focused on efficiency and respecting your co-workers.

Getting started with Angular Material - Creating a custom Dialog Component

Paul Isaris — Tue, 30 Apr 2019 19:32:59 +0000

Introduction

This article was originally published at paulisaris.com

Angular is a popular framework for building single-page, interactive applications.

With Angular gaining more popularity, we have the opportunity to use libraries that provide us with built-in UI components that allow us to focus on the code that will make our app stand out. ;)

In this tutorial, we will examine how to use Angular Material in order to build a clean and reusable dialog component.

We will focus on reusability, meaning that we will build a single custom dialog component that we will call when needed via a service class.
This will help us avoid duplication of HTML templates and CSS classes, as well as improve Separation of concerns throughout our app.

You can find the sample project in my Github repository

PavlosIsaris / Angular-playground

A simple angular app demonstrating Angular Material components

AngularPlayground

This project was generated with Angular CLI version 7.3.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Getting started

Before writing any code, we need to set up our project. Angular uses a command line interface (CLI in short) in order to use its various commands. This tool can be installed as an npm dependency.

We assume that you have npm installed as a global dependency on your system.
You can verify a correct npm installation by running:



paul@spiderman:~$ npm -v
6.4.1

(Yes I name all my computers with Superhero names, isn't that totally awesome?) :D

Great, since we have npm installed, we can go ahead and install the Angular CLI tool:



npm -g i @angular/cli

(-g states that the dependency will be installed globally)

If the installation process finishes successfully, we can use npm to print all global dependencies:



paul@spiderman:~$ npm -g ls --depth=0

/home/paul/.nvm/versions/node/v10.15.3/lib
├── @angular/cli@7.3.8
└── npm@6.4.1

Great! Let's create a playground project to start coding!



ng new angular-playground

After we have selected the desired set up configuration options, we can go to the project's location and start the project:



cd angular-playground

ng serve

If everything goes according to plan, we should be able to navigate to http://localhost:4200/ and see the default Angular starting page.

Adding Angular material to our project

Now, it's time to install Angular material and make use of it's built-in components.

As stated in the installation guide, we use the following npm command to install Angular Material:



npm install --save @angular/material @angular/cdk @angular/animations

Next, we need to enable animations. Go to src/app/app.module.ts and add the following:



import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

Also, we need to specify a CSS theme that our application will be using when showing Angular Material components.

We will use the default indigo-pink theme, by adding the following import statement into src/styles.scss:



@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Great! Angular Material is set up and ready to be used.

Creating the custom dialog component

Next, we need to create a new Angular component that will serve as a wrapper to MatDialog component, which in turn is the native dialog component in Angular Material.
The point here is to create a universal Angular component for our app in order to style it as we wish and include any required business logic code there.

We can use Angular CLI and execute the following:



ng g c dialog

A new component was created in src/app/dialog/.
Navigate to src/app/dialog/dialog.component.html and delete the boilerplate HTML.

We also need to add the DialogComponent to the entryComponents array in src/app/app.module.ts class:

Creating the dialog service

We will use Angular Services in order to create a class that will serve as a Singleton.
The purpose of this class is

Define a way to pass customization data for the dialog component
Provide an easy way for every other component to use a dialog component

Again, we can use Angular CLI to create the service:



ng g s services/dialog

Cool, Angular has created our service located at src/app/services/dialog.service.ts.

We also need to add this service to the providers array in src/app/app.module.ts class, since we would like to have it available app-wide.

The first step is to define an interface with the data that we will be passing each time we need to create a new dialog.
Create a src/app/shared/dialog-data.ts to include the following:



export class DialogData {
  title: string;
  message: string;
  showOKBtn = false;
  showCancelBtn = false;
}

As it is stated in the interface, we can give a custom title and message for the dialog, as well as whether we would like to also show "OK" and/or "Cancel" buttons.

Structuring the custom dialog component

It's time to set up the dialog component we created before.
Head to src/app/dialog.dialog.component.ts and add the following:



import {Component, Inject, OnInit} from '@angular/core';
import {DialogData} from '../shared/dialog-data';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData, private dialogRef: MatDialogRef<DialogComponent>) {}

  close() {
    this.dialogRef.close(true);
  }
}

Next, head over to src/app/dialog.dialog.component.html to add the required HTML template:

Defining the openDialog method

Next up, we need a method in our service that will create and handle the dialog component. Let's add this method in src/app/services/dialog.service.ts:

The additionalDialogConfigData object passed, is Angular Material optional configuration for our dialog component.

Before creating the dialog component, we check to see whether there is another dialog open, and we close it first.

Cleaning up app component

Let's add a button (Material style of course) into our app root component, to test our custom dialog.

Head over to src/app/app.component.html and delete the boilerplate code.

Setting up app component

In order to add the button, we need to import MatButtonModule into our app.module.ts file first:



@NgModule({
  declarations: [
    AppComponent,
    DialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Add the following to src/app/app.component.html:



<div class="wrapper">
  <button mat-raised-button color="primary" (click)="openDialog()">Show dialog</button>
</div>

And the following style to src/app/app.component.scss:



.wrapper {
  margin-top: 5rem;
  text-align: center;
}

We are using an openDialog method in our html template. Head over to src/app/app.component.ts to define the method:



import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-playground';

  openDialog() {

  }
}

Using the dialog service

In our openDialog method, we would like to call the openDialog method defined in src/app/services/dialog.service.ts file.
In order to do that, we need to use Angular's dependency injection to get an instance of Dialog service in our app component.

Go ahead and add the dependency in src/app/app.component.ts constructor:


 javascript
import {DialogService} from './services/dialog.service';
.
.
.
constructor(private dialogService: DialogService) {}

Calling dialog service

And now for the fun part!
First, we need to create an object as described in app/shared/dialog-data.ts interface.

modify src/app/app.component.ts to reflect the following:

... and that's it! If we head over to http://localhost:4200/ , we can click on the button and see a clean, natively styled dialog:

Also, if we open the console, we can see the appropriate logs when we click either the "OK" or the "Cancel" buttons.

You can find the sample project in my Github repository

PavlosIsaris / Angular-playground

A simple angular app demonstrating Angular Material components

AngularPlayground

This project was generated with Angular CLI version 7.3.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub

Awesome, right?

Conclusion

Angular is a powerful ecosystem for building single page, interactive applications.

Angular Material is a collection of beautifully designed and clean components that you can easily integrate into your app and can save you countless hours of templating and theming.

When using an Angular Material component, think about how you can abstract it and isolate it even more by using a service, so that you can easily re-use it throughout your app!

DEV Community: Paul Isaris

Mastering Code Quality in Laravel: Pint with Git Hooks and Docker

Mastering Code Quality in Laravel: Pint with Git Hooks and Docker

Introduction

Why Use Pint in Laravel?

Setting Up Pint in a Laravel Application

Step 1: Create a New Laravel Application

Step 2: Install Laravel Pint

Step 3: Automating Pint with Husky and Git Hooks

Using Pint Inside Docker

Step 4: Setting Up Docker for Pint

Step 5: Running Docker Compose

Bonus: Best Practices for Running Pint in Laravel Applications

Conclusion

Make Windows Terminal Awesome with ZSH and Oh My ZSH!

TL;DR

Table of Contents

Introduction

Embracing ZSH on Windows

Introducing ZSH: The Ultimate Shell Experience

Oh My ZSH!: ZSH Supercharged

Step 1: Install Git + Git Bash for Windows

Step 2: Installation and Configuration of ZSH in Windows

2.1: Download ZSH

2.2: Install ZSH

2.3: Verify the ZSH Installation

2.4: Set ZSH as the Default Shell

2.5: Fix Displaying of Unexpected Characters

Step 3: Installation and Configuration of Oh My ZSH! on Windows

3.1: Installation of Oh My ZSH!

3.2: Customization of Oh My ZSH!

Fonts

Theme

Conclusion

My Hacktoberfest 2022 contributions

Intro

SciFY Not-for-profit Company · GitHub

Background

Progress

Contributions

1. ICSee (I Can See) Android app for people with low-vision

scify / ICSee

ICSee runs on small portable devices (smartphones, tablets) and makes reading and object identification easier. Simply, conveniently and always available!

ICSee

Abstract

Implementation

Compilation - Requirements

2. Dianoia mobile app for people with emerging, early-stage dementia

scify / Dianoia-app

Mobile (Ionic 3 - Angular 4) app about non-pharmaceutical activities and information for people with dementia.

Dianoia - Ionic Mobile app

Non-pharmaceutical activities for people with dementia.

Pre-setup steps

Install project dependencies:

Execution

Generating icon and splash screen for all platforms

Reflections

PHP 8 Is here! A step in the right direction?

Introduction

New features

Named arguments

Named Parameters example

My thoughts on named parameters

Attributes

Attributes Example

Constructor property promotion

Constructor properties example

My thoughts on Constructor property promotion

Union types

Union types example

My thoughts on Union types

Match expression

My thoughts on the match expression feature

Nullsafe operator

Example of nullsafe operator

My thoughts on nullsafe operator

Saner string to number comparisons

My overall thoughts on PHP 8

What’s New In the 2020 Scrum Guide Update

Introduction