Keypup's SaaS solution allows engineering teams and all software development stakeholders to gain a better understanding of their engineering efforts by combining real-time insights from their development and project management platforms

Keypup

Building a DevOps Automated Deployment Pipeline using Flask, Aptible, CircleCI, and Prometheus

If you’ve never played the famous , raise your hand! Snake game I say that, but I suppose that nowadays, the new generation may never have heard of this game, which may seem a bit old-fashioned given the possibilities offered by today’s computers and the Web. And yet, there was a time when the Snake game was a game that all cell phone owners spent an inordinate amount of time playing. Yes, back then, we weren’t talking about smartphones, just telephones. It was a good time, as the saying goes, and Nokia popularized the game through its mobile devices, which were also a benchmark. Today, not much remains of Nokia’s domination of the mobile world and the Snake game. For those who are nostalgic for this game – and I’m one of them, I must admit – this tutorial will teach you how to recreate it for the Web. To do so, I’ll be using HTML5’s Canvas API and JavaScript. It’s also an opportunity to learn how to use classes in Javascript and to create an effective game loop for Web games. Creating the Web page for our Snake game To begin with, we’re going to create the Web page that will enable us to play the Snake game we’ll be developing in this tutorial. You’ll soon see that this Web page presents no difficulties whatsoever. Two divs, one for the page title and another to display the area where the snake will move. To this, I’ll add a little to center these divs by applying a fixed width to them: CSS https://gist.github.com/ssaurel/52d2a7ffd8b417fb48e27ae86237487f?embedable=true Design of the Snake class As I explained in the introduction to this tutorial, I’m going to use a dedicated Snake class to model the game. This will also allow you to discover how to manipulate classes in JavaScript. Our Snake will have the following properties: and to represent board size in width and height respectively. bw bh and represent the number of cells available for the board. nbx nby and to represent the size of a snake element in width and height. eltw elth and which represent the snake’s displacement vector. dirx diry and add a small margin to the width and height of snake elements so that the player can see the demarcation between each snake element. marginx marginy , , , which store the state of the moving arrows at a given moment. keyup keydown keyleft keyright stores the number of frames per second required to move the snake at the start of the game. startftps At the end of the constructor, an init method is called to initialize the snake at the start of the game. When a new game is to be started, simply call this init method again. This gives us the following code for our Snake class: https://gist.github.com/ssaurel/719918967c6bc4d5a0bde7252fdfc617?embedable=true In the init method, you can define other snake properties, such as a pointer to its head and a pointer to its tail. The elements array will store all the snake’s elements at a given moment. The points property is used to store points for the current game, while the level property is used to define how many points are accumulated to increase the game’s fps. The higher the number of fps, the faster the snake will move. Since the fps property represents the number of frames per second, we need to have a fpsinterval property valued at the result of dividing 1 second (or 1,000 milliseconds) by the desired number of fps. The principle of the Snake game The principle of the Snake game is simple: you have to guide the snake using the four directional arrows so that it eats the maximum number of apples that appear on the board. Each time you eat an apple, the snake grows by one element. As the snake grows, you’ll find it difficult to avoid touching its own tail. If you don’t, you’ll lose, and the score will start again from zero. Of course, every time you eat an apple, you score a point. It’s worth pointing out that the version of Snake we’re going to implement is the one where touching the edges of the board doesn’t make you lose. It just makes you tip over to the opposite side. The second versions of the Snake game were implemented in this way by Nokia. Since the snake has to eat an apple, we need to display this apple on the board in a random fashion, taking care not to generate an apple directly on an element of the snake. This gives us the following generatefood method for our Snake class: https://gist.github.com/ssaurel/01123c58385dfb7b2a43ca4d186eb0fd?embedable=true Snake on-screen rendering Our Snake class is progressing, and we now need to create a method for rendering the snake on the screen. We’ll also need to display the player’s number of points at a given time and, finally, display the apple to be eaten. The apple’s position is stored in the Snake class’s food property. To render the Snake on the screen, I’m using HTML5’s Canvas API. I’ll use this API’s drawing primitives to draw rectangles representing the various elements of the snake as well as the apple to be eaten. I’ll apply a different color to the apple and the snake so that the player can distinguish between them. This gives the following code for the draw method of our Snake class: https://gist.github.com/ssaurel/a1381047c4849f76f38a99db5730231d?embedable=true Moving the Snake We now have a snake that we can display on screen. This is all very well, but we need to add support for the snake’s movement. As explained above, the snake moves along the coordinate vector (dirx, diry). So, each time we call the move method I’m going to define here, the snake will move by the same amount. In this move method, we check that the coordinates of the snake’s head correspond to those of the apple to be eaten. If so, the snake has just eaten the apple. The player scores a point, but more importantly, we need to take four actions: Add an element to the snake’s elements. This element becomes the new tail. Generate a new apple by calling generatefood. Add a point to the player. If the player passes a level, then we update the number of frames per second to be displayed to speed up the Snake’s movement. Still, in the move method, we need to check that the player hasn’t made the mistake of touching an element of the snake with the head. If this is the case, the game is lost, and we start afresh! To do this, we call the init method of the Snake class presented above. Now, we need to complete the move method by actually moving the snake. To do this, we add dirx and diry to the snake’s head coordinates. This gives us a new head to add. You’ll also notice that moving the snake is done intelligently by removing the tail each time and adding a new head. This avoids having to update the position of all the snake’s elements. Finish by remembering to update the new head. Incidentally, you’ll also have noticed that when the snake’s head crosses a board boundary, we make it move to the opposite side of the board. This applies to both width and length. This gives us the following code for the move method: https://gist.github.com/ssaurel/857a654c2b6dd065a15bfdb5751cdcab?embedable=true The GameLoop of our Snake Game Our Snake can be displayed on screen. Our Snake can be moved by calling its move method. What are we missing? We’re missing the implementation of our game’s GameLoop! Without this GameLoop, which will call the move and draw methods at regular intervals, the Snake won’t be able to move. In what follows, we’ll show you how to implement a GameLoop the right way in JavaScript, leaving it up to the browser to call it when it sees fit so as not to block the rendering thread of the game’s web page. To do this, we’ll use the requestAnimationFrame method of the standard JavaScript object window. The browser will then adapt the maximum fps it can support to the computer or smartphone on which the web page will be used. Within our gameloop method, we’ll then decorrelate the number of fps supported by the browser from the number of fps we want to move our snake. We’ll only call the move and draw methods when we’re within the fps range defined earlier. It’s important to update the coordinates of the snake’s movement vector according to the state of the four directional keys: up, down, left, and right. Finally, we call the GameLoop, delegating to the browser the task of choosing the best moment to do so. This gives us the following code for the GameLoop: https://gist.github.com/ssaurel/ef5abcd238e63cacd906a039b7647eaf?embedable=true Handling user interaction with the Snake To enable the Snake to be moved according to the directional keys pressed by the player, we use the keydown and keyup events. For each of these events, we’ll call a method of the Snake class. Logically, this will be pressdown for the keydown event and pressup for the keyup event. We update the value of the linked Snake class properties according to what the player does with these keys. As you can see, we don’t block the game by updating the snake’s position directly. Instead, we update the state in the gameloop method, which is called at regular intervals. Assembling the various Snake components To complete this Snake game, we need to assemble the various elements. We retrieve the Canvas object via its ID. Then, we obtain the 2D context linked to this Canvas. Apply the desired dimensions. We create a Snake object, passing the various expected values as parameters, including the number of cells on the board. Add the event listeners for the keydown and keyup events. Finally, all that’s left to do is call our Snake’s gameloop once to start the game. This gives us the following complete code for the famous Snake game made with the Canvas API and the infernal HTML5/JavaScript Web couple: https://gist.github.com/ssaurel/e01731169b9f0dca1a3fb19ba6e8f3a2?embedable=true Our Snake Game in Action Our Snake complete, it’s time to test it in a Web browser to see if the Snake magic works again, as it did when Nokia outrageously dominated the mobile world: From this Snake game, you can imagine several possible enhancements. For example, you could add a sound each time the snake eats the apple. You could use HTML5’s Web Storage API to store a player’s local high score. This way, when a player beats his high score, you can display a congratulatory message. The possibilities are endless, and your only limit, as ever in programming, is your imagination. Watch this tutorial on YouTube This tutorial can also be watched on YouTube on the SSaurel channel: https://www.youtube.com/watch?v=0uSfTEq2JMo&embedable=true Also published . here

