Now you know the fundamentals of classes in PHP, it's time to move on to inheritance.

In case you missed the previous posts, you can follow the series here.

What is Inheritance?

The concept of inheritance allows us to create a class that derives from another class. This new class is called a subclass and extends an existing class. For example, we may have a user class and want to add admin users to our app. Instead of creating a whole new AdminUser class with mostly the same functionality, we can instead use inheritance and create a subclass of the User class.

This new subclass inherits all functionality from the User class, but we can override and extend with functionality specific to admin users.

Creating the Superclass

A superclass is a class that is inherited by subclasses. A superclass can be any class, so let's create one:

class User {
    public function __construct(public string $name) {
        //
    }

    public function getDisplayName(): string {
        return $this->name;
    }
}

// Usage
$user = new User("John");
echo $user->getDisplayName(); // "John"

It's a simple user class where each user has a name and a display name that is displayed on the website.

If we want to introduce different types of users, we can create subclasses that inherit, or extend, the user class. We can do so using the extend keyword in the class definition:

class VerifiedUser extends User {

}

// Usage
$verified_user = new VerifiedUser("Jane");
echo $verified_user->getDisplayName(); // "Jane"

As you can see, we haven't added anything to the class yet, but the constructor and getDisplayName methods still work! This is because our class inherits the functionality from the superclass, which in this example is the User class.

Overriding Methods

We now effectively have two identical classes, which isn't very helpful. However, our verified users should have a cool verified badge next to their name!

To implement this, we can override the existing getDisplayName method (that is currently inherited from the User class) with new functionality:

class VerifiedUser extends User {
    public function getDisplayName(): string {
        return $this->name . " ✔";
    }
}

// Usage
$verified_user = new VerifiedUser("Jane");
echo $verified_user->getDisplayName(); // "Jane ✔"

The Override Attribute

Since PHP 8.3, we can explicitly tell PHP that we want to override an existing method using the #[\Override] attribute:

class VerifiedUser extends User {
    #[\Override]
    public function getDisplayName(): string {
        return $this->name . " ✔";
    }
}

In case the function we want to override doesn't exist on the superclass, this will now throw an error:

class VerifiedUser extends User {
    #[\Override]
    public function getName(): string {
        return $this->name . " ✔";
    }
}

// Fatal error: VerifiedUser::getName() has #[\Override] attribute,
// but no matching parent method exists

Adding Methods

Besides overriding existing methods, we can add new methods and properties to our new subclass:

class VerifiedUser extends User {
    public function getDisplayName(): string {
        return $this->name . " ✔";
    }

    public function isVerifiedSince(): DateTime {
        return new DateTime("1 month ago");
    }
}

// Usage
$verified_user = new VerifiedUser("Jane");
echo $verified_user->isVerifiedSince()->format("Y-m-d"); // "2024-04-19"

Composition

Now you might ask, why not simply create a new class? Inheritance is cool, but if my class doesn't have that much functionality, can't I simply create a new class from scratch?

And of course, you could, but then you're missing out on a great feature:

Everywhere you can use the User class, you can now also use the VerifiedUser class, since it is a subclass.

This means, let's say we have a function that accepts a User instance:

function sayHelloTo(User $user) {
    echo "Hello " . $user->getDisplayName();
}

This is not limited to the User class, but also accepts subclasses:

$user = new User("John");
sayHelloTo($user); // "Hello John"

$verified_user = new VerifiedUser("Jane");
sayHelloTo($verified_user); // "Hello Jane ✔"

And we didn't have to change the code of the function, it just works!

However, this does not work in the other direction. If we have a function that accepts a VerifiedUser, we can't pass it an instance of the User class:

function wasVerifiedThisYear(VerifiedUser $user) {
    return $user->isVerifiedSince()->format("Y") === date("Y");
}

$user = new User("John");
var_dump( wasVerifiedThisYear($user) );
// Fatal error: Uncaught TypeError: wasVerifiedThisYear():
// Argument #1 ($user) must be of type VerifiedUser, User given

$verified_user = new VerifiedUser("Jane");
var_dump( wasVerifiedThisYear($verified_user ) );
// bool(true)

Instanceof Operator

The instanceof operator can be used to check if a given object is an instance of a specific class:

$user = new User("John");

var_dump( $user instanceof User ); // bool(true)
var_dump( $user instanceof VerifiedUser ); // bool(false)

Once we know that an object is an instance of a certain class, we can safely call methods specific to this class:

function getVerifiedInfo(User $user): string {
    if(! $user instanceof VerifiedUser) {
        return $user->getDisplayName() . " is not verified";
    }

    return $user->getDisplayName() . " is verified since " . $user->isVerifiedSince()->format("Y-m-d");
}

$user = new User("John");
echo getVerifiedInfo($user); // "John is not verified"

$verified_user = new VerifiedUser("Jane");
echo getVerifiedInfo($verified_user ); // "Jane ✔ is verified since 2024-04-19"

Calling Methods from the Superclass

Let’s go back to our User example from the beginning:

class User {
    public function __construct(public string $name) {
        //
    }

    public function getDisplayName(): string {
        return $this->name;
    }
}

class VerifiedUser extends User {
    public function getDisplayName(): string {
        return $this->name . " ✔";
    }
}

// Usage
$user = new User("John");
echo $user->getDisplayName(); // "John"

$verified_user = new VerifiedUser("Jane");
echo $verified_user->getDisplayName(); // "Jane ✔"

You can see, the VerifiedUser class overrides the getDisplayName method completely. But in this example, we only want to append a little checkmark symbol to the name.

Instead of copying the logic to get the display name from the superclass User, we can call the method we are overriding by prefixing it with parent::, like this:

 class VerifiedUser extends User {
    public function getDisplayName(): string {
        return parent::getDisplayName() . " ✔";
    }
}

The output is the same as before, but now, if we change how the default display name is generated in the superclass, these changes will also be reflected in the VerfiedUser class:

class User {
    public function __construct(public string $name) {
        //
    }

    public function getDisplayName(): string {
        # Let's say we change how the name is displayed:
        return "@" . strtolower($this->name);
    }
}

class VerifiedUser extends User {
    public function getDisplayName(): string {
        # We're not changing anything here!
        return parent::getDisplayName() . " ✔";
    }
}

// Usage
$user = new User("John");
echo $user->getDisplayName(); // "@john"

$verified_user = new VerifiedUser("Jane");
# Notice how the new format is reflected here, even though
# we haven't touched the VerifiedUser class. And the
# checkmark is still added!
echo $verified_user->getDisplayName(); // "@jane ✔"

Next Steps

Extending and overriding methods of existing classes is a very powerful feature. But it’s not only helpful when working with your own classes, it can also come in very handy when you need to change the functionality of a third-party library.

Whenever you’re ready, head over to the next part of this series.

What has started as an attempt to get WP Engine to pay a trademark license to Automattic already resulted in many contributors leaving the project, Automattic employees resigning, and shattered trust in Matt Mullenweg and Automattic.

The "scorched earth nuclear approach"

(Yes, he actually wrote that to WP Engine, see the lawsuit on page 24)

Since the beginning of this drama 3 weeks ago when Matt gave his talk at WordCamp US, things got crazier nearly every day. After cease and desist letters in both directions and blocked access to WordPress.org, I thought we arrived at the peak of this drama when WP Engine filed a lawsuit against Automattic and Matt Mullenweg on October 2nd.

My hope that this public clown show was over quickly vanished, and things were about to take a turn for the worse.

More and more people, including core contributors to the project, are getting blocked by WordPress, Matt, and Automattic on X and banned from the official WordPress Slack. This involves people who organized community events, contributed to core, and more.
And the new mandatory "I am not affiliated with WP Engine in any way, financially or otherwise" checkbox on the WordPress.org login page certainly doesn't help prevent contributors from leaving.

The WordPress account on X even makes fun of contributors who can't log in due to this ridiculous checkbox.

What could have been a legal fight between two companies now looks like Matt destroying the open-source project he created.

WordPress powers over 40% of the web with a gigantic ecosystem that allows everyone to build a website, from individuals and small businesses to big corporations and The White House.
But I don't think this helps much if the people building the software are leaving.

Fork or Takeover?

Things got worse yet another time with WordPress "forking" ACF, an extremely popular plugin by WP Engine.
But wait, let me say hijacked instead of forked. They didn't create their own plugin, they overtook the existing ACF plugin on the WordPress.org plugin repository and changed the name and logo. They even kept the download count currently at 2+ million, the 5-star rating, and forum history.

The screenshot shows the ACF plugin page on WordPress.org and the commit to the ACF plugin by WordPress.org (capture date: October 12th, 23:33).

And not "just" that—they kept the slug at "advanced-custom-fields" which now means that WordPress sites using the ACF plugin are being automatically updated to the new "SCF" plugin by WordPress.org.

After the SCF announcement, the leader of the Core Fields project, Scott Kingsley Clark, stated he was "done making excuses for Matt's actions and will not associate myself with core any longer" (source). Yet another contributor who left the project.

This sets a dangerous precedence. Matt locked a competitor out of the official WordPress plugin repository and overtook their plugin, which is used on millions of sites. And because they have been locked out, WP Engine had no chance to reach the 2+ million sites and inform them how to update to the new ACF version.

Irreversible Damage

WordPress is in an alarming state, Matt and Automattic are harming the project, its community, and open-source as a whole.

I think DHH put it best when he wrote:

"That's the deal. That's open source. I give you a gift of code, you accept the terms of the license. There cannot be a second set of shadow obligations that might suddenly apply, if you strike it rich using the software. Then the license is meaningless, the clarity all muddled, and certainty lost."

This craziness must end immediately. The actions by Matt and Automattic are doing irreversible damage to the WordPress project.
What's next? Another plugin takeover? Attacks against another company? More bans and blocks on Slack and X? More contributors leaving?

Is this the end of WordPress as we knew it?

Hey again!

In the last post, we created our first class and discovered some benefits of using OOP in PHP. However, in this post, we'll dive deeper into classes and what we can do with them. So, let's get to work!

Class Properties and Methods

We'll use the following class as starting point:

<?php

class User {

}

Properties

Properties are variables attached to an instance of a class. For example, every user has a name. So, we can add a $name property to the class:

class User {
    public $name = "John";
}

We can access these properties using the arrow syntax:

$user = new User;
echo $user->name; // "John"

We can also modify the property:

$user = new User;
$user->name = "John Doe";
echo $user->name; // "John Doe"

Just like arguments of functions, we can also add type declarations to our properties to ensure type safety:

<?php
declare(strict_types=1);

class User {
    public string $name = "John";
}

Now, if we assign a different type than we specified in the class, we will get an error:

$user = new User;
$user->name = 10;
// Fatal error: Uncaught TypeError:
// Cannot assign int to property User::$name of type string

We can also define a property without initialising it:

class User {
    public string $name;
}

A common use case is to define properties and then initialise them with values in the class constructor.

Methods

Methods are functions attached to an instance of a class. Inside a method, we have access to the current instance of the class and can access and modify the properties and call other methods.

class User {
    public string $name = "John";

    public function greet() {
        echo "Hello!";
    }
}

$user = new User;
$user->greet(); // "Hello!"

The variable $this references the current instance of the class. So if we want to use the user's name in the greeting, we can do so by referencing the $this->name:

class User {
    public string $name = "John";

    public function greet() {
        echo "Hello " . $this->name . "!";
    }
}

$user = new User;
$user->greet(); // "Hello John!"

Like normal functions, methods can also have arguments, type-hinted arguments, and return types:

class User {
    public string $name = "John";

    public function greet(): void {
        echo "Hello " . $this->name . "!";
    }

    public function sayHello(string $name): string {
        return "Hello $name";
    }
}

$user = new User;
$user->greet(); // "Hello John!"

$hello = $user->sayHello("Linus");
echo $hello; // "Hello Linus";

