DEV Community: John Nyingi

How I handled real-time Google Font injection in a Template Designer using ReactJS

John Nyingi — Tue, 17 Mar 2026 10:02:19 +0000

For the past few days, I have been building a template designer using ReactJS. One of the features I really wanted was to be able to change the font style dynamically.

For this project, I have been using ShadCN, Tailwind, and ReactJS with Typescript. Of course, with setting up the Google fonts, I had to pick a few. I went for opensans, inter, nunito and spectral. I added the below html tags to my index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Spectral:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">

I also needed to update the tailwind.config.json file to include the new fonts. Inside the themes and extend tags, I added fontFamily.

theme: {
    extend: {
            fontFamily: {
                spectral : ['Spectral', 'serif'],
                inter : ['Inter', 'sans-serif'],
                nunito : ['Nunito', 'sans-serif'],
                opensans : ['"Open Sans"', 'sans-serif'],
            },
    },
},

Now I can include the font styles inside my schema

export interface MorphData {
    imageUrl?: string;
    name: string;
    description: string;
    email?: string;
    mobileno?: string;
    theme?: {
        titleFont: string;
        contentFont: string;
    }
}

Next, I update my template component to support these new fonts. This is where my custom fonts will be applied. In my <h1> and <p> tags, I update the className property with the following code. (I used null coalescing to update the fonts accordingly)

 ${data?.theme?.contentFont ?? "font-opensans"}

Lastly, I updated my edit form to include the Select component from ShadCN, which will allow a user to choose a font style of their choice.

 <Field>
    <Select onValueChange={(e) => {
        handleOnChange({...form.getValues(), theme: {...form.getValues().theme, titleFont: e}} as CreateMorphData)
    }}>
        <SelectTrigger className="w-full max-w-48">
            <SelectValue placeholder="Title Font Style"/>
        </SelectTrigger>
        <SelectContent>
            <SelectItem value="font-opensans">Open Sans</SelectItem>
            <SelectItem value="font-inter">Inter</SelectItem>
            <SelectItem value="font-nunito">Nunito</SelectItem>
            <SelectItem value="font-spectral">Spectral</SelectItem>
        </SelectContent>
    </Select>
</Field>

I also created the Select tag for changing the description font style.

Testing

Conclusion

It's amazing how easy it is to work with Google Fonts using Tailwind.

Building a template designer is part of my 'BuildWithMe' series, in which we implement a full, production-ready template engine. It's for everyone, from beginner to advanced. If you want to follow the full build, you can find the first 2 Chapters here Substack Link.

[Boost]

John Nyingi — Thu, 09 Jan 2025 11:45:07 +0000

FastCloner – deep cloning done right

Matěj Štágl ・ Jan 8 '25

#csharp #programming #dotnet #productivity

JSONSerializer meets Source Generators

John Nyingi — Fri, 01 Dec 2023 03:55:40 +0000

With the release of .Net 6.0, we saw the introduction of Source Generators in the JsonSerializer library.
So, what is a Source Generator? Well, it is a tool that analyzes code during build and generates code accordingly. It can only add code to the build process and CANNOT edit or remove code.

What are its Benefits?

Performance is one of the biggest gains for a Source Generated JSONSerializer. These performance gains come in the following ways.

1) No Reflection: Reflection is a well-known performance bottleneck. With Source Generators you can scan the Syntax tree get all the components and generate code (all in build time), which significantly reduces the performance penalty during runtime.

2) Native AOT: Applications such as Serverless Applications need fast (cold)start times. To create applications that support Native AOT we CANNOT use Reflection since the process of generating Native Code involves trimming the application, thus the application will fail to run.
Source Generators can emit all the code needed during build such that when we are trimming we get a complete working app. With Native AOT the gains are made in reduced application size and fast start times.

NOTE: In this example I am using .Net 8

How do you use it?

Let's define a class Person:

class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public float Height { get; set; }
}

Next, let's define a Context class that JsonSerializer will use to generate code.

[JsonSerializable(typeof(Person))]
internal partial class SourceGeneratorContext : JsonSerializerContext
{

}

You'll notice we have the attribute JsonSerializable, this attribute is used by the Source Generate to register the type. During compilation, the Source Generator reads the type passed on the attribute and fetches its syntax.

Now we can Serialize and Deserialize.

var person = new Person()
{
    Name = "Alex",
    Age = 24,
    Height = 6.2f
};

var jsonString = JsonSerializer.Serialize(person, SourceGeneratorContext.Default.Person);
Console.WriteLine(jsonString);

// Result
// {
//     "Name": "Alex",
//     "Age": 24,
//     "Height": 6.2
// }

Deserializing:


string jsonStr = "{\n  \"Name\": \"Esther\",\n  \"Age\": 26,\n  \"Height\": 5.9\n}";
var personObj = JsonSerializer.Deserialize<Person>(jsonStr, SourceGeneratorContext.Default.Person);

You'll notice in both the Serializer and Deserializer that we pass in SourceGeneratorContext.Default.Person This is a Source generated Option for our Person class.

You can also see from the example we are not using camelcase for our Json We can add this option using the JsonSourceGenerationOptions attribute.
We add it to our Context Class

