DEV Community: Nehal Hasnayeen

Interactive example of building a component with TailwindCSS

Nehal Hasnayeen — Thu, 17 Sep 2020 02:47:43 +0000

I'm doing an experiment on building an interactive tutorial. I created a proof of concept which shows making of a UI component with TainwindCSS. I'm looking for feedback on how to improve this further. Check it out here -> (https://zukoni.com/tutorials/sign-up)

Laravel Developer Roadmap 2020

Nehal Hasnayeen — Tue, 07 Apr 2020 16:44:32 +0000

Hey Laravel enthusiasts 👋, trying to put up a roadmap for "How to become a Laravel developer in 2020". Aim is to put up a straightforward sequential topics that one may need to learn to become a skilled Laravel developer so that beginners can easily figure out what to learn next. I've put up a basic layout but need more input from expert of the communities to make it more useful.

Hasnayeen / laravel-developer-roadmap

Roadmap to becoming a Laravel developer

Laravel Developer Roadmap 2024

Roadmap to becoming a Laravel developer in 2024

Below is a simple roadmap charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a laravel developer.

This is simply a guide to give you an idea. It helps you navigate the ecosystem and pickup topics to learn as you go so that you don't get overwhelmed.

Roadmap for other technology can be found here

Roadmap

How to use

Start at the top, if you don't know the pre requisites, first learn those. Then start at laravel and learn each topic serially. For each topic, first learn the essentials (primary, marked in red background). Then you can go to next topic and learn its essentials. After you learn first few basic topic, you can come back to first topic again and learn the secondary knowledge (marked…

View on GitHub

Let me know how can I improve this. Thanks!

Local Development Environment with Docker for PHP (Part 3)

Nehal Hasnayeen — Sat, 19 Oct 2019 08:44:05 +0000

Setting Multiple PHP runtime

In our last post we’ve successfully setup a development environment to develop applications in Laravel, though this setup can be use to build any PHP application. Now suppose for whatever use case if we need to test our application for different PHP version than our current one, it’d be very complex and messier process to do it in our host machine with native setup. But with docker we can do this without any hassle (also it can be achieved in many other ways e.g vagrant).

Install PHP 5.6

We’ll install php 5.6 version. Everything will be same as the way we installed php 7 earlier. We’ll use php:5.6-fpm image from docker hub.

Create a conatiner for php 5.6

Do not select any network for the container right now, we will do it later.

We will map our sites directory to the /var/www directory in the container.

Map project directory in Volumes tab

Finally in Command tabs put /var/www as value in Working Dir field

Now start the container by hitting start container button. Docker will pull the image from docker hub registry and then start a container by php-5.6 name.

Assigning an alias

Now we’ll assign a alias called php for this container so that our nginx configuration works for both php-7 and php-5.6 container. If you look in the nginx config for any application we are forwarding all request from nginx to php:9000. Assigning a alias for php-5.6 container will allow us use the same config for both php container. First stop the container and then run the below command from the command line (portainer doesn’t have an option for assigning alias yet)

docker network connect --alias=php php php-5.6

So the above command connect a container to a network, we’re connecting php-5.6 container to php network and assigning a alias php. Now start the container from portainer. Now you can run all the php application in php 5.6 version. Now if you want to run again in php 7 runtime first stop the php-5.6 container and then start the php 7 container.

Conclusion

Using docker you can easily test your app for different php version above mention way. In next post we’ll see how we to run laravel asset compiling package elixir or mix to compile our frontend stuff.

Part-1

Part-2

Local Development Environment with Docker for PHP (Part 2)

Nehal Hasnayeen — Thu, 17 Oct 2019 05:26:48 +0000

Setting MySQL, Adminer and Redis

In our last post we installed docker in our machine and setup our environment with several containers. We added nginx container as a server, a php-fpm container and and installed a laravel application. Now we’ll install a mysql database to persist our application data.

Install MySQL

Before we create a mysql container we’ll create a volume to persist the database data and map it to a directory in the docker host. These volume will persist our data even if we remove the mysql container so we’ll not lose our data. Go to the volumes page in portainer dashboard and create a volume with any name you want

Create a volume to persist db data

Now let’s create a mysql container

Create a mysql container

Give the container a name and let’s use the official mysql image. We don’t need to expose any ports publicly because our application will talk to the db and it can because it’ll be in the same network. Attach the newly created volume to /var/lib/mysql directory in docker host

Attach db-data volume to docker host

Also select the php network in the network tab. In the Env tab add the below environment varibles

Add environment variable for our container

MYSQL_ROOT_PASSWORD create a password for root mysql user, MYSQL_DATABASE creates database with the name and it’s optional so you can omit this if you want. MYSQL_USER and MYSQL_PASSWORD create a new mysql user and its password and these are optional too. Now create the container by hitting start container button.

Let’s check our application can connect to the database. First configure our database connection in env file of our project.

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=example
DB_USERNAME=hasnayeen
DB_PASSWORD=secret

Now connect to php container bash console from portainer dashboard and you’ll be in the /var/www directory. cd into the example directory and run migration command

Test our application can talk to db container

Our application has successfully connected to the db container and migrated the default database tables.

Install Adminer

We can use the mysql cli in the dbcontainer to interact with database but we like to do it through a graphical interface. Many people use phpmyadmin as a database manager but I personally use adminer so I’m going to create a container using the official adminer image

Create a adminer container

I named the container adminer and published all exposed port. Docker is going to assign a random port to 8080 of the container but if you want to assign a specific port on your host then you can map it through the Port mapping option. Let’s create the container

Our adminer container is running and mapped to a random port

You can see docker has assigned 32768 port to container 8080 port. Click the link and we see the login page of adminer

Login page of adminer

Fill all the field with proper value and hit login. Remember the server name is the name of the container of our mysql container which is in our case db.

Install Redis

Let’s now create a redis container to use as a cache memory.

Create a redis container

Attach the container to the php network and to persist our data we can use the db-data volume and mapped it to /var/lib/redis directory of docker host. Finally add a command in the command tab to run redis with appendonly mode and create the container

Add a command to run redis with appendonly mode

Now we need to configure our .env file in our application

CACHE_DRIVER=redis

REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379

Cache driver will be redis and redis host name is the name of our container which is redis. We’ll also need to predis/predis package to use redis in our application. So connect to the php container bash terminal and install the package

$ composer require predis/predis

After predis has been installed let’s check it’s working. We’ll add to route to our routes file, one for putting a value in the cache and one to get the value, so add the below code in the routes/web.php file

Route::get('get', function() {
    return \Illuminate\Support\Facades\Cache::get('hello');
});

Route::get('put', function() {
    return \Illuminate\Support\Facades\Cache::put('hello', 'world', 5);
});

Now first visit the put routes to put world as a value of hello key. It’ll return nothing but if we now visit the get route we’ll see it retrieve the value of hello key from the cache and return it to us.

Checking our redis container is working

Conclusion

So we have added few more containers and our machine is ready to build awesome applications with laravel.

In next post we’ll see how we can use different PHP versions and databases to test our application without messing with our host machine.

If you liked the content please consider to share the knowledge and don’t forget to subscribe for more.

Part-3

Local Development Environment with Docker for PHP (Part-1)

Nehal Hasnayeen — Wed, 16 Oct 2019 10:48:49 +0000

Setting Docker, Portainer, Nginx, PHP and Composer

If you work with different language, tools or technology its really hard some time to manage all these different environments in local machine. Docker is a great tool which give us isolated environment to build our application with required tools and libraries without messing with the host machine. You can package up an application with all of the parts it needs, such as libraries and other dependencies, and run it on any machine which have docker installed without installing a single piece of software. You can use different version of any tools separately without any hassle. So let’s see how can we use docker to setup our development environment to build application with Laravel.

Install docker

I’m using antergos which is arch-linux based os, so installation instructions step below are for arch-linux distro. If you are on Mac or Windows or any other linux distro visit here for installation instruction.

$ sudo pacman -S docker

To start the docker service (for any linux OS that use systemctl)

$ sudo systemctl start docker.service

To start on system boot

$ sudo systemctl enable docker.service

Install Portainer

Portainer is a container which gives a nice ui dashboard to use docker easily. We’ll create and run the portainer container like below

$ sudo docker run -d --name portainer -p 8000:8000 -p 9443:9443 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

Above will create a container from portainer image and then run it in background ( -d flag make the container run in background). The command will search for the portainer image in local machine and if it doesn’t find the image then it will pull the image from docker image registry. We’ll run the container in port 9443 so port 9443 should be available, but if you want to use any other port than specify it via the -p flag ( -p 8080:9443 ). Also notice that we have named our container portainer with — name flag. You can name your container whatever you want. When the download is complete we can check that the container is running by $ docker ps command. It’ll show a list of all the running container

CONTAINER ID        IMAGE                 COMMAND             CREATED             STATUS              PORTS                    NAMES
1f5bb115d327        portainer/portainer   "/portainer"        5 seconds ago         Up 1 second         0.0.0.0:9000->9000/tcp   portainer

Now you can visit the dashboard by visiting localhost in your browser. You’ll see below screen

Provide a password for admin user account and then login to the dashboard. You’ll see a screen like below.

Select the first one and connect, you’ll see a nice dashboard

Create a PHP network

First we will create a network for php application only. Click the network menu from sidebar and then give it some name like php and click create.

Create a php network

Install Nginx

First we will create a container as our server and we’ll use official nginx image from docker hub. Go to Containers page from sidebar menu and click on Add Container button

Add New Container

Let’s give our container a name of server and the image name which is nginx. Click the publish all exposed ports which’ll expose port 80. Next click map additional port and map our host machine port 80 to container port 80 like below

Map host port 80 to container port 80

Next create two folders where you will keep your projects. This can be anywhere in your file system. One folders is to keep our application source code and the other is for nginx configuration.

Now under Advanced Container Settings click the volume tab and bind sites directory to /var/www in container and nginx-conf directory to /etc/nginx/conf.d .

Next select the php network we created earlier in network tab. Finally hit the start container button. First portainer will pull the nginx image from registry and then start the container

Install PHP-FPM

Next we will install php fpm to serve our php application. We’ll create a container using official php-fpm image.

We don’t need to bind any port from our host machine to the container, nginx will send traffic to php-fpm, we just need to select the php network in network tab.

Also we need to map our sites directory to the /var/www directory in the container.

Finally in Command tabs put /var/www as value in Working Dir field

Now start the container by hitting start container button.

Add Application

Let’s try to add our first php website. First add a hello.conf file inside nginx-conf directory with below contents

server {
    listen 80;

    server_name hello.local;

    client_max_body_size 108M;

    access_log /var/log/nginx/hello.access.log;
    error_log /var/log/nginx/hello.error.log;

    root /var/www/hello/public;
    index index.php;

    if (!-e $request_filename) {
        rewrite ^.*$ /index.php last;
    }

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PHP_VALUE "error_log=/var/log/nginx/hello-php.log";
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        include fastcgi_params;
    }
}

