Portfolio | Jonas Atienza

Hello!

1 of 1

                    -`
                  .o+`
                  `ooo/
                `+oooo:
                `+oooooo:
                -+oooooo+:
              `/:-:++oooo+:
            `/++++/+++++++:
            `/++++++++++++++:
          `/+++ooooooooooooo/`
          ./ooosssso++osssssso+`
        .oossssso-````/ossssss+`
        -osssssso.      :ssssssso.
      :osssssss/        osssso+++.
      /ossssssss/        +ssssooo/-
    `/ossssso+/:-        -:/+osssso+-
  `+sso+:-`                 `.-/+oso:
  `++:.                           `-/+/
  .`                                 `/

jonas @ jratienza.org

------------------------

Title: Software Engineer

OS: I use Arch, btw

Host: Probably a beatdown laptop or a company-issued macbook

Kernel: Updates when I remember to (something is broken)

Uptime: Chronically online

Packages: Out for delivery

Shell: bash, zsh, fish... Yes, I'm a nerd

Resolution: 20/20 vision (probably)

DE: Really?

WM: Hyprland (when it works)

Terminal: Yes

I'm a Full Stack Developer with expertise in building robust transaction systems and IoT applications.

As a cybersecurity enthusiast, I've participated in CTF competitions and have experience in system stress testing.

I'm skilled in multiple programming paradigms across 10+ languages including Go, Python, C/C++, and JavaScript.

Being fluent in polyglot microservices, I ensure interoperability between different languages and technologies.

I'm proficient in both frontend (React, Angular, Next.js, Astro) and backend (Node.js, Deno, Express, Go, Rust) development.

I'm passionate about operating systems, networking, and creating elegant solutions to complex problems.

When I'm not coding, you can find me producing music, creating motion graphics, or exploring new technologies.

I have an academic background in Computer Science from the University of the Philippines Los Baños.

I'm currently accepting projects as a freelance developer, so feel free to reach out if you have an interesting opportunity!

Experience

1 of 3

Projects

1 of 2

[ 2025 ]

jratienza.org

A Terminal UI (TUI) portfolio website built with Astro and Tailwind CSS.

Astro

Tailwind CSS

TypeScript

Designed and developed a personal portfolio website to showcase my skills and projects.

Implemented a beautiful Terminal UI (TUI) design using Tailwind CSS.

Almost zero dependencies, just Astro and Tailwind CSS. WIP: Remove Tailwind CSS dependency.

