DEV Community: Dannyvpz

Improve window powershell promt with oh-my-posh and more

Dannyvpz — Thu, 09 Dec 2021 17:35:20 +0000

All the content of this article referring to this awesome video by devaslife, check out his channel for detail steps and find more cool videos

Neccessary tools

1> WSL - Window terminal (from Microsoft store)
2> Powershell (from Microsoft store)
3> Scoop installer - check this

Install scoop

Make sure PowerShell 5 (or later, include PowerShell Core) and .NET Framework 4.5 (or later) are installed. Then run:



iwr -useb get.scoop.sh | iex

Note: if you get an error you might need to change the execution policy (i.e. enable Powershell) with



Set-ExecutionPolicy RemoteSigned -scope CurrentUser

Set PATH for scoop command in System Properties > Advanced > Environment Variables.

Add new directory path in System variables > Path, choose scoop directory C:\Users\<USERNAME>\scoop\shims

Close and reload terminal.

Install some neccessary packages via scoop

jq is optional
Run



scoop install curl sudo jq

Install Nerd Fonts

Got to this link and download FuraCode font from Nerd Fonts
Extract and right click >> Install the font.

Setup Window terminal

Choose Powershell as default.
Checkout appearance tab of Powershell and choose FuraCode Nerd Font Retina as default font.
Select Color scheme One Half Dark and enable Acrylic option with opacity 50% to have a better Window terminal display.

Install Neovim (optional)

Run



scoop install neovim gcc

Install some nice modules to improve powershell

1> posh-git

Provides prompt with Git status summary information and tab completion for Git commands, parameters, remotes and branch names.



Install-Module posh-git -Scope CurrentUser -Force

To import module run



Import-Module posh-git

(To import module automatically when shell starting need to set in User Profile, this can be found at the end of article, same for all modules)

2> oh-my-posh

Theming capabilities for the PowerShell prompt in ConEmu



Install-Module oh-my-posh -Scope CurrentUser -Force

To import module run



Import-Module oh-my-posh

Set Promt theme using



Set-PoshPromt -Theme <THEME_NAME>

THEME_NAME can be found here

3> Terminal Icons (display icons of folder/files)

Run



Install-Module -Name Terminal-Icons -Repository PSGallery -Force

To import module run



Import-Module Terminal-Icons

Result:

4> Z directory jumper
Jump easily between to recent directories with alias
Run



Install-Module -Name Z -Force

To jump just type z + any word contain in recent directory used in cd command, check the module for more detail.

5> PSReadLine - Autocompletion recent command on typing
run



Install-Module -Name PSReadLine -AllowPrerelease -Scope CurrentUser -Force -SkipPublisherCheck

Set PSREadLine option



Set-PSReadLineOption -PredictionSource History

6> Fuzzy finder
Run



scoop install fzf

And



Install-Module -Name PSFzf -Scope CurrentUser -Force

To import module run



Import-Module PSFzf

and



Set-PsFzfOption -PsReadLineChordProvider 'Ctrl+f' -PSReadLineChordReverseHistory 'Ctrl+r'

Now time to enjoy the result.

Custom oh-my-posh theme

You can customize the json config for oh-my-posh prompt, detail documentation can be found here, the json below was modified from M365Princess theme to personalize the colors & add new line command.

1 >> Create oh-my-post json file at ~/.config/powershell/<file-name>.omp.json



{
  "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
  "final_space": true,
  "blocks": [
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "session",
          "style": "diamond",
          "foreground": "#ffffff",
          "background": "#031d44",
          "leading_diamond": "\uE0B6",
          "trailing_diamond": "",
          "properties": {
            "prefix": "",
            "template": "{{ .UserName }}"
          }
        },
        {
          "type": "path",
          "style": "powerline",
          "powerline_symbol": "\uE0B0",
          "foreground": "#ffffff",
          "background": "#04395e",
          "properties": {
            "style": "folder"
          }
        },
        {
          "type": "git",
          "style": "powerline",
          "powerline_symbol": "\uE0B0",
          "foreground": "#ffffff",
          "background": "#70a288",
          "properties": {
            "fetch_stash_count": true,
            "fetch_upstream_icon": true,
            "branch_icon": "",
            "fetch_status": false,
            "template": "{{ .UpstreamIcon }}{{ .HEAD }}{{ if gt .StashCount 0 }} \uF692 {{ .StashCount }}{{ end }}",
            "prefix": " \u279C (",
            "postfix": ") "
          }
        },
    {
      "type": "php",
      "style": "powerline",
      "powerline_symbol": "\uE0B0",
      "foreground": "#ffffff",
      "background": "#4063D8",
      "properties": {
        "prefix": " \ue73d ",
        "enable_hyperlink": false
      }
    },
        {
          "type": "node",
          "style": "powerline",
          "powerline_symbol": "\uE0B0",
          "foreground": "#ffffff",
          "background": "#dab785",
          "properties": {
            "prefix": " \uE718 "
          }
        },
        {
          "type": "time",
          "style": "diamond",
          "trailing_diamond": "\uE0B0",
          "foreground": "#ffffff",
          "background": "#d5896f",
          "properties": {
            "prefix": " \u2665 ",
            "time_format": "15:04"
          }
        }
      ]
    },
    {
      "type": "prompt",
      "alignment": "left",
      "newline": true,
      "segments": [
        {
          "type": "text",
          "style": "plain",
          "foreground": "#007ACC",
          "properties": {
            "prefix": "",
            "text": "\uE602"
          }
        }
      ]
    }
  ],
  "final_space": true
}