This file is for routing traffic to php-fpm. Next add a index.php file inside sites/hello/public directory with following contents

<?php
phpinfo();

And finally add a domain for our site in /etc/hosts file

127.0.0.1    hello.local

Now visit http://hello.local and you’ll see

Now let’s add another site, the procedure is same. First we add conf file for nginx configuration and then add our code in a directory under sites and finally add a domain for that site in /etc/hosts file.

Install PHP Extensions

By default only few extensions are installed in the container. If we want we can install more extensions. First let’s connect to the bash terminal of our php container. If you visit the container page you’ll see a console link, click it

You’ll see a connect button to connect to the bash, click it and you’ll be at /var/www directory.

Now let’s install pdo_mysql extension to use mysql pdo driver by following command

$ docker-php-ext-install pdo_mysql

We’ll also install gd and ext-zip extensions

$ docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ && docker-php-ext-install gd

$ apt-get install libzip-dev && docker-php-ext-install zip

You can install other extensions in similar way. After installing any extension restart the container.

Install Composer

Before we install composer first install zip & unzip package which’ll be used by composer for laravel installation.

$ apt-get update && apt-get install zip unzip

And now install composer

$ curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin/ --filename=composer

Let’s check composer is installed and in our path

$ composer --version
Composer version 1.4.2 2017-03-10 09:29:45