The Class Constructor

The constructor is a magic method that gets executed every time a new instance of that class is constructed. For example:

class User {
    public function __construct() {
        echo "New user created!";
    }
}

$user = new User; // "New user created!"

We can also add arguments to the constructor method which then need to be passed when creating a new instance:

class User {
    public function __construct(string $name) {
        echo "New user created: " . $name;
    }
}

$user = new User("John"); // "New user created: John"

But for now, the $name variable is only available in the constructor. But we can define a property on the class and initialise it in the constructor:

class User {
    public string $name;

    public function __construct(string $name) {
        $this->name = $name;
    }
}

$user = new User("John");
echo $user->name; // "John"

Note that $name refers to the value passed to the constructor, while $this->name refers to the property $name on the class.

PHP 8: Constructor Property Promotion

The constructor is commonly used to initialise class properties, just like we did above. However, this requires a bunch of code just to assign a variable. Take a look at this:

class User {
    public string $firstname;
    public string $lastname;
    public bool $admin;

    public function __construct(string $firstname, string $lastname, bool $admin) {
        $this->firstname = $firstname;
        $this->lastname = $lastname;
        $this->admin = $admin;
    }
}

Thankfully, PHP 8 introduced us to constructor property promotion: This allows us to refactor the code above like this:

class User {
    public function __construct(
        public string $firstname,
        public string $lastname,
        public bool $admin,
    ) {
        //
    }
}

Very cool!

The Class Destructor

There is a constructor that runs when constructing a new instance, so there also is a destructor that runs when an instance is destroyed.

class User {
    public function __construct(
        public string $name,
    ) {
        echo "Constructed " . $this->name;
    }

    public function __destruct() {
        echo "Destructing " . $this->name;
    }
}

$user = new User("John");
// "Constructed John"

unset($user);
// "Destructing John"

More Magic Methods

There are a lot more magic methods that we haven't covered yet, like clone, get, set, and more.

If you stumble over a method starting with "__" (two underscores), you just found a magic method. They are reserved to PHP (so don't create your own), but you can implement them, just like we did with the constructor and destructor.

Visibility: Public, Private, and Protected

You probably have noticed that we added a public in front of all properties and methods we added to our classes to far. But what does it actually mean?

public, private, and protected define the visibility, or in other words, where the property/method can be accessed from:

Public

Public means just what it says: It's public, so you can access it from both inside and outside the class:

class User {
    public string $name = "John";

    public function __construct() {
        $this->doSomething(); // ✅ Works (call method from inside the class)
    }

    public function doSomething(): void {
        $name = $this->name; // ✅ Works (use property from inside the class)
    }
}

$user = new User;
echo $user->name; // ✅ Works (use property from outside the class)

echo $user->doSomething(); // ✅ Works (call method from outside the class)

Private

Private means the opposite: It can only be accessed from inside the class and not the outside:

class User {
    private string $name = "John";

    public function __construct() {
        $this->doSomething(); // ✅ Works (call method from inside the class)
    }

    private function doSomething(): void {
        $name = $this->name; // ✅ Works (use property from inside the class)
    }
}

$user = new User;
echo $user->name; // ❌ Fails (use property from outside the class)

echo $user->doSomething(); // ❌ Fails (call method from outside the class)

Protected

Just like private, protected means you can't access the property/method from outside the class, but you can from the inside.

To understand the difference, we need an example with a class that extends another class:

class User {
    public string $name "John";
    private string $password = "12345";
    protected int $balance = 200;
}

class SuperUser extends User {
    public function doSomething() {
        $name = $this->name; // ✅ Works
        $password = $this->password; // ❌ Fails
        $balance = $this->balance; // ✅ Works
    }
}

$superuser = new SuperUser;
$name = $superuser->name; // ✅ Works
$password = $superuser->password; // ❌ Fails
$balance = $superuser->balance; // ❌ Fails

As you might can see, the difference lies in the visibility to the subclass. If the User class defines a property that is protected, it can't be accessed from the outside, but a class that extends the User class can access it.

If a property is private, it is only accessible from inside that class, and cannot be accessed from the outside or a class that extends it.

Don't worry if you don't yet understand how extends work, we'll take about that later in this series!

Note: If you don't define the visibility, it will automatically be public.

Getters and Setters

Now we know about properties, methods, and visibility, we can talk about getters and setters.

Getters and setters are functions that allow you to get and set something:

class User {
    private string $name;

    public function getName(): string {
        return $this->name;
    }

    public function setName(string $name): void {
        $this->name = $name;
    }
}

// Usage
$user = new User;
$user->setName("John");
echo "Hello " . $user->getName(); // Hello John

As you can see, since we now have two public methods to get and set the name, we can change the visibility of the $name property to private.

This in itself might not seem too helpful, but this enables us a few things:

Validation

We can add validation to the setter:

class User {
    private string $name;

    public function getName(): string {
        return $this->name;
    }

    public function setName(string $name): void {
        if(strlen($name) < 2) {
            throw new Exception("Name must be at least 2 characters long");
        }

        $this->name = $name;
    }
}

// Usage
$user = new User;
$user->setName("J"); // ❌ Exception: "Name must be at least 2 characters long"
$user->setName("John"); // ✅ Works

Hide Internal Representation of the Data

Let's say we have a first and last name. The getter can return the full name, while the data is actually stored in two different properties:

class User {
    private string $firstname;
    private string $lastname;

    public function setFirstName(string $firstname): void {
        $this->firstname = $firstname;
    }

    public function setLastName(string $lastname): void {
        $this->lastname = $lastname;
    }

    public function getFullName(): string {
        return $this->firstname . ' ' . $this->lastname;
    }
}

// Usage
$user = new User;
$user->setFirstName("John");
$user->setLastName("Doe");
$fullname = $user->getFullName(); // "John Doe"

Next Steps

To recap, in this post you have learned:

• How to create a class

• How to define and use properties and methods

• What the constructor is (and the destructor)

• The different visibilities (public, private, protected)

• Getters and setters

In the next part of this series, we'll dive into inheritance and the extends keyword (you have already seen an example in this post!)

But feel free to play around with classes before continuing. Understanding how classes work is fundamental for this series.

Whenever you feel ready, continue to the next part about inheritance.

This is the first of a series where we transform simple scripts into powerful, modular applications! If you've been coding in PHP but haven't explored the magic of Object-Oriented Programming (OOP) yet, you're in for a treat. Starting with the basics (what is a class, anyway?) we will make our way up to more advanced topics like dependency injection, service containers, and different design patterns.

We'll start by breaking down the fundamental concepts of OOP — what it is, why it matters, and how it can revolutionize your approach to coding. Through simple, hands-on examples, you'll see how classes and objects form the backbone of this paradigm, setting the stage for more complex and exciting topics in our upcoming posts.

Ready to unlock a new level of coding proficiency? Let's dive into the basics of OOP in PHP and discover how to build better, cleaner, and more scalable applications from the ground up!

What is Object-Oriented Programming (OOP)?

In OOP, computer programs are designed by making them out of objects that interact with one another. — Wikipedia

In the OOP world, you're mostly working with classes. You have one class that interacts with another class, which interacts with another class, and so on.

But before we go too deep into the concepts behind OOP, let's start with some code:

<?php

$user = "John Doe";
$balance = 100;

function deposit(int $amount) {
    global $balance;
    $balance += $amount;
}

function withdraw(int $amount) {
    global $balance;
    $balance -= $amount;
}

// Usage
deposit(500);
withdraw(200);

echo "Balance: $" . $balance;
// Balance: $400

As you can see, we define a user, a balance, and two functions to modify it.

Tip: You can play around with the examples in this post on the online php playground!

This works for now, but there's a good chance we'll run into issues with this. For example, this only works with one $balance variable. What if we have a transaction and want to withdraw from one account and deposit to another?

Writing the First Class

Now, let's rebuild it with OOP in mind. To get started, we can think about the main objects we are working with. In this example, that's the user. So, let's create a user class!

But what is a class, anyway? A class is an object that has properties (attributes) and methods (functions). And, you can have many instances of one class.

In PHP, we define a class using the class keyword followed by a name. The name should be in PascalCase:

class User {

}

Cool! We can now create new instances of that class using the new keyword:

$user1 = new User;
var_dump($user1);

$user2 = new User;
var_dump($user2);

The result looks like this:

object(User)#1 (0) {
}
object(User)#2 (0) {
}

The different IDs behind the class name indicate that both objects are different instances of that class. If you var_dump the $user1 variable twice, the ID will be the same, as it's the same instance:

$user1 = new User;
var_dump($user1); // object(User)#1 (0) { }
var_dump($user1); // object(User)#1 (0) { }

Adding Properties

But our class is still empty, so let's change that. We can define properties directly inside the class:

class User {
    public string $name = "John Doe";
    public int $balance = 100;
}

Note: We'll come back later topublic. For now, just remember that public means it can be accessed from outside the class.

If we var_dump our two user instances again, we can see the following output:

object(User)#1 (2) {
  ["name"]=> string(8) "John Doe"
  ["balance"]=> int(100)
}
object(User)#2 (2) {
  ["name"]=> string(8) "John Doe"
  ["balance"]=> int(100)
}

The Class Constructor

Both instances have the same values since we hardcoded them in the class. Let's change that and instead assign them when creating an instance. To do this, we need to add a class constructor. The constructor is a method that is called when creating a new instance of the class, and it can take parameters just like normal functions:

class User {
    public string $name;
    public int $balance;

    public function __construct(string $name, int $balance) {

    }
}

Now, the only thing missing is to assign the parameters received from the constructor to the class properties. We can reference properties and methods inside the class using the this keyword:

class User {
    public string $name;
    public int $balance;

    public function __construct(string $name, int $balance) {
        $this->name = $name;
        $this->balance = $balance;
    }
}

Now, we can pass in the data when creating instances of the User class:

$user1 = new User("John Doe", 100);
var_dump($user1);

$user2 = new User("Jane Doe", 200);
var_dump($user2);

This results in the following output:

object(User)#1 (2) {
  ["name"]=> string(8) "John Doe"
  ["balance"]=> int(100)
}
object(User)#2 (2) {
  ["name"]=> string(8) "Jane Doe"
  ["balance"]=> int(200)
}

Using Class Properties

We can also use the class properties:

$user1->balance += 300;
echo "Balance of " . $user1->name . ": " . $user1->balance;
// Balance of John Doe: 400

echo "Balance of " . $user2->name . ": " . $user2->balance;
// Balance of Jane Doe: 200

Adding Methods

To fully convert our previous example to a class, we also need to add two methods to deposit and withdraw some amount from the balance. We can do so by adding public functions to the class (and functions inside a class are called methods).

These methods can also reference properties and other methods in the class using $this:

class User {
    public string $name;
    public int $balance;

    public function __construct(string $name, int $balance) {
        $this->name = $name;
        $this->balance = $balance;
    }

    public function deposit(int $amount) {
        $this->balance += $amount;
    }

    public function withdraw(int $amount) {
        $this->balance -= $amount;
    }
}

And we can use these methods like this:

$user1 = new User("John Doe", 100);
$user1->deposit(500);
echo $user1->name . "'s balance: " . $user1->balance;
// John Doe's balance: 600

$user2 = new User("Jane Doe", 200);
$user2->withdraw(100);
echo $user2->name . "'s balance: " . $user2->balance;
// Jane Doe's balance: 100

To wrap it up, we converted the following code:

<?php

$user = "John Doe";
$balance = 100;

function deposit(int $amount) {
    global $balance;
    $balance += $amount;
}

function withdraw(int $amount) {
    global $balance;
    $balance -= $amount;
}

// Usage
deposit(500);
withdraw(200);

echo "Balance: $" . $balance;
// Balance: $400

To this:

<?php

class User {
    public string $name;
    public int $balance;