[JsonSourceGenerationOptions(PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase)]
[JsonSerializable(typeof(Person))]
internal partial class SourceGeneratorContext : JsonSerializerContext
{

}

we also changed our deserializer implementation to match the camelcase


string jsonStr = "{\n  \"name\": \"Esther\",\n  \"age\": 26,\n  \"height\": 5.9\n}";
var personObj = JsonSerializer.Deserialize<Person>(jsonStr, SourceGeneratorContext.Default.Person);

For a more granular control over the options, you can use the JsonSerializerOptions class to define your options.

var serializerOptions = new JsonSerializerOptions
{   
    TypeInfoResolver = SourceGeneratorContext.Default,
    PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
    NumberHandling = JsonNumberHandling.AllowNamedFloatingPointLiterals,
};

We remove the JsonSourceGenerationOptions from the SourceGeneratorContext

[JsonSerializable(typeof(Person))]
internal partial class SourceGeneratorContext : JsonSerializerContext
{

}

and now we can implement Serialization and Deserialization like so

var jsonString = JsonSerializer.Serialize(person, serializerOptions);

// Result
// {
//     "name": "Alex",
//     "age": 24,
//     "height": 6.2
// }
string jsonStr = "{\n  \"name\": \"Esther\",\n  \"age\": 26,\n  \"height\": 5.9\n}";
var personObj = JsonSerializer.Deserialize<Person>(jsonStr, serializerOptions);

In .Net 8 you can completely turn off the reflection-based serializer option by adding JsonSerializerIsReflectionEnabledByDefault to your .csproj file like so.

<PropertyGroup>
 <JsonSerializerIsReflectionEnabledByDefault>false</JsonSerializerIsReflectionEnabledByDefault>
</PropertyGroup>

Conclusion

With the introduction of Source Generators, its adoption across the .Net runtime has proven to be great for performance gains and overall user experience.

JsonSerializer a defacto package for working with Json has improved significantly as a result of supporting Source Generators.

Give it a try!!

What is the best way to copy an array?

John Nyingi — Sat, 07 Oct 2023 10:30:58 +0000

Once in a while, you come across a problem where you have an array a and you want to copy its values to array b. You use a technique you know works best or you use what is commonly suggested in the public forums.

But, have you ever wondered what is the fastest way you can copy an array? Well in this article we will benchmark different ways you can copy an array

Prelude

I'll be using .Net 7.0
We will copy values from the 0 index.
You can find the Complete Source Code here

Setup

I am using BenchmarkDotNet version 0.13.9, for testing I have 2 arrays Destination and a function that yields a small array and a big array.

private int[] Destination;

[GlobalSetup]
public void GlobalSetup()
{
    Destination = Enumerable.Range(0, 2048).ToArray();
}
public IEnumerable<object> GetIntArray()
{
    yield return Enumerable.Range(0, 10).ToArray();
    yield return Enumerable.Range(0, 1024).ToArray();
}

We will copy the yielded arrays to the big array

ForLoop

A common way to copy an array is by use of a for loop like so;

[Benchmark]
[ArgumentsSource(nameof(GetIntArray))]
public void ForLoopCopy(int[] array)
{
    for (int i = 0; i < array.Length; i++)
    {
        Destination[i] = array[i];
    }
}

If benchmark this test we get this result;

That's fairly quick, I bet we can make it faster.

Array.Copy

Another technique commonly used to copy arrays is Array.Copy

[Benchmark]
[ArgumentsSource(nameof(GetIntArray))]
public void ArrayCopy(int[] array)
{
    Array.Copy(array, Destination, array.Length);
}

It's quite simple to set up and how does it fair compared to the for loop?

that is a HUGE Leap, for large arrays we have a 14X improvement, and for small arrays, it's 2x improvement. Let's try another approach

Buffer.BlockCopy

This is also another way you can copy arrays.

[Benchmark]
[ArgumentsSource(nameof(GetIntArray))]
public void BufferBlockCopy(int[] array)
{
    Buffer.BlockCopy(array, 0, Destination, 0, array.Length * 4);
}

Why do we multiply the length by 4? Well, BlockCopy copies bytes and int has 4 bytes.

It's not as fast as the ArrayCopy for big arrays but it's roughly 2X slower than the Forloop for small arrays.

Span.CopyTo

Spans are contiguous regions of memory, the elements are tightly packed and aligned in one part of the memory. This means reading data can be much faster.

So lets create one;

[Benchmark]
[ArgumentsSource(nameof(GetIntArray))]
public void SpanCopy(int[] array)
{
    array.AsSpan().CopyTo(Destination);
}

Caveate: We have to invoke AsSpan method to cast the array to a Span.

It's performance is quite similar to the Array.Copy

Marshal.Copy

In Marshal copy we have to copy an array from managed memory to an unmanaged memory (IntPtr) and then copy from the unmanaged memory back to managed memory. So the code looks like this.

[Benchmark]
[ArgumentsSource(nameof(GetIntArray))]
public unsafe void MarshalCopy(int[] array)
{
    fixed (int* dstPtr = Destination)
    {
        IntPtr ptr = (IntPtr)dstPtr;
        Marshal.Copy(array, 0, ptr, array.Length);
    }
}