Built with Astro for fast performance and optimal user experience (and because it's easier to manage content).

Created interactive components to display project information and experience.

Implemented theme switching functionality to allow users to customize their experience.

Inspired by Lazygit, a terminal UI for Git.

[ 2024 ]

PARA!

A Multimodal Trip Planning Travel Companion and Public Transit Information System for the Philippines

General Transit Feed Specification (GTFS)

OpenTripPlanner (OTP)

OpenStreetMap (OSM)

React

Firebase Firestore

Firebase Hosting

Flutter

Dart

Leaflet & React Leaflet

Flutter Map (Leaflet implementation for Flutter)

Open Route Service (ORS)

Photon by Komoot (geocoder)

Google Cloud Platform (compute engine)

 PARA! Client  PARA! Manager

Home - PARA! Client

PARA! (Public transit Automated Routing Assistant) is a two-part system comprising a GTFS management web app and a cross-platform commute routing assistant

Multiple Routes - PARA! Client

Developed this project to fulfill my undergraduate capstone requirement at the University of the Philippines Los Baños

Add Alert - PARA! Client

The management application enables administrators to create, edit, visualize and export GTFS data

Trip Options - PARA! Client

The client-facing mobile app generates multiple route options with accurate fare calculations based on specifications set by the Land Transport Franchising and Regulatory Board (LTFRB, a regulatory body in the Philippines)

Trip Wizard - PARA! Manager

System includes a community alert feature for real-time transit information sharing

View Trip - PARA! Manager

Initially focused on Batangas province, supporting jeepneys, modern jeepneys, and buses

Add Stop - PARA! Manager

Client app achieved high user satisfaction ratings (6.30/7) in usability testing

Management app features include system metrics, trip visualization, and a multi-step route creation wizard

Addresses the lack of public transportation applications outside Metro Manila

Built with open-source technologies to encourage future community contributions

Skills - Tools

1 of 46



Angular

A platform and framework for building single-page client applications using HTML and TypeScript, developed and maintained by Google.

// Component Example
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="error"error</div>
    
    <div *ngIf="users">
      <h2>User List</h2>
      <ul>
        <li *ngFor="let user of users">
          {{ user.name }} - {{ user.email }}
          <button (click)="selectUser(user)">Details</button>
        </li>
      </ul>
    </div>
    
    <app-user-detail *ngIf="selectedUser" [user]="selectedUser"></app-user-detail>
  `,
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[] = [];
  selectedUser: User | null = null;
  loading = false;
  error = '';
  
  constructor(private userService: UserService) {}
  
  ngOnInit(): void {
    this.getUsers();
  }
  
  getUsers(): void {
    this.loading = true;
    this.userService.getUsers()
      .subscribe({
        next: (users) => {
          this.users = users;
          this.loading = false;
        },
        error: (err) => {
          this.error = 'Failed to load users';
          this.loading = false;
          console.error(err);
        }
      });
  }
  
  selectUser(user: User): void {
    this.selectedUser = user;
  }
}

// Service Example
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'api/users';
  
  constructor(private http: HttpClient) {}
  
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
  
  getUserById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }
}



Arduino

An open-source electronics platform with user-friendly hardware and software for creating interactive projects and IoT devices.

// LED Blinking Example

const int ledPin = 13;  // Pin for the LED
int ledState = LOW;     // Current state of the LED
unsigned long previousMillis = 0;  // Last time the LED was updated
const long interval = 1000;  // Interval at which to blink (milliseconds)

void setup() {
  // Set the digital pin as output
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);  // Initialize serial communication
  Serial.println("Arduino LED Blink Example");
}

void loop() {
  // Check if it's time to update
  unsigned long currentMillis = millis();
  
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;  // Save the last time
    
    // Toggle the LED state
    if (ledState == LOW) {
      ledState = HIGH;
    } else {
      ledState = LOW;
    }
    
    // Update the LED
    digitalWrite(ledPin, ledState);
    Serial.print("LED state: ");
    Serial.println(ledState == HIGH ? "ON" : "OFF");
  }
  
  // Check if there's serial input available
  if (Serial.available() > 0) {
    char incomingByte = Serial.read();
    Serial.print("Received: ");
    Serial.println(incomingByte);
  }
}



Artillery

A modern, powerful load testing toolkit that allows developers to test the performance and reliability of their APIs, microservices, and websites.

# Artillery YAML configuration file

config:
  target: "https://api.example.com"
  phases:
    - duration: 60
      arrivalRate: 5
      rampTo: 50
      name: "Warm up phase"
    - duration: 120
      arrivalRate: 50
      name: "Sustained load"
  defaults:
    headers:
      Content-Type: "application/json"
      Authorization: "Bearer {{ token }}"
  variables:
    userId:
      - "user1"
      - "user2"
      - "user3"

scenarios:
  - name: "API test scenario"
    flow:
      # Login and get token
      - post:
          url: "/auth/login"
          json:
            username: "testuser"
            password: "{{ PASSWORD }}"
          capture:
            - json: "$.token"
              as: "token"
      
      # Get user profile
      - get:
          url: "/api/users/{{ userId }}"
          expect:
            - statusCode: 200
            - contentType: "application/json"
      
      # Create a new resource
      - post:
          url: "/api/resources"
          json:
            name: "Test Resource"
            description: "Created during load test"
          capture:
            - json: "$.id"
              as: "resourceId"
          expect:
            - statusCode: 201
      
      # Verify resource creation
      - get:
          url: "/api/resources/{{ resourceId }}"
          expect:
            - statusCode: 200
            - hasProperty: "name"
            - equals:
                - path: "$.name"
                  value: "Test Resource"



Astro

Knowledge of Astro.build for building static sites and apps

---
const title = "Welcome to My Astro Site";
---

<div>
  <h1>{title}</h1>
  <p>This is a simple static site built with Astro.</p>
</div>



C

Knowledge of C programming for low-level system development and embedded systems

#include <stdio.h>

int main() {
  printf("Hello, World!\n");
  return 0;
}



C#

A modern, object-oriented programming language developed by Microsoft that runs on the .NET platform.

using System;

class Program
{
  static void Main(string[] args)
  {
    Console.WriteLine("Hello, C#!");
    
    var numbers = new int[] { 1, 2, 3, 4, 5 };
    foreach (var num in numbers)
    {
      Console.WriteLine($"Number: {num}");
    }
  }
}



C++

Experience with C++ for systems programming, algorithms, and competitive programming

#include <iostream>

int main() {
  std::cout << "Hello, World!" << std::endl;
  return 0;
}



CSS

Cascading Style Sheets language that describes the presentation of a document written in HTML, allowing developers to control layout and appearance.

/* Basic styling for a modern website */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --background-color: #f9f9f9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
}



Cybersecurity

The practice of protecting systems, networks, and programs from digital attacks, encompassing technologies and processes designed to secure digital information.

# Example of basic network scanning with Nmap
nmap -sV -sC -oA scan_results 192.168.1.0/24

# Simple intrusion detection system rule (Snort)
alert tcp any any -> $HOME_NET 22 (msg:"Potential SSH Brute Force"; \
  flow:to_server; threshold:type threshold, track by_src, count 5, seconds 60; \
  sid:1000001; rev:1;)

# Linux firewall rule using iptables
iptables -A INPUT -p tcp --dport 22 -m state --state NEW -m recent \
  --set --name SSH
iptables -A INPUT -p tcp --dport 22 -m state --state NEW -m recent \
  --update --seconds 60 --hitcount 4 --rttl --name SSH -j DROP

# Password hashing in Python
import hashlib, os

def hash_password(password):
    salt = os.urandom(32)
    key = hashlib.pbkdf2_hmac(
        'sha256',
        password.encode('utf-8'),
        salt,
        100000
    )
    return salt + key

# Secure coding practice - prevent SQL injection
prepared_stmt = "SELECT * FROM users WHERE username = ? AND password = ?"
db.execute(prepared_stmt, (username, password_hash))



Dart

A client-optimized programming language for fast apps on multiple platforms, developed by Google and used extensively for Flutter.

void main() {
  // Variables and types
  var name = 'Dart';
  String language = 'Dart';
  int version = 2;
  double floatNum = 2.5;
  bool isAwesome = true;
  
  // String interpolation
  print('Hello, $name ${version + 0.5}!');
  
  // Lists
  final frameworks = ['Flutter', 'AngularDart', 'Firebase'];
  frameworks.forEach((framework) => print(framework));
  
  // Creating an instance of a class
  final person = Person('John', 30);
  person.greet();
  
  // Using a Future
  fetchData().then((result) {
    print('Data: $result');
  }).catchError((error) {
    print('Error: $error');
  });
}

class Person {
  final String name;
  final int age;
  
  // Constructor
  Person(this.name, this.age);
  
  // Method
  void greet() {
    print('Hello, my name is $name and I am $age years old.');
  }
}

Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () {
    return 'Data loaded successfully';
  });
}



Deno

A secure runtime for JavaScript and TypeScript built on V8, focusing on security, simplicity, and modern JavaScript features.

// Basic HTTP server in Deno
import { serve } from "https://deno.land/std/http/server.ts";

const port = 8000;

const handler = (request: Request): Response => {
  const url = new URL(request.url);
  
  if (url.pathname === "/") {
    return new Response("Hello from Deno!", {
      headers: { "content-type": "text/plain" },
    });
  }
  
  if (url.pathname === "/json") {
    return new Response(
      JSON.stringify({ message: "Hello", timestamp: new Date() }),
      {
        headers: { "content-type": "application/json" },
      }
    );
  }
  
  return new Response("Not Found", { status: 404 });
};

console.log(`HTTP server running at http://localhost:${port}`);
await serve(handler, { port });

// File operations using Deno's secure APIs
const text = await Deno.readTextFile("./data.txt");
console.log(text);

await Deno.writeTextFile("./output.txt", "Hello from Deno!");

// Using permissions explicitly
// Run with: deno run --allow-net --allow-read=./data.txt --allow-write=./output.txt app.ts



Docker

A platform that enables developers to build, package, and run applications in containers, ensuring consistency across environments.

# Dockerfile for a Node.js application
FROM node:14-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

# Docker Compose file
version: '3'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_USER: user
      POSTGRES_DB: myapp



Flask

A lightweight and flexible Python web framework that provides tools and features for building web applications, with a focus on simplicity and extensibility.

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
import os

app = Flask(__name__)
CORS(app)

# Database configuration
app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL', 'sqlite:///app.db')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

# Model definition
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    
    def __repr__(self):
        return f'<User {self.username}>'
    
    def to_dict(self):
        return {
            'id': self.id,
            'username': self.username,
            'email': self.email
        }

# API routes
@app.route('/api/users', methods=['GET'])
def get_users():
    users = User.query.all()
    return jsonify([user.to_dict() for user in users])

@app.route('/api/users/<int:user_id>', methods=['GET'])
def get_user(user_id):
    user = User.query.get_or_404(user_id)
    return jsonify(user.to_dict())

@app.route('/api/users', methods=['POST'])
def create_user():
    data = request.json
    
    if not data or 'username' not in data or 'email' not in data:
        return jsonify({'error': 'Username and email required'}), 400
    
    user = User(username=data['username'], email=data['email'])
    db.session.add(user)
    
    try:
        db.session.commit()
        return jsonify(user.to_dict()), 201
    except Exception as e:
        db.session.rollback()
        return jsonify({'error': str(e)}), 400

# Error handlers
@app.errorhandler(404)
def not_found(e):
    return jsonify({'error': 'Resource not found'}), 404

@app.errorhandler(500)
def server_error(e):
    return jsonify({'error': 'Internal server error'}), 500

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)



