Forem: Mazen Touati

Nimbus v0.4.0-alpha: 10 New Features to streamline your Laravel API workflow

Mazen Touati — Mon, 02 Feb 2026 11:57:39 +0000

A few months ago, I shared Nimbus. A Laravel-aware API client that lives inside your app and basically "auto-magically" understands your routes and validation rules so you don't have to set them up manually in Postman or other similar tools. It provides unique features that other traditional tools cannot provide, such as making requests as the currently logged-in user, decrypting cookies, etc.

The stuff I’m actually excited about:

Transaction Mode: Now, you can toggle Transaction Mode on, and Nimbus automatically rolls back the DB changes. Your data stays clean.
Shareable Links: You can now generate a link that pre-loads the exact headers and payload for your teammates. And vice versa.
Auto-selecting dynamic sections on click: You can now auto-select an entire dynamic route segment (like an ID) just by clicking it. It will remember the position, so clicking again after you've changed the value will re-select the whole segment for quick replacement.
OpenAPI Schema Support: You can now feed it an OpenAPI spec. It keeps the Nimbus magic but uses your spec as the source of truth (It will reconcile the missing routes automatically, so you can have friction-free DX).
Dump and Die responses: Nimbus now catches those dumps and renders them in a clean, paginated (for subsequent dumps) viewer inside the UI.

Additional New Features:

Tabs Support.
Request History and Rewind.
Multi-application configuration Support.
Spatie Data Support.
UI Persistence.

Check it out here: https://github.com/sunchayn/nimbus

composer require sunchayn/nimbus

Live demo: https://nimbus.sunchayn.io/demo

Small note,

Last time I posted, there was some healthy confusion about where this fits into the developer workflow. Nimbus isn’t trying to replace your automated test suites. I’m a TDD advocate myself, and you should definitely keep writing those tests.

Think of it like this: Automated tests are your "Safety Net", they ensure your app stays stable and regression-free. Nimbus, on the other hand, is a developer-focused playground to interact with your API with as much kickstart as possible, with as little friction as possible. For example, where you just want to poke the endpoint, verify a data type, or show a live payload to a frontend dev without any boilerplate.

If you have a use case for Postman, Insomnia, Hoppscotch, etc., then you're most likely going to find Nimbus useful for your Laravel application.

Would love your feedback!

Introducing Nimbus: An integrated, in-browser API client for Laravel with a touch of magic

Mazen Touati — Thu, 23 Oct 2025 01:08:11 +0000

Testing APIs shouldn’t feel like a chore. Yet, here we are, copy-pasting URLs into Postman, manually typing headers, rebuilding request bodies from scratch, and constantly switching between our code and external tools. It’s 2025, and we’re still doing this.

What if your API client just… knew about your Laravel app?

That’s Nimbus. An integrated, in-browser API client that automatically discovers your routes and validation rules, understands your authentication, and gives you an interface to test everything without leaving your development environment.

The Problem With Traditional API Clients

Don’t get me wrong, tools like Postman and Insomnia are great tools. I have been using them all this time. But they’re built for a different problem; they’re generic clients meant to work with any API, anywhere. That generality comes at a cost: everything is manual (including the creation of scripts manually).

Think about your daily workflow:

You build a new endpoint in Laravel. You define the route, write the controller, and create a Form Request with validation rules. Then you switch to your API client and… start from scratch. Copy the URL. Type the method. Add headers one by one. Build the request body by guessing what fields you need. Send the request. Get a validation error. Go back to your code to check the validation rules. Update your request. Try again. Then, once done, you have to figure out how to communicate it with the rest of the team.

That’s a lot of friction and wasted time.

Here’s the thing: your Laravel application already knows everything about your API. It knows the routes, the validation rules, the authentication requirements, and the response structure. Why are we manually reconstructing this information in an external tool?

That was what I was asking myself every time I was fiddling with these tools. Which made me think, why not make it happen?

Meet Nimbus

Nimbus takes a different approach: instead of being a generic API client, it’s a Laravel-aware API client. It lives inside your application and automatically understands what you’re building.

Here’s what happens when you install Nimbus:

It scans your API routes.
It extracts validation rules from Form Requests and inline validators.
It builds JSON schemas automatically.
It gives you an interface to test everything.

That is it. No collections to maintain. No manual syncing. Just install and start testing.

Want to see it in action before installing? Try the live demo. No setup required.