How does it perform?

Well, it's nearly as fast as Array.Copy() for both small and large arrays.

Summary

What should you use, it is pretty clear that Array.Copy or Marshal or Span are more than sufficient ways for copying one array to another. You can use which ever approach that meets your needs.

Making a Math Interpreter: Wrap Up

John Nyingi — Thu, 23 Sep 2021 06:53:56 +0000

Resources

Find the Github link here

Travis-CI

Let's add .travis.yml file add the following content.

language: csharp
dist: xenial
dotnet: 3.1
solution: calcy.sln
script:
  - dotnet build
  - dotnet test

Final Comments

We have successfully made a Math Interpreter. I hope you have gained something from this series. Going forward you can now add other features like;

Add Math Power
Add Support for Exponential Numbers
Add Square root

Thank you for making time to follow this series, until next time KEEP HACKING 😊.

Making a Math Interpreter: Parser

John Nyingi — Wed, 22 Sep 2021 10:05:20 +0000

Resources

Find the Github link here

Parser

The parser is the engine of the interpreter, and so it will consist of 3 main methods;

Expression
Factor
Term

The three methods will be tightly coupled. Expression method will call the Factor method and the Factor method will call the Term method and the return value is passed back to the Expression method.

Let's start by creating the Parser.cs let's initialize it with the following.

    public class Parser
    {
        private List<Token> TermItems = new List<Token>() { Token.ADD, Token.MINUS };
        private List<Token> FactorItems = new List<Token>() { Token.MULTIPLY, Token.DIVISION };
        private readonly List<Tokens> _tokens;
        private int pos = 0;
        private Tokens curr_token = null;


        public Parser(List<Tokens> tokens)
        {
            this._tokens = tokens;
            // set the current token
            Get_Next();
        }

        private void Get_Next()
        {
            if(pos < this._tokens.Count)
            {
                curr_token = this._tokens[pos];
                pos++;
            }
        }
    }

Our parser class has a constructor that sets the List of tokens and gets the first token curr_token. The Get_Next method will allow us to get the next token.

Expression

Let's add a ParseExp method right below the Get_Next.

    public AST ParseExp()
    {
        AST result = Factor();
        while(curr_token._tokenType != Token.EOF && result != null && TermItems.Contains(curr_token._tokenType))
        {
            if(curr_token._tokenType == Token.ADD)
            {
                Get_Next();
                AST rigthNode = Factor();
                result = new ASTPlus(result, rigthNode);
            }
            else if(curr_token._tokenType == Token.MINUS)
            {
               Get_Next();
               AST rigthNode = Factor();
               result = new ASTMinus(result, rigthNode);
            }
        }

        return result;
    }

The Expression method first calls the factor method which we will define. The while loop iterates through the ADD and MINUS tokens. The if statement checks the token type and the body creates nested objects for either Minus or Add AST.

Factor

Let's create the Factor method right below the Expression method.

    public AST Factor()
    {
        AST factor = Term();
        while (curr_token._tokenType != Token.EOF && factor != null && FactorItems.Contains(curr_token._tokenType))
        {
            if (curr_token._tokenType == Token.MULTIPLY)
            {
                Get_Next();
                AST rigthNode = Term();
                factor = new ASTMultiply(factor, rigthNode);
            }
            else if (curr_token._tokenType == Token.DIVISION)
            {
                Get_Next();
                AST rigthNode = Term();
                factor = new ASTDivide(factor, rigthNode);
            }
        }
        return factor;
    }

Similar to the expression method we iterate through the MULTIPLY and DIVISION tokens. In this method we also call Term method which we will define.

Term

Let's add our final method Term right after the Factor.

     public AST Term()
     {
         AST term = null;

         if(curr_token._tokenType == Token.LBRACE)
         {
             Get_Next();
             term = ParseExp();
             if(curr_token._tokenType != Token.RBRACE)
             {
                 throw new FormatException("Missing )");
             }
         }
         else if(curr_token._tokenType == Token.NUMBER)
         {
             term = new ASTLeaf((decimal)curr_token._value);
         }    

         Get_Next();
         return term;
    }

In our Term method, we check if the curr_token is a LBRACE(left brace). We get the next token, which we expect is a number or another left brace. We then recursively call the ParseExp. Right after we check if there exists an RBRACE if not it throws an exception.

In the else if statement, we create an ASTLeaf and we get the next token and return the result.