Flutter

Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase using Dart.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}



Git

A distributed version control system for tracking changes in source code during software development, enabling collaborative work.

# Initialize a new Git repository
git init

# Clone an existing repository
git clone https://github.com/username/repository.git

# Check status of the repository
git status

# Stage changes for commit
git add file.txt
git add .  # Stage all changes

# Commit changes
git commit -m "Add new feature"

# View commit history
git log
git log --oneline --graph

# Create and switch to a new branch
git branch feature-branch
git checkout feature-branch
# or in one command
git checkout -b feature-branch

# Merge branches
git checkout main
git merge feature-branch

# Pull changes from remote
git pull origin main

# Push changes to remote
git push origin main

# Reset changes
git reset --hard HEAD~1  # Reset to the previous commit



Go

A statically typed, compiled, and concise language developed by Google. It's designed for building scalable and concurrent systems.

package main

import "fmt"

func main() {
  fmt.Println("fmt.Println in Go")
}



Google Cloud Platform

A suite of cloud computing services that runs on the same infrastructure that Google uses for its end-user products, offering tools for compute, storage, networking, and more.

# Deploying a containerized app to Google Cloud Run
gcloud builds submit --tag gcr.io/PROJECT_ID/IMAGE_NAME

# Create a Cloud Run service with the container image
gcloud run deploy SERVICE_NAME \
  --image gcr.io/PROJECT_ID/IMAGE_NAME \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated

# Setting up a Cloud SQL instance
gcloud sql instances create INSTANCE_NAME \
  --database-version=POSTGRES_13 \
  --tier=db-g1-small \
  --region=us-central1

# Create a Cloud Storage bucket
gcloud storage buckets create gs://BUCKET_NAME \
  --location=us-central1 \
  --uniform-bucket-level-access

# Pub/Sub messaging
# Create a topic
gcloud pubsub topics create TOPIC_NAME

# Create a subscription to the topic
gcloud pubsub subscriptions create SUBSCRIPTION_NAME \
  --topic=TOPIC_NAME \
  --ack-deadline=60



Grafana

An open-source analytics and monitoring platform for visualizing and analyzing metrics from various data sources through customizable dashboards.

# Grafana Dashboard JSON Model Example

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": "-- Grafana --",
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "gnetId": null,
  "graphTooltip": 0,
  "id": 1,
  "links": [],
  "panels": [
    {
      "aliasColors": {},
      "bars": false,
      "dashLength": 10,
      "dashes": false,
      "datasource": "Prometheus",
      "fill": 1,
      "fillGradient": 0,
      "gridPos": {
        "h": 9,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "hiddenSeries": false,
      "id": 2,
      "legend": {
        "avg": false,
        "current": false,
        "max": false,
        "min": false,
        "show": true,
        "total": false,
        "values": false
      },
      "lines": true,
      "linewidth": 1,
      "nullPointMode": "null",
      "options": {
        "dataLinks": []
      },
      "percentage": false,
      "pointradius": 2,
      "points": false,
      "renderer": "flot",
      "seriesOverrides": [],
      "spaceLength": 10,
      "stack": false,
      "steppedLine": false,
      "targets": [
        {
          "expr": "rate(http_requests_total{job=\"api\"}[1m])",
          "legendFormat": "{{instance}} - {{method}}",
          "refId": "A"
        }
      ],
      "thresholds": [],
      "timeFrom": null,
      "timeRegions": [],
      "timeShift": null,
      "title": "HTTP Requests per Second",
      "tooltip": {
        "shared": true,
        "sort": 0,
        "value_type": "individual"
      },
      "type": "graph",
      "xaxis": {
        "buckets": null,
        "mode": "time",
        "name": null,
        "show": true,
        "values": []
      },
      "yaxes": [
        {
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        },
        {
          "format": "short",
          "label": null,
          "logBase": 1,
          "max": null,
          "min": null,
          "show": true
        }
      ],
      "yaxis": {
        "align": false,
        "alignLevel": null
      }
    }
  ],
  "refresh": "5s",
  "schemaVersion": 22,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-1h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "API Monitoring",
  "uid": "apimonitoring",
  "version": 1
}