The Magic of Laravel-Awareness

Being inside your Laravel application gives Nimbus superpowers that external clients can’t have:

Session-based authentication
User impersonation
Cookie inspection

Let me show you what this means in practice.

Setting up a new endpoint?

With traditional tools, you manually configure everything: copy URLs, set HTTP methods, add headers one by one, and build request bodies by guessing field names. With Nimbus, routes are discovered automatically.

Updating validation rules?

Changed a field from optional to required? With traditional tools, you need to manually update your collection and sync it with your team. With Nimbus, the changes appear immediately. It reads directly from your validation rules.

Testing authenticated endpoints?

Traditional tools require extracting tokens, managing expiration, and manually adding authorization headers. Nimbus lets you authenticate with one click, either as your current user or by impersonating any user ID. No token management needed.

Debugging cookies?

Need to inspect a Laravel session cookie? With external tools, you copy the encrypted value, find (or make) a decoder, paste it somewhere, and try to make sense of it. Nimbus decrypts and displays your cookies automatically.

Sharing with your team?

Traditional tools require exporting collections, sending files around, and hoping everyone imports the latest version. With Nimbus, there’s nothing to share. Everyone on the team just visits /nimbus in their local environment. No exports, no imports, no version mismatches.

And honestly, the sky is the limit. The package embraces a “not afraid of magic” philosophy, and anything that we can do to make the Developer Experience much better, we will do.

What Nimbus Is Not

Let’s be clear about this: Nimbus is not an API documentation generator.

It doesn’t produce beautiful, client-facing API documentation. It’s not trying to replace tools like Scribe or Scramble. Its sole purpose is to improve the developer experience while building and testing APIs.

Think of it as a developer-focused API playground, not a production documentation tool.

Getting Started

Installation takes less than a minute:

composer require sunchayn/nimbus

php artisan vendor:publish --tag=nimbus-assets --tag=nimbus-config

That’s it. Navigate to http://your-app.test/nimbus and start testing.

Nimbus is currently an open alpha release. This means:

You might encounter bugs or unexpected behaviors.
Some edge cases aren’t handled yet
Performance could be better for large applications
Features are intentionally minimal to validate the concept.

I’m releasing it as alpha to validate whether this approach resonates with the Laravel community. Does automatic schema discovery actually improve your workflow? What features would make it indispensable?

Closing Notes

We spend so much time building APIs in Laravel. Yet we’ve accepted that testing them requires leaving our environment, reconstructing our routes manually, and fighting with external tools that don’t understand our application.

Nimbus is my attempt to eliminate that friction. Give it a try.

Links:

Documentation: User Guide
Want to contribute? Check the contributor guide
Found a bug? Open an issue
Have a feature idea? Start a discussion

Thanks for reading!

Monetize.js: Event-driven library to manage and simulate Web Monetization

Mazen Touati — Thu, 21 May 2020 23:33:24 +0000

My submission for Grant For The Web Hackathon

What I built

An event driven library that serves as a wrapper around Web Monetization API. Also, a monetization simulator has been built to support the library and make testing the monetization process extremely easy.

Features

Flexible pointers management (Static and Dynamic).
Promise-like syntax to watch events.
Customizable cycle-through list of pointers.
Support probabilistic cycle-through list of pointers.
Calculate the total amount grouped by currency.
Powerful simulator that works without iframe or installed extension.

Submission Category:

Foundational Technology

Demo

I've prepared a detailed README file on how to use the library alongside a set of handy examples for some common scenarios.

The following is a selection of some features provided by the library.

Watcher API

You can simply start using static mode by manually adding the payment pointer to the head tag:

<head>
...
<meta
    name="monetization"
    content="$wallet.example.com/alice"
>
...
</head>

Then in your code you can listen to different events using

monetize.when('start').then((event) => {
    // Your event listener logic here.
});

monetize.when('progress').then((event) => {
    // Your event listener logic here.
});

The provided API is Promise-like but it doesn't necessarily behave like a Promise. For instance then here will be called as long as the event is fired, unlike Promises.

Use a dynamic pointer

By default, monetize.js will auto-detect the pointer already added to the page. Additionally, it provides a set of handy methods to work with dynamic pointers.

const p = '$example/bob';

monetize.pointer(p).then((watcher) => {
    // monetizationstart event has been fired.

    watcher.when('progress').then((event) => {
        // Your event listener logic.
    });
});

