DEV Community: Nicolas

How to encode and upload a file to GitHub secrets

Nicolas — Mon, 07 Nov 2022 18:39:15 +0000

Hey everyone, So you want to encode a file and upload it to Github secrets ?

The first thing you need is to encrypt and encode your file We are going to do this with GnuPG as it is a universal crypto engine which can be used directly from a command line prompt, from shell scripts, or from other programs.

Step One - Installing GnuPG if you don't have it already

The first step is to make sure GnuPG is installed in your machine by running the following command

gpg --version

If GnuPG is already installed in your pc you should see an output similar to this :

I believe GnuPG is installed by default in linux and windows but if its not installed on your machine you can quickly visit GnuPG site and get the right binaries for your machine.

for Mac os users GnuPG is not installed by default. You will have to download the binaries, I prefer using homeBrew so if you have home brew run the following command to install it.

brew install gnupg

This will install gnupg. You can quickly verify the installation by running.

gpg --version

Step to 2 Encrypting and Encoding file

Open your terminal in a directory with the file you want to encode (It's not a must to open the terminal in the same directory I prefer this as the command will be short and sweet)
- Run the following command

gpg -c --armor <YOUR_FILE_NAME>

YOUR_FILE_NAME should the be fullName of the file you want to encrypt and encode

e.g

gpg -c --armor key.keystore

This will prompt you to give create a password to encrypt your file, enter a password (Don't forgot it).

In the same directory where you ran this command a new file is generated the file name will be by default the full file name with a .asc extension

e.g key.keystore.asc

Step 3 Uploading to Github secrets

Open the .asc file that was created in the previous step, copy everything in the file using cmd + a on (mac) ctrl + a (windows).
Visit Github, your repository then go to settings

On your bottom left menu Click on secrets -> actions

Create a new secret

Give your secret a name then paste the encoded text we copied early in the secret area

Do this for your encryption password as well.

Step 4 using the secret file

Thats it we done with uploading the file, but how do we decode and use the file ?

Thats easy, in your actions add the following step

- name: Setup keystore file
    run: |
    echo "${{ secrets.KEYSTORE_FILE }}" > key.keystore.asc
    gpg -d --passphrase "${{ secrets.KEY_STORE_GPG_PASSWORD }}" --batch key.keystore.asc > key.keystore

This will write the file into the pipeline's filesystem and now you can access this file in your build.

Enable file nesting for C# razor, Xaml and blazor pages in vscode

Nicolas — Tue, 01 Nov 2022 22:26:30 +0000

Step 1 - Open Visual Studio Code.
Step 2 - go to preference

step 3 - Search nesting

step 4 - Enable file nesting

step 5 - Add these patterns

Congrats you have enabled nesting for your razor and xaml code.

Recursions

Nicolas — Sat, 06 Aug 2022 21:20:00 +0000

Recursions and Recursive functions.

Okay, I have realized that this word and concept tends to through beginners off. Assuming you understand some basic coding and know what functions/ methods/ subroutines are.

Recursion

dictionary and academic definition:

noun [mass noun] Mathematics & Linguistics
The repeated application of a recursive procedure or definition.

My way of thinking of Recursion :

A way of solving a big problem that is made up of the same small portions. We solve this kind of complex problem by breaking it into small parts of itself, then repetitively applying the same solution to each portion until we have solved the whole problem.

Recursive functions are very useful at breaking down and repeating the same steps until you reach the answer. When creating a recursive function the function should contain the logic that will be repeated as you work towards the solution and it should also contain a condition that will tell it to stop repeating itself.

Here is a good example, imagine you were tasked with adding up the sum of 11 until 275 :

0 + 11 + 22 + 33 + 44 + ... + 275

Looking at the problem closely, We need to keep on adding 11 to the result of the previous addition as we work our way towards 275 :
0 + 11 = 11
11 + 11 = 22
22 + 11 = 33
33 + 11 = 44
44 + 11 = 55

In code, this can be solved in many ways :

The most crude of them all is you can simply hardcode 11 + 22 ... until you reach 275 and call it a day But this will be highly inefficient :

// Worst solution 
var answer = 11 + 22 + 33 + 44 + 55 + 66 + 77 + 88 + 99 + 110 + 121 + 132 + 143 + 154 + 165 + 176 + 187 + 198 + 209 + 220 + 231 + 242 + 253 + 264 + 275;
console.log(answer);
// result : 3575

There are many reasons why this is a bad idea:
i. You will waste a lot of time writing this
ii. Two it will be very hard to maintain - imagine after all your hard work, the requirements changed instead of terminating at 275 now you have to add up to 825 or allow users to add any number that leaves no remainder when divided by 11.

Iterative approach

The second way of solving this which I am not completely against and most people will use is the Iterative approach (using a loop to repeat the sum-up logic until you reach a terminating state which in this case is 275. This in code will look something like this.

function sumUp(max) {
    let answer = 0
    for (i = 0; i <= max; i += 11) {
        answer += i
    }
    return answer
}
console.log(sumUp(275))
// result : 3575

Recursive approach

The iterative approach is not completely bad it works. But then again we can write the same thing with less code using recursions.

function SumUp(max) {
    // Base case
    if (max == 0) return 0;

    // Logic in its simplest form
    return max + SumUp(max - 11); 
}
console.log(SumUp(275));
// result : 3575

Oh, I said we can rewrite it with less code right? Let's change the function into an arrow function and then use a ternary operator in the code

const SumUp = (max) => max == 0 ? 0 :  max + SumUp(max - 11);

We now have the same logic in a single line of code, although the single line benefit will not always be the case, using recursion in certain problems makes it a lot easier to solve them.

(For Geeks) How recursions work in computers is quite interesting we have a data structure called the call stack, it is just a stack that stores information about the active subroutines of a computer program and it is also known as the execution stack, When a recursive function is called the function repetitively unpacks itself into the call stack until it reaches the base case which means the output result is not calculated immediately or before all the unpacking is done Once it's done, the functions are executed from the last pushed in function down to the first (Remember stacks follow LIFO Last In First out).

In our sum up example above the evaluation or result from the execution of the last function to go in the call stack is passed back into the next function in the call stack until all the functions are executed.

Take note (!important)

If we don't specify a base case in our recursive function the function will infinitely call itself (stack up in the call stack) and that is a BIG problem because our computers only have finite memory, The computer will eventually run out of memory. It's very important to remember to add a terminating condition when dealing with recursive functions.

The best way to think of a recursive function is it is made up of two parts:

The logic that solves the problem in its simplest form (Repeated logic).
The Base Case (a terminating condition that will stop the recursive function from calling itself).

Before I finish this article I want to give you two more examples of where you might use recursions

Example 1: Calculating a factorial of a number:
Give a number e.g 5. The factorial of 5 will be the result of 5 x 4 x 3 x 2 x 1. This can be written using recursions :

function factorial(number){
        // Base case
    if(number == 1){
      return number;
    }

        // Repeated steps
    Return number * factorial(number-1); 
}

The second example is when you are working with Binary Trees, it's much easier to traverse with recursions.

E.g Let's say we are tasked with implementing a function that will print out all the values it would look like this:

//.... rest of the code
    print() {
        const printRecursively = (node) => {
            // Base case
            if (node == null) {
                return;
            }
           // Repeated Steps
            printRecursively(node.left);
            console.log(node.value);
            printRecursively(node.right);
        }
        printRecursively(this.root);
    }

That's it from me I hope you enjoy this read as I enjoyed writing it cheers.

Bye old ways, Hello MVVM Community Toolkit

Nicolas — Wed, 15 Jun 2022 14:19:00 +0000

If you are a .NET Dev , have worked with Xamarin - MAUI , WPF etc... and you also use Model-View-ViewModel (MVVM) pattern in your apps you probably know the frustration of working with Observable ViewModels and are very familiar with this code :

    [Preserve(AllMembers = true)]
    [DataContract]
    public class BaseViewModel : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;

        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }


    }

This is something we all got used to some decide to go for external libraries but It feels like swapping one form of complexity with another.

I am back and I have Great News, after this article You will never have to manually deal with the code above ever again Thanks to the MVVM Community Toolkit.

You can read more about the MVVM Toolkit library here

Today I am just going to show you how to get started with the automatic Command and Property Generator.

Is it complicated?

No, one of the reasons I love this library is because it has no learning curve, just plug and play.

How does it work?

It's pretty straight forward ,if you have been around long enough you might know "Fody OnPropertyChanged " this library was and still is great but with fody you still had to create properties and commands yourself.

This is were the MVVM Toolkit gets interesting behind the scene e.g the new MVVM Toolkit preview version uses C# source code generators to create a partial class of your view model, this generated class will implement INotifyPropertyChanged and contain the properties and commands you want to generator and in addition the generated properties will call or invoke onPropertyChange when ever new values are set.

The final generated source code isn't that much of magic or different from they way you would traditionally do it, this library just increases your productivity by writing half of your code for you 😁😎.

for Additional information about this mvvm toolkit preview you can also check this blog

Alright enough talking lets jump into the code

Lets start with making your view Model Observable

Create your View Model class.
Make it partial .
Make your View Model Inherit from ObservableObject, this is a class found in the mvvm community toolkit library.

your ViewModel should look like this :

public partial class MyViewModel : ObservableObject
{

}

Next if you want a property in ViewModel to be Observable

Community Toolkit generates Properties and Commands by Convention.You just have to create a instance variable that follow C# conventions (class variables are camel cased and or optionally prefixed with underscore _ )
e.g

 private List<Bot> bots;

private List<Bot> _bots;

Then once you done creating your variable. Mark it as an ObservableProperty with the ObservablePropertyAttribute

e.g

[ObservableProperty]
private List<Bot> bots;

Thats it The library will automatically generate a public Observable property of this field. The code is immediately generated so you can immediately access the Property e.g in the class you can call e.g.

// accessing the property

var firstBotName = Bots[0].Name;

//rest of your code

That's Soo Cool right ?? Yes. You will be able to Bind it to your XAML the same way you use to e.g :

<ListView ItemSource="{Binding Bots}">
// Additional logic.....

There are additional attributes you can use to decorate your property with additional behaviour you can read about them here

This is not where all the fun ends. In a Traditional View Model you would have to create Commands then create actions that will be called by the commands when they are executed. This complicates our ViewModel. The toolkit provides a way to automatically generate your commands for you , you only have focus on writing your actions.

Example Lets say we want to create a command to call an action to do something .

Firstly we need to create our action method

public void DoSomething()
{

{

Next to automatically create a Command using Mvvm Toolkit, we are going to have to decorate our method with [RelayCommand] attribute (this attribute use to be called ICommand in the toolkit and was renamed to RelayCommand in preview 4 ). Our class will now look like this

[RelayCommand]
public void DoSomething()
{

{

Remember Community Toolkit generates Properties and Commands by Convention so When we create a method called DoSomething our Generated Command will be DoSomethingCommand

If our Method is async and we suffixed it with Async e.g DoSomethingAsync. The Async Suffix will be disregarded when the command is generated and the command will be generated as DoSomethingCommand with this in mind when you want to bind you command to your UI Control it would look something like this :

<Button ... Command="{Binding DoSomethingCommand}"/>

Your action can take in arguments as well the source code generated will take that into consideration.

Now our ViewModels will look cleaner, simple and easy to work with.
This is so great ,It's still in preview but it's already making waves.

Register Services automatically in MAUI

Nicolas — Mon, 13 Jun 2022 11:25:00 +0000

Using Reflections to Automate registering your MAUI viewModels and pages to the dependency Service container.

It's been a while now since the MAUI rewrite started and I am happy that MAUI GA has finally been released.

I like all the new features they have implemented out of the box to help speed up the developer cycle when working with MAUI.

One of the things which I do and I really find annoying with Xamarin was setting up a dependency container ,and having to bootstrap stuff ,it was just daunting but now MAUI provides a built in Dependency container, that looks and works just like in ASPNET.CORE ,great right?! But now to be able to inject the services you have to register everything including the pages you create manually ,this repetitive labour was starting to kill my excitement Dev exp and my MAUIProgram Class was getting bloated.
Here is a quick example of how your typical MAUI program class would look like.

builder.Services.AddSingleton<ISomeProductService,SomeProductService>();
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<ProductsPage>();
builder.Services.AddSingleton<ProductDetailPage>();
builder.Services.AddSingleton<AboutPage>();
builder.Services.AddSingleton<AboutPageViewModel>();
builder.Services.AddSingleton<ProductDetailPageViewModel>();
builder.Services.AddSingleton<ProductsPageViewModel>();
builder.Services.AddSingleton<HomePageViewModel>();

And this is just a small example.The processes of going back and fourth registering theses classes manually is frustrating.

Luckily The C# Guru is here and I have a quick trick ancient trick that involves dynamic programming in C# that we are going to use to automate this process. Using reflections we
are going to scan and collect all the classes and pages we want to register to our Dependency container then register them all.

*Lets get started *

Firstly we are going to create an interface that we will use as a signature for a class we want to register with the singleton scope in our container.

We are going to call this interface IsingletonDependency, any service that we want to register as a singleton service will have to implement this interface.

The interface will look like this:

    public interface ISingletonDependency
    {
    }

Secondly we are going to add an extension method to attach additional behaviour to MAUIBuilder.

This extension method will encapsulate all the dynamic programming logic and this is the only method that will be called to register our services in the MAUIProgram.cs class.

We are going to create a static class called MauiAppBuilderExtensions that looks like this :

    public static class MauiAppBuilderExtensions
    {
        public static void ConfigureServices(this MauiAppBuilder builder)
        {
            RegisterSingletonServices(builder);
        }


    }

next in the same class we are going to create a static method called RegisterSingletonServices this method will scan the assembly and collect all the classes that implement IsingletonDependency then its going to register each class type to the dependency container.

this method will like this :

        private static void RegisterSingletonServices(MauiAppBuilder builder)
        {
            var services = AppDomain.CurrentDomain.GetAssemblies().SelectMany(x => x.GetTypes())
                            .Where(x => typeof(ISingletonDependency).IsAssignableFrom(x) && !x.IsInterface && !x.IsAbstract).ToList();

            foreach (var service in services)
                builder.Services.AddSingleton(service);
        }

The full extension looks like this :

    public static class MauiAppBuilderExtensions
    {
        public static void ConfigureServices(this MauiAppBuilder builder)
        {
            RegisterSingletonServices(builder);
        }

        private static void RegisterSingletonServices(MauiAppBuilder builder)
        {
            var services = AppDomain.CurrentDomain.GetAssemblies().SelectMany(x => x.GetTypes())
                            .Where(x => typeof(ISingletonDependency).IsAssignableFrom(x) && !x.IsInterface && !x.IsAbstract).ToList();

            foreach (var service in services)
                builder.Services.AddSingleton(service);
        }
    }

That's it we almost done.

The next step is to call this extension method in the MAUI Program class.

builder.ConfigureServices();

The full MAUIProgram class will now look like this :

    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        builder.ConfigureServices();

        return builder.Build();
    }

Its Very Clean right ?!!! Yes it is.

Now you might be probably asking yourself how the viewModel class will look like, it would look like this :

//View model class example
   public partial class LoginPageViewModel :  ISingletonDependency
    {

//Page code behind class example.
    public partial class LoginPage : ContentPage,ISingletonDependency

When ever you want to register a class in the container as a singleton you just implement ISingletonDependency interface.

Perfomance ??

I am not an expert in reflections and benchmarking stuff, but well since we using reflections I assume this will obviously have neglect-able startup ms penalty since we have to scan the assembly.

Cheers guys , I hope this will come handy in your projects. I would love to hear you thoughts too..

Composite Design Pattern

Nicolas — Sat, 12 Feb 2022 01:58:00 +0000

Let's talk about the composite pattern, we use this pattern in situation where we want to create a hierarchy of items. This pattern helps us create components that can be grouped or ungrouped to any depth without limitations a good example is a file manager were you can create folders to group files and subfolders.

In this article we are going to look at creating File manager , we won't be using an actual application but I will keep it
as simple as possible by using POCO objects on a console application.

In this session I will be using C# but this can be applied with most languages.

Let's get Started

Creating your solution

Assuming you have .NET SDKs installed on your machine.
Create a new console application witht the following command

dotnet new console -n CompositePattern -o CompositePatterns/src/

Open your project with Visual Studio Code

Before we continue we should understand few concepts like Programming to an interfaces - Coding to interfaces or design by contract is a technique by which developers can expose certain methods of an object to other objects in the system.

In this Pattern we create an interface that will form a contract of all the required features of a groupable component,we than move on to create a leaf class that is just a blueprint class of a component that implements our contract, finally we create a class that represents a group component that is going to be used to group other components ,this group component also has to implement the contract ,this will allow us to groups in groups.

Here is a UML of what a composite pattern looks like :

Creating Our interface

create a new IComponent interface with the following Code :

namespace CompositePattern;
public interface IComponent
{
    string Name { get; set; }
    void Render();
}

Creating our Leaf

Next we create a leaf that implements our interface,that we are going to call a File, your code should look like this code below :

namespace CompositePattern;
public class File : IComponent
{
    public string Name { get; set; }
    public File(string name) => Name = name;
    public void Render() => Console.WriteLine($"{Name} Component Rendered");
}

in this example our component will get its name from the constructor and on the render method it will simply console log the message " Rendered".

Creating the grouping Component

Next we create a component that will be used to group components and render them all together, we will call this component Folder Component, again I am just using simply classes to showcase the concept , Your Code should look like this :

namespace CompositePattern;
public class Folder : IComponent
{
    public string Name { get; set; }
    public List<IComponent> Children { get; set; } = new();

    public Folder(string name) => Name = name;
    public void Add(IComponent component) => Children.Add(component);
    public void Remove(IComponent component) => Children.Remove(component);
    public void Render()
    {
        Console.WriteLine($"{Name} Rendered");
        Children.ForEach(c => c.Render());
    }
}

In our example our Folder Component implements IComponent ,this will give it the capability to nest groups and files within groups, the Folder also has a few special functions like Add and Remove , this will be used to add more components to the Folder and Remove Components from the Folder,The magic happens on the implementation of the render function, the Folder component iterates over all its children calling the render function of each Component, This is a very powerful technic.

Finally for our Program we are going to create a few files than folders :

using System;
using CompositePattern;

var musicFolder = new Folder("Music Folder");

musicFolder.Add(new File("ghost.mp3"));
musicFolder.Add(new File("doit.mp3"));
musicFolder.Add(new File("smple.mp3"));

var picturesFolder = new Folder("Pictures");
picturesFolder.Add(new File("banner.png"));
picturesFolder.Add(new File("cover.jpg"));

var homeFolder = new Folder("Home Folder");
homeFolder.Add(musicFolder);
homeFolder.Add(picturesFolder);


homeFolder.Render();

Console.ReadLine();

🥳🥳🥳 We just learned how to use the Composite Pattern.

How to use ThreeJS in React & NextJS

Nicolas — Thu, 03 Feb 2022 19:04:00 +0000

First of all I want to say... "Yes , I know That demotivating feeling you have as a React or NextJS developer when you try to make 3JS (threeJS) play well with react".

Assuming you are a javaScript programmer with background in React or NextJS and are exploring ThreeJS, but all you want is to create declarative and reusable 3D components.Well now you can 😁😁😁!! This is all thanks to this library called react-three/fiber.

what is it? It is react library that expresses threeJS in JSX and this allows you to create scenes declaratively with I quote "re-usable, self-contained components that react to state, are readily interactive and can tap into React's ecosystem". If you want to learn more about it you can just simple jump into their documentation, well after this article of course.

Let's get started

Start your react or nextJS project, in this tutorial I am going to be using nextJS, but you can follow along with React as well.

step 1 - Start a new project :

npx create-next-app@latest

step 2 - Install threejs and react-three/fiber :

Navigate to your project root folder
run : npm install three @react-three/fiber

step 3 - Lets Create our scene :

Before you can create any scene you first have to think of all the components that will exist in your scene, In our scene we are going to create a floor ,Light bulb , a box on top of the floor , our users should be able to interact with the the scene and our box should be movable.

Creating a Scene

In our index Page let's create a scene wrapper ,it's just going to be a simple div JSX element that will take up the document's view height and width your code should look like this :

// index.jsx
import css from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={css.scene}>

    </div>
  );
}

//Home.module.css
.scene{
    width:100vw;
    height:100vh;
}

.canvas{
    background: #000;
}

To get rid of the default margin being applied to the body in the document you can add the following css styles to the global.css file

body{
    margin: 0;
}

Adding the Canvas

The Next step is, just like in threejs or any drawing tool, We need a canvas to draw everything in. react-three/fiber provides a very special Canvas component, that you can import into your scene you code should look like this :

import { Canvas } from "@react-three/fiber";
import css from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >

      </Canvas>
    </div>
  );
}

In the code above we. imported our react fiber canvas, and moved the default camera from its default position.

Creating a Floor Component

The next step we want to do is to create a floor component. In our project's root directory create a folder called components and create a new function component called Floor.jsx in the folder. The floor component in our case will be a made up of a box mesh object and just like in threejs a mesh component is made up of a Geometry and a Mesh material (you can choose which material you want to use in threejs), our floor will be made up of a Box buffer geometry and the material we are going to use is the mesh physical material. The box buffer geometry will get it's constructor arguments through the args JSX property (note : we need to pass-in constructor arguments as in an array).
Finally Your floor component will look like this.

//components/Floor.jsx

import React from "react";

function Floor(props) {
  return (
    <mesh {...props} recieveShadow>
      <boxBufferGeometry args={[20,1,10]} />
      <meshPhysicalMaterial color='white' />
    </mesh>
  );
}

export default Floor;

Then we need to import this floor into our canvas (Just like in react).

you index page should look like like this :

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Floor from "../components/Floor";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
          <Floor/>
      </Canvas>
    </div>
  );
}

