DEV Community: Zane

Rust + WASI: Application Monitoring

Zane — Wed, 23 Oct 2024 20:19:10 +0000

Introduction

Monitoring application performance is essential, particularly when operating across various platforms, including cloud servers, local machines, and edge devices. Traditionally, developing low-level system monitoring tools requires platform-specific code, which can become complex and challenging to maintain. Enter WASI (WebAssembly System Interface)—a powerful technology enabling developers to create cross-platform system tools that run efficiently in any environment without modifications. ⚙️🌍

Rust Code: Access the Monitoring / server code:

Rust: Github Rust-mon code

Why Use WASI for Metrics Automation? 🤔

Before we delve into the coding aspect, let’s outline why WASI is a game-changer for system monitoring and automation:

Cross-Platform Compatibility: Write code once and run it anywhere, eliminating the need for platform-specific modifications. Whether on Linux, Windows, or macOS, WASI operates consistently. 🖥️🎯
Lightweight: WASI programs are compact and efficient, making them ideal for environments with limited resources, such as edge devices or lightweight cloud containers. 🏗️
Easy Access to System Operations: WASI extends WebAssembly beyond the browser, providing access to system-level operations like file I/O, network access, and hardware metrics. 📊📡

Step-by-Step Guide: Setting Up WASI with Rust 🛠️

Let’s walk through how to set up WASI and Rust to build a cross-platform system monitoring tool.

Install Rust and the WASI Target: If you haven’t installed Rust yet, do so first. Then, add the WebAssembly target for WASI. 🚀

   rustup target add wasm32-wasi
   cargo new wasi_metrics
   cd wasi_metrics

Add Required Dependencies: You'll need the sysinfo crate to collect system metrics. Add this to your Cargo.toml: 📦

   [dependencies]
   sysinfo = "0.21.2"

Write the Metrics Collection Code: Now, let’s write Rust code to gather basic system metrics such as memory usage, CPU load, and disk space. 🧑‍💻💾

   use sysinfo::{System, SystemExt, DiskExt, ProcessorExt};

   fn main() {
       let mut system = System::new_all();
       system.refresh_all();

       println!("Total memory: {} KB", system.total_memory());
       println!("Available memory: {} KB", system.available_memory());

       let load_avg = system.load_average();
       println!(
           "Load Average: 1 min: {}, 5 min: {}, 15 min: {}",
           load_avg.one, load_avg.five, load_avg.fifteen
       );

       for (i, cpu) in system.processors().iter().enumerate() {
           println!("CPU {} load: {}%", i, cpu.cpu_usage());
       }

       for disk in system.disks() {
           println!(
               "Disk {}: Total size: {} KB, Available: {} KB",
               disk.name().to_str().unwrap(),
               disk.total_space() / 1024,
               disk.available_space() / 1024
           );
       }
   }

This code fetches and displays critical metrics such as memory, CPU usage, and disk space, utilizing the sysinfo crate to access system-level information. 🔍🖥️

Compile the Code to WebAssembly: Once the code is ready, compile it into WebAssembly using WASI:

   cargo build --target wasm32-wasi --release

The output will be a .wasm file that can be executed in any WASI-compliant environment. 🛠️

Run the WASI Module: Use Wasmtime, a lightweight WebAssembly runtime, to run your .wasm file:

   wasmtime target/wasm32-wasi/release/wasi_metrics.wasm

You will see the system metrics printed in the terminal, demonstrating how easily WASI and Rust can automate system monitoring across platforms. 🎉

Extending Functionality: Automate Metrics Collection 📈

To enhance this tool for real-world scenarios, let’s automate the metrics collection process by sending this data to a central server for aggregation. Here’s how to extend the code to send the collected metrics over a network, incorporating robustness to handle potential connection issues:

Send Metrics to a Central Server: Add networking functionality to transmit the collected data to a server, including retries for resilience.

   use std::net::TcpStream;
   use std::io::Write;
   use sysinfo::{System, SystemExt, ProcessorExt};
   use std::time::Duration;
   use std::thread;

   fn send_data(data: String) {
       let mut retry_count = 0;
       let max_retries = 5;

       while retry_count < max_retries {
           match TcpStream::connect("127.0.0.1:8080") {
               Ok(mut stream) => {
                   if let Err(e) = stream.write(data.as_bytes()) {
                       eprintln!("Failed to send data: {}", e);
                   } else {
                       println!("Data sent successfully");
                   }
                   break;
               }
               Err(e) => {
                   eprintln!("Could not connect to server: {}. Retrying... ({}/{})", e, retry_count + 1, max_retries);
                   retry_count += 1;
                   thread::sleep(Duration::from_secs(2));
               }
           }
       }

       if retry_count == max_retries {
           eprintln!("Failed to connect to server after {} attempts", max_retries);
       }
   }

   fn main() {
       let mut system = System::new_all();

       // Set a periodic collection of metrics (e.g., every 5 seconds)
       loop {
           system.refresh_all();

           let metrics = format!(
               "Total memory: {} KB\nAvailable memory: {} KB\nCPU load: {}%\n",
               system.total_memory(),
               system.available_memory(),
               system.processors()[0].cpu_usage()
           );

           send_data(metrics);

           thread::sleep(Duration::from_secs(5));
       }
   }

This code includes retry logic, attempting to connect to the server up to five times before giving up. This enhances robustness, especially in environments where the server may be temporarily unavailable. 🔄🛡️

Practical Applications of WASI + Rust in Metrics Automation 🔧

Cloud and Edge Monitoring: Use WASI to monitor the performance of applications running on distributed systems, ensuring a unified solution for both cloud-based servers and edge devices. ☁️📡
Containerized Environments: The lightweight runtime of WASI makes it ideal for collecting metrics in containerized environments like Docker or Kubernetes, where resources are constrained. 🐳
IoT Device Monitoring: For embedded and IoT devices, WASI allows developers to write a single tool that operates across different hardware platforms without modification. 🌐📟

Why WASI is a Game-Changer for Low-Level Automation 🚀

Consistency: A single codebase for all platforms. WASI abstracts the underlying OS, enabling seamless monitoring without OS-specific code. ⚙️
Security: The sandboxed nature of WebAssembly ensures that your monitoring tools run securely, even in untrusted environments. 🔐
Efficiency: WASI programs are fast and lightweight, making them perfect for resource-constrained environments like edge devices or cloud containers. ⚡

Conclusion: Build Efficient, Cross-Platform Monitoring Tools 🏁

Using WASI with Rust empowers developers to create efficient, portable, and secure system monitoring tools. Whether in the cloud, on edge devices, or in local environments, WASI simplifies the automation of system metrics collection without the hassle of platform-specific modifications. 📈🚀

Rust vs. Go: The benchmark

Zane — Wed, 17 Jan 2024 02:58:44 +0000

👋 Introduction

Lately, there's been a lot of buzz around Rust & Go. Why all the hype? Which one truly holds the edge? Let's fire up servers on 127.0.0.1 & find out.

GitHub: Here's the Simple HTTP Server code for benchmarking:

Web Server Code: Access the server implementations for both languages:

Rust: Rust-Serve Code

Go: Go-Serve Code

📦 Benchmarking Setup with WRK

To start, we'll need WRK(powerful benchmarking tool). If you're on a Mac like me - you'll find it on HomeBrew.

Benchmarking Tool: We're using WRK
Installation: Mac users, you can easily install WRK with Homebrew command:

  brew install wrk

🔧 Setting Up the Rust Web Server

For Rust, you'll need a specific directory structure to get started:

|_ Cargo.toml
|_ src
   |_ main.rs

Once everything is in place, initiating the server is straightforward with cargo:

cargo build --release
cargo run

🏗 Rust Web Server Code

Interested in the nitty-gritty? Dive into the server code!

Explore the Code

Rust: main.rs

// Import necessary modules and types from the actix_web crate and standard library.
use actix_web::{web, App, HttpServer, HttpResponse, Responder, middleware::Logger};
use std::env;

// The main function is marked with `actix_web::main`, which sets up an async runtime.
// This function will return a Result that, if an error occurs, will contain an `std::io::Error`.
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    // Set the environment variable for logging level to "info" for actix_web logs.
    env::set_var("RUST_LOG", "actix_web=info");
    // Initialize the env_logger logger, which will log information based on the RUST_LOG environment variable.
    env_logger::init();

    // Create and run an HTTP server.
    HttpServer::new(|| {
        // Initialize the Actix web application.
        App::new()
            // Add the Logger middleware to log all incoming requests.
            .wrap(Logger::default())
            // Define a route for the root URL ("/") that handles GET requests with the `root_handler` function.
            .route("/", web::get().to(root_handler))
    })
    // Bind the server to listen on the localhost address and port 8080.
    .bind("127.0.0.1:8080")?
    // Start the server and await its completion, handling any errors that occur.
    .run()
    .await
}

