TL;DR: Learn how to set up a basic blog using Strapi, a headless CMS. We'll go through installing Strapi, creating content types, adding posts, and fetching them via API.

Introduction​

Content Management Systems (CMS) help you manage digital content without diving into code every time. Strapi is a headless CMS, meaning it provides an API to manage and deliver content, making it flexible for modern web apps.

In this tutorial, we'll build a simple blog with Strapi: set it up, create content types, add posts, and fetch them via API.

Setup​

First, install Node.js and npm from the official Node.js website.

Then, create a new Strapi project by running:

npx create-strapi-app@latest

This will install Strapi and start a development server.

Now we can start the server by below command:

npm  run develop

Next, open http://localhost:1337/admin in your browser to create an admin user for the Strapi dashboard.

Creating Content Types​

Inside the dashboard, go to Content-Types Builder → Create new collection type.

For our blog, let's create a collection called Post with these fields:

• Title (Text)
• Content (Rich Text)
• Author (Text)

Save the collection type, and you're ready to add posts.

Adding Content​

Go to Content Manager → Post → Create new entry.

Fill in your blog post details (title, content, author) and save it.

Fetching Content​

Strapi automatically generates a REST API for each content type. For our blog posts, the endpoint is:

http://localhost:1337/api/posts

To access it securely, you'll need an API token:

• Go to Settings → API Tokens in the dashboard.
• Create a new token with read access to Posts.

Now you can fetch posts from your frontend using this endpoint.

Now you can use this endpoint to fetch and display the blog posts in your frontend application.

Conclusion​

You've just built a basic blog with Strapi! 🎉

• Installed Strapi
• Created a Post content type
• Added blog entries
• Fetched them through the REST API

This setup gives you a foundation to expand further — add categories, images, authentication, or even switch to Strapi's GraphQL plugin.

TL;DR: Build a Python AI agent using CrewAI, Serper, and Google 2.0 Flash APIs. The agent researches a topic and writes a blog post.
📦 GitHub Repo

Introduction​

In this guide, you'll learn how to build a basic AI agent using Python and CrewAI. The agent will search the internet and generate a blog summary using the free Google 2.0 Flash and Serper APIs. This beginner-friendly tutorial walks you through each step.

Getting Started​

Ensure Python is installed on your system. You can download it from the official website.

Create a new project directory:

mkdir simple-ai-agent

cd simple-ai-agent

Create a requirements.txt file and add the necessary packages:

Install the dependencies:

pip install -r requirements.txt

Create the main Python file:

touch agent.py

Set Up​

Open agent.py and add the initial setup code:

This code uses:

• CrewAI : A library for creating AI agents.
• Serper : An API for searching the internet.
• Google 2.0 Flash : A free LLM API for generating text.

Create a .env file and add your API keys:

Load the environment variables in agent.py:

Define Tools and LLM​

Define the tools and LLM for the agent:

from crewai_tools import SerperDevTool
from langchain_google_genai import GoogleGenerativeAI

search_tool = SerperDevTool()

llm = GoogleGenerativeAI(model="gemini-2.0-flash",google_api_key=GOOGLE_AI_API_KEY)

User Input​

Prompt the user to enter a topic:

print("Welcome to AI Researcher and Writer!")

topic = input("Enter the topic: ") # Prompt user to enter a topic

Creating the Agents​

Create two agents: a researcher and a writer.

researcher = Agent(
    role="Researcher",
    goal=f"Uncover interesting findings about {topic}",
    verbose=True,
    memory=True,
    backstory=(
    """
    As a researcher, you are committed to uncovering the
    latest and most interesting findings in your field. You
    have a knack for finding hidden gems of information and
    presenting them in an engaging way. Your goal is to
    illuminate the topic at hand, providing insights that are
    both informative and thought-provoking.
    """
    ),
    tools=[search_tool],
    llm=llm,
    allow_delegation=True
)