    public function __construct(string $name, int $balance) {
        $this->name = $name;
        $this->balance = $balance;
    }

    public function deposit(int $amount) {
        $this->balance += $amount;
    }

    public function withdraw(int $amount) {
        $this->balance -= $amount;
    }
}

$user = new User("John Doe", 100);

$user->deposit(500);
$user->withdraw(200);

echo "Balance: $" . $user->balance;
// Balance: $400

Interact with Another Class

But with the introduction of the user class, we are no longer limited to a global balance variable and one user but instead can create multiple users where each user has their own balance.

We can also extend this by allowing one user to pay another user:

class User {
    ...

    public function pay(User $payee, int $amount) {
        if($this->balance < $amount) {
            throw new Exception("Insufficient funds!");
        }

        $this->withdraw($amount);
        $payee->deposit($amount);
    }

    ...
}

// Usage
$user = new User("John Doe", 100);
$user2 = new User("Jane Doe", 200);

$user->pay($user2, 50);

echo "Balance of " . $user->name . ": $" . $user->balance;
// Balance of John Doe: $50

echo "Balance of " . $user2->name . ": $" . $user2->balance;
// Balance of Jane Doe: $250

Benefits of Using OOP in PHP

What's great about our new User class is the grouping of all related functionality inside this one class. There are no global variables, no functions spread across the codebase, and all data and functions are inside the class.

If you are using the User class and want to know what you can do with it, you can find all available methods in this one place.

As a bonus, most IDEs can show you the available methods while typing a variable that is a User instance:

Also, with this class structure, our application is very modular. Imagine your database connection, logger, and cache separate classes. For example, if you need to change the logger to use Redis, you only need to change the logger class, because all logic related to the cache is stored right in there.

And if you need to create for example an admin user type, you can create a new class that extends the user class and just adds the functionality for the admin. No need to re-implement the user functionality, it's inherited from the base class (in this case the user class).

But don't worry if you are not familiar with stuff like inheritance, we'll get to that!

Next Steps

If this was your first time diving into the world of OOP, this was a lot of stuff! Play around with the examples in this post, add some methods, and maybe even create another class!

When you're ready, head over to the next post.

Setting up Laravel 11

If you don't already have a Laravel application set up, you can simply create a new one by following the installation guide in the docs or simply running the following command:

composer create-project laravel/laravel example-app

Once installed, navigate into the example-app directory and start the Laravel dev server:

php artisan serve

The Laravel QR Code Package

There is a cool package by GiauPhan called Laravel QR Code that provides an easy way to generate QR codes in a Laravel application.

To get started, install the package using composer:

composer require giauphan/laravel-qr-code

This package provides a QRCode facade that we can use to create QR codes. So, let's get to work!

Prepare a Route for Testing

If you don't already have a spot where you need to create a QR code and want to play around with the package, you can create a testing route.

Let's define a route in the routes/web.php file and call it qr-code:

Route::get("/qr-code", function() {
    //
});

Inside the route handler function you can now put the code we're about to write to create QR codes.

How to Use the QR Code Package

The facade provided by the package provides multiple methods to create different types of QR codes:

• Email message

• Phone number

• SMS

• Text

• URL

• MeCard (contact)

• vCard (contact)

• WiFi network settings

For example, to create a QR code that contains some text, there is the text method:

use LaravelQRCode\Facades\QRCode;

QRCode::text("Hello World");

To directly output the QR code, use the png or svg methods:

use LaravelQRCode\Facades\QRCode;

// PNG
QRCode::text("Hello World")->png();

// SVG
QRCode::text("Hello World")->svg();

We'll dive into other QR code types like URL and MeCard in just a second, but first let's take a look what else we can do with the package.

Storing QR Codes as Images

A generated QR code can easily be saved on the filesystem using the setOutfile method. It accepts a path to save the file to which we can get using the Laravel storage facade:

use Illuminate\Support\Facades\Storage;
use LaravelQRCode\Facades\QRCode;

QRCode::text("Hello World")
    ->setOutfile(Storage::disk("public")->path("qrcode.png"))
    ->png();

With default Laravel configuration, this will save the file to <project-directory>/storage/app/public/qrcode.png. This works with the svg method too.

Customizing the Image

Changing the Size

By default, the pixel size is set to 4. You can change it to a value from 1 to 10 to make it bigger or smaller using the setSize method:

use LaravelQRCode\Facades\QRCode;

QRCode::text("Hello World")
    ->setSize(10)
    ->png();

Changing the Margin

The margin is set 3 by default, but you can change it to any size from 1 to 10 or remove it completely by setting it to 0:

use LaravelQRCode\Facades\QRCode;

QRCode::text("Hello World")
    ->setMargin(2)
    ->png();

Setting the Error Correction Level

The error correction level can be set via the setErrorCorrectionLevel method:

use LaravelQRCode\Facades\QRCode;

QRCode::text("Hello World")
    ->setErrorCorrectionLevel("Q")
    ->png();

More QR Code Types

URL

use LaravelQRCode\Facades\QRCode;

QRCode::url("https://linu.us")
    ->png();

SMS

use LaravelQRCode\Facades\QRCode;

QRCode::sms('+55 (31) 1234-5678', 'Text to send!')
    ->png();

Phone Number

use LaravelQRCode\Facades\QRCode;

QRCode::phone('+55 31 1234-5678')
    ->png();

Email Message

use LaravelQRCode\Facades\QRCode;

$to = 'john.doe@example.com';
$subject = 'QR Code Message';
$body = 'This email was created from a QR Code!';

QRCode::email($to, $body, $subject)
    ->png();

MeCard

A MeCard stores information about a single contact.

use LaravelQRCode\Facades\QRCode;

$name = 'John Doe';
$street = '1234 Main st.';
$phone = '+1 001 555-1234';
$email = 'john.doe@example.com';

QRCode::meCard($name, $street, $phone, $email)
    ->png();

vCard

use LaravelQRCode\Facades\QRCode;

// Personal Information
$firstName = 'John';
$lastName = 'Doe';
$title = 'Mr.';
$email = 'john.doe@example.com';
$company = "Acme Inc.";
$job = "Developer";
$url = "https://example.com";

// Addresses
$homeAddress = [
    'type' => 'home',
    'pref' => true,
    'street' => '123 my street st',
    'city' => 'My Beautiful Town',
    'state' => 'LV',
    'country' => 'Neverland',
    'zip' => '12345-678'
];
$wordAddress = [
    'type' => 'work',
    'pref' => false,
    'street' => '123 my work street st',
    'city' => 'My Dreadful Town',
    'state' => 'LV',
    'country' => 'Hell',
    'zip' => '12345-678'
];

$addresses = [$homeAddress, $wordAddress];

// Phones
$workPhone = [
    'type' => 'work',
    'number' => '001 555-1234',
    'cellPhone' => false
];
$homePhone = [
    'type' => 'home',
    'number' => '001 555-4321',
    'cellPhone' => false
];
$cellPhone = [
    'type' => 'work',
    'number' => '001 9999-8888',
    'cellPhone' => true
];

$phones = [$workPhone, $homePhone, $cellPhone];

QRCode::vCard($firstName, $lastName, $title, $email, $company, $job, $url, $addresses, $phones)
    ->setErrorCorrectionLevel('H')
    ->setSize(4)
    ->setMargin(2)
    ->svg();

Conclusion

Thanks to the Laravel QR Code package it's really easy to create QR codes in Laravel. For more detailed information, check out the GitHub repository and the official documentation.

Thank you for reading! 🙏

Do you find this article helpful? Support my work on Hashnode 💚

I'm also on 𝕏 / linusbenkner - would love to connect!

Happy coding 👨‍💻

Why Create a Custom Plugin?

WordPress has many features already built-in to build and customize your website, and with the Gutenberg Project WordPress is transforming the way you share content on the web.

However, if you want to customize or extend core functionality (and not only the design) you can use plugins to do just that. There’s a good change the WordPress plugin directory already has a plugin for your use-case, but if not, you have to build your own.

Setting up WordPress and a local development environment

Before we can create a plugin for WordPress, we need to have a working WordPress website. To follow along, you don’t need to have this website hosted somewhere - all you need is a webserver with PHP and a MySQL database running on your local computer.

Windows

1. Download and install XAMPP for Windows

2. Start XAMPP and start Apache and MySQL

3. Open http://localhost and verify that everything works

The root-directory of your webserver is located here:

C:/xampp/htdocs

PhpMyAdmin is available at http://localhost/phpMyAdmin to manage your databases (username root, no password).

The URL of your local webserver is http://localhost.

macOS

1. Download and install MAMP for macOS

2. Start MAMP and click on “Preferences”

3. Under “Ports”, make sure the Apache port is 80

4. Open http://localhost and verify that everything works

The root-directory of your webserver is located here:

/Applications/MAMP/htdocs

PhpMyAdmin is available at http://localhost/phpMyAdmin to manage your databases (username root, password root).

The URL of your local webserver is http://localhost.

Setting up WordPress

Create a new folder in your root-directory (see above) for your new WordPress installation. I’ll call it custom-wp-plugin which means my WordPress website will be available at http://localhost/custom-wp-plugin. You can also use a different name don’t use a separate folder at all.

Next, head over to wordpress.org to download the latest WordPress version. Extract the downloaded zip-archive to the new folder (previous step).

We also need a database, so open up phpMyAdmin and create a new database. To keep it organized, I’ll call it just like the folder of my WordPress installation, custom-wp-plugin.