Amount API

The following is a basic example on how to work with the total streamed amount and currency for a given pointer.

Note: to use Amount API you must use one of the dynamic pointer methods like pointer or pluck etc.

const pointer = '$example';

monetize.pointer(pointer);

// Get the Raw amount sent.
const amount = monetize.amount.getPointerTotal(pointer);
// => output: 5258

// Or get the Formatted amount
const amount = monetize.amount.getPointerTotal(pointer, true);
// => output: 0.035

// Get the currency
const currency = monetize.amount.getPointerCurrency(pointer);

Select pointer from list

You can randomly select a pointer from a given Array by calling the pluck method.

const pointers = [
    '$alice.example',
    '$connie.example',
    '$bob.example'
];

// Randomly pick a pointer.
monetize.pluck(pointers).then(...);

Passing an object to pluck method will make it switch to probability based mode.

const pointers = {
  '$alice.example': 0.6,
  '$bob.example': 0.05,
  '$connie.example': 0.30,
};

// Randomly pick a pointer based on it's probability.
monetize.pluck(pointers).then(...);

Cycle-through

Sometimes picking a single pointer on page load isn't enough. For this case, you may consider using cycle and probabilisticCycle to cycle through a list of pointers for a given timeout.

    // Signature
    cycle(pointers [, timeout [, callback]])

    const pointers = [
      '$wallet',
      '$wallet2',
      '$wallet3',
    ];

    monetize.cycle(pointers, 5000).then(...);

Using probabilistic approach

    // Signature
    probabilisticCycle(pointers [, timeout])

    const pointers = [
      '$wallet',
      '$wallet2',
      '$wallet3',
    ];

    monetize.probabilisticCycle(pointers, 5000).then(...);

This example is available in the examples directory.

Simulator

Beside the core library, a powerful Web Monetization simulator is shipped. It does not require any extension or to be executed inside an iframe.

An example for the simulator in action.

More details and documentation can be found in the repository.

Link to Code

Library code is hosted on Github with detailed description on how to setup and use.

sunchayn / monetize.js

An event-driven library to manage and simulate Web Monetization.

Monetize.js

Monetize.js is an Event-driven library that serves as a wrapper and simulator for Web Monetization API.

Features

Flexible pointers management (Static and Dynamic).
Promise-like syntax to watch events.
Customizable cycle-through list of pointers.
Support probabilistic cycle-through list of pointers.
Calculate the total amount grouped by currency.
Powerful simulator that works without iframe or installed extension.

Installing Monetize.js

Using npm

npm install monetize
// Using it
const monetize = require('monetize')

Using unpkg CDN:

<script src="https://unpkg.com/monetize@latest/dist/monetize.js"></script>

Examples

Multiple examples has been created using monetize.js you can find them in this examples folder.

Monetize.js API

As soon as you import Monetize.js it will start observing the head tag to see if there's a pointer to pick.

Watching Monetization events

You can simply start using static mode by manually adding the payment pointer to the head tag:

<head>
<meta
    name="

…

View on GitHub

Additional Resources/Info

I've created a glitch project that hosts some example for the library.

Thank you for passing by, feel free to leave your feedback or suggestion. Good luck everyone!

Received; Twilio Hackathon submission

Mazen Touati — Wed, 29 Apr 2020 17:55:55 +0000

Hello,

What I built

I've build a web app that enable people to create a gateway to receive and store files from their friends, co-workers and themselves.

Basically, when a user signup a private bucket will be created for him. He can eventually organize it by folders and create a public access point (write-only) for a specific folder using a unique password.

Each user has a unique username which will identify his bucket. Guests need to provide a password for the bucket to unlock a specific folder in it. Then they can upload files for the subject.

Category Submission:

With this submission I've aimed mainly for: Exciting X-Factors. I've planned to integrate Cloud Storage APIs too (For syncing and backups) to fit Interesting Integrations but I run out of time apparently.

Demo Link

I've implemented & deployed a MVP on Azure, the plan I've picked not perfect so it may face some latency or slow downs.

https://received.azurewebsites.net

Link to Code

sunchayn / received

Public bucket for receiving files

Public bucket for receiving files.

About

Received; is a platform that enable people to reserve a storage space and create a public gateway to receives files from their friends, co-worker or themselves.