Revive Some Nostalgia: Recreating the Snake Game Using HTML5's Canvas API and JavaScript

কিছু নস্টালজিয়া পুনরুজ্জীবিত করুন: HTML5 এর ক্যানভাস এপিআই এবং জাভাস্ক্রিপ্ট ব্যবহার করে স্নেক গেম পুনরায় তৈরি করা

Lassen Sie etwas Nostalgie wieder aufleben: Erstellen Sie das Snake-Spiel mit der Canvas-API und JavaScript von HTML5 neu

Reviva algo de nostalgia: recreando el juego de la serpiente utilizando la API Canvas de HTML5 y JavaScript

Ravivez un peu de nostalgie : recréer le jeu du serpent à l'aide de l'API Canvas et de JavaScript de HTML5

कुछ पुरानी यादों को पुनर्जीवित करें: HTML5 के कैनवस एपीआई और जावास्क्रिप्ट का उपयोग करके स्नेक गेम को फिर से बनाना

懐かしさを蘇らせる: HTML5 の Canvas API と JavaScript を使用してスネーク ゲームを再作成する

향수를 불러일으키기: HTML5의 Canvas API 및 JavaScript를 사용하여 뱀 게임 재현

Reviva um pouco de nostalgia: recriando o jogo da cobra usando a API Canvas do HTML5 e JavaScript

Возродите немного ностальгии: воссоздание игры «Змейка» с использованием HTML5 Canvas API и JavaScript

Biraz Nostaljiyi Canlandırın: HTML5'in Canvas API ve JavaScript'ini Kullanarak Yılan Oyununu Yeniden Yaratmak

Hồi sinh một số nỗi nhớ: Tái tạo trò chơi rắn bằng cách sử dụng API Canvas và JavaScript của HTML5

重温怀旧之情：使用 HTML5 的 Canvas API 和 JavaScript 重新创建贪吃蛇游戏

