DEV Community: Richard Dobroň

You've Never Heard Of These 10 Bizarre Programming Languages

Richard Dobroň — Sun, 14 Aug 2022 12:07:00 +0000

1. Whitespace

This program uses whitespace characters as syntax. This implies that only linefeeds, spaces as well as tabs have meanings. Unlike other programming languages, it ignores the non whitespace characters.
Wikipedia
Here’s an example of a “Hello, world!” in Whitespace:

Hello,[Space]world![Space][Space][Tab][Space][Space][Tab][Space][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Space][Tab][Space][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Space][Space][Space][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Tab][Space][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Tab][Tab][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Tab][Space][Space][Tab][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Tab][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[Space][Space][Space][Tab][Tab][Space][Space][Tab][Space][Space][LF]
[Tab][LF][Space][Space]
[LF][LF][LF]

2. Ook!

Ook! is a programming language designed for orang-utans. Ook! is essentially isomorphic to the well-known esoteric language BrainF***, but has even fewer syntax elements.
For a few examples of commands, check out this article.
Here’s the “Hello World” program written in Ook!:

Ook. Ook? Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook! Ook? Ook? Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook? Ook! Ook! Ook? Ook! Ook? Ook.
Ook! Ook. Ook. Ook? Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook! Ook? Ook? Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook?
Ook! Ook! Ook? Ook! Ook? Ook. Ook. Ook. Ook! Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook! Ook. Ook! Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook! Ook. Ook. Ook? Ook. Ook? Ook. Ook? Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook! Ook? Ook? Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook? Ook! Ook! Ook? Ook! Ook? Ook. Ook! Ook.
Ook. Ook? Ook. Ook? Ook. Ook? Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook! Ook? Ook? Ook. Ook. Ook.
Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook. Ook? Ook! Ook! Ook? Ook! Ook? Ook. Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook.
Ook? Ook. Ook? Ook. Ook? Ook. Ook? Ook. Ook! Ook. Ook. Ook. Ook. Ook. Ook. Ook.
Ook! Ook. Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook.
Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook! Ook!
Ook! Ook. Ook. Ook? Ook. Ook? Ook. Ook. Ook! Ook.

3. ArnoldC

Programming language based on the one-liners of Arnold Schwarzenegger.
Source code
The following program displays “Hello World”:

IT'S SHOWTIME
TALK TO THE HAND "Hello World"
YOU HAVE BEEN TERMINATED

4. Shakespeare

Programming language and Shakespearean language should never meet, but that did not stop Jon Åslund and Karl Hasselström from creating the SPL (Shakespeare Programming Language). It makes the source code look like a script from one of the author’s plays, and the result looks something like this.
Wikipedia
The standard "Hello, World!" program:

Do Not Adieu, a play in two acts.

Romeo, a young man with a remarkable patience.
Juliet, a likewise young woman of remarkable grace.
Ophelia, a remarkable woman much in dispute with Hamlet.
Hamlet, the flatterer of Andersen Insulting A/S.


                    Act I: Hamlet's insults and flattery.

                    Scene I: The insulting of Romeo.

[Enter Hamlet and Romeo]

Hamlet:
 You lying stupid fatherless big smelly half-witted coward!
 You are as stupid as the difference between a handsome rich brave
 hero and thyself! Speak your mind!

 You are as brave as the sum of your fat little stuffed misused dusty
 old rotten codpiece and a beautiful fair warm peaceful sunny summer's
 day. You are as healthy as the difference between the sum of the
 sweetest reddest rose and my father and yourself! Speak your mind!

 You are as cowardly as the sum of yourself and the difference
 between a big mighty proud kingdom and a horse. Speak your mind.

 Speak your mind!

[Exit Romeo]

                    Scene II: The praising of Juliet.

[Enter Juliet]

Hamlet:
 Thou art as sweet as the sum of the sum of Romeo and his horse and his
 black cat! Speak thy mind!

[Exit Juliet]

                    Scene III: The praising of Ophelia.

[Enter Ophelia]

Hamlet:

 Thou art as beautiful as the difference between Romeo and the square
 of a huge green peaceful tree. Speak thy mind!

 Thou art as lovely as the product of a large rural town and my amazing
 bottomless embroidered purse. Speak thy mind!

 Thou art as loving as the product of the bluest clearest sweetest sky
 and the sum of a squirrel and a white horse. Thou art as beautiful as
 the difference between Juliet and thyself. Speak thy mind!

[Exeunt Ophelia and Hamlet]


                    Act II: Behind Hamlet's back.

                    Scene I: Romeo and Juliet's conversation.

[Enter Romeo and Juliet]

Romeo:
 Speak your mind. You are as worried as the sum of yourself and the
 difference between my small smooth hamster and my nose. Speak your
 mind!

Juliet:
 Speak YOUR mind! You are as bad as Hamlet! You are as small as the
 difference between the square of the difference between my little pony
 and your big hairy hound and the cube of your sorry little
 codpiece. Speak your mind!

[Exit Romeo]

                    Scene II: Juliet and Ophelia's conversation.

[Enter Ophelia]

Juliet:
 Thou art as good as the quotient between Romeo and the sum of a small
 furry animal and a leech. Speak your mind!

Ophelia:
 Thou art as disgusting as the quotient between Romeo and twice the
 difference between a mistletoe and an oozing infected blister! Speak
 your mind!

[Exeunt]

5. Velato

Velato is a programming language, created by Daniel Temkin in 2009, which uses MIDI files as source code: the pattern of notes determines commands. Velato offers an unusual challenge to programmer-musicians: to compose a musical piece that, in addition to expressing their aims musically, fills the constraints necessary to compile to a working Velato program. Each song has a secret message: the program it determines when compiled as Velato.
The following program displays “Hello World!”:

\version "2.19.64"

\header{
  title = "Hello, World!"
}

\language "english"

\paper {
  top-margin = 1.5\in
  left-margin = 2.0\in
  right-margin = 2.0\in
}

\score {
  \transpose c c' {
    % H
    <c a>4
    g8
    e8 f8
    gs8 d8
    g8 |

    % e
    a8
    <g e>4.
    <f cs>4
    c16 cs16
    g8 |

    % l
    a8
    <g e>8
    <f cs>4
    <c a>4
    g4 |

    % l
    a16 g16
    e16 f8
    cs8. <c a g>2 |

    % o
    a8 g8 e8
    f8.
    cs16 cs8 cs8 g8 |

    % ,
    a8 g4
    e8 f8
    e e
    g8 |

    % space
    a8
    <g e>4.
    f8
    ds d
    g8 |

    % W
    a8 g4
    e8 f8
    a8 gs8
    g8 |

    % o
    a8 g8
    e8 f8
    cs8 cs8 <cs g>4 |

    % r
    a8 g8
    e8 f8
    cs8 cs8 e8. g16 |

    % l
    c16 a16
    <g e>8
    <f cs>4
    <c a>4
    g4 |

    % d
    a8 g4
    e16 f16
    cs8 c8 c8
    g8 |

    % !
    a16
    <g e>4
    f16 ds16 ds16
    <g c>2 |
  }
  \layout {
    indent = 0\cm
  }
  \midi {
    \tempo 4 = 120
  }
}