the idea is to create one easy to remember URL and protect each folder with different password. Hence, the whoever got the link can use the same URL to share files to different folders each with it's unique password.

Demo

A MVP has been implemented and deployed in the following link https://received.azurewebsites.net

Requirements

PHP > 7.2
Composer
Node & NPM
Twilio Verify Service
Twilio Authy
Twilio Programmable SMS
Twilio Phone Number
SendGrid Account ( Or Any mailing service )

Installation

Received built using Laravel, VueJs and Tailwind. Basic knowledge in these technologies would be helpful for inspecting the code.

1/ Clone the repository

git clone https://github.com/sunchayn/received.git
# Change directory to the newly created folder
cd received

2/ Install…

View on GitHub

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I've used Laravel 7, VueJs and Tailwind to tailor this app. I've worked with BDD approach to make sure that the critical features are well covered and implemented. Also, to ensure flexibility of third party services and test-ability I've approached Adapter pattern to encapsulate the SMS logic for instance. see in Github

** Twilio Stack **
I've used:

Twilio Verify API
Twilio Authy API
Twilio SendGrid
Twilio Programmable SMS check this Services Guide to learn more how and where I've implemented them.

Twilio Programmable SMS example

Additional Resources/Info

here are some additional snapshot from within the app

Bucket Browser

The main interaction point of the app, here users can create and manage folders. Share and revoke access. Download and delete folders & files.

Public access point

Here's an example how guest can unlock and upload files to a folder within a bucket.

Settings

eventually users can change their profile settings, update their username, phone number, change folder passwords, update notifications preferences...

Last thoughts

The most satisfying moment about this project is when I immedately started to use it. I was in need for such a service for a long time. Many times I've needed to send files for my self with full quality without the need to authenticate to my account in a random computer. An example for using it to send myself the screenshot for the SMS notification (and later on this screenshots itself)

Thanks for reading, I hope you've liked the app. All feed-backs are welcomed. Let me know if I missed something for my submission.

Twilio hackathon Project update: Received; UI

Mazen Touati — Fri, 17 Apr 2020 23:13:12 +0000

Hi, I would like to update the status of my Twilio hackathon project.

A quick reminder about the project's goal

my goal, is to build a platform that enable people to reserve a storage space and create a public gateway with an easy to remember URL.

By now I've reached the step 3 of the project which is preparing the UI or Hi-fi prototype for the app.

without further ado, these are some UIs design for the main features

Landing page

As I described in the initial post, I'm aiming for market ready product. Hence I've prepared a landing page to add more value for the product.

Storage space

When a user logs in, he will have access to a storage space where he can manage all the received files or create and share new folders.

Public bucket

When a user share his public profile URL with a friend or a co-worker. The later will need a password to unlock a specific folder and upload files to it.

2FA authentication

Regarding Twilio I'll use 4 API:

Twilio Verify to ensure phone validity.
Twilio Authy as the 2FA which will be enabled by default.
Programmable SMS & SendGrid as notification channels.

The following is the UI part for the 2FA step

Links

I've already pushed all the established UIs alongside the Source file (Adobe XD) to the repository. Also, as for Step 2 of the project I've pushed the initial database model too.

Project's repository: Recieved on Github

Twitter: @mazen_touati

Thanks for reading, feedbacks are appreciated 🦄

Received; Public bucket for receiving files

Mazen Touati — Sun, 05 Apr 2020 06:43:17 +0000

Hi, I have this idea for a while for building a file sharing platform that allow people to create a public bucket and share it with their friends and co-workers so they can send to them whatever file they want and it will saved their private storage.

Why

I've faced a lot of time wasting situations that led me think about a similar solution. Situations like:

The fact that a lot of social media platforms downgrade the images or restrict the file types or nagging about security issues when trying to attach compressed files that contain code (mostly when it contains JavaScript files for example). Even more, platforms like Facebook randomly block the sharing of external storage links (Like Google Drive) in private messages. They sometimes identify them as Spam.
Sometimes, I use a computer or phone of a friend and I need to send a file for myself. I've always hoped for a place online where I can save it securely for myself later.
Exchanging files between my phone and computer quickly.
Sometimes when I ask people to send me files over Wetransfer the majority of them will ask me about my email which annoys me. Probably it's not clear enough that you can rather generate a shareable link than sending the link to an email. Without speaking on the 7 days expiry for the free plan (which is totally understandable)

Goal