How We Enhanced Remotion Performance through GPU-Accelerated Server-Side Rendering Running with hardware acceleration in headless mode can be more challenging than it appears. We embarked on this journey with , which is an excellent framework that enables developers to "Make Videos Programmatically.” On our way, explore various Nvidia driver versions, including those from Nvidia's website and Ubuntu's official repositories. Google Chrome Remotion We collaborated with the vibrant Open-source community to find the answer for using . After encountering some setbacks on our way, we were able to make it work for Remotion eventually. We consolidated our findings in the Remotion Docs at and simplified the instructions for Remotion developers to make the most out of it. Although the whole research was done for , the same process will work for any headless application that requires GPU power, especially in headless mode. Remotion GPU with Remotion for server-side rendering Using the GPU in the Cloud Remotion Hardware Acceleration in Browser Rendering Hardware Acceleration is to your browser what " " is for a gasoline car. It uses the power of specialized hardware like GPUs to make your web pages load faster, and videos play smoothly. Hardware acceleration improves the part where the web page is displayed and shown to you, known as rendering. This results in a smoother and snappier browsing experience. Nitrogen Fuel DLAMI from Marketplace? One may wonder why we didn't opt for the AWS Deep Learning AMI or DLAMI. But we needed fine-grained control over the GPU drivers and utilities and the outdated DLAMIs despite all the bloatware was not the answer. Such tasks are often challenging to achieve with pre-packaged AMIs, as discussed in " .” Tailoring the environment to our exact requirements also helped us troubleshoot issues effectively. Why Deep Learning AMI is Holding You Back We experimented with multiple packages to identify the key ones needed for Google Chrome to recognize the GPU. Despite these efforts, GPU recognition remained elusive, and in some instances, GPU drivers were crashing even at initialization. The long and arduous journey has brought us to the end of the tunnel, yet the darkness persists, and the solution remains as elusive as ever. As we decided to call it a day, We stumbled upon on 's Github issues, which did not give us any hope but did give us a new perspective and drive to achieve our goal. this thread Puppeteer The Fresh Start It was time to return to the drawing board and start afresh. We started with a clean base Ubuntu AMI on AWS EC2 Instance. After that, we downloaded and installed the Nvidia Tesla T4G drivers from Nvidia's official website. Once it was confirmed that the GPU was working properly using , we installed Google Chrome and tested it for hardware acceleration. To our relief, Google Chrome finally gave a nod to work with Hardware Acceleration. nvidia-smi Launching an EC2 Instance Launching an EC2 instance can be achieved in various ways, with the AWS Web Console and AWS CLI being two notable options. Regardless of the method, the important parameters are instance type and AMI selection. At the time of writing, the AMI ID for our chosen instance is . For launching the EC2 instance via , the following command can be used after replacing the placeholders with actual values. g4dn.xlarge ami-053b0d53c279acc90 aws-cli aws ec2 run-instances \
  --instance-initiated-shutdown-behavior "terminate" \
  --image-id "ami-053b0d53c279acc90" \
  --instance-type "g4dn.xlarge" \
  --key-name "<KEY_NAME>" \
  --subnet-id "<SUBNET_ID>" \
  --security-group-ids "<SECURITY_GROUP_ID>" \
  --iam-instance-profile Arn="<ARN>" \
  --block-device-mappings '[
  {
    "DeviceName": "/dev/sda1",
    "Ebs": {
      "VolumeSize": 8,
      "VolumeType": "gp3"
    }
  }
]' Ubuntu and Kernel Upgrade Ubuntu 22.04 AMI on AWS comes with Linux Kernel (specifically ). At this point, we have two options either we stick with Kernel or Upgrade to ( ), we decided to upgrade the Kernel. This decision is crucial as the Nvidia driver compiled for one version will not work for the other. ami-053b0d53c279acc90 v5 5.19.0-1025-aws v5 v6 v6.2.0-1013-aws After launching the instance, SSH into the instance and initiate the Ubuntu packages upgrade process. To update all the installed packages, including Linux Kernel, execute the following one-liner. sudo bash -c "apt update && export DEBIAN_FRONTEND=noninteractive && export NEEDRESTART_MODE=a && apt upgrade -y && reboot" We can also split , and . But the reason behind doing it like this is to install these updates in non-interactive mode. apt update apt upgrade -y reboot After the execution, the system will reboot with Linux Kernel Version 6. We can confirm the kernel update with . Rebooting is essential when upgrading the Ubuntu system because it loads the new Kernel on the next boot, and Nvidia drivers will subsequently be built for the updated version. uname -r Nvidia GPU Driver Installation The process of installing GPU drivers is straightforward when we have the correct driver for the GPU and the corresponding compatible version. Before starting the installation, we need to install a couple of packages: and . The former is a bundle with a variety of compilation tools required to compile the Nvidia driver. The latter, while not mandatory, is required by Google Chrome. Therefore, it's a good idea to install it beforehand to enable support for Vulkan ICD loader for Nvidia, should we require it in the future. build-essential libvulkan1 sudo apt install -y build-essential libvulkan1 After build tools are installed, we can proceed to download and install the GPU drivers using the following commands: DRIVER_URL="https://us.download.nvidia.com/tesla/535.104.12/NVIDIA-Linux-x86_64-535.104.12.run"
DRIVER_NAME="NVIDIA-Linux-driver.run"
wget -O "$DRIVER_NAME" "$DRIVER_URL"
sudo sh "$DRIVER_NAME" --disable-nouveau --silent
rm "$DRIVER_NAME" Now we can run to confirm the GPU driver installation. The output will look similar to this: nvidia-smi Configuring the Startup Service We learned this the hard way: running once is needed for the proper initialization of and . Google Chrome and Chromium fail to initialize without this preliminary setup. To automate this process, we will create a service that runs at boot time using the following commands: nvidia-smi EGL ANGLE EGL nvidia-smi echo '[Unit]
Description=Run nvidia-smi at system startup

[Service]
ExecStart=/usr/bin/nvidia-smi
Type=oneshot
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target' | sudo tee /etc/systemd/system/nvidia-smi.service
sudo systemctl enable nvidia-smi.service
sudo systemctl start nvidia-smi.service Testing the Installation To test hardware acceleration with Google Chrome or Chromium, we can follow these steps. It's worth noting that Google Chrome has more dependencies, making it an easier choice if we plan to use the Node.js library, Puppeteer. On the other hand, Chromium is a lightweight option with a smaller footprint of dependencies, but we can still use Puppeteer with Chromium by installing a few extra dependencies. Installing Chromium Installation Installing Chromium is straightforward, as it is readily available with Ubuntu's official software repositories. We can install it using with the following command. apt sudo apt install -y chromium-browser Testing Chromium is fully prepared to handle Hardware Acceleration tasks. We can verify its readiness by launching Chromium with the specified parameters. chromium-browser --headless --use-gl=angle \
   --use-angle=gl-egl --use-cmd-decoder=passthrough \
   --print-to-pdf=output.pdf 'chrome://gpu' Installing Puppeteer Dependencies To use Puppeteer with Chromium instead of Google Chrome, there are a few extra dependencies that should be installed. sudo apt install ca-certificates fonts-liberation \
    libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 \
    libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 \
    libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 \
    libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 \
    libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
    libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
    libxtst6 lsb-release wget xdg-utils Installing Google Chrome Installation Google Chrome can be installed from multiple options, but we will use the Google Chrome official repository for Debian. We need to add it to Ubuntu's repo list along with the public signing key. curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable Testing Google Chrome is ready for our Hardware Acceleration tasks. We can test it by launching Google Chrome with the following parameters. google-chrome-stable --headless --use-gl=angle \
    --use-angle=gl-egl --use-cmd-decoder=passthrough \
    --print-to-pdf=output.pdf 'chrome://gpu' The above commands will generate , and transfer it to your local machine to check the status of Hardware Acceleration in Google Chrome or Chromium. If the process goes smoothly, the resultant will look like this. output.pdf PDF Working with Puppeteer To verify GPU acceleration using the Node.js library Puppeteer, follow these steps: Installation Install Node.js, as this clean Ubuntu AMI does not include any unnecessary packages. Use the following commands: curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