Adding Ambient Lighting

as soon as you run you server you notice that your scene is still black. thats because we used a physicalMaterial material in our floor and the physical material is affected by light (therefor it requires light to be visible) and our scene does not have any light to light up.

So the next step we are going to do is add lighting. Our first light will be the ambient light to make our objects visible (This illuminates all objects in the scene equally so we will not crank up up the intensity) .

To add the light, we need to add the
<ambientLight color='white' intensity={0.3}/> component to our scene (ambientLight is a Threejs object ).
The component is self explanatory we just added a white ambient light with an intensity set to 0.3.
your index page should look like this :

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Floor from "../components/Floor";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
        <ambientLight color={"white"} intensity={0.3} />
        <Floor position={[0, -1, 0]} />
      </Canvas>
    </div>
  );
}

Creating a Box

Next we need to add the famous box you see in every threeJS tutorial out there.

To do this, just like the floor we are going to add a new component called Box.jsx with the following code :

import React from "react";

function Box(props) {
  return (
    <mesh {...props} recieveShadow={true} castShadow>
      <boxBufferGeometry />
      <meshPhysicalMaterial  color={"white"} />
    </mesh>
  );
}
export default Box;

Once we done creating our box we can add it to our scene, you might have noticed that we are passing our components props into our mesh ,the reason I am doing this is to make my component more reusable, This will allow us to have multiple boxes 📦 positioned in different areas or with different dimensions when we want that.