Install Laravel

Lets install our first laravel application by running following command

$ composer create-project --prefer-dist laravel/laravel example

It’ll create a new laravel app inside example directory. To make it accessible we have to create a example.conf and add example.local domain in /etc/hosts file. Also we need to change the owner of storage and boostrap folder like below

$ chown -R www-data:www-data storage bootstrap

Now if we visit example.local in the browser we’ll see

Adding another application will be same as before: 1) create a new laravel app inside sites directory, 2) add a new .conf file for that application, 3) add a domain in /etc/hosts 4) change owner of storage and bootstrap folder to www-data .

Conclusion

We have one piece of the puzzle still left, that is database. We’ll see in next post how to add any database to our application and persist the data and also some other tools like redis etc. We’ll also see how can we use another php version to test the same application. Stay tuned!

Part-2

Moderator/Maintainer needed: Laravel + Vue OSS project

Nehal Hasnayeen — Sat, 05 Oct 2019 14:15:04 +0000

I've an oss project built with Laravel and VueJS that is growing. I decided to break up the project into smaller parts and delegate different parts to interested oss enthusiasts. If anybody is interested please join our discord server here and reach out.

Hasnayeen / invobook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

InvoBook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

Hire me

I'm available for contractual work on this stack (Filament, Laravel, Livewire, AlpineJS, TailwindCSS). Reach me via email or discord