NODE_MAJOR=18
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt update
sudo apt install nodejs Testing After installing Node.js, we can install Puppeteer by running in our code directory. Here's a sample file for checking hardware acceleration: npm i puppeteer index.js const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: true, 
    args: ['--use-gl=angle', '--use-angle=gl-egl'], 
  });
  const page = await browser.newPage();
  await page.goto('chrome://gpu');
  await page.waitForTimeout(2000);
  await page.screenshot({ path: 'output.png' });
  await browser.close();
})(); Run the script using . This will generate an file containing hardware acceleration information. node index.js output.png Note from the Creator has been immensely helpful in helping the “ ” community adopt GPU-accelerated rendering.He's researched and written about how to obtain, configure and run EC2 containers and headless Chrome correctly in order to take advantage of graphics acceleration.This area has been especially hard to crack, and without we would not have been able to unlock huge speed boosts. Mirza Remotion Mirza We are super grateful for that! -- Jonny Burger Creator / Remotion.dev Conclusion With hardware acceleration now readily available in headless mode, we can harness the power of GPUs for faster and more complex rendering tasks. Our next steps involve creating a custom AMI from this instance and streamlining the process using AWS Image Builder Pipelines for efficiency. Additionally, we plan to extend hardware capabilities to Docker containers, further extending our options. Resources Remotion - Make videos programmatically: https://remotion.dev Remotion - Using the GPU in the cloud: https://www.remotion.dev/docs/miscellaneous/cloud-gpu Cannot enable GPU acceleration: github.com/puppeteer/puppeteer/issues/3637 : Recommend a workflow for using the GPU on a AWS instance https://github.com/remotion-dev/remotion/issues/2889 Getting Started with Headless Chrome: developer.chrome.com/blog/headless-chrome Why Your AWS Deep Learning AMI is Holding You Back and How to Fix: mirzabilal.com/why-your-aws-deep-learning-a.. Deep Learning with “AWS Graviton2 + NVIDIA Tensor T4G” for as low as free* with CUDA 12.2: mirzabilal.com/deep-learning-with-aws-gravi.. How to install FFmpeg with Harware Accelaration on AWS: mirzabilal.com/how-to-install-ffmpeg-with-h.. CPU vs GPU for Video Transcoding - Challenging the Cost-Speed Myth: https://mirzabilal.com/cpu-vs-gpu-for-video-transcoding-challenging-the-cost-speed-myth Also published . here

Unlocking GPU-Accelerated Server-Side Rendering in Remotion With Chrome, Chromium & Puppeteer

The continuous Integration and Continuous Deployment ( ) process has become the gold standard of software development delivery in the modern world. The process of CI/CD enables teams to collaborate and deploy software upgrades quickly, leading to a shorter time-to-market and more customer satisfaction. Also, API (Application Programming Interfaces) are the building blocks of modern software. API plays an essential role in providing seamless communication and integration across various software systems. However, with this increased dependence on APIs comes the need for robust security measures to protect sensitive data, such as API keys and credentials. CI/CD In this article, we’ll explore the best practices and techniques for mastering the secure handling of API keys and credentials within CI/CD workflow. By implementing these strategies, you can defend your applications, protect sensitive data, and mitigate the risk of data breaches and unauthorized access. Best Practices for Securing API keys and credentials in CI/CD workflow API keys and credentials are the digital keys to your built kingdom (software). They provide access to resources, valuable data, and services, making them prime targets for hackers. A compromise of these keys can lead to unauthorized access, financial losses, leaks, and reputational damages. Because of this, it is crucial to have strong security mechanisms in place while managing API keys and credentials within your CI/CD workflow. Key best practices to ensure securing API keys and credentials include: Utilizing Environment Variables In the quest to master secure handling of API keys and credentials in a CI/CD workflow, it is important to understand how to harness the power of environment variables. These variables serve as a secure vault for preserving confidential information, shielding your information from prying eyes. Environment variable offers a secure and flexible way to store sensitive data.  Unlike hardcoding secrets directly into your code, environment variables provide an extra layer of protection. Using an environment variable allows you to adjust configuration without modifying your codebase. This adaptability makes it easier to manage different configurations in development, testing, and production environments. In containerized applications like docker and Kubernetes, they are a standard way to inject configuration data. These containerized platforms make it easy to manage environment variables within containerized deployments. Assuming building software with Python programming language, this language can be harnessed for this purpose, emphasizing the significance of safeguarding your secrets. Python simplifies the process of working with environment variables through the module.  The below code shows how to set and access environment variables in Python securely.' os import os

# Set the environment variable
os.environ['API_KEY'] = "your_api_key_here" In this example, we’ve created an environment variable named `API_KEY` and assigned it a placeholder value ('your_api_key_here'). In practice, these values should be replaced with your actual API key or sensitive data. Fetching environment variables in Python is as straightforward as setting them: # app.py
import os

# Retrieve sensitive API key from environment variable
api_key = os.environ.get('API_KEY')