6. Brainfuck

This language has inspired many other bizarre computer languages. It was created in 1993 by Urban Miller. He designed this language with smallest possible complier, which is even less than 200 bytes. It uses just eight commands to run a program, however the sequence of commands requires to run the program is simply too much and is not practical for normal use.
Wikipedia

The following program prints “Hello World!” and a newline to the screen:

++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.

7. Malbolge

Malbolge is a public domain esoteric programming language invented by Ben Olmstead in 1998, named after the eighth circle of hell in Dante's Inferno, the Malebolge.
Wikipedia
The following program prints “Hello World”:

(=<`#9]~6ZY32Vx/4Rs+0No-&Jk)"Fh}|Bcy?`=*z]Kw%oG4UUS0/@-ejc(:'8d

8. Chicken

Chicken is an esoteric programming language by Torbjörn Söderstedt, in which "chicken" is the only valid symbol.
Here’s the “Hello World” program written in Chicken.

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken
chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

9. LOLcode

LOLcode is an esoteric programming language inspired by lolspeak, the language expressed in examples of the lolcat Internet meme. The language was created in 2007 by Adam Lindsay, researcher at the Computing Department of Lancaster University.
Wikipedia
Here’s the “Hello World” program written in LOLcode:

HAI 1.2
CAN HAS STDIO?
VISIBLE "Hello World"
KTHXBYE

10. JSFuck

Developed by Martin Kleppe, JSFuck is an esoteric programming style of JavaScript. where code is written using a very limited set of characters: (,), [, ], + and !.The challenge in JSFuck lies in recreating the full set of JavaScript functions using only these six characters, which is made possible by two properties of JavaScript:

It is a weakly typed programming language
It allows the evaluation of any expression as any type.

Source code
JSFuck code is extremely "verbose": In JavaScript, the code alert("Hello World!"), which causes a pop-up window to open with the text "Hello world", is 21 characters long. In JSFuck, the same code has a length of 3344 characters:

[][(![]+[])[+!![]]+(!![]+[])[+[]]][([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+!![]]]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]+(!![]+[])[+[]])()([][(![]+[])[+!![]]+(!![]+[])[+[]]][([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+!![]]]+([]+[][(!![]+[])[!![]+!![]+!![]]+([][[]]+[])[+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([![]]+[][[]])[+!![]+[+[]]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]]())[!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(![]+[])[+!![]])()(!![])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+!![]]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]][([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+!![]]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(![]+[])[+[]])())[+!![]+[+!![]]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(!![]+[])[+!![]]+(![]+[])[!![]+!![]]+([][[]]+[])[!![]+!![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]][([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([][[]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+[]]+([]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[!![]+!![]+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+[]]+([][[]]+[])[+[]]+(!![]+[])[+!![]]+([][[]]+[])[+!![]]+(+[![]]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+!![]]]+(![]+[])[+!![]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+!![]]+(!![]+[])[+[]]])[+!![]+[+[]]]+([]+[][(!![]+[])[!![]+!![]+!![]]+([][[]]+[])[+!![]]+(!![]+[])[+[]]+(!![]+[])[+!![]]+([![]]+[][[]])[+!![]+[+[]]]+(!![]+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]]())[!![]+!![]])()((+(+!![]+(!![]+[])[!![]+!![]+!![]]+(+!![])+(+[])+(+[])+(+[]))+[])[+[]]+![])[+[]])

How to create your first composer package? 🐘

Richard Dobroň — Mon, 08 Aug 2022 20:43:00 +0000

What is Composer?

Composer is a package manager for PHP. As with npm for Node.js and bundler for Ruby, it fills a similar role. It uses a JSON file to capture metadata about the project and the project’s dependencies.

What is Packagist?

Packagist is a centralized Composer repository where anyone can register packages. It aggregates public PHP packages installable with Composer. Packagist currently contains almost 350,000 packages.

Don't have an account?

Navigate to packagist.org and click Create account.

1. Create a project

Create a folder named nullthrows

mkdir nullthrows

2. Initialize project as composer package

In this process, you will be asked a number of questions such as the package name, name of the author, the description, minimum stability, the license, etc.

composer init

This process will generate a composer.json file.

3. Create a file named `nullthrows.php` with this content in `src` folder:

<?php

/**
 * @param mixed $value
 * @param string $message
 *
 * @return mixed
 * @throws Exception
 */
function nullthrows($value, string $message = null) {
    if ($value !== null) {
        return $value;
    }

    throw new Exception($message ?: 'Got unexpected null value.');
}

4. Add files under autoload in composer.json

{
    "name": "dobron/nullthrows",
    "autoload": {
        "files": [
            "src/nullthrows.php"
        ],
        "psr-4": {
            "dobron\\": "src/"
        }
    },
    "authors": [
        {
            "name": "Richard Dobroň"
        }
    ],
    "require": {}
}

5. Create a README.md (optional)

You should provide a brief description of the repository and its functions.

6. Commit the code to GitHub repository

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin git@github.com:yourUsername/nullthrows.git
git push -u origin main

7. Submit package

https://packagist.org/packages/submit

You Did It!

Congratulations, you have published your first Composer package!

How to create your first npm package? 🧰

Richard Dobroň — Sun, 07 Aug 2022 17:37:00 +0000

What is NPM

NPM stands for Node Package Manager and is the default JavaScript package manager powered by Node.js. The npm manager has two parts:

CLI (Command Line Interface) — a tool for publishing and downloading packages,
online repositories containing over 2 million JavaScript packages.

Don't have an account?

Navigate to npmjs.com and click sign up.

1. Create an npm project

Create a folder named arraySort

mkdir arraySort

2. Initialize project as npm package

a) Using npm init -y or -yes