My goal, is to build a platform that enable people to reserve a storage space and create a public gateway with an easy to remember URL. Users can protect their public buckets with a password or create a password per folder (to keep the URL simple). Additionally, they will be able to control the type of files and size the want to receive in order to adhere to their hosting plan.

Example
URL will be recieved.app/sunchayn
password to upload to root folder: 123456
password to upload to personal_files folder: 123456@

This Hackathon is an opportunity to explore my ideas and prototype for the product. I'll keep it minimal for now but on the long run I'm planning to add numerous features that will make the experience more pleasant and secure.

Theme

Mainly I'll focus on the X-factors category as I'll push myself toward creating an usable and technically robust product. Also, Interesting Integrations will be a potential aim as I'll most likely integrate cloud storage APIs like google drive to overcome the storage limitation at the beginning.

Twilio APIs

Initially I'll make use of Twilio Verify and Authy APIs as I'll enable 2FA by default. However, I would like to use as much as I can. Like integrating SendGrid and Programmable SMS to create notification channels. Having these 4 APIs working together would be a good starting point for people interested in learning how to use Twilio products in a real life projects as intended from the Twilio CodeExchange program.

Stack

My stack will be mainly centered around this golden trio: Laravel + VueJs + Tailwind CSS

Plan

Step 1:
First of all I'll explore more Twilio products to get comfortable with.

Step 2:
I'll establish the architecture and the database design for the product.

Step 3:
Product design & identity.

Step 4:
I'll approach an incremental process to delivery functional modules (Design, Testing, Code).

Step 5:
Deploying a demo.

Links

Project's repository: Recieved on Github

Twitter: @mazen_touati

I'm writing this post to serve as a commitment for me to continue this journey. If you find this project interesting feel free to share your feedback or idea.

Thanks for reading.

How do you handle the disposable IF statements ?

Mazen Touati — Sat, 29 Jun 2019 22:39:04 +0000

Hi there,

Sometimes you need to write a conditional block that will only be executed once or for a brief period of time then the condition won't be satisfied again, like for ever.

An example for these IFs is


// User level IFs
if (!user.activated) {
 alert('please activate your account');
 return false;
}

// Application level IFs
if ( ! isAppProperlyInstalled() ) {
  die('Please, check the installation guide...');
}

The idea of that residing code that won't be executed again has been bothering me for years. I'm kind of picky and sometimes go crazy about micro-optimization, but sometimes I just ignore it. However, I feel that there's a great design pattern that I'm not aware of that may make me feel better about it.

What do you think ? Do you share the same feeling ? and how are you dealing with it ?

Photo by Carolina Pimenta, Unsplash

Sharing my bookmark

Mazen Touati — Mon, 03 Dec 2018 23:35:33 +0000

Hi, folks

I've thought recently about sharing my dev related bookmark. So without further ado let's begin :

JavaScript

idiomatic.js : Principles of Writing Consistent, Idiomatic JavaScript
JS Tip : A JavaScript tip per day
Superhero : A collection of the best articles on creating, testing and maintaining a large JavaScript code
JavaScript The Right Way : A guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices.
Eloquent JavaScript : This is a book about JavaScript, programming, and the wonders of the digital (absolutely recommended)
Project Guidelines : A set of best practices for JavaScript projects
You Dont Know JS : A book series on JavaScript.
YOU MIGHT NOT NEED JQUERY : A resource for doing things without jQuery.
33 js concepts : 33 concepts every JavaScript developer should know. (absolutely recommended)
Alligator : JavaScript Related tutorials made easy.
JavaScript30 : Build 30 things in 30 days with 30 tutorials

JavaScript Libraries

Awesome Javascript : A collection of awesome browser-side JavaScript libraries, resources and shiny things.
Microjs : A micro-site for micro-frameworks
ZeptoJS : Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API.
chartist.js : Simple responsive charts.
Nivo : nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.
Sizzle : A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
DynamicsJS : JavaScript library to create physics-based animations.
Simulacra : Data-binding function for the DOM.
NProgress.js : A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening!
Turbolinks : Turbolinks makes navigating your web application faster.
Clusterize.js : Tiny plugin to display large data sets easily.
Rivetsjs : Lightweight and powerful data binding + templating solution for building modern web applications.
hyperdom : A fast, feature rich and simple framework for building dynamic browser applications.
barbajs : Create badass, fluid and smooth transition between your website's pages.
Vivusjs : Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
Selectize : Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.
Popmotion : A functional, flexible JavaScript animation library.