More Lighting - Adding point Light

Once you add the box to the canvas. We are now going to improve the lighting again. This time we are going to create a bulb 💡. To do this we are going to create another new component Called LightBulb.jsx in the components folder, the component will look like this :

import React from "react";

function LightBulb(props) {
  return (
    <mesh {...props} >
      <pointLight castShadow />
      <sphereBufferGeometry args={[0.2, 30, 10]} />
      <meshPhongMaterial emissive={"yellow"}  />
    </mesh>
  );
}

export default LightBulb;

you going to need to position it a little higher in the scene, your index page (scene) should look like like this :

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Box from "../components/Box";
import LightBulb from "../components/Light";
import Floor from "../components/Floor";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
          <ambientLight color={"white"} intensity={0.2} />
          <LightBulb position={[0, 3, 0]} />
          <Box rotateX={3} rotateY={0.2} />
          <Floor position={[0, -1, 0]} />
      </Canvas>
    </div>
  );
}

Interacting with our Scene - Adding Orbit Controls

We are doing great, but the problem we have is that we cannot interact with our scene , we cannot not move around the scene's orbit. To be able to do this, we are going to need to add OrbitControls to our scene.

Let's get started, create a new Component in our components folder called OrbitControls.jsx

The component component should look like this :

// components/OrbitControls.jsx