This process will automatically generate a package.json file with default options.

npm init -y

b) Using npm init

In this process, you will be asked a number of questions such as the name of the author, the description, and the license, etc.

npm init

3. Create a file named `index.js` with this content:

function arraySort(array, compareFunction) {
    const cloned = array.slice();
    if (compareFunction) {
        return cloned.sort(compareFunction);
    }

    return cloned.sort();
}

module.exports = arraySort;

4. Create a README.md (optional)

You should provide a brief description of the repository and its functions.

5. Login into NPM

npm login

6. Publish the package

npm publish

You Did It!

Congratulations, you have published your first NPM package!

How to fix Gmail login in your application?

Richard Dobroň — Sun, 31 Jul 2022 10:56:00 +0000

Google has announced that some accounts will no longer be able to use Less Secure Apps feature, starting May 30th, 2022.

Your application will contain an error similar to this:

Uncaught Exception: Cannot connect to Gmail: Can not authenticate to IMAP server: [AUTHENTICATIONFAILED] Invalid credentials (Failure) in /home/secret/public_html/mailer/smtp.php:208

What are Less Secure Apps in Gmail?

With Less Secure Apps feature, you can use your main Google username and password to sign in to your Gmail account on software and devices.

Fix using an App Password

To use an app password, you must first turn on two-factor authentication for your Google account.