writer = Agent(
    role="Writer",
    goal=f"Write intuitive article about {topic}",
    verbose=True,
    memory=True,
    backstory=(
    """
    As a writer, you are dedicated to crafting engaging
    and informative articles. You have a talent for
    transforming complex ideas into accessible language,
    making them relatable to a wide audience.
    """
    ),
    tools=[search_tool],
    llm=llm,
    allow_delegation=False
)

Creating the Tasks​

Define tasks for each agent:

research_task = Task(
    description=(
        f"Drive key insights about {topic}."
        "What are the latest trends, technologies, and innovations?"
        "Have a balanced view, considering both the positive and negative aspects."
        "Your report should be well-structured and easy to follow."
    ),
    expected_output="A comprehensive 3 paragraphs long report on the topic",
    tools=[search_tool],
    agent=researcher
)

write_task = Task(
    description=(
        f"Compose an detailed and easy to understand article on {topic}"
        "The article should be engaging and informative, suitable for a general audience."
        "It should be well-structured, with a clear introduction, body, and conclusion."
        "Use markdown formatting for headings, lists, and code snippets where appropriate."
        "The article should be at least 4 paragraphs long and cover the key points from the research report."
    ),
    expected_output=f"A 4 paragraph article on {topic} fomatted as markdown",
    tools=[search_tool],
    agent=writer,
    async_execution=False,
    output_file="blog-post.md"
)

Running the Tasks​

Run the agent crew sequentially:

crew = Crew(
    agents=[researcher, writer],
    tasks=[research_task, write_task],
    process=Process.sequential
)

result = crew.kickoff()
print(result)

Your agent.py should now resemble:

import os
from dotenv import load_dotenv
from crewai import Agent, Task, Crew, Process
from crewai_tools import SerperDevTool
from langchain_google_genai import GoogleGenerativeAI

load_dotenv() # Load environment variables from .env file

SERPER_API_KEY = os.getenv("SERPER_API_KEY")
GOOGLE_AI_API_KEY = os.getenv("GOOGLE_AI_API")

search_tool = SerperDevTool()

llm = GoogleGenerativeAI(model="gemini-2.0-flash",google_api_key=GOOGLE_AI_API_KEY)

print("Welcome to AI Researcher and Writer!")
topic = input("Enter the topic: ") # Prompt user to enter a topic

researcher = Agent(
    role="Researcher",
    goal=f"Uncover interesting findings about {topic}",
    verbose=True,
    memory=True,
    backstory=(
    """
    As a researcher, you are committed to uncovering the
    latest and most interesting findings in your field. You
    have a knack for finding hidden gems of information and
    presenting them in an engaging way. Your goal is to
    illuminate the topic at hand, providing insights that are
    both informative and thought-provoking.
    """
    ),
    tools=[search_tool],
    llm=llm,
    allow_delegation=True
)

writer = Agent(
    role="Writer",
    goal=f"Write intuitive article about {topic}",
    verbose=True,
    memory=True,
    backstory=(
    """
    As a writer, you are dedicated to crafting engaging
    and informative articles. You have a talent for
    transforming complex ideas into accessible language,
    making them relatable to a wide audience.
    """
    ),
    tools=[search_tool],
    llm=llm,
    allow_delegation=False
)

research_task = Task(
    description=(
        f"Drive key insights about {topic}."
        "What are the latest trends, technologies, and innovations?"
        "Have a balanced view, considering both the positive and negative aspects."
        "Your report should be well-structured and easy to follow."
    ),
    expected_output="A comprehensive 3 paragraphs long report on the topic",
    tools=[search_tool],
    agent=researcher
)

write_task = Task(
    description=(
        f"Compose an detailed and easy to understand article on {topic}"
        "The article should be engaging and informative, suitable for a general audience."
        "It should be well-structured, with a clear introduction, body, and conclusion."
        "Use markdown formatting for headings, lists, and code snippets where appropriate."
        "The article should be at least 4 paragraphs long and cover the key points from the research report."
    ),
    expected_output=f"A 4 paragraph article on {topic} fomatted as markdown",
    tools=[search_tool],
    agent=writer,
    async_execution=False,
    output_file="blog-post.md"
)

