Forem: Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿

My Start-up's tech stack.

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Sun, 18 Sep 2022 00:59:08 +0000

Hi there! We recently shared a post over at Assembly, and I thought I'd share it here too - since you may find it interesting!

What is the Assembly tech stack?
Working primarily with small development agencies and technical people, we often get asked about the technology that powers the Assembly platform - and as a part of our effort to be transparent and honest, we love to share every inch of information that we can.

Laravel
Our core application logic is handled by Laravel. We’re huge fans of the Laravel Framework and the PHP language in general. By using Laravel, we can very quickly prototype, deploy and monitor new features, which is critical to our fast-moving philosophy. Thanks to the opinionated & standardised approach taken by Laravel, we can onboard new developers much easier than we would with a homebrew solution.

Tailwind.css
Our beautiful dashboards are styled by the utility-first library Tailwind. Tailwind is our go-to styling library for a few reasons, but the primary reason is simply how fast we can design new features and integrate them into our design library. Tailwind automatically 🌳shakes too, which means we don’t have to worry (too much) about optimizing CSS file sizes.

Livewire
Laravel Livewire utilizes over-the-wire reloading of components, handling what would be complex front-end logic in PHP, and returning rendered HTML to the user. Livewire components help us confidently ship new features and massively reduce stack complexity, effectively eliminating complicated JavaScript from our development process. Since Livewire is SSR’d, we don’t need to worry about SSR’ing JS, which is always cumbersome for the purpose of SEO.

Alpine.js
We utilize Alpine to handle simple front-end interactions that don’t qualify for an entire Livewire component. Think toggling opening and closing of menu’s, keyboard shortcuts - that kind of thing. Coming in at 7.1kB gzipped, Alpine is absolutely tiny, and packs a big punch.

Github Actions
We make use of Github actions to handle our deployment process. Effectively, our pipe looks something like this: set up PHP, install Composer, NPM, and all dependencies. Run tests, deploy code, dump caches, and reboot listeners.

Digital Ocean Database Clusters
We use MySQL-managed databases provided by DigitalOcean. We opted for DO-managed clusters to give us, and our customers peace of mind in the knowledge that all of our data is backed up, scalable, and highly available, reducing DB-based downtime to a minimum. When DO notices degraded performance or node failure, their infrastructure automatically spins up replacement nodes, keeping our platform online when it’s most important.

Sentry
We use Sentry to monitor application-level errors. When an unhandled error occurs, we are instantly notified, and provided with detailed stack traces and debugging information, to help us immediately pinpoint the error and provide resolution.

Pingdom
Using Pingdom to monitor application uptime allows us to provide public uptime status pages, which let you know when we’re having a bad day. Our team is notified when Pingdom sees something go wrong, giving us confidence that our application is online, and when it isn’t, we’ll know.

Sendgrid
Sendgrid is a fantastic tool that allows to easily send emails with high reliability, with reasonable pricing and easy integration, it’s a no-brainer for us to use their service to make sure emails arrive on time, every time.

Stripe
You guessed it, we use Stripe to handle payment and subscriptions. Why? Well, why wouldn’t you? We’re huge fans of their docs, pricing and features.

Google API’s
As you know, we provide Google Calendar integrations, for which… we use… the Google API. The Cloud Console is awesome, and pricing is pretty fair.

Open Source packages
We’d like to add a note that we’re huge fans of Open Source Software, and we extensively use OSS packages from awesome people like Spatie, jamesmills, and Guzzle.

Fathom Analytics
We care for privacy. Instead of using free services like Google Analytics, where your data, and our data is the payment, we opted to use the fantastic privacy-first Fathom Analytics, who provide fast, private and anonymous analytics.

Our thoughts
As you can hopefully tell, our stack is focused on allowing us to quickly, securely, and confidently prototype, build - and - ship new features. We like to use modern tools, and we aren’t scared of moving the stack around, previously, we did use Inertia, but we changed to Livewire - and we’re loving it.