Now the installation and database are ready, open the website in your browser (for me that’s http://localhost/custom-wp-plugin).

Select your language, enter your database credentials and hit “Run the installation”.

After the database setup, you’ll be prompted to setup your new website. Since this website is just running on my computer and only used to test the plugin, I use admin as username and password. If you want to use this in production on a server, make sure to use secure credentials.

Now hit “Install WordPress” and then “Log In” and login with the account you just created (admin & admin in my case).

WordPress is now installed and ready to use!

Creating the Foundation

WordPress stores customizations and content in different locations:

• Uploads (images, videos, …): <root-folder>/wp-content/uploads

• Themes: <root-folder>/wp-content/themes

• Plugins: <root-folder>/wp-content/plugins

• Data (pages, settings, articles, …): MySQL Database

In the plugins directory, each plugin has its own folder. So, let’s create one:

<root-folder>/wp-content/plugins/example-plugin

This folder will contain all the files needed for the plugin. And if you want to share the plugin with others, you can just put it in a zip-archive and upload it to another WordPress website.

Now open this folder using your favorite IDE or editor (like PhpStorm or Visual Studio Code). By the way, if you’re using Vim or NeoVim, I have written a full article on how to set it up for PHP (and WordPress) development:

Create the main file

The main file of any WordPress plugin is the PHP file with the same name as the plugin folder, in this case example-plugin. That means we have to create a new file called example-plugin.php in our plugin’s directory.

To get our plugin shown in the WordPress plugin manager, we have to add a comment to the top of the file with some information about the plugin:

<?php

/**
 * Plugin Name: Example Plugin
 * Version: 1.1
 */

You can also add more details if you want:

<?php

/**
 * Plugin Name: Example Plugin
 * Version: 1.1
 * Author: Linus Benkner
 * Author URI: https://blog.linu.us
 * Plugin URI: https://example-plugin.com
 * Description: A custom WordPress Plugin
 */

Activate the Plugin

Head over to your WordPress Dashboard and go to “Plugins”. You should see the plugin listed:

(I have deleted the default plugins “Akismet Anti-Spam” and “Hello Dolly”. You probably see these plugins listed there as well.)

You can now activate the plugin by clicking “Activate”.

Understanding Actions and Filters

Before we customize WordPress, it’s important to understand how this even works. In WordPress, nearly everything can be customized using actions and filters.

Actions

An action is a function that can be triggered somewhere else. For example:

// Listen to an action
function sayHello() {
    echo "Hello world!";
}
add_action("say_hello", "sayHello");

// Trigger an action
do_action("say_hello");

The do_action function can also pass data to all the listening functions:

// Listen to an action
function sayHello($name) {
    echo "Hello " . $name;
}
add_action("say_hello", "sayHello");

// Trigger an action
do_action("say_hello", "Linus");

It is also possible to remove actions:

// Listen to an action
function sayHello($name) {
    echo "Hello " . $name;
}
add_action("say_hello", "sayHello");

// Remove it
remove_action("say_hello", "sayHello");

// Trigger an action
do_action("say_hello", "Linus");

Now, obviously it doesn’t make much sense to create an action and then immediately remove it. Most often, remove_action is used to remove actions someone else created, for example WordPress itself.

Filters

Filters are pretty similar to actions, but with the key difference that they return a value:

// Create a filter
function applyTaxes($price) {
    return $price * 1.19;
}
add_filter("final_price", "applyTaxes");

// Filter something
$price = apply_filters("final_price", 100);
echo $price; // 119

When you have multiple filters, you can order them using a number as third argument. For example, we want to first reduce the price by 30 and then add taxes:

// Create a filter
function applyTaxes($price) {
    return $price * 1.19;
}
add_filter("final_price", "applyTaxes", 2); // <- Priority: 2

// Create a second filter
function applySpecialOfferSale($price) {
    return $price - 30;
}
add_filter("final_price", "applySpecialOfferSale", 1); // <- Priority: 1

// Filter something
$price = apply_filters("final_price", 100);
echo $price; // 83.3

Actions can be prioritized the same way.

Adding a Widget to the WordPress Dashboard

In our main plugin file, let’s listen to the following action: wp_dashboard_setup. That’s an action by WordPress, executed when the Dashboard is requested:

function create_custom_dashboard_widget() {
    // Todo
}
add_action("wp_dashboard_setup", "create_custom_dashboard_widget");

Inside this function, we can register a new Widget to the Dashboard using the wp_add_dashboard_widget function:

function create_custom_dashboard_widget() {
    wp_add_dashboard_widget(
        "example_plugin_widget", // Widget ID
        "Example Plugin Widget", // Widget Name
        "render_example_plugin_widget" // Callback function
    );
}
add_action("wp_dashboard_setup", "create_custom_dashboard_widget");

function render_example_plugin_widget() {
    echo "Hello World!";
}

In your WordPress Dashboard, you should see the new Widget:

Add Custom Content to Pages

Let’s shift gears to the actual content of a website. For this example, we’ll add a floating link to each page.

Append HTML to the Content

To build a floating link, we need to add some HTML to the page. And you might have guessed it, there is an action to do just that. So, we can use the wp_footer action to echo some HTML that will be printed at the bottom of the page:

function append_floating_link() {
    echo "<a href='https://blog.linu.us' id='floating-link'>Click me!</a>";
}
add_action("wp_footer", "append_floating_link");

On the home page, there is now a link at the bottom of the page.

Register Stylesheets

Our link is not “floating” yet, we need some CSS to make that happen. Create a new CSS file called style.css and add some styling:

#floating-link {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: #225482;
  color: white;
  font-weight: bold;
  padding: 0.8rem 1.4rem;
  border-radius: 0.4rem;
}

Now we can enqueue the stylesheet inside the wp_enqueue_scripts action:

function register_plugin_styles() {
    $plugin_url = plugin_dir_url(__FILE__); // <website_url>/wp-content/plugins/<plugin_name>/
    wp_enqueue_style("custom_plugin_style", $plugin_url . "style.css");
}
add_action("wp_enqueue_scripts", "register_plugin_styles");

On the page, you should now see a blue button:

Register JavaScript

You might also need custom JavaScript on the page, so let’s add some as well. For example, we can ask the user if they really want to leave the page when they click on the button. We can do this by selecting the link by the ID, add a event listener and cancel the “click” event if window.prompt returns false (the user denied). Create a new script script.js:

const floatingLink = document.getElementById("floating-link");

floatingLink.addEventListener("click", function (event) {
  if (window.confirm("Are you sure?")) {
    // Do nothing
  } else {
    event.preventDefault();
  }
});

We can add a script like we add a stylesheet:

function register_plugin_styles() {
    $plugin_url = plugin_dir_url(__FILE__); // <website_url>/wp-content/plugins/<plugin_name>/
    wp_enqueue_style("custom_plugin_style", $plugin_url . "style.css");

    // Register the script:
    wp_enqueue_script("custom_plugin_script", $plugin_url . "script.js", [], false, true);
}
add_action("wp_enqueue_scripts", "register_plugin_styles");

Note: I’ve added 3 more arguments [], false, true:

• []: Dependencies - not needed, that’s the default value

• false: Version - not needed, that’s the default value

• true: Load script in footer - this has to be true because if the script is loaded in the head of the document, we can’t directly access the link (because the script is loaded before the content is ready)

If you refresh the page and then click on the link, your browser will ask you if you really want to quit. With that, we now have added custom HTML, CSS and JavaScript to the page!

Creating a Settings Page

Settings pages are a great way to give certain WordPress users (administrators, editors, …) an option to customize the behavior of your plugin and / or display data.

Let’s build a settings page to customize the URL and text of our floating link.

How Options Work

WordPress has an extra database table just for settings like URL, theme, site name, and more. These options can be accessed using the get_option function:

$websiteName = get_option("blogname"); // Custom WP Plugin
$websiteURL = get_option("siteurl"); // http://localhost/custom-wp-plugin

The cool thing about this is, we’re able to add our own options to the table with the add_option function:

add_option(
    "example_plugin_button_url", // name of the option
    "https://google.com" // default value
);

Now, whenever we need to get the current value of the option, we can just use get_option:

$buttonURL = get_option("example_plugin_button_url");
echo $buttonURL; // https://google.com

And if we want to update the value, there is a function called update_option:

update_option("example_plugin_button_url", "https://blog.linu.us");

$buttonURL = get_option("example_plugin_button_url");
echo $buttonURL; // https://blog.linu.us

How the Settings Page is Structured

A settings page is a separate page in the WordPress Dashboard that’s only visible to users with a certain capability (e.g., only to administrators or editors).

Creating the Settings Page

First, we need the page itself. We start by registering a new menu page:

// Add the page to the menu
function example_plugin_options_page() {
    add_menu_page(
        'Example Plugin', // page title
        'Example Plugin Options', // menu title
        'manage_options', // required capability / permission
        'example_plugin_page', // slug
        'example_plugin_options_html' // callback function
    );
}
add_action('admin_menu', 'example_plugin_options_page');

Whenever the page is requested (by clicking the link in the menu), the callback function example_plugin_options_html will output the HTML for the settings page. So let’s create this function:

// Callback function for the page
function example_plugin_options_html() {
    // Stop here if user doesn't have required capabilities
    if (!current_user_can('manage_options')) return;

    // Create a message after successful update
    if(isset($_GET['settings-updated'])) {
        add_settings_error(
            'example_plugin_messages', 'example_plugin_message',
            'Settings saved!', // message
            'updated' // type (error|success|warning|info)
        );
    }

    // Display the messages
    settings_errors( 'example_plugin_messages' );

    // Form HTML
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="options.php" method="post">
            <?php
            settings_fields('example_plugin_page'); // output security fields
            do_settings_sections('example_plugin_page'); // output the sections
            submit_button('Save Settings'); // save button
            ?>
        </form>
    </div>
    <?php
}

Now, you can open your WordPress Dashboard:

With this, the settings page itself is created.

Creating the Section

Inside the admin_init action, we can use the add_settings_section function to add a section to out settings page:

function example_plugin_settings_init() {
    add_settings_section(
        'example_plugin_section_link', // section ID
        'Floating Link', // section title
        'example_plugin_section_link_callback', // callback function
        'example_plugin_page' // settings page ID
    );

    // ToDo: Register the field
}
add_action('admin_init', 'example_plugin_settings_init');

Again, the section needs a callback function that renders the section:

function example_plugin_section_link_callback($args) {
    ?>
    <p id="<?php echo esc_attr($args['id']); ?>">
        Settings for the floating link.
    </p>
    <?php
}

Now our settings page looks like this:

Finally, let’s add the field. In the action where we registered the section, I’ve added a comment “ToDo: Register the field”. That’s where we can now register the field:

register_setting(
    'example_plugin_page', // settings page
    'example_plugin_button_url' // option name
);
add_settings_field(
    'example_plugin_field_url', // field ID
    'URL', // field title
    'example_plugin_field_url_cb', // callback function
    'example_plugin_page', // settings page
    'example_plugin_section_link' // section
);

And you guessed it - we need a callback function for the field:

function example_plugin_field_url_cb($args) {
    // Get the current value for the option
    $url = get_option('example_plugin_button_url');

    // Output the field
    ?>
    <input
        type="text"
        id="example_plugin_button_url"
        value="<?php echo esc_attr($url); ?>"
        name="example_plugin_button_url"
    >
    <p class="description">
        The URL users will be sent to after clicking the floating link.
    </p>
    <?php
}

And that’s it! You can now see the currently stored value and change it:

Make use of the option

One last thing: When we created the HTML for our floating link, we hardcoded the link:

function append_floating_link() {
    echo "<a href='https://blog.linu.us' id='floating-link'>Click me!</a>";
}
add_action("wp_footer", "append_floating_link");

We can now change this to use our new option, so it actually uses the URL entered in the settings page:

function append_floating_link() {
    $url = get_option("example_plugin_button_url");
    echo "<a href='" . $url . "' id='floating-link'>Click me!</a>";
}
add_action("wp_footer", "append_floating_link");

Next Steps

Thank you for following along this guide. You now know:

• How to set WordPress up locally

• How to create a custom plugin for WordPress

• How to use actions and filters (with the example of adding custom HTML to the page)

• How to add custom CSS and JavaScript to the page

• How to create a custom settings page for your plugin

Before you leave, here are some helpful resources:

• WordPress Developer Resources: Detailed documentation of all functions, actions and filters WordPress provides

• List of all WordPress hooks (actions & filters): Great to quickly search for an action or filter, links directly to the documentation for each hook

• WordPress on StackExchange: The StackOverflow for WordPress, ask questions if you need help or browse through more than 100.000 questions

Thank you so much for reading, happy coding and have a great day 🤗👋

It's been a while since my last post, and today I want to show you how I sped up my development in the last weeks.

Until recently, I've been a big fan of Visual Studio Code and it was my primary editor for the last years. Over time, I learned more and more key bindings, started to really use the command palette and started to not do everything with the mouse - and guess what, it felt a lot faster than doing everything with the mouse.

Now, I still love VS Code, can really recommend it and I use it for example in the browser on GitHub. But since I tried Vim, I'm now using this as my primary editor.

Please note, I'm by far no (Neo)Vim expert and still learning it. In this article, I want to share my story about how I got into (Neo)Vim and what my setup looks like.

Why Vim?

When I first heard about Vim, I was like "why in the world would you use Vim when there is VS Code and all the other modern IDE's?". The only thing I knew about Vim at this time was how to exit Vim. But after a deeper look at Vim and some great input from a co-worker, I decided to at least try it for some time.

Here are the main reasons:

• 🚀 Speed. I was really impressed by how fast you can be with Vim - even when you're still learning it.
• 🌐 I can use it on the server. That's awesome, because I always used a FTP client when I needed to edit files on the server. Now, I can work with files on the server just as I do with files on my computer - directly from the terminal.
• ⌨️ I didn't really know any terminal-based text editor before.

How I learned Vim

Quick answer: Learning by doing :)

I started to use only Vim for a few days, which forced me to learn Vim commands and key bindings. No VS Code or any other text editor - only Vim. At the beginning, I was really slow and constantly looking up how to do basic stuff.

But every day I got faster, learned new commands and improved my workflow. And until now, I didn't go back to VS Code.