CSS

Magic of css : The magic of CSS.
MaintainableCSS : Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.
Atomic Design : A methodology for creating design systems. There are five distinct levels in atomic design.
CSS guidelines : Sensible CSS Guidelines for large scale projects.
Codyhouse : Web design nuggets.
Idiomatic CSS : Principles of writing consistent, idiomatic CSS.
ColorSpace : CSS Gradient generator.
The stacking context : Understand more the stacking context in CSS

UI/UX

Design better data tables : The ingredients of a successful data table UI
Hackdesign : An easy to follow design course for people who do amazing things.
Goodui : A/B test patterns to find out which ones work better than others.
Refactoring UI : Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Daily UI : Become a better designer in 100 days.
Design Principles : An open source collection of Design Principles and methods.
Design Better : Introducing the best practices, stories, and insights from the world’s top design leaders.
Web Design: How to Use Icons on Landing Pages
Dieter Rams: Ten Principles For Good Design
The Best Place for Error Messages on Forms
Micro interactions : Designing with Details

PHP

Ham : PHP Microframework.
No Framework Tutorial : A small tutorial to show how to create a PHP application without a framework.
Design Patterns : sample code for several design patterns in PHP.
PHP The Right Way : An easy-to-read, quick reference for PHP popular coding standards.
Awesome PHP : A curated list of amazingly awesome PHP libraries, resources and shiny things.
Survive The Deep End: PHP Security : PHP Security Book
PHPtown hall : A podcast for developers who want to keep up to date with the latest random happenings in the PHP community.

General Dev Related

What technical details should a programmer of a web application consider before making the site public?
A List Apart : Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
The A11Y Project : A community-driven effort to make web accessibility easier.
30 seconds of interviews : A curated collection of common interview questions to help you prepare for your next interview.
Why Web Developers Need to Care about Interactivity
Developer Roadmap : Roadmap to becoming a web developer in 2018
Top 12 Things That Destroy Developer Productivity
Web Performance 101 : An introduction to the modern web loading performance.

I hope that you enjoyed this list. It will be great if you too share your bookmarks with us 🦄

peace

The first design iteration of my personal website

Mazen Touati — Thu, 29 Nov 2018 01:00:14 +0000

Hi folks

Recently, I've shared online my first personal website and asked for feedback and suggestions. Fortunately, I've got what's enough to make another design iteration.

Before I start talking about what I've changed, I invite you to check my website first, in case you missed it or to check the new version.

Mazen Touati - Old version

.
.
.
.
.
.
.
.

Great welcome back,

First of all, I'm really happy that the first version got some attention and reached a lot of people world wide in less than one week.

Thanks to the Dev community for sharing love

Change log

General

I changed the font family and the size ( I made them bigger and more readable )
I reformulated the textual content
For mobile users only: now the navbar has a blue background color across all sections
I reduced the revealing delay

Hello world section