Create a PHP composer package | How to

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Thu, 29 Jul 2021 19:29:51 +0000

Composer packages are a great way of making your code available to everyone.

It my be a daunting thought to create your first package, but if you break it down into simple steps, it becomes much less scary! Let's see:

Create your composer file
Register your namespaces and autoloaders
Write your code 🥳
Push your code to your repository
Create a tag or a version
Submit your package to Packagist (the repo of composer packages)
Done!

Your composer file

Naturally, to do this, you should have composer installed.
To check if you have composer, go ahead and run the below in your command line:

composer

If you have Composer installed, you'll see:

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.0.4 2020-10-30 22:39:11
...

If you do not, you'll need to install Composer.

Now that we've got composer, we can create our Composer file.
To get the ball rolling, just run:

composer init

This will begin the interactive Composer file creation.

First you'll see:

Package name (<vendor>/<name>) [pc/composer]:

This will be the name of your package Few things to note:

Vendor is the author of the package
Name is the... name of the package.

Enter your name, for example I will say joem/tutorial.

Next you'll be asked for the description of your package.

After that, you'll be asked for the author.

You'll then be asked for the min-stability, you can skip this one, as well as Package Type and License.

You'll see:

Would you like to define your dependencies (require) interactively [yes]?

Go ahead and enter n.

Would you like to define your dev dependencies (require-dev) interactively [yes]?

Again, a cheeky n.

Do you confirm generation [yes]?

yes!

Fantastic, we've created our Composer file.

Project structure and namespaces

Typically, you'll see this structure (or similar):

project-name (root)
├── composer.json
├── composer-lock.json
├── src
│   ├── ClassName.php
│   ├── helpers.php
├── tests
│   ├── ClassNameTest.php

Note: ClassName.php is the name of your class!

With this in mind, we can create our autoloaders to load our files. Inside of composer.json, add:

"autoload": {
        "psr-4": {
            "Joem\\App\\": "src"
        },
        "files": [
            "src/helpers.php"
        ]
    }

inside of your object below require. Where Joem is the name of your project. Here we are autoloading all classes inside of src, with the namespace of Joem\App, and loading our helper file.

Now, let's create our class inside of src.
Here is the example class I am using:

<?php
namespace Joem\App;

class ClassName {

}

Notice the namespace Joem\App;, this means it will be autoloaded into our vendor.

To generate the autoloader, go head and fire:

composer dump-autoload

into your console.

This will generate an autoloader containing our class and helper file.

We can now include our autoloader into our files.

If we make a index.php and add:

<?php

require_once 'vendor/autoload.php';

$class = new \Joem\App\ClassName();

We'll see our autoloader is working!

Fantastic 🥳 From here, you can add all the code you would like!

Git repo

Once your class(es) are ready, we need to attach the code to a git repo, in this case, a Github repo.

Once you have created you repository and added it to your codebase, you'll need a .gitignore in your project root, containing vendor/. This will prevent your repository from being filled with Composer dependency gunk.

Your repo is important, since Packagist will use it to fetch your code.

You'll need to create a release for your main branch, you can version it as v1.0.0, this will prevent min-stability errors when we try to install it later!

Submitting the package

We will use Packagist to submit our package to the Composer repository.

Head to packagist and create your account.

Once your account is created, click the "submit" button. You will be prompted to enter the URL of your Github repository. Once submitted, your package will be available as a Composer package!

✨ A M A Z I N G ✨

Now, you can install your package through composer with the command

composer require joem/tutorial

Where joem/tutorial is the name of your package, which we inputted when we created the composer file.

A note on testing

In our structure, you'll see we added a tests directory, it is encouraged that your package contains tests, these can be created with a tool such as PHPUnit.

Tailwind + IntersectionObserver API = <3

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Sat, 08 May 2021 16:03:54 +0000

The intersection observer is an incredibly powerful API, and really great for managing scrolling animations. When combined with Tailwind, it gets even better.