So the whole Parser.cs looks like this

    public class Parser
    {
        private List<Token> TermItems = new List<Token>() { Token.ADD, Token.MINUS };
        private List<Token> FactorItems = new List<Token>() { Token.MULTIPLY, Token.DIVISION };
        private readonly List<Tokens> _tokens;
        private int pos = 0;
        private Tokens curr_token = null;


        public Parser(List<Tokens> tokens)
        {
            this._tokens = tokens;
            // set the current token
            Get_Next();
        }

        private void Get_Next()
        {
            if(pos < this._tokens.Count)
            {
                curr_token = this._tokens[pos];
                pos++;
            }
        }

        public AST ParseExp()
        {
            AST result = Factor();
            while(curr_token._tokenType != Token.EOF && result != null && TermItems.Contains(curr_token._tokenType))
            {
                if(curr_token._tokenType == Token.ADD)
                {
                    Get_Next();
                    AST rigthNode = Factor();
                    result = new ASTPlus(result, rigthNode);
                }
                else if(curr_token._tokenType == Token.MINUS)
                {
                    Get_Next();
                    AST rigthNode = Factor();
                    result = new ASTMinus(result, rigthNode);
                }
            }

            return result;
        }

        public AST Factor()
        {
            AST factor = Term();
            while (curr_token._tokenType != Token.EOF && factor != null && FactorItems.Contains(curr_token._tokenType))
            {
                if (curr_token._tokenType == Token.MULTIPLY)
                {
                    Get_Next();
                    AST rigthNode = Term();
                    factor = new ASTMultiply(factor, rigthNode);
                }
                else if (curr_token._tokenType == Token.DIVISION)
                {
                    Get_Next();
                    AST rigthNode = Term();
                    factor = new ASTDivide(factor, rigthNode);
                }
            }
            return factor;
        }

        public AST Term()
        {
            AST term = null;

            if(curr_token._tokenType == Token.LBRACE)
            {
                Get_Next();
                term = ParseExp();
                if(curr_token._tokenType != Token.RBRACE)
                {
                    throw new FormatException("Missing )");
                }
            }
            else if(curr_token._tokenType == Token.NUMBER)
            {
                term = new ASTLeaf((decimal)curr_token._value);
            }    

            Get_Next();
            return term;
        }

    }

Wrap Up

In our Program.cs we can add the following code;

      Parser parser = new Parser(tokens);
      AST astObj = parser.ParseExp();
      if(astObj == null)
      {
           continue;
      }
      Console.WriteLine(">> {0}", astObj.Eval());

We generate a parser object and then we create the AST. We check if it's null if it is continue else print the Eval. You can also generate the evaluation structure using the astObj.ToString()

Unit Test

In our Unit Tests Project let's create a ParserTest.cs class and lets add the following tests.

    public class ParserTest
    {
        [Fact]
        public void TestASTString()
        {
            string expected = "((56 - (64 / 8)) + 4)";
            Lexer lexer = new Lexer("56    - 64/8 +4");
            List<Tokens> tokens = lexer.Get_Tokens();
            Assert.NotEmpty(tokens);
            Parser parser = new Parser(tokens);
            AST astObj = parser.ParseExp();
            Assert.NotNull(astObj);
            string actual = astObj.ToString();
            Assert.Equal(expected, actual);
        }

        [Fact]
        public void TestASTTermOperations()
        {
            decimal expected = 45;
            Lexer lexer = new Lexer("25+25 -5");
            List<Tokens> tokens = lexer.Get_Tokens();
            Assert.NotEmpty(tokens);
            Parser parser = new Parser(tokens);
            AST astObj = parser.ParseExp();
            Assert.NotNull(astObj);
            decimal actual = astObj.Eval();
            Assert.Equal(expected, actual);
        }

        [Fact]
        public void TestASTFactorOperations()
        {
            decimal expected = 5.5m;
            Lexer lexer = new Lexer("121/11*0.5");
            List<Tokens> tokens = lexer.Get_Tokens();
            Assert.NotEmpty(tokens);
            Parser parser = new Parser(tokens);
            AST astObj = parser.ParseExp();
            Assert.NotNull(astObj);
            decimal actual = astObj.Eval();
            Assert.Equal(expected, actual);
        }

        [Fact]
        public void TestASTBraces()
        {
            decimal expected = 0;
            Lexer lexer = new Lexer("10-5*(25/5)+15");
            List<Tokens> tokens = lexer.Get_Tokens();
            Assert.NotEmpty(tokens);
            Parser parser = new Parser(tokens);
            AST astObj = parser.ParseExp();
            Assert.NotNull(astObj);
            decimal actual = astObj.Eval();
            Assert.Equal(expected, actual);
        }

        [Fact]
        public void TestASTBraceMissing()
        {
            Lexer lexer = new Lexer("(25/5");
            List<Tokens> tokens = lexer.Get_Tokens();
            Assert.NotEmpty(tokens);
            Parser parser = new Parser(tokens);
            Assert.Throws<FormatException>(() => parser.ParseExp());
        }
    }

In our next series, we're going to;

Setup Travis-CI Build and Test Pipeline

Making a Math Interpreter: AST

John Nyingi — Tue, 21 Sep 2021 13:50:32 +0000

Resources

Find the Github link here

AST

We now need to define a structure which our interpreter will use to store and evaluate the mathematical expressions. In our case we will form a Bottom-Up Evaluation more details when we get to Parsing in the next chapter.

If you can recall our ast structure in Part 1

We're going to form an AST structure of the following form

  ASTPlus(Leaf(2),
                  ASTMult(Leaf(5), Leaf(4)))

Simply to put it, our AST will have Leaf Nodes which will hold numeric value, ASTPlus and ASTMult will hold objects of type Leaf Node or Other ASTs.

Init

Let's start by creating a class, let's call it: AST.cs.

We can go ahead and make the class generated an Abstract class, then lets add an abstract method Eval which will allow us to recursively evaluate expressions

    public abstract class AST
    {
        public abstract decimal Eval();
    }