After that, in your Google account's security settings, you can set an app-specific password for SMTP.

Then type the name of the application that will help you identify this password.

Your password will be generated after clicking the Generate button.

And that's it, now just use this new password to log in.

How to add Prettier code formatter to your project?

Richard Dobroň — Thu, 28 Jul 2022 14:59:00 +0000

You can use Prettier to make your code more readable and consistent with your style guide. There are several ways to start Prettier automatically, these are the most popular when using Git:

1. pretty-quick

Use library pretty-quick to format your changed or staged files.

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"

2. Shell script

Save this script as .git/hooks/pre-commit and give it execute permission:

#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write

# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add

exit 0

If git is reporting that your prettified files are still modified after committing, you may need to add a post-commit script to update git’s index.

Add something like the following to .git/hooks/post-commit:

#!/bin/sh
git update-index -g

Configure rules

Create a *.prettierrc file at the root of your project to configure your prettier rules.

Here's an example file containing some popular rules:

{
  "semi": true",
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
  "arrowParens": "always",
  "tabWidth": 2
}

For everything you don't want to format, create a .prettierignore file:

node_modules/
package.json

Manual Run & Fix

To manual run via CLI, add a command to package.json and run npm run format.

{
 "scripts": {
  "format": "prettier --write ."
 }
}

300 beautiful pure CSS loaders

Richard Dobroň — Sat, 16 Jul 2022 10:52:24 +0000