# Check if the environment variable exists
if api_key is not None:
    print("API Key:", api_key)
else:
    print("API Key not found. Make sure to set the API_KEY environment variable.") GitHub Actions Workflow (main.yml): # .github/workflows/main.yml

name: CI/CD Workflow

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Python
      uses: actions/setup-python@v2
      with:
        python-version: '3.x'

    - name: Install dependencies
      run: pip install -r requirements.txt

    - name: Run Python application
      env:
        API_KEY: ${{ secrets.API_KEY }}
      run: python app.py We have a simple Python application (app.py) that retrieves an API key from an environment variable. The GitHub Actions workflow (main.yml) is triggered on every push to the main branch. The value of the environment variable API_KEY is retrieved in this case by calling os.environ.get(`API_KEY`). To avoid mistakes, it is crucial to verify if the variable is present before using it. Although Python provides an effective method for managing environment variables, security must always come first when working with sensitive data. A security risk could arise if secrets are hardcoded into your code and the code is ever exposed. Utilizing Encryption Technique The protection of critical credentials, such as API keys and passwords, is crucial in the arena of CI/CD. These vital assets now have an additional degree of safety thanks to the powerful instrument of encryption. Encryption is the process of converting plaintext data into ciphertext, making it unreadable without the proper decryption key. This cryptographic technique is indispensable for safeguarding sensitive information in CI/CD workflows. In this section, we'll explore encryption techniques, including both symmetric and asymmetric encryption, and provide code examples to demonstrate their implementation. Symmetric encryption employs a single secret key for both encryption and decryption. It's fast and efficient, making it suitable for encrypting large volumes of data. Here is an example of using symmetric encryption in Python: from cryptography.fernet import Fernet

# Generate a symmetric key
key = Fernet.generate_key()
cipher_suite = Fernet(key)

# Encrypt data
data = b"YourSecretDataHere"
encrypted_data = cipher_suite.encrypt(data)

# Decrypt data
decrypted_data = cipher_suite.decrypt(encrypted_data)

print("Original Data:", data)
print("Decrypted Data:", decrypted_data) In this example, we conduct symmetric encryption and decryption using the cryptography library. The encryption key must be handled carefully because it is necessary for decrypting the data. Asymmetric Encryption employs a pair of keys: a public key for encryption and a private key for decryption. It's ideal for secure communication and key exchange scenarios.
The following describes how to utilize asymmetric encryption in Python: from cryptography.hazmat.primitives.asymmetric import rsa
from cryptography.hazmat.primitives import serialization
from cryptography.hazmat.primitives.asymmetric import padding

# Generate a key pair
private_key = rsa.generate_private_key(
    public_exponent=65537,
    key_size=2048
)

# Get the public key
public_key = private_key.public_key()

# Encrypt data with the public key
data = b"YourSecretDataHere"
ciphertext = public_key.encrypt(
    data,
    padding.OAEP(
        padding.MGF1(algorithm=hashes.SHA256()),
        algorithm=hashes.SHA256(),
        label=None
    )
)

# Decrypt data with the private key
decrypted_data = private_key.decrypt(
    ciphertext,
    padding.OAEP(
        padding.MGF1(algorithm=hashes.SHA256()),
        algorithm=hashes.SHA256(),
        label=None
    )
)

print("Original Data:", data)
print("Decrypted Data:", decrypted_data) In the example above, we use the library to demonstrate asymmetric encryption. The private key is protected which is used to decrypt the encrypted data. cryptography Secrets Management Tools in CI/CD Workflows Secret management is a technique that enables developers to safely store sensitive information, such as tokens, passwords, and keys, in a secure setting with rigorous access controls. These secrets must be safely stored and accessed, which is made possible by secret management systems like HashiCorp Vault and . These tools can be seamlessly integrated into your CI/CD workflow to safeguard API keys and credentials adequately. AWS Secrets Manager HashiCorp Vault is a widely adopted tool for managing secrets and protecting data. It offers robust encryption, access control, and auditing features, making it an ideal choice for securing your CI/CD workflow. Briefly, I will show an illustration of how to integrate with Hashicorp vault. Here's how you can integrate HashiCorp Vault into your CI/CD pipeline using Python: import hvac

# Connect to Vault
client = hvac.Client(url='https://your-vault-url.com', token='your-vault-token')

# Retrieve a secret
secret_data = client.secrets.kv.read_secret_version(path='your/secret/path')

# Access the secret value
secret_value = secret_data['data']['data']['your_secret_key']

print("Secret Value:", secret_value) In this code example, we use the Python library to interact with hashiCorp Vault. Make sure to replace and with your Vault URL and access token, respectively. hvac https://your-vault-url.com your-vault-token is a fully managed service offered by Amazon Web Services (AWS) for securing and rotating secrets. It simplifies the process of storing and accessing sensitive information. AWS Secrets Manager Here is how to use the AWS SDK for Python (Boto3) to incorporate AWS Secrets Manager into your CI/CD workflow: import boto3

# Create a Secrets Manager client
secrets_manager = boto3.client('secretsmanager')

# Retrieve a secret value
response = secrets_manager.get_secret_value(SecretId='your-secret-id')

# Access the secret value
secret_value = response['SecretString']