Now right below this class lets define a leaf node which inherits from AST abstract class and implements the abstract method.

We also know our leaf nodes will only hold numerical values so we can design the class like so.

    public class ASTLeaf : AST
    {
        public readonly decimal _num;
        public ASTLeaf(decimal num)
        {
            this._num = num;
        }
        public override decimal Eval()
        {
            return this._num;
        }

        public override string ToString()
        {
            return this._num.ToString();
        }
    }

Lets create another class right below this ASTLeaf and call it ASTPlus. It will hold the addition objects.

    public class ASTPlus : AST
    {
        public readonly AST _leftNode;
        public readonly AST _rightNode;

        public ASTPlus(AST leftNode, AST rightNode)
        {
            this._leftNode = leftNode;
            this._rightNode = rightNode;
        }
        public override decimal Eval()
        {
            // Perform the evaluation
            return this._leftNode.Eval() + this._rightNode.Eval();
        }

        public override string ToString()
        {
            return String.Format("({0} + {1})", this._leftNode.ToString(), this._rightNode.ToString());
        }
    }

In our class ASTPlus we are taking in two AST objects, this could be any class. Implementing it in this approach allows us to implicitly have any class as long as it implements AST.

Our Eval method returns the sum of the evaluations of the AST objects. So, this means be it ASTMinus or ASTLeaf we will be calling the Eval method from the class objects first before we sum them up in ASTPlus

We have added the ToString method override, this will allow us to view the evaluation heirachy.

The same class structure goes for ASTMinus, ASTMultiply and ASTDivide. Just remember to change the operation sign in the Evaland ToString methods.

So our final AST.cs class will look like so.


    public abstract class AST
    {
        public abstract decimal Eval();
    }

    public class ASTLeaf : AST
    {
        public readonly decimal _num;
        public ASTLeaf(decimal num)
        {
            this._num = num;
        }
        public override decimal Eval()
        {
            return this._num;
        }

        public override string ToString()
        {
            return this._num.ToString();
        }
    }

    public class ASTPlus : AST
    {
        public readonly AST _leftNode;
        public readonly AST _rightNode;

        public ASTPlus(AST leftNode, AST rightNode)
        {
            this._leftNode = leftNode;
            this._rightNode = rightNode;
        }
        public override decimal Eval()
        {
            // Perform the evaluation
            return this._leftNode.Eval() + this._rightNode.Eval();
        }

        public override string ToString()
        {
            return String.Format("({0} + {1})", this._leftNode.ToString(), this._rightNode.ToString());
        }
    }

    public class ASTMinus : AST
    {
        public readonly AST _leftNode;
        public readonly AST _rightNode;

        public ASTMinus(AST leftNode, AST rightNode)
        {
            this._leftNode = leftNode;
            this._rightNode = rightNode;
        }
        public override decimal Eval()
        {
            return this._leftNode.Eval() - this._rightNode.Eval();
        }
        public override string ToString()
        {
            return String.Format("({0} - {1})", this._leftNode.ToString(), this._rightNode.ToString());
        }
    }

    public class ASTMultiply : AST
    {
        public readonly AST _leftNode;
        public readonly AST _rightNode;

        public ASTMultiply(AST leftNode, AST rightNode)
        {
            this._leftNode = leftNode;
            this._rightNode = rightNode;
        }
        public override decimal Eval()
        {
            return this._leftNode.Eval() * this._rightNode.Eval();
        }

        public override string ToString()
        {
            return String.Format("({0} * {1})", this._leftNode.ToString(), this._rightNode.ToString());
        }
    }
    public class ASTDivide : AST
    {
        public readonly AST _leftNode;
        public readonly AST _rightNode;

        public ASTDivide(AST leftNode, AST rightNode)
        {
            this._leftNode = leftNode;
            this._rightNode = rightNode;
        }
        public override decimal Eval()
        {
            return this._leftNode.Eval() / this._rightNode.Eval();
        }

        public override string ToString()
        {
            return String.Format("({0} / {1})", this._leftNode.ToString(), this._rightNode.ToString());
        }
    }

So now we have an AST structure that will hold our expressions.
In the next chapter we are going to;

Create a Parser -> Expression, Factor and Term
Implement Eval
Write Tests

Making a Math Interpreter: The Lexer

John Nyingi — Tue, 21 Sep 2021 10:50:43 +0000

Resources

Find the Github link here

Tokens

So we need to define a list of all the tokens we expect in a math input. So go ahead and add a class Tokens.cs. The class will have an enum with all the tokens like so. We define it above the Tokens class.

    public enum Token
    {
        NUMBER=0,


        ADD, // +
        MINUS, // -
        MULTIPLY, // *
        DIVISION, // /

        RBRACE, // (
        LBRACE, // )

        EOF // END OF FILE
    }

We also need a way to store the values attached to the Number Token. We will add the following to the Tokens class

    public class Tokens
    {
        public readonly Token _tokenType;
        public readonly object _value;

        public Tokens(Token tokenType, object value)
        {
            this._tokenType = tokenType;
            this._value = value;
        }


        public override string ToString()
        {
            return " " + this._tokenType + ":" + this._value;
        }
     }