GraphQL

A query language for APIs and a runtime for executing those queries with existing data, providing a more efficient alternative to REST.

type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

type Query {
  user(id: ID!): User
  allUsers: [User!]!
  post(id: ID!): Post
}

query GetUserWithPosts {
  user(id: "123") {
    name
    posts {
      title
    }
  }
}



HTML

The standard markup language for documents designed to be displayed in a web browser, forming the foundation of web content.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title> My Website </title> 
  <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
  <header> 
    <h1> Welcome to My Website </h1> 
    <nav> 
      <ul> 
        <li>  <a href="#"> Home </a>  </li> 
        <li>  <a href="#about"> About </a>  </li> 
        <li>  <a href="#contact"> Contact </a>  </li> 
      </ul> 
    </nav> 
  </header> 
  <main> 
    <section id="about"> 
      <h2> About Us </h2> 
      <p> We are a company dedicated to excellence. </p> 
    </section> 
  </main> 
  <footer> 
    <p> &copy; 2023 My Website </p> 
  </footer> 
</body> 
</html>



Jaeger

An open-source end-to-end distributed tracing system for monitoring and troubleshooting microservices-based applications, inspired by Google's Dapper.

# Jaeger Configuration (docker-compose.yml)

version: '3'

services:
  jaeger:
    image: jaegertracing/all-in-one:latest
    ports:
      - "16686:16686"  # UI
      - "14268:14268"  # Jaeger Collector HTTP
      - "14250:14250"  # Jaeger Collector gRPC
      - "5775:5775/udp"  # Jaeger agent - compact
      - "6831:6831/udp"  # Jaeger agent - compact
      - "6832:6832/udp"  # Jaeger agent - binary
      - "5778:5778"  # Jaeger agent - configs
      - "9411:9411"  # Zipkin compatible endpoint
    environment:
      - COLLECTOR_ZIPKIN_HTTP_PORT=9411

# Jaeger Client Configuration - Python Example

from jaeger_client import Config
from opentracing import global_tracer

def init_tracer(service_name):
    config = Config(
        config={
            'sampler': {
                'type': 'const',
                'param': 1,
            },
            'logging': True,
        },
        service_name=service_name,
    )
    return config.initialize_tracer()

if __name__ == "__main__":
    tracer = init_tracer("example-service")
    
    with tracer.start_span("say-hello") as span:
        span.set_tag("http.method", "GET")
        span.set_tag("http.url", "/api/hello")
        
        # Your business logic here
        time.sleep(0.1)
        
        # Create a child span
        with tracer.start_span("db-query", child_of=span) as child_span:
            child_span.set_tag("db.type", "sql")
            child_span.set_tag("db.statement", "SELECT * FROM users")
            
            # Simulate database query
            time.sleep(0.05)



JavaScript

A high-level, interpreted programming language that conforms to the ECMAScript specification. JavaScript is one of the core technologies of the World Wide Web, alongside HTML and CSS.

// Example of a simple JavaScript function
function greet(name) {
  return `Hello, ${name}!`;
}

// Using the function
const message = greet('World');
console.log(message); // Output: Hello, World!



k6

A modern load testing tool built for developers and performance engineers, designed for testing APIs, microservices, and websites using JavaScript.

import http from 'k6/http';
import { check, sleep } from 'k6';
import { Counter, Rate, Trend } from 'k6/metrics';
import { randomString } from 'https://jslib.k6.io/k6-utils/1.2.0/index.js';

// Custom metrics
const errorRate = new Rate('errors');
const requestDuration = new Trend('request_duration');
const successfulLogins = new Counter('successful_logins');

// Test configuration
export const options = {
  stages: [
    { duration: '30s', target: 20 }, // Ramp up to 20 users
    { duration: '1m', target: 20 },  // Stay at 20 users for 1 minute
    { duration: '30s', target: 0 },  // Ramp down to 0 users
  ],
  thresholds: {
    http_req_duration: ['p(95)<500'], // 95% of requests must finish within 500ms
    'errors': ['rate<0.1'],           // Error rate must be less than 10%
  },
};

// Setup function (called once per VU)
export function setup() {
  return {
    baseUrl: 'https://api.example.com',
    authToken: __ENV.AUTH_TOKEN || 'default-token',
  };
}

// Default function (called for each VU)
export default function(data) {
  // Login request
  const loginPayload = JSON.stringify({
    username: `user_${randomString(8)}`,
    password: 'password123',
  });
  
  const loginRes = http.post(`${data.baseUrl}/login`, loginPayload, {
    headers: { 'Content-Type': 'application/json' },
  });
  
  // Check if login was successful
  const loginSuccess = check(loginRes, {
    'login status is 200': (r) => r.status === 200,
    'has access token': (r) => r.json('token') !== undefined,
  });
  
  // If login successful, record it and use token for further requests
  if (loginSuccess) {
    successfulLogins.add(1);
    const token = loginRes.json('token');
    
    // Get user profile
    const profileRes = http.get(`${data.baseUrl}/profile`, {
      headers: { 'Authorization': `Bearer ${token}` },
    });
    
    // Record request duration
    requestDuration.add(profileRes.timings.duration);
    
    // Check profile request
    check(profileRes, {
      'profile status is 200': (r) => r.status === 200,
      'profile has user data': (r) => r.json('data') !== undefined,
    });
  } else {
    errorRate.add(1);
  }
  
  // Wait between iterations
  sleep(1);
}