import React from "react";
import { extend, useThree } from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

extend({ OrbitControls });

function Controls(props) {
  const { camera, gl } = useThree();
  return <orbitControls attach={"orbitControls"}  args={[camera, gl.domElement]} />;
}

export default Controls;

Just like in threeJS OrbitControls need a reference to the camera and the renderers domElement, we get the scene's camera and renderer by using the useThree() hook which react-fiber provides, when working with controls in react fiber we need to first call the extend({OrbitControls}) function, this extends/adds additional features to react fiber in this case OrbitControls. Then the we need to add orbitControls component and use the attach property in it to basically attach our OrbitControls to the scene (this will allow us to access the orbit Controls in any component), this is going to be very handy when we want to make our box draggable, we will need to disable orbit controls when we drag an the box in our scene.

Once we done we need to import our OrbitControls to our scene... you index page should look like this

//index.jsx

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Box from "../components/Box";
import OrbitControls from "../components/OrbitControls";
import Light from "../components/Light";
import Floor from "../components/Floor";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
        <ambientLight color={"white"} intensity={0.2} />
        <Light position={[0, 3, 0]} />
          <Box rotateX={3} rotateY={0.2} />
        <OrbitControls />
        <Floor position={[0, -1, 0]} />
      </Canvas>
    </div>
  );
}