// Define an asynchronous handler function for the root URL.
// This function returns a type that implements the `Responder` trait, which can be converted into an HTTP response.
async fn root_handler() -> impl Responder {
    // Create an HTTP response with the status code 200 OK and the body "Hello, World! This is a cool web test!".
    HttpResponse::Ok().body("Hello, World! This is a cool web test!")
}

Rust: Cargo.toml

[package]
name = "rust_server"
version = "0.1.0"
edition = "2021"

[dependencies]
actix-web = "4.0"
actix-rt = "2.5"
env_logger = "0.9"

[dev-dependencies]
criterion = "0.3"

🔧 Setting Up the Go Web Server

For Go, Effortlessly run the following:

go run main.go

🏗 Go Web-Server Code

Interested in the nitty-gritty? Dive into the server code!

Server Code

Go: main.go

package main

import (
    "fmt"
    "log"
    "net/http"
    "time"
)

func main() {
    // Create a new ServeMux (router)
    mux := http.NewServeMux()

    // Register a handler function for the root URL
    mux.HandleFunc("/", rootHandler)

    // Create a new HTTP server
    server := &http.Server{
        Addr:    "127.0.0.1:8080",
        Handler: logRequest(mux), 
                // Wrap the handler with the logging middleware
    }

    // Start the server and log if there's an error
    fmt.Println("Server is running on http://127.0.0.1:8090")
    if err := server.ListenAndServe(); err != nil {
        log.Fatal("Error starting server: ", err)
    }
}

// rootHandler responds to requests at the root URL
func rootHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprint(w, "Hello, World! This is a cool web test!")
}

// logRequest is a middleware that logs each request
func logRequest(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        start := time.Now()
        next.ServeHTTP(w, r)
        duration := time.Since(start)
        log.Printf("Request: %s %s, Duration: %s\n", r.Method, r.URL.Path, duration)
    })
}

🔑 Rust or Go: Key Metrics

Rust: Metrics Release Mode Not Enabled

wrk -t2 -c100 -d30s --latency http://127.0.0.1:8080  
Running 30s test @ http://127.0.0.1:8080
  2 threads and 100 connections
  Thread Stats   Avg      Stdev     Max   +/- Stdev
    Latency     7.36ms    5.32ms  68.59ms   91.98%
    Req/Sec     7.54k     1.51k   12.48k    69.83%
  Latency Distribution
     50%    5.94ms
     75%    7.67ms
     90%   10.77ms
     99%   33.52ms
  450491 requests in 30.02s, 48.98MB read
Requests/sec:  15004.41
Transfer/sec:      1.63MB

Rust: Metrics Release - Enabled

wrk -t2 -c100 -d30s --latency http://127.0.0.1:8080                                                      
Running 30s test @ http://127.0.0.1:8080
  2 threads and 100 connections
  Thread Stats   Avg      Stdev     Max   +/- Stdev
    Latency     6.41ms    6.39ms  95.91ms   92.02%
    Req/Sec     9.47k     2.42k   14.95k    65.50%
  Latency Distribution
     50%    4.73ms
     75%    6.31ms
     90%   10.66ms
     99%   36.55ms
  566141 requests in 30.05s, 61.55MB read
Requests/sec:  18838.67
Transfer/sec:      2.05MB

Go: Metrics

wrk -t2 -c100 -d30s --latency http://127.0.0.1:8090                                                      
Running 30s test @ http://127.0.0.1:8090
  2 threads and 100 connections
  Thread Stats   Avg      Stdev     Max   +/- Stdev
    Latency     3.12ms    3.13ms  46.54ms   94.85%
    Req/Sec    18.12k     3.18k   25.08k    69.95%
  Latency Distribution
     50%    2.62ms
     75%    3.23ms
     90%    4.23ms
     99%   20.40ms
  1082616 requests in 30.05s, 160.03MB read
Requests/sec:  36021.81
Transfer/sec:      5.32MB

🔍 Lets Chart it.. Rust or Go?:

Let's compare performance of Rust server & Go servers:

📈 Rust Server Performance: Release Mode - Not Enabled

Average Latency: 7.36ms

Standard Deviation of Latency: 5.32ms

Maximum Latency: 68.59ms

Requests per Second: 7.54k (average), 12.48k (maximum)

Latency Distribution:

Median (50%): 5.94ms

75th Percentile: 7.67ms

90th Percentile: 10.77ms

99th Percentile: 33.52ms

Total Requests: 450,491 in 30.02 seconds

Data Transferred per Second: 1.63MB

📈 Rust Server Performance: Release Mode - Enabled

Average Latency: 6.41ms (down from 7.36ms)

Standard Deviation of Latency: 6.39ms (up from 5.32ms)

Maximum Latency: 95.91ms (up from 68.59ms)

Requests per Second:

Average: 9.47k (up from 7.54k)

Maximum: 14.95k (up from 12.48k)

Latency Distribution:

Median (50%): 4.73ms (down from 5.94ms)

75th Percentile: 6.31ms (down from 7.67ms)

90th Percentile: 10.66ms (up from 10.77ms)

99th Percentile: 36.55ms (up from 33.52ms)

Total Requests: 566,141 in 30.05 seconds (up from 450,491)

Data Transferred per Second: 2.05MB (up from 1.63MB)

📈 Go Server Performance:

Average Latency: 3.85ms

Standard Deviation of Latency: 3.72ms

Maximum Latency: 60.31ms

Requests per Second: 14.71k (average), 24.66k (maximum)

Latency Distribution:

Median (50%): 3.14ms

75th Percentile: 3.95ms

90th Percentile: 5.45ms

99th Percentile: 21.33ms

Total Requests: 879,736 in 30.06 seconds

Data Transferred per Second: 4.33MB

🤔 Well.. Is it Rust or is it Go?

Latency: The Go server has lower average, median, and 99th percentile latencies compared to the Rust server. This suggests that for each individual request, the Go server is generally able to respond faster.
Requests per Second (Throughput): The Go server is handling nearly double the number of requests per second compared to the Rust server. This indicates that the Go server has a higher throughput under the tested load conditions.
Data Transfer: The Go server is transferring more data per second than the Rust server, which aligns with its higher requests per second.

😎 Conclusion:

Well.. In this benchmark, the Go server is outperforming the Rust server in terms of both latency and throughput. However, it's important to note a few key considerations when interpreting these results:

Server Configuration: The configuration of the server, such as the use of asynchronous code, thread pool sizes, and other optimizations, can significantly impact performance.
Workload Characteristics: Depending on what the servers are actually doing (static file serving, database queries, CPU-bound tasks), the performance characteristics could change.
Benchmarking Conditions: The system on which the benchmark is run, other running processes, network conditions, and even the specifics of how wrk is used can affect the results.
Code Maturity and Optimizations: The specific Rust and Go code being benchmarked could be at different levels of optimization. More mature or optimized code can perform significantly better.

Terminal Style CV Using GitHub Pages

Zane — Mon, 15 Jan 2024 09:33:58 +0000

Introduction

Developing an engaging GitHub Page CV is an effective way to showcase your professional journey and technical skill set. Here’s an example of how you can create an interactive GitHub Page.

Website:Checkout My GitHub Page Curriculum vitae
Repository:Checkout My GitHub Page Repository
Github Pages: Link to Github Pages

Step 1: Setting Up Your GitHub Page

Start by creating a repository named .github.io. This naming convention automatically sets it up as a GitHub Page. Then, initialize your page with an index.html file, which will be the main landing page for visitors.

Step 2: Crafting a Custom HTML Layout with a Retro Terminal Theme

Personalize your page with HTML to create a distinct layout. Consider elements like a navigation bar, a custom footer, or an eye-catching header. Our example features a retro computer terminal theme, achieved through external CSS links, JavaScript libraries for interactivity, ASCII art using 'pre' tags, and a clear 'h1' header.

Our file structure for this design includes:

Your_Repository/
│
├── .gitignore     # Instructions for Git to ignore certain files
├── index.html     # Main HTML document for your GitHub Page
├── scripts.js     # JavaScript file for dynamic interactions
└── styles.css     # CSS file for custom styling

Step 3: Lets write the HTML

Creating a personalized layout using HTML can transform your GitHub page into a distinctive showcase. Here’s how to build a design that captivates:

HTML Customization: Your HTML skills are key to developing a unique layout for your GitHub page. Incorporate elements like a streamlined navigation bar, a custom footer, or an engaging header to elevate the aesthetic and functionality of your page.
Retro Terminal Theme Implementation: Our example demonstrates a layout that echoes the feel of a vintage computer terminal, achieved through:
- External CSS Links: We've integrated external CSS files for tailored styling, aligning with our retro theme.
- JavaScript Libraries for Enhanced Interactivity: JavaScript libraries have been utilized to construct a terminal-like interface that is both interactive and engaging.
- ASCII Art Utilizing <pre> Tags: To evoke the nostalgia of classic computer screens, ASCII art is displayed using <pre> tags.
- Prominent Heading with an <h1> Tag: A clear and bold heading is presented at the top of the page, capturing visitor attention right from the start.
Our Example Implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Sets the character encoding for the document -->
  <meta charset="UTF-8">
  <!-- Ensures proper rendering and touch zooming on mobile devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The title of the document, displayed in the browser's title bar or tab -->
  <title>Retro Computer Terminal</title>
  <!-- Link to an external CSS file for styling -->
  <link rel="stylesheet" href="styles.css">
  <!-- Link to xterm.css, a stylesheet for the xterm.js library -->
  <link rel="stylesheet" href="https://unpkg.com/xterm@5.2.1/css/xterm.css">
  <!-- JavaScript Libraries -->
  <!-- Link to xterm.js, a library for creating a terminal-like interface -->
  <script src="https://unpkg.com/xterm@5.2.1/lib/xterm.js"></script>
  <!-- Addon for xterm.js to fit the terminal to its container -->
  <script src="https://unpkg.com/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
  <!-- Addon for xterm.js to enable web links within the terminal -->
  <script src="https://unpkg.com/xterm-addon-web-links@0.8.0/lib/xterm-addon-web-links.js"></script>
  <!-- Link to a custom JavaScript file for additional functionality -->
  <script src="js/scripts.js"></script>
</head>
<body>
  <!-- Main container for the terminal-like design -->
  <div id="terminal">
    <!-- ASCII art representation of a computer terminal -->
    <pre>
      ███████╗░█████╗░███╗░░██╗███████╗
      ╚════██║██╔══██╗████╗░██║██╔════╝
      ░░███╔═╝███████║██╔██╗██║█████╗░░
      ██╔══╝░░██╔══██║██║╚████║██╔══╝░░
      ███████╗██║░░██║██║░╚███║███████╗
      ╚══════╝╚═╝░░╚═╝╚═╝░░╚══╝╚══════╝
   </pre>
   <pre>
      ██████╗░███████╗░█████╗░██████╗░████████╗░█████╗░███╗░░██╗
      ██╔══██╗██╔════╝██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗████╗░██║
      ██████╔╝█████╗░░███████║██████╔╝░░░██║░░░██║░░██║██╔██╗██║
      ██╔═══╝░██╔══╝░░██╔══██║██╔══██╗░░░██║░░░██║░░██║██║╚████║
      ██║░░░░░███████╗██║░░██║██║░░██║░░░██║░░░╚█████╔╝██║░╚███║
      ╚═╝░░░░░╚══════╝╚═╝░░╚═╝╚═╝░░╚═╝░░░╚═╝░░░░╚════╝░╚═╝░░╚══╝
   </pre>
    <!-- Heading for the webpage -->
    <h1> DevOps | Software Engineering | Automation </h1>
  </div>
</body>
</html>

Step 4: Styling with CSS for a Retro Terminal Look

Use CSS to give your GitHub Page a distinctive retro computer terminal appearance. Implement a monospace font for a classic look, and use a color scheme that mimics the style of vintage computer terminals. Ensure your design is responsive for different device sizes.

Monospace Font: Utilizes the classic 'VT323' monospace font, reminiscent of old computer terminals, to give your page an authentic retro feel.
Color Scheme: The iconic green text on a black background, typical of vintage terminals, is employed for visual impact.
Responsive Design: Ensures that your GitHub Page maintains its visual integrity across various devices, from desktops to mobile phones.
Our Example Implementation:

/* Basic styling for the body and HTML to fill the page, center content, and set a black background */
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000; /* Black background for the terminal effect */
}

/* Styling for the <pre> tag inside the terminal to mimic the green text on black background typical of old terminals */
#terminal pre {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  margin: 0; /* Remove default margin */
  padding: 0; /* Align with terminal content padding */
  white-space: pre-wrap; /* Wrap long lines and preserve spaces/line breaks */
  word-break: keep-all; /* Prevent breaking ASCII art */
}

/* Styling for the heading inside the terminal */
#terminal h1 {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  font-size: 1.2em; /* Slightly larger text for the heading */
  margin-bottom: 0.5em; /* Space below the heading */
}

/* Styling for any additional headers if needed */
#terminal h2 {
  color: #00ff00; /* Green text */
  font-family: 'VT323', monospace; /* Retro monospace font */
  font-size: 0.5em; /* Smaller text for subheadings */
  margin-bottom: 0.5em; /* Space below the heading */
}

/* Positioning and sizing of the terminal */
#terminal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%; /* Adjust as needed */
  height: 90%; /* Adjust as needed */
  transform: translate(-50%, -50%);
  background-color: #000000; /* Black background */
}

/* Font face import for VT323 font */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/vt323@latest/latin-400-normal.woff2) format('woff2'),
       url(https://cdn.jsdelivr.net/fontsource/fonts/vt323@latest/latin-400-normal.woff) format('woff');
}

/* Applying VT323 font to terminal text */
#terminal {
  font-family: 'VT323', monospace;
  font-size: 1em; /* Adjust size as necessary */
}

/* Responsive design for mobile devices */
@media screen and (max-width: 480px) {
  #terminal {
    width: 100%; /* Full width on small screens */
    height: auto; /* Flexible height */
    transform: translate(-50%, -50%);
  }

  #terminal pre {
    font-size: 0.5em; /* Smaller font size for ASCII art on mobile */
    line-height: 1; /* Adjust line height for structure */
    /* Additional adjustments as needed */
  }
}

Step 5: Incorporating Interactive Elements with JavaScript

Enhance your GitHub Page CV's interactivity using JavaScript to create dynamic features and engaging animations. This step-by-step guide helps you build an interactive terminal, adding a unique touch to your online presence.

JavaScript Implementation: Interactive Terminal

Class Definition: Begin by defining a JavaScript class CVTerminal that encapsulates all functionalities of your interactive terminal.

   class CVTerminal {
     // Define properties and methods here
   }

Initial Properties: Initialize essential properties such as the terminal object, animation status, and user commands within the class.

   class CVTerminal {
     terminal;
     isAnimating;
     command;
     // Other properties
   }

Constructor and Initialization Methods: The constructor sets up the terminal and its properties. Initialize all essential components here.

   constructor(config) {
     this.config = config;
     this.initializeProperties();
     // Additional initialization
   }

   initializeProperties() {
     this.terminal = new Terminal(this.config.terminal);
     // Further initialization
   }

Handling User Interactions: Implement functions to handle key events and process user commands, enhancing the terminal's interactivity.

   handleKeyEvent({ key, domEvent }) {
     // Logic for key event processing
   }

   handleCommand() {
     // Logic for executing commands
   }

   handleInput(key) {
     // Manage character inputs in the terminal
   }

   writePrompt() {
     // Display command prompt
   }

Animation and Display Functions: Add functions for starting and resetting CV display, and create a typing animation effect for text display.

   startFullCV() {
     // Start full CV display
   }

   resetFullCV() {
     // Reset CV display to initial state
   }

   animateTyping(text, pos, callback) {
     // Typing effect for text
   }

   interruptAnimation() {
     // Stop ongoing animations
   }

Configuring and Initializing the Terminal: Set up terminal configurations and initialize the CVTerminal class on window load.

   const terminalSettings = {
     fontSize: 9,
     fontFamily: "'VT323', monospace",
     // Additional settings
   };

   const cvInteraction = {
     commands: ["about", "experience", "projects"],
     // Other interactions
   };

   window.onload = () => {
     const terminalConfigurations = {
       terminal: terminalSettings,
       cv: cvInteraction,
       // More configurations
     };
     new CVTerminal(terminalConfigurations);
   };

Step 6: Sourcing and Integrating Data

Populate your GitHub Page CV with relevant data from your GitHub repositories, professional experiences and personal projects. Use JavaScript to dynamically display this information on your page.

*Our Example Data Collected from My Linkedin *:

// Part of the CVTerminal class
class CVTerminal {
  // ... other properties and methods ...

  // Method to handle the 'experience' command
  writeSection(sectionName) {
    if (sectionName === "experience") {
      const experienceData = this.cv[sectionName];
      this.displayExperience(experienceData);
    }
    // ... handle other sections ...
  }

  // Method to display experience data
  displayExperience(experienceData) {
    experienceData.forEach(item => {
      this.terminal.writeln(item);
    });
  }

  // ... rest of the class ...
}

// Example usage
const terminalConfigurations = {
  // ... other configurations ...
  cv: {
    // ... other sections ...
    experience: [
      "DevOps Engineer | Accenture (Apr 2023 - Present)",
      "Key Responsibilities: Deployment Delivery, Pipeline Maintenance, Tool Assessment",
      "Technologies: AWS, Azure, Docker, CI/CD with GitHub Actions",
      // Add more experience items here
    ],
    // ... other sections ...
  }
};

window.onload = () => {
  new CVTerminal(terminalConfigurations);
};

Step 7: Deploying with GitHub Actions

Utilize GitHub Actions for automated deployment and updates to your GitHub Page.

Step 8: Regular Updates

Keep your GitHub Page CV up-to-date with your latest projects, skills, and accomplishments.

Conclusion

A well-crafted GitHub Page CV, not only showcases your technical abilities but also your personal brand and professional growth. Happy coding 😎

McDeepNet: Training TensorFlow Model on McDonald’s Reviews

Zane — Mon, 15 Jan 2024 09:23:55 +0000

Introduction

Ever wondered what a Machine Learning (ML) model would say about a Big Mac or fries? Let’s find out.. McDeepNet is a playful ML experiment trained on a dataset of McDonald’s reviews.
Check out the source code and the app:

The Dataset Overview

The Kaggle dataset (McDonald’s Store Reviews) comprises 20,000 reviews of various McDonald’s stores.

Link to Dataset

The Technology Powering McDeepNet

TensorFlow and Keras: framework and functionalities needed for model building and training.
Pandas and NumPy: data processing and manipulation, enabling efficient handling of the review dataset.
Streamlit: used to convert our RNN model into an interactive web application, allowing for easy demonstration and user interaction.
Plotly Express: visualizing the insights derived from our model, making the data analysis both accessible and engaging.

Unraveling McDeepNet's Functionality

Let’s break it down..

a. Input Layer: Represents the initial input of text data (e.g., McDonald's reviews).
b. Tokenizer: This stage converts the input text into numerical sequences, making it understandable for the neural network.
c. Pre-trained RNN Model: This is the core of McDeepNet where the actual processing of sequential data takes place. It could be further detailed to show:
c.1 An Embedding Layer: Converts the sequences into dense vectors of fixed size.
c.2 LSTM Layers: Part of the RNN architecture, responsible for learning from the sequence data.
e. Output Layer: Generates the final output, which could be the transformed text or predictions based on the input.
Output: The final result produced by the model, such as generated text or analysis results.
g. Application Layer: Streamlit web app in McDeepNet's case.

Training Phase of McDeepNet

1.1 Crafting the Model Architecture:
The cornerstone of McDeepNet is its RNN model, tailored to handle sequences up to 442 characters in length.

Code Snippet:

from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Embedding, LSTM, Dense

# Set the maximum sequence length
max_length = 442

# Specify the vocabulary size (unique words in the dataset)
vocab_size = 10000  # Example value

# Define the embedding dimension
embedding_dim = 256  # Example value

# Constructing the RNN model architecture
model = Sequential()
model.add(Embedding(input_dim=vocab_size, output_dim=embedding_dim, input_length=max_length))
model.add(LSTM(128, return_sequences=True))
model.add(LSTM(128))
model.add(Dense(64, activation='relu'))
model.add(Dense(vocab_size, activation='softmax'))

# Compiling the model
model.compile(loss='categorical_crossentropy', optimizer='adam', metrics=['accuracy'])

# Summarizing the model
model.summary()

1.2 Preparing the Training Data:
The process of training McDeepNet on 20,000 McDonald's reviews is a meticulous one, involving several crucial preprocessing steps.

Code Snippet for Data Preparation:

import pandas as pd
from tensorflow.keras.preprocessing.text import Tokenizer
from tensorflow.keras.preprocessing.sequence import pad_sequences

# Importing the dataset
df = pd.read_csv('mcdonalds_reviews.csv')  # Replace this with the path to your dataset
reviews = df['review'].tolist()  # Assuming the reviews are stored in a column named 'review'

# Text preprocessing steps
# Cleaning involves lowercasing and removing non-alphabetic characters
cleaned_reviews = [re.sub(r'[^a-zA-Z\s]', '', review.lower()) for review in reviews]

# Tokenizer initialization and configuration
tokenizer = Tokenizer(num_words=10000)  # Setting the limit to the top 10,000 words
tokenizer.fit_on_texts(cleaned_reviews)

# Transforming text into integer sequences
sequences = tokenizer.texts_to_sequences(cleaned_reviews)

# Padding sequences to ensure uniform length
max_length = 442
padded_sequences = pad_sequences(sequences, maxlen=max_length, padding='post')

# The padded sequences are now ready to be fed into the RNN model

1.3 The Model Training Process:
This stage is vital as it involves actual training of the McDeepNet model.

Code Snippet for Model Training:

from tensorflow.keras.utils import to_categorical

# Assuming the padded sequences and tokenizer have been previously defined
# Convert the sequences into categorical data, suitable for classification tasks
labels = to_categorical(padded_sequences)

# Dividing the data into training and validation subsets
# Here, we use an 80% training and 20% validation split as an example
train_size = int(len(padded_sequences) * 0.8)
X_train, X_val = padded_sequences[:train_size], padded_sequences[train_size:]
y_train, y_val = labels[:train_size], labels[train_size:]

# Setting the number of epochs for the training process
epochs = 10  # This is an illustrative figure

# Commencing the training
history = model.fit(X_train, y_train, epochs=epochs, validation_data=(X_val, y_val))

# Option to save the model post-training
model.save('text_generation_model.h5')

Model Loading Phase

2.1 Retrieving the Trained Model:
After training, the model is preserved for future applications.

Code Snippet for Model Loading:

from tensorflow.keras.models import load_model

# Specify the file path of the saved model
model_path = 'text_generation_model.h5'

# Reloading the pre-trained model
model = load_model(model_path)

# The model is now primed for inference tasks
# You can employ methods like model.predict() for your specific needs

Reloading the Tokenizer

2.2 Accessing the Pre-Trained Tokenizer:
The tokenizer, an integral component trained alongside the dataset, plays a critical role in converting new textual inputs into structured sequences that the model can understand.

Code Snippet for Tokenizer Loading:

import pickle
from tensorflow.keras.models import load_model

# Reinstating the model (optional if already loaded)
model = load_model('text_generation_model.h5')

# Opening and loading the saved tokenizer
with open('tokenizer.pickle', 'rb') as handle:
    tokenizer = pickle.load(handle)

Preparing for Inference

3.1 Inference Readiness of the Model:
Having successfully loaded both the model and the tokenizer, your setup is now fully equipped to undertake text generation tasks using new inputs. Just need a UI..

Developing a Streamlit Web Application Interface

Crafting a user-friendly interface with Streamlit is a straightforward process.
This interface will allow users to input initial text (seed text), adjust generation settings, and then receive custom-generated reviews.

Code Snippet for Streamlit Interface:

import streamlit as st

# Setting up the title and subtitle for the web application
st.title("🍔 McDeepNet 🍔")
st.subheader("Experience AI-Generated McDonald's Reviews")

# Creating a form for user inputs
with st.form(key='user_input_form'):
    seed_text = st.text_input(label='Enter Seed Text for Review Generation')
    num_words = st.number_input('Select Number of Words to Generate', min_value=1, max_value=100, value=5)
    temperature = st.slider('Adjust Generation Creativity (Temperature)', min_value=0.1, max_value=3.0, value=1.0, step=0.1)
    submit_button = st.form_submit_button(label='Generate Review')

# Additional instructions or user guidance can be added here

3.1 Visualizing the Generated Results

Once the user inputs their preferences, McDeepNet produces a unique review.

Code Snippet for Result Generation and Visualization:

# Set up the UI
st.title("🍔 McDeepNet 🍔")
st.subheader("Trained on 20k McDonald's Reviews")
st.write("Welcome to McDeepNet! This project uses a Machine Learning (ML) model trained on 20,000 McDonald's reviews. It's an interesting application that employs Recurrent Neural Networks (RNNs) to learn patterns from these reviews and, subsequently, generates a unique review of its own. The model can produce varying types of output based on a seed text and a temperature parameter provided by the user.")
st.markdown("""
- [Checkout my GitHub](https://github.com/zanepearton)
- [My dev.to Article](https://dev.to/zanepearton/mcdeepnet-training-tensorflow-on-mcdonalds-reviews-21e)
""")

# Form to take user inputs
with st.form(key='my_form'):
    seed_text = st.text_input(label='Enter the seed text for sentence completion')
    num_words = st.number_input(label='Enter the number of words to generate', min_value=1, max_value=100, value=50)
    temperature = st.slider(label='Set temperature', min_value=0.1, max_value=3.0, value=1.0, step=0.1)
    submit_button = st.form_submit_button(label='Generate Text')

# Generate and display the output on form submission
if submit_button:
    sentence, word_probs = generate_sentence(model, tokenizer, max_length, seed_text, num_words, temperature)

    st.text_area("Generated Text", value=sentence, height=150)

    # Count word frequencies
    word_freq = Counter(sentence.split())

    # Create and display the tree diagram
    fig_tree = create_tree_diagram(word_probs)
    st.plotly_chart(fig_tree)

    # Create a DataFrame for the frequencies
    freq_df = pd.DataFrame(list(word_freq.items()), columns=['Word', 'Frequency'])

    # Create a Plotly Express scatter plot
    fig_scatter = px.scatter(freq_df, x='Word', y='Frequency', size='Frequency', title='Word Frequencies', 
                             hover_name='Word', size_max=60)
    st.plotly_chart(fig_scatter)

Project Repository

For more details, code, and updates, visit the McDeepNet GitHub repository: McDeepNet on GitHub.

Catch me on my Linktree 🔗
Linktree

Embracing Kubernetes: The Future of Containerized Applications

Zane — Mon, 15 Jan 2024 07:18:10 +0000

Introduction

In the rapidly evolving world of technology, Kubernetes has emerged as a game-changer for managing containerized applications. Often referred to as K8s, Kubernetes simplifies and automates the deployment, scaling, and operation of applications across a vast array of environments. Here are some key concepts with practical examples.

Kubernetes vs. Traditional Deployment: Understanding the Shift

Kubernetes reshapes application deployment strategies, offering significant advantages over traditional methods:

Aspect	Traditional Deployment	Kubernetes
Resource Efficiency	Prone to resource wastage	Optimizes resources with containerization
Scalability	Manual, error-prone scaling	Automated, demand-driven scaling
Deployment Speed	Time-intensive, slower	Rapid deployment and updates
High Availability	Complex and costly setup	Built-in high availability mechanisms
Portability	Environment-dependent	Uniform deployments across environments
Consistency	Varies across setups	Consistent due to container encapsulation

Delving into Kubernetes: Core Concepts and Examples

Kubernetes introduces several fundamental concepts, each serving a unique role in the container orchestration landscape:

Pods:
- What They Are: The smallest deployable units in Kubernetes, encapsulating one or more containers.
- Real-World Use: Hosting an Nginx server in a Pod for web content delivery.
```
apiVersion: v1
kind: Pod
metadata:
  name: nginx-pod
spec:
  containers:
  - name: nginx
    image: nginx
```

Services:

What They Are: Stable interfaces for network access to a set of Pods.
Real-World Use: Creating a Service to expose an Nginx Pod on a network.

apiVersion: v1
kind: Service
metadata:
  name: nginx-service
spec:
  selector:
    app: nginx
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80

Volumes:

What They Are: Mechanisms for persisting data in Kubernetes.
Real-World Use: Establishing a Persistent Volume Claim for data storage.

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: my-pvc
spec:
  accessModes:
  - ReadWriteOnce
  resources:
    requests:
      storage: 1Gi

Namespaces:
- What They Are: Logical partitions within a Kubernetes cluster.
- Real-World Use: Creating a development namespace for isolated testing.
```
apiVersion: v1
kind: Namespace
metadata:
  name: development
```

Deployments:

What They Are: Controllers for updating and scaling Pods and ReplicaSets.
Real-World Use: Managing an Nginx deployment to ensure service reliability and scalability.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.15.4
        ports:
        - containerPort: 80

Setting Up and Managing Your First Kubernetes Cluster: A Practical Scenario with Minikube

Scenario Overview

Imagine you're setting up a local development environment for Kubernetes using Minikube. The goal is to install Minikube, start a Kubernetes cluster, deploy an Nginx server, and manage its lifecycle including scaling and cleanup.

Step-by-Step Guide

Step 1. Install Minikube:

Objective: Install Minikube to create a local Kubernetes cluster.
Command:

 curl -Lo minikube https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64 \
 && chmod +x minikube
 sudo mv minikube /usr/local/bin/

Step 2. Start Minikube:
- Objective: Initialize the Kubernetes cluster using Minikube.
- Command:
```
 minikube start
```
Step 3. Verify Cluster Status:
- Objective: Check if the cluster is operational.
- Command:
```
 kubectl get nodes
```
Step 4. Access Kubernetes Dashboard:
- Objective: Open the Kubernetes dashboard for a user-friendly interface.
- Command:
```
 minikube dashboard
```
Step 5. Deploy Nginx:
- Objective: Deploy an Nginx server in the Kubernetes cluster.
- Command:
```
 kubectl create deployment nginx --image=nginx
```
Step 6. Expose Nginx Deployment:
- Objective: Make the Nginx server accessible outside the Kubernetes cluster.
- Command:
```
 kubectl expose deployment nginx --type=NodePort --port=80
```
Step 7. Monitor Nginx Deployment:
- Objective: Verify the status of the Nginx deployment.
- Command:
```
 kubectl get pods
```
Step 8. Scale the Deployment:
- Objective: Increase the number of Nginx replicas to handle more traffic.
- Command:
```
 kubectl scale deployment nginx --replicas=5
```
Step 9. Clean Up:
- Objective: Remove the Nginx deployment from your cluster.
- Command:
```
 kubectl delete deployment nginx
 kubectl delete service nginx
```
Step 10. Stop Minikube:
- Objective: Safely stop the Minikube cluster.
- Command:
```
  minikube stop
```

Monitoring & Logging with Prometheus and Fluentd

Monitoring with Prometheus

Prometheus is an open-source monitoring system with a time-series database. It collects metrics from configured targets at given intervals, evaluates rule expressions, displays results, and can trigger alerts if some conditions are observed to be true.

Setting Up Prometheus in Kubernetes:

Step 1. Install Prometheus using Helm: Helm is a package manager for Kubernetes, which simplifies the deployment of applications.

   helm install stable/prometheus --name my-prometheus

Step 2. Configure Prometheus: Prometheus configuration is stored in a file called prometheus.yml. Here's a basic snippet:

   global:
     scrape_interval: 15s

   scrape_configs:
     - job_name: 'kubernetes'
       scrape_interval: 5s
       kubernetes_sd_configs:
         - role: node

Step 3. Access Prometheus Dashboard: After deploying Prometheus, you can access its web UI via Kubernetes port forwarding:

   kubectl port-forward deploy/my-prometheus-server 9090

Then, access the dashboard at http://localhost:9090.

Logging with Fluentd

Fluentd is an open-source data collector for unified logging. It allows you to unify data collection and consumption for better use and understanding of data.

Setting Up Fluentd in Kubernetes:

Step 1. Install Fluentd using Helm:

   helm install stable/fluentd --name my-fluentd

Step 2. Configure Fluentd: Fluentd configuration is done in the fluent.conf file. Here's a simple example:

   <source>
     @type forward
     port 24224
     bind 0.0.0.0
   </source>

   <match *.**>
     @type stdout
   </match>

Step 3. Forward Logs:
Configure your applications to forward logs to Fluentd. This can be achieved through Kubernetes logging drivers.
Step 4. Check Logs:
You can check logs collected by Fluentd in the configured output destinations, which might be stdout, a file, or a log analytics platform.

Resources for Further Learning

Kubernetes Official Documentation:
- Your primary source for comprehensive and detailed information on all aspects of Kubernetes.
- Visit Kubernetes Documentation
Tutorials and Courses:
- KodeKloud: Offers interactive Kubernetes learning experiences.
- Explore KodeKloud
- Udemy: Hosts a variety of Kubernetes courses for different skill levels.
- Browse Kubernetes Courses on Udemy
Community Forums:
- Kubernetes Forums: Engage with the community, ask questions, and share knowledge.
- Join Kubernetes Forums
- Stack Overflow: A vast resource for troubleshooting and expert advice.
- Visit Stack Overflow - Kubernetes Tag
Monitoring with Prometheus:
- Dive into Prometheus for effective Kubernetes monitoring.
- Learn More about Prometheus
Logging with Fluentd:
- Explore Fluentd for robust logging solutions in Kubernetes.
- Get Started with Fluentd

Vim Text Editor: 15 Must-Know Commands for Developers

Zane — Thu, 11 Jan 2024 23:30:57 +0000

Vim's efficiency and flexibility make it a top choice for developers. Here are 15 advanced Vim commands, complete with examples, to elevate your coding experience:

1. Macros - Record and Execute

Automate repetitive tasks.

Record: q<letter>
Execute: @<letter>

   qa...q (record to 'a'), @a (execute 'a')

2. Global Replace with RegEx

Complex pattern-based replacements.

   :%s/old/new/gc

3. Tabs and Buffers

Efficient multiple file handling.

New tab: :tabnew <filename>
Switch tabs: gt, gT

   :tabnew file.txt, gt, :ls, :b2

4. Window Splits

View files side-by-side.

Vertical: :vsp <filename>
Horizontal: :sp <filename>

   :vsp file.txt

5. Folding - Code Organization

Hide/reveal code sections.

Create fold: zf#j

   zf3j, zo, zc

6. `:%` - Command Range

Apply commands to the entire file.

   :%norm A;

7. `c` - Change Command

Replace text efficiently.

cw

8. Visual Block Mode

Columnar text editing.

Enter: Ctrl+v

   Ctrl+v, I#<Esc>

9. `:g` - Global Command

Execute on lines matching a pattern.

   :g/pattern/d

10. Advanced Search and Navigation

Navigate through files.

Marks: m<letter>, 'a

   ma, 'a

11. `u` and `Ctrl+r` - Undo/Redo

Manage changes.

   u, Ctrl+r

12. `:r !<command>` - Insert Command Output

Insert external command output.

   :r !date

13. `:!` - Execute External Command

Run commands without leaving Vim.

   :!ls

14. `:diffthis` - Compare Files

Compare files in split view.

   :vsp file.txt, :diffthis

15. `:mksession` - Save Session

Save your current Vim session.

   :mksession /path/to/session.vim

Top 10 Essential Bash Commands for Devs

Zane — Tue, 09 Jan 2024 08:16:07 +0000

10 must-know bash commands, essential for any developer looking to harness the full potential of their software environment.

1. `grep` - Text Pattern Search

grep is used for searching text patterns within files. It's extremely useful for locating specific strings of text.

Basic: Search for "error" in filename.log:

  grep 'error' filename.log

Advanced: Use regular expressions to find complex patterns. For instance, searching for words starting with 'error' followed by a digit:

  grep -E 'error[0-9]' filename.log

2. `find` - Find Files

find helps locate files and directories based on criteria like name, size, or modification date.

Basic: Locate .txt files modified in the last 7 days:

  find . -name "*.txt" -mtime -7

Advanced: Combine with exec to perform actions, like deleting all .tmp files:

  find . -name "*.tmp" -exec rm {} \;

3. `tar` - File Compression and Extraction

tar is essential for creating and extracting compressed archive files, commonly used for backups and file transfers.

Basic: Create a tar.gz archive of a directory:

  tar -czvf archive.tar.gz /path/to/directory

Advanced: Extract specific files from an archive:

  tar -xzvf archive.tar.gz --include="specific_file"

4. `awk` - Text Processing

awk is a powerful text processing tool, ideal for manipulating data and generating reports.

Basic: Print the first column from filename.txt:

  awk '{print $1}' filename.txt

Advanced: Sum the values of a column:

  awk '{sum += $1} END {print sum}' filename.txt

5. `sed` - Stream Editor

sed allows developers to edit text in a scriptable way, useful for modifying files programmatically.

Basic: Replace "oldtext" with "newtext" in filename.txt:

  sed 's/oldtext/newtext/' filename.txt

Advanced: Delete lines matching a pattern:

  sed '/pattern_to_delete/d' filename.txt

6. `wget` - Download Files

wget enables file downloads from the internet, supporting various protocols like HTTP, HTTPS, and FTP.

Basic: Download a file from the web:

  wget http://example.com/file.zip

Advanced: Download a website for offline viewing:

  wget --mirror --convert-links --adjust-extension --page-requisites --no-parent http://example.com

7. `chmod` - Change File Permissions

chmod changes the file access permissions, crucial for managing the security of files.

Basic: Change a file's permissions to read and execute only:

  chmod 500 script.sh

Advanced: Set sticky bit on a directory to maintain user ownership:

  chmod +t /path/to/directory

Change a file's permissions to read and execute only.

chmod 500 script.sh

8. `crontab` - Schedule Tasks

crontab is used for scheduling tasks to run at specific times, automating routine background jobs.

Basic: Edit the crontab to add a new scheduled task:

  crontab -e

Advanced: Schedule a script to run at 5 PM every Friday:

  0 17 * * 5 /path/to/script.sh

9. `ssh` - Secure Shell Access

ssh provides secure remote access to other computers or servers over an unsecured network.

Basic: Connect to a remote server:

  ssh username@remote-server.com

Advanced: Use SSH tunneling for secure browsing:

  ssh -D 8080 -C -N username@remote-server.com

10. `tail -f` - Monitor File Changes

tail -f allows users to view the end of a file in real-time, helpful for monitoring log files.

Basic: Follow the updates to a log file in real time:

  tail -f /var/log/syslog

Advanced: Use with grep to filter logs:

  tail -f /var/log/syslog | grep error

Creating an Engaging GitHub Profile: A Step-by-Step Guide

Zane — Mon, 08 Jan 2024 11:42:30 +0000

Crafting a GitHub profile that stands out requires a blend of technical showcase and personal branding. Here's how you can create a unique and engaging GitHub profile, inspired by dynamic and detailed examples.

1. Start with a Dynamic Header

Begin your profile with an eye-catching header. You can use a typing effect SVG to make an animated greeting:

Code Snippet:

<div align="center">
    <h1>
        <img src="https://readme-typing-svg.herokuapp.com?font=Jetbrains+mono&size=40&duration=3000&color=33FF33&center=true&vCenter=true&width=435&lines=Hey..+I'm+[Your Name];This+is..;..my+Github..;" alt="Typing SVG"/>
    </h1>
</div>

2. Adding a Dynamic GIF

Add a dynamic GIF to your GitHub profile for a lively header:

Choose or Create a GIF: Find a GIF that represents you or your work. It could be a cool animation related to coding, a snippet of your projects, or anything that adds personality to your profile.
Add the GIF to Your README: Use the following HTML snippet to embed the GIF into your profile README. Replace the src attribute with the URL of your chosen GIF.

<div align="center">
    <p>
        <img src="URL_OF_YOUR_GIF.gif" alt="Descriptive Text for the GIF" />
    </p>
</div>

This step will create an eye-catching header with your chosen GIF centered on your GitHub profile page, making it more engaging and visually appealing to visitors. Remember to ensure your GIF's size and content are appropriate and professional for your GitHub profile.

2. Introduce Yourself

Create a section about yourself, detailing your role, expertise, and a bit about your interests.

Code snippet:

<div align="center">
    <h2>🚀 About Me</h2>
    <p>I'm a [Your Job Title] specializing in [Your Specialization]. I enjoy [hobbies/interests].</p>
</div>

3. Enable Easy Connections

Use badges for linking to your LinkedIn, portfolio, or any other professional websites.

Code snippet:

<div align="center">
    <!-- Replace href with your links -->
    <a href="https://www.linkedin.com/in/[YourLinkedIn]/">
        <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn"/>
    </a>
</div>

4. Visualize Your Commit History

Add a GitHub contributions snake animation to visualize your daily activity.

Code snippet:

<div align="center">
    <img src="https://raw.githubusercontent.com/[YourGitHub]/[YourGitHub]/output/github-contribution-grid-snake.svg" alt="GitHub Contribution Grid Snake Animation"/>
</div>

5. List Your Programming Languages

Showcase the languages you are proficient in with badges.

Code snippet:

<div align="center">
    <!-- Replace with your skills -->
    <img src="https://img.shields.io/badge/Java-007396?style=for-the-badge&logo=java&logoColor=white" alt="Java" />
    <!-- Add more badges similarly -->
</div>

6. Highlight Your Experience with Cloud Technologies

Detail your knowledge in cloud technologies with relevant badges.

Code snippet:

<div align="center">
    <!-- Replace with your cloud tech skills -->
    <img src="https://img.shields.io/badge/AWS-FF9900?style=for-the-badge&logo=amazonaws&logoColor=white" alt="AWS" />
    <!-- Add more badges similarly -->
</div>

7. Feature Your Framework Proficiency

Showcase the frameworks you're skilled at.

Code Snippet:

<div align="center">
    <!-- Replace with your framework skills -->
    <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React"/>
    <!-- Add more badges similarly -->
</div>

8. Showcase Your 3D Modeling, VR, and AR Expertise

Express your skills in the immersive technology space with a dedicated section for 3D Modeling, Virtual Reality, and Augmented Reality.

Code Snippet:

<div align="center">
    <h2 align="center" class="section-heading">👾 3D Modeling + VR + AR</h2>
    <p>In the immersive domains of 3D Modeling, Virtual Reality (VR), and Augmented Reality (AR), I apply my expertise to bring digital creations to life. Leveraging industry-leading tools, I sculpt, render, and animate with precision, while pioneering VR and AR experiences that bridge the gap between virtuality and reality.</p>
    <!-- Replace with your 3D/VR/AR skills -->
    <img src="https://img.shields.io/badge/Unreal_Engine-313131?style=for-the-badge&logo=unreal-engine&logoColor=white" alt="Unreal Engine"/>
    <img src="https://img.shields.io/badge/Unity-000000?style=for-the-badge&logo=unity&logoColor=white" alt="Unity"/>
    <!-- Add more badges similarly -->
</div>

By including this section, you highlight your ability to work with cutting-edge technology and create immersive digital experiences, showcasing a dynamic range of skills beyond traditional programming. Remember to replace placeholders and add or remove badges based on your specific skills and experiences.

9. Incorporate Stats and Visualizations

Include GitHub stats to provide a snapshot of your activity and contributions.

Code Snippet:

<div align="center">
    <img src="https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=[YourGitHub]&theme=github_dark" alt="[Your Name]'s GitHub Stats"/>
</div>

10. Keep It Updated

Regularly revisit and update your profile as you acquire new skills, complete more projects, or want to refresh the look and content.

Conclusion

Your GitHub profile is the front page of your coding journey. With these steps and snippets, you can make it a dynamic, informative, and attractive space that effectively showcases your skills, projects, and personality.

My Complete GitHub Profile Code

Below is the full source code for creating a dynamic and engaging GitHub profile. This comprehensive code includes all the snippets and sections described earlier, allowing you to replicate or customize the profile setup for your own use. Remember to replace placeholders with your own information and feel free to add or remove sections as per your profile needs. My Github


<div align="center">
    <h1><img src="https://readme-typing-svg.herokuapp.com?font=Jetbrains+mono&size=40&duration=3000&color=33FF33&center=true&vCenter=true&width=435&lines=Hey..+I'm+Zane;This+is..;..my+Github..;" alt="Typing SVG"/></h1>
    <p><img src="termina-gh.gif" alt="Terminal GH GIF" /></p>
</div>

<div align="center">
    <h2>🚀 About Me</h2>
<!--     <p><img src="termina-gh.gif" alt="Terminal GH GIF" /></p> -->
    <p>I'm a Software Engineering specialist at Accenture with Aus/EU citizenship, specializing in fusing software development with operations. My technical range is broad, covering everything from cloud platforms and containerization to CRM systems and 3D modeling.</p>
</div>

<div align="center">
<h2 align="center" class="section-heading">🌐 Connect with Me</h2>
<p> To connect with me, you can find my professional profile and contact details on LinkedIn, or explore more about my projects and interests through my Linktree. Feel free to reach out for collaborations, opportunities, or just to exchange ideas about the latest in software development and technology. Let's innovate together! </p>
<div align="center">
  <a href="https://www.linkedin.com/in/zane-pearton">
    <img src="https://img.shields.io/badge/ZanePearton-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn"/>
  </a>
  <a href="https://linktr.ee/zanepearton">
    <img src="https://img.shields.io/badge/Linktree-39E09B?style=for-the-badge&logo=Linktree&logoColor=white" alt="Linktree"/>
  </a>
<a href="https://github.com/ZanePearton/ZanePearton" target="_blank">
    <img src="https://img.shields.io/badge/View%20on%20GitHub-%230077B5.svg?&style=for-the-badge&logo=github&logoColor=white" alt="GitHub Skyline"/>
</a>
<img src="https://komarev.com/ghpvc/?username=ZanePearton&style=for-the-badge" alt="Profile views" />
</div>

<div align="center">
  <h2>🚀 Github Commits</h2>
    <p>This section highlights my daily activity, showcasing the repositories I am currently working on. Each commit represents progress or fixes to ongoing projects, reflecting my commitment to continuous improvement and collaborative development. Dive into the commit messages for insights into what I've been up to!</p>
  <img src="https://raw.githubusercontent.com/zanepearton/zanepearton/output/github-contribution-grid-snake-dark.svg#gh-dark-mode-only" alt="GitHub Contribution Grid Snake Animation Dark Mode"/>
  <img src="https://raw.githubusercontent.com/zanepearton/zanepearton/output/github-contribution-grid-snake.svg#gh-light-mode-only" alt="GitHub Contribution Grid Snake Animation Light Mode"/>
</div>

<h2 align="center" class="section-heading">💻 Programming Languages</h2>
<p> As a multifaceted engineer, I've developed proficiency in a diverse set of programming languages, each serving as a pivotal tool in my development arsenal. Here are the languages I wield to turn complex problems into elegant solutions</p>
<div align="center">
  <img src="https://img.shields.io/badge/Java-007396?style=for-the-badge&logo=java&logoColor=white" alt="Java" />
  <img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python"/>
  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript"/>
  <img src="https://img.shields.io/badge/PowerShell-5391FE?style=for-the-badge&logo=powershell&logoColor=white" alt="PowerShell"/>
  <img src="https://img.shields.io/badge/Bash-4EAA25?style=for-the-badge&logo=gnu-bash&logoColor=white" alt="Bash"/>
  <img src="https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white" alt="Swift"/>
  <img src="https://img.shields.io/badge/YAML-0A0A0A?style=for-the-badge" alt="YAML"/>
  <img src="https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&logo=go&logoColor=white" alt="Go"/>

</div>
<h2 align="center" class="section-heading">☁️ Cloud Technologies</h2>
<p>In the dynamic realm of cloud computing, I am proficient in leveraging leading cloud platforms and technologies to architect, deploy, and manage scalable, highly available, and fault-tolerant systems. Here's a glance at the cloud technologies I specialize in:</p>
<div align="center">
  <img src="https://img.shields.io/badge/AWS-FF9900?style=for-the-badge&logo=amazonaws&logoColor=white" alt="AWS" />
  <img src="https://img.shields.io/badge/Azure-0089D6?style=for-the-badge&logo=microsoftazure&logoColor=white" alt="Azure"/>
  <img src="https://img.shields.io/badge/GCP-4285F4?style=for-the-badge&logo=googlecloud&logoColor=white" alt="GCP"/>
  <img src="https://img.shields.io/badge/Terraform-623CE4?style=for-the-badge&logo=terraform&logoColor=white" alt="Terraform"/>
  <img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker"/>
  <img src="https://img.shields.io/badge/Jenkins-D24939?style=for-the-badge&logo=jenkins&logoColor=white" alt="Jenkins"/>
  <img src="https://img.shields.io/badge/Salesforce-00A1E0?style=for-the-badge&logo=salesforce&logoColor=white" alt="Salesforce"/>
</div>

<h2 align="center" class="section-heading">🔧 Frameworks</h2>
<p>Frameworks are the backbone of my development process, providing the structure and tools necessary for building scalable, efficient applications. My expertise spans a broad spectrum of frameworks, each chosen for its ability to facilitate rapid development and deliver robust functionality</p>
<div align="center">
  <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React"/>
  <img src="https://img.shields.io/badge/Svelte-FF3E00?style=for-the-badge&logo=svelte&logoColor=white" alt="Svelte"/>
  <img src="https://img.shields.io/badge/TensorFlow-FF6F00?style=for-the-badge&logo=tensorflow&logoColor=white" alt="TensorFlow"/>
  <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="npm"/>
  <img src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git"/>
  <img src="https://img.shields.io/badge/Visual%20Studio%20Code-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white" alt="Visual Studio Code"/>
  <img src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vuedotjs&logoColor=white" alt="Vue.js"/>
  <img src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green" alt="Django"/>
  <img src="https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=white" alt="Firebase"/>
  <img src="https://img.shields.io/badge/Bootstrap-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white" alt="Bootstrap"/>
  <img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white" alt="Node.js"/>
  <img src="https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white" alt="Flask"/>
  <img src="https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white" alt="Flutter"/> 
</div>

<h2 align="center" class="section-heading">👾 3D Modeling + VR + AR</h2>
<p>In the immersive domains of 3D Modeling, Virtual Reality (VR), and Augmented Reality (AR), I apply my expertise to bring digital creations to life. Leveraging industry-leading tools, I sculpt, render, and animate with precision, while pioneering VR and AR experiences that bridge the gap between virtuality and reality.</p>
<div align="center">
  <img src="https://img.shields.io/badge/Unreal_Engine-313131?style=for-the-badge&logo=unreal-engine&logoColor=white" alt="Unreal Engine"/>
  <img src="https://img.shields.io/badge/Unity-000000?style=for-the-badge&logo=unity&logoColor=white" alt="Unity"/>
  <img src="https://img.shields.io/badge/3DS_Max-0696D7?style=for-the-badge&logo=autodesk&logoColor=white" alt="3DS Max"/>
  <img src="https://img.shields.io/badge/Maya-0696D7?style=for-the-badge&logo=autodesk&logoColor=white" alt="Maya"/>
  <img src="https://img.shields.io/badge/Rhino-801010?style=for-the-badge&logo=rhinoceros&logoColor=white" alt="Rhino"/>
  <img src="https://img.shields.io/badge/MeshLab-FF4000?style=for-the-badge" alt="MeshLab"/>
  <img src="https://img.shields.io/badge/ZBrush-5491F1?style=for-the-badge" alt="ZBrush"/>
  <img src="https://img.shields.io/badge/Revit-FF9E0B?style=for-the-badge&logo=autodesk&logoColor=white" alt="Revit"/>
  <img src="https://img.shields.io/badge/ArchiCAD-0081CF?style=for-the-badge" alt="ArchiCAD"/>
  <img src="https://img.shields.io/badge/Oculus-1C1E20?style=for-the-badge&logo=oculus&logoColor=white" alt="Oculus"/>
</div>

<div align="center">
<h2 align="center" class="section-heading"> 💻 Github Stats</h2>
<p>Peek into my GitHub stats to see how I juggle code, coffee, and collaborations! Dive in to check out the milestones of my digital journey!</p>
 <table align="center" width="100%" height="100%" >
    <tr>
       <td><img style="border: none;" src="https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=zanepearton&theme=github_dark" alt="Zane's GitHub Stats"/></td>   
       <td><img style="border: none;" src="https://github-readme-streak-stats.herokuapp.com/?user=zanepearton&theme=merko" alt="Zane's Contribution Streak"/></td>
    </tr>
 </table>

 <table align="center" width="100%" height="100%" >
    <tr>
        <td><img style="border: none;" src="https://github-profile-summary-cards.vercel.app/api/cards/stats?username=zanepearton&theme=github_dark" alt="Zane's GitHub Stats"/></td>
        <td><img style="border: none;" src="https://github-profile-summary-cards.vercel.app/api/cards/productive-time?username=zanepearton&theme=github_dark&utcOffset=10" alt="Zane's GitHub Stats"/>
        <td><img style="border: none;" src="https://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username=zanepearton&theme=github_dark" alt="Zane's GitHub Stats"/></td>
        <td><img style="border: none;" src="https://github-profile-summary-cards.vercel.app/api/cards/most-commit-language?username=zanepearton&theme=github_dark" alt="Zane's GitHub Stats"/></td>
    </tr>
 </table>
</div>

DEV Community: Zane

Rust + WASI: Application Monitoring

Introduction

Rust Code: Access the Monitoring / server code:

Why Use WASI for Metrics Automation? 🤔

Step-by-Step Guide: Setting Up WASI with Rust 🛠️

Extending Functionality: Automate Metrics Collection 📈

Practical Applications of WASI + Rust in Metrics Automation 🔧

Why WASI is a Game-Changer for Low-Level Automation 🚀

Conclusion: Build Efficient, Cross-Platform Monitoring Tools 🏁

Rust vs. Go: The benchmark

👋 Introduction

GitHub: Here's the Simple HTTP Server code for benchmarking:

📦 Benchmarking Setup with WRK

🔧 Setting Up the Rust Web Server

🏗 Rust Web Server Code

Explore the Code

🔧 Setting Up the Go Web Server

🏗 Go Web-Server Code

Server Code

🔑 Rust or Go: Key Metrics

🔍 Lets Chart it.. Rust or Go?:

📈 Rust Server Performance: Release Mode - Not Enabled

📈 Rust Server Performance: Release Mode - Enabled

📈 Go Server Performance:

🤔 Well.. Is it Rust or is it Go?

😎 Conclusion:

Terminal Style CV Using GitHub Pages

Introduction

Step 1: Setting Up Your GitHub Page

Step 2: Crafting a Custom HTML Layout with a Retro Terminal Theme

Step 3: Lets write the HTML

Step 4: Styling with CSS for a Retro Terminal Look

Step 5: Incorporating Interactive Elements with JavaScript

Step 6: Sourcing and Integrating Data

Step 7: Deploying with GitHub Actions

Step 8: Regular Updates

Conclusion

McDeepNet: Training TensorFlow Model on McDonald’s Reviews

Introduction

The Dataset Overview

The Technology Powering McDeepNet

Unraveling McDeepNet's Functionality

Training Phase of McDeepNet

Model Loading Phase

Reloading the Tokenizer

Preparing for Inference

Developing a Streamlit Web Application Interface

3.1 Visualizing the Generated Results

Project Repository

Embracing Kubernetes: The Future of Containerized Applications

Introduction

Kubernetes vs. Traditional Deployment: Understanding the Shift

Delving into Kubernetes: Core Concepts and Examples

Setting Up and Managing Your First Kubernetes Cluster: A Practical Scenario with Minikube

Scenario Overview

Step-by-Step Guide

Monitoring & Logging with Prometheus and Fluentd

Monitoring with Prometheus

Setting Up Prometheus in Kubernetes:

Logging with Fluentd

Setting Up Fluentd in Kubernetes:

Resources for Further Learning

Vim Text Editor: 15 Must-Know Commands for Developers

1. Macros - Record and Execute

2. Global Replace with RegEx

3. Tabs and Buffers

4. Window Splits

5. Folding - Code Organization

6. :% - Command Range

7. c - Change Command

8. Visual Block Mode

9. :g - Global Command

10. Advanced Search and Navigation

11. u and Ctrl+r - Undo/Redo

12. :r !<command> - Insert Command Output

13. :! - Execute External Command

14. :diffthis - Compare Files

15. :mksession - Save Session

Top 10 Essential Bash Commands for Devs

6. `:%` - Command Range

7. `c` - Change Command

9. `:g` - Global Command

11. `u` and `Ctrl+r` - Undo/Redo

12. `:r !<command>` - Insert Command Output

13. `:!` - Execute External Command

14. `:diffthis` - Compare Files

15. `:mksession` - Save Session

1. `grep` - Text Pattern Search

2. `find` - Find Files

3. `tar` - File Compression and Extraction

4. `awk` - Text Processing

5. `sed` - Stream Editor

6. `wget` - Download Files

7. `chmod` - Change File Permissions

8. `crontab` - Schedule Tasks

9. `ssh` - Secure Shell Access

10. `tail -f` - Monitor File Changes