About Invobook

Invobook is a self-hosted app to manage team/clients, project & tasks, time tracking, create and sending invoice and more. It is build upon Filament and TALL stack.

Installation

Clone the repository

git clone git@github.com:Hasnayeen/invobook.git

Set env variables

cp .env.example .env

Install composer packages

composer install

Screenshots ↑Top

Contributing ↑Top

To contribute join discord server link

Supporting ↑Top

Be a sponsor

Invobook is an MIT-licensed open source project with its ongoing development made possible thanks to the support by our amazing backers.

Support the development of "Invobook" by being a sponsor, reach at searching.nehal@gmail.com

Professional Support

If you need professional…

View on GitHub

OSS flutter app open to Hacktoberfest contributors

Nehal Hasnayeen — Mon, 30 Sep 2019 15:12:53 +0000

Goodwork is an open sourced project management & collaboration tool built with Laravel and VueJS. Now a mobile app is being built for the web app with flutter.

A discord server is opened to accommodate easy communication. Join in and ask any questions you might have. Join here

All contributions are welcome and appreciated. Connect in discord and ask how you can contribute or what you want to work on.

Also experienced flutter dev are welcome to guide the development or take ownership part of the app.

web app repo:

Hasnayeen / invobook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

InvoBook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

Hire me

I'm available for contractual work on this stack (Filament, Laravel, Livewire, AlpineJS, TailwindCSS). Reach me via email or discord

About Invobook

Invobook is a self-hosted app to manage team/clients, project & tasks, time tracking, create and sending invoice and more. It is build upon Filament and TALL stack.

Installation

Clone the repository

git clone git@github.com:Hasnayeen/invobook.git

Set env variables

cp .env.example .env

Install composer packages

composer install

Screenshots ↑Top

Contributing ↑Top

To contribute join discord server link

Supporting ↑Top

Be a sponsor

Invobook is an MIT-licensed open source project with its ongoing development made possible thanks to the support by our amazing backers.

Support the development of "Invobook" by being a sponsor, reach at searching.nehal@gmail.com

Professional Support

If you need professional…

View on GitHub

mobile app repo:

iluminar / goodwork-mobile

Android and iOS app for Goodwork web application

Goodwork

Goodwork is a self hosted project management and collaboration tool inspired by basecamp. This repo contains source code for Android and iOS app for Goodwork web application.

Repo for web app

About Goodwork