As we navigate through websites and apps, we might sometimes wait for some progress or for something to load. A loader or spinner can be used in such cases to indicate to users that something is loading.

Open cssloaders.github.io

Just click on the specific loader that you want to use in your application and a dialog box with the source code will appear.

A huge advantage is also the fact that it is possible to translate the displayed loading text very easily and not spoil the impression of the animation.

Localizing PHP application with FBT instead of standard i18n

Richard Dobroň — Fri, 15 Jul 2022 18:03:14 +0000

Since about 2010, I have been looking for a translation framework for PHP that can generate very complex phrases and at the same time combine options such as singular/plural and work with genders (male, female, unknown) and ideally also format numbers according to the standards of the given country or region — unsuccessfully. In 2018, Facebook released FBT — an open source localization framework that provides a more efficient way of defining content for flexible and high-quality localization. I didn’t hesitate at all. I gradually started to rewrite this JavaScript version into PHP, and even if a few small things were not entirely according to the original code, I succeeded. It was my challenge that I finished in about 40 days (better said, evenings 😊).

There are many reasons why the common i18n libraries are very inadequate. The main ones are:

misunderstanding of the native text by the translator (does not know the context),
insufficient/nonsensical code combinations for translation,
do not support features like enums or pronouns,
and many more…

Fortunately, FBT can solve all of this. However, it is not easy to use it for the first time when you are not familiar with it. But I will be happy to advise you on how to use it.

1. Install the FBT package

composer require richarddobron/fbt

2. Set your FBT configuration

<?php
require ("vendor/autoload.php");

\fbt\FbtConfig::set('author', 'your name/team');
\fbt\FbtConfig::set('project', 'project name');
\fbt\FbtConfig::set('path', '/path/to/storage/fbt');

3. Language and gender settings

If you just want to change the interface language, just use:

\fbt\FbtHooks::locale('sk_SK'); // app locale

If you have an application in which users log in, you can use the interface IntlViewerContextInterface:

After implementation, set viewerContext:

$loggedUserDto = ...;
\fbt\FbtConfig::set('viewerContext', $loggedUserDto);

4. Prepare translations files

Facebook has devised their own system of labeling languages, you can find a list of them at this link.
From this list, choose the languages into which you want to translate your website or application.
I usually add them to the directory /storage/fbt/
File name will look like this: sk_SK.json

5. Add FBT scripts to composer.json

Native phrases can also be easily translated via the app editor Swiftyper Translations.

6. Add your texts

Native phrases are always expected in English, it might look something like this:

7. Translate collected texts

This is what the collected source strings look like in the .source_strings.json file after script execution:

Now we are ready to generate a file in which we will write the translations for the collected source strings:

composer run generate-translations

The /storage/fbt/sk_SK.json file now contains the hash keys of the source phrases that we can now translate. I make translations into Slovak, so I can use the gender of the {name} token and adapt the variations of the given text precisely. This step is a bit difficult for some translations with variants, as you have to work with the variations key.
You can also find several types of translations at this link.

After completing the translations, we run the command that creates the translations for the application:

composer run translate-fbts

Finally, this command will generate a production file with translations using Jenkins hash.

Your app is now translated! Hurray!

Sesame Street Love GIF by HBO - Find & Share on GIPHY

It's HBO.

giphy.com

Thanks for reading 🙏.

How to generate PHP enums from database in Laravel?

Richard Dobroň — Thu, 14 Jul 2022 16:40:58 +0000

A magic number is a configuration parameter typed as a number in the middle of some code.

And that magic number is a bad thing.

Using this library, you will fix the following code:

To such:

How to use this generator?

First of all, install composer package:



composer require dobron/laravel-db-enum-generator

Let's say the user_roles database table has the following structure:

Id	Slug	Role
1	MANAGER	Admin
2	CONTENT_CREATOR	Editor
3	MODERATOR	Moderator
4	ADVERTISER	Advertiser
5	INSIGHTS_ANALYST	Analyst