crew = Crew(
    agents=[researcher, writer],
    tasks=[research_task, write_task],
    process=Process.sequential
)

result = crew.kickoff()
print(result)

Execute the code:

python agent.py

The generated blog post will be saved as blog-post.md in the project directory. Open it in any text editor.

You can find the demo code on Github Repo

gRPC stands for Google Remote Procedure Calls and it is a framework for building APIs. It uses HTTP/2 which allows developers to build high performance APIs. Though it has limited browser support, it is better suited for internal systems that require real-time streaming and has large data loads. In this tutorial we would code some simple gRPC APIs. Checkout this video if you wish to know more about gRPC

Setup​

First we need to install protocol buffer compiler. For installation instructions, see Protocol Buffer Compiler Installation

We would also need to install protocol compiler plugins for Go using the following commands:

go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@latest

Update your PATH so that the protoc compiler can find the plugins

export PATH="$PATH:$(go env GOPATH)/bin"

Generate gRPC code​

Now, after initializing a project, we would create a folder that would contain our proto files. In our case lets name it greeting.

mkdir greeting && cd greeting && touch greeting.proto

Inside greeting.proto we would define the structure of required request, response and the functions.

syntax = "proto3";

option go_package = "github.com/Xebec19/probable-lamp/greeting";

package greeting;

service greetingService {
    rpc SayGreeting(GreetingRequest) returns (GreetingResponse) {}
}

message GreetingRequest{
    string name = 1;
}

message GreetingResponse {
    string message = 1;
}

In greeting.proto we have defined a service greetingService that would return a simple rpc method that takes a request and sends back a response.

Before we use the new service method, we need to compile the .proto file. Inside the root directory of the project, we would run the following command:

protoc --go_out=. --go_opt=paths=source_relative \
    --go-grpc_out=. --go-grpc_opt=paths=source_relative \
    greeting/greeting.proto

This will generate greeting_grpc.pb.go and greeting.pb.go files, which contain:

1. Code for populating, serializing and retrieving GreetingRequest and GreetingResponse message types.
2. Generated client and server code.

Creating the server​

Now we would create a server folder, which would contain code for the server. Open server/main.go and create a server and add methods to it.

type server struct {
    ...
}

func (s *server) SayGreeting(ctx context.Context, in *pb.GreetingRequest) (*pb.GreetingResponse, error) {
	...
}

Lets create a simple rpc method SayGreeting that takes a name and returns a string.

func (s *server) SayGreeting(ctx context.Context, in *pb.GreetingRequest) (*pb.GreetingResponse, error) {
	return &pb.GreetingResponse{Message: "Hello " + in.GetName()}, nil
}

Once, we have implemented all our methods, we would start our gRPC server on a given port.

lis, err := net.Listen("tcp", ":50051")
if err != nil {
    log.Fatalf("failed to listen on port 50051: %v", err)
}

s := grpc.NewServer()
pb.RegisterGreetingServiceServer(s, &server{})

s.Serve(lis)

Finally, our server would look like below.

package main

import (
	"context"
	"log"
	"net"

	pb "github.com/Xebec19/probable-lamp/greeting"
	"google.golang.org/grpc"
)

type server struct {
	pb.UnimplementedGreetingServiceServer
}

func (s *server) SayGreeting(ctx context.Context, in *pb.GreetingRequest) (*pb.GreetingResponse, error) {
	return &pb.GreetingResponse{Message: "Hello " + in.GetName()}, nil
}

func main() {
	lis, err := net.Listen("tcp", ":50051")
	if err != nil {
		log.Fatalf("failed to listen on port 50051: %v", err)
	}

	s := grpc.NewServer()
	pb.RegisterGreetingServiceServer(s, &server{})

    log.Printf("gRPC server listening at %v", lis.Addr())

    if err := s.Serve(lis); err != nil {
		log.Fatalf("failed to serve: %v", err)
	}
}

In above code, we build a server that listens to port :50051 and added a SayGreeting method to it, which accepts a name parameter and returns a string.