That's my config for Vim:

set encoding=UTF-8
" Set encoding

set number
" Show line numbers by default

syntax on
" Enable syntax highlighting by default

filetype plugin indent on
" show existing tab with 4 spaces width
set tabstop=4
" when indenting with '>', use 4 spaces width
set shiftwidth=4
" On pressing tab, insert 4 spaces
set expandtab

" Tab / Shift Tab to switch between tabs (:tabe <file>)
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>

NeoVim

After using Vim for a few weeks, I now moved to NeoVim. I really like Vim now, but there are some VS Code features I'd love to have in Vim. That's why I decided to use NeoVim.

That's how I wanted my NeoVim setup to look like:

• Not too different to my normal Vim setup so I can still work with the default Vim editor if I can't use NeoVim (e.g. on servers)
• Main use case:
  • PHP (+ WordPress)
  • React / NextJS
  • Svelte / SvelteKit

You see, a pretty simple setup. So now let's actually set it up:

Installation & Setup

1. Install NeoVim

Follow the instructions on the NeoVim installation page or use the following command:

macOS (with brew): brew install neovim

Windows (with winget): winget install NeoVim.NeoVim

2. Install VimPlug

To manage the plugins / extensions, I decided to use VimPlug as the plugin manager. Read the installation guide here or use the following command:

macOS / Linux:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq $env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force

3. NeoVim Config

Create the NeoVim config file ~/.config/nvim/init.vim and paste the following:

set encoding=UTF-8
set number
syntax on

" set tab to 4 spaces
filetype plugin indent on
set tabstop=4
set shiftwidth=4
set expandtab

" Tab / Shift Tab to navigate between tabs
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>

" CoC settings
set nobackup
set nowritebackup
set cmdheight=2
set updatetime=300
set shortmess+=c
if has("nvim-0.5.0") || has("patch-8.1.1564")
  set signcolumn=number
else
  set signcolumn=yes
endif
inoremap <silent><expr> <TAB>
      \ pumvisible() ? "\<C-n>" :
      \ CheckBackspace() ? "\<TAB>" :
      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"
function! CheckBackspace() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction
if has('nvim')
  inoremap <silent><expr> <c-space> coc#refresh()
else
  inoremap <silent><expr> <c-@> coc#refresh()
endif
inoremap <silent><expr> <cr> pumvisible() ? coc#_select_confirm()
                              \: "\<C-g>u\<CR>\<c-r>=coc#on_enter()\<CR>"
nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nnoremap <silent> K :call ShowDocumentation()<CR>
function! ShowDocumentation()
  if CocAction('hasProvider', 'hover')
    call CocActionAsync('doHover')
  else
    call feedkeys('K', 'in')
  endif
endfunction
autocmd CursorHold * silent call CocActionAsync('highlight')

" VimPlug plugin manager
call plug#begin()
Plug 'https://github.com/vim-airline/vim-airline'
Plug 'https://github.com/tpope/vim-commentary'
Plug 'https://github.com/ap/vim-css-color'
Plug 'https://github.com/rafi/awesome-vim-colorschemes'
Plug 'https://github.com/neoclide/coc.nvim'
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}
call plug#end()

" set the colorsheme
" list: https://github.com/rafi/awesome-vim-colorschemes
colorscheme minimalist

At the top, you can see some settings like the tab with, encoding and I also want syntax highlighting and line numbers enabled by default.

Next is a big config block for the CoC extension. I can't really explain what all this is doing, I got this from the CoC installation & setup guide. Basically, it enables the autocompletion window and creates some hotkeys like K to show the documentation.

Below that, you can find the VimPlug section. Here are all the plugins registered:

• vim-airline: status/tabline showing things like the current git branch and vim mode.
• vim-commentary: Comment stuff out, gcc to comment out lines
• vim-css-color: Highlight color names
• awesome-vim-colorschemes: A big collection of color schemes, I'm using minimalist (set with colorscheme <name>)
• coc.nvim: Language Server Support, completion, ...
• html5.vim: Syntax & indentation for HTML5 and SVG (required for vim-svelte)
• vim-javascript: Syntax & indentation for JavaScript (required for vim-svelte)
• vim-svelte: Syntax & indentation for Svelte

4. Install Plugins

Because we changed the NeoVim config, restart NeoVim first. There may be some errors because the plugins aren't installed yet. Use VimPlug to install the plugins specified in the config file:

:PlugInstall

5. Set Up CoC Extension

Once the plugins are installed, close NeoVim and navigate to the folder of the CoC extension:

macOS / Linux: ~/.local/share/nvim/plugged/coc.nvim/

Windows: ~/vimfiles/plugged/coc.nvim/

Now, install the dependencies and build the source code:

npm ci && npm run build

6. Extensions for the CoC Extension

You can now start NeoVim again and there shouldn't be any errors. To complete the setup, let's install some extensions for CoC, like a JS/TS language server and intelephense for PHP:

:CocInstall coc-tsserver coc-json coc-svelte @yaegassy/coc-intelephense

7. Optional: WordPress

I'm working with WordPress themes and plugins, but with the current setup every WordPress function is marked as error because the intelephense extension doesn't know I'm inside a WordPress theme with all the WordPress functions available. We can change that by opening the CoC config (:CocConfig) and adding "wordpress" to the list of intelephense.stubs. If you type "intelephense.stubs", you can use the autocompletion by CoC to create the whole list and then only append "wordpress" to the end of the list.

Full list:

{
    "intelephense.stubs": [
        "apache",
        "bcmath",
        "bz2",
        "calendar",
        "com_dotnet",
        "Core",
        "ctype",
        "curl",
        "date",
        "dba",
        "dom",
        "enchant",
        "exif",
        "FFI",
        "fileinfo",
        "filter",
        "fpm",
        "ftp",
        "gd",
        "gettext",
        "gmp",
        "hash",
        "iconv",
        "imap",
        "intl",
        "json",
        "ldap",
        "libxml",
        "mbstring",
        "meta",
        "mysqli",
        "oci8",
        "odbc",
        "openssl",
        "pcntl",
        "pcre",
        "PDO",
        "pdo_ibm",
        "pdo_mysql",
        "pdo_pgsql",
        "pdo_sqlite",
        "pgsql",
        "Phar",
        "posix",
        "pspell",
        "readline",
        "Reflection",
        "session",
        "shmop",
        "SimpleXML",
        "snmp",
        "soap",
        "sockets",
        "sodium",
        "SPL",
        "sqlite3",
        "standard",
        "superglobals",
        "sysvmsg",
        "sysvsem",
        "sysvshm",
        "tidy",
        "tokenizer",
        "xml",
        "xmlreader",
        "xmlrpc",
        "xmlwriter",
        "xsl",
        "Zend OPcache",
        "zip",
        "zlib",
        "wordpress"
    ]
}

And that's my current NeoVim setup. Maybe this will help some of you who want to get started with NeoVim.

What's your favorite editor or IDE? Are you using Vim / NeoVim too? Let me know in the comments!

Thank you for reading, happy coding and have a great day! 😊🚀

Recently, Contabo launched their new storage solution Object Storage. These object storages provide an S3 compatible API and can be used quite easily - in this post, I show you how.

You can find the full source code for both NodeJS and Python3/Flask at the bottom.

Get your Object Storage

To follow along, you first need your own Object Storage. You can go directly to Contabo and order your Object Storage now. After you've completed the purchase, you can log in to your customer panel and select "Object Storage" in the sidebar. If you've never done this before, you'll be asked to set a password for the Object Storage Panel. After you've set your password, you can log in to the Object Storage Panel with your Contabo Email and the newly set password.

Now navigate to "Storage" - "Object Storage (Buckets)" in the sidebar and you should see your new Object Storage. Perfect!

I didn't find an option to change the language in this panel, so everything is in german, I'm sorry :(

Create a bucket

Your files are organized in buckets, so let's create our first bucket. Below your Object Storage in the Object Storage Panel is a button to create a new bucket.

Now name your bucket and choose a region where your bucket should be located. Create it and you should see your new bucket on the list.

Get the access keys

To connect with the S3 API of your storage, we need two keys to authenticate:

1. The Access Key and
2. the Secret Key.

You can generate them in the Object Storage Panel by navigating to "Account" - "Security and access". Scroll down to the section "S3 Object Storage". That's where you can see both tokens. If you don't, click "Regenerate secret key" to create a new secret key.

We'll need both keys later when connecting to the S3 API.

Setting up NodeJS and Express

For this example, I'll build a simple webserver with ExpressJS to handle file uploads and also return all currently stored files.

Open up a new folder and initialize a new npm project. We also need express for our webserver and aws-sdk to interact with the S3 API, so we install them too:

npm init -y
npm i express aws-sdk

To get started we first need the webserver, so let's start express:

// index.js
const express = require("express")
const AWS = require("aws-sdk")

const app = express()

/* 
 * Code goes here
 */

app.listen(4000, function() {
    console.log("🚀 App is running on http://localhost:4000")
})

Create the routes

For this simple project we need 3 routes:

1. GET /: The form to upload a file to our express server
2. POST /upload: The form handler to upload the file to the storage bucket
3. GET /list: A list of all files inside the storage bucket

Show the form

Well, before we can show a form, we first need a form. For this demo, I just created a quick HTML page form.html with a simple form on it to upload a file. Notice the form action /upload, this points to the route handling the file upload, and also the method post.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <h1>Upload a file to Contabo Object Storage</h1>

    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" accept="image/png,image/jpeg" name="fileToUpload" />
        <button type="submit">Upload the file</button>
    </form>
</body>
</html>

All we have left to do is use express to send the file on each GET request to the root path:

// Show the form
app.get("/", function(request, response) {
    response.sendFile(__dirname + "/form.html") // <- Point this to your HTML file containing the form
})

Done! You can test it by running node index.js to start the express server and open http://localhost:4000 in your browser. You should see the form.

Handle the file upload

To handle the file upload, we need the express-fileupload package to parse incoming multipart/form-data requests and extract the files:

npm i express-fileupload

And of course import it at the top of our index.js file:

const express = require("express")
const AWS = require("aws-sdk")

const fileUpload = require('express-fileupload') // NEW

Express-Fileupload is a middleware, so we need to register it to our express app:

const app = express()

// Middleware to handle incoming files
app.use(fileUpload({
    createParentPath: true
}))

In the next step, we create the actual route to handle the POST request with the file to upload:

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    /*
     * TODO Upload the file to the storage bucket
     */

    response.sendStatus(200)
})

Connect to the S3 API

Things are getting real, we'll now connect to the S3 API to interact with our storage bucket!

Right after we create the express app by calling express(), let's create the connection to the S3 API:

const app = express()

// Connect to S3
const s3 = new AWS.S3({
    endpoint: `contabo_storage_bucket_url`, // e.g. https://eu2.contabostorage.com/bucketname
    accessKeyId: "your_access_key_here",
    secretAccessKey: "your_secret_key_here",
    s3BucketEndpoint: true,
});

We can now use all the S3 functions with our new s3 variable.

Upload the file

Back in our POST /upload route, we need to parse the data from the file:

// inside POST /upload route
const file = request?.files?.["fileToUpload"] || null

// Return if the request doesn't contain the file
if(!file) return response.sendStatus(400)

// Destructure the content of the file object
const { name, mimetype, size, data } = file
const fileContent  = Buffer.from(data, ' ');

We can now call the s3.putObject function to upload a file to the storage bucket.

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    // Destructure the content of the file object
    const { name, mimetype, size, data } = file
    const fileContent  = Buffer.from(data, ' ');

    /* Add security checks (e.g. max size) here */

    s3.putObject({
        Body: fileContent, // The actual file content
        Bucket: "bucket_name",
        Key: name, // The name of the file
    }, function(err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            response.sendStatus(200)
        }
    });
})