I made the green text glowing
I added an icon to indicate the keyboard experience ( I'll talk about it later )

About section

I removed the version switcher, now only the full version is accessible. The reason is : I don't want the visitor to miss an important detail about me as he most likely will choose the short path, if he is interested enough I prefer he reads the full version to get a better vision.
I made the signature self-drawing ( a static image is showing for browsers that do not support SVG embedding )

Projects section

In the initial version, I made a stupid UI mistake and I did not notice it until I published the website. I made the projects appear like two separate group by not maintaining an even spacing horizontally and vertically between the elements. Now it's fixed.

I changed the animation for the hover state.

Blog section

I added a title and description for the section
I added a button to see all articles

New section : contact section

I extracted the contact section from the BSOD section

BSOD section

I made it look creepier by adding a completion status animation
I changed the color to be less bright

New feature: keyboard experience

Previously I made links appear like in command-line based applications. It shows the action's letter between brackets eg. [G]ithub, but I did not made it functional for technical reasons. The issue was that there's multiple links that have the same name even in the same viewport. I though about it and I've came with a solution which is triggering the link that's within the active block. The active block is selected based on the mouse position

It's a beta feature, if you notice any buggy behavior please let me know

404 Page

I noticed that previous traffic did not hit the 404 page, this is a screen shot for the page

A live example of 404 page : http://sunchayn.github.io/somethingNotFound

Misc

I made changes on the page structure related to the SEO
I optimized the content delivery for the CSS ( injected the critical CSS within the HTML )

Future

I plan to use the PWA techniques to make the website offline
Focus more on optimizing content delivery and SEO

Thanks

Finally, I would like to say thanks to the generous people who gave me feedbacks and suggestions in different communities: Dev community, Twitter, Reddit.

Specially these people :

Ali SpittelFollow

Passionate about education, Python, JavaScript, and code art.

Meghan (she/her)Follow

24. Local trans witch who prefers to do magic with a keyboard. she/her. Currently hacking away at making the Web less centralized.

jules mansonFollow

Mechanical engineer who dabbles with Vanilla Javscript and web development as a hobbby. I don't use any libraries or frameworks as they take the fun out creating your own solutions.

Mihail MaloFollow

A special thanks go to Tyler Charboneau for proofreading and suggesting a better textual content for my entire website.

I'm always thrilled to hear better ideas and suggestions. Please let me know if you have some, peace.

Sharing my first personal website

Mazen Touati — Thu, 22 Nov 2018 19:08:36 +0000

Hi, folks

Finally, I made my first personal website. I'm a full-stack web developer who believes in simplicity and minimalism. In my personal website, I aimed to convey these feelings through a simple geeky design and UX.

well let's not talk too much, here it is :

Mazen Touati - Old version

I'll incrementally add tweaks to the website due the fact that I made it in a rush somehow. I'll open the source code when I organize and document it.

Third party plugins i used :
scroll reveal
Throttle from lodash

Please let me hear your thoughts and suggestion, thanks.

Notice

I made the first design iteration, so what you seeing now is an updated version, please refer to this post to see what's changed

The first design iteration of my personal website

Mazen Touati ・ Nov 29 '18

#showdev #javascript #webdev #portfolio

Snacks@console Intuitive browser-based SQL Console

Mazen Touati — Sat, 17 Nov 2018 18:04:10 +0000

Hey, folks

Recently I kept myself busy creating an opensource project called "Snacks Project". Which is an intuitive database toolkit to make the database management process faster and happier.

Today, I'm going to share with you the first module of this project. Which is a browser-based console to run and save SQL queries.

sunchayn / snacks-console

An intuitive browser-based SQL console to run and save SQL queries.

mazentouati/snacks-console

An intuitive browser-based SQL console to run and save SQL queries.

Usage guideline

Snacks@console is a PHP based application. Before you use it, you have to make sure that your system is ready to run PHP applications. All web server such as Laragon (recommended) or XAMPP provide bundle all the requirement to run a PHP based application in one package.

After you setup your webserver. Open the command line inside the web server's root directory, usally www, and follow along the installation process

through composer

we recommend installing this package through composer :

composer create-project mazentouati/snacks-console "console"

Note: make sure that your web server enables the RewriteEngine.

Plans

This is an initial version, it's just a prototype to test and enhance the current experience. We plan to add the following features :

Enhance queries support

currently the console supports the following commands:

Select
Update
Delete
Insert
…

View on GitHub

Features

currently the console supports the following commands: ( Select, Update, Delete, Insert, Use database)
bookmark favorite queries
built-in terminal commands
neat table representation for select queries

Usage guideline

Snacks@console is a PHP based application. Before you use it, you have to make sure that your system is ready to run PHP applications. All web server such as Laragon (recommended) or XAMPP provide all the requirement to run a PHP based application in one package.

After you setup your webserver. Open the command line inside the web server's root directory, usally www, and follow along the installation process

through composer

I recommend installing this package through composer :

composer create-project mazentouati/snacks-console "_folder_name"

Note: make sure that your web server enables the RewriteEngine.

then access your "_folder_name" folder via your browser and the initial setup will popup to set your database credentials, then redirect you to the console interface.

Future

I plan to enhance the current experience as the current version is somehow a prototype to study the users feed backs and suggestion. Though, i'm going to add the following features :

Extended command support

Theoretically, it can execute any SQL command but I plan to make the experience of DDL ( data definition language ) like Create or Alter more accessible by supporting interactive inserting in the console.

Add syntax highlight

Additionally, I plan to add syntax highlight for the SQL commands

Enhance the manipulation of the fetched data

Currently, the data shown when using select command isn't interactive. I plan to make the table re-sizable, the cells clickable ( shows full column's data when click ) and whatever required to make it more interactive.

Documentation