Creating the client​

In Go, we also call a client as stub. This client interacts with the server and invokes the RPC methods defined in the .proto file. Let's create a client/main.go file to implement the client.

The client first needs to establish a connection with the gRPC server.

conn, err := grpc.NewClient("localhost:50051", grpc.WithTransportCredentials(insecure.NewCredentials()))
if err != nil {
	log.Fatalf("failed to connect to gRPC server at localhost:50051: %v", err)
}

defer conn.Close()

Using the connection, we initialize a client for the GreetingService:

c := pb.NewHelloWorldServiceClient(conn)

To allow the client to accept the --name flag, we use Go's flag package. Here's how you can implement it:

name := flag.String("name", "World", "Name to greet")
flag.Parse()

We then call the SayGreeting method, passing a GreetingRequest message:

ctx, cancel := context.WithTimeout(context.Background(), time.Second)
defer cancel()

r, err := c.SayGreeting(ctx, &pb.GreetingRequest{Name: *name})
if err != nil {
	log.Fatalf("error calling function SayGreeting: %v", err)
}

log.Printf("Response from gRPC server's SayGreeting function: %s", r.GetMessage())

Here's the complete code for the client:

package main

import (
	"context"
	"flag"
	"log"
	"time"

	pb "github.com/Xebec19/probable-lamp/greeting"
	"google.golang.org/grpc"
	"google.golang.org/grpc/credentials/insecure"
)

var name = flag.String("name", "Default Name", "Name to greet")

func main() {

	flag.Parse()

	conn, err := grpc.NewClient("localhost:50051", grpc.WithTransportCredentials(insecure.NewCredentials()))
	if err != nil {
		log.Fatalf("failed to connect to gRPC server at localhost:50051: %v", err)
	}

	defer conn.Close()

	c := pb.NewGreetingServiceClient(conn)

	ctx, cancel := context.WithTimeout(context.Background(), time.Second)
	defer cancel()

	r, err := c.SayGreeting(ctx, &pb.GreetingRequest{Name: *name})
	if err != nil {
		log.Fatalf("error calling function SayGreeting: %v", err)
	}

	log.Printf("Response from gRPC server's SayGreeting function: %s", r.GetMessage())
}

Running the Client and Server​

To test the setup:

1. Start the server using below command:

go run server/main.go

2. Start the client with the --name flag:

go run client/main.go --name=Rohan

3. The client will display the custom greeting message

2024/12/01 22:44:41 Response from gRPC server's SayGreeting function: Hello Rohan

This concludes our introduction to gRPC with Go. You've successfully built a client-server application using gRPC!

Source Code

Building 2D games is both fun and a great way to improve your coding skills. In this tutorial, we'll create a simple game using KaplayJS, a JavaScript game development library. The game is about controlling a character, "the bean," and helping it jump over pipes to avoid collisions. Let's break down the steps!

Setting Up the Game​

First, let's set up the game project using the Kaplay CLI tool:

$ npx create-kaplay easy-leap
$ cd easy-leap
$ npm run dev

You'll see a basic layout like this in your browser:

Now, let's load our character sprite, "the bean," using the following code:

import kaplay from "kaplay";
import "kaplay/global";

const k = kaplay();

k.loadSprite("bean", "sprites/bean.png");

• loadSprite() function loads the character image we'll use for our player.

Setting Gravity​

Next, we set up the gravity for the game:

k.setGravity(3200);

This ensures the bean falls unless it jumps. We can also set the background color to sky blue:

setBackground(141, 183, 255);

Creating the Game Scene​

In KaplayJS, game logic is organized in scenes, Here's how we define the main game scene:

k.scene("game", () => {
  // Game logic goes here
});

Now, let's initialize the bean and pipes inside this scene.

The Bean Character​

We create our bean character using:

const bean = k.add([sprite("bean"), pos(width() / 4, 0), area(), body()]);

Here's what each part does:

• sprite("bean"): Draws the bean sprite.
• pos(width() / 4, 0): Places the bean at a quarter of the screen's width and the top of the screen.
• area(): Adds a collider for detecting collisions.
• body(): Makes the bean affected by gravity and allows it to jump.

Jumping Mechanism​

To make the bean jump, we add the following input controls:

const JUMP_FORCE = 800;

onKeyPress("space", () => bean.jump(JUMP_FORCE));
onGamepadButtonPress("south", () => bean.jump(JUMP_FORCE));
onClick(() => bean.jump(JUMP_FORCE));

• Spacebar for keyboard control.
• Gamepad button for controller users.
• Clicking for mobile or desktop users.

We also check for when the player falls, triggering a game-over state:

const CEILING = -60;

// check for fall death
bean.onUpdate(() => {
  if (bean.pos.y >= height() || bean.pos.y <= CEILING) {
    // switch to "lose" scene
    go("lose", score);
  }
});

Adding Pipes​

The challenge of the game is avoiding pipes. Here's how we generate them:

const PIPE_OPEN = 240;
const PIPE_MIN = 60;
const SPEED = 320;

function spawnPipe() {
  const h1 = rand(PIPE_MIN, height() - PIPE_MIN - PIPE_OPEN);
  const h2 = height() - h1 - PIPE_OPEN;

  k.add([pos(width(), 0), rect(64, h1), area(), move(LEFT, SPEED), "pipe"]);

  k.add([
    pos(width(), h1 + PIPE_OPEN),
    rect(64, h2),
    area(),
    move(LEFT, SPEED),
    "pipe",
    { passed: false },
  ]);
}

• rand() generates random heights for the pipes.
• add() creates the pipes as rectangles that move from right to left at a set speed.
• move(LEFT, SPEED) keeps the pipes moving across the screen.

This function creates pipes that move from right to left. We generate a new pipe every second:

k.loop(1, () => spawnPipe());

Scoring and Collisions​

To track the score, we add the following code:

let score = 0;

// display score
const scoreLabel = k.add([
  text(score),
  anchor("center"),
  pos(width() / 2, 80),
  fixed(),
  z(100),
]);

function addScore() {
  score++;
  scoreLabel.text = score;
}

Points are added every time the bean successfully passes a pipe:

k.onUpdate("pipe", (p) => {
  if (p.pos.x + p.width <= bean.pos.x && p.passed === false) {
    addScore();
    p.passed = true;
  }
});

If the bean collides with a pipe, it's game over:

bean.onCollide("pipe", () => {
  go("lose", score);
  addKaboom(bean.pos);
});

Here's the final game scene:

k.scene("game", () => {
  const bean = k.add([sprite("bean"), pos(width() / 4, 0), area(), body()]);

  // check for fall death
  bean.onUpdate(() => {
    if (bean.pos.y >= height() || bean.pos.y <= CEILING) {
      // switch to "lose" scene
      go("lose", score);
    }
  });

  const CEILING = -60;

  // check for fall death
  bean.onUpdate(() => {
    if (bean.pos.y >= height() || bean.pos.y <= CEILING) {
      // switch to "lose" scene
      go("lose", score);
    }
  });

  const JUMP_FORCE = 800;

  onKeyPress("space", () => bean.jump(JUMP_FORCE));
  onGamepadButtonPress("south", () => bean.jump(JUMP_FORCE));
  onClick(() => bean.jump(JUMP_FORCE));

  const PIPE_OPEN = 240;
  const PIPE_MIN = 60;
  const SPEED = 320;

  function spawnPipe() {
    const h1 = rand(PIPE_MIN, height() - PIPE_MIN - PIPE_OPEN);
    const h2 = height() - h1 - PIPE_OPEN;

    k.add([pos(width(), 0), rect(64, h1), area(), move(LEFT, SPEED), "pipe"]);

    k.add([
      pos(width(), h1 + PIPE_OPEN),
      rect(64, h2),
      area(),
      move(LEFT, SPEED),
      "pipe",
      { passed: false },
    ]);
  }

  k.loop(1, () => spawnPipe());

  let score = 0;

  // display score
  const scoreLabel = k.add([
    text(score),
    anchor("center"),
    pos(width() / 2, 80),
    fixed(),
    z(100),
  ]);

  function addScore() {
    score++;
    scoreLabel.text = score;
  }

  k.onUpdate("pipe", (p) => {
    if (p.pos.x + p.width <= bean.pos.x && p.passed === false) {
      addScore();
      p.passed = true;
    }
  });

  bean.onCollide("pipe", () => {
    go("lose", score);
    addKaboom(bean.pos);
    destroy(bean);
  });
});