Note: This is for demo purposes only. When used in production, make sure you validate the file before uploading (name, file size, file type, ...). I've added a comment in the code below where you should validation and security checks.

List all the files

You may want to show all uploaded files (e.g. inside a media browser), so let's also implement the route to list all files inside the bucket. For this demo, I'll just return the full result from the S3 API as JSON, but you can do whatever you want with it.

// Show all files
app.get("/list", function(request, response) {
    // Get all objects inside the bucket
    s3.listObjects({
        Bucket: "bucket_name",
    }, function (err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            // Return the list ("Contents") as JSON
            response.json(data.Contents)
        }
    })
})

Full Code

const express = require("express")
const AWS = require("aws-sdk")

const fileUpload = require('express-fileupload')

const app = express()

// Connect to S3
const s3 = new AWS.S3({
    endpoint: `contabo_storage_bucket_url`, // e.g. https://eu2.contabostorage.com/bucketname
    accessKeyId: "your_access_key_here",
    secretAccessKey: "your_secret_key_here",
    s3BucketEndpoint: true,
});

// Middleware to handle incoming files
app.use(fileUpload({
    createParentPath: true
}))

// Show the form
app.get("/", function(request, response) {
    response.sendFile(__dirname + "/form.html")
})

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    // Destructure the content of the file object
    const { name, mimetype, size, data } = file
    const fileContent  = Buffer.from(data, ' ');

    /* Add security checks (e.g. max size) here */

    s3.putObject({
        Body: fileContent,
        Bucket: "your_bucket",
        Key: name,
    }, function(err, data) {
        console.log(err, data)
        if (err) {
            response.sendStatus(500)
        } else {
            response.sendStatus(200)
        }
    });
})

// Show all files
app.get("/list", function(request, response) {
    // Get all objects inside the bucket
    s3.listObjects({
        Bucket: "your_bucket",
    }, function (err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            // Return the list ("Contents") as JSON
            response.json(data.Contents)
        }
    })
})

app.listen(4000, function() {
    console.log("🚀 App is running on http://localhost:4000")
})

Python3 and Flask

from flask import Flask, render_template, request  # pip install flask
import boto3  # pip install boto3
import os
from werkzeug.utils import secure_filename
app = Flask(__name__)

session = boto3.session.Session()
client = session.client('s3',
                        region_name='eu2',
                        # e.g. https://eu2.contabostorage.com
                        endpoint_url='contabo_storage_bucket_url',
                        aws_access_key_id='your_access_key_here',
                        aws_secret_access_key='your_secret_key_here')


@app.route('/')
def show_form():
    return render_template('form.html')  # located in templates/form.html


@app.route('/upload', methods=['POST'])
def handle_upload():
    f = request.files['fileToUpload']  # Get the file
    filename = secure_filename(f.filename)
    f.save(filename)  # Save the file temporarily
    client.upload_file(filename,  # Path to local file
                       'your_bucket',  # Bucket name
                       filename)  # Name for remote file
    os.remove(filename)  # Remove the file after uploading
    return 'Done!'


if __name__ == '__main__':
    app.run(debug=True)

And that's it - now you know how to upload files to your Contabo Object Storage! 🥳

Thank you very much for reading and don't forget to follow me on Twitter @EinLinuus and also here on Hashnode and get notified everytime I publish a new post. 🙌

Have a nice day 🚀👋

here on my blog and on Twitter, I've said very often that SvelteKit is awesome. So in this guide, I'll show you how you can deploy and host your SvelteKit-App.

Requirements

To follow along, you obviously need a SvelteKit-App you want to deploy. If you don't have one, I've already written an article on how to set up SvelteKit.

There are multiple ways you can create an app on the DigitalOcean App Platform. You need to choose between one of these sources:

• GitHub
• GitLab
• Docker Hub
• DigitalOcean Container Registry

I've only tested it with GitHub and that's what I'm using in this demo. To follow along, I assume you have your SvelteKit-App stored in a GitHub repository.

Setup Node

By default, the app Platform uses NodeJS version 12. You can change the NodeJS version in the package.json file. I'll change the version to NodeJS 16.13.1.

{
  "engines": {
    "node": "16.13.1"
  },
  "name": "..."
}

Expose the host

In order for your app to be accessible, the host must be exposed. We can do this with a simple --host flag on the preview command in the package.json:

{
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "HOST=0.0.0.0 svelte-kit preview --host",
  },
}

Setup the App

If you're ready to deploy, head over to DigitalOcean and create a new app. In the source selection, select the source where your app's source code is hosted.

In the next step, you'll be asked for a unique name for your app. Also, you need to choose the branch that'll be used as the source for the deployments. If you push an update to this branch, the app will re-deploy automatically (you can disable this later).

Next up, choose "Web service" as the type for the component (one app can have multiple components. The SvelteKit-App is one component). Settings:

• HTTP Routes / Path: /
• Build command: npm run build
• Run command: npm run preview
• HTTP Port: 3000

You can also add environment variables here if you want (can be changed later).

After this configuration, move on to the plan selection. Make sure you're using at least the Basic-Plan because in order for our SvelteKit-App to work we need the "dynamic-apps" feature.

If you're just getting started, the smallest container size for 5$ / month is most likely enough for you.

Now you can hit launch and wait for the deployment process to be finished.

More configuration

Here are some settings you might want to change:

• Environment variables: Settings -> App / Component -> Environment variables (choose "App" to make them available to all components or select only one component to make them only available to the specified component)
• Disable auto-deploy: Settings -> Component -> Source

And that's it for this article - I hope this helped you and you can now deploy your SvelteKit-App easy and fast 🔥

Thank you so much for reading and I'll see you in the next one 👋

Today we're taking a look at Socket.IO and how we can integrate it into our SvelteKit project. As an example, we'll be building a realtime chat app in this demo.

Setup the project

First, we need a SvelteKit project. If you already have a project, you can skip this step. If not, you can simply create one with the following commands:

npm init svelte@next live-chat-app
cd live-chat-app
npm install
npm run dev -- --open

I'm using Tailwind CSS in this demo. I've already written an article on how to add Tailwind CSS to SvelteKit.

Install the dependencies

All we need is Socket.IO for the server-side part (handling the incoming requests and connections) and the Socket.IO-Client for the client-side part (sending and receiving messages).

npm i socket.io socket.io-client

Inject the Socket.IO server

We can inject the Socket.IO server directly in the SvelteKit config:

// ... (other imports here)
import { Server } from 'socket.io'; // <-- Import the Socket.IO server

const config = {
    // ...

    kit: {
        adapter: adapter(),
        vite: {
            plugins: [
                {
                    name: 'sveltekit-socket-io',
                    configureServer(server) {
                        const io = new Server(server.httpServer);

                        // Socket.IO stuff goes here                

                        console.log('SocketIO injected');
                    }
                }
            ]
        }
    },

    // ...
};

export default config;

Server-side part

For this demo, I'll keep things simple and generate a random username for each client and just broadcast incoming messages along with the username and time.

// This is located in the svelte config (see above "Socket.IO stuff goes here")
io.on('connection', (socket) => {
    // Generate a random username and send it to the client to display it
    let username = `User ${Math.round(Math.random() * 999999)}`;
    socket.emit('name', username);

    // Receive incoming messages and broadcast them
    socket.on('message', (message) => {
        io.emit('message', {
            from: username,
            message: message,
            time: new Date().toLocaleString()
        });
    });
});

Please note: This guide is not a full Socket.IO guide. The example is pretty simple and only to show you how to use Socket.IO with SvelteKit.

Client-Side part

Connect to Socket.IO

Because you may want to use the Socket.IO connection in multiple components or pages, I recommend to separate the connection stuff:

// src/lib/realtime.js
import ioClient from "socket.io-client";
const ENDPOINT = "http://localhost:3000";

const socket = ioClient(ENDPOINT)

export const io = socket

Now we can import and use io everywhere in our project.

Layout

Before we add Socket.IO to the client-side, I'll create a simple UI for our demo. Because this is only the chat, I'll do this directly in the src/routes/index.svelte:

<script>
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {

    }
</script>