In my use case, I have multiple elements which need to fade in once they are in the viewport, but their transition time should vary to give a sense of speed and progression.

To achieve the varying animation speeds, you could do a few things:

Use inline styling
Write a class for each element
use the attr() method in CSS

My project is using Tailwind and Vue, so I opted for a tailwind class-based solution.

Let's have a look at my observe:



observeHandler(ob) {
      ob.forEach((el) => {
        el.target.style.opacity = ob[0].intersectionRatio;
      });
    },

Pretty simple stuff. We are using the intersection ratio to calculate the opacity of the element, to fade in on scroll.

I've got a lot of elements to observe, here's my solution in attaching the observe:



let options = {
  root: document,
  rootMargin: '0px',
  threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}

let observer = new IntersectionObserver(this.observeHandler, options);

let els = document.querySelectorAll('[data-observe]');

els.forEach((el) => {
  observer.observe(el);
});

Amazing, nice and simple. We seek elements with the data-observe attribute:



<div class="text-5xl mb-5" data-observe>Websites are more than code.</div>

Now, back to our delays and transition speed. I am using Tailwind classes to manipulate those properties, here is a great example:



<div class="flex items-center delay-75" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">I capture the imagination,</div>
</div>
<div class="flex items-center delay-300 duration-300" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">hand-craft experiences</div>
</div>
<div class="flex items-center delay-500 duration-500" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">and build solutions.</div>
</div>

This means I can add any number of observers, and use tailwind to control speed, which is amazing.

To see the final result:

https://imgur.com/pdvkqjH

An accessible SVG hamburger toggle

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Fri, 07 May 2021 19:08:15 +0000

We've all been there - searching for the codepen of a navigation hamburger menu, but they never touch the spot - too much code, not accessible, messy... spending precious minutes or even hours looking for the right fit.

Pain, a huge pain.

Finally, I've had enough! I've created an accessible SVG based navigation hamburger toggle with a fancy animation that can be dropped into your navbar with (relative) ease.

I've always thought using three spans for each bar felt wrong, but I've never had the time to do anything about it... until now.

The link to the codepen is below - feel free to fork, change, and suggest improvements!

https://codepen.io/Joe45x/pen/WNpbzMR

Note: I'm no A11Y buff, so if the A11Y can be improved, please do share your knowledge!

IS PHP Dead?

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Mon, 15 Feb 2021 14:56:56 +0000

You hear it all the time - "PHP is dead", "PHP is spaghetti code", so on and so on, but is that really the case?

I'm a PHP developer, who's dabbled in some backend JS too, and I try to be impartial as possible.

No. The short answer is no. PHP is alive and kicking. Does that mean you should flock to it for all projects? Again, no. Should you instantly dismiss the language? No.

No no no.

In late 2020, PHP 8 was publicly birthed into the world, packed full of enhancements, features, improvements, and life. I get it, I truly do - older PHP was... or could be... unfortunate... we'll say. Having inherited 8-year-old codebases originally build on PHP 5.x, I know just how messy PHP can and does get - heck, even modern PHP can be written badly, but isn't that the case for near all languages?

Near every language, sure, more commonly interpreted languages have room for messy code, but that doesn't mean the language itself is bad. Modern PHP can be elegant, scalable and efficient, and that's without much effort.

Let's think - PHP is very much in active development. There's many, many CMS' based on PHP, and many great frameworks, too. One of the world's most popular frameworks - Laravel, is based on PHP. The world's most popular CMS - WordPress, is based on PHP. The PHP community is growing, and so is the quality of code.

This doesn't mean you should swear by the language for every use-case. Sockets? Sure, PHP can do it, but should you? Are there better tools out there? Definitely.

I think the problem with PHP is the low-entry barrier. PHP is great at making code just "work", which means you can, and do see a lot of poor code. That isn't always a bad thing, though. Everyone starts somewhere, right? And with the gigantic community, it's so so easy to learn and grow, which is incredible.