If adding controls like this seems dificult ,I have great news 📰 the creators of react three fiber were very to kind to provide us with other useful libraries we which can extend react three fiber one of which is drei ... Drei enables you to add Controls easily by abstracting some of the details we had to implement, In this article I won't talk about using Drei you can have a look at it later.

Adding Drag Controls

We are almost there, we can move the main camera around our scene using orbitControls but sill cannot move our box. To do this we need to make our box draggable.

We are going to create a new component called Draggable.jsx that will look like this :

import React, { useEffect, useRef, useState } from "react";
import { extend, useThree } from "@react-three/fiber";
import { DragControls } from "three/examples/jsm/controls/DragControls";

extend({ DragControls });

function Draggable(props) {
  const groupRef = useRef();
  const controlsRef = useRef();
  const [objects, setObjects] = useState();
  const { camera, gl, scene } = useThree();
  useEffect(() => {
    setObjects(groupRef.current.children);
  }, [groupRef]);

  useEffect(() => {
    controlsRef.current.addEventListener("hoveron", () => {
      scene.orbitControls.enabled = false;
    });
    controlsRef.current.addEventListener("hoveroff", () => {
      scene.orbitControls.enabled = true;
    });
  }, [objects]);
  return (
    <group ref={groupRef}>
      <dragControls ref={controlsRef} args={[objects, camera, gl.domElement]} />
      {props.children}
    </group>
  );
}