The Lose Scene​

When the player loses, we switch to a lose scene to display the final score:

scene("lose", (score) => {
  k.add([
    sprite("bean"),
    pos(width() / 2, height() / 2 - 108),
    scale(3),
    anchor("center"),
  ]);
  k.add([
    text(score),
    pos(width() / 2, height() / 2 + 108),
    scale(3),
    anchor("center"),
  ]);

  onKeyPress("space", () => go("game"));
  onClick(() => go("game"));
});

Here, the player can restart the game by pressing space or clicking anywhere.

Game Initialization​

The game starts with:

go("game");

This loads the "game" scene and kicks off the gameplay.

Publishing on itch.io​

To publish your game on itch.io:

1. Build the game:

   $ npm run bundle
   

   This creates a ZIP file in the dist folder.

2. Upload the ZIP to itch.io:

   • Sign in to itch.io.
   • Create a new project and select HTML as the project type.
   • Upload the ZIP and enable "This file will be played in the browser."

3. Publish: Click "Save and View Page," and once everything looks good, click "Publish."

GAME LINK

CODE

Happy coding!

Amazon S3 (Simple Storage Service) is a scalable object storage service used widely for various data storage needs. This guide will walk you through the process of uploading a file to an S3 bucket, from creating the bucket and setting up the necessary permissions, to writing and testing the code that performs the upload. Let's get started!

Create an S3 Bucket​

First we need to create a bucket in S3.

Create a Policy​

Next, we need to create a policy that grants access to this bucket.

1. Navigate to the IAM section of AWS.

2. Go to the policy section in the left sidebar.

3. Create a new policy.

4. Set the resource to S3 and check "All S3 actions" in the "actions allowed" section.

5. In the Resources section, input the ARN (Amazon Resource Name) of your S3 bucket opposite the bucket label. You can find the ARN in the properties section of the bucket.

6. Scroll down and select "Any" for the object label, which grants permission on any object inside the bucket.

7. Provide a name and description for your policy.

Create an IAM User​

After creating the policy, we need to create an IAM user and assign this policy to the user.

1. Go to the user section in the IAM Dashboard.

2. Enter a name for the IAM user.

3. Skip the AWS Management console access since we only need programmatic access for this user. Attach the policy created earlier to this user.

4. Review the details and create the user.

5. Create access keys for the user so that our API can access the bucket on behalf of the created user. Go to the "Security Credentials" section.

6. Scroll down to "Access Keys" and create a new access key.

7. Optionally, add a description to the access key. Make sure to save the secret access key as it will not be retrievable later.

Create a web server​

To handle file uploads, we will create a web server using the Go programming language and the go-fiber package.

1. Download the required packages:

go get github.com/gofiber/fiber/v2

go get github.com/aws/aws-sdk-go/aws github.com/aws/aws-sdk-go/aws/credentials github.com/aws/aws-sdk-go/aws/session github.com/aws/aws-sdk-go/service/s3/s3manager

2. Create a web server listening on port 3000:

3. Initialize the AWS SDK:

import (
	"github.com/aws/aws-sdk-go/aws"
	"github.com/aws/aws-sdk-go/aws/credentials"
	"github.com/aws/aws-sdk-go/aws/session"
	"github.com/aws/aws-sdk-go/service/s3/s3manager"
)

var Uploader *s3manager.Uploader