This post is just me spewing my views. I think it's important to remain logical and to use the best languages and tools for the solution to problems. That language might be PHP, and if it is, you can write some incredible code with it - if it isn't? Great, you can do just that with any other language too.

I'm very keen to hear thoughts on this topic - please do share yours :)

Write good PHP - Lookup-arrays

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Sun, 14 Feb 2021 18:23:57 +0000

You have a list of potential values to return, dependent on a value to evaluate. A super common operation, right? You'll instantly think, chuck in an if statement, or even a switch, and call it a day - let's see an example. We want to return the relatives name based on the relation (Does anyone else forget names easily??):

$relative = $_GET['relative'];

if($relative == 'mother') {
    return 'Harriet';
}

if($relative == 'father') {
    return 'Robert';
}

if($relative == 'daughter') {
    return 'Rachel';
}

if($relative == 'grandmother') {
    return 'Audrey';
}

// imagine 10 more!

This is a perfectly adequate solution: but you'd probably want to use a switch, to simplify it even further:

$relative = $_GET['relative'];

switch ($relative) {
    case 'mother':
        return 'Harriet';
        break;
    case 'father':
        return 'Robert';
        break;
    case 'daughter':
        return 'Rachel';
        break;
    case 'grandmother':
        return 'Audrey';
        break;
    default:
        return 'relative not found!';
}

Great, this feels much more structured, but it's quite heavy on syntax, right? Perfectly serviceable, but let's take it one step further.

Enter lookup-arrays. A lookup array is a key-value paired list, where the key is what is looked up!

The above, in the form of a lookup-array is:

$relative = $_GET['relative'];

$relatives = [
    'mother' => 'Harriet',
    'father' => 'Robert',
    'daughter' => 'Rachel',
    'grandmother' => 'Audrey',
];

return $relatives[$relative] ?? 'relative not found!';

You can see how much easier to read a lookup-array is, and how it dramatically reduces the quantity of code, in a concise way! To note, lookup-arrays aren't always the best choice, but when they are, it should feel pretty natural!

Thanks for reading - let me know your thoughts!

Write good PHP - string management

Joe 🏴󠁧󠁢󠁷󠁬󠁳󠁿 — Sat, 13 Feb 2021 23:09:29 +0000

Working with strings is common in any language, but it's very easy to make it harder than it needs to be!

In PHP, it's very easy to work with strings, but it can be easier.

Let's dissect the below example of a common, but poor usage of strings in PHP:

$firstname = 'John';
$lastname = 'Doe';
$name = 'The user ' . $firstname . ' ' . $lastname . ' joined in ' . date('d/m/y') . '. Their birthday is ' . 32 - date('Y');

This will output exactly what you expect, but wooow, that's ugly, isn't it? Inline calculations, multiple sets of concatenation, and it's longer than it needs to be.

Let's see a refactor and explain it:

$first_name = 'John';
$last_name = 'Doe';
$full_name = "{$first_name} {$last_name}";
$join_date = date('d/m/y'); 
$birthday = 32 - date('Y'); 
$name = "The user {$full_name} joined in {$join_date}. Their birthday is {$birthday}";

We see more code, but it is much more readable, right?

What have we done here?

We've broken the dynamic values down to assigned variables outside of the string.
We've used interpolation to avoid concatenation. Interpolation means we can avoid the dot concat syntax, and awkward strings and spaces - making the string much much easier to manage.
Reduced the length of the string as a result of interpolation

Thanks to the above points, our refactor is much easier to read, and a lot easier to understand and edit.

We have introduced more code, but generally, readability should come before length. For beginners, it can be easy to fall into the trap of wanting to write really complicated code, in as few lines as possible - while cool, and very fun, it can easily get out of hand!

This has been a simple example of string management in PHP, I hope you enjoyed!

In the next part of this series, I'll cover writing logical structures with the happy path.