Mobile Development

This is just a summary of the tools you may or may not use for mobile development

Cross Platform

  • Dart-Flutter
  • React Native
  • Kotlin Multiplatform (& compose-multiplatform ;))
  • Ionic
  • .NET MAUI, (Successor to Xamarin.Forms), develop in C#
  • NativeScript: Build mobile apps with Angular, Vue.js, etc !

Android

  • Android Studio
    Kotlin / Java
  • Jetpack Compose : composable functions – define your app’s UI programmatically

iOS

  • Xcode

My flutter notes

The reason I am interested in flutter is that it may just be the best option to accompany my RUST programs and fit them with relatively efficient front ends ! again, potentially the best fit FOR ME AND MY RUST PROJECT IDEAS

Different look depending on platform

Normally, you would write code that looks like this

if (Platform.isAndroid) {
return ElevatedButton(onPressed: onPressed, child: child);
} else if (Platform.isIOS) {
return CupertinoButton.filled(onPressed: onPressed, child: child);
}

with flutter_platform_widgets, this could simply look like this

return PlatformElevatedButton(onPressed: onPressed, child: child);

How cool is that

VSCODE on Android and iOS

Final Result

Well, Yes, my own VSCODE with all my plugins etc… basically the same instance that runs on my computer on an Android or iOS device BROWSER ! I put this here at the beginning so that if this is not what you need, you don’t have to waste your time, but before you move on, think about it as an alternative since it works remotely too 😉 , if not, then move on… don’t waste your time here

What for

For my back pain, I want to be able to change my setting every few hours, and this enables me (With the help of a wireless mouse and keyboard” to use my android TV box, my ipad, and other screens around the house to keep working

Summary

So, I will get to the details, but in summary, you can install Visual Studio Code Server on the same machine that has your Visual Studio Code installed, then you open your VSCODE with a browser

It turned out that someone has already done this tutorial (Here), but i am keeping this post so that you can see the summary before you have to se the video

Wireless android studio

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

1- Install RUST with VSCODE

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 (Right click, open terminal, then run the command ” code . “) the dot means current directory

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

JavaScript – Tools for the trip

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

Learning tailwind (Getting started)

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

Can I use Clockwork with codeigniter 3 ?

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 ?

Using both Tailwind and Bootstrap 5 in Laravel 9

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