export default Draggable;

You will notice that the steps to working with controls are essentially the same, just like before our drag controls need a reference to the camera, renderer's dom element and in this case the children *3D objects * it's going to apply dragging capabilities to, since the children we pass in react props are react components, we are going to need to wrap in the react prop children with a group JSX element that fiber provides, then create a reference to this group and extract the 3D object children from this group. We used a useEffect because we need to do this only when the groupRef has been set or changed. Lastly in the second use Effect we disable the Orbit controls when you hover over a draggable item and re-enable it when you hover away, forgive me for not removing the eventListeners when the component unmounts you should do that as good practice to avoid memory leaks.

Then we need to wrap our box with this draggable component. in our Index Page, our code should look like this :

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Box from "../components/Box";
import OrbitControls from "../components/OrbitControls";
import Light from "../components/Light";
import Floor from "../components/Floor";
import Draggable from "../components/Draggable";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
        <ambientLight color={"white"} intensity={0.2} />
        <Light position={[0, 3, 0]} />
        <Draggable>
            <Box rotateX={3} rotateY={0.2} />
        </Draggable>
        <OrbitControls />
        <Floor position={[0, -1, 0]} />
      </Canvas>
    </div>
  );
}

Adding Texture to materials

AS a bonus let's add a texture map to our mesh.
In our Box components we need to import import { useLoader } from "@react-three/fiber";
and import { TextureLoader } from "three";
The first parameter of useLoader takes in a loader, in this example we are using a TextureLoader, and the second parameter takes in the path to the texture we want to load. We then create a textureMap and load it into our material our code will look like this :