Let's add a way we can transform our Text input to Tokens. Enter Lexer

Lexer

So we need a class which will transform text to tokens, go ahead and create a Lexer.cs class.
Let's define the basics for the class

    public class Lexer
    {
        private readonly List<Tokens> tokens;
        private readonly string _input;
        private Int32 pos=0;
        private char curr_input;

        public Lexer(string input)
        {
            this._input = input;
            tokens = new List<Tokens>();
            this.curr_input = input.Length > 0 ? this._input[pos] : '\0'; // set first char

        }
     }

The class will have a list of tokens, a string input and a position counter pos and also a current_input which is a char.

NOTE : this.curr_input sets the first value if empty it sets a null byte as first value.

We need a method which will allow us to get the next character(char) of input and update the position;

     private void Get_Next()
     {
         if(pos < this._input.Length - 1)
         {
             pos++;
             this.curr_input = this._input[pos];

         }
         else
         {
             curr_input = '\0';
         }
      }

So right after the constructor we define the above method. This method checks if the pos(position of the current token) is within range. It increments the position and then it updates the current character. If it's out of range it sets the current character as a null byte \0 from ASCII table.

Now we need a method which will iterate through the whole input and create tokens.


        public List<Tokens> Get_Tokens()
        {

            while (true)
            {

                if(curr_input == '\0')
                {
                    Tokens eofToken = new Tokens(Token.EOF, null);
                    tokens.Add(eofToken); // Add the End OF File TOKEN
                    break;
                }
                Get_Next();
            }


            return tokens;
        }

Our Get_Tokens method simply iterates through the whole list and generates the tokens, in this case we are checking for the null byte and creating an EOF token then breaking from the while loop.

Since we're already here let's create a override ToString() method. So that we can see all the tokens.

       public override string ToString()
       {
            StringBuilder sb = new StringBuilder();

            foreach (var token in tokens)
            {
                sb.Append(token.ToString());
            }

            return sb.ToString();
        }

To view the EOF output update last Console.WriteLine in Program.cs like so;

        // generate tokens
        Lexer lexer = new Lexer(input);
        List<Tokens> tokens = lexer.Get_Tokens();

        Console.WriteLine(">> {0}", lexer.ToString());

So now when you run it and hit ENTER you'll see this out put

Lexing Numbers

When you think of basic number structure it really only consist of the following;

Numbers from 0-9
Decimal numbers can be of the form 0.455 or 9.345

With this in mind let's create a method that can generate a number token and store it in decimal object which has 128 bits (sufficiently large enough for our test).

Let's start by creating a representation of what we expect a number should contain A list will do;
Add the below list at the top alongside other private fields

