DEV Community: neoan

The humor of JavaScript

neoan — Sat, 09 Dec 2023 21:21:29 +0000

As the year marks its end and we are therefore exposed to the yearly "What to use in 2024" click-bait articles, let's instead amuse us with some oddities of JavaScript.

Numbers

You can't divide by zero. But why not? If I divide 1 by smaller and smaller fractions, I'll be getting higher and higher numbers nearing infinity. So eventually we'd end up at infinity? Not so fast. If we "came from the other side" towards zero, we'd approach negative infinity when getting to zero:

const a = 1/0.0001; // 1,000
const b = 1/0.000001; // 100,0000

const c = 1/-0.000001; // -100,0000
const d = 1/-0.0000001; // -1,000,0000

So what does JavaScript do when dividing by zero? "NaN" maybe? Nope, it goes for infinity.

console.log(1/0) // Infinity

Interesting. That means that the type of 1/0 must be infinity? Nope, it's NaN (Not a number).

console.log(typeof 1/0) // NaN

Okay, so infinity doesn't seem to be a type, then? Let's test:

console.log(typeof Infinity) // number

Wait a second, you think? If infinity is a number and 1/0 is infinity, why is the type of 1/0 not a number (NaN)? Well, let's explore:

console.log(typeof NaN) // number
console.log(NaN === NaN) // false

Confused, yet?

Objects

What's so nice about having no type safety is that we can be quick & dirty. So dirty indeed, that nearly every company will insist on Typescript to avoid almost impossible to find bugs. Let's examine the following code.

let myObject = null;

function getFromBackend(){
  fetch('/api/object').then(j => j.json()).then(result => {
    // result: {a: "b"}
    myObject = result;
  })
}

// SpongeBob narrator: ..several hours later

// Is our variable myObject filled?
function checkIfValid(){
  if(typeof myObject === 'object'){
   // do something
  }
}

Seems logical to a beginner, but here's the culprit

console.log(typeof null) // object
console.log(typeof null === typeof {}) // true

But then again, we all know objects aren't object anyway, right?

console.log({} === {}) // false

OMG, what a language

Using the type-safe comparison (===) is therefore a must, as otherwise the nightmare would be so much worse:

const array = []
console.log(array == false) // true
console.log(array === false) // false

There are even books about JavaScript oddities, as this list could go on for a while. But I guess we'd rather go on reddit to bash on PHP so Santa doesn't put us on the naughty list ;-)

My favorite sveltekit setup

neoan — Fri, 08 Sep 2023 16:55:14 +0000

What I immediately liked about the UI kit flowbite was its dark-mode integration. Meanwhile, it has grown into one of the most popular tailwind component libraries and has graced the svelte community with a solid component library.

However, setup, customization and adding common structure & utilities is a waste of time if your goal is to jump right into development.

After using our boilerplate within the company, it is now open sourced and ready for your consideration:

Repo	Hosted
github	gh page

My one minute setup