import React from "react";
import { useLoader } from "@react-three/fiber";
import { TextureLoader } from "three";

function Box(props) {
  const texture = useLoader(TextureLoader, "/texture.jpg");
  return (
    <mesh {...props} recieveShadow castShadow>
      <boxBufferGeometry />
      <meshPhysicalMaterial map={texture} color={"white"} />
    </mesh>
  );
}

export default Box;

Since we adding a texture which is an external resource file that needs to be loaded, we need to wrap our box component with Suspense so that the component is only rendered when the texture file loading is complete.

our indexPage will look like this:

import css from "../styles/Home.module.css";
import { Canvas } from "@react-three/fiber";
import Box from "../components/Box";
import OrbitControls from "../components/OrbitControls";
import Light from "../components/Light";
import Floor from "../components/Floor";
import Draggable from "../components/Draggable";
import {Suspense} from "react";

export default function Home() {
  return (
    <div className={css.scene}>
      <Canvas
        shadows
        className={css.canvas}
        camera={{
          position: [-6, 7, 7],
        }}
      >
        <ambientLight color={"white"} intensity={0.2} />
        <Light position={[0, 3, 0]} />
        <Draggable>
        <Suspense fallback={null}>
            <Box rotateX={3} rotateY={0.2} />
        </Suspense>
        </Draggable>
        <OrbitControls />
        <Floor position={[0, -1, 0]} />
      </Canvas>
    </div>
  );
}

That's it We just created a scene in a React/NextJS project using react fiber, there is a lot to explorer. What I love about react fiber is that it's easy and intuitive to work with but what I hope can be improved is it’s documentation (maybe you will be up for this tasks after reading and playing around with it long enough).

I hope you enjoyed the article ,and I would like to hear your comments.

Memento Pattern

Nicolas — Fri, 26 Nov 2021 10:51:00 +0000

Have you ever wondered how you can overcome the undo problem in your applications. Today I want us to talk about one of the most common ways to resolve this this programming problem.

Lets get started, so imagine we have a client and our Client has given us a task to create a text editor for the his/her team.We have been told that that the text editor should allow the use to undo the changes they do as they use the text editor.

here are some of the requirements for the text editor:

Users Should be able to change text font
Users should be able to change the text size
As users add text they should be able to undo text changes,font changes and text size changes.

Now as a user these are just basic requirements, if you are a developer who has never came across a similar problem,how will you solve this?

Today I will introduce you to a common pattern for solving this problem. The name of the pattern we are going to talk about today is the Memento Pattern, The memento pattern is a software design pattern that provides the ability to restore objects to their previous state. The memento pattern is implemented with three objects : the originator, a caretaker and a memento. The originator is some object that has an internal state (in our example this will be the Text Editor),The memento (in our case the Restore Point) object is special object in that it carries the state of the originator and is not suppose to be modified by the the cartaker (Think of it as backup Disk of a text editor state,when the state of the text editor is modifed a backup disk with the text editor state is created).

The caretaker (in our case a view model) is an object that interacts or does changes to the originator and it will also be capable of requesting undo or revert actions. When our user types characters the caretaker first asks the text editor (originator) for a new memento object with the current text editors state, that will be pushed to a stack of mementos (restore points) , then our care taker sets the newly typed character into the text editor state ,this same process continues as the user types in more characters. To roll back to the state before the operation, the caretaker returns the last memento object to pushed into the stack to the originator(text editor). although this is simple straight and straight forward ,it is a very powerful functionality although it has drowbacks as we keep on storeing states objects in memory,this will take up more memory the more the user types, the solution would to serialise the states into a file, but by doing so you should keep in mind that IO operations to files are slower than using ram memory, so all these decisions will be based on what you want to do and how important it is for you to preseverse state changes.

lets get into the code. We are going to be using C#, (Remember this is not language specific ,this can be implemented in almost any general purpose programming language i can think of).

First lets create our console application with the following commands:

lets create a solution file

dotnet new sln -n NotIt -o ./NoteIt

Lets create our Console application

dotnet new console -n Noteit.Cli -o ./NoteIt/src/Cli/

Lets Add it to the solution

dotnet sln add ./NoteIt/src/Cli/NoteIt.Cli.csproj