// LIST CHECKER
private List<char> NumberList = new List<char> { '.', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

We can now define our Generate Number method;

        private Tokens Generate_Number()
        {
            int decimal_count = 0;
            StringBuilder sb = new StringBuilder();
            while(NumberList.Contains(curr_input))
            {
                if (curr_input == '.' && decimal_count <= 1)
                {
                    decimal_count++;
                }

                if(sb.Length < 1 && decimal_count > 0)
                {
                    // You have a decimal place starting
                    // with no preceding number i.e .6767 = 0.6767
                    sb.Append("0");
                }
                sb.Append(curr_input);
                Get_Next();
            }

            string str = sb.ToString();
            decimal val = Convert.ToDecimal(str);
            return new Tokens(Token.NUMBER, val);
        }

Let's update the While loop to in Get_Tokens like so;

            while (true)
            {
                if(curr_input == ' ' || curr_input == '\t')
                {
                    // Skip empty space
                    Get_Next();
                    continue;
                }
                else if(NumberList.Contains(curr_input))
                {
                    Tokens numberToken = Generate_Number();
                    tokens.Add(numberToken);
                }

                else if(curr_input == '\0')
                {
                    Tokens eofToken = new Tokens(Token.EOF, null);
                    tokens.Add(eofToken);
                    break;
                }
            }

We can run the application again and you can now enter a number and you should see an output like this;

Lexing Operators

Let's now add tokens for + - * / ( ). They all take the same structure, so we will update our while loop in Get_Tokens

            while (true)
            {
                if(curr_input == ' ' || curr_input == '\t')
                {
                    // Skip empty space
                    Get_Next();
                    continue;
                }
                else if(NumberList.Contains(curr_input))
                {
                    Tokens numberToken = Generate_Number();
                    tokens.Add(numberToken);
                }
                else if(curr_input == '+')
                {
                    Tokens additionToken = new Tokens(Token.ADD, null);
                    tokens.Add(additionToken);
                    Get_Next();
                }
                else if (curr_input == '-')
                {
                    Tokens minusToken = new Tokens(Token.MINUS, null);
                    tokens.Add(minusToken);
                    Get_Next();
                }
                else if (curr_input == '*')
                {
                    Tokens multiplyToken = new Tokens(Token.MULTIPLY, null);
                    tokens.Add(multiplyToken);
                    Get_Next();
                }
                else if (curr_input == '/')
                {
                    Tokens divideToken = new Tokens(Token.DIVISION, null);
                    tokens.Add(divideToken);
                    Get_Next();
                }
                else if (curr_input == '(')
                {
                    Tokens lbraceToken = new Tokens(Token.LBRACE, null);
                    tokens.Add(lbraceToken);
                    Get_Next();
                }
                else if (curr_input == ')')
                {
                    Tokens rbraceToken = new Tokens(Token.RBRACE, null);
                    tokens.Add(rbraceToken);
                    Get_Next();
                }
                else if(curr_input == '\0')
                {
                    Tokens eofToken = new Tokens(Token.EOF, null);
                    tokens.Add(eofToken);
                    break;
                }
            }

Now you can run the program and enter some operators like so;

Error Handling

Thus far, we haven't tested some edge case;

What if the input has characters?
What if a number has multiple decimal places or characters?

For unknown characters let's add the below else in the above while loop;

   else
      {
        throw new InvalidOperationException($"{curr_input} is an unsupported type");
      }

When a user enters an invalid number structure let's say; 56.564.4657 the Convert.ToDecimal() throws an invalid Format exception so that's handled.

Lets wrap our lexer object in Program.cs with a try-catch like so;

         try
           {
                    // generate tokens
               Lexer lexer = new Lexer(input);
               List<Tokens> tokens = lexer.Get_Tokens();

               Console.WriteLine(">> {0}", lexer.ToString());
           }
           catch (Exception ex)
           {
               Console.ForegroundColor = ConsoleColor.Red;
               Console.Error.WriteLine(ex.Message);
               Console.ForegroundColor = ConsoleColor.White;
           }

So, now we can see errors like so;

Unit Tests

Right click the solution > Add > New Project
Choose xUnit
Give it a project name like calcy.test, click next till you see it on your solution.
Right click dependencies on the test project and select Add Project Reference
Check the project shown which should be the math interpreter

Then click Ok

Rename UnitTest1 to LexerTest

Then add the following tests

    public class LexerTest
    {

        [Fact]
        public void TestAllTokens()
        {
            string expected = " LBRACE: RBRACE: NUMBER:4646 ADD: MINUS: MULTIPLY: DIVISION: NUMBER:565.788 EOF:";
            Lexer lexer = new Lexer("( ) 4646 + - * / 565.788");
            List<Tokens> tokens = lexer.Get_Tokens();
            string actual = lexer.ToString();

            Assert.NotEmpty(tokens);
            Assert.Equal(expected, actual);

        }

        [Fact]
        public void TestInvalidCharacters()
        {
            Lexer lexer = new Lexer("Wabebe");
            Assert.Throws<InvalidOperationException>(() => lexer.Get_Tokens());
        }

        [Fact]
        public void TestInvalidDecimalNumber()
        {
            Lexer lexer = new Lexer("35.4533.4546");
            Assert.Throws<FormatException>(() => lexer.Get_Tokens());
        }
    }

To run the tests in visual studio right click the test project and select Run Test or in dotnet cli you can use.

dotnet test .\calcy.test

In our part 3 we will;

Create an AST

Making a Math Interpreter: The Setup

John Nyingi — Mon, 20 Sep 2021 12:49:11 +0000

Definition

Let's start by breaking down some few phrases and terms used

Interpreter: An interpreter is a program that interprets code to machine code. Basically, in our case the interpreter will take math expressions and convert them to C# code then to Machine code.
AST: An Abstract Syntax Tree is a graph representation of statements or expressions.
In our case, a simple math expression 2+5*4 can be represented in the below AST graph

The expression 5*4 is processed first then the result is added to 2
Tokens: These are objects used to represent each element in a program. Given our expression 2+5*4, the tokens are NUMBER ADD NUMBER MULTIPLY NUMBER
Lexer: This is a function that converts the expression into Tokens
Parser: This is a function that converts the Lexer'ed tokens into AST. This function sets up the hiereachy of execution.
Expression, Factor and Terms are as shown below;

What will I be using?

Visual Studio
Dotnet Runtime 3.1
Git and Github
Travis-CI

The Setup

Open visual studio and create a console application
Give it a name
Select a .Net core version. I'll be using 3.1

Init

So lets give our console application a REPL like interface. To achieve this we will capture user inputs and output the same. So in the Program.cs change the main method to the below code

static void Main(string[] args)
        {
            Console.WriteLine("Welcome to Calcy, a nifty and easy to use math interpreter.");
            while(true)
            {
                Console.Write(">> ");
                string input = Console.ReadLine();
                Console.WriteLine(">> {0}", input);
            }
        }

So we add the above code to achieve this, it gets a user input and outputs the same.
It would be nice if we could allow users to exit the console using the exit()phrase.We can do this by adding the below code.

Console.WriteLine("Welcome to Calcy, a nifty and easy to use math interpreter.");
            while(true)
            {
                Console.Write(">> ");
                string input = Console.ReadLine();

                if(input == "exit()")
                {
                    break;
                }
                Console.WriteLine(">> {0}", input);
            }

So now we have fully functional REPL interface.
In the next chapter #Part2 - Lexer we are going to

Add Tokens
Add a Lexer
Add Unit Tests

Optimizing GoLang Package

John Nyingi — Sat, 11 Sep 2021 08:50:42 +0000

I made a GoLang package which serializes Json from Structs. The package is here. I have an open issue, where I am trying to optimize the library. Find the issue here

Implementing Distributed Cache on SQL Server using .Net

John Nyingi — Tue, 02 Jun 2020 11:16:40 +0000

When considering Software Architecture it's always standard practice to implement some sort of Cache which will reduces the request load on the primary database. So, the question is which Cache system to implement and how? We'll show case this in a two part series.

So, let's break down the main types of cache;

Distributed Cache

Commonly regarded as Disk Cache(though not completely true), It's commonly implemented for services which either; share cache with other services or the data cached grows rapidly.

Memory Cache

This is the most common form of Cache implementation in most systems. The cache is stored In Memory which is not persistent. This means if a service/server restarts all the cache is lost.

So how do we implement it?

Distributed Cache

Remember, when I said it's commonly regarded as Disk Cache and it's not completely true. Well it's because we have In Memory Distributed Cache in .Net Core.

For this example I'll use DistributedSQLCache.
So, let's start with the .Net Core API;
We start by installing the following package -Microsoft.Extensions.Caching.SqlServer

Next we create SQLCache Table;
dotnet sql-cache create "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=DistCache;Integrated Security=True;" dbo TblCache

We add Service Dependecy Injection;

services.AddDistributedSqlServerCache(options =>
            {
                options.ConnectionString = "Database-Connection";
                options.SchemaName = "dbo";
                options.TableName = "TblCache";
            });

Since Cache storage is in Key-Value format the Key is usually a string and Value is a byte array. So we need a Cache Handler class that converts objects to byte array as shown below.

Interface

public interface ICache<T> where T: class
    {
        Task<T> GetCached(string Key);
        Task SetCache(string Key,T entity);
        Task RefreshCache(string Key);

    }

Handler

public class CacheProvider<T> : ICache<T>
                           where T: class
    {

        private readonly IDistributedCache _cache;

        public CacheProvider(IDistributedCache cache)
        {
            this._cache = cache;
        }

        public async Task<T> GetCached(string Key)
        {
            if (!String.IsNullOrEmpty(Key))
            {
                byte[] cached_data = await this._cache.GetAsync(Key);

                if(cached_data != null)
                {
                    // convert to object
                    T item = GetObject(cached_data);
                    return item;
                }
                return (T)null;
            }
            else
            {
                throw new ArgumentNullException("Cache Key can't be null");
            }
        }

        public async Task RefreshCache(string Key)
        {
            if (!String.IsNullOrEmpty(Key))
            {
                await this._cache.RefreshAsync(Key);
            }
        }

        public async Task SetCache(string Key, T entity)
        {
            if (entity != null && !String.IsNullOrEmpty(Key))
            {
                //convert to byte array
                byte[] data = GetBytes(entity);
                var options = new DistributedCacheEntryOptions()
                                        .SetSlidingExpiration(TimeSpan.FromDays(60));
                await this._cache.SetAsync(Key, data, options);
            }
            else
            {
                throw new ArgumentNullException("Set Cache can't have null values");
            }
        }

        private byte[] GetBytes(T obj)
        {
            if (obj == null)
                return null;
            BinaryFormatter bf = new BinaryFormatter();
            using (MemoryStream ms = new MemoryStream())
            {
                bf.Serialize(ms, obj);
                return ms.ToArray();
            }
        }

        private T GetObject(byte[] data)
        {
            if (data == null)
                return default(T);
            BinaryFormatter bf = new BinaryFormatter();
            using (MemoryStream ms = new MemoryStream(data))
            {
                object obj = bf.Deserialize(ms);
                return (T)obj;
            }
        }
    }

Note

SetSlidingExpiration(TimeSpan.FromDays(60)) can be used to set the lifespan of the Cache.

With that let's add the Cache Handler dependency;
services.AddScoped(typeof(ICache<>), typeof(CacheProvider<>));

Finally, we can just implement it on the controller;
Dependency Injection ofcourse;

private readonly ICache<IEnumerable<Members>> _distcache;

public ActisureController(ICache<IEnumerable<Members>> distcache)
{
       this._distcache = distcache;
}

Then the implimentation

public async ValueTask<IActionResult> GetMember(string idno)
        {
            IEnumerable<Members> memberDtos= null;
            try
            {
                memberDtos = await this._distcache.GetCached(idno);
                if(memberDtos== null)
                {
                    //get members from DB
                    if(memberDtos!= null)
                    {
                        await this._distcache.SetCache(idno, memberDtos.ToList());
                    }

                }
                else
                {
                    await this._distcache.RefreshCache(idno);
                }

                return Ok(memberDtos);
            }
            catch (Exception ex)
            {

                return BadRequest(ex.Message);
            }
        }

And That's it you have a distributed Cache. You can also use this implementation for REDIS Which is pretty fast.

How do you handle Burnout(s)🔥?

John Nyingi — Sat, 02 Feb 2019 11:32:32 +0000

We all get to that point at-least once in a while where the dev life becomes unbearable. The work/hobby you once loved becomes a source of stress and sadness. We loose the zeal and drive to work. How well have you been able to mitigate this or how does the company you work for ensure that developers don't reach a breaking point?