Now call artisan command make:enum.



# with laravel model
php artisan make:enum UserRoleTypes --model=UserRole --id=Id --slug=Slug --title=Role

# with laravel model that does not have slug column (will be auto-generated from --title)
php artisan make:enum UserRoleTypes --model=UserRole --id=Id --title=Role

# with database table
php artisan make:enum UserRoleTypes --table=user_roles --id=Id --slug=Slug --title=Role

# etc.

The UserRoleTypes.php file was generated in the ./app/enums/ directory.
If you update the database table, just use the same command with the --force flag to overwrite the file.

How to find magic numbers in the project?

I recommend using a library called PHPMND.

This stands for PHP Magic Number Detector.

A detailed installation guide can be found at https://github.com/povils/phpmnd

But if you're using Composer, here's how you can install it quickly:



composer require --dev povils/phpmnd

Once that's done, you run it like this:



phpmnd .

How to easily call JavaScript modules from PHP?

Richard Dobroň — Wed, 13 Jul 2022 16:22:49 +0000

You have surely solved it many times, but the solution was not very attractive. This tutorial is about generating JavaScript code in PHP using the BigPipe library, which is inspired by the Facebook architecture.

The purpose of this library is to rapidly reduce the continuously repetitive code to work with the DOM and improve the communication barrier between PHP and JavaScript.

Requirements

PHP 7.1 or higher
Node 8, 10+.
Webpack

Installation

1. Install composer package:



$ composer require richarddobron/bigpipe

2. Install npm package:



$ npm install bigpipe-util

3. Add this lines to /path/to/resources/js/app.js:

4. Create file /path/to/resources/js/ServerJS.js

this step is optional, but if you skip it, use this in next step: require("bigpipe-util/ServerJS")

5. Add this lines to page footer:

What all can be Ajaxifed?

Links



<a href="#"
   ajaxify="/ajax/remove.php"
   rel="async">Remove Item</a>

Forms



<form action="/submit.php"
      method="POST"
      rel="async">
    <input name="user">
    <input type="submit" name="Done">
</form>

Dialogs



<a href="#"
   ajaxify="/ajax/modal.php"
   rel="dialog">Open Modal</a>

DOMOPS API

setContent: Sets the content of an element.
appendContent: Insert content as the last child of specified element.
prependContent: Insert content as the first child of specified element.
insertAfter: Insert content after specified element.
insertBefore: Insert content before specified element.
remove: Remove specified element and its children.
replace: Replace specified element with content.
eval: Evaluates JavaScript code represented as a string.

DIALOGS API

setController: Sets the JavaScript class controller - if you need to register an extra event listeners (show, shown, hide, hidden) or logic.
setTitle: Sets the title of a dialog.
setBody: Sets the body of a dialog.
setFooter: Sets the footer of a dialog.
setDialog: Sets the whole content of a dialog.
closeDialogs: Close all opened dialogs.
closeDialog: Close only current dialog.
dialog: Render defined dialog.

Refresh & Redirecting

Payload

BigPipe API

require: Call JavaScript module method. You can call a specific class method or a regular function with the custom arguments.

Example PHP code:

Example JavaScript code:



export default class SecretModule {
    run(first, second) {
        // ...
    }
}

dialog: Opens a dialog but can work with multiple dialogs at once.

Example PHP code:

transport: Through transport markers you can send HTML content but also transform the content into JavaScript objects (such as Map, Set or Element).

Example PHP code:

Demo app with examples

The demo application is written in Laravel, but this library is framework-agnostic.
⚠️ The demo server does not support HTTPS, so you may need to confirm a security exception.

Disabling installation notifications for Packagist

Richard Dobroň — Tue, 12 Jul 2022 19:15:51 +0000

If you use workflow to run tests along with installing dependencies via composer, you may find it useful to disable sending install statistics to Packagist.

Just add this line of code to the beginning of the script.