Goodwork is a simple project management and collaboration tool for software teams. It is open source and MIT licensed. Goodwork is a self-hosted software so no dependency on anyone and only you keep your data.

Goodwork brings you all the components required for your project to run smoothly in one place so that you have single source of truth. Instead of using a collection of tools or service which makes everything messy and hard to find important details from stuff scattered all over the place, Goodwork organizes everything in a central place where everyone in the company knows what to do…

View on GitHub

What is your biggest frustration about how work is managed at your workplace?

Nehal Hasnayeen — Sun, 07 Jul 2019 08:18:32 +0000

What makes you shake your head on how your manager or team or company manage work/project at your workplace. What things or practices will you change if you get the chance.

What does your ideal workplace will look like?

Some of the things that bother me-

Lack of trust on employee
Not enough transparency on decisions or policies
Constant interruption. Always be present or response at real time, no opportunity for deep concentrated work.
Punishing everyone for one individual wrongdoing.
Unnecessary meetings

Please, share your experience and opinions on this matter.

How & why to create a roadmap? Is it waste of time?

Nehal Hasnayeen — Mon, 24 Jun 2019 05:59:08 +0000

How do you create a roadmap for the software you're building? What process you follow and what tools do you use? And what exactly do you include in a roadmap? What benefits a roadmap provides?

I want to create a roadmap for the app I'm building and I want to add the feature of creating a roadmap into the app, so I'm looking for suggestions on how do people solves this problem.

Btw if anyone interested what I'm building, it's yet another open sourced project management tool.

Hasnayeen / invobook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

InvoBook

Self-hosted app for Time Tracking, Invoice Generation, Project & Client Management, built with Laravel & Filament.

Hire me

I'm available for contractual work on this stack (Filament, Laravel, Livewire, AlpineJS, TailwindCSS). Reach me via email or discord

About Invobook

Invobook is a self-hosted app to manage team/clients, project & tasks, time tracking, create and sending invoice and more. It is build upon Filament and TALL stack.

Installation

Clone the repository

git clone git@github.com:Hasnayeen/invobook.git

Set env variables

cp .env.example .env

Install composer packages

composer install

Screenshots ↑Top

Contributing ↑Top

To contribute join discord server link

Supporting ↑Top

Be a sponsor

Invobook is an MIT-licensed open source project with its ongoing development made possible thanks to the support by our amazing backers.

Support the development of "Invobook" by being a sponsor, reach at searching.nehal@gmail.com

Professional Support

If you need professional…

View on GitHub

Hacktoberfest: NOS for OSS projects

Nehal Hasnayeen — Thu, 18 Oct 2018 20:52:55 +0000

Hacktoberfest is a golden opportunity for new developers to get into open source world. Through hacktoberfest many people get introduce to OSS projects and make their first contribution. Hacktoberfest give oss projects new boost during this time. Just like my oss project Goodwork got some healthy acceleration during this time. But most importantly got help in an area which is not possible without community contribution. Localization for software is one tough task and thanks to hacktoberfest Goodwork is now available in 11 language. Translation and documentation is perfect for new comers to learn about contributing on a oss project.

If you're late to the hacktoberfest party there are still a lot of issue to get started. Goodwork itself has several issue tagged with #hacktoberfest and some are translation related. We need translation for Mandarin, Japanese and other languages.

Issue List

iluminar / goodwork

Self hosted project management and collaboration tool powered by Laravel & VueJS

Self hosted project management and collaboration tool inspired by basecamp.

About Goodwork

Goodwork is a simple project management and collaboration tool for software teams. It is open source and MIT licensed. Goodwork is a self-hosted software (no dependency on anyone else and only you keep your data).

Goodwork brings you all the components required for your project to run smoothly in one place so that you have single source of truth. Instead of using a collection of tools or service which makes everything messy with important details being hard to find because stuff is scattered all over the place, Goodwork organizes everything in a central place where everyone in the company knows what to do, knows where things stand and where to find stuff without having to ask around.

Goodwork is available in 23…

View on GitHub

Photo Credit: Oscar Sutton on Unsplash