Category: Software Development

I run windows in KVM, and the QEMU android Emulator that ships with Android studio crashes all the time, so the obvious solution, with all those android devices I have is to connect a phone to android studio, It is faster and spares me the hassle of finding out why nested virtualization is so terrible

But having a phone connected via USB is not optimal, as i have to pick it up every time i want to run my under development software on it !

The answer seems to be in the

1- install Android WiFi ADB : A plugin easy to install in Android studio

2- A phone with Android 11 and above

So let us do this step by step

1. Download SDK platform-tools and install it (Copy it somewhere and add that to your system path)
2. Enable developer options on the phone (Keep tapping build number)
3. From developer options, Enable wireless debugging
4. Select Pair device with pairing code. Take note of the pairing code, IP address, and port number displayed on the device (see the above image).
5. Open the command prompt and run the command adb pair ipaddr:port
   adb pair 192.168.7.101:45353
   Enter pairing code: xxxxxx
   daemon not running; starting now at tcp:5037
   daemon started successfully
   Successfully paired to 192.168.7.101:45353 [guid=adb-RF8M4xxxxxxx-xxxxxxx]
6. Now, to have it appear as a device in android studio… Go to wireless debugging and notice the port number, then using that IP and port, use the following command
   adb connect 192.168.7.101:35127
7. Recommended: Install the “Android WiFI ADB” plugin in android studio

Note: The Pairing port is not the same as the connection port ! so pay attention to that

The official VSCODE extension for rust is called (rust-analyzer) by rust-lang.org

To install rust, All you need is the installer, you can get it from rustup.rs, it might fire up a visual studio installer for the builder if you are running windows…

So, to check that you have rust installed on your computer, You may want to run the following command

rustc --version

In my case, it responds with (rustc 1.77.0 (aedd173a2 2024-03-17))

To update rust, you will need to run the commadn

rustup update

If you want to create a new rust project you CD into a directory where you want the project to be, and issue the command

cargo new projectname

Now, you can open the projectname directory in VSCODE to start working on a project

If at any time you want to update the dependancies in your project, you can simply issue the command

cargo update

from within the project directory, this should update the cargo.lock file etc….

To add libraries to cargo, visit crates.io and you can get the names of the libraries you can add to Cargo.toml

Tools you will probably be using in your JavaScript journey, I will keep this list updated as I go. Some obvious tools like NPM and Yarn will be added along with the other obvious stuff, but I will be adding them once I have something usefull to point out about them.

1- A web browser

Web browser: On the market today, relevant to JavaScript development, there are 3 browsers, 1.1- Firefox, 1.2- Safari (And browsers based on it’s WebKit such as some browsers based on it), and everything else that are really all based on 1.3- google chrome (Yes, including both brave and MS edge).

I personally use Firefox, and for development purposes, I use “Firefox Browser Developer Edition“, I would probably make sure i have chrome installed, at least for cross browser compatibility, WebKit/Safari, I have never found a need for it, but it is there is you want to grab it

VS Code

Microsoft s super popular IDE, a great tool, itself written in JavaScript (Electron), but not so useful for JavaScript without a few good extensions, so here are a few extensions that you might need for Javascript development

• VS Code JavaScript (ES6) snippets by charalampos karypidis
  This extension provides shortcuts to insert code directly into your project
• ESLint by MidcroSoft
  Integrates ESLint JavaScript into VS Code. ESLint itself is a command line tool you run against your code to analyze it for potential problems, now, it is a VS Code plugin !
• DotENV by mikestead
  Do you use a lot of .env variables ? I already use this for Laravel development, but it is also good for JS development, this tool adds highlighting and more to environment

For website speed, I am considering tailwind, a CSS framework that acts more like a library than a framework.

I will be adding my notes here, and the links at the bottom.

Which is better, tailwind or bootstrap

Well, like i said above, you are comparing apples to oranges, while it is very easy to spot a bootstrap theme when you see one, tailwind is more like CSS extended, so you have elements that you can use in your design, but your design is yours 😉

Some of the cool tutorials I have found….

Traversy Media : Tailwind CSS Crash Course (30 minutes)
Traversy Media : Tailwind Crash Course | Project From Scratch (1:30)
Net Ninja – Tailwind CSS Tutorial

Development in TailWind CSS

All you need for developing in TailWind is your CSS editor (VS Code in this post), then you will need NodeJS, and NPM to generate the production CSS and minify it

I will create a few ultra simple files for you to learn the process,

• the HTML file: Where you add your HTYML
• The tailwindCSS file, from which the production CSS file is copied.
• The NPM config file and the tailwind config file WHICH YOU CAN SIMPLY COPY FROM HERE and modify if needed

I personally use Debian Linux, everything should be identical on Windows and Mac, I will assume you are using the command line on Linux, but if you open the command prompt on windows, it should work exactly the same way

Yes you can, but not the latest, CodeIgniter support was dropped at one point, but nothing is stopping you from using the old version of clockwork !

Clockwork is maintained by itsgoingd, with the relevant projects here (https://github.com/itsgoingd)

Clockwork’s codeigniter support was dropped with Clockwork 2, but you can still use Clockwork V1.x (Statement from itsgoingD himself here https://github.com/itsgoingd/clockwork/issues/333), Version 1 can be downloaded at (https://github.com/itsgoingd/clockwork/tree/v1), 1.6 seems to be the last V1 published.

But there are a few caveats, for example, what browser extensions work with Clockwork V1.6 ?

Here is a scenario, You are using the socialstream laravel plugin by Joel Butcher (You can donate to the guy for his hard work), You don’t have the time to modify the pages, and you want to throw in bootstrap alongside tailwind that ships with socialstream, the process to do this is not so hard, let us stick to this example and resolve the issue and then you can adapt this to whatever your situation is.

Off the bat, bootstrap and tailwind have conflicting class names ! they can not be used together without adding a prefix, but there are solutions to make it happen depending on your use case.

Again, whatever your use case may be, there are multiple solutions that need to be mixed and matched, I will start by providing the methods to allow both Bootstrap and Tailwind to co-exist, then, I will provide the common use cases below and refer to the solution(s) that work best with them

Solution 1- Change the tailwind class prefix !

This is the simplest solution

You start by editing the file tailwind.config.js and adding the prefix option.

module.exports = {
  prefix: 'tw-',
}

The run “npm install && npm run build”

On laravel, this will add tw- as a prefix to all the utility classes, the effect can be seen in the files

the use of tailwind CSS that came with your scaffolding plugins probably is not massive.

Case 1: My design is in bootstrap, but scaffolding packages use tailwind !

For example, one reason you are probably trying to do this is when you have Laravel packages that provide a front end that uses tailwind, but your design is all done in bootstrap !

The solutions are

What is OAuth2

If you are a web developer, you probably understand that OAuth (2) is how you allow your visitors to login to your website using their facebook, twitter, or even github credentials (Too many to name).

The uncontested champion of a plugins to log in users to your website using social networks is Laravel Socialite, (More like register to your website, but you get the idea)

So, to avoid confusion, socialite is the plugin you are looking for, Passport and Sanctum ARE NOT MEANT FOR THIS PURPOSE. here is how they are different

Plugin	About
Socialite	Allows you to easily integrate the option to login to your website with a popular website's credentials
Sanctum	The opposite of Socialite, Allows an application to authenticate users using your website as a back-end, usually useful when you create mobile apps for example.
Passport	Same concept as Sanctum, but with OAuth2, Unless you need OAuth2, don't use this, Sanctum provides a much simpler API authentication development experience.

Now, let us get to adding social login to our application, socialite.

At this stage, this posst is a stub, I am simply compiling information here then I will come back to edit this

Under linux, the Laravel extensions that i like up to now are

• Laravel Blade Snippets (For blade templates)
• PHP namespace resolver (So that we don’t need to look for what namespaces provide for the classes we are using)
• PHP Intelephense (PHP Autocomplete/intellisense ref finder, etc…)

This part of the tutorial is a hands on setup to have Laravel working on nginx under Linux. this is not the only way to run Laravel, for all the options, see here

NOTE: Most if not all of the popular development tools are available for Linux and Windows, so If this setup is for development, you might want to install Debian Linux with the Gnome GUI so that you can install the development tools used in the next part of this tutorial, if you are going to be developing on a different machine or this is for production, then you shouldn’t.

STEP 1: Install Debian 11 (Bullseye) on a computer.

STEP 2: Install the basic Laravel environment with the following commands, Laravel 9 requires PHP 8, which at the time of writing is not available in Debian 11 repositories, so we will need to add the repositories from the guy who manages PHP for Debian anyway

sudo apt-get install ca-certificates apt-transport-https software-properties-common gnupg unzip curl
echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" | tee /etc/apt/sources.list.d/sury-php.list
wget -qO - https://packages.sury.org/php/apt.gpg | apt-key add -
apt-get update

Now, to the actual installation of the environment

apt install php8.1-fpm nginx
apt install php8.1-{dev,common,xml,tokenizer,zip,mysql,curl,mbstring,mysql,opcache,gd,intl,xsl,bcmath,imap,soap,readline,sqlite3,gmp}
apt install redis-server
apt-get install php8.1-redis
apt install mariadb-server mariadb-client

Now you need to secure redis !

Now remember to secure your mariaDB (MySQL) installation with the following command

mysql_secure_installation

Next, we need composer, the PHP dependency manager, to get it execute the following

curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
chmod +x /usr/local/bin/composer
composer --version

The last line above should show you what version of composer you have just installed

Now, remember to never run composer as root, but rather as a regular user, from this point on I am assuming you are running the terminal as a regular user.

I understand that Debian puts the web root in /var/www/html, but i usually like to create a separate directory called /var/vhosts and put all my web projects in it

mkdir /var/vhosts

Now, we need to create a sample project for our learning and training experience

cd /var/vhosts
composer create-project laravel/laravel laraveltestapp
chmod -R 0777 /var/vhosts/laravelapp/storage

Next, We would need to setup nginx to serve this website (“Would like to” actually, because there are alternatives, but I’m keeping it simple), here is an almost standard template for nginx, modify the host name and project name to match your project and preferences.

NGINX vhost config file (In my case /etc/nginx/sites-available/laraveltestapp)

server {
    listen 80;
    listen [::]:80;
    server_name ltest.net www.ltest.net;
    root /var/vhosts/laraveltestapp/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
#	fastcgi_pass unix:/var/run/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Surely for this to work, you will need to add the following two lines to the end of the /etc/hosts file

127.0.0.1 ltest.net
127.0.0.1 www.ltest.net

As soon as we have the file above, we need to create a symbolic link for it in the sites enabled directory

cd /etc/nginx/sites-enabled
ln -s /etc/nginx/sites-available/laraveltestapp

Suddenly, it works through nginx, you should see the welcome page (View) here

Now, to the development environment, how to setup your development environment can be found here

The following are things that are commonly used with Laravel. broken down by category

Environment tools and solutions

• PHP composer (Mandatory)
• Docker – Sail (Optional)

Relevant / Compatible server side software

• Apache2 (2.4) (Web Server)
• Nginx (Web Server)
• PHP (PHP8.x for Laravel 9)
• redis (Data structure store)
• memcache (in-memory, distributed cache)
• MeiliSearch (Search application)
• MailHog (email-testing tool with a fake SMTP server)
• Selinium (browser automation)
• MySQL/Mariadb (Database engine, most common)
• PostgreSQL (Database Engine, very powerful)

Development environments

• Microsoft Visual Studio Code (Free): built-in support for JavaScript, TypeScript and Node.js, extensions include PHP
• Sublime text (Not free, works but nags)
• Apache beans (Free)
• IntellijIDEA (Not free, one month trial)
• PHPStorm (Same as IntellijIDEA without the other languages support, Not Free, one month trial)

Database Management

• MAC: Sequel Pro and sequel ace
• ALL: PHPMyAdmin, mysql workbench (Oracle),
• sqlyog (Windows and Linux)

Other

• Node.js
• NPM (Installed with node.js): npm is a package manager for the JavaScript to work with front end stuff like node.js, react.js, bootstrap, tailwind CSS,
• Yarn (NPM alternative from Facebook)
• GIT: track changes in source code