DEV Community: Alex Beasley

Elixir: A BEAM Machine

Alex Beasley — Mon, 01 Jan 2024 18:46:09 +0000

Elixir has silently been revolutionizing the way we create scalable and maintainable applications. Born in 2011 and running on the BEAM (Björn's Erlang Abstract Machine), Elixir is a functional, concurrent, high level general purpose programming language. Elixir runs on the BEAM system which is used to implement the Erlang Open Telcom Platform (OTP) which is a set of libraries, middleware and tools that extend the Erlang programming language of the 80's.

Developed by José Valim, who also worked on the Ruby on Rails framework, Elixir was influenced by the large scale telecommunication system of the 1980's that was used for the massive demands of phone switching. The language was created to leverage the strengths of Erlang while providing a more modern and extensible syntax. It is particularly well suited for building fault tolerant systems with a focus on developer productivity within distributed systems.

Elixir is used by established institutions such as Discord, who uses the Elixir concurrency model and the Phoenix framework's ability to provide real time communication to handle the massive demand of concurrent users. Also used by Motorola to build resilience with the telecommunication systems, and Pinterest to scale up their real time notification systems. This involves handling large number of events and delivering notifications in a prompt efficient manner using asynchronous tasks and real time updates. The Elixir based Phoenix framework is responsible for thousands of full stack website applications. The Phoenix web framework leverages Elixir's concurrency model and OTP to provide a high performance, fail safe environment for budling applications.

According to this year's Stack Overflow developer survey (https://survey.stackoverflow.co/2023/#technology-most-popular-technologies) Elixir ranks at just 2.63% popularity ranked among other coding languages. Although it may not be the most popular language, its niche adoption with certain types of applications, particularly those that require multithread processing and low latency, has created a growing market.

Data Types

Similar to Ruby, Elixir is a dynamically typed language, which means that the variable types are determined at runtime rather than at compile time. Elixir offers a large amount of data types including Integers, Floats, Atoms, Ranges, Binaries, Lists, Maps and Tuples. Comments can be added using the pound sign "#" which helps us add pseudo code.

value = 42      # Integer
IO.puts value

value = "hello" # String
IO.puts value

value = :elixir # Atom
IO.puts value

# There is no maximum int size
my_int = 123
IO.puts "Integer #{is_integer(my_int)}"

# Floats have about 16 digit precision
my_float = 3.14159
IO.puts "Float #{is_float(my_float)}"

# An Atoms name is its value
IO.puts "Atom #{is_atom(:Pittsburgh)}"

# Use double quotes for spaces
:"New York"

# gets retrieves user input
# trim removes the newline
name = IO.gets("What is your name? ")
|> String.trim

Once assigned, the values are immutable meaning they cannot be changed. Data types are bound by using the equal sign "=" and are constants. In Elixir, Input/Output statements are written using the IO keyword. There are a few different options for using them, IO.puts is like a console log and used for displaying a specific variable or statement. IO.inspect can be used to print a given term to the console for inspection. IO.gets can be used for prompting the user.

Atoms

Atoms play a crucial role in utilizing Elixir's expressiveness. They are literals that the name and value represent the same value. Atom's are immutable unique values, used as constants, labels or identifiers.

#this is how we would declare in JS
let test = "test"
:test
:'test'

{:error, reason} = {:error, "500 Internal Service Error"}
reason # "500 Internal Service Error"

{:ok, msg} = {:ok, "status 200 ok"}
msg # "status 200 ok"

def handle_resut(:ok), do: "status 200 ok"
def handle_result(:error), do: "500 Internal Service Error"
IO.puts handle_result(:ok) #status 200 ok
IO.puts handle_result(:error) #500 Internal Service Error

Atoms are declared using a color ":" and can include letters, digits and numbers. Most commonly used in pattern matching to make code more expressive and readable. For the purpose of pattern matching we use Tuples. Tuples can hold 2 to 4 values and are not meant for enumeration or cycling like list with pattern matching.

Maps

Maps are similar to JavaScript objects and are the go to key-value structure in Elixir. Maps do not impose any restrictions on the key type. Anything can be a key in a map.

# Creating a map with key-value pairs
user = %{name: "Bob", age: 30, city: "New Orleans"}

# Accessing values from a map
name = user[:name]
IO.puts "User's name is #{name}" #User's name is Bob

# Updating values in a map
updated_user = Map.put(user, :age, 31)
IO.inspect updated_user 
#name: "Bob", age: 31, city: "New Orleans"

# Adding key-value pairs to a map
new_user = %{user | city: "Baton Rouge", email: "bob@gmail.com"}
IO.inspect new_user
#name: "Bob", age: 31, city: "Baton Rouge" email: "bob@gmail.com"

Maps are created using the %{} syntax and can provide efficient key-based access and manipulation. Their flexibility and access make them invaluable for handling complex data structures.

Functions

Functions are defined using the "def" keyword. This keyword will signal the beginning of defining a function, you can then include the function name and it's different parameters.

#when the argument is the atom :world
def greet(:world), do: IO.puts "Hello, World!"
#any other argument
def greet(name), do: IO.puts "Hello, #{name}!

greet("Alex") 
#Hello, Alex!
greet(:world)
#Hello, World!
greet("Bob")
#Hello, Bob!

Functions can also include pattern matching, allowing us to define multiple clauses for the same function name, making code more expressive, and allowing us to change the functions behavior depending on it's inputs.

defmodule Math do
  def add(a, b) do
    a + b
  end

  def add([head | tail]) do
    add(tail, acc + head)
  end
end

This example allows us to add multiple clauses onto the add function, enabling us to use list or basic integers.

In conclusion, Elixir was born out of a desire to combine the reliability of Erlang with a more modern, developer friendly syntax. The phoenix design framework has become a go-to choice for building real-time web apps with dynamic typing, metaprogramming capabilities and code maintainability. As more companies adopt it for various use cases, the Elixir continues to grow providing a supporting community and a rich set of libraries.

Sources:
https://elixir-lang.org/docs.html
https://www.newthinktank.com/2017/04/learn-elixir-one-video/
https://en.wikipedia.org/wiki/Elixir_(programming_language)

PHP: Personal Home Page

Alex Beasley — Mon, 11 Dec 2023 00:22:47 +0000

PHP(Hypertext Preprocessor) is an open source, server side scripting language which has been one of the most popular web development tools since its inception. Created in 1993 by Danish-Canadian programmer Rasmus Lerdorf, its original implementation was for Rasmus personal home page (PHP) but was eventually changed to represent PHP Hypertext Preprocessor.

PHP code is usually processed on a web server by a PHP interpreter and the results are sent to the client with HTML. Server side processing has the additional benefits of greater performance and more secure transfer of user data. With PHP making its request on the server side, this will also give access to server resources like access to the database. The standard PHP interpreter is powered by the Zend Engine and is a free software that is licensed and released through PHP.

Why learn PHP in 2023?

PHP continues to be one of the most relevant and widely used programming languages used with web development. Since PHP can be embedded directly into HTML, it is easy to integrate server logic with front end code. It can support procedural and object-oriented programing styles. PHP has numerous frameworks like Laravel, Symfony and Codelgniter which can simplify the development of web applications. Content Management Systems (CMS), like WordPress are built with PHP. Other examples like Facebook, Yahoo, Tumblr and Wikipedia(along with 65% of the worlds top 1 million websites) are built using PHP. As of 2015, PHP is one of the used languages on the web (most of that coming from WordPress which runs 25% of internet sites).

Variables

PHP variables are containers created to store information and can support various data types such as strings, integers, floating point numbers, Boolean, arrays, objects, NULL and resource. Unlike other programming languages, PHP has no command for declaring a variable. Once you assign a value, the variable is created. PHP is a loosely typed language, meaning that we do not have to tell what the data type is when the variable is created (but the option to declare was introduced in PHP 7). PHP will automatically associate the data type to the variable.

<?php
$name = "John";
$age = 25;

echo "Name: " . $name . "<br>";
echo "Age: " . $age . "<br>";
?>

In the example above, we show that the variable declaration must start with a $ and followed by the name of the variable. A variable must start with a letter or underscore and cannot start with a number. Variables are case sensitive so in the example above $age and $AGE would be two different variables.

Conditional statements and loops

Conditional statements allow us to control the flow of code execution based off different conditions. An if statement will execute if one condition is true and an else block will run if that statement executes to false. The addition of an else if is another conditional check after the initial if has executed to false. Switch statements allow us to to compare a value against multiple possible values and execute different code blocks accordingly.

<?php
$isLoggedOn = true;

if ($isLoggedON) {
   echo "Welcome, user!";
} else {
   echo "Please log in.";
}
?>

<?php
$grade = 85;

if ($grade >= 90) {
   echo "A";
} else if ($grade >= 80) {
   echo "B";
} else {
   echo "C";
}
?>

<?php
$dayOfWeek = "Monday";

switch ($dayOfWeek) {
   case "Monday":
      echo "It's the start of the week.";
      break;
   case "Thursday":
      echo "Its almost the weekend!";
      break;
   default:
      echo "It's just a regular day.";
}
?>

Loops allow us to run the same block of code a given number of times. Instead of writing one line to be ran multiple times, we can use loops to run a specific amount along as a certain condition is true. For loops are used when we know how many times we need to run and a while loop will continue to execute as long as condition is true. Do-while loops are the same as while but the code block will be executed at least once even if the starting condition is false.

<?php
for ($i = 1; $i <= 5; $i++) {
   echo "Iteration $i <br>";
}
?>

<?php
$count = 1;
while ($count <= 3) {
   echo "Count: $count <br>";
   $count++;
}
?>

<?php
$counter = 1;
do {
   echo "Counter: $counter <br>";
   $counter++;
} while ($counter <= 3);
?>

Take note that we still need to include the $ in our loops as we are declaring a variable to be used for counting.

Functions

PHP has numerous built in functions that allow us create reusable blocks of code to perform a specific task. A function is a block of statements that can be used repeatedly within a program. Functions must be declared using the function keyword and need to be executed in order to run. The code needed to run needs to be enclosed within curly braces. We can include parameters(set as default or declared elsewhere) with our functions that hold variables to be passed within. They can return a value or echo a statement.

<?php
//Function with parameters
function greetUser($name) {
   echo "Hello, $name!";
}

greetUser("John");
?>

<?php
//Function with default parameter value
function greetWithDefault($name = "Guest") {
   echo "Hello, $name!";
}

greetWithDefault(); 
?>

<?php
  function sum($arr) {
     return array_sum($arr);
    }
      $numbers = array(1, 2, 3, 4);
    echo sum($numbers);
 ?>

In the last code example we show the creation, use of an array and the use of a built in PHP function in array_sum. In order to create the array, we must use the array keyword and within our function, we declare the array_sum built in function.

Integrating PHP with HTML

PHP can be embedded within HTML files using specific tags. This will cause the page when rendered to send a request to the server which will process the PHP code, execute it and send the resulting HTML back to the client.

<!DOCTYPE html>
<html>
<body>

<h1><?php echo "Hello, World!"; ?></h1>
<?php
$color = "blue";
$size = "large";
echo "The {$size} {$color} balloon is floating.";
?>

</body>
</html>

In the code snippet above, we are using the echo statement to display 'Hello World!' on a basic page. The 'echo' statement is used to output our content, typically HTML, to the browser. Echo has no return value but can take multiple parameters which we show in the below code example.

<?php
$pageTitle = "My Website";
$content = "<p>Welcome to my site!</p>";

$stylesheet = "styles.css";
$javascript = "script.js";

echo "<link rel='stylesheet' href='$stylesheet'>";
echo "<script src='$javascript'></script>";

echo "<!DOCTYPE html>
      <html>
      <head>
         <title>$pageTitle</title>
      </head>
      <body>
         <h1>$pageTitle</h1>
         $content
      </body>
      </html>";
?>

PHP has the ability to directly output HTML tags which allows developers to generate HTML content based off code logic. This includes CSS stylesheets and JavaScript files. Adding these into the PHP tags allows for dynamic control over the loaded assets by the page. This can be fundamental to building dynamic and data driven web applications where the structure and content of the web page can change.

In conclusion, PHP has been at the forefront of web development since its creation in 1993. Originally created for personal home page development, it has evolved into a powerful server side scripting language. Even today in 2023 its impact is seen across the web due to its integration with front end tech and support for procedural and object-oriented programming.

Sources:
https://www.w3schools.com/php/default.asp
https://4geeksacademy.com/us/trends-and-tech/4geeks-academy-teaches-php-backend-language
https://en.wikipedia.org/wiki/PHP

JS13kGames: a game jam under 13kB

Alex Beasley — Sun, 26 Nov 2023 20:11:25 +0000

In the world of gaming, size has always been an ever expanding issue. The original Super Mario Bros for NES had a file size of 40kB and this was considered revolutionary in size reduction for at home use. Call of Duty: Warzone (as of November 2023) now has a requirement of 175 GB of space to play as the game is always expanding and adding on new features. But what if we wanted to make a smaller, yet equally as fun game.......

js13kGames is a competition where developers are required to have their game come in at under 13kB of space when compressed using ZIP. Contributors are not allowed to use external services or libraries, must utilize JavaScript with HTML5, and all aspects need to be under the required size limit.

Some common file sizes:
A typical email - 75kB
'Spacewar!'(1962 https://en.wikipedia.org/wiki/Spacewar!) - 18kB
High Res image in 75 PPI - 250 to 500kB
Average Webpage - 800kB for desktop and 400kb for mobile
Amazon data storage - 171,798,691,840,000kB
This blog post - 13kB

Created in 2012 by Andrzej Mazur, this yearly event is held between August 13th to September 13th. The size restrictions force developers to use different strategies for code optimization and asset compression in order to meet the size requirements.

Minification and Compression

One of the key strategies to reduce the size of your code is minification with compression. Some tools developers can use is the Terser compressor or gzip. Terser will reduce the file size by removing unnecessary characters, whitespace and renaming variables. Gzip will remove any redundancies or repeated strings with binary representation references.

//original code
function getScore(player) {
return player.currPoints + player.level * 2;
}

//terser mini code 
const c = (x) => x.currPoints + x.level * 2;

Kontra.js

https://straker.github.io/kontra/
Kontra is a lightweight JavaScript gaming micro-library specially optimized to be used for the js13kGame competition. Kontra aims to implement basic game components like asset loading, user inputs, loading loops, and sprites. This allows developers to spend less time worrying about smaller components and only focus on their personal game designs.

Examples of using the kontra library can be found in most of the games, but can be seen here with the only-one game:
https://github.com/cemalgnlts/only-one-js13k
https://js13kgames.com/entries/only-one

In the code section below we will use:

Sprite - a way to create your player object; can handle rectangles, images, and sheet animations
Vector - a 2d vector object that takes in x and y coordinates
keyPressed - checks if a key is currently pressed and an update() performs an action for each frame

//import the needed dependences from the kontra library
import { init, initPointer, initKeys, Sprite, Vector, Scene, keyPressed, getWorldRect, track, clamp, GameLoop } from "/kontra.mjs";

//create a player, we will use the Kontra features Sprite, Vector and keyPressed
const player = Sprite({
//set the initial position of the player
    x: WIDTH / 2 - 10,
    y: HEIGHT / 2 - 10,
    radius: 20,
    halfRadius: 20 / 2,

 //create the anchor point for the player, center of sprite
    anchor: Vector(0.5, 0.5),
    color: colors.player,

  //this is called every frame to update the players current state

    update() {
  //moves player a certain distance, DELTA
        this.advance(DELTA);

        let pos = Vector(0, 0);

 //check for key movements, either arrows or wsad
        if(keyPressed("w") || keyPressed("arrowup")) pos.y = -1;
        else if(keyPressed("s") || keyPressed("arrowdown")) pos.y = 1;

        if(keyPressed("a") || keyPressed("arrowleft")) pos.x = -1;
        else if(keyPressed("d") || keyPressed("arrowright")) pos.x = 1;

        if(pos.x !== 0 && pos.y !== 0) pos = pos.normalize();

        pos = pos.scale(0.15);

        this.dx = pos.x;
        this.dy = pos.y;

        if(this.x < this.radius) this.x = this.radius;
        else if(this.x > WIDTH - this.radius) this.x = WIDTH - this.radius;

        if(this.y < this.radius) this.y = this.radius;
        else if(this.y > HEIGHT - this.radius) this.y = HEIGHT - this.radius;
    },
//now that the player mechanics are laid out, this will render the sprite

    render() {
        context.fillStyle = this.color;

        context.beginPath();
        context.arc(0, 0, this.radius, 0, Math.PI * 2);
        context.fill();
    }
});

Lets look at how you create a new enemy that can shoot an arrow.

function newArcher(x, y) {
    return Sprite({
        x,
        y,
        speed: 3,
        width: 40,
        height: 40,
        color: colors.enemy,
        anchor: Vector(0.5, 0.5),
        time: 0,
        arrowDelay: 1,

First, we create a function that will take in an x and y position that will represent the archers location. We will use the Kontra Sprite feature to initialize some properties such as location, movement speed, size, color, anchor point, time, and arrow delay.

throwArrow() {
    if(this.time <= this.arrowDelay) return;        
    this.time = 0;
    const arrow = newArrow(this.x, this.y, player);
    arrows.push(arrow);
        },

Now we can create the functionality to shoot the arrows. We check if enough time has passed in-between the last arrow. If it has, we reset the time and create a new arrow function(included in the code) and add an arrow to the already initialized empty arrow array.

update() {
    const dist = this.position.subtract(player.position);

    if(dist.length() <= this.width * 7) {
        this.time += MS;
        this.throwArrow();
        return;
    }

    this.rotation += 0.05;

    const dir = dist.normalize()
        .scale(this.speed);

    this.x -= dir.x;
    this.y -= dir.y;
},

The update method will be called for each frame in the game loop. It calculates the distance between the player, and in this case, the archer. If the current player is within 7 times the width of the archer, it will increment the time and throwArrow function to shoot more arrows at the player. It then updates the archers position.

render() {
    context.fillStyle = this.color;

    context.beginPath();
    context.roundRect(0, 0, this.width, this.height, 10);
    context.fill();
}

Finally, we render the archer sprite. It sets the fill style of the archer, creates a rounded rectangle path for it to travel on using the roundRect method of Canvas 2D API.

In conclusion, JS13kGames not only challenges modern game development, but also helps create new methods for streamlining efficient code designs.

Unreal Engine: a brief history

Alex Beasley — Mon, 16 Oct 2023 01:59:52 +0000

What is a gaming engine? Gaming engines can be described as a software platform that is a combination of features that can help in the design and deployment of video games. They have built-in tools and libraries that help designers streamline development of gaming software. Normal features are graphics rendering, scripting, sound, input/output handling and many more. https://en.wikipedia.org/wiki/Game_engine

First gen Unreal

Initially development by Tim Sweeney, who went on to found Epic Games, it was released with Unreal video game in 1998. The game was groundbreaking at the time for its rapid, 3D first person shooter rendering, and would set a benchmark for the industry. Written in C++, this allowed most developers to be able to pick up the engine quickly. The advancement from 8-bit to 16-bit color added striking feature changes that few other engines were capable of producing. Another key feature Sweeney designed was a level editor that allowed developers to make changes to their layout in real time.

Unreal Engine 2

First released in 2002 along with the game America's Army, a recruitment tool for the US Army, this would be the first time we saw a console use Unreal in a live environment with Xbox live and Unreal Championship. Epic would continue to advance their graphics rendering with the addition of cinematic editing tools and features such as vehicles.

Unreal Engine 3

The third generation of Unreal was a huge jump for all of gaming design. First released in 2006 with Gears of War on the Xbox 360, UE 3 added a fully programmable shader functionality. This would allow all lighting/shadow rendering to be done pixel by pixel instead of by vertex. This was also one of the first times developers were able to be fully cross platforms and eventually with mobile logic a few years later. With the additional graphic capabilities, designers were able to adapt to not only FPS games but include RPG's such as Mass Effect.

Unreal Engine 4

Officially released in 2014 with the game Daylight, UE 4 was the first time the game design universe really opened up for everyone. With this release came the implementation of the Blueprint Visual Scripting system which is a scripting system that allows developers to create games through a visual node-based interface (https://docs.unrealengine.com/4.27/en-US/ProgrammingAndScripting/Blueprints/GettingStarted/). This would allow non or junior programmers to be able to work on game and design projects. This would also be one of the first times a gaming engine would embrace VR and AR components.

Unreal Engine 5

UE 5 was formally released for developers on April 5, 2022 and has continued to change the game for development and digital rendering. One of the most impressive features added was the Nanite engine, which allows users to import high quality photorealistic images to be easily added to games. Nanite uses virtualized geometry to stream only the necessary amount of detail in a real time environment. UE 5 is on par to become an integral part of not only game design but film and tv as well.

Setting up a FPS project

After you've downloaded UE 5, navigate to the create button to start a new project environment. Select the C++ project type and find the template_default selection through the engine folder. Select it as your basic level editor and save your first map as an FPS map.

Now that we've created the basic level code, we can open with Visual Studio in order to edit our C++ file. Within tools, find the Open Visual Studio (different from VS code) selection and launch the code with VS. Now that our code is viewable we should be able to see some basic C++ already built in through the template. To add some code of our own, we can create a display Hello World message with our FPSProjectGameModeBase.cpp and FPSProjectGameModeBase.h files.

The FPSProjectGameModeBase.cpp should look like this where we've created a StartPlay function that will run our message:

// Copyright Epic Games, Inc. All Rights Reserved.

#include "FPSProjectGameModeBase.h"

void AFPSProjectGameModeBase::StartPlay()
{
    Super::StartPlay();

    check(GEngine != nullptr);

    // Display a debug message for five seconds. 
    // The -1 "Key" value argument prevents the message from being updated or refreshed.
    GEngine->AddOnScreenDebugMessage(-1, 5.0f, FColor::Yellow, TEXT("Hello World, this is FPSGameModeBase!"));
}

and your FPSProjectGameModeBase.h should look like this where we need to override startplay so it displays the message at the beginning:

// Copyright Epic Games, Inc. All Rights Reserved.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/GameModeBase.h"
#include "FPSProjectGameModeBase.generated.h"

/**
 * 
 */
UCLASS()
class FPSPROJECT_API AFPSProjectGameModeBase : public AGameModeBase
{
    GENERATED_BODY()
 virtual void StartPlay() override;
};

Now we can head back to UE 5 and compile the code we just wrote. Once we've done that, we can our C++ code to the built in Blueprints by creating a blueprint class.

We can then set up our blueprint class as the default game mode and select the green play button at the top of the tool bar to see our message!

In conclusion, whether you're an experience developer or a complete Newb, the Unreal Engine has continued to raise the bar in game design. Each release has pushed the boundaries on what is possible. With the addition of Nanite and Lumen, the engine will break out of the gaming environment and change the film industry as well.

Sources:
https://en.wikipedia.org/wiki/Unreal_Engine
https://docs.unrealengine.com/5.0/en-US/setting-up-your-project-in-unreal-engine/

Make a guess the number game with JavaScript!

Alex Beasley — Sun, 08 Oct 2023 21:46:31 +0000

In this article we'll look at how to quickly make number guessing game that you can display to your friends!

First things first......DOWNLOAD VSCODE AND LIVE SERVER!!

Get Visual Studio Code here:

https://code.visualstudio.com/download

VS Code is one of the best code editors out there! Once you've downloaded that, you'll need to install live-server. This is how our program will be displayed on your HTML. Here's a great article on how to add the extension to your VS Code:

https://www.geeksforgeeks.org/how-to-enable-live-server-on-visual-studio-code/

Now that we're all set up, create a new storage folder on your desktop and open VS Code. Go to file and open your newly created folder. Once inside, go back to file and we will create three new files. Create an index.html (where we'll store all the html code), style.css (where we'll store all the styling elements for our webpage and app), and a script.js (where all our JavaScript code will be placed).

Lets dig into our HTML file first:

I've highlighted our newly created files and have already created some basic html code. I won't discuss every element here but take a look at this article for better explanation of the set up:
https://www.w3schools.com/html/html_basic.asp . We've added some meta data for our characters (translates our characters into computer speak) and viewport (sets our users visible area of the webpage). We've also linked to your style.css and script.js files.

Lets add some style to this thing:

Here we've added some basic css styles to our style.css file that will describe how we want our HTML elements to be displayed on your web page. This article will give you a quick insight on the setup and why we added what we did: https://www.w3schools.com/css/default.asp . There's a TON of different ways to style, so find a few you like and try them out! But you should have a visible website if you open with live-server at the bottom of your page.

Next lets head back to our HTML file and add the rest of our features:

The key take aways from this change is that we've added classes for easier access once we're inside our style and script files. We've also added some buttons an a selector for our number input. The type we choose is number but there are lots of other types to chose from, take a look at this article for other types:
https://www.w3schools.com/html/html_form_input_types.asp
Another fun feature we can add is emojis to our displays using either Windows + . or CTRL + CMD + Space on Mac. Our program is starting to come together a little more now!

Pretty cool!!! Now lets add style to all of our classes. Again, I won't go into every feature we've added. But if you're curious, take a look at the W3 site. Here are some highlights to look at:

We've isolated the left and right side of the site
Created a number box that we will eventually add our answer into using the the class
Set up our buttons and a hover feature, so the guess checker and the again button will change when we hover
Added a box for our guesses

Yikes that was a lot! Now onto the most fun part (at least IMO)- the coding! Lets open our script.js file and add some basic code to begin and some pseudocode on what we want some of the features to do.

For starters, we've added 'use strict' which is a new directive in ECMAScript 5. This will help us write the cleanest code possible by setting some basic rules and guidelines. Next, we've set up some starting variables we'll need to use throughout the program. SecretNumber uses some built in JavaScript functions like Math.floor() and Math.random() that lets us create a random number from 1 to 20 every time we refresh.

We've also created a display message function that lets us add our updated messages to the page. We set a guess constant which will convert our guessed number from our selector into a number. Another key item we've added is the document.querySelector method. This will be used for our initial input guess as well as our again button to reset everything.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

First, we check if the user inputs a guess, and display a message if not. Then we check if the user has inputted the correct guess. If they have, we display a winning message. If the user's guess is not the secretNumber, we move on to check their current score. If that score is still greater than 1, we move into another 'if' statement.

Inside of this displayMessage function call, we've included a ternary operation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) which at its core is just another 'if' statement. Within we check if the users guess is higher than the secretNumber. If it is, we display "Too high!" otherwise, it will display "Too low!" and decrease the score count (which we started with 20) by 1.

We do this until the number is found or the score gets below zero and ....... THATS IT! Your game should be working now.

Let's change the display using our document.selector and the classes we created at the beginning. One thing to notice is once the correct number is hit, we change the background color to green and display the secretNumber within our box.

Let's also add a check for highscore and add to our reset button functionality.

For the reset button, all we need to do is set all of our values back to their originals either from the html or the beginning of our script.js file.

Overall, I know this can seem daunting to someone completely new with JavaScript fundamentals, especially the styling. However, if you follow along line-by-line, you should have a game you could share and be proud of!

AWS CodeStar and deployment with CloudFormation

Alex Beasley — Mon, 02 Oct 2023 01:46:30 +0000

As software developers, there are constant onslaughts of new technologies to help streamline our job. AWS(Amazon Web Services) is a platform that provides access to secure servers all over the country to help store and deliver data for end users. They also offer a series of development tools to provide design, testing, and deployment all in one location.

AWS CodeStar

CodeStar simplifies the entire development process by providing building, testing, and deployment capabilities all within one browser. It provides templates with numerous coding languages, like CI/CD (continuous integration/continuous deployment) pipelines to quickly update application distribution and collaboration tools.

Within the AWS dev tools, find the create project under AWS CodeStar.

This offers numerous options for pre built project templates, but today we will be using node.js.

AWS CodeCommit

CodeCommit lets us use the common Git tools to store and examine changes within our code, but is stored and managed within the AWS service. You can still use GitHub if you'd like your code to stay more private.

AWS Cloud9 IDE environment

Cloud9 is an IDE(integrated development environment) provider through the AWS dev tools that let us create code through the web browser. This enables users to access their code anywhere they have internet access! Once our project is created, navigate to the IDE tab and create a new work environment using the chosen code language.

Once in the dev environment, code can be created and debugged like a typical IDE. I've made some edits to the provided AWS node.js template to display changes we can make.

After your code has been written or edited, we can use our classic git commands to stage and push into our online storage using CodeCommit. Once git push has been used, your code will immediately engage the code pipeline. This will cause AWS to test the pushed code with CodeBuild and after passing, sends to CloudFormation.

AWS CloudFormation

CloudFormation allows users to define specific server traffic guidelines to help continuous flow to end point with no breaks for your users. CloudFormation will then automate the deployment. So as soon as the code is pushed, the chain will begin for deployment. Once your code has passed the test, you can view your app by clicking view application.

AWS CodeStar with the help of CloudFormation deployment is a continually changing, helpful tool for developers to automate their developments and deliver a high quality applications.

Lets get this data!: Looking into JavaScript data types

Alex Beasley — Thu, 17 Aug 2023 18:27:40 +0000

What's a ghost's favorite data type? BOOlean!

Data types are a key concept in all programming languages but today we will examine some important JavaScript data types.

Number

The number data type represents integers or floating point numbers formatted to use a double-precision 64-bit binary format IEEE 754 value.

Double-precision floating-point format is a floating-point number format, usually occupying 64 bits in computer memory; it represents a wide dynamic range of numeric values by using a floating radix point.

View on Wikipedia

let age = 37; 
console.log(typeof age); => number

String

The string data type represents a series of characters within a single ('') or double ("") quotation marks. Strings can be created as primitive values or objects using the new String() constructor.

w3schools.com

let str = "Hello World!";
console.log(typeof str); => string

let num = 4;
console.log(typeof num); => number
num = String(num);
console.log(typeof num); => string
num = new String(num);
console.log(typeof num); => object

//Be careful not to use single ('') quotes when you 
//are including an apostrophe in your string 

let strApo = 'This can't work'; => SyntaxError: Unexpected identifier

let strApo = "This will fix the problem's";

Boolean

The Boolean data type can represent two values: true or false. This is the basis for all JavaScript comparison operations and conditional test.

w3schools.com

let booVal = true;
console.log(typeof booVal); => boolean

let numOne = 4;
let numTwo = 6;

let greatThan = numOne > numTwo;
console.log(greatThan); => false

let val = true;

if(val){
console.log("this is true");
} else {
console.log("this is false");
}; => "this is true"

Array

The Array data type is used to store multiple data values within a single variable which can be accessed from an index starting at 0 and separated by square brackets []. They can hold different data types including functions.

w3schools.com

          [0]    [1]     [2]         [3]                       [4]
let arr = [14 , "hello", true, function(a , b) { return a * b}, [3 , 4]];

//when type of is ran arrays will always show up as objects
console.log(typeof arr); => object

console.log(arr[0]); => 14

console.log(arr[3](3, 4)); => 12

console.log(arr[4][0]); => 3

Object

The Object data type represents a collection of key-value pairs with curly brackets {}, where each key has an identifier and corresponding value of any data type.

w3schools.com

let obj = {
  firstName: 'Alex',
  lastName: 'Beasley',
  inSchool: true,
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
};

console.log(typeof obj); => object

console.log(obj.fullName()); => Alex Beasley

console.log(obj.inSchool); => true

console.log(obj['firstName']); => Alex

Undefined, null and NaN

Undefined is a data type which is a variable that has been declared but has not been assigned a specific value yet. It can also represent a function return that doesn't actually return anything. Null is the intentional absence of any object value. NaN (Not a Number) is a value that is considered not a valid number.

let testVar; 
console.log(testVar); => undefined
console.log(typeof testVar); => undefined

function find(array, value){
 for(let i = 0; i < array.length; i++){
    if(array[i] === value){
      return array[i];
    }
  }
return null; // if value is not found return null
}

let array = [1, 2, 3, 4]
console.log(find(array, 5)); => null

let result = 10 / 'Alex';
console.log(result); => NaN

w3schools.com

Date types, whether privative or complex, help software devs store different kinds of information. By understanding and using JavaScripts built in data types, it will make our lives as developers much easier.