// Teardown function (called once at the end)
export function teardown(data) {
  console.log('Test completed for ' + data.baseUrl);
}



Loki

A horizontally-scalable, highly-available log aggregation system designed for storing and querying logs from all your applications and infrastructure.

# Loki configuration (loki-config.yaml)
auth_enabled: false

server:
  http_listen_port: 3100
  grpc_listen_port: 9096

ingester:
  lifecycler:
    address: 127.0.0.1
    ring:
      kvstore:
        store: inmemory
      replication_factor: 1
    final_sleep: 0s
  chunk_idle_period: 1h       
  max_chunk_age: 1h           
  chunk_target_size: 1048576  
  chunk_retain_period: 30s    

schema_config:
  configs:
    - from: 2020-05-15
      store: boltdb-shipper
      object_store: filesystem
      schema: v11
      index:
        prefix: index_
        period: 24h

storage_config:
  boltdb_shipper:
    active_index_directory: /loki/boltdb-shipper-active
    cache_location: /loki/boltdb-shipper-cache
    cache_ttl: 24h         
    shared_store: filesystem
  filesystem:
    directory: /loki/chunks

limits_config:
  reject_old_samples: true
  reject_old_samples_max_age: 168h
  ingestion_rate_mb: 16
  ingestion_burst_size_mb: 24

# Querying logs with LogQL

# Basic query to retrieve logs from a specific app
{app="myapp"}

# Filter logs containing "error"
{app="myapp"} |= "error"

# Count rate of error logs over time
sum(rate({app="myapp"} |= "error"[1m]))

# Extract specific field and count occurrences
sum by (status_code) (count_over_time({app="myapp"} | json | status_code != "" [1m]))

# Filter on extracted fields
{app="myapp"} | json | response_time > 200 and status_code = "500"

# Promtail configuration (promtail-config.yaml)
server:
  http_listen_port: 9080
  grpc_listen_port: 0

positions:
  filename: /tmp/positions.yaml

clients:
  - url: http://loki:3100/loki/api/v1/push