composer config notify-on-install false

As it says in the composer documentation:

notify-on-install: This allows composer to send notification to a URL whenever a package is installed. This by default is true.

How to add PHP CS Fixer to your project?

Richard Dobroň — Tue, 12 Jul 2022 19:12:34 +0000

First of all, add PHP CS Fixer to your project:

composer require --dev friendsofphp/php-cs-fixer

A configuration file called .php-cs-fixer.dist.php needs to be in the root directory of your project if you want to avoid command-line options.

There are many rules that can be set, I usually use these. It follows the PSR12 code standards and checks both the src and tests directories.

You can find more rules in the PHP CS Fixer docs.

Let’s add a some scripts to composer.json file:

Now, just run composer run fix-style and all your code style errors will be fixed.

The --dry-run flag will run the fixer without making changes to your files.

If you are using Git, add .php-cs-fixer.cache (this is the cache file created by php-cs-fixer) to .gitignore:

.php-cs-fixer.cache

Automatically generate plain text e-mails without view in Laravel 5+

Richard Dobroň — Tue, 12 Jul 2022 18:50:01 +0000

Plain text emails are still very important these days. For many of them, however, it is pointless to write a plain text version as long as it can be automatically generated from HTML format.

1. Install html2text package:

composer require soundasleep/html2text

2. Create file TextMailBuilder.php:

This trait contains a buildView method that overwrites the original method and will generate text for the email only if you do not use your own view for the plain text version of the email.

Create Traits folder in app/Mails, then create TextMailBuilder.php file, then place the entire code to this file:

DEV Community: Richard Dobroň

You've Never Heard Of These 10 Bizarre Programming Languages

1. Whitespace

2. Ook!

3. ArnoldC

4. Shakespeare

5. Velato

6. Brainfuck

7. Malbolge

8. Chicken

9. LOLcode

10. JSFuck

How to create your first composer package? 🐘

What is Composer?

What is Packagist?

Don't have an account?

1. Create a project

2. Initialize project as composer package

3. Create a file named nullthrows.php with this content in src folder:

4. Add files under autoload in composer.json

5. Create a README.md (optional)

6. Commit the code to GitHub repository

7. Submit package

You Did It!

How to create your first npm package? 🧰

What is NPM

Don't have an account?

1. Create an npm project

2. Initialize project as npm package

a) Using npm init -y or -yes

b) Using npm init

3. Create a file named index.js with this content:

4. Create a README.md (optional)

5. Login into NPM

6. Publish the package

You Did It!

How to fix Gmail login in your application?

What are Less Secure Apps in Gmail?

Fix using an App Password

How to add Prettier code formatter to your project?

1. pretty-quick

2. Shell script

Configure rules

Manual Run & Fix

300 beautiful pure CSS loaders

Localizing PHP application with FBT instead of standard i18n

1. Install the FBT package

2. Set your FBT configuration

3. Language and gender settings

4. Prepare translations files

5. Add FBT scripts to composer.json

6. Add your texts

7. Translate collected texts

Sesame Street Love GIF by HBO - Find & Share on GIPHY

How to generate PHP enums from database in Laravel?

How to use this generator?

How to find magic numbers in the project?

How to easily call JavaScript modules from PHP?

Requirements

Installation

1. Install composer package:

2. Install npm package:

3. Add this lines to /path/to/resources/js/app.js:

4. Create file /path/to/resources/js/ServerJS.js

5. Add this lines to page footer:

What all can be Ajaxifed?

Links

Forms

Dialogs

DOMOPS API

DIALOGS API

Refresh & Redirecting

Payload

BigPipe API

Demo app with examples

Disabling installation notifications for Packagist

How to add PHP CS Fixer to your project?

Automatically generate plain text e-mails without view in Laravel 5+

1. Install html2text package:

2. Create file TextMailBuilder.php:

3. Create a file named `nullthrows.php` with this content in `src` folder:

3. Create a file named `index.js` with this content: