Integrating AI code helpers into Visual Studio Code

In this guide, we’ll walk through setting up a local AI-powered coding assistant within Visual Studio Code (VS Code). By leveraging tools such as Ollama, CodeStral, and the Continue extension, we can enhance our development workflow, get intelligent code suggestions, and even automate parts of the coding process.

Installation:

Configuring the Environment:

• Step 1: Installing the Required Extensions

  1. Install CodeStral: Open the Extensions panel in VS Code, search for “CodeStral,” and click “Install.” This extension helps with managing your local AI models for code assistance.
  2. Configure CodeStral: Once installed, follow the extension’s configuration guide. You will need to install additional components, such as Ollama, which sets up a local server to run AI models.

  Step 2: Setting Up Ollama for Local AI Models

  • Install Ollama: Download and install Ollama, a server that will allow your system to host AI models locally. Once installed, you should be able to run the command Ollama run from your terminal.
  • Use Granite 8B Model: For code suggestions, use the Granite 8B model from IBM, which is optimized for code-related tasks. Note that loading the model may take some time as it’s about 5GB in size.

  Step 3: Working with the Continue Extension

  • Installing Continue: The Continue extension integrates with models running on Ollama and helps provide code assistance based on context.
  • Configure Privacy Settings: If you want to work offline or avoid telemetry, open your configuration file (config.json) and set the allow_telemetry parameter to false.
  • Configure Continue extension: Open the configuration settings in VS Code (Ctrl+P) and search for config.json. Add the following configuration:

  JSON

  {
    "models": [
      {
        "provider": "ollama",
        "name": "granite_8b",
        "model": "granite_8b"
      }
    ],
    "allowTelemetry": false
  } 

  • Using the Extension: You can highlight specific parts of your code, press Ctrl+L, and interact with the AI. For instance, if you highlight a few lines of code and ask, “How can I improve this code?” the AI will analyze the snippet and suggest improvements.
  • Accepting Code Changes: Once the AI provides suggestions, you can either accept the changes directly or refine them by asking follow-up questions.

  Step 4: Advanced Features

  • Context Detection: Continue supports context detection across files, repositories, and even web URLs. It can analyze your entire project and provide suggestions based on your overall code structure.
  • Working Offline with Privacy: If privacy is important, Continue can be configured to keep everything offline, unlike some extensions that send data for research purposes.

  
  

  Step 6: Hardware Considerations and Speed Optimization for Ollama
  

  • Optimizing GPU Usage: If you have multiple Nvidia GPUs, use the nvidia-smi -L command to identify the unique ID of each card. You can then set the CUDA_VISIBLE_DEVICES environment variable to ensure the AI model utilizes the right GPU for faster performance.
  • Check Logs: Periodically check Ollama’s logs to troubleshoot any issues, such as problems initializing the server or GPU.
  • Hardware Recommendations: If possible, use more powerful GPUs like RTX 4070 or 3090 for faster model performance, especially when running large models.

  Use Cases of Cursor editor, or Cody VSCode extension
  

  • Highlight the relevant code and use the AI tool to suggest changes. While having the code highlighted, by pressing Ctrl +K in Cursor you can even ask the assistant to rewrite the code, which will automatically update the code in place.
  • By using the option to scan the entire codebase from the chat menu option, the AI can add it to the context and suggest improvements.
  • You can switch between different AI models, such as Claude or Gemini, depending on your coding needs. Each model has strengths in areas like code generation or identifying code smells.
    
  • If the model generates incorrect suggestions, you can refine your query or switch models to get a better response. Always test and review changes before fully integrating them into your codebase.

  Useful videos:

  
  

  
  

  
  

  
  

  
  

  
  

  
  

How to perform file upload with Angular and NodeJS

Burnout or toxic culture ?

Outsourcing companies are hell to be in for an experienced programmer, because managers are being allowed to mistakes, which are covered, thus putting the rest of the workers in not favourable position.

So it is very important to keep track of your health and please do not try to compensate the toxic workplace effect with: letting it out to other people, overeating not sleeping etc.

Restorative is : running, and weight lifting.

From the herbs I recommend: thyme, glog and passiflora tea to help with the sleep as well as taking ashwagandga.

Take your time and enjoy!

Simple Laravel REST API

1) Create the user model in models/UserModel.php 

php artisan make:model User

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens, HasFactory, Notifiable;

/**

* The attributes that are mass assignable.

*

* @var array<int, string>

*/

protected $fillable = [

'name',

'email',

'password',

];

/**

* The attributes that should be hidden for serialization.

*

* @var array<int, string>

*/

protected $hidden = [

'password',

'remember_token',

];

/**

* The attributes that should be cast.

*

* @var array<string, string>

*/

protected $casts = [

'email_verified_at' => 'datetime',

];

}

 

2) 

create validation for the update requests:  php artisan make:request UserUpdateRequest

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UserUpdateRequest extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

*

* @return bool

*/

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

*

* @return array

*/

public function rules()