scrape_configs:
  - job_name: system
    static_configs:
    - targets:
        - localhost
      labels:
        job: varlogs
        __path__: /var/log/*log



MongoDB

A document-oriented NoSQL database that stores data in JSON-like documents with dynamic schemas, ideal for modern app development.

// Creating a collection
db.createCollection("users");

// Inserting a document
db.users.insertOne({
  name: "John Doe",
  email: "john@example.com",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zipcode: "12345"
  },
  interests: ["coding", "music", "hiking"]
});

// Finding documents with query
db.users.find({
  age: { $gt: 25 },
  interests: { $in: ["coding"] }
}).sort({ name: 1 });



MySQL

A widely-used open-source relational database management system known for its reliability, performance, and ease of use.

CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  category VARCHAR(50),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO products (name, price, category)
VALUES ('Laptop', 999.99, 'Electronics'),
         ('Desk Chair', 199.50, 'Furniture');

SELECT p.name, c.name AS category_name, p.price
FROM products p
JOIN categories c ON p.category_id = c.id
WHERE p.price > 100
ORDER BY p.price DESC;



Networking

The practice of building and managing computer networks, including protocols, routing, switching, security, and troubleshooting network connectivity issues.

# Basic network configuration in Linux
# Set IP address
ifconfig eth0 192.168.1.100 netmask 255.255.255.0 up

# Configure DNS
cat /etc/resolv.conf
nameserver 8.8.8.8
nameserver 8.8.4.4

# View routing table
route -n

# Firewall rules with iptables
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp --dport 443 -j ACCEPT
iptables -A INPUT -p tcp --dport 22 -m state --state NEW -j ACCEPT

# Network debugging
# Check connectivity
ping -c 4 google.com

# Trace route
traceroute example.com

# View network statistics
netstat -tuln

# Scan for open ports
nmap -sS 192.168.1.1



Next.js

A React framework that enables server-side rendering, static site generation, and other advanced features to build production-ready React applications.

// Basic Next.js page component
import { useState, useEffect } from 'react';

export default function HomePage() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/data');
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchData();
  }, []);
  
  if (isLoading) return <p>Loading...</p>;
  
  return (
    <<div className="container">
      <<h1 className="title">Welcome to Next.js!<</h1>
      
      {data ? (
        <<div className="grid">
          {data.map((item) => (
            <<div className="card" key={item.id}>
              <<h2>{item.title}<</h2>
              <<p>{item.description}<</p>
            <</div>
          ))}
        <</div>
      ) : (
        <<p>No data available<</p>
      )}
    <</div>
  );
}

// API Route example
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const data = [
      { id: 1, title: 'Item 1', description: 'Description 1' },
      { id: 2, title: 'Item 2', description: 'Description 2' },
    ];
    
    res.status(200).json(data);
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}



Node.js

A JavaScript runtime built on Chrome's V8 JavaScript engine, designed for building scalable network applications.

// Example of a simple Node.js HTTP server
const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});



OpenAI

A platform offering AI models like GPT-4 for natural language processing, image generation, and other AI capabilities through APIs.

// Using OpenAI API with Node.js
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Text generation with GPT-4
async function generateText(prompt) {
  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: prompt }
      ],
      max_tokens: 500,
      temperature: 0.7,
    });

    return response.choices[0].message.content;
  } catch (error) {
    console.error('Error generating text:', error);
    throw error;
  }
}

// Function calling capability
async function analyzeData(data) {
  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4o',
      messages: [
        {
          role: 'system',
          content: 'You are a data analysis assistant.'
        },
        {
          role: 'user',
          content: `Analyze this data: ${JSON.stringify(data)}`
        }
      ],
      tools: [
        {
          type: 'function',
          function: {
            name: 'analyze_statistics',
            description: 'Calculate statistics on numerical data',
            parameters: {
              type: 'object',
              properties: {
                mean: { type: 'number' },
                median: { type: 'number' },
                mode: { type: 'array', items: { type: 'number' } },
                standardDeviation: { type: 'number' }
              },
              required: ['mean', 'median']
            }
          }
        }
      ],
      tool_choice: 'auto'
    });

    return response.choices[0];
  } catch (error) {
    console.error('Error in data analysis:', error);
    throw error;
  }
}



OpenTelemetry

An observability framework and toolkit designed to create and manage telemetry data such as traces, metrics, and logs in distributed systems.

# OpenTelemetry Configuration (otel-collector-config.yaml)

receivers:
  otlp:
    protocols:
      grpc:
        endpoint: 0.0.0.0:4317
      http:
        endpoint: 0.0.0.0:4318

processors:
  batch:
    timeout: 1s
    send_batch_size: 1024
  
  memory_limiter:
    check_interval: 1s
    limit_mib: 1000
    spike_limit_mib: 200

exporters:
  zipkin:
    endpoint: "http://zipkin:9411/api/v2/spans"
  
  prometheus:
    endpoint: "0.0.0.0:8889"
    namespace: test
  
  logging:
    loglevel: info

service:
  telemetry:
    logs:
      level: "debug"
  
  pipelines:
    traces:
      receivers: [otlp]
      processors: [memory_limiter, batch]
      exporters: [zipkin, logging]
    
    metrics:
      receivers: [otlp]
      processors: [memory_limiter, batch]
      exporters: [prometheus, logging]

# OpenTelemetry in Node.js

const { NodeSDK } = require('@opentelemetry/sdk-node');
const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
const { Resource } = require('@opentelemetry/resources');
const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');

const sdk = new NodeSDK({
  resource: new Resource({
    [SemanticResourceAttributes.SERVICE_NAME]: 'my-service',
    [SemanticResourceAttributes.SERVICE_VERSION]: '1.0.0',
  }),
  traceExporter: new OTLPTraceExporter({
    url: 'http://localhost:4318/v1/traces',
  }),
  instrumentations: [getNodeAutoInstrumentations()],
});

sdk.start()
  .then(() => console.log('Tracing initialized'))
  .catch((error) => console.log('Error initializing tracing', error));

// Gracefully shut down SDK on process exit
process.on('SIGTERM', () => {
  sdk.shutdown()
    .then(() => console.log('Tracing terminated'))
    .catch((error) => console.log('Error terminating tracing', error))
    .finally(() => process.exit(0));
});



PostgreSQL

A powerful, open-source object-relational database system known for reliability, feature robustness, and performance.

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  username VARCHAR(50) UNIQUE NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

INSERT INTO users (username, email)
VALUES ('johndoe', 'john@example.com');

SELECT u.username, COUNT(p.id) AS post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
GROUP BY u.id
HAVING COUNT(p.id) > 5
ORDER BY post_count DESC;



PrimeNG

A rich set of open-source UI components for Angular, featuring over 80 components built with accessibility and responsiveness in mind.

<!-- DataTable example -->
<p-table [value]="products" [paginator]="true" [rows]="10" 
          [showCurrentPageReport]="true" responsiveLayout="scroll"
          currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
  <ng-template pTemplate="header">
    <tr>
      <th>Code<</th>
      <th>Name<</th>
      <th>Category<</th>
      <th>Quantity<</th>
      <th>Price<</th>
      <th>Actions<</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{{product.code}}<</td>
      <td>{{product.name}}<</td>
      <td>{{product.category}}<</td>
      <td>{{product.quantity}}<</td>
      <td>{{product.price | currency:'USD'}}<</td>
      <td>
        <p-button icon="pi pi-pencil" styleClass="p-button-rounded p-button-success mr-2" 
                    (click)="editProduct(product)"><</p-button>
        <p-button icon="pi pi-trash" styleClass="p-button-rounded p-button-danger" 
                    (click)="deleteProduct(product)"><</p-button>
      <</td>
    </tr>
  </ng-template>
</p-table>

<!-- Dialog example -->
<p-dialog [(visible)]="productDialog" [style]="{width: '450px'}" 
            header="Product Details" [modal]="true" styleClass="p-fluid">
  <ng-template pTemplate="content">
    <div class="p-field">
      <label for="name">Name<</label>
      <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
      <small class="p-error" *ngIf="submitted && !product.name">Name is required.<</small>
    </div>
    
    <div class="p-field">
      <label for="price">Price<</label>
      <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"><</p-inputNumber>
    </div>
  </ng-template>
  
  <ng-template pTemplate="footer">
    <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"><</button>
    <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"><</button>
  </ng-template>
</p-dialog>



Prometheus

An open-source monitoring and alerting toolkit designed for reliability and scalability, specializing in time-series data collection and querying.

# Prometheus Configuration (prometheus.yml)

global:
  scrape_interval:     15s
  evaluation_interval:  15s

alerting:
  alertmanagers:
  - static_configs:
    - targets:
      - alertmanager:9093

rule_files:
  - "alerts.yml"

scrape_configs:
  - job_name: 'prometheus'
    static_configs:
      - targets: ['localhost:9090']
  
  - job_name: 'node_exporter'
    scrape_interval: 5s
    static_configs:
      - targets: ['node_exporter:9100']
  
  - job_name: 'api_service'
    metrics_path: '/metrics'
    scrape_interval: 10s
    static_configs:
      - targets:
        - 'api:8080'
        - 'api:8081'
    relabel_configs:
      - source_labels: [__address__]
        regex: '(.*):(.*)'
        target_label: instance
        replacement: '$1'

# PromQL Examples

# Simple query for HTTP request rate
rate(http_requests_total[5m])

# Filter by specific labels
rate(http_requests_total{job="api_service", status="500"}[5m])

# Aggregation by labels
sum(rate(http_requests_total[5m])) by (job, endpoint)

# Alert condition for high error rate
sum(rate(http_requests_total{status=~"5.."}[5m])) by (job) 
  / 
sum(rate(http_requests_total[5m])) by (job) > 0.1

# Recording rule example (rules.yml)
groups:
- name: example
  rules:
  - record: job:http_requests_total:rate5m
    expr: sum(rate(http_requests_total[5m])) by (job)
  
  - alert: HighErrorRate
    expr: job:http_errors:rate5m / job:http_requests_total:rate5m > 0.1
    for: 10m
    labels:
      severity: warning
    annotations:
      summary: "High error rate detected"
      description: "Error rate above 10% for {{$labels.job}} ({{$value}})"



Python

A high-level, interpreted programming language known for its readability and versatility in web development, data science, and automation.

def factorial(n):
    if n == 0 or n == 1:
        return 1
    else:
        return n * factorial(n-1)

class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    def greet(self):
        return f"Hello, my name is {self.name} and I am {self.age} years old."

person = Person("Alice", 30)
print(person.greet())



React

A JavaScript library for building user interfaces, particularly single-page applications. It's maintained by Meta and a community of individual developers and companies.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
      </button>
    </div>
  );
}

export default Counter;



React Native

A framework for building native mobile applications using JavaScript and React, allowing developers to create cross-platform apps.

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native';

const TodoApp = () => {
  const [tasks, setTasks] = useState([
    { id: '1', text: 'Learn React Native', completed: false },
    { id: '2', text: 'Build a mobile app', completed: false },
    { id: '3', text: 'Publish to app stores', completed: false },
  ]);

  const toggleTask = (id) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.task}
      onPress={() => toggleTask(item.id)}
    >
      <View style={[styles.status, { backgroundColor: item.completed ? '#4caf50' : '#f44336' }]} />
      <Text style={[styles.taskText, { textDecorationLine: item.completed ? 'line-through' : 'none' }]}>
        {item.text}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Todo App</Text>
      <FlatList
        data={tasks}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  task: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderRadius: 8,
    backgroundColor: 'white',
    marginBottom: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
    elevation: 2,
  },
  status: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 10,
  },
  taskText: {
    fontSize: 16,
  },
});

export default TodoApp;



Rust

A systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

fn main() {
  let numbers = vec![1, 2, 3, 4, 5];
  let sum: i32 = numbers.iter().sum();
  println!("The sum of the numbers is: {}", sum);
}



SQLite

A lightweight, serverless database engine that is self-contained, highly reliable, and embedded into applications.

CREATE TABLE todos (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO todos (title)
VALUES ('Learn SQLite'),
         ('Build an app'),
         ('Write documentation');

SELECT *
FROM todos
WHERE completed = 0
ORDER BY created_at ASC;



Supabase

An open-source Firebase alternative providing a PostgreSQL database, authentication, instant APIs, real-time subscriptions, and storage.

// Initialize Supabase client
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseKey = 'your-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)

// Authentication
// Sign up a new user
async function signUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password
  })
  
  if (error) {
    console.error('Error signing up:', error.message)
    return null
  }
  
  return data
}

// Database operations
// Fetch data with filters
async function getTasks(userId, status) {
  const { data, error } = await supabase
    .from('tasks')
    .select('id, title, description, status, created_at')
    .eq('user_id', userId)
    .eq('status', status)
    .order('created_at', { ascending: false })
  
  if (error) {
    console.error('Error fetching tasks:', error.message)
    return []
  }
  
  return data
}

// Real-time subscriptions
const subscription = supabase
  .channel('table-db-changes')
  .on('postgres_changes', 
    { event: 'INSERT', schema: 'public', table: 'tasks' }, 
    (payload) => {
      console.log('New task added:', payload.new)
      // Update UI with new task
    }
  )
  .subscribe()

// Storage operations
async function uploadAvatar(userId, file) {
  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`${userId}.png`, file, {
      contentType: 'image/png',
      upsert: true
    })
  
  if (error) {
    console.error('Error uploading avatar:', error.message)
    return null
  }
  
  return data.path
}



Tailwind CSS

A utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS.

<div class="container mx-auto px-4 py-8">
  <header class="mb-8">
    <h1 class="text-4xl font-bold text-gray-900 mb-2">
      Welcome to My Website
    </h1>
    <p class="text-lg text-gray-600">
      Built with Tailwind CSS
    </p>
  </header>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Feature 1</h2>
      <p class="text-gray-600">Lorem ipsum dolor sit amet.</p>
    </div>
    
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Feature 2</h2>
      <p class="text-gray-600">Consectetur adipiscing elit.</p>
    </div>
    
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 class="text-xl font-semibold text-gray-800 mb-2">Feature 3</h2>
      <p class="text-gray-600">Sed do eiusmod tempor incididunt.</p>
    </div>
  </div>
</div>



Tempo

Grafana Tempo is a high-scale, cost-effective distributed tracing backend that allows engineers to troubleshoot applications by visualizing service call flows.

# Tempo Configuration (tempo.yaml)

server:
  http_listen_port: 3200

distributor:
  receivers:
    jaeger:
      protocols:
        thrift_http:
          endpoint: "0.0.0.0:14268"
    otlp:
      protocols:
        grpc:
          endpoint: "0.0.0.0:4317"
        http:
          endpoint: "0.0.0.0:4318"
    zipkin:
      endpoint: "0.0.0.0:9411"

ingester:
  trace_idle_period: 10s
  traces_per_block: 1000
  max_block_duration: 5m

compactor:
  compaction:
    compaction_window: 1h
    max_compaction_objects: 1000000
    block_retention: 168h

storage:
  trace:
    backend: local
    block:
      bloom_filter_false_positive: .05
      index_downsample_bytes: 1000
      encoding: zstd
    local:
      path: /tmp/tempo/blocks
    pool:
      max_workers: 100
      queue_depth: 10000

# Using Tempo with OpenTelemetry - Example in Go

package main

import (
  "context"
  "log"
  "net/http"
  
  "go.opentelemetry.io/otel"
  "go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc"
  "go.opentelemetry.io/otel/sdk/resource"
  "go.opentelemetry.io/otel/sdk/trace"
  "go.opentelemetry.io/otel/propagation"
  semconv "go.opentelemetry.io/otel/semconv/v1.7.0"
)

func initTracer() (*trace.TracerProvider, error) {
  exporter, err := otlptracegrpc.New(context.Background(),
    otlptracegrpc.WithEndpoint("tempo:4317"),
    otlptracegrpc.WithInsecure(),
  )
  if err != nil {
    return nil, err
  }
  
  resources := resource.NewWithAttributes(
    semconv.SchemaURL,
    semconv.ServiceNameKey.String("my-service"),
    semconv.ServiceVersionKey.String("1.0.0"),
  )
  
  provider := trace.NewTracerProvider(
    trace.WithBatcher(exporter),
    trace.WithResource(resources),
  )
  
  otel.SetTracerProvider(provider)
  otel.SetTextMapPropagator(propagation.NewCompositeTextMapPropagator(
    propagation.TraceContext{},
    propagation.Baggage{},
  ))
  
  return provider, nil
}



Terraform

An infrastructure as code (IaC) tool by HashiCorp that allows you to define and provision infrastructure resources across multiple cloud providers using a declarative configuration language.

# Provider configuration for AWS
provider "aws" {
  region = "us-west-2"
  profile = "default"
}

# Create a VPC
resource "aws_vpc" "main" {
  cidr_block = "10.0.0.0/16"
  
  tags = {
    Name = "MainVPC"
    Environment = "Production"
  }
}

# Create a subnet within the VPC
resource "aws_subnet" "public" {
  vpc_id            = aws_vpc.main.id
  cidr_block        = "10.0.1.0/24"
  availability_zone = "us-west-2a"
  
  tags = {
    Name = "Public Subnet"
  }
}

# Define an EC2 instance
resource "aws_instance" "web_server" {
  ami           = "ami-0c55b159cbfafe1f0"
  instance_type = "t2.micro"
  subnet_id     = aws_subnet.public.id
  
  tags = {
    Name = "WebServer"
  }
}

# Output the instance public IP
output "web_server_ip" {
  value = aws_instance.web_server.public_ip
  description = "The public IP of the web server"
}



TypeScript

A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

// Example of a TypeScript interface and function
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;
}

function createUser(name: string, email: string): User {
  return {
    id: Math.floor(Math.random() * 1000),
    name,
    email
  };
}

const user = createUser('John Doe', 'john@example.com');



VB.NET

A multi-paradigm, object-oriented programming language implemented on the .NET Framework.

Imports System

Module Program
    Sub Main()
        Console.WriteLine("Hello, VB.NET!")
        
        Dim numbers As Integer() = {1, 2, 3, 4, 5}
        For Each num As Integer In numbers
            Console.WriteLine($"Number: {num}")
        Next
    End Sub
End Module



Vercel

A cloud platform for frontend frameworks and static sites, providing serverless functions and a global edge network for fast deployment and hosting.

// vercel.json configuration file
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ],
  "env": {
    "DATABASE_URL": "@database_url",
    "API_SECRET": "@api_secret"
  }
}

// Serverless API function (api/hello.js)
export default function handler(req, res) {
  const { name = 'World' } = req.query;
  
  return res.status(200).json({
    message: `Hello, ${name}!`,
    timestamp: new Date().toISOString()
  });
}

// Vercel CLI commands
// Deploy project
$ vercel

// Preview deployment
$ vercel --prod

// Environment variables
$ vercel env add DATABASE_URL

// List deployments
$ vercel ls

// Connect to a project
$ vercel link

Theme

1 of 4

                    -`
                  .o+`
                  `ooo/
                `+oooo:
                `+oooooo:
                -+oooooo+:
              `/:-:++oooo+:
            `/++++/+++++++:
            `/++++++++++++++:
          `/+++ooooooooooooo/`
          ./ooosssso++osssssso+`
        .oossssso-````/ossssss+`
        -osssssso.      :ssssssso.
      :osssssss/        osssso+++.
      /ossssssss/        +ssssooo/-
    `/ossssso+/:-        -:/+osssso+-
  `+sso+:-`                 `.-/+oso:
  `++:.                           `-/+/
  .`                                 `/

jonas @ jratienza.org

------------------------

Title: Software Engineer

OS: I use Arch, btw

Host: Probably a beatdown laptop or a company-issued macbook

Kernel: Updates when I remember to (something is broken)

Uptime: Chronically online

Packages: Out for delivery

Shell: bash, zsh, fish... Yes, I'm a nerd

Resolution: 20/20 vision (probably)

DE: Really?

WM: Hyprland (when it works)

Terminal: Yes

I'm a Full Stack Developer with expertise in building robust transaction systems and IoT applications.

As a cybersecurity enthusiast, I've participated in CTF competitions and have experience in system stress testing.

I'm skilled in multiple programming paradigms across 10+ languages including Go, Python, C/C++, and JavaScript.

Being fluent in polyglot microservices, I ensure interoperability between different languages and technologies.

I'm proficient in both frontend (React, Angular, Next.js, Astro) and backend (Node.js, Deno, Express, Go, Rust) development.

I'm passionate about operating systems, networking, and creating elegant solutions to complex problems.

When I'm not coding, you can find me producing music, creating motion graphics, or exploring new technologies.

I have an academic background in Computer Science from the University of the Philippines Los Baños.

I'm currently accepting projects as a freelance developer, so feel free to reach out if you have an interesting opportunity!

Switch item: <up/k/down/j>

Switch section: <left/right>

Jump to section: <1-5>

Contact: <:>