func NewAWS() {

	var region string = ""    // AWS Region
	var accessKey string = "" // access key
	var secretKey string = "" // secret access key

	awsSession, err := session.NewSessionWithOptions(
		session.Options{
			Config: aws.Config{
				Region: aws.String(region),
				Credentials: credentials.NewStaticCredentials(
					accessKey,
					secretKey,
					"",
				),
			},
		})

	if err != nil {
		panic(err)
	}

	Uploader = s3manager.NewUploader(awsSession)
}

Initialize this function in main.go:

package main

import (
	"github.com/Xebec19/psychic-enigma/internal"
	"github.com/gofiber/fiber/v2"
)

func main() {

	internal.NewAWS() // initialize AWS SDK

	app := fiber.New()

	app.Get("/", func(c *fiber.Ctx) error {
		return c.SendString("Hello, World!")
	})

	app.Listen(":3000")
}

4. Create a function to upload a file to S3:

type Result struct {
	Value string
	Err   error
}

func UploadImage(file *multipart.FileHeader) <-chan Result {
	ch := make(chan Result)

	go func() {
		defer close(ch)
		src, err := file.Open()
		if err != nil {
			return
		}
		defer src.Close()

		var bucketName string = "" // bucket name

		_, err = Uploader.Upload(&s3manager.UploadInput{
			Bucket: aws.String(bucketName),
			Key:    aws.String(file.Filename),
			Body:   src, // add file body here
		})
		if err != nil {
			ch <- Result{Value: "", Err: err}
			return
		}

		url := fmt.Sprintf("https://%s.s3.amazonaws.com/%s", bucketName, file.Filename)

		ch <- Result{Value: url, Err: nil}
	}()

	return ch
}

5. Create an API endpoint to handle file uploads:

app.Post("/upload", func(c *fiber.Ctx) error {

		form, err := c.MultipartForm()

		if err != nil {
            return err
		}

		ch := internal.UploadImage(form.File["image"][0])

		response := <-ch
		if response.Err != nil {
			return response.Err
		}

		c.SendString(response.Value)
		return nil
})

Testing the Code​

1. Use Postman to test the file upload endpoint:

2. Verify the file has been uploaded to the S3 bucket:

Congratulations! You have successfully uploaded a file to S3. You can find the source code https://github.com/Xebec19/psychic-enigma.

Conclusion​

Uploading files to S3 involves creating a bucket, setting up the appropriate IAM policies and user, and writing code to handle the file upload. By following this guide, you should now be able to upload files to S3 using Go and the AWS SDK. Happy coding!

Web development is an exciting field that empowers us to create and maintain websites and web applications. It involves leveraging various technologies such as HTML, CSS, and JavaScript to construct the visual and interactive elements of a website.

When it comes to the front-end, we're focused on refining the user interface, ensuring both an aesthetically pleasing design and user-friendly experience. This is where HTML (Hypertext Markup Language) takes the stage, defining the structure of our web content. Meanwhile, CSS (Cascading Style Sheets) steps in to stylize and arrange our content, providing the desired appearance and feel.

On the flip side, the back-end encompasses server-side logic that grants dynamism and functionality to our website. This is where programming languages like Python, Ruby, PHP, or JavaScript (Node.js) come into play. It's also where we manage databases, handling user data and other essential information our website requires.

Now, let's delve into the fundamentals of web browsing and how the internet works.

Browsing the web​

As we enter "www.google.com" in our browser's address bar, the query journeys to the ISP (Internet Service Provider), which looks up the query in the DNS (Domain Name Service). ISPs are substantial entities providing internet services to users like us, and DNS acts as a registry mapping domain names to unique IP addresses. These IP addresses serve as distinctive identifiers for each computer connected to the internet.

Upon locating the requested resource in the DNS, the ISP returns the IP address of the server hosting that resource. Subsequently, the server transmits HTML, CSS, and JavaScript files back to us. Once received, these files are executed in our browser, culminating in the display of a complete web page.

For further insight into ISPs, you can refer to this informative article on Internet Service Provider Hierarchy.

When we have the IP address, we're able to establish a direct connection with the server. Wondering how we achieve this connection? Refer to the illustrative diagram below:

Our connection to the ISP initiates a connection to the Internet Backbone, which in turn links us to the server. The Internet Backbone is essentially the core of the internet, comprising high-speed networks interlinked by fiber-optic connections and efficient routers. You can explore the intricate network of the Internet Backbone through this submarine cable map

Introduction to html, css and javascript​

Let's now explore a basic example of HTML, CSS, and JavaScript integration.

To create an HTML file, we begin by saving a file with a ".html" extension. This file should open with a:

<!DOCTYPE html>

tag, indicating adherence to the HTML5 standard. Within the file, the root element is the <html> tag, housing two crucial tags: <head> and <body>. The <head> section contains metadata about the webpage (e.g., title, keywords, description), while the <body> section houses the webpage's content.

Here's a simplified example using an <h1> tag to display a heading:

<!doctype html>
<html>
<head>
<title>Web page</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

However, a plain webpage lacks visual appeal. This is where CSS steps in, offering the means to introduce colors and other stylistic elements that enhance interactivity. Don't worry about the syntax just yet; we'll delve into that in upcoming articles. Here's a simple demonstration of how we'd create basic styling:

.root {
    background-color: blue;
}

This styling can then be applied to our document:

<!doctype html>
<html>
<head>
<title>Web page</title>
<style>
.root {
    background-color: blue;
}
</style>
</head>
<body>
<h1 class="root">Hello world</h1>
</body>
</html>

As you'll notice, we've assigned a class property to the <h1> tag. We'll explore this concept further in our CSS discussions.

For interactivity, let's add a button that displays a message box when clicked:

<button onclick="handleClick()">Click me</button>

<script>
function handleClick() {
    prompt("hello world");
}
</script>

Incorporating the above code into our webpage:

<!doctype html>
<html>
<head>
<title>Web page</title>
<style>
.root {
    background-color: blue;
}
</style>
</head>
<body>
<h1 class="root">Hello world</h1>
<button onclick="handleClick()">Click me</button>

<script>
function handleClick() {
    prompt("hello world");
}
</script>
</body>
</html>

Conclusion​

In the vast landscape of web development, we've uncovered the core mechanics of crafting captivating websites and applications. Armed with HTML, CSS, and JavaScript, we've navigated the blend of structure, style, and interactivity that defines modern web experiences.

As you embark on your web development journey, remember that every line of code is a step toward mastery. Embrace the evolving nature of the field, stay curious, and let your passion drive your progress. The world of web development holds endless opportunities for innovation and growth.

May your coding be crisp, your designs engaging, and your journey fulfilling. Happy coding.

It always make me curious that how codeforces provide real time notifications to users during contests. Does it use any tool like firebase to set pub/sub ? Does it use long polling ? Sending repeat requests to server to fetch notifications does not sound like a bright idea. Though I am still not very clear about how codeforces handles all those timely prompts but I have came across a way which might serve the purpose and that is HTML Server Sent Events.

What is HTML SSE ?​

As mentioned by w3schools "Server-Sent Events (SSE) allow a web page to get updates from a server". Allright! we do not need to send repeated request to the server for fetching update. We can use Server-Sent Events through which our server will send update to the website. Before we dig further, let's have a look on the list of browsers which supports Server-Sent Events.

Implementation​

Let's move to the fun part and learn how to implement SSE. First we will create a nodeJs application and create a route as follows:

As we can see we only need to set "Content-Type" header as "text/event-stream" and send our data. In our case we will be sending a timestamp. Now lets create a simple html page which will receive updates from our server.

In the above code, we have created an EventSource which is connected to "http://localhost:3000/sse" route. We have used onmessage event to get messages. Some other events are as follows:

1. onopen: When a connection to the server is opened
2. onmessage: When a message is received
3. onerror: When an error occurs

Let's start our server with below command.

node index.js

Now, we will checkout our web page.

Awesome! We are automatically receiving those timestamps from our server. Hope you find this article helpful. You can find the source code on github. Happy coding!