DEV Community: dREWbxKewb

A Debrief on Svelte: Compile before Sending

dREWbxKewb — Sun, 07 May 2023 21:45:32 +0000

Intro

When build a web app, one has to ask the question, what library or framework do I want to use?

React is a great start and pretty user friendly, Flutter offers a lot of integration to Google's services, Angular V2 has just recently came out, and Next.js offers something in between it all. One framework is special in this case, as it does something these other libraries/frameworks don't do. Svelte is truly unique as a framework, and is open to anyone to use. Lets delve into what makes it a special.

Svelte Breakdown

Svelte has a lot of key difference to the others. First of all Svelte is written in JS and TS. Now we need to explain what most of the other libraries/frameworks do in the form of sending info to the browser. You see, libraries like React will send runtimes and most if not all of the different libraries to the browser and let it settle all the information for it. That is not the case for Svelte, which compiles all of its code and then serves it to the client. This allows for faster performance and less bloat. Svelte also does everything in a single .svelte file.

The file structure is similar to this:

<script>
  import { v4 as uuidv4 } from 'uuid';
  import { createEventDispatcher } from 'svelte';
  import Card from './Card.svelte';
  import Button from './Button.svelte';
  import RatingSelect from './RatingSelect.svelte';
  let text = '';
  let rating = 10;
  let btnDisabled = true;
  let min = 10;
  let message;

  const dispatch = createEventDispatcher();

  const handleInput = () => {
    if (text.trim().length <= min) {
      message = `Text must be at least ${min} characters`;
      btnDisabled = true;
    } else {
      message = null;
      btnDisabled = false;
    }
  };

  const handleSelect = (e) => (rating = e.detail);

  const handleSubmit = () => {
    if (text.trim().length > min) {
      const newInfo = {
        id: uuidv4(),
        text,
        rating: +rating,
      };
      dispatch('add-idea', newInfo);
    }
  };
</script>