Unfortunately, I'm overwhelmed by Snacks project and it's sub-projects. I'll incrementally add the documentation, tests for both the source code and the application.

I'm really thrilled to hear your suggestions and thoughts.

peace.

PHP Simple two way config package, and a backstory

Mazen Touati — Tue, 13 Nov 2018 18:18:24 +0000

Hi, folks

I'm happy to introduce my first open source project. Which is a two way PHP-based configuration package. This package is designed to make it easy synchronizing the source file with the run-time values. It's suitable for applications that require the use of file-based system to store preferences or configuration.

sunchayn / simple-2way-config

Simple 2 way (read/write) php-based configuration

mazentouati/simple-2way-config

Simple 2 way configuration is a php-based read and write configuration library. It's suitable for applications that require the use of file system to store preferences or configuration.

Installation

we recommend installing this package through composer :

composer require mazentouati/simple-2way-config

Usage

The simplest way to use it is through the package's factory. The factory's required parameter is the path of the directory that holds your config files.

use MazenTouati\Simple2wayConfig\S2WConfigFactory;

$config = S2WConfigFactory::create( __DIR__ . '/demo' );

Now you can access to a config value using dot notation '{filename}.path.to.value'

$host = $config->get('database.drivers.mysql.host');

Note: your config file should be an array-based configuration, check this example

API

the config API implements the S2WConfigInterface.

the examples shown below will assume that you already assigned your config to a variable called $config

get(string $path,

…

View on GitHub

example of usage

use MazenTouati\Simple2wayConfig\S2WConfigFactory;

$config = S2WConfigFactory::create( __DIR__ . '/demo' );

// Get a value from the config
$old_host = $config->get('database.drivers.mysql.host');

// Change the value at the run-time
$config->set('database.drivers.mysql.host', '127.0.0.1');

// Sync the changes with the source file
$config->sync('database');

If you like the project kindly share love and leave a start, it will help me a lot. Suggestions and contributions are welcomed too.

Back story

Somewhere in my full-stack development journey, I decided to be involved in the open source industry and practice my knowledge more and more, especially for the front-end part as it's evolving so fast with a lot of over-engineered libraries and frameworks. So I started planning then creating a project I thought about for a while. Which is a database toolkit dedicated to small and medium project. Well, it's totally worth it as I learnt a lot of new things. From comparing and testing: Vue, Angular and React, later I abandoned them, to creating my own solutions or small packages like: templating, data binding, etc. I don't think that I'm re-inventing the wheel in this case because as I mentioned before there's a plenty of over-engineered solutions that aim to solve all problems and cover all use cases. I'm a simple, pragmatic man, I want only to use what's enough for me and my product. Bombarding it with a lot of unused code or generic solution is against my most prioritized goal (for the toolkit) which is "Performance".

With that said, it brings us to this post subject, I came across a point where I needed to make configuring the database credentials read and write. I don't have another choices, I searched for a simple package that offers the ability to make the configuration two ways but noway.
Here is my use case: I'm building a SQL console that execute commands one by one, when the Developer type use _database_ it should take the database name and update it in the config file then return a success message to the console interface (using AJAX of course). So when he continues throwing SQL commands to the console the Back-end code uses the new database name. Which will become persistent for future use. In a case like this I didn't have the luxury to use a database for dynamic configuration. To solve my issue, I forked an existing package and added the write functionality just to be able to continue working on the console. I used composer VCS repositories to load the fork. Later, after I finished the console I created this package and implemented it in my toolkit because I wasn't comfortable enough with that fork.

The console (part of the toolkit) is ready for a pre-release I'll publish it as soon as I finish creating it's homepage.I'll post more details about my journey creating this toolkit when I release it.

These are the things I have learned till now as far as I can recall (some I heard about but never used them, some I knew them but I practiced them more)

Javascript: React, Vue, Reveal Pattern, Sub-pub, Data binding, ES2016, Gulp, More VanillaJS, HTML Tag's templating ( usings custom attribute ) ...
CSS: SMACSS, More flexbox
PHP: Unit Testing, Continuous Integration, Slim Micro Framework, Code-sniffer, More composer
Other: Git, Vim, Lossless coupled components, Modular Programming in general, more command line...

Again, I'm very happy and satisfied for what I passed through till now. Go ahead and start creating your open source projects.

practice makes perfect

I'd like to hear your thoughts, peace !