<div class="h-screen w-screen bg-zinc-800">
    <div class="h-full w-full max-w-md mx-auto bg-zinc-500 flex flex-col">

        <header class="px-6 py-4 border-b border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center justify-between">
            <span class="font-bold text-xl">My Chat app</span>
            <span>{username}</span>
        </header>

        <div class="h-full w-full p-4">
            {#each messages as message}
                <div class="bg-zinc-300 rounded-xl rounded-tl-none px-4 py-3 my-4 w-fit">
                    <span class="flex items-center space-between gap-4">
                        <b>{message.from}</b>
                        <i>{message.time}</i>
                    </span>
                    {message.message}
                </div>
            {/each}
        </div>

        <form action="#" on:submit|preventDefault={sendMessage}
            class="px-6 py-4 border-t border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center"
        >
            <input type="text" bind:value={textfield} placeholder="Type something..." class="bg-transparent border-none px-4 py-3 w-full" />
            <button type="submit" class="shrink-0 border border-white rounded-lg px-4 py-3">Send</button>
        </form>

    </div>
</div>

As you can see, I'm storing all messages inside the messages array and output them inside the each loop.

To send messages, I've attached a listener to the form sendMessage.

Send messages

First, we need to import io from the file we just created (realtime.js). In our send function, we can simply trigger the message event (that's how we called it in the server-side part) with the message:

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

Receive messages

To receive messages, we need to listen to the message event (that's how we called it in the server-side part). The object we receive is the same object we sent (server-side) and we can just add it to the messages array:

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    onMount(() => {
        io.on("message", message => { // Listen to the message event
            messages = [...messages, message]
        })
        io.on("name", name => { // Another listener for the name:
            username = name // Update the name so it can be displayed
        })
    })

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

Now, run npm run dev and test it out:

Make it work in production

The configuration above works perfectly in development environments (npm run dev), but didn't really work in production environments, so here is a quick guide on how to make it work in both development and production environments:

Make sure you use the adapter-node and create a server.js file. Here we can create our own express server and add SvelteKit to it using the handlers in the build directory (created by the adapter-node). In here, we can then inject SocketIO:

// server.js
import http from "http";
import { handler } from './build/handler.js'; // <- Import SvelteKit handlers
import injectSocketIO from "./socket-handler.js"; // The SocketIO stuff (see next step)
import express from 'express';

const app = express();
const server = http.createServer(app);

// Inject SocketIO
injectSocketIO(server)

// SvelteKit handlers
app.use(handler);

server.listen(3000, () => {
  console.log('Running on http://localhost:3000');
});

To eliminate code duplication, extract the SocketIO stuff from the sveltekit.config.js to a new file socket-handler.js:

// socket-handler.js
import { Server } from "socket.io";

export default function injectSocketIO(server) {
    const io = new Server(server);

    // Socket.IO stuff goes here
    io.on('connection', (socket) => {
        // Generate a random username and send it to the client to display it
        let username = `User ${Math.round(Math.random() * 999999)}`;
        socket.emit('name', username);

        // Receive incoming messages and broadcast them
        socket.on('message', (message) => {
            io.emit('message', {
                from: username,
                message: message,
                time: new Date().toLocaleString()
            });
        });
    });

    console.log('SocketIO injected');
}

And now use this function in the SvelteKit config as well so it works in both dev and production environments:

import adapter from '@sveltejs/adapter-node';
import injectSocketIO from "./socket-handler.js"; // <- Import the new function

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        vite: {
            plugins: [
                {
                    name: "sveltekit-socket-io",
                    configureServer(server) {
                        injectSocketIO(server.httpServer); // <- call the function here
                    }
                }
            ]
        }
    }
};

export default config;

Now, to run the server:

# Dev
npm run dev

# Production
npm run build
node server.js

And that's it - now you can send data in realtime between the server and the client! 🚀

Thanks for reading and have a great day 🤗

Today we'll take a look at SQL, starting with the basics and then moving forwards to more complicated concepts and queries. But before we start writing the first query, make sure you're familiar with the core concepts of SQL and relational databases. Making queries is important, but knowing how to structure a database even more.

What is SQL?

First things first, what the hell is SQL? If you don't know already, SQL stands for "Structured Query Language" and is a database query language. It's used to interact with databases like MySQL, Postgres or SQLite. The data in relational databases is organized in tables and rows.

How the data is organized

You store your data in a database that can contain many tables. For example, the database "blog" contains the tables "users" and "posts". Each table has many columns. The "posts" table may have the columns "title", "image" and "description".

Relations

In relational databases, there are mostly no duplications. If we use the example above, we don't store the user information in the "posts" table, because one user can have multiple posts, which means the user information would be stored multiple times in the table. Instead, we store the user information in a separate table "users" and reference the user in the "posts" table.

Primary and foreign keys

In order to reference something, we need a unique identifier of the row we want to reference.

Note: Using something like the username may seems logical, but I highly recommend to use a separate, unique ID for each user that can't be changed. A username is unique, but if a user changes the username, you'd need to change the username everywhere you referenced it.

This unique identifier is called a primary key. When you use it as a reference, for example in the "posts" table, it's called a foreign key.

Conclusion: A foreign key references a primary key in another table that's unique for that table.

Create the database

To get started, we first need a database. You can install for example MySQL on your local machine, if available on a server or rent a database online.

But if you're just starting and want to follow along with this guide, you can use my SQL playground, based on SQLite:

Open the SQL-Playground on sql.webaze.net

CREATE TABLE IF NOT EXISTS users (
    id INT NOT NULL,
    name VARCHAR(255) NOT NULL,
    username VARCHAR(255) NOT NULL,
    PRIMARY KEY (id)
);

Executing this query will create a database called users and the columns

• id (Integer) which is the primary key (see PRIMARY KEY (id)) and can't be null
• name which is a varchar/string with a max length of 255, can't be null
• username which is also a varchar/string with a max length of 255, can't be null

To prevent errors if the table already exists, I used CREATE TABLE IF NOT EXISTS instead of just CREATE TABLE.

Insert data

Now we have the database and table ready, let's create our first user. Insertions are made with the INSERT statement:

INSERT INTO users (id, name, username) VALUES (1, "Linus", "EinLinuus");

We can also insert multiple rows at once:

INSERT INTO
    users (id, name, username)
VALUES
    (1, "Linus", "EinLinuus"),
    (2, "John", "John_Doe");

This should give you the following result:

Query the users

With a few rows in our table, we can now query them. To select data from the database, use the SELECT statement:

/* Select everything (*) */
SELECT * FROM users;

/* Select only specific columns */
SELECT name, username FROM users;

Filtering

Getting all users at once may be useful in some cases, but most often you want to filter them, for example get a specific user by the username or search through them with a search keyword.

/* Get all users with the username "EinLinuus"  */
SELECT * FROM users
WHERE username = "EinLinuus";

/* Get the user with the id 2 */
SELECT * FROM users
WHERE id = 2;

/* Combinations with AND and OR */
SELECT * FROM users
WHERE id = 1 AND name = "Linus";

There are many operators you can use here:

/* is not */
SELECT * FROM users
WHERE username != "EinLinuus";

/* LIKE (% stands for anything) */
SELECT * FROM users
WHERE username LIKE "%Linuus%";

/* Greater / Less than */
SELECT * FROM users
WHERE id > 1;

Limits and pagination

To limit or offset your results, use LIMIT. You can use it simply limit the amount of rows returned, or to offset it (return X rows, but skip the first Y rows).

/* Return only 1 row */
SELECT * FROM users LIMIT 1;

/* Return only 5 rows and skip 1 row */
SELECT * FROM users LIMIT 1, 5;

Ordering

Ordering is possible too, just use ORDER BY followed by the column name and the direction.

/* Order ascending by id */
SELECT * FROM users ORDER BY id ASC;

/* Order descending by id */
SELECT * FROM users ORDER BY id DESC;

You can also order by multiple columns:

SELECT * FROM users
ORDER BY
   name DESC,
   id ASC;

Counting

Now if your multi-billion startup idea starts getting users, you might want to know how many users exactly:

SELECT COUNT(id) FROM users;

This will return one row with the count. But, the column name in the result is COUNT(id). You might want to have something more readable here, and that's why you can...

Rename columns

To rename a column, just use AS followed by the new name:

SELECT id AS user_id, username FROM users;
SELECT COUNT(id) as total_users FROM users;

Grouping

Grouping allows you to group multiple rows, for example we can get the amount of users with the same name:

SELECT COUNT(id) AS users, name
FROM users GROUP BY name;

Ordering inside the query

If you want to combine multiple of the above, make sure you respect this order:

1. SELECT Which columns you want to select
2. FROM Which table you want to query
3. WHERE Which rows you want to select
4. GROUP How you want to group the rows
5. ORDER In which order you want the result
6. LIMIT How many rows you want

Update rows

Updating rows is just as easy as inserting new ones. Use UPDATE to update a row and use WHERE and LIMIT from the SELECT guide to specify which rows you want to update.

UPDATE users
SET username = "JohnDoe"
WHERE id = 2;

/* Update multiple columns */
UPDATE users
SET name= "John D", username = "JohnDoe"
WHERE id = 2;

The query above changes the username user 2 to "JohnDoe".

Delete rows

Deleting works nearly the same, with the only difference that you just specify a table, because you're deleting the whole row.

DELETE FROM users
WHERE id = 2;

Work with multiple tables

Things get much more interesting when we work with multiple tables. Let's add another table to our example:

CREATE TABLE IF NOT EXISTS posts (
    id INT NOT NULL,
    title VARCHAR(255) NOT NULL,
    user INT NOT NULL,
    PRIMARY KEY (id)
);

/* Insert some dummy data */
INSERT INTO posts (id, title, user) VALUES
(1, "Post 1", 1),
(2, "Post 2", 2),
(3, "Post 3", 2),
(4, "Post 4", 1);

If you followed along, you know how to get all posts, filter, order, update and delete them. But you may have noticed the connection between both tables: The posts table is referencing users from the users table in the posts.user column.

Let's say we want to display all posts on a website. We create a simple SELECT statement to query all available posts:

SELECT * FROM posts;

This works, but we want to show the author's name as well. How can we do that?

Table joins

Inside one SQL query, we can join other tables to access their data as well.

There are different types of joins:

A INNER join connects all rows that are in both tables. If a user has no posts, that user gets skipped.

A LEFT join uses the first table as basis and connects, if possible, the second table. The RIGHT join is basically the opposite of a left join, here is the second table the basis.

A FULL / FULL OUTER join connects both tables and missing data is represented as NULL.

Now, let's create a query with a JOIN to get all posts and their authors:

SELECT * FROM users
JOIN posts ON posts.user = users.id;

The ON field = otherField part tells the database which row(s) to select in the table we're joining. In this case, the column user in the posts table references a id in the users table.

We can also use the data from the other table inside our WHERE clause:

/* posts.* = Everything from the posts table */
SELECT posts.* FROM users
JOIN posts ON posts.user = users.id
WHERE users.name = "EinLinuus";

Beyond this

SQL is very powerful and can do much more than what I described in this article. Because it's a lot of work to write something like this, you can find the next part of this guide on my BMC-Page. Thank you very much ❤️

Content of Part 2:

1. Relations: One-to-Many and Many-to-Many
2. Working with dates (MySQL)
3. The check constraint
4. Working with tables
   1. Edit tables / Alter
   2. Delete tables / Drop
5. Security: SQL Injections

SQL: The basics and beyond (Part 2)

Thanks for reading 🤗

Don't worry - you don't need to have an existing SvelteKit project - we'll start at the beginning :)

Don't want to read, just code? Click here to use the template

1. Setup a SvelteKit project

First up, we need a SvelteKit project. If you already have one, you can skip this step.

The setup is done by a few simple commands:

# Setup
npm init svelte@next my-app
# Navigate into the project's folder
cd my-app
# Install the dependencies
npm install

2. Install the dependencies

We'll install the following dependencies:

• tailwindcss (obviously)
• postcss because we use TailwindCSS as a PostCSS plugin
• cssnano to optimize the CSS
• autoprefixer to add prefixes to CSS-properties for better browser-support
• svelte-preprocess to run PostCSS as a preprocessor

And (optional) these first-party Tailwind CSS plugins:

• forms to make form-styling more easy
• typography to style vanilla HTML

Because we need them to preprocess our CSS and not in the production build, we can save them as development dependencies with the -D flag.

npm i tailwindcss postcss cssnano autoprefixer svelte-preprocess @tailwindcss/forms @tailwindcss/typography -D

3. Configure PostCSS

Now we have the dependencies installed, we need to configure them correctly. Create a file postcss.config.cjs in the project's root folder and add this:

const tailwindcss = require("tailwindcss")
const autoprefixer = require("autoprefixer")
const cssnano = require("cssnano")

const mode = process.env.NODE_ENV
const dev = mode === "development"

const config = {
    plugins: [
        tailwindcss(), // first load Tailwind CSS
        autoprefixer(), // then run autoprefixer
        !dev && // optimize the code for production
            cssnano({
                preset: "default",
            }),
    ],
}

module.exports = config

4. Configure Tailwind CSS

We also need a Tailwind CSS config file, so create one called tailwind.config.js in the project's root folder:

const config = {
    mode: "jit",
    content: ["./src/**/*.{html,js,svelte,ts}"],
    theme: {
        extend: {},
    },
    // Only add this if you installed the Tailwind CSS plugins:
    plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
}

module.exports = config

5. Add PostCSS to SvelteKit

In your svelte.config.js, import the installed svelte-preprocess module and add it to the preprocess array:

import adapter from "@sveltejs/adapter-auto"
import preprocess from "svelte-preprocess" // <- Import it here

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [ // <- Create this option
        preprocess({ // <- Add the module
            postcss: true, // <- Set this to enable PostCSS
        }),
    ],
    kit: {
        adapter: adapter(),
        target: "#svelte",
    },
}

export default config

6. Add the CSS to the code

We need a main CSS file, so let's create it in src/app.css with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

And don't forget to import the styles in your layout (so it applies to the whole project):

<script>
    // src/routes/__layout.svelte
    import "../app.css";
</script>

<slot></slot>

Test and enjoy

That's it! You can now start your project with

npm run dev -- --open

and check if everything is working!

I hope this article helped you and you enjoy the full power of Tailwind CSS version 3 :)

If you didn't already, check out this awesome video from Simon Vrachliotis (TailwindLabs) to see all the new features in action:

Thank you so much for reading and don't forget to follow so you don't miss new articles 🤗🚀

But have you every thought of building your own command for the command line?

What is a CLI

CLI stands for "Command line interface". As the name suggests, it's a way to interact with your software using the command line. Most likely, you'll have one main command, something like git, node, npm, and then different subcommands like commit or push for different actions. Commands may also have arguments to customize the behavior of the command.

How to build your own CLI

This won't be a complex tutorial - I'll show how to use the package comander to create custom commands and use arguments. The final logic of your CLI is something you need to come up with.

Initialize your project

Create a new folder and run npm init -y to initialize a new project.

To build the CLI, we'll use the NPM package commander.

npm install commander

Create the main file

Entry points for CLIs are located in bin directories. So let's create a new file inside this folder your-project/bin/index.js:

#!/usr/bin/env node
const program = require("commander")

We can also add some information to our program:

program
    .version("1.0.0")
    .description("That's my CLI and it's doing awesome stuff")
    .parse()

The first command

You see, it's not very complicated - so let's create our first command:

program.command("hello-world").action(() => {
    console.log("Hello :)")
})

// You can also add a description
program.command("hello-world").description("Just says hello").action(() => {
    console.log("Hello :)")
})