<Card>
  <header>
    <h2>Give us Ideas</h2>
  </header>
  <form on:submit|preventDefault={handleSubmit}>
    <RatingSelect on:rating-select={handleSelect} />
    <div class="input-group">
      <input
        type="text"
        on:input={handleInput}
        bind:value={text}
        placeholder="Tell us something interesting"
      />
      <Button disabled={btnDisabled} type="submit">Send</Button>
    </div>
    {#if message}
      <div class="message">
        {message}
      </div>
    {/if}
  </form>
</Card>

<style>
  header {
    max-width: 400px;
    margin: auto;
    text-align: center;
  }

  header h2 {
    font-size: 22px;
  }

  .input-group {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 15px;
  }

  input {
    flex-grow: 2;
    border: none;
    font-size: 16px;
  }

  input:focus {
    outline: none;
  }

  .message {
    padding-top: 10px;
    text-align: center;
    color: rebeccapurple;
  }
</style>

This is an example of my own local demo with the help from this video: Traversy Media: Svelte Crash Course

Script Tag

To break this down, we will start with the script tag

<script>
  import { v4 as uuidv4 } from 'uuid';
  import { createEventDispatcher } from 'svelte';
  import Card from './Card.svelte';
  import Button from './Button.svelte';
  import RatingSelect from './RatingSelect.svelte';
  let text = '';
  let rating = 10;
  let btnDisabled = true;
  let min = 10;
  let message;

  const dispatch = createEventDispatcher();

  const handleInput = () => {
    if (text.trim().length <= min) {
      message = `Text must be at least ${min} characters`;
      btnDisabled = true;
    } else {
      message = null;
      btnDisabled = false;
    }
  };

  const handleSelect = (e) => (rating = e.detail);

  const handleSubmit = () => {
    if (text.trim().length > min) {
      const newInfo = {
        id: uuidv4(),
        text,
        rating: +rating,
      };
      dispatch('add-idea', newInfo);
    }
  };
</script>

The script tag is where your standard code blocks will live. This is where the logic if provided to help display things on the screen or gives functionality to elements on the screen. Using the let keyword, we allow are variables to change depending on what we need them to change to, in the case of the code block we have a text field, a rating which will go up or down, a boolean for disabling a button, a min value, and a message declared. These are what we would consider dynamic variables. There is however another mounting state sytnax available to Svelte in the form of $:. When this is called, it allows the variable it is declaring to be dynamic in rendering based on what is provided. Here is an example of one; $: count = info.length;.
In this case count re-renders when info.length changes. Another quick block you see in the example above is this import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher();. This is a way to pass custom event triggers up to the most top parent component in Svelte and allows that parent to watch for changes to the actual element that is changing to determine what to do next.

HTML Element or Main tag

Next we come to the actual html elements that are used. This is similar to React where you build out the smaller components and fit them into bigger components. To do this, in the script tag you must import the component just as you do in a JSX or TSX folder. Then in the html element you would reference inside of a <main> tag. It is important that there is a main tag and usually that is the top most level of the project. After that its down the html rabbit hole of different tags that would be used. The best part, is that most the components don't need a parent div tag to start. Lets break down two examples:

<Card>
  <header>
    <h2>Give us Ideas</h2>
  </header>
  <form on:submit|preventDefault={handleSubmit}>
    <RatingSelect on:rating-select={handleSelect} />
    <div class="input-group">
      <input
        type="text"
        on:input={handleInput}
        bind:value={text}
        placeholder="Tell us something interesting"
      />
      <Button disabled={btnDisabled} type="submit">Send</Button>
    </div>
    {#if message}
      <div class="message">
        {message}
      </div>
    {/if}
  </form>
</Card>

From the code above

<main class="container">
  <IdeaForm on:add-idea={addIdea} />
  <InfoStats {count} {average} />
  <FeedbackList {info} on:delete-feedback={deleteInfo} />
</main>

From the App.svelte file in the demo

The second example is shown to be the top most part of the application, showing different tags inside a main tag. Those other tags are components from another file. Another good thing about svelte is there is not exporting of the html elements. If you look closely, there are some other syntax choices that stand out in the form of on:<event> and {#if}. on:<event> is a event listener tag similar to onClick for React. It will watch the element and dictate an action based on what is being watched. Example 2 has a listener for a delete custom function that is passed up to this top level. It will see the details of that event and then execute code that we wrote to delete the feedback. {#} is interesting as it is used to write conditional logic and iterative login into the html element itself. Example 1 has some conditional logic that renders a message if there is one to begin with. For the iterative (or {#each}), it takes a iterative object or count, and renders x amount of components based on the iterative logic. This is similar to how {example.map(...)} works for React to display elements on the page from an array of elements.

Style tag

<style>
  header {
    max-width: 400px;
    margin: auto;
    text-align: center;
  }

  header h2 {
    font-size: 22px;
  }

  .input-group {
    display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 15px;
  }

  input {
    flex-grow: 2;
    border: none;
    font-size: 16px;
  }

  input:focus {
    outline: none;
  }

  .message {
    padding-top: 10px;
    text-align: center;
    color: rebeccapurple;
  }
</style>

Finally we get onto the style tag, which is most of the css and other styling you will do to the page. There is not much to say for those that have made apps and used css styling, but it's crazy to think that you could do something like this. More often than not though if you are big into styling you would work with libraries such as Attractions, SMUI (Svelte MUI), and Skeleton to help the styling process.

Attraction Example

Conclusion

Svelte has been an interesting study to me. I have such a small understanding of front end development because of my time working with just React. While it's not that bad, I can say safely that we are in an age where React is not the only way to build apps. Svelte is very intuitive in my opinion, and offers a new and refreshing way to building web apps. The community is small, but the docs are very detailed, have a lot of great tutorials to get you started, and has a developer that is really passionate about giving the user and developer a more seamless transition from code to display.

Resources: Official Docs, SvelteKit Docs, Attractions, Wiki,

Flutternomics: The study of Flutter for UI Design

dREWbxKewb — Mon, 24 Apr 2023 13:36:46 +0000

Intro

Cheesy title I know, but it's exciting to talk about something that I didn't have much knowledge on prior to coming into this topic. In case you are wondering what I'm taking about, the answer is Flutter. Flutter is Google's version of React in the case of front-end web design. It makes creating any kind of app easy, with some context. Obviously it still takes some learning to design anything with code, but today we are gonna embark on the journey together as I cover some cool stuff that comes with Flutter, but first we have to talk about the big question. Why use Flutter over React?

Brief React Overview and Why Flutter?

Lets start by saying this; when it comes to creating an application you should go with what you are most comfortable with. If you feel the need to explore, then do so but make sure you do your research. Anyways lets talk about React for a second. So React and all of it's different version were created by Meta (formally Facebook) to make front-end web design easier to use over the likes of HTML5. Fun fact, did you know that Facebook's mobile app was designed with HTML5 back in the day.

When I’m introspective about the last few years, I think the biggest mistake we made as a company is betting too much on HTML5 as opposed to native…
Mark Zuckerberg "Tech Crunch's Disrupt event 2012"

Around 2012 at a tech conference, Mark Zuckerberg talk about his griefs with Facebooks mobile app and how HTML5 create a lot of performance issue for it. This lead them to create React as a counterpart and a dynamic way of making nice and responsive applications. However over time Meta began dipping it's toes into other technologies like VR and AI. This cause React to become more of a side project. Below is a article by a CTO who didn't like the problems with support that React was receiving and caused him to switch to Flutter.

The gist of the article is the focal point that brings us back to the ultimate question, why Flutter? To be honest though and to reiterate, use whatever you feel comfortable with. At the end of the day it's a choice, but could benefit you to stick around and learn some Flutter.

The Tech that is Flutter

While I'm no expert (quite literally and figuratively) Flutter seems very intuitive. Most of the learning comes from the main topic of discussion in relation to Flutter, the framework. Flutter's language of choice is a C clone called Dart.

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void introduce() {
    print('Hi, my name is $name and I am $age years old.');
  }
}

void main() {
  var john = Person('John', 30);
  john.introduce();
}

Example of Dart creating a person class with name and age

Dart follows standard C language rules: being class-oriented, class-based, and garbage collecting. Dart is also standalone from Flutter in case you were wondering. Dart works in conjunction with Flutter's foundation libraries that act as simple classes and functions that make programming with the language easy. Next we will talk about the Flutter Engine.

Example of an apps view rendered in it's engine

The Flutter Engine is the low-end rendering engine that gives the code you are making a physical display. The engine runs natively with Google Skia (Google's 2D rendering library), but also allows for custom importing. Skia docs.

While it's not made for crazy UI design, this engine can be used in conjunction with other engines to make web browser games and mobile games (hint to the next blog). The engine is written mostly in C/C++ and compiles all kinds of languages so you could in theory feed it some JS and it would compile it to C language readable. Finally lets talk about Widgets

Flutter Widget Tree example

Standardly, Widgets are interactable bits of a app. These can be in the form of a picture, an icon, or text. Widgets are kind of like small components, but act like state values. Widgets can have sub-Widgets that interact with the parent to store information. A good example shown here is a app with a cart, that watches when a user add something to their cart. When clicked though, it will give a list of all the items added and the total value that you owe for them. Widgets can be parents of other widgets that pass state around to do what was described above. This is standard for Flutter, as because of how it renders components makes for a smooth user experience all around.

Conclusion

Flutter as a front-end design library is pretty versatile. Aside from the language curve and the docs (which in my opinion are great when it comes to Google docs) allows for most web browser and app building to be simple and enjoyable. This is key because Flutter also can be wrapped by another library which in my next blog I'm gonna talk about called Flame. I hope this finds you well and you get the bug to explore the concepts of front-end outside of just using React.

Resources: Flutter Wikipedia, Flutter Docs, Dart Wikipedia

CHIP-8: The birth of gaming

dREWbxKewb — Mon, 10 Apr 2023 03:57:52 +0000

Intro

When we think of video games, we start to look towards the past. I love retro games, as they have a simplicity to them. The many nights of playing Pac-Man on a CRT TV or Galaga in an arcade of most kids amusement areas, the classics are where it's at. However, because we usually talk about arcade style games when it comes to retro we tend to forget that we had even more classics in the 70s just as tech was beginning to form. Which is why today I'm gonna talk about one of the first virtual machines built for creating video games, the CHIP-8 programming language.

CHIP-8 Breakdown and History

For simplicities sake I'll refer to CHIP-8 as C-8 through this blog. To start what is C-8, how does it work, and what was made with C-8? All of this will be answered, but lets start with what.

C-8 is a interpretive program language designed by Joseph Weisbecker in the mid 1970s. The original program was used on either COSMAC VIP or a Telmac 1800, to which both are 8-bit microcomputers. Its funny cause these computers are actually weaker than most graphing calculators to this day, and the first one was designed with a C-8 interface. C-8 was the backbone of some very famous games such as Pac-Man, Tetris, Space Invaders, and the GOAT Pong.

Pac-man built on CHIP-8 SuperCHIP-8

C-8 was very simple. It rendered black and white pictures when it first began which acted as the playground for the game. Later in the 80s it was give limited color palettes, as well as some sound capabilities. The machine would output in upscaled 64x32 resolution, but would eventually scale higher with more updates. It was the big way to build games until around the mid 1980s when games began to evolve. It wasn't until the 1990s that C-8 was brought back from the dead, in the way of designing graphing calculators (as described above). This revitalized version was made easier to program with which sparked a boom in retro game development. Today C-8 is used for preservation as well as retro web browser versions of the games we played back in the day through emulation.

C-8 is a virtual machine build on past tech so I'll spare you the actual tech talk. I will however discuss it's input and the Opcode table, to which is the coding aspect of it.

Standard CHIP-8 inputs

Inputs are written on a standard keyboard using hex. These keys are interpreted from the ranges of 0 to F; with 8, 4, 6, and 2 being directional. The opcode table then interprets the key presses in 3 stages; first one skips the key press on specific ones, second does when specific keys aren't pressed, and the third saves it to a data register that is added to the stack.

Most of the Opcodes. Source: Cornell University

Opcodes are the operation codes executed when the stack is called. This is important to telling the program what to do. C-8 started out with 35 codes, but has expanded since the 1990s. Below this is a picture of some commands that are popular to use.

Conclusion

C-8 has been a big player in how modern video games take shape. Most modern consoles have some sort of C-8 machine built in for developers to experiment with. It surprises me how much gaming in general was designed by one small computer program. I hope this blog gives you a small insight on C-8, and give you a small appreciation of the tech that goes into the jump between two paddles and a ball, and characters running over fields of green chasing some mythical beast.

References:
https://en.wikipedia.org/wiki/CHIP-8
https://courses.ece.cornell.edu/ece5990/ECE5725_Fall2016_Projects/Lab_group_bcp39_rk534/cpu.html

GDScript: If Python and JS had a baby

dREWbxKewb — Mon, 06 Mar 2023 13:32:56 +0000

Intro

I'm not here to clickbait you in the title, as it explains the topic in the simplest way. Today we are gonna be talking about GDScript; a language that is use in the visual engine Godot. In order to explain the language, we have to understand what Godot is. So we are gonna break it down into 3 parts; Godot summary, GDScript and it's relation to both Python and JS, and some concluding thoughts. Let's dive in.

Example of game Lumencraft by 2Dynamic Games made in Godot
source

Godot

Godot is a visual engine designed by two Argentinian software developers named Juan Linietsky and Ariel Manzur. It was developed in 2014, is free and open-source, and works on most operating systems. Most of the documentation on this engine was designed by the community through Chat rooms and Discord channels dedicated to the improvement of the engine.

Example of the visual editor

While it mainly works with creating video games, it also has the capabilities to work with most types of visual content. While I could dive deep into how the program works, we are here to discuss the language that was pair with this program GDScript.

Created by official Godot Engine YouTube channel

GDScript

GDScript is a dynamically typed by default, with optional static typing built in. The syntax looks and styles the same as Python, but with JS flair mixed in. Here's a small example to look at.

func _input(event):
    if event.is_action_pressed("jump"):
        jump()


func _physics_process(delta):
    if Input.is_action_pressed("move_right"):
        # Move as long as the key/button is pressed.
        position.x += speed * delta

source

This example is a button press function for a character in a game. Both function calls have declaration of variable, take in a param, and have code built inside them to execute when invoked. What I meant when I said GDS looks similar to Python is in how it writes. Notice anything different? That's right, it doesn't use {} syntax to encapsulate our actions. That is because in Python, you don't use brackets. However, the keywords and operations look more similar to JS. Continuing with the example above, func is considered function declaration like JS. This is a similar case with variable declaration, class building, conditional chaining and so on. Here is an example of other keywords being used in GDS from the official docs.

# Everything after "#" is a comment.
# A file is a class!

# (optional) icon to show in the editor dialogs:
@icon("res://path/to/optional/icon.svg")

# (optional) class definition:
class_name MyClass

# Inheritance:
extends BaseClass


# Member variables.
var a = 5
var s = "Hello"
var arr = [1, 2, 3]
var dict = {"key": "value", 2: 3}
var other_dict = {key = "value", other_key = 2}
var typed_var: int
var inferred_type := "String"

# Constants.
const ANSWER = 42
const THE_NAME = "Charly"

# Enums.
enum {UNIT_NEUTRAL, UNIT_ENEMY, UNIT_ALLY}
enum Named {THING_1, THING_2, ANOTHER_THING = -1}

# Built-in vector types.
var v2 = Vector2(1, 2)
var v3 = Vector3(1, 2, 3)


# Functions.
func some_function(param1, param2, param3):
    const local_const = 5

    if param1 < local_const:
        print(param1)
    elif param2 > 5:
        print(param2)
    else:
        print("Fail!")

    for i in range(20):
        print(i)

    while param2 != 0:
        param2 -= 1

    match param3:
        3:
            print("param3 is 3!")
        _:
            print("param3 is not 3!")

    var local_var = param1 + 3
    return local_var


# Functions override functions with the same name on the base/super class.
# If you still want to call them, use "super":
func something(p1, p2):
    super(p1, p2)


# It's also possible to call another function in the super class:
func other_something(p1, p2):
    super.something(p1, p2)


# Inner class
class Something:
    var a = 10


# Constructor
func _init():
    print("Constructed!")
    var lv = Something.new()
    print(lv.a)

source

Concluding thoughts

GDS is a very interesting language. As I explored the docs for information about it, I was enamored by the simplicity of the language itself. It is also very impressive of what was done by just 2 developers, and a community that is very passionate about the project itself. As far as applications created in Godot, while very few, I will leave a link below to show some of the cool things people have come up with. I will also leave a link of how to get started with using Godot and GDS. Hopefully this has peeked the interest of a few that want to explore app creation using a visual interface.

Showcase of Apps
Official Godot Documentation

Unreal Engine 5: Epic Games Game Engine

dREWbxKewb — Mon, 27 Feb 2023 07:03:16 +0000

Intro

Today's discussion is about a game engine that I've had an interest in for a while and had a chance to work with for the first time confidently, Unreal Engine 5 or UE for short. UE is a gaming engine that was designed by Epic Games and is named after the game series of the same name Unreal. While designed with the FPS genre in mind, this engine has gone on the be part of many different successful titles including Gears of War(series), Rocket League, and very well known today Fortnite. A very impressive list of AAA titles however, we didn't come here to talk about the games. Instead we are here to talk about how to get starting in UE, and all the terminology that comes with it.

Tech Talk

When creating a project in UE, you are given a choice of how to implement your code into your game. C++ is the native language passed into the program, however we have another part that can be used in conjunction with the language called Blueprints.

Example of a door blueprint

Blueprints is Epic Game's language binder that allows you to link different aspects of your project together to give you a final product. Most of the Blueprint library is built-in C++ scripts that are free to use. You can also import other components into Blueprints through C++ script files that you create. Blueprints have various different sections that house smaller elements inside them. Worlds and Levels are the bigger pictures, which are the bones of the game.

They are the maps and section of maps you want to render at a time. Think of the load screen as a way to switch between each Level in a World.

Inside a World or Level, we have Brush and Actors. While Brush consist of non interactive 3D objects in the game, Actors are object that can interact with each other inside the Level/World.

These are various Actors

Actors can be broken down to 2 categories: Pawns and Characters. Pawns are user and NPC objects, while Characters are specifically users. These actors are granted functionality based on 3 subclasses built into them; Classes, Objects, and Components.

The easiest way to explain these 3 concepts would be to compare them inside a coding language. For those for you who don't have a good understanding of C++ here the skinny. C++ is object-oriented, meaning that every created must start in an object. Objects are code blocks designed to hold functionality. These objects hold components, while classes hold the objects.

UCLASS()
class MYPROJECTCPP_API AWeapon : public AActor
 {
    GENERATED_BODY()

    FHitResult HitResult;
 protected:

    FString WeaponName;
    float FirstSpawnTime;
    float SecondSpawnTime;
    float FireRate;
    int32 DamagePerShot;

    int32 START_AMMO;
    int32 MAX_AMMO;
    int32 AmmoPerShot;
    int32 Ammo = START_AMMO;

    bool bInfiniteAmmo = false;
    bool bWeaponDisabled = false;

 public:

   AWeapon();

   AWeapon
       (
         float firstSpawnTime,
         float secondSpawnTime,
         float _fireRate,
         int32 damPerShot,
         int32 _startAmmo,
         int32 _maxAmmo,
         int32_decrAmmo
         );

   virtual void PrimaryFire(AMyProjectCPPCharacter* Shooter);
   virtual void SecondaryFire();

This is a class object of a gun in a game given a starting ammo count

source: https://forums.unrealengine.com/t/c-implementing-a-class-for-the-weapons-crash/49321

The above example is a class built in C++. This is a class for a gun Actor. Inside the class are 2 Objects built with different components inside them. These components are the characteristics for the Actor; different variables to different parts of the Actor. While this characteristics are static on the actor, there are ways to change the functionality when 2 different actors interact. This is called casting.

EX: Fire is an actor, and if a player actor stand in fire they should trigger a Casting action that will cause them to take damage and/or set them on fire.

Casting (as explained in the example above), is a boolean call that changes the properties on Actor(s) when they interact with other Actor(s).

The last things we need to talk about is Game State and Game Mode. Game Mode is what you want menus and other text related screens to look like. Game State is the version of the game that you want multiple clients (or users) to see at the same moment. A less technical way of putting it is what you want 2 or more different people to see at the same time. This is especially important in multiplayer games online.

There are more commands and other parts to explore, but for now, let look at the actual application.

Presentation and Application

Inside the project, we have a preview of the world/level and the various tabs that you can use to create an environment that you can interact with. Here is an example of the menu.

While I won't go to into detail about each menu choice, I will talk about a couple of them that are important to actor creation; Modeling, and Selection.

Selection allows you to manipulate an Actor's placement, orientation, and size all inside of the level.

lets us see different selected object or actors on the screen

Example 2 of selection

Example 3 of selection

Modeling is the creation of an Actor and assigning it properties. Modeling allows us to build our environment out with shapes and objects that can be interacted with.

On the right side of the page is a class editor. This will allow you to change different aspect of your actor (see Class up above). You can also dive deep into a class and change individual objects inside it.

While this was a first step in explaining UE's different aspects, I hope that you guys have some small knowledge gained from checking out this post and will also tinker with it if you have small interests in game development.

C#; JS Comparison and Game Dev.

dREWbxKewb — Mon, 13 Feb 2023 06:07:33 +0000

Intro

As a beginner in software and coding, one of my biggest passions/obsessions is my love for video games. Now that I'm tackling JS coding, my interest in becoming a game developer has increased. This is where a new question comes in. What language is the best for getting into game development? To answer that question, we have to look at the topic of today's discussion, C#.

C# (C Sharp), is a programming language built in Microsoft's .NET Framework. The following are some key concept about the link between .NET and C#, as well as some other useful info on C#:

.NET (dot net) is a library of built methods, security checks, and compiler commands that translate code from other languages into one readable language before execution. EX: C, C++, Java.

C# itself is object-oriented, meaning that every variable and expression declaration has to be tied to an object or method. In JS, this is called Class construction which follows a similar pattern.

class Program {
void print(int i, int j) {
Console.WriteLine("Printing int: {0}", (i+j) );
}
void print(string a, string b) {
Console.WriteLine("Printing String: " , (a+b));
}

static void Main(string[] args) {
Program prog = new Program();

// Call print for sum of integers
prog.print(5, 6);

// Call to concatenate strings
prog.print("Hello","World");
Console.ReadKey();
}
}

//source: https://www.softwaretestinghelp.com/c-sharp/oops-concepts-in-csharp/

C# is strongly typed; meaning that any expression declaration, any object, or string reference has to mean exactly what it is tied to. EX: {int = i;} => this is an integer declaration with i representing a number.
Whereas JavaScript is single-threaded, C# is multi-threaded.

This refers to the number of simultaneous connections we use when running our speed tests.
"Single-threaded" means that we open a single connection and measure the speeds from that.
"Multi-threaded" means that we're using multiple connections - usually anywhere from 3 to 8 - at the same time, and measure the total speed across them all.

source

JS vs (C#)

The difference between C# and JavaScript, while vast, mainly comes down to how each snippet of code is build and executed. Take for example the following code snippets.

const newNumber = 'Hello World';                          
 const print = (str) => {
   console.log(str);
 }
 print(newNumber);

using System;

 namespace addingNumbers
 {
   class Program
   {
     static void Main(string[] args)
     {
       Console.WriteLine("Hello World!");    
     }
   }
 }

Example one shows us a JS code snippet that has variables declared outside the object const newNumber = 'Hello World';, a function built to print a string to the console const print = (str) => { console.log(str); }, and the invocation of said function passing in our string variable print(newNumber);.

Example two shows us a C# code snippet. The first line using System is referencing the current environment that is being used to build the code. The next line of code namespace addingNumbers references separation of code blocks in the file. Next we have our class creation class Program where the code we want to execute will be written. The static class designation assigns the variable to the class object and only that object. Void lets the method know that it won't be returning any value. Main is the starting point of the method, and the variables are passing in our parameters. What we have left is a console print Console.WriteLine("Hello World!"), similar to a console log.

A lot of information was presented, but to put it simply both these snippets do the same thing. The big difference is that class creation is needed to get the end result in C#, whereas in JS you can build and execute outside of a class.

C# Apps

Now with all of that being said, what kind of applications use C#? Web Apps, Workflow apps, and Windows Services. There is of course one more use of C#; Game Development. C# is the backbone of many different gaming engines including Unity and CryEngine. While I would explain the key features of each, for now I'll leave it for another blog.

Conclusion

My small time researching C# has opened my eyes to how terrifying at first it is to understand a different language. I hope to explore more C# as I continue to climb towards becoming a Game Developer.

Someone new talking about Recursion

dREWbxKewb — Wed, 30 Nov 2022 22:41:09 +0000

Recursion is a very interesting topic, as it is creating loops in code using functions. The more advanced explanation of recursion is a function that returns itself unless it hits a stop return.

function add(array, output=0){
  if(array.length === 0){
    return output;   // Key 1
  }
  output += array[0];
  return add(array.slice(1), output);  // Key 2
}

Key 1: The Stop
This chunk of the code is the stopping mechanism. This insures that the functions stops at a certain point, as to not create an infinite loop.

if(array.length === 0)

This part is the check and usually results to true or false. If the check results in true, then it executes this line.

return output;

This output is indicated by the output in the function build, but we will get to that soon.

Key 2: The Loop
This section of the code is the looping mechanism. Basically the code does something, then returns the function call as its final act. In the case for the example we look at what is being done first before the loop occurs.

output += array[0]

Output is being added to by the value at 0 in the array.

return add(array.slice(1), output)

This is the meat of the loop. The return is pushing out the function call, but as you can see there are some changes that happen to are parameters as it goes though.

array.slice(1)

Using the slice method, we are removing the number at the zero index of array and making the one index our new zero. This is important, as without that bit, you will create another infinite loop. The last thing is the output. If you started with an output in the function creation, you need to carry it over to the next call as it has been modified in the code either.

Not necessary to the explanation, but the output can be anything you assign it to to help make the recursion simple.

While recursions are simple to write, they take a lot more computing power to execute than a simple loop does. That doesn't mean they aren't practical however. Recursions are simple to design and loop just as well as a for loop can.