After running the npx command, I quickly adjust colors in src/lib/colors.js. Then I share the complete project on Github. In order to enable easy client reviews, I go to the settings of the repository and enable Github pages based on Github actions (the package is equipped with a deployment script triggered at pushes/pulls to "main", there's nothing additional you need to do).
Next, I adjust the file static/manifest.json to my needs.
That's it: I am ready to develop.

SvelteKit as PWA on GitHub pages or your own server

neoan — Wed, 23 Aug 2023 19:54:10 +0000

What you can expect

I needed something to jump-start development and couldn't find the right kind of starter package to actually save time, so here is a sveltekit boilerplate fulfilling the following needs:

Tailwind installed & set up
Flowbite Svelte because it's awesome
Color generator for CI adaptations
GitHub action to deploy to GitHub pages during review cycles
Zero configuration PWA support

summary
Installation via npx
Installation via GitHub template
About colors
Deploying on GitHub pages
PWA pitfalls

Installation via npx

It doesn't get any faster than that. Be up & running in approx. 30 seconds when installing via npx (the command is available if you have npm installed)

npx svelte-flowbite-boilerplate@latest <project-name>

The command checks whether you have yarn installed, and falls back to npm if not. Either way, just follow the instructions given to you after installation and you are ready to develop.

Pros

This is by far the fastest way to start developing.

Cons

This will not create a GIT repository.

Installation via GitHub template

Use the "use template" button at the repo to create your own copy of the repository and check your project out from there.

Pros

You can directly work in GitHub's VSCode environment on the fly.

Cons

The process takes slightly longer.

About colors

As mentioned, the package comes with a color palette generator. In order to use it, open "src/lib/colors.js" and change/add colors as you please.
Note that some named colors of flowbite-svelte can be overwritten like that as well (e.g. primary, red, etc.).

When serving the project, you can navigate to /docs to see your colors rendered.

Deploying on GitHub pages

Whether you want to make use of free hosting, or to show your team/clients your work in progress: you can choose to deploy your project on GitHub pages by simply going to your repo's settings and activating the pages using GitHub actions. The script is already set up and ready to be used.

An example of that can be seen at the repository itself:
gh-page of svelte-flowbite-boilerplate

PWA pitfalls

The PWA runs out of the box, but some things aren't automated yet. To adjust everything to your needs, (re-)visit the manifest.json and the icons in the folder "/static"

note!
You might encounter issues if you are reusing this repo as the webworker get's confused when running another app on the same localhost port. Clear your browser's site data if that occurs.

That's it to get you started

If you need details as you aren't familiar with one of the tools used, please use the links provided in the docs. You will find that the people at flowbite-svelte did a great job of making your process as easy as it gets.
Lastly, if you like this boilerplate, please be so kind and star the repository.

sroehrl / svelte-flowbite-boilerplate

General svelte-flowbite starter kit

REtech svelte kit app starter / boilerplate

Quick start for a svelte PWA powered by flowbite

Preview

@ github pages

includes

typescript
flowbite
tailwind
flowbite icons
color palette generator
dayjs
external API for REST backend (we recommend https://lenkrad.neoan3.rocks)

Creating a project using `npx`

npx svelte-flowbite-boilerplate@latest <project-name>
check deployment base in svelte.config.js

Creating a project using github's repository template

Use the template button at https://github.com/sroehrl/svelte-flowbite-boilerplate to start a new project

create .env (or .env.development, .env.deployment)
setup src/lib/colors.js
change base in svelte.config.js
run yarn
run yarn dev

Ready for GitHub pages

This package contains GitHub actions to automatically deploy your app on GitHub pages. To activate, simply go to "Settings > Pages" and use "GitHub Actions" as your source.

View on GitHub

i18n: A lot to think about

neoan — Sun, 21 Aug 2022 23:17:00 +0000

When we think of internationalization, we usually think of translating content in various languages. But it is so much more than that. Let's look at the following topics and how to solve all of them with one library.

Number formatting

How hard can it be? Well, decimal notations alone are a point of contention. Sometimes even within a country (looking at you, Canada)

light blue: dot, green: comma, teal: both, red: Arabic decimal symbol (U+2396)
Especially the Arabic notation is tricky as it looks like an apostrophe but isn't. This means that screen readers might misinterpret numbers. But even the most common differences can be confusing: in a scientific paper, translations of something like

... ergab eine Fehlerquote von 13,935%.
[German]

and

... showed an error rate of 13,935%.
[English]

would be a horrible mistranslation just based on the decimal point alone.

If we add currency to the mix, things become even weirder:

$9.99 or 9,99 $?

You see where I am going with this; in order to be truly localized, we have to rely on trustworthy resources to even have a chance to get it right. Thankfully, PHP has an extension for that called Intl. But before you jump onto php.net to find out that you opened Pandora's box, worry not: there is an easier approach.
But first, let's look at another common issue:

Date, Time & localization

I am probably not the only one with the luxury of having meetings with people from various time zones. And applications have gotten good at it. Zoom & Co invite me for the correct localized time so I don't have to think about the pain of Europe not switching between daylight saving time on the same day or India having time zones that my brain refuses to calculate because they the difference can't even be expressed in full hours. As a developer, I need both, though. I need to format the date or time correctly for the user AND decide whether or not I want the context to be relative to the user or not.

An example:

My body still wasn't used to the sun at 1 am, so I had difficulties sleeping at the small hotel in Reykjavík I naively booked with a view of the northern lights in mind.

So sure, you want the international reader to "experience" 1 am in the suitable format, but not "translate" the time to the time zone our reader resides. On the other hand, if you take this example:

The event will take place virtually on Wednesday, August 20th at 11 pm PDT.

You most certainly will want to make sure that this information is accurately transcribed into whatever that actually means for the reader. As you can see, full control over the behavior is necessary.

Good ol' text translation

So, we talked about everything but actual translations. Besides the fact that as someone being fluent in more than one language, I don't believe in the word "translation" to begin with (It implies that meaning could be 100% transferable between languages). On a linguistic meta level, this can be shown on the following things:

German	English
0 Autos, 1 Auto, 2 Autos	0 cars, 1 car, 2 cars
0 Bakterien, 1 Bakterium, 2 Bakterien	0 bacteria, 1 bacterium, 2 bacteria
0 Informationen, 1 Information, 2 Informationen	information, information, information

Let's look at row 1:

So in English, it seems to be the case that a singular is only used when we are talking about exactly ONE (And zero plural?!). And if we compare it to German, then this seems to be a thing for other languages as well. So in pseudo code, our logic would somehow have to account for that.

In row 2,

we are reminded of the fact that irregular plurals are a thing in many language, but you really start to get an insight into the nightmare in

row 3,

where we have to face the reality that things might be countable in some languages, but not in others. And don't forget, these languages are rather similar in comparison. Let's be a little mean:

Japanese	English
一枚	one (e.g. when counting paper)
一本	one (e.g. when counting pencils)
一頭	one (e.g. when counting elephants)
一杯	one (e.g. when counting cups)
...	...

Practicality

Lastly, we have to ask us how much time we have in order to offer as a solution to these problems, so many companies make use of AI-based translations that are either rather unreliable (like google translate) or extremely expensive. To mitigate this issue, and since PHP's Intl offers the toolset to address these issues, I wrote an i18n script that let's you write server-side rendered HTML with extended markup (template engine).

sroehrl / php-i18n-translate

Simple yet powerful i18n support for PHP

PHP i18n translate

Straight forward. Convenient. Fast.

Installation

composer require sroehrl/php-i18n-translate

require_once 'vendor/autoload.php';

$i18n = new I18nTranslate\Translate();

$i18n->setTranslations('de', [
    'hello' => 'hallo',
    'goose' => ['Gans', 'Gänse']
]);

Quick start:

1. In Code

echo "a: " . $i18n->t('hello') . "<br>"; 
echo "b: " . $i18n->t('goose') . "<br>";
echo "c: " . $i18n->t('goose.plural') . "<br>";

// detect plural by numeric value
foreach([0,1,2] as $number){
    echo $number . " " . $i18n->t('goose', $number) . ", ";
}

Outputs:

a: hallo <br>
b: Gans <br>
c: Gänse <br

…

View on GitHub

It addresses our issues like such:

// little pseudo code, but you get it:
$productModelData = SomeORM->getProduct($_GET['productId']);

$t = new I18nTranslate\Translate($userLocale, $userTimezone);

$t = setTranslationsAndSomeSettings($t);

// I already apologize for the formatting
echo $t->translate(
   Neoan3\Apps\Template\Template::embraceFromFile(
      '/theHTMLbelowThisCode.html', 
      ['product' => $productModelData]
   ) 
);

<!-- A simple static translation using a t-tag -->
<h1><t>Welcome to our page!</t><h1>
<!-- B simple static translation using a template function -->
<h2>{{t('Welcome to our page')}}</h2>
<article>
   <!-- C There's a lot going on here, we'll break it down later  -->
   <p><t>Check out [%product-name%](%{{product.title}}%)<t/></p> 
   <!-- D show USD price, but show in user's format -->
   <div class="price" i18n-currency="USD">
     {{product.price}}
   </div>
   <div class="special offer">
     <p>
        <t>Convincing text to make you buy in the next:</t>
        <!-- E Yes, this works -->
        <span i18n-time="m">+2 min</span> <br>
        <!-- F Prints something like: Wednesday, 12.10.2022 10:30 Eastern Daylight Time -->
        <span i18n-date-local="EEEE, dd.MM.Y HH:mm zzzz">
           {{product.realease}}
        </span>
   </div>
   <div class="very-special-offer">
      <p>
        <!-- G for  "gettin' very dynamic here" -->
        <t>Buy [%number%](% {{product.offerCount}} %) for only {{i18n-currency(product.discountedPrice * product.offerCount, 'USD')}} today!</t>
      </p>
   </div>
</article>

So I guess a little explanation wouldn't hurt?

As you noticed, I started each comment with a letter for our reference:

A - T-tag

In most cases, this will be enough. This tag runs after all other substitutions unless you additionally give the tag itself i18n-attributes. The outcome is a substitution of its content with the corresponding translation:

//...

$translations['de'] = [
   'Welcome to our page!' => 'Willkommen auf unserer Seite!',
   //...
];

//...

B - The T-function

The template engine uses curly brackets by default to evaluate content (You see this whenever we use data from "product").
Sometimes you want translations to be run earlier in the process to control interactivity between the data-context and the translation context. This is especially useful if you have custom functions and/or attributes for the templating. As this would reach beyond the scope of this article, I will have to leave examples to your imagination.

C - Placeholders

Sometimes (or quite often, depending on your project), you need to insert dynamic content into your translations. We best explore this by looking into the cycle of what happens under the hood:

//...

$translations['de'] = [
   //...
   'Check out [%product-name%]' => 'Erfahre mehr über [%product-name%]',
   //...
];

//...

In our translations, we indicate dynamic values WITHIN the t-tag in order to account for placement differences or grammatical adjustments within languages. In our HTML-template, we then bind these placeholders to a value. As values could come from various sources, but we want to use the context of our product, we use curly brackets to indicate that we want to resolve the variable prior to substitution:

<t>Check out [%product-name%](% {{ product.title }} %)<t/>

1. Find and interpret context-data:

<t>Check out [%product-name%](%Scrapbook  #2%)<t/>

2. Find and interpret functions
(not happening in this example)

3. Sanitize string & search for translation

// pseudo code to illustrate the principle
$memorize = "Scrapbook #2"

$lookFor = "Check out [%product-name%]";

$foundTranslation = 'Erfahre mehr über [%product-name%]';

4. Replace placeholder with value

// pseudo code to illustrate the principle
$final = str_replace('[%product-name%]', $memorize, $foundTranslation);

D - Attributes

We have several attributes at our disposal. Attributes are an easy way to hook static or dynamic values into i18n. In this case, we simply format the price to the user's expectations.

Pro-tip: i18n-translate uses the template engine's addCustomAttribute-method to achieve this. This means you can create your own attributes according to the needs of your shop/cummunity etc.

E - Another attribute

Some attributes need a value, others don't. In the case of i18n-time both the format (here minutes without leading zero) and the value are optional. If the value isn't a timestamp, the attribute uses PHP's strtotime, making this example (two minutes from now) possible.

Shows the current server time (but only minutes):

<!-- without content -->
<span i18n-time="m"></span>

Shows the current server time in the time-foramt suited for the user:

<!-- without content or format -->
<span i18n-time></span>

F - Make it local

As mentioned, we sometimes want to translate a time to the time zone of the user. That's why i18n-time-local and i18n-date-local output the given value in the user's time zone & -format.

G - Functions to prerender placeholders

All provided attributes are also available as functions. With the exception of the t-function, they translate themselves into placeholders:

i18n-currency -> [%currency-value%]
i18n-time, i18n-time-local -> [%time-value%]
i18n-date, i18n-date-local -> [%date-value%]
i18n-number -> [%number-value%]

This means, that our example would have the following translation

//...

$translations['de'] = [
   //...
   'Buy [%number%] for only [%currency-value%] today!' => 'Für nur [%currency-value%] erhälts du [%number%] Stück!',
   //...
];

//...

Accessibility

Lastly, let's talk about screen-readers & co.
Using a server-side rendered solution is already a good start, but what else is there to consider?

The semantic side

In one of our examples we discussed using the t-funciton rather than the t-tag. This can also be useful if you don't want a semantic element to have a child (the t-tag). In other cases, you might want to leverage the existence of a tag to supply aria-declarations to your content. Since it is a tag, you can supply all regular attributes as you wish:

<t class="when-visually-impared:text-xxl" aria-role="note" data-id="x">Translate me!</t>

Extendability

We can extend the comfort using the functionality bundled with this package.
Let's say we have a JavaScript text-to-speech program we want to work with called "js-read-me" which reads from attributes:

Neoan3\Apps\Template\Constants::addCustomAttribute('js-read-me', function($domAttr, $contextData) use ($t){
    $domAttr->nodeValue = $t->t($domAttr->nodeValue);
});

<button js-read-me="Listen to my rant by clicking this button">😤</button>

We now ensured that the content of "js-read-me" uses our translation!

Final thoughts

There is so much more we can achieve, but I mustn't overextend the time you spent on this already. I hope this serves as an inspiration and helps explain this complex yet important topic.

Thank you for making it this far & until next time!

Code Along: Taking Lenkrad for a Spin

neoan — Wed, 17 Aug 2022 22:33:00 +0000

In this unedited video I built a personal blog to introduce the functionality of the neoan PHP lenkrad core. If you have some time and are interested, please feel invited to leave feedback!

High speed-dev: A minute to be up & running

neoan — Wed, 17 Aug 2022 03:05:33 +0000

No, it doesn't run on PHP 7.2!

The neoan-core Lenkrad doesn't play the compatibility game. Being backward compatible to older PHP versions or playing nicely with a plethora of ecosystems is a challenge that not only slows down development, but results in verbose usage and unoptimized core code.

I wanted to have a framework for the next generation. I wanted to finally have a framework that let's me write business logic the way I want it to behave.

Let's compare:

In Laravel, I need a migration and a model to make the Eloquent ORM work:

the migration


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{

    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('password');
            $table->string('email')->unique();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::drop('users');
    }
};

And the model

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{

    protected $table = 'users';
}

We might be used to this, but what we really want to write is:


class User extends Model
{
   #[IsPrimaryKey]
   public readonly int $id;
   public string $name;

   #[Transform(Hash::class)]
   public string $password;

   #[IsUnique]
   public string $email;

   use Timestamps;
}

The advantage is not only easier reference and less verbose code. Your IDE will be able to better help you with navigating objects through auto-completion:

$user = new User();
$user->name = 'Adam'; // name was suggested, as it's a property of the model class
...

Interested?

If you have PHP8.1 and interested in seeing how a framework could actually make your life easier, try it out:

composer create-project neoan.io/starter-project [my-app]

The package is light in dependencies and up & running in seconds. Feedback highly appreciated!

Controllable Templating in PHP

neoan — Tue, 16 Aug 2022 01:54:17 +0000

It's been a while

I have been using my own templating engine for a while now as I wasn't happy with how blade & co handle certain things. Additionally, any kind of logic within the view is a violation of separation of concerns in my view.

However, after living with a few issues for a while, I finally decided to rewrite it completely:

sroehrl / neoan3-template

neoan3 minimal template engine

neoan3-apps/template

PHP template engine

As of version 2, we dropped PHP 7.4 support You require at least PHP 8.0 or use v1.2.0 of this package.

Installation / Quick start

composer require neoan3-apps/template

use Neoan3\Apps\Template\Constants;
use Neoan3\Apps\Template\Template;

require_once 'vendor/autoload.php';

// optional, if set, path defines the relative starting point to templates
Constants::setPath(__DIR__ . '/templates');

echo Template::embrace('<h1>{{test}}</h1>',['test'=>'Hello World']);

Templating

neoan3-template is not a full blown template engine, but rather what a template engine should be: With modern JavaScript solutions creating a dynamic approach, neoan3-template focuses on the necessities of static rendering.

profile.html

<h1>{{user}}</h1>
<p>{{profile.name}}</p>
<p n-for="items as

…

View on GitHub

Happy accidents

I have had a way of adding project-specific functionality to the engine and wanted to keep it open for special needs.
By simplifying the hook-process, I noticed something interesting:

In theory, one can now use this package to create specific behavior utilizing two capabilities:

customFunctions

We are usually under full control of the data we are sending to the rendering mechanism when dealing with SSR sites, but sometimes we want to leave e.g. a model as is. So let's build a salutation template function:

Template\Constants::addCustomFunction('salutation', function($gender)
{
   $salutation = 'Mrs.';
   if($gender === 1){
      $salutation = 'Mr.';
   } elseif($gender > 1){
      $salutation = 'Mx.';
   }
});

In our template, we can now use this function:

<!-- profile.html -->
<div>
   <p>Hello, {{salutation(user.gender)}} {{user.lastName}}</p>
</div>

$user = [
   'gender' => 0,
   'firstName' => 'Samantha',
   'lastName' => 'Smith',
   'birthDay' => '1990-06-06',
   'website' => 'https://sam-smith-1990.com'
];
echo Template\Template::embraceFromFile('/profile.html', ['user' =>$user]);

output

<div>
   <p>Hello, Mrs. Smith</p>
</div>

This is, of course, a very constructed example, but you get the idea. Another way of implementing additional functionality is via the method

customAttributes

With this we can hook into attribute-interpretation of the template engine. Let's have a look:

Template\Constants::addCustomAttribute('secure-link', function($attr)
{
   $href = $attr->parentNode->getAttribute('href')->nodeValue;
   // external?
   if(
      !str_contains($href, $_SERVER['HTTP_HOST'] && 
      str_starts_with($href, 'http'))
     )
   {
      $attr->parentNode->setAttribute('target', '_blank');
      $attr->parentNode->setAttribute('rel', 'noopener noreferrer');
   }
});

<!-- profile.html -->
<div>
   <p>Hello, {{salutation(user.gender)}} {{user.lastName}}</p>
   <a href="{{user.website}}" secure-link>{{user.website}}</a>
</div>

output

<div>
   <p>Hello, Mrs. Smith</p>
   <a href="https://sam-smith-1990.com" target="_blank" rel="noopener noreferrer">https://sam-smith-1990.com</a>
</div>

I know these examples are rather strange, but due to the reusability one could easily build together a templating mechanism suited to personal needs.
As usual, leaving a star when playing around with the repo is appreciated.

Discussion

Now to the fun part: What has always bothered you when having to deal with passing data to your templating mechanism? What do you wish was less of a hassle?

What is dev.to for?

neoan — Tue, 23 Nov 2021 03:01:48 +0000

Lately there has been an influx of certain kinds of posts on dev.to that we should probably talk about:

Uneducated opinion pieces

Before I describe what kind of articles I am referring to, let's first clarify what dev.to enabled and what - in my opinion - should not be jeopardized: The absence of gate-keeping, which destroyed the vibe of many other platforms, communities, etc.

However, this inclusiveness has particular dangers that have met a threshold recently. What I am referring to are posts that seem to be driven by a "learn by explaining it" approach and that are often simply too dangerous to leave uncommented. Way too often a mode of speech is used that would lead the beginner to believe that an expert is sharing advice while completely wrong or misleading statements are picked up and quoted. This has become so bad that I find people citing these sources and therefore unwillingly propagate misinformation similar to the false-news phenomenon in the political realm. Additionally, these articles tend to state opinion as fact. In my opinion, it is relatively easy to avoid mixing opinion with facts through language in our field as we only apply established technology.

So what's the call to action?

The question is what this community should do to avoid becoming a heap of nonsense or half-truths rather than a source of actual knowledge, given the understandable fact that many learners aren't able to distinguish between transfer of knowledge and confident nonsense.

Are you expecting the same, or is this observation based on my personal feed? Thoughts?

Tech-blogging the easy way

neoan — Sat, 13 Nov 2021 16:19:53 +0000

Lately I have seen a lot of posts here about how to set up your own blog. It's not a surprise that a regular Wordpress-installation doesn't really scream developer. On my personal blog neoan.us/blog, I use blua.blue and if you are a follower you will notice that many of my dev.to contributions originate from there as well (whenever I want to publish to multiple sites/services). However, knowing that the PHP-crowd here is miniscule I decided to provide you with 2 repositories you can start with that do not require the use of the blua.blue-API (because they are webhook-based) and allow you to simply design your blog using the means of your choice.

Description Repo

serverless framework

Description	Repo
serverless framework	sroehrl / serverless-blog blua.blue Serverless Framework Node Express API on AWS This POC is based on the serverless node/express/api template with added support for s3 bucket storage and rendering. Setup Create a bucket and ensure that your AWS cli AIM has the required permissions to read & write to this bucket. Change line 8 of handler.js accordingly: `const bucketName = 'my-article-storage-bucket'`; Usage Deployment Install dependencies with: `npm install` and then deploy with: `serverless deploy` Enhance The current setup is a POC to ease local development (when using serverless-local). Ultimately, you may want to set up your bucket as a website and permanently render what is now done in `app.get('/:slug?)` to HTML files (pug.compileFile) to enjoy a static blog. View on GitHub
file-based (mono-repo node & PHP)	sroehrl / minimal-blog minimal-blog blua.blue webhook POC This little repo can be run either with node or PHP and serves as a proof of concept for blua.blue based blogs without using the API or SDKs. Both the PHP-version and the node-version are based on a total of less than 75 lines of code. The PHP version is even completely free of dependencies. The goal of this project is was to create the easiest possible setup to host your own blog. See it here: https://equinox-vivacious-havarti.glitch.me/ How to use If you don't have an account, sign up at blua.blue Clone, fork or download this repo and host it depending on your needs* Set up webhooks on blua.blue PHP-endpoint: `https://your-site.com/receive.php` node-endpoint: `https://your-site.com/receive` *Be careful of hosting via services like heroku: many of these services delete files written to the file-system after some idle time That's it. Enjoy View on GitHub

sroehrl / serverless-blog

blua.blue Serverless Framework Node Express API on AWS

This POC is based on the serverless node/express/api template with added support for s3 bucket storage and rendering.

Setup

Create a bucket and ensure that your AWS cli AIM has the required permissions to read & write to this bucket.
Change line 8 of handler.js accordingly: const bucketName = 'my-article-storage-bucket';

Usage

Deployment

Install dependencies with:

npm install

and then deploy with:

serverless deploy

Enhance

The current setup is a POC to ease local development (when using serverless-local). Ultimately, you may want to set up your bucket as a website and permanently render what is now done in app.get('/:slug?) to HTML files (pug.compileFile) to enjoy a static blog.

View on GitHub

file-based (mono-repo node & PHP)

sroehrl / minimal-blog

minimal-blog

blua.blue webhook POC

This little repo can be run either with node or PHP and serves as a proof of concept for blua.blue based blogs without using the API or SDKs. Both the PHP-version and the node-version are based on a total of less than 75 lines of code. The PHP version is even completely free of dependencies.

The goal of this project is was to create the easiest possible setup to host your own blog.

See it here: https://equinox-vivacious-havarti.glitch.me/

How to use

If you don't have an account, sign up at blua.blue
Clone, fork or download this repo and host it depending on your needs*
Set up webhooks on blua.blue

PHP-endpoint: https://your-site.com/receive.php
node-endpoint: https://your-site.com/receive

*Be careful of hosting via services like heroku: many of these services delete files written to the file-system after some idle time

That's it. Enjoy

View on GitHub

How to use them

After deploying one of these versions, sign up with blua.blue and navigate to your profile. You will find the tab "Webhooks". With both repositories, you will want to generate a webhook to https://your-endpoint.tld/receive. There is no need for a token as we check for allowed origins, but ultimately you will want to set one of your choice and then verify the source of the payload (sent through authorization header as bearer token) in order to prevent other blua.blue-users to post on your behalf.

That's it

Lastly, please be aware of two things:

These repos are very basic and meant to be a boilerplate rather than a final solution. I am happy to accept pull-requests
Share! If you built something beautiful, let everyone know in the comments!

How to use JWT in the neoan3 PHP framework

neoan — Thu, 11 Nov 2021 01:46:35 +0000

The code to the video

I am trying out a new format of supplementing my videos with the relevant code-pieces and publishing them as an article. Please let me know if this is helpful or annoying. TY

UserModel.php

changes to the default outgoing method

   /**
     * @param array $transactionResult
     * @return array
     */
    private static function outgoing(array $transactionResult): array
    {

        if(isset($transactionResult['password'])){
            unset($transactionResult['password']);
        } elseif (!empty($transactionResult)){
            foreach ($transactionResult as $i => $single){
                $transactionResult[$i] = self::outgoing($single);
            }

        }
        return $transactionResult;
    }

changes to the default incoming method

   /**
     * @param array $transactionResult
     * @return array
     */
    private static function outgoing(array $transactionResult): array
    {

        if(isset($transactionResult['password'])){
            unset($transactionResult['password']);
        } elseif (!empty($transactionResult)){
            foreach ($transactionResult as $i => $single){
                $transactionResult[$i] = self::outgoing($single);
            }

        }
        return $transactionResult;
    }

the login method

   /**
     * @throws RouteException
     */
    static function login($credentials)
    {
        $foundUser = self::$db->easy('user.id user.password',['email'=>$credentials['email']]);
        if(empty($foundUser) || !password_verify($credentials['password'],$foundUser[0]['password'])){
            throw new RouteException('Unauthorized', 401);
        }
        return self::get($foundUser[0]['id']);

    }

AuthController.php

The final version of our authorization controller.

NOTE: In the video, I forgot to address how my IDE automatically includes use-commands. Make sure you include those.

<?php

namespace Neoan3\Component\Auth;

use Neoan3\Core\RouteException;
use Neoan3\Frame\Demo;
use Neoan3\Model\User\UserModel;
use Neoan3\Model\User\UserModelWrapper;
use Neoan3\Provider\Auth\Authorization;
use Neoan3\Provider\Model\InitModel;

/**
 * Class AuthController
 * @package Neoan3\Component\Auth
 *
 * Generated by neoan3-cli for neoan3 v3.*
 */

class AuthController extends Demo{

    /**
    * GET: api.v1/auth
    * GET: api.v1/auth/{id}
    * GET: api.v1/auth?{query-string}
    * @return array
    */
    #[Authorization('restrict',['admin'])]
    function getAuth(): array
    {
        return $this->authObject->getPayload();
    }

    /**
     * POST: api.v1/auth
     * @param string $mode
     * @param array $body
     * @return array
     * @throws \Neoan3\Core\RouteException
     */
    #[InitModel(UserModel::class)]
    function postAuth(string $mode="Login", array $body =[]): array
    {

        if($mode === 'Register'){
            // create user
            $newUser = new UserModelWrapper($body);
            try{
                $newUser->store()->rehydrate();
                $user = $newUser->toArray();
            }catch (\Exception $e) {
                throw new RouteException('Malformed input', 406);
            }
        } else {
            // try login
            $user = UserModel::login($body);
        }
        $authObject = $this->Auth->assign($user['id'], ['all'], ['email'=>$user['email']]);
        return ['token' => $authObject->getToken()];
    }
}

101 on building apps clients actually need

neoan — Fri, 05 Nov 2021 16:19:42 +0000

You might have read my article Rethinking Vue Full stack where I presented a prototype of what I called a "Frackend". Back then, I only had a proof of concept. But first things first: why should you care?

How devs make money: What you are really needed for

Unless we are one of the unicorns who actually make a living with crowd-founded open source projects, we are likely employed by or are hired by companies who market or sell something using the internet. And at the end of the day, they aren't impressed by our abilities to bubble sort or our ToDo-SPAs on heroku. At least they shouldn't be (That people who are hiring us often don't understand this themselves is a rant for another time). Instead, these companies are fighting a battle between two competing principles: organic traffic vs. user experience. If you ever ran Lighthouse, you enjoyed these little insights like

"Walmart noticed a 1% increase in revenue for every saved 100ms"

About a year ago I was working for a client who represented over 3000 smaller businesses and conducted an analytical evaluation of revenue vs. page-speed. The outcome of this study was while revenue measurably went down as soon as loading times exceed 1.7 seconds,

every page load exceeding 3 seconds results in a considerable amount of lost revenue.

The truth is that when people browse products they loose interest quickly when loading times are slow and with over 90% of traffic being mobile, internet speed itself isn't always optimal in the first place. Think about your own retention span: what is the title of this post and with what "trick" did I confuse you? (check the url to get the full picture)

What about SPAs with CSR?

You might say this isn't a problem, thinking about your React or Angular app that runs as snappy as it gets and lazy loads assets in the most optimal way there is. And you are right - sort of. I know you have been told that at least Google interprets JavaScript and runs your virtual routes and therefore indexes SPA-content correctly, but look at the reality: Whatever you google for when it comes to content or products will yield server-side rendered results first. Always

Why is organic traffic so important?

I guess I don't have to explain why most companies are highly interested in SEO: if I offer content (e.g. Newspapers, Blogs, etc.) or products (aka online-shops), I need to be found. If someone searches for "awesome red sneakers" and not just directly for "step-by-step-shoes.com", we want to be in the game. And organic traffic is the best traffic there is - it's free. Now, when I say free, I don't mean that there isn't cost related to SEO optimization - after all, it's a complete industry itself - I mean that organic traffic doesn't correlate to a customer in the same way advertising does. Let's explain that using an example in order to understand why SEO-optimization companies ask for such outlandish rates:
A given ad-campaign consists of customer analysis, assets, placement. Simplified, I first analyze who I want to target, then create marketing material (so the actual ad) and then place it somewhere (Facebook ads, Youtube ads, Google AdWords, etc.). This results in an initial investment (so whatever it cost to create this setup) and variable costs (so whatever every impression, click or similar costs me). With tracking in place, we can derive a direct correlation that allows us to make statements like "A new customer costs us X US$ (or whatever currency you calculate)". Needless to say, as soon as you stop spending, the traffic will subside. Organic traffic is different: If you manage to gain X amount of additional visitors through organic traffic, whatever revenue that traffic generates will flow until competitors manage to pull that away from you. Additionally, whatever a company spent on this optimization has no variable cost per visitor.

So we are doomed?

If you now realize that there is a reason why Wordpress and Shopify are so popular despite being technically unimpressive solutions, then you are not alone. However, to optimize something like an Adobe Magento ecommerce shop or similar, you have to invest in knowledge and hardware. And yet: even if you are doing a really good job, you won't get close to the speed a client-side rendered solution would have. And what does all that traffic help if people jump off?

What about next, nuxt & Co?

Thankfully, solutions to this problem gain traction. The attempt of these solutions is relatively simple: Let the developers work as if they were developing a single page application, while in reality a hybrid solution will be rendered. How does this work? Let's assume you visit "my-webshop.com/products/basketball". The server responds with the HTML for this endpoint, making it indexable by search engines. In a second step, the SPA logic kicks in and presents the user with the fast reactivity that is important for a successful experience. As a side effect, the user has the impression the initial loading is faster as you see the content prior to it being reactive, taking care of the issue of initial page load SPAs usually have. Most of the solutions out there even "pre-deliver" asynchronous data. And that makes sense: Why would you deliver content that then executes a call back to the very server it came from to ask for additional data? After all, we should already know what data is needed for that route. This speeds up the hydration of our SPA even further. Additionally, smart prefetching based on rendered or visible (depending on the particular technology) routing-links make use of saving start-up time by dynamic imports while having the effect of actually being already delivered when needed. So there you go, problem solved! Well, not so fast:

Caveats

Not every scenario is covered as easily as one might think. What about iterations, for example. Let's think of a scenario where I have an online shop and want to display all products of a certain category. Depending on the size of results, this can lead to quite a huge initial page load if rendered server-side. After all, we first have to get those products form a database on the server before the server can even start rendering the HTML. But if we don't (which in that scenario is currently the recommended way for this scenario in all major solutions), we have the issue that from an SEO perspective, our products aren't on that page. The pros will probably point to reducing fetched data-fields by using GraphQL and then in a second step loading additional resources (like additional pictures etc.) and merge the objects after hydration, but as you notice we dive into a complex, individual and work-intensive pool here. And the idea of "you only work on the frontend, the server builds itself" has died. I could bring in additional examples, but let's rather focus on what would need to be solved: We need a declarative way of deciding what data is preloaded and what DOM-manipulations to run on the client, the server or both in order to create a truly perfect solution that enables even relatively unexperienced developers to rapidly develop apps that have measurable performance and SEO advantages and can be developed in a fraction of the time.

Getting close

Well, we are working on it. A few days ago we uploaded the vastN3 based version of blua.blue to test-drive the technology in a asset-heavy (and sorry, not yet perfectly designed) environment. And the results speak for themselves. To get a intuitive feeling for it, try the following:

action	instructions
Feel it	Visit blua.blue and navigate, search, explore
Check it	Open up the source of a given page and see what is delivered by the server
Confirm efficacy	Verify indexing by searching for any article currently published (e.g. google?q=...)

What you will find is that it will feel very fast while solving all your client's or employer's needs.

We are still not ready to offer vastN3 for production projects, but be sure to follow me here or on GitHub in order to take advantage of something I hope will be the easiest form you ever developed hybrid applications.

Rapidly build your own stateless REST-API with neoan3

neoan — Tue, 19 Oct 2021 01:47:16 +0000

Coding along should approx. take you 15 min

What we will be working on:

Setup
Adding a simple model
Writing authentication endpoints
Final thoughts

Setup

Since we don't want to spend a lot of time on addressing various environments, let's check out the official docker setup for neoan3:

git clone https://github.com/neoan3/docker.git

Our only constraint is the need for docker-compose, so be sure you have that installed (comes with Docker Desktop on Mac & Windows). In order to get started, we will run the following commands:

docker-compose up -d --build

docker-compose exec neoan3 sh

That's it! The hashtag you will see indicates you are executing the service's shell as root.

From here, let's finally get started and create a neoan3 project:

neoan3 new app

To verify everything works as expected, try visiting http://localhost:8090

Adding a simple user model

The easiest way to get fast results is to use the basic email login.

neoan3 add model https://github.com/neoan3/email-password-auth.git

Later, it makes sense to look at the few lines of relevant code in the folder model/user , but for now we will jump over to migrating the model with our database that shipped with our docker setup. To do so, all you need it to run

neoan3 migrate models up and then choose neoan3_db as the credential key.

To verify the installation of our model has worked as expected, visit http://localhost:8090/migrate and see if you can find "user" in the dropdown.

NOTE: Don't worry about the security-warning you will see on that page. This is just a reminder that you shouldn't deploy this setup without taking the steps lined out in the README of the docker repo we started out with.

Writing authentication endpoints

Let's finally code something, right? Well, almost. Let's get us started with some boilerplate for our endpoints:

neoan3 new component auth -t:api -f:demo

This command will get us to a good starting point and within your project you should find a folder [app]/component/Auth with a file AuthController.php. And that's the file we will work with.

The plan

We want to have the following endpoints at our disposal

POST /auth (this is our login-endpoint)
POST /auth/register (this is, well, you guessed right)
GET /auth (this returns a logged in user or a 401 unauthorized response. We mainly want that for testing.)

FYI: the default api-endpoint behavior is using neoan3 api v1. Our endpoints will therefore be at http://localhost:8090/api.v1/auth### Let's first look at the method postAuth

Since we want both /auth and /auth/register to be handles by this method, our postAuth should look like this:

function postAuth(string $mode = 'Login', array $body=[]): array
{
    if($mode === 'Login'){
        // for endpoint /auth (or /auth/login)
    }
    if($mode === 'Register'){
        // for endpoint /auth/register
    }
    return [];
}

As you can see, the API converts kebab-case to PascalCase, so something like /auth/log-me-in would be interpreted as LogMeIn.

adding model transactions

We are using PHP8 in our docker setup. This makes it possible to load injections via Attribute
My IDE does most of this for me, but be sure to have both
use Neoan3\Provider\Model\InitModel; and
use Neoan3\Model\User\UserModel; after the namespace of your file

// 1. Load our user model
#[InitModel(UserModel::class)]
function postAuth(string $mode = 'Login', array $body=[]): array
{
    // 2. pass the payload (body) to the corresponding model-method
    if($mode === 'Login'){
        // for endpoint /auth (or /auth/login): send the credentials to login
        $user = UserModel::login($body);
    }
    if($mode === 'Register'){
        // for endpoint /auth/register: send the credentials to register
        $user = UserModel::register($body);
    }
    // 3. create a JWT token
    $auth = $this->provider['auth']->assign($user['id'], ['user','self'], $user);
    return ['token' => $auth->getToken()];
}

GET /auth

In order to try this out without a front-end we can use neoan3's on-board helper located at http://localhost:8090/endpoint

But first, let's built our GET-method. The most basic usage would be to restrict access to our GET-endpoint unless authenticated:


// 1. Add the authorization Attribute
#[Authorization('restrict')]
function getAuth(): array
{
    // 2. read the JWT
    $auth = $this->provider['auth']->validate();
    // 3. return its content to the client without exposing the identifier
    return $auth->getPayload();
}

Now we can jump over to http://localhost:8090/endpoint and start with our test-scenario:

Creating a user:

Set the endpoint to "auth/register" with the method POST, adding a JSON-payload like
{"email":"test@example.com","password":"secure-me"}

When hitting send you should get an answer with a token

Test authentication

Copy the content of the token and paste it into the input field at the authorization-tab, then switch the method to GET after setting the endpoint to auth.

You should now receive your user back.

Final thoughts

First of all: did you run in any kind of issues? Let me know. Otherwise, I hope you are able to derive how easy it is to work with persistent data with neoan3 beyond a user model. Lastly, let's talk about CORS.
I don't know what your plans for the frontend are. Whenever you get into a scenario where you run your application outside of the docker container (e.g. while developing a VueJS app), you will likely have a development server with a port (e.g. 8080). In order to work with cross-origin requests, please find the file default.php and adjust the allowed_origins accordingly (wildcard works, but be aware of the implications)

Happy coding

DEV Community: neoan

The humor of JavaScript

Numbers

Objects

OMG, what a language

My favorite sveltekit setup

My one minute setup

SvelteKit as PWA on GitHub pages or your own server

What you can expect

Installation via npx

Pros

Cons

Installation via GitHub template

Pros

Cons

About colors

Deploying on GitHub pages

PWA pitfalls

That's it to get you started

sroehrl / svelte-flowbite-boilerplate

General svelte-flowbite starter kit

REtech svelte kit app starter / boilerplate

Preview

includes

Creating a project using npx

Creating a project using github's repository template

Ready for GitHub pages

i18n: A lot to think about

Number formatting

Date, Time & localization

Good ol' text translation

Practicality

sroehrl / php-i18n-translate

Simple yet powerful i18n support for PHP

PHP i18n translate

Installation

Quick start:

1. In Code

So I guess a little explanation wouldn't hurt?

A - T-tag

B - The T-function

C - Placeholders

D - Attributes

E - Another attribute

F - Make it local

G - Functions to prerender placeholders

Accessibility

The semantic side

Extendability

Final thoughts

Code Along: Taking Lenkrad for a Spin

High speed-dev: A minute to be up & running

No, it doesn't run on PHP 7.2!

Interested?

Controllable Templating in PHP

It's been a while

sroehrl / neoan3-template

neoan3 minimal template engine

neoan3-apps/template

Installation / Quick start

Contents

Templating

Happy accidents

customFunctions

customAttributes

Discussion

What is dev.to for?

Uneducated opinion pieces

So what's the call to action?

Tech-blogging the easy way

sroehrl / serverless-blog

blua.blue Serverless Framework Node Express API on AWS

Setup

Usage

Deployment

Enhance

sroehrl / minimal-blog

minimal-blog

blua.blue webhook POC

How to use

Creating a project using `npx`