(Note ) Step 1 and 3 are really necessary but as good practice for organising .Net projects, they should be grouped in solution folder and file.

Next navigate to the root folder of our NoteIt application and open visual studio code or any Text Editor you prefer, visual studio code is what I prefer.

Today we are just going to focus on the Cli project so we are going write everything in the cli project.

Firstly we need a Text Editor class :

namespace NoteIt.Cli
{
    public struct TextEditor
    {
        public TextEditor(int fontSize, string fontFamily)
        {
            FontSize = fontSize;
            FontFamily = fontFamily;
        }
        public string Content { get; set; } = string.Empty;
        public int FontSize { get; set; } = 12 ;
        public string FontFamily { get; set; } = string.Empty;
    }
}

Now we have an originator we need a memento, our memento should pass in a textEditor in the constructor.Once ourr state has been presevered No one is supposed to be able to modify this backup point, to make sure this does not happen we dnt create a setter for our state.

namespace NoteIt.Cli
{
    /// <summary>
    /// RestorePoint is a memento class for our TextEditor
    /// </summary>
    public class RestorePoint
    {
        public TextEditor State { get; }
        public RestorePoint(TextEditor editorState)
        {
            State = new TextEditor
            {
                Title = editorState.Title,
                Content = editorState.Content
            };
        }
    }
}

Now that we have a Memento lets update out Editor to look like this :

namespace NoteIt.Cli.Editor
{

    public struct TextEditor
    {
        public TextEditor(int fontSize, string fontFamily)
        {
            FontSize = fontSize;
            FontFamily = fontFamily;
        }

        public string Content { get; set; } = string.Empty;
        public int FontSize { get; set; } = 12;
        public string FontFamily { get; set; } = string.Empty;

        public void Restore(RestorePoint restorePoint)
        {
            this = restorePoint.State;
        }
        public RestorePoint CreateRestorePoint()
        {
            return new RestorePoint(this);
        }
    }
}

Our TextEditor is now able to create a restore point and its also able to Restore its self to a given restore point.

We almost done now we just need to create our Caretaker

namespace NoteIt.Cli.Editor
{
    //Caretaker
    public class EditorViewModel
    {
        private Stack<RestorePoint> RestorePoints { get; set; } = new();
        private TextEditor textEditor = new(fontSize: 12, fontFamily: "Ubuntu mono");

        private void CreateRestorePoint()
        {
            RestorePoints.Push(textEditor.CreateRestorePoint());
        }

        public string Content
        {
            get => textEditor.Content;
            set
            {
                CreateRestorePoint();
                textEditor.Content = value;
            }
        }

        public string FontFamily
        {
            get => textEditor.FontFamily;
            set
            {
                CreateRestorePoint();
                textEditor.FontFamily = value;
            }
        }

        public int FontSize
        {
            get => textEditor.FontSize; set
            {
                CreateRestorePoint();
                textEditor.FontSize = value;
            }
        }
        public void Undo()
        {
            //Check if the is a restore point then restore to it.
            if (RestorePoints.Count > 1)
            {
                textEditor.Restore(RestorePoints.Pop());
            }
        }
    }
}

That's it , now we can create simulation of a user interacting with our Text editor.On the Program.cs file add the following code :

using NoteIt.Cli.Editor;
using static System.Console;

EditorViewModel viewModel = new();
string? textUserWillType = "Hello";


static void SimulateUserPause() => Thread.Sleep(500);

// simulator user interaction 
for (int x = 0; x < textUserWillType.Length; x++)
{
    SimulateUserPause();
    //add newly typed character to editor
    viewModel.Content = textUserWillType[..x];
    //display new content to screen
    WriteLine(viewModel.Content);
}


SimulateUserPause();
//Change Font Size  
viewModel.FontSize = 18;
WriteLine($"Font Size : {viewModel.FontSize}");
SimulateUserPause();
viewModel.FontSize = 35;
WriteLine($"Font Size : {viewModel.FontSize}");
//Undo two previous changes
viewModel.Undo();
SimulateUserPause();
WriteLine($"Font Size : {viewModel.FontSize}");
viewModel.Undo();
WriteLine($"Font Size : {viewModel.FontSize}");

//Change Font 
SimulateUserPause();
viewModel.FontFamily = "Lato";
WriteLine($"Font Family changed to {viewModel.FontFamily}");
//undo font change
viewModel.Undo();
WriteLine($"Font Family change undone, current font : {viewModel.FontFamily}");

//simulate Undo clicked 3 times
for (int i = 0; i < 3; i++)
{
    viewModel.Undo();
    WriteLine(viewModel.Content);
}

That's it we have learned how to implement undo Memento pattern, Now the Challenge I have for you is to take this even further by ,thinking and implementing Redo ,then also persist your changes to file storage.

The source code for this article can be found at https://github.com/hnicolus/NoteIt-memento-Pattern-Demo