{

return [

'name'=>'required',

'email'=>'required|email',

// 'password'=>''

];

}

}

 and for the post request:

php artisan make:request UserPostRequest

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UserPostRequest extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

*

* @return bool

*/

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

*

* @return array

*/

public function rules()

{

return [

'name'=>'required',

'email'=>'required|email',

'password'=>'required'

];

}

}

 

 

create user controller based on the user model: php artisan make:controller UserController --model=User --resource

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

use App\Http\Requests\UserPostRequest;

use App\Http\Requests\UserUpdateRequest;

use App\Http\Resources\UserCollection;

use App\Http\Resources\UserResource;

use App\Models\User;

use Illuminate\Support\Facades\Hash;

class UserController extends Controller

{

public function index()

{

return new UserCollection(User::paginate(5));

}

public function store(UserPostRequest $request)

{

$userData = $request->validated();

$userData['password'] = Hash::make($userData['password']);

$userData['email_verified_at'] = now();

$user = User::forceCreate($userData);

return new UserResource($user);

}

public function show(User $user) //route model binding

{

return new UserResource($user);

}

public function update(User $user, UserUpdateRequest $request)

{

$user->update($request->validated());

}

public function destroy(User $user)

{

$user->delete();

return response()->noContent();

}

}

3) create resources/UserCollection:  php artisan make:resource UserCollection

to return user collection and user resource, when required by the user controller.

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class UserCollection extends ResourceCollection

{

/**

* Transform the resource collection into an array.

*

* @param \Illuminate\Http\Request $request

* @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable

*/

public function toArray($request)

{

return

[

'data'=>$this->collection,

'total_count'=> $this->total()

];

}

}

 

create UserResource: //expose which fields to be returned in the json response.

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource

{

/**

* Transform the resource into an array.

*

* @param \Illuminate\Http\Request $request

* @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable

*/

public function toArray($request)

{

return [

'id' => $this->id,

'name' => $this->name,

'email' => $this->email,

];

}

}

 

4) enable the requests to be performed, and add validation rules when posting and updating information, inside Requests/UserPostRequest.php

php artisan make:request UserPostRequest

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UserPostRequest extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

*

* @return bool

*/

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

*

* @return array

*/

public function rules()

{

return [

'name'=>'required',

'email'=>'required|email',

'password'=>'required'

];

}

}

for updating info:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UserUpdateRequest extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

*

* @return bool

*/

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

*

* @return array

*/

public function rules()

{

return [

'name'=>'required',

'email'=>'required|email',

];

}

}

 

6) add routes/api.php in order to redirect /users to the index() method of the UserController.

<?php

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

use App\Http\Resources\UserCollection;

use App\Models\User;

use App\Http\Controllers\UserController;

Route::apiResource('users', UserController::class);

Cheers!

WSL2 - how to make it accessible through outher machines

1) enable wildcard listening address of the app like 0.0.0.0

ss -anpst will show you the on which address/port the app is listening to.

2) use powershell to setup portproxy to forward all the outside requests to the windows machine to land in the WSL2 system:

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=localhost

listenport and listenaddress are on the Windows side.

connectport and connectaddress are on the WSL2 side.

(for a node app the listening port (connectport) is usually 3000, check you app listening port in 1)

verify with:  netsh interface portproxy show all

3) open port 3000 on the firewall with:

netsh advfirewall firewall add rule name="WSL2 app" dir=in action=allow protocol=TCP localport=3000

verify from the windows defender firewall, advanced settings, inbound rules.

Cheers !

NativeScript - IOS Xcode build and development settings

Instructions for MAC M1 instance:

1) Update your package.json with the latest tns-ios version!

2) run from /platforms directory: tns platform remove ios, tns platform install ios 

3) tns prepare ios, and follow the settings for:

Xcode 12

build:

and development(emulator):

Keep in mind to change for build the VALID_ARCHS to x86_64, and

for developments to arm64 respectively.

 

for Xcode 13 build just change the VALID_ARCHS to:

Install Laravel Sail on Windows

 

10 Steps to install Laravel Sail and start developing web applications under WSL:

1. from Turn Windows features on and off:

choose Windows subsystem for Linux (WSL) -> and restart the system

2. update the kernel of WSL from https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

3. set the default version to 2: wsl --set-default-version 2

4. install from Microsoft Store: Ubuntu

open Command prompt, and type ubuntu

5. Update the ubuntu system:

sudo apt-update && sudo apt dist-upgrade -y

6. Setup Docker: Install Docker Desktop

Go to Settings(icon) then check: General->Use the WSL2 based engine, as well as

Resources->WSL INTEGRATION-> enable integration with my default WSL distro, check also Ubuntu and restart the Docker Desktop app.

7. run inside Ubuntu: curl -a https://laravel.build/example-app | bash

8. start the containers with: ./vendor/bin/sail up

9. you can browse: 127.0.0.1:80

10. in another terminal of Ubunu run: code .

so that you can edit your files inside Visual Studio Code.

Cheers!