2 >> Load prompt config in user profile

With neovim installed run



nvim $PROFILE.CurrentsUserAllHosts

or open with any text edit

Add this line below to the file



oh-my-posh --init --shell pwsh --config 'C:\Users\<your-username>\.config\powershell\<you-file-name>.omp.json' | Invoke-Expression

3 >> Restart powershell and see result

Before:

After:

Wrapping up all the import and option set in user profile

With neovim installed run



nvim $PROFILE.CurrentsUserAllHosts

Or open the file in any text editor, file path can be found by running:



echo $PROFILE.CurrentsUserAllHosts

Finalize user profile with some cool alias and function



Import-Module posh-git
Import-Module oh-my-posh

# PSReadLine
Set-PSREadLineOption -PredictionSource History

# Terminal-Icons
Import-Module Terminal-Icons

# Fzf
Import-Module PSFzf
Set-PsFzfOption -PSReadLineChordProvider 'Ctrl+f' -PSReadLineChordReverseHistory 'Ctrl+r'

# Set theme
Set-PoshPrompt -Theme M365Princess

# Load prompt configs
oh-my-posh --init --shell pwsh --config 'C:\Users\<your-username>\.config\powershell\<you-file-name>.omp.json' | Invoke-Expression

# Alias (Optional)
Set-Alias vim nvim
Set-Alias g git
Set-Alias ll ls
Set-Alias grep findstr
Set-Alias tig 'C:\Program Files\Git\usr\bin\tig.exe'
Set-Alias less 'C:\Program Files\Git\usr\bin\less.exe'

# Ultilities (Optional)
function which ($command) {
    Get-Command -Name $command -ErrorAction SilentlyContinue |
        Select-Object -ExpandProperty Path -ErrorAction SilentlyContinue
}

Media queries in JS

Dannyvpz — Thu, 18 Feb 2021 10:52:41 +0000

Original article - written by Marko Ilic

Media query is a CSS technique introduced in CSS3.

CSS media queries are a core ingredient in any responsive design. They’re a great way to apply different styles to different contexts.

The old way to detect media queries in JS is using window innerWidth as sample code below:

function checkMediaQuery() {
  // If the inner width of the window is greater then 768px
  if (window.innerWidth > 768) {
    doResponsiveThings();
  }
}

window.addEventListener('resize', checkMediaQuery);

Using matchMedia()

To determine if the document matches the media query string in JavaScript, we use the matchMedia() method. Even though it’s officially part of the CSS Object Model View Module specification which is in Working Draft status, the browser support for it is great going as far back as Internet Explorer 10 with 98.6% global coverage.

Caniuseit

The usage is nearly identical to CSS media queries. We pass the media query string to matchMedia() and then check the .matches property.

const mediaQuery = window.matchMedia('(min-width: 768px)')

The defined media query will return a MediaQueryList object. It is an object that stores information about the media query and the key property we need.

const mediaQuery = window.matchMedia('(min-width: 768px)')
// Check if the media query is matched
if (mediaQuery.matches) {
  doResponsiveThings();
}

That’s the basic usage for matching media conditions in JavaScript. But there’s more to it. For example, if we were change the window size below our target window size, nothing updates the way it will with CSS right out of the box.

Listen for changes

MediaQueryList has an addListener() (and the subsequent removeListener()) method that accepts a callback function that’s invoked when the media query status changes. we can fire additional functions when the conditions change, allowing us to “respond” to the updated conditions.

const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    doResponsiveThings();
  }
}

// Register event listener
mediaQuery.addListener(handleWindowChange)

// Initial check
handleWindowChange(mediaQuery)

We explored how matchMedia() allows us to define media conditions and examined the MediaQueryList object. We also saw the “old” way of doing things by listening for resize events on the window. While it’s still widely used and a totally legit way to respond to changes to the size of the window.innerWidth, it’s unable to perform checks on advanced media conditions.

Looking at the performance impact comparing with the old way:

More about @media queries - A Complete Guide to CSS Media Queries - by Andrés Galante

== Update from @rvxlab comment

MediaQueryList.addListener is marked as deprecated, MediaQueryList extends from EventTarget so you can use addEventListener instead. Except for Safari 13 & earlier we can do fallback condition as below:


// Register event listener
if (mediaQuery.addEventListener) {
  mediaQuery.addEventListener('change', handleWindowChange);
} else {
  mediaQuery.addListener(handleWindowChange);
}

PHP 8 New features & comparison with older versions.

Dannyvpz — Thu, 24 Dec 2020 07:40:55 +0000

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...

===

JIT Compiler.
PHP 8 New Features.
PHP 8 impact & compatibility (with Wordpress).
Deprecated functions.

1. The JIT (just-in-time) compiler

===
When PHP code is run, it's usually done by compiling & executed in a virtual machine. JIT will change this by compiling the code into x86 machine code and then running that code directly on the CPU.
For applications that rely heavily on mathematical functions, this should improve performance.

It's the most important new feature updates in PHP 8, JIT is not enabled by default. However JIT doesn't make that much of a difference on web applications.

Example about JIT performance demonstrated:

Ref Source: PHP 8 - New Features, Improvements and Potential Problems with WordPress

2. PHP 8 New features

===
Thanks to:

What's new in PHP 8

Sesha ・ Nov 15 '20

#php8 #php #laravel #web

The nullsafe operator RFC

Instead of writing classic !== null you can use the “?” operator to write just 1 line of code, the application application becomes pretty clear:

Before:



$country =  null;