Commands with arguments

We can add arguments directly in the command function. You can add <required> or [optional] arguments:

program
    .command("hello <name>")
    .description("Say hello to someone")
    .action((name) => {
        console.log(`Hello, ${name}!`)
    })

The arguments will be passed in the same order as in the command function to the action callback.

The full example

#!/usr/bin/env node
const program = require("commander")

program
    .version("1.0.0")
    .description("That's my CLI and it's doing awesome stuff")
    .parse()

program
    .command("hello-world")
    .description("Just says hello")
    .action(() => {
        console.log("Hello :)")
    })

program
    .command("hello <name>")
    .description("Say hello to someone")
    .action((name) => {
        console.log(`Hello, ${name}!`)
    })

program.parse(process.argv)

Test the CLI

Before we can test the CLI, we have to add one last line at the end of the file:

program.parse(process.argv)

This sends the arguments passed from the command line to the commander package that manages our commands.

Now we can test the CLI with the following command:

node ./bin/index.js -V
# 1.0.0

node ./bin/index.js hello-world
# Hello :)

node ./bin/index.js hello Linus
# Hello, Linus!

node ./bin/index.js hello "Linus Benkner"
# Hello, Linus Benkner!

Finish the CLI

When you're done building your CLI, let's make it ready to share it with others. Now think of a name for your command and add this to your package.json. For this example, I'll use custom-cli-example:

{
  "name": "custom-cli-with-nodejs",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "custom-cli-example": "./bin/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "commander": "^8.3.0"
  }
}

For the final testing, let's install it on our own computer:

npm install -g

You can now run custom-cli-example with all your commands and options.

That was pretty simple, wasn't it? 😎

Thank you for reading and have a nice day! 🤗👋

This does not include things like a login with Google or database stuff - it's about the basic realization of an authentication system with serverside rendering. We'll use a simple API endpoint in SvelteKit to allow or deny access based on a simple if-statement.

Setup a new SvelteKit project

Use the npx command to get started with a new project:

npm init svelte@next sveltekit-auth
# In this example I selected sceleton project and said NO to TypeScript, YES to ESLint and YES to Prettier
cd sveltekit-auth
npm install

# Open the website in the browser:
npm run dev -- --open

Because we're going to store the authentication details (e.g. session token) in the cookies, let's also add the cookie package:

npm i cookie

The Authentication hook

Most likely you want to validate the users session on every request to the website. So instead of implementing this logic on every page, we'll create a hook that'll be executed on every page request. Inside of this hook, we can add data to the request that we can access later in our code (e.g. the pages themselves).

To create a new hook, let's create a new file:

// /src/hooks.js

import * as cookie from "cookie"

export async function getSession({ headers }) {
    const cookies = cookie.parse(headers.cookie || "")

    try {
        if(cookies.sessionid) { // Check for a sessionID
            const sessionid = cookies.sessionid // Get the sessionID
            // ! This is for this example ONLY. In production, here would be something
            // like a database query to validate the session
            if(sessionid === "session1") {
                return {
                    authenticated: true,
                    isAdmin: true,
                }
            }else if(sessionid === "session2") {
                return {
                    authenticated: true,
                    isAdmin: false,
                }
            }
        }
    }catch(error) {
        console.log(error)
    }

    // By default, the user is not authenticated
    return {
        authenticated: false,
    }
}

What this code does is pretty simple - we're exporting a function that takes the request headers as an argument, because that's where the cookies are stored in. Then we parse the cookie string from the header to a javascript object and check for the cookie we need (sessionid). If this cookie is present, we check for our two test-sessions and return authenticated: true together with the isAdmin boolean. That's just for testing - you'll implement something like a databse query to validate the session.

As you see, we're returning always the authentication boolean, so we can use this later in our code to determinate if the user is logged in or not. You can here also store something like the username or email if needed.

load() method

Now we need a way to get the authentication state. In our pages, we can do that with the load function. That's the function executed on the server when we request the page. Export it in the module context:

<!-- /src/routes/index.svelte -->

<script context="module">

    export async function load({ session }) {
        return {
            props: {
                loggedIn: session.authenticated,
                admin: session?.isAdmin || false,
            }
        }
    }

</script>

<script>

    export let loggedIn, admin

</script>

<p>
    You {loggedIn ? "are" : "are not"} logged in and your rank is {admin ? "admin" : "guest"}.
</p>

This example simply passes the loggedIn and admin status to the page. But that's the point where you can add your own logic and use the authentication state for database queries or redirect the user if it's a private page. You can redirect the user like this:

return {
    status: 403,
    redirect: "/login"
}

Open the page in your browser and you should see the following text:

You are not logged in and your rank is guest.

Pull up the devtools and set the cookie sessionid to session1, now you should see this text:

You are logged in and your rank is admin.

The login and logout components

As I said before, I won't implement a real database or user system in this example. In your login component, the only thing you need to do is to save the sessionID or whatever you need to authenticate the user in the cookies (same name you used in /src/hooks.js). And after the user logged out, remove the cookie.

That's how authentication in SvelteKit generally works. I'll create a more detailed guide with a real database and login system in the future, so make sure to follow my blog or join my newsletter to get notified when the article comes out.

Thank you for reading and have a nice day 🤗🎉

How TailwindCSS works

As every technology, TailwindCSS changed over the last months and there are many ways to get things done. As of now, I'm aware of 3 ways to use TailwindCSS in your project:

PostCSS

You can use TailwindCSS as a plugin for PostCSS. What's really awesome about using this method is that you have the full power of PostCSS available. As an example, you can add autoprefixer to automatically add vendor prefixes or use a preprocessor like Sass.

Command line (CLI)

If you don't want to setup PostCSS and do all of that configuration stuff, you can use the CLI to get started quickly and without much configuration required.

CDN

Actually, this isn't really a method like the other ones, because it's not recommended for the production build. Click here for more information about the CDN build. (Same thing for the CDN JIT build coming with TailwindCSS 3.0)

Just-in-time (JIT)

Recently, TailwindLabs released a preview version of the Just-in-time compiler as the "Next generation of TailwindCSS".

Basically, the core concept is that TailwindCSS scanns your code for TailwindCSS-classes on every change and only generates the classes you need. This also introduced new possibilities and features like arbitrary values, all features available by default and much more. We'll use the JIT compiler in this article.

(The JIT compiler becomes the default compiler in TailwindCSS 3.0)

Prepare the project

Now it's time to get our hands on and start our code editor. Open a new folder and create a index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="build.css">
</head>
<body>

</body>
</html>

Note the linked CSS file build.css. We'll use this filename later in the guide as output filename for PostCSS / TailwindCSS.

We also need a CSS file as entry point. In this example I'll name this file style.css. In this file, we import the TailwindCSS classes / layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the config file

To create the config file, we can simply run this command:

// If you want to use TailwindCSS with PostCSS (also generates the PostCSS config):
npx tailwindcss init -p

// If you want to use the CLI:
npx tailwindcss init

Because we want to use the JIT compiler, we have to do some changes here. Set the mode option in the tailwind.config.js file to jit to enable it. Because the JIT compiler looks at our code after changes, we need to tell the engine on which files to look at. This step is required for the JIT compiler to work properly.

module.exports = {
  mode: "jit",
  purge: [
    "./index.html", // <- The HTML file we created
    "./src/**/*.html", // <- You can also add a whole directory
    "./src/**/*.js", // <- And other file types
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}

In this example, we only need ./index.html inside the purge array, because that's the only file we have.

Note: With TailwindCSS 3.0, purge may be renamed to content. So maybe this change is already live when you're reading this article.

Also, we can get rid of the variants configuration stuff in the config because the JIT compiler enables all variants by default.

Use the CLI

Let's start with the simpler method - the CLI. It's basically just one command to build the project:

npx tailwindcss -i ./style.css -o ./build.css

The -i argument is the input CSS file, in our case that's the style.css file we've created earlier. The -o parameter is the output file.

This command runs TailwindCSS once. While development, you'll add the -w argument to start TailwindCSS in watch mode:

npx tailwindcss -i ./style.css -o ./build.css -w

That's all you need to get started with the CLI.

Use PostCSS

If you want to use TailwindCSS with PostCSS, first initialize npm:

npm init -y

Now, we can install all the dependencies we need:

npm install -D tailwindcss postcss postcss-cli autoprefixer

After the dependencies are installed, we can setup two scripts in our package.json, one to build the project and one for development:

{
  "name": "example-postcss",
  "version": "1.0.0",
  "description": "",
  "main": "postcss.config.js",
  "scripts": {
    "build": "postcss ./style.css -o ./build.css",
    "dev": "postcss ./style.css -o ./build.css -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.3.11",
    "postcss-cli": "^9.0.2",
    "tailwindcss": "^2.2.19"
  }
}

The postcss commands are similar to the TailwindCSS CLI, the first argument is the input file, the second (-o) is the output file and for the development command we add -w to enable the watch-mode.

We can now run PostCSS using the commands we've just created:

// Build
npm run build
// Development
npm run dev

That's it! 🎉

TailwindCSS is now installed and you can start using it. I won't teach you how to use it, because I think it's mostly self-explainatory and the official TailwindCSS docs are already very helpful.

I hope you liked this guide and you're now ready to start with TailwindCSS.

For more content on TailwindCSS, I can highly recommend their official YouTube-Channel. They create awesome screencasts about TailwindCSS and all it's features and possibilities.

I'll leave with this video recommendation, it's about how to customize TailwindCSS to your needs, add your brand colors and more:

Thank you for reading and have a nice day 🤗👋

If you're using TailwindCSS in your projects, I'm pretty sure you're familiar with the group utilities. If you're not, here is a quick overview:

Groups in TailwindCSS

When working with TailwindCSS, you use a bunch of classnames to style your HTML elements. But imagine you have a card element and want to change elements inside when hovering over the card. You can't just use the hover utility, because this only applies when you hover over the element you applied the class to.

That's where groups come into play. You add the group class to the parent element and use group-hover (or group-focus, group-active, ...) on the child elements. The group-hover variant applies, when you hover over the parent element with the group class.

How groups work and why we can't nest them

To understand why we can't nest groups in TailwindCSS, we first need an overview on how the group utility actually works. For example, the class group-hover:underline generates this CSS code:

.group:hover .group-hover\:underline {
     text-decoration: underline;
}

I guess it's pretty clear why we can't nest groups. The text-decoration property applies to our element, when it's inside any group with the hover state.

Here is an example with two nested boxes with the group utility:

<div class="p-4 group bg-yellow-200">
     <span class="group-hover:underline">Hello world</span>
     <div class="p-4 group bg-yellow-400">
          <span class="group-hover:underline">Hello world</span>
     </div>
</div>

You can test it out here on the TailwindCSS playground. But notice how both texts are underlined when hovering over a box.

How to enable nesting

There are a few packages out there claiming to solve this issue, but all of the packages I tested were outdated or incompatible with the new JIT compiler. That's why I started building my own package to solve this problem. You can install it via NPM and add it to your tailwind.config.js:

npm i tailwindcss-scoped-groups

module.exports = {
  // ...
  plugins: [
    require("tailwindcss-scoped-groups"),
  ],
  // ...
}

This plugin adds a new utility called group-scoped. You can use it just as you'd use the default group utility, but use group-scoped instead of group (e.g. group-scoped-hover:underline).

I've created an example on the TailwindCSS playground, check it our here .

That's how our example above would look like with this plugin:

<div class="p-4 group-scoped bg-yellow-200">
     <span class="group-scoped-hover:underline">Hello world</span>
     <div class="p-4 group-scoped bg-yellow-400">
          <span class="group-scoped-hover:underline">Hello world</span>
     </div>
</div>

And that's it - a simple but effective way to enable nested groups in TailwindCSS.

Thank you very much for reading this article 🤗 and have a nice day 🎉