print("Secret Value:", secret_value) In this illustration, we communicate with AWS Secrets Manager using the Boto3 framework. should be changed to the ID of your secret.' Your-secret-id Importance of Secure API Keys and Credentials in CI/CD Workflow The core of any contemporary software development company is its continuous integration and delivery (CI/CD) pipelines. CI/CD pipelines enable your business to deploy software faster and more frequently when used in conjunction with DevOps techniques. However, enormous authority also entails great responsibility. Everyone concentrates on creating safe applications, but many forget to secure API keys and credentials in the CI/CD pipeline. Security is the foundation of any CI/CD workflow. It ensures the integrity, confidentiality, and availability of your software and data throughout the development and deployment pipelines. The significance of secure API keys and credentials cannot be overstated. These digital keys and secrets are the gatekeepers to sensitive services, data, and systems in deployed software.  Their proper management is vital to the integrity and security of your CI/CD (Continuous Integration/Continuous Deployment) workflow. Here are why secure API keys and credentials are the backbone of a robust CI/CD process: Databases, cloud resources, third-party APIs, and other services can all be accessed and used using API keys and credentials. These keys frequently grant access to critical infrastructure and sensitive data. Protecting Sensitive Information: The above is a python code example that demonstrates the importance of securely storing an API key. Here, we make sure the API key isn't hard-coded in the code by retrieving it from an environment variable. This method improves security in CI/CD workflow and prevents unwanted access to sensitive data. Data flows smoothly from development to production in a CI/CD pipeline. At every stage of deployment, sensitive data like user information, payment information, and proprietary algorithms stay secret and confidential thanks to securely maintaining API keys and credentials. Ensuring data privacy: The above code snippet shows a JavaScript illustration that highlights the need to keep API keys and credentials secure. From the code snippet, an emphasis is made on not logging sensitive data while retrieving the API key from an environment variable. The danger exposure is reduced, and data privacy is maintained by securely inserting the API key into the requests. It is important to note that not all security risks come from external hackers. Whether intentional or unintentional, insider threats can endanger your CI/CD operations. Access controls and secure credential management are two appropriate security solutions that aid in reducing these hazards. Mitigating Insider Threats: The code ensures that only authorized users can access protected resources, lowering the risk of insider breaches, by confirming user permissions and checking API key ownership. Intellectual property belonging to your company, such as code, algorithms, and proprietary software, should be secured from unwanted access. The first line of defense against intellectual property theft is secure credentials. Safeguarding Intellectual Property: The code snippet illustrates how access controls using API keys can safeguard valuable code and ensure that only authorized users can access proprietary resources. Dealing with security breaches and their effects is much more expensive and time-consuming than putting in place reliable security measures right away. Secure API credential and key management eliminates the need for expensive remediation actions. Preventing Costly Remediation: In this PowerShell script, to avoid expensive cleanup operations, we emphasize the value of preventative security measures. The script makes sure that security precautions are put in place up front by confirming the existence of an key, lowering the possibility of costly breaches and their associated costs. API A good CI/CD workflow is built on the secure management of API keys and credentials. In contrast to emphasizing security, which guarantees the confidentiality, integrity, and availability of your data and systems throughout the development and deployment process, ignoring this crucial feature might expose your organization to a wide range of dangers and consequences.

Mastering Secure Handling of API Keys and Credentials in CI/CD Workflow

This article is focused on managed Kubernetes. A managed Kubernetes service can be beneficial for organizations that want to focus on applications rather than dealing with installing, operating, and maintaining a Kubernetes cluster. Firstly, what exactly is a managed Kubernetes service? It’s a cloud computing offering, in which the cloud provider takes the responsibility of managing the control plane (kube-apiserver, etcd store, kube-scheduler, controller-manager). Even more, the cloud provider takes the burden of managing and ensuring the reliability, availability, and upgrades of the Kubernetes cluster. Some of the major Kubernetes as a Service offerings are: EKS ( ) Elastic Kubernetes Service AKS ( ) Azure Kubernetes Service GKE ( ) Google Kubernetes Engine As a general prerequisite in terms of tooling, you’ll need: — CLI for communicating with Kubernetes ( ) kubectl installation guide here There are three main ways to interact with the cloud: Cloud console (UI approach) Custom cloud client libraries or SDK (programmatic approach) CLI (command line approach) Also, each cloud provider offers the possibility of an Infrastructure as a Code approach via various solutions: Azure ARM templates, AWS CloudFormation, and Google Cloud Deployment Manager. I will opt for a CLI approach due to its scripting capabilities. For instance, common choices like the cluster name and the number of nodes can be set as environment variables. export CLUSTER="democluster"
export NODES=2 AWS You’re going you need a user with the right policies for services like EKS, CloudFormation, EC2, IAM, and an access key for that user ( ). guide here - CLI for interacting with AWS services ( ) aws installation guide here - CLI for creating and managing clusters on AWS ( ) eksctl installation guide here authenticator that allows you to use AWS IAM credentials to authenticate ( ) aws iam installation guide here First, we need to configure CLI using the access key generated for our IAM user. We can use command to configure AWS CLI. Run the following command without arguments in order to get prompted for configuration values (e.g. AWS Access Key Id and your AWS Secret Access Key, AWS region). aws aws configure # credentials are placed ~/.aws/credentials.
aws configure IAM AWS CLI: for you will need to have AWS API credentials configured. Amazon EKS uses the IAM service to provide authentication to your Kubernetes cluster through the AWS IAM authenticator for Kubernetes. Verify if you’re authenticated by running the following command: eksctl aws iam get-user Creating Kubernetes Cluster: EKS clusters run in a VPC, therefore you need an with public and private subnets. The VPC must have a sufficient number of IP addresses available for the cluster, any nodes, and other Kubernetes resources that you want to create, and also it must have a DNS hostname and DNS resolution support (otherwise nodes can’t register to the cluster). You can’t change which subnets you want to use after cluster creation. Amazon VPC The beauty of it is that eksctl will do all the heavy lifting for us and even more, you can customize your Kubernetes cluster as needed (number of nodes, region, node size). To allow SSH access to nodes, imports by default the ssh public key from , but if you can use another SSH public key by passing the absolute path to the key in the flag. eksctl ~/.ssh/id_rsa.pub --ssh-public-key eksctl create cluster --name=$CLUSTER --nodes=$NODES --region=eu-west-1 --ssh-public-key=~/.ssh/eks_key.pub We’re going to create a Kubernetes cluster with : 2 nodes with the default instance type (currently m5.large) default Kubernetes version (currently 1.25) Behind the scenes uses CloudFormation, you can see that in this case, it creates 2 CloudFormation stacks, also CloudFormation console can be used to check the status of the deployment. eksctl After the cluster has been created, the appropriate Kubernetes configuration will be added to your file, to verify it just: kubeconfig eksctl get clusters
kubectl get no -owide You can clean up and delete the cluster using: eksctl delete cluster --name <cluster_name> Azure — CLI for managing Azure resources and services. az Before using any Azure CLI commands you need to authenticate, to initiate the authorization code flow run: az login If needed then you can provision the subscription with a new . resource group # list resource groups in the current subscription
az group list -o table

# create new resource group
az group create --name <resource_group_name> --location <location> Creating Kubernetes Cluster: The workhorse for managing Azure Kubernetes Services is . We’re going to create a Kubernetes cluster with: az aks two worker nodes with the default VM size (currently Standard_DS2_v2) default Kubernetes version (currently 1.25.11) default SKU load balancer (Standard) default VM set type (VirtualMachineScaleSets) az aks create -g <resource_group_name> -n $CLUSTER --node-count $NODES --generate-ssh-keys --location westeurope The aks create command is highly extensible via flags usage e.g. to change the node size. After the cluster has been created, because the command also generated the SSH keys, the next step is to download and merge --node-vm-size kubeconfig aks get-credentials --resource-group <resource-group-name> --name $CLUSTER An important aspect is that after the cluster is created, another resource group will be created (in the same subscription) usually called which will contain the Virtual machine scale set for the nodepool, the load balancer. MC_<cluster_name>_<region> az aks list -o table
kubectl get no -owide Clean up and delete the cluster, using the following: # delete cluster
az aks delete --name $CLUSTER --resource-group <resource_group_name>

# delete resource group
az group delete --name <resource_group_name> Google — CLI for interacting with Google services. gcloud enable Kubernetes engine API ( ) guide here gcloud services enable container.googleapis.com To authorize to access Google Cloud and to set up or update configuration, use the following commands that will launch an interactive Getting Started workflow and obtain access credentials four your user account: gcloud gcloud init
gcloud auth login Creating Kubernetes Cluster: We’re going to use gcloud container to create the Kubernetes cluster, as before the command is highly extensible providing various flags for cluster creation. 2 N1 machine-type nodes default Kubernetes version (currently 1.27) gcloud container clusters create $CLUSTER\
                --num-nodes $NODES\
                --machine-type n1-standard-1 \
                --zone europe-central2-a Update with the credentials: kubeconfig cloud container clusters get-credentials Now you can list the Kubernetes clusters in the desired zones or regions. gcloud container clusters list --zone europe-central2-a And of course, you can clean up and delete the cluster: cloud container clusters delete $CLUSTER --zone europe-central2-a Conclusions The purpose of this article was twofold: to demonstrate the ease of creating Kubernetes clusters and to offer an overview of the tooling available for interacting with a managed Kubernetes service. The general approach is the same for all three cloud providers, and I would say using the CLI hits the sweet spot between imperative and declarative because it enables you to create wrapper scripts in which you can combine numerous commands and create various customizations. Last but not least for production environments I strongly suggest using an approach for example a common IaC solution for all three cloud providers is by HashiCorp. Infrastructure as Code Terraform The lead image for this article was generated by via the prompt "Cloud infrastructure" HackerNoon's AI Image Generator

Navigating the Cloud: Creating Kubernetes Clusters Across Providers

How We Increased Database Query Concurrency by 20 Times

I've blogged quite a bit about the Amazon Interactive Video Service (Amazon IVS) Web Broadcast SDK. We've learned about , how to use the SDK to , how to , and even looked at using it to . the basics stream pre-recorded videos add screen sharing and overlays create a Lofi radio station The Web Broadcaster SDK is a game changer that gives developers the ability to integrate the broadcast experience directly into their streaming applications instead of directing their users to use third-party desktop streaming software. In this post, we'll look at another exciting possible use case of the Web Broadcast SDK: streaming browser based games directly to an Amazon IVS channel. It's really quite easy to do, and we'll take it a step further by creating an interactive experience that allows live stream viewers to control the gameplay (akin to ). TwitchPlaysPokemon Streaming a Browser Based Game Directly From the Browser For this post, I'll assume that you're already familiar with Amazon IVS and have already configured a live streaming channel. If you're new to Amazon IVS, check out the blog series , specifically the very . Optionally, you could also refer to the which is a great resource for learning how to develop live streaming applications with Amazon IVS. Getting Started with Amazon IVS first post user guide Since I'm not a game developer, I decided to add live streaming to a few existing open source, browser-based games: and . Since both of these games utilize for gameplay, it will be easy to obtain a from them will be the source for our live stream video input. pacman-canvas Astray <canvas> MediaStream pacman-canvas For the first demo, I cloned the repo to my local machine and took a look at the code. pacman-canvas Initializing the Broadcast Client The game uses jQuery, so I added a call to an method to the end of the existing DOM ready handler: pacman-canvas initBroadcast() let broadcastClient;
let isBroadcasting = false;

$(document).ready(function () {
  // game logic...
  initBroadcast();
}) In my method, I create an instance of the ( ), passing it the from my Amazon IVS channel. initBroadcast() AmazonIVSBroadcastClient docs Ingest endpoint broadcastClient = IVSBroadcastClient.create({
  streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE,
  ingestEndpoint: config.ingestEndpoint,
}); Next, to add the gameplay to the client, I grabbed a reference to the element used by the game and called ( ) on the : <canvas> addVideoInputDevice() docs broadcastClient const game = document.getElementById('myCanvas');
broadcastClient.addVideoInputDevice(game.captureStream(), 'game-track', { index: 0 }); Finally, to start the broadcast, I call and pass it the from my channel. startBroadcast() Stream key broadcastClient
  .startBroadcast(config.streamKey)
  .then(() => {
    isBroadcasting = true;
    console.log('online')
  })
  .catch((error) => {
    isBroadcasting = false;
    console.error(error);
  }); The game uses a few tags for sound effects and calls the following function as necessary. <audio> var Sound = {};
Sound.play = function (sound) {
  if (game.soundfx == 1) {
    var audio = document.getElementById(sound);
    (audio !== null) ? audio.play() : console.log(sound + " not found");
  }
}; To add the game audio to my stream, I modified it to call ( ). addAudioInputDevice() docs var Sound = {};
Sound.play = function (sound) {
  if (game.soundfx == 1) {
    var audio = document.getElementById(sound);
    (audio !== null) ? audio.play() : console.log(sound + " not found");
    var trackLabel = `${sound}-audio-track-${new Date().getTime()}`;
    audio.addEventListener('playing', (evt) => {
      if (!broadcastClient.getAudioInputDevice(trackLabel)) {
        broadcastClient.addAudioInputDevice(audio.captureStream(), trackLabel);
      }
    });
  }
}; And that's it! The gameplay stream will be broadcast whenever the method is called, so we could attach that to a button click handler or call it from the method of the existing game. If we wanted to, we could also and even size and position the webcam as an overlay (see ( ) for more info). startBroadcast() newGame add a webcam to the stream VideoComposition docs Playing Back the Live Stream in a Browser For playback, I added a simple HTML page that includes and utilizes the . Amazon IVS Player SDK <script src="https://player.live-video.net/1.17.0/amazon-ivs-player.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const videoPlayer = document.getElementById('video-player');
  const streamUrl = '[CHANNEL PLAYBACK URL]';
  const ivsPlayer = IVSPlayer.create(); 
  ivsPlayer.attachHTMLVideoElement(videoPlayer);
  ivsPlayer.load(streamUrl);
  ivsPlayer.play();
});
</script>
<body>
  <video id="video-player" />
</body> Here's how everything looks at this point. On the left side is the broadcast/gamer view, and on the right is the playback/viewer view. Adding Timed Metadata As you can see in the Gif above, the score, level, and lives data is not included in the live stream. This is because the game developer did not include those elements in the gameplay . If we wanted to, we could render these as overlays in the playback view by . In my demo, I modified the function of to publish the score as timed metadata on my live stream by calling an AWS Lambda function that I've previously created for this channel. <canvas> publishing them with timed metadata Score pacman-canvas const publishMetadata = async (meta) => {
  await fetch('[lambda url]/send-metadata', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(meta),
  });
};

function Score() {
  this.score = 0;
  this.set = function (i) {
    this.score = i;
  };
  this.add = function (i) {
    this.score += i;
    publishMetadata({
      metadata: JSON.stringify({ score: this.score }),
    });
  };
  this.refresh = function (h) {
    $(h).html("Score: " + this.score);
  };

} Be careful publishing metadata too frequently to avoid exceeding the Amazon IVS . You may need to throttle or batch metadata publishing to avoid exceeding the quota. Note: service quotas Adding Interactivity to a Browser Based Game Live Stream Now let's take a look at how we might create an interactive browser based game that can be controlled by live stream viewers. For this, I chose - a simple game that requires the player to navigate a ball through a maze. I added the Web Broadcast client just as i did with above, and decided to use Amazon IVS chat to receive the gameplay control commands from the viewer. Astray pacman-canvas Adding Chat We've previously looked at how to . To use chat for game interactivity, we'll configure a chat experience just like we usually do, but in the chat connection's message handler, we'll check the message content for the terms , , and to control the ball movement on the broadcaster side. add chat to your live streaming application with Amazon IVS chat left right up down const chatConnection = new WebSocket('wss://edge.ivschat.us-east-1.amazonaws.com', token);

chatConnection.onmessage = (event) => {
  const data = JSON.parse(event.data);
  const chatEl = document.getElementById('chat');
  if (data.Type === 'MESSAGE') {
    const direction = data.Content.toLowerCase();
    if (['left', 'up', 'right', 'down'].indexOf(direction) > -1) moveBall(direction);
    // render message to chat div
  }
} If I find one of the directional commands in the incoming message, I call which will simulate a key press on the broadcaster side to move the ball in the game. moveBall() const moveBall = (direction) => {
  let keyCode;
  let keyCodes = {
    left: 37,
    up: 38,
    right: 39,
    down: 40,
  }
  const keyDown = new KeyboardEvent('keydown', { keyCode: keyCodes[direction] });
  const keyUp = new KeyboardEvent('keyup', { keyCode: keyCodes[direction] });
  document.dispatchEvent(keyDown);
  setTimeout(() => {
    document.dispatchEvent(keyUp);
  }, 200);
}; There's a minor catch to this approach. Because uses , the broadcaster's game tab must be active/visible tab at all times since to improve performance and battery life. Note: Astray requestAnimationFrame() requestAnimationFrame() pauses when the tab is not visible Here's how looks when controlled by the viewer. Astray There's a slight delay due to the stream latency, but the potential to give viewers control of the live stream gameplay is intriguing and filled with potential. Summary In this post, we learned how to integrate the Amazon IVS Web Broadcast SDK into a browser based game to give players the ability to live stream gameplay directly to an Amazon IVS live streaming channel. We also learned how to add interactivity to the experience to give stream viewers the ability to directly affect the gameplay. If you'd like to learn more about Amazon IVS, check out the blog post series here on HackerNoon. Getting Started with Amazon IVS Also published . here

KEYPUP

keypup.io

-- employees

Since n.d.

COMPANY RANKING

KEYPUP

EVERGREEN INDEX #5827

Representing this company? Click here to claim and customize this page!

Keypup WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

KEYPUP

keypup.io

-- employees

Since n.d.

COMPANY RANKING

KEYPUP

EVERGREEN INDEX #5827

RELATED COMPANIESRANK

STORIES ABOUT KEYPUP

Representing this company? Click here to claim and customize this page!

Keypup WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!