if ($session !== null) {
  $user = $session->user;

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

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

After:



$country = $session?->user?->getAddress()?->country;

Constructor property promotion

Instead of specifying class properties and a constructor for them, PHP can now combine them into one.



// In php 7.x
class Point {
    protected float $x;
    protected float $y;
    protected 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(
        protected float $x = 0.0,
        protected float $y = 0.0,
        protected float $z = 0.0,
    ) {}
}

Union Types 2.0 RFC

PHP is a dynamically typed structure, So union types are very useful in a lot of places. Union types are a collection of two or more types which indicate that either one of those can be used.



// In PHP 7.4
class Number {
    private $number;

    public function setNumber($number) {
        $this->number = $number;
    }
}

// In PHP 8
class Number {
    private int|float $number;

    public function setNumber(int|float $number): void {
        $this->number = $number;
    }
}

Mixed Type RFC

Reference link

Mixed type is a good addition to php8 type system. It is equivalent to one of these types.



  array|bool|callable|int|float|null|object|resource|string

Here is an example from the RFC documentation of how this is used:



public function foo(mixed $value) {}

Also note that since mixed already includes null, it's not allowed to make it nullable. The following will trigger an error:



// Fatal error: Mixed types cannot be nullable, null is already part of the mixed type.
function bar(): ?mixed {}

Match Expression RFC

Does match expression replace the switch?. The match can return values, doesn't require lengthy statements like a switch. It uses strict type comparison



//The switch statement loosely compares (==) the given value to the case values. This can lead to some very surprising results.
switch ('100') {
  case 100:
    $price = "Oh no!";
    break;
  case '100':
    $price = "This is what I expected";
    break;
}
echo $price;
///> Oh no!

//The match expression uses strict comparison (===) instead. The comparison is strict regardless of strict_types.
echo match ('100') {
  100 => "Oh no!",
  '100' => "This is what I expected",
};

Named Arguments RFC

Named arguments give you more flexibility when calling functions. Previously, you had to call a function and pass each argument in the order in which the function specified.



class ExampleClass {

  public function __construct(
      private string $title, 
      private string|null $description, 
      private string $type ) {

  }
}

// In  PHP 7.x
$my_class = new Log (
  'New Support request',
  '',
  'support',
);

// In PHP 8
$my_class = new ExampleClass (
  title : 'New Support request',
  description : 'You received a new support ...',
  type: 'support',
);

// even you can write something like these
$my_class = new ExampleClass (
  title : 'New Support request',
  type: 'support',
);

Attributes

Instead of PHPDoc annotations, you can now use structured metadata with PHP's native syntax.



// PHP 7
{
    /**
     * @Route("/api/posts/{id}", methods={"GET"})
     */
    public function get($id) { /* ... */ }
}

// PHP 8
class PostsController
{
    #[Route("/api/posts/{id}", methods: ["GET"])]
    public function get($id) { /* ... */ }
}

PHP New Functions & Classes

New Classes, Interfaces, and Functions

Attributes v2 RFC.
Weak Maps RFC.
Throw Expression RFC.
Trailing Comma in Parameter List. ```php

class Comment {
public function __construct(
string $titla,
string $description,
int $status, // trailing comma
) {
// do something
}
}

- Inheritance with private methods [RFC](https://wiki.php.net/rfc/inheritance_private_methods).
- Arrays Starting With a Negative Index.
```php


$book = array_fill(-4, 6, 'title');
var_dump($book);
//output 
array(6) {
  [-4]=>
  string(5) "title"
  [-3]=>
  string(5) "title"
  [-2]=>
  string(5) "title"
  [-1]=>
  string(5) "title"
  [0]=>
  string(5) "title"
  [1]=>
  string(5) "title"
}

// In PHP 7.4 like these
//output 
array(6) {
  [-4]=>
  string(5) "title"
  [0]=>
  string(5) "title"
  [1]=>
  string(5) "title"
  [2]=>
  string(5) "title"
  [3]=>
  string(5) "title"
  [4]=>
  string(5) "title"
}
=> null

Non-capturing catches RFC ```php

//Before PHP 8
try {
AddUser();
} catch (PermissionException $ex) {
echo "You don't have permission to add user";
}

//PHP 8
try {
AddUser();
} catch (PermissionException) { //The intention is clear: exception details are irrelevant
echo "You don't have permission to add user";
}

- ...

### 3. PHP 8 impact & compatibility (with Wordpress).
===
[Reference Link](https://developer.yoast.com/blog/the-2020-wordpress-and-php-8-compatibility-report/)

[Wordpress Version Compatibility](https://make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/)

PHP 8 is a major update of PHP and WordPress aims to always be compatible with new versions of PHP.

Only a small percentage of the available plugins, the more popular and professionally developed ones, have automated tests in place.

PHP 7.* versions have seen a far larger set of deprecations than previous versions of PHP. Where PHP 5.6 to PHP 7 was a relatively simple migration, going from 7.x to 8 could be very painful, especially for very old codebases, the reality, however, is that WordPress is not such a codebase.

#### The test report is:

** Issues reported early on in the WP 5.6 dev cycle and fixed since based on PHPCompatibility scans:

- [Optional parameters declared before required parameters](https://core.trac.wordpress.org/ticket/50343)
- [Final private methods](https://core.trac.wordpress.org/ticket/50897)
- [Remove use of create_function](https://core.trac.wordpress.org/ticket/50899)
- [Only call libxmldisableentity_loader conditionally](https://core.trac.wordpress.org/ticket/50898)


** There are a large number of PHP warnings that have been changed to error exceptions in PHP 8. 

** Error level changes unrelated to RFC’s
The following warnings have been converted to errors probably related to deprecations in PHP 7.x versions:

- Attempting to write to a property of a non-object. Previously this implicitly created an stdClass object for null, false and empty strings.
- Attempting to append an element to an array for which the PHP_INT_MAX key is already used.
- Attempting to use an invalid type (array or object) as an array key or string offset.
- Attempting to write to an array index of a scalar value.
- Attempting to unpack a non-array/Traversable.

** Warnings coming from anywhere

PHP 8 is going to contain a lot of breaking changes and focusing so strongly on strict typing, WordPress’ type unsafe extensibility system also becomes extra vulnerable to errors, potentially leading to plugins causing type errors in other plugins or WordPress itself, many warnings that will turn into errors with PHP 8.

### 4. Deprecated

During the PHP 7.x release cycle, each version introduced new deprecations, which have now been finalized as feature removals in PHP 8. This also applies to some deprecation which were already put in place in PHP 5.x, but weren't removed in the PHP 7.0 release.

- php_errormsg.
- create_function().
- mbstring.func_overload.
- parse_str() without second argument.
- each().
- assert() with string argument.
- $errcontext argument of error handler.
- String search functions with integer needle.
- Defining a free-standing assert() function.
- The real type (alias for float).
- Magic quotes legacy.
- array_key_exists() with objects.
- Reflection export() methods.
- implode() parameter order mix.
- Unbinding $this from non-static closures.
- restore_include_path() function.
- allow_url_include ini directive.

DEV Community: Dannyvpz

Improve window powershell promt with oh-my-posh and more

Neccessary tools

Install scoop

Install some neccessary packages via scoop

Install Nerd Fonts

Setup Window terminal

Install Neovim (optional)

Install some nice modules to improve powershell

Custom oh-my-posh theme

Wrapping up all the import and option set in user profile

Media queries in JS

Using matchMedia()

Listen for changes

PHP 8 New features & comparison with older versions.

Table of contents

1. The JIT (just-in-time) compiler

2. PHP 8 New features

What's new in PHP 8

Sesha ・ Nov 15 '20

The nullsafe operator RFC

Constructor property promotion

Union Types 2.0 RFC

Mixed Type RFC

Match Expression RFC

Named Arguments RFC

Attributes

PHP New Functions & Classes