Forem: Savvas Stephanides

Run Deepseek locally using Docker!

Savvas Stephanides — Mon, 10 Feb 2025 16:52:33 +0000

About

If you follow AI news even a little bit, you've probably heard of Deepseek. The new AI app built in China which is supposed to be a lot better than anything else out there. You've also probably heard horror stories about apps from China collecting information on their users.

If this sounds like you, you're probably looking for a better alternative. And there is: You can build a Deepseek client on your local system and run it without any access to the Internet. What's even better is that you can do this in Docker so you don't need anything else installed. Sound good? If yes, read on!

What we're building

We're going to use Docker to create a web interface where you can ask questions to Deepseek.

📖 Docker, explained

To do this, we're going to create two apps:

A Deepseek endpoint built with Ollama
A simple static website which calls the endpoint and gets answers to questions.

When we're building multiple apps that communicate with each other, we can do this easily in Docker using Docker Compose.

Steps

🏃‍♂️ In a hurry? Just clone this repository and follow the instructions in the README file!

Step 1: Create docker-compose file

To work with Docker Compose, we first need to create a new file in our project's directory. Create a new directory for your project if you haven't do so already and in that, create a new file called docker-compose.yml.

💡 A docker-compose.yml file is the place where we will be describing our two apps so we can run them.

Step 2: Add first app

Now that we created our Docker Compose file, let's define our first app, the Deepseek Ollama app. In Docker Compose, apps are called "services", but it's essentially the same thing.

The Deepseek Ollama app is where we're going to point to to ask questions to Deepseek and get answers.

💡 What is Ollama? Ollama is a lightweight framework where you can easily run open source frameworks, like Deepseek or Llama, on your computer locally.

To add the Deepseek endpoint to your docker-compose.yml file, add this to the file:

services:
  ollama:
    image: ollama/ollama
    volumes:
      - ./ollama-models:/root/.ollama
    ports:
      - 11434:11434

🤔 What is going on here?

This part tells Docker Compose to create a container called "ollama"
The container will be based on the image (basically a blueprint) called ollama/ollama. This is an image which comes with Ollama preinstalled so you don't have to do anything else!
The volumes part essentially saves all the data from the models we're going to install later on your local hard drive. Within the container, all this data is saved in /root/.ollama but will disappear once the container is shut down. Not exactly what we want. So whatever is stored in the container's directory, will be permanently stored in ollama-models directory in your project's root.
When the Ollama app gets up and running, it will run on the 11434 port within the container, but not on your machine, which means you won't be able to access it from your browser. To fix this, the ports part pairs the two ports.

Now that we added the Ollama endpoint, we can now run it so we can install Deepseek. To do this, just run this Docker Compose command in your terminal:

docker compose up -d ollama

Now go to your browser and check that the Ollama app is running, by pointing your browser to this address:

http://localhost:11434

Your browser should show the "Ollama is running" text like so:

Step 3: Install Deepseek

Now that Ollama is up and running, we can now go ahead and install our Deepseek model. To do this just run this Docker Compose command:

docker compose exec ollama ollama pull deepseek-r1:7b

🤔 What is going on here?

The exec command from Docker Compose essentially runs any command within a given container, in this case the ollama container. The above line runs (executes) the command ollama pull deepseek-r1:7b which installs the Deepseek model. The basic structure of the exec command is as follows: docker compose exec <containerName> <command>.

This command will take a few minutes to install (depending on the size of the model) but once this is done, it should populate the new ollama-models directory with the files needed for the Deepseek model.

💡 The Deepseek model comes in lots of different sizes. For this example, I've chosen 7b (which means 7 billion parameters) but you can choose more or less depending on the capabilities of your system. You can see the full list here.

Step 4: Create a website

Now that we have our Deepseek app up and running, we can create a web interface to ask questions. We're going to create a simple site with HTML, CSS and Javascript. This is what we're creating:

And here's how:

HTML

The HTML is going to define a simple page with a text box, a button to send the question and a space for the answer.

📖 HTML, explained

Create a new directory called web and inside that create a new file called index.html. Paste this HTML inside the file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AI</title>
    <script src="showdown.min.js"></script>
    <script src="ollama.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>🤖 Local Deepseek</h1>

    <textarea name="" id="question"></textarea>
    <button onclick="run()">Ask!</button>

    <div id="answer">

    </div>
</body>
</html>

🤔 What is going on here?

In the <head> part of the HTML, you'll notice that we're linking to a style.css We'll create this file next in order to style our website.
You'll also notice two Javascript files, ollama.js and showdown.min.js. ollama.js will be where we talk to Deepseek and showdown.min.js uses Showdown, a Javascript library for converting Markdown (what we'll be getting back from Deepseek) to HTML.

CSS

📖 CSS, explained

To style our page, create a new file called style.css and paste the CSS below:

body{
    width: 600px;
    margin: auto;
}

#question{
    display: block;
    width: 100%;
    padding: 9px;
    font-size: 15px;
}

#answer{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-top: 30px;
    line-height: 1.5;
}

#answer #think{
    border-left: 3px solid #eee;
    padding-left: 9px;
    color: #aaa;
    font-style: italic;
}

Javascript

📖 Javascript, explained

Now we're going to create the Javascript to talk to Deepseek and give us answers to our questions. Create a new file called ollama.js and paste this:

const converter = new showdown.Converter()

async function run(){
    let prompt = document.querySelector("#question").value

    const response = await fetch("http://localhost:11434/api/generate", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            model: "deepseek-r1:7b",
            prompt: prompt,
            stream: true
        })
    })

    const reader = response.body.getReader()
    const decoder = new TextDecoder()

    let compiledResponse = ""
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value, { stream: true });
        let chunkJson = JSON.parse(chunk)
        compiledResponse += chunkJson.response
        compiledResponse = compiledResponse.replace("<think>", `<div id="think">`)
        compiledResponse = compiledResponse.replace("</think>", `</div>`)
        document.querySelector("#answer").innerHTML = converter.makeHtml(compiledResponse)
    }
}

🤔 What is going on here?

We're creating a Javascript function called run().
Within the function, we're going to get the text from the text box in our HTML using document.querySelector("#question").value and store it in a variable called prompt.
Then we're going to use the built in fetch() function to send a POST request to http://localhost:11434/api/generate which includes our prompt. The response is stored in a variable called response. Since we've set stream: true, we're going to get a response in small chunks.
To get each chunk individually, we're going to run response.body.getReader() to get the reader and initialise a new TextDecoder with new TextDecoder().
We're introducing a new empty string let entireResponse = "" which we're going to be appending each chunk of the response.
Finally, the while loop is going to run until it runs out of chunks. For each chunk, we're going to get the response, add it to the entireResponse, process it, and show it to the webpage using document.querySelector("#answer").innerHTML = entireResponseAsHtml.

🤔 Why are we processing the response?

The response comes back from Deepseek looking like this:

<think>
The user says hello so I should say hello back
</think>

**Hello! How are you doing?**

When we process the file, we replace <think> with <div id="think"> and </think> with </div>. This way we can style it however we like.

entireResponse = entireResponse.replace("<think>", `<div id="think">`)
entireResponse = entireResponse.replace("</think>", `</div>`)

We're also then converting the entire response from Markdown into HTML, using the ShowdownJS library:

let entireResponseAsHtml = converter.makeHtml(entireResponse)

Import showdown

Finally, we need to add ShowdownJS to our project. To do this, simply download this file and add it to the web directory of your project.

At the end of all this, the web directory should look like this:

📝 index.html
📝 ollama.js
📝 showdown.min.js
📝 style.css

Step 5: Add web page to Docker Compose

Once you're done with the creation of your website, add your app to the Docker Compose file like so:

  web:
    image: nginx:1.27.3-alpine
    volumes:
    - ./web:/usr/share/nginx/html
    ports:
    - "3001:80"

Your entire docker-compose.yml file should look like this:

services:
  ollama:
    image: ollama/ollama
    volumes:
      - ./ollama-models:/root/.ollama
    ports:
      - 11434:11434

  web:
    image: nginx:1.27.3-alpine
    volumes:
    - ./web:/usr/share/nginx/html
    ports:
    - "3001:80"

Run the website

Now that we've created our website and added to our docker-compose.yml file, we can run it with this command:

docker compose up -d web

Give it one or two seconds and then point your browser to this URL:

http://localhost:3001

If you see this, we're good to go:

Let's test it!

Let's give our AI app a go! Write a question in the text box and click the Ask button.

Deepseek should soon start responding. First with some "thinking"...

This is how it looks on Video:

And that's it! You are now running Deepseek locally using just Docker!

Now every time you want to run your AI app, just run this command from your project directory in your terminal:

docker compose up -d

And that's it!

Any questions? Let me know here!

Host PHP for free!

Savvas Stephanides — Wed, 02 Oct 2024 12:09:27 +0000

PHP was and remains one of the most popular web application languages out there. However, the choices for hosting a PHP project for free are limited, especially with services like 000webhost shutting down.

Fear not however... You can host your PHP project for free on Render using Docker!

💡 Docker, explained

Here's how:

What you'll need to have installed

Before we begin, make sure you have Docker installed on your machine. Install Docker.

Steps

Step 1: Create a PHP project

Firstly, we'll going to create a simple PHP project with a simple "Hello world" message:

Create a new directory myPhpProject and point to the directory using your terminal:

mkdir myPhpProject
cd myPhpProject

Next we're going to create our web page. Create a file called index.php using either your terminal or your favourite code editor.

In the index.php file add this PHP code:

<?php
echo "Hello world"
?>

💡 What does this code do? This code opens a "code block" to write PHP code using <?php and ?>. We can write our PHP code inside it. Then we use the echo keyword from PHP to write something on the page. In this case, "Hello world".

Step 2: Create a Docker Hub account

Now let's take a few seconds to set up a free account on Docker Hub. Sign up for Docker

But why? Because in the next steps, we're going to create an image from our PHP project and publish it on Docker Hub. Docker Hub is just a library of pre-existing images like Ubuntu, Python or NodeJS.

Step 3: Create a Docker image

Now we're going to create our Docker image. Go ahead and create a file called Dockerfile in your app directory.

What's a Dockerfile? A Dockerfile is a file which gives instructions to Docker on how to create an image.

Add this to your Dockerfile:

FROM php:7.4-apache
COPY ./index.php /var/www/html

💡 What does this do? Firstly, it gets a pre-existing handy image from Docker Hub which has PHP and Apache already installed. Next it copies the index.php file we created earlier into the html directory. This is where Apache will grab the file and show it to the browser.

Now that we created our Dockerfile, it's time to create our image. Run this command in your terminal:

docker build -t myphpproject .

What does this do? It just tells Docker to grab the Dockerfile, create an image from it and call it myphpproject.

Now that we created our image, let's test it out by running a container from it:

docker run -it --rm -p 80:80 myphpproject

💡 What does this do? It uses our new image, myphpproject to create a container which contains our website. The website will be available from port 80, so after a few seconds you can access it from here:

http://localhost

Step 4: Host image on Docker Hub

Now that our image is ready, it's time to host it to Docker Hub.

Firstly, login to Docker Hub from your Terminal:

docker login

The process should look a bit like this:

Username: savvasstephanides
Password: 
Login Succeeded

Next, we need to give our image a tag. Sort of like a version number:

docker tag myphpproject savvasstephanides/myphpproject:1.0

You can iterate your version numbers for each new version.

Now that our image and tag are ready, we can push our image to Docker Hub, like so:

docker push savvasstephanides/myphpproject:1.0

Your terminal should look a bit like this:

The push refers to repository [docker.io/savvasstephanides/myphpproject]
93b8f571dc38: Pushed

Now log in to Docker Hub in your browser and check out your image.

Step 5: Sign up for Render

Render is a great service that lets you host your projects with a generous free tier. Go ahead and sign up for Render for free.

Create a new Web service on Render

After signing up to Render, go to the Dashboard.

From the Dashoard, select New and then Web service:

Next, choose Existing image:

Under Image URL, write the address of your image like so:

docker.io/<your_docker_hub_username>/<project_name>:<tag_name>

For example:

docker.io/savvasstephanides/myphpproject:1.0

Give your project a name:

Select Free under Instance type:

Click Deploy Web Service:

Give it a few seconds to complete:

Once it's done...

Click the link at the top left that looks like https://abc.onrender.com. Your website is up and running!
🎉

You've successfully published your PHP app online!

Have you hosted your PHP using this tutorial? Paste a link to your project in the comments to show off your creations! Thanks for reading!

Create a new Laravel project in seconds using Docker!

Savvas Stephanides — Thu, 12 Sep 2024 16:53:47 +0000

Docker makes getting started with a new projects much easier, saving you hours of setting up individual tools for it to work. Laravel is no exception. Here's how you can set up a new Laravel project using Docker, complete with a MySQL database.

Step 1: Create a new project directory

First, we're going to set up a new empty directory, which will be houising our Laravel project. Call it myApp or whatever else you like:

mkdir myApp
cd myApp

Step 2: Create a Docker Compose file

Next we're going to define our two containers:

One for our Laravel project which will container all the PHP code necessary.
One for the MySQL database. If you'd rather use MariaDB, replace image: mysql:8.0 with image: mariadb.

services:
  web:
    image: bitnami/laravel
    volumes:
      - ./app:/app
    working_dir: /app
    environment:
      - LARAVEL_DATABASE_HOST=db
      - LARAVEL_DATABASE_USER=root
      - LARAVEL_DATABASE_NAME=laravel
      - LARAVEL_DATABASE_PASSWORD=pass1
      - LARAVEL_DATABASE_PORT_NUMBER=3306
    restart: always
    ports:
      - 8000:8000

  db:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=pass1
      - MYSQL_DATABASE=laravel

What is happening here?

Docker Compose is a tool by Docker that helps to build multiple components at the same time. Really helpful if you're running a project with multiple moving parts, like a database.

In this case, web is the Laravel project and db is the database. The web container is created from the base image bitnami/laravel, which is a handy image which has Laravel preinstalled. It adds the app folder as a "volume" to the container so it can run it. The file gives the container the database credentials so it can connect to it, and it also exposes port 8080 so you can open the site with your browser!

The db container is a simple container with MySQL installed. The file gives it the password for the root user and also a name for a database so it can create it.

That's it!

Step 3: Run the containers

Now that we have our docker-compose.yml file in place, we can give Docker the go-ahead to create both containers with a simple command:

docker compose up

Step 4: Check your site

Give it a few seconds, and your site should be up and running. You should see the following line in your terminal:

INFO  Server running on [http://0.0.0.0:8000].

To open it, open http://localhost:8000 in your browser.

Success!

Enjoy your new Laravel site!

Run WordPress locally using Docker!

Savvas Stephanides — Tue, 10 Sep 2024 10:47:30 +0000

There are tons of steps to installing WordPress on your local system. You need to install PHP, MySQL, a server, and more. Thankfully there's a much MUCH easier way to install WordPress locally, all thanks to Docker! Here's how!

Steps

⚠️ Before proceeding, make sure you have Docker installed.

Step 1: Create a new directory

Firstly, we'll need to create a new folder/directory for your project. Create it anywhere you wish and open it / point to it from your Terminal.

mkdir my-wordpress-blog
cd my-wordpress-blog

Step 2: Open code editor

Next we're going to create a few files and folders. The easiest way is to open your favourite code editor. Mine is Visual Studio Code which can be opened like this from the Terminal:

code .

Step 3: Create a Dockerfile

Use your code editor to create your first file called Dockerfile. Inside the file, paste these lines:

FROM php:7.4-apache

RUN docker-php-ext-install mysqli

But what does this do?

Well, a Dockerfile is basically a file which gives instructions on how to create an "image" (basically a blueprint) which will be used to create a container, in this case, the container which will house our WordPress site.

What this specific Dockerfile does is basically:

Use an Apache and PHP image as a base. This means that our container will have Apache server and PHP already installed.
Installs the PHP extension mysqli. This is an extension that’s needed by WordPress to connect to your MySQL database.

Step 4: Create a Docker Compose file

Next, we’re going to create a new file called docker-compose.yml. Paste the following content in this file:

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./wordpress:/var/www/html
    ports:
      - "8080:80"

  db:
    image: mysql
    container_name: my-db
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password1
      MYSQL_DATABASE: wordpress

So, what does this do?

A docker-compose file is a file which gives instructions to Docker on how to create and run multiple containers at once.

In our case, our file will create and run 2 containers:

A “web” container: This will be where our WordPress site lives. It will create a container based on the Dockerfile we created earlier. It will also copy the contents of our site, which we’ll download in the next step.
A MySQL server. This is where our data will live. If you’d rather use MariaDB, replace image: mysql with image: mariadb.

Step 5: Download WordPress

Now that we have the blueprint for our full stack, it’s time to add some content. We’re going to head to the official WordPress site and download the WordPress files.

The download should take a few seconds and it will download a ZIP file.

The zip file should contain a single folder called “wordpress”. Go ahead and extract it on your drive.

Step 6: Move Wordpress directory to your project

After you've extracted the WordPress folder from the ZIP file, go ahead and move that folder to your project.

After doing that, this is how the files at the root of your project should look like:

📁 wordpress
📜 docker-compose.yml
📜 Dockerfile

In case the WordPress folder isn't called "wordpress", you can go ahead and rename it.

Step 7: Build containers

Now we have everything in place and we can run our site. Firstly though, we need to build the image for the "web" container from the Dockerfile. To do this, run the build command from Docker Compose:

docker compose build

This should take a few seconds to complete and should look like this in your Terminal:

Step 8: Run containers

Once the build is completed successfully, you can now run the website. For this, we're using the up command from Docker Compose:

docker compose up -d

Your terminal should look something like this, when running:

So what just happened? Let's go into some technical detail:

What we have just done is run two containers: one called "web" for our WordPress website and one called "db", which contains our MySQL database. Then we used commands from Docker Compose to conveniently run both containers at the same time.

Because these two containers run under the same Compose file, they run under the same "network". This means that they are connected to each other. So, for example, when you need to connect to the database from the web container, the URL to do so is http://db:3306 (because the name of the database container is db). We'll need this when setting up our site.

Step 9: Setup your website

After a few seconds your site should be up and running. You can access it by opening this URL in your browser:

http://localhost:8080

Once opened, you should see this screen:

Select a language and click Continue.

You'll be asked for the database credentials. Add these:

Database name: wordpress
Username: root
Password: password1
Database host: db

After adding these, you can go ahead and run the installation:

Now add your site details. Here you'll be asked about your site details, like the site name, a username, password etc. Add whatever you like here:

Click Install Wordpress.

After that's done, you're pretty much good to go! 🎉

Click Log In. You'll be presented with a log in screen:

Add the credentials you specified during the set up.

Tada! That's it! 🎊

Once you log in, you'll be shown the dashboard:

Here's where you can write articles, create new pages, customise your website to your liking and many many more. This is what makes WordPress so great!

Click on your site's name on the top right to go to the actual site:

This is your website up and running locally complete with a handy Dashboard which can be accessed here:

http://localhost:8080/wp-admin/

Success!

Enjoy editing your new WordPress blog!

What’s your earliest memory of coding?

Savvas Stephanides — Mon, 29 Jan 2024 09:43:59 +0000

We had some brilliant discussions on X and Threads and brought back some nice memories.

So I'm interested to know: what's your earliest memory of coding?

Let's share some memories!

Discussion on Twitter/X

Discussion on Threas

New computer? Install THIS first... 💻

Savvas Stephanides — Thu, 23 Nov 2023 14:47:00 +0000

So! You just got a new laptop! It's right there sitting on your desk.

You excitedly switch it on and the logo of the computer's operating system shows up. A few seconds later, you can finally see the desktop.

A shiny new desktop with 2-3 icons. Nothing else. It's time to turn this laptop into a powerful developer machine.

So... let's install some developer tools for our laptop. What's the thing to install first? Surely you'll want to install a programming language, like Python or NodeJS! Or a database, like MySQL or Mongo!

Nop! You don't need to install any of these things. Just install Docker!

Docker is a tool that lets you install any of these things on little "containers". Think of them like little computers that live in your computer, with their own operating system, package manager etc.

For example, do you need to install the latest version of Python? Just enter this command into your Terminal:

docker pull python:latest

This basically installs the instructions Docker needs to create a new "box" or "container" with its own operating system (Debian in this case) and Python installed. Such instructions are called an image.

Now to work with Python, all you need to do is create a new container using the python image you installed: Use this command to do so:

docker run -it python

And just like that, you can work in Python! No Python installation required!

$ docker run -it python

Python 3.12.0 (main, Nov 21 2023, 17:38:35) [GCC 12.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.

>>> print("Hello world!")
Hello world!
>>>

You can do the same for NodeJS!

$ docker run -it node 
Welcome to Node.js v21.2.0.
Type ".help" for more information.
> console.log("Hello world!")
Hello world!

Or even MySQL:

docker run -e MYSQL_ROOT_PASSWORD=my-secret-pw -d -p 3306:3306 mysql

There's more!

You can do all sorts of stuff you can do with Docker:

Create a separate environment with several services working together, using Docker Compose
Choose a specific version of a tool. For example if you need Python 3.7, just use docker pull python:3.7

And many many more things that will make your workflow so much easier! It definitely improved mine 1000%. I know it will improve yours too.

Learn more about Docker

Learn from a Docker Captain!

Ready to learn more about Docker? Docker Captain Francesco Ciulla (@francescoxx) will take you through everything you need to know about Docker in 57 minutes!

youtube.com

Docker Docs

Learn more about Docker with the documentation.

Explore the images available in Docker Hub

Docker Hub

Learning a new tool for your complex project? THIS is the best way to master it! 👍🎓

Savvas Stephanides — Tue, 14 Nov 2023 17:40:59 +0000

Software developers learn new stuff all the time. And we all know that the best way to learn new things is by creating projects with that thing. But what if you're building a large project and you've just learned a new library to include in it? Do you just include it in your project straight away?

NO! Here's what you should do instead!

The problem

Imagine you're working on a to-do app.

You've been working on this app for months now, so it has become quite complex.

Now you need a simpler way to update records in the database, so you discover a new Javascript library on NPM, called sqlButEasier. Perfect for your needs which gets you excited!

Next thing you do, is read the docs from sqlButEasier. You get a general idea of how it works, and now you want to add it to your big app.

But you need to practice first, and the big complex app of yours isn't exactly the best place to get your hands dirty. So what do you do?

The solution

The solution to this problem is to create a brand new project and practice there!

That's right! No better place to practice something new than a new fresh project, away from the distractions and complexities of an already existing project! Especially if it has hundreds or thousands of lines of code.

Just create a new project with the same programming language and a similar architecture as your current project, and test away!

This way, you'll get some good experience of the tool and once you do, you'll be a lot more confident about using sqlButEasier. With the new confidence, you can now add the new tool in your large and complex project.

Try it out next time you need a new library in a large project. Thanks for reading! 👋

The complete journey of an open source contribution

Savvas Stephanides — Mon, 09 Oct 2023 13:00:00 +0000

"Open source". Two words that when put together bring joy to a developer's heart. In fact, any tool or library you've used, is most likely open source. Which means that the entire code is freely available for anyone to view, download or even make a contribution to.

But what happens if you want to make your own contribution to a project you use and love? Maybe you want to fix a bug? Or add a new feature? Where does it all start and where does it end?

This article will describe the journey of an open source contribution, from issue to merge.

🗣️ This article is brought to you by Say Something. The project which helps you make your first open source contribution by making a very simple change. Check it out!

Station 1: The issue

Our journey starts here. On a website called Github. If a project is open source, chances are the code will live in this website, on its own page. Here's an example.

If you notice on the page, there's a tab called Issues.

This is where the bugs that need fixing, the typos that need correcting and the features that need building are located.

See an issue that you can work on? Great! On to the next step!

Station 2: The assignment

Before you can start working on an issue, the code maintainers have to put a label on the issue that you are going to work on it, so nobody else does. To do that, you'll have to reply to the issue saying something like "can I work on this issue?".

The maintainers would be more than happy to assign it to you, if they haven't already assigned it to someone else.

Now you can work on the issue!

Station 3: The fork

You now have the green light to work on the issue. But, you can't just work on the code on someone's else's account. You need to make a copy of it to your own account to start working. This is new copy is called a fork.

To do this, go to the repository page and click on the Fork icon on the top right.

You'll go to a page called Create a new fork.

You don't need to change anything. Just click on Create fork. After a few seconds, you'll have a copy of the whole code base of the project in your own account!

Now let's get to work!

Station 4: The clone

Now that you've copied the code to your account, it's time to download it to your computer, so you can work on it. The version of the code that will be on your computer is called a clone.

To clone the project, go to your copy of the code (your fork) and click the green Code button.

From the drop down menu, click the "copy" button.

The address of your repo will be copied to the clipboard.

Now head to your Terminal / or command prompt.

Before you proceed, you'll need to download Git. Once you do go to the terminal (or command prompt), go to the directory you want to copy the code and enter this command:

git clone <the address you copied>

For example:

git clone https://github.com/techforhumans/say-something.git

Once that's done, go to the directory of your code by using the cd command:

cd <project name>

For example:

cd say-something

Now let's make the changes!

Station 5: The code

Now you have the code in your computer and you're ready to open it and make changes using your favourite editor.

💡 If you don't have an editor yet, Visual Studio Code is a good one to download.

Navigate the code a bit to get familiarised with it and once you do, find the part of the code that has the issue, or where to add the new feature, or fix that typo.

💡 Some repositories have very specific contribution guidelines, with regards to how the code looks and what must be included in your contribution. Check the repository's README file or CONTRIBUTING file.

Station 6: The push

Once you're done with the changes and you're sure that your new code works, it's time to update your code on Github. We're doing this in 4 steps:

Check
Add
Commit
Push

Firstly, check your changed files. To do this, run this command:

git status

This will list all the files you've changed, created or deleted.

Next, we're going to "add" those changes. Basically it's a way of saying "I want these files to be pushed to my code on Github. This is the command:

git add -A

The above command basically says "I want all my changes to be pushed". Next we're going to "commit":

git commit -m "Added a dad joke"

...which basically means, keep the files I "added" safe until I push them.

And finally, you're going to push the changes. Simply do this:

git push

At this point you'll probably be asked to log in with your Github credentials (depending on the operating system) so they know it's you trying to push changes.

After that, if you go to your Github repository, your changes should show up there!

Now there's one more thing to do, and that's adding your changes to the actual code repository (ie. not your copy of it).

Station 7: The pull request

In order for your changes to end up on the actual code for the project, you'll have to show your changes to the code maintainers and ask them nicely for the changes to be included. We do this, with what we call a pull request.

To start, go to your fork of the code on Github and open the Pull requests tab.

Click on the green New pull request button.

Check your changes one last time and click the green Create pull request button.

On the Open a pull request page, add a short message (if one isn't present already) and click the Create pull request button.

Your pull request is ready!

Now what? Now... we wait... One of the code maintainers will check your pull request and approve it!

Last stop: The merge

If you come back to your pull request, and if a code maintainer is happy with your changes, you'll see this message

name approved these changes

Now, what's left is to merge your changes by clicking the green Merge pull request button.

That's it! 🎉

You have successfully made a contribution to the project! Your changes are proudly added to the main code of the whole project for the world to enjoy! Congrats!

If you're still reading up to this point, thank you! How did you find the article? Let me know below!

Check out my project Say Something to practice what you've just learned by making a very simple first contribution. See you there!

5 common terms used in Open Source, explained.

Savvas Stephanides — Wed, 04 Oct 2023 11:39:38 +0000

October is here which means one thing: Hacktoberfest is back!

People only are showing their excitement about making their contributions to their favourite open source projects!

If you want to start with Open Source, you first need to learn the terms Open Source contributors use.

In this article, I'll list 5 of the most common terms, and as a bonus, I'll tell you the easiest way to make your very first contribution!

5 open source terms

1. Open source

What does it mean when a project is open source? A lot of times the applications and web apps you use have their code (or "source") protected by their companies. Only the developers directly working on the application can see and make changes to the code.

"Open source" is a complete shift from this. When a project is open source, it just means that the code is publicly available to everyone to look and make changes to. For example, here's the source code for Ubuntu

2. Git

Git is a tool that helps you manage your code better. It gives you a history of all the changes you've ever made and makes it easier to update your code.

Git also makes it easy for a lot of people to work on the same code. This is why a lot of people use it for open source projects.

3. Repository

For everyone to browse, make changes and test the code for an open source project, it needs to live somewhere. This somewhere is what we call a "repository". All the code for a project together with all past and future changes live there.

4. Fork

A fork is a copy of someone's code that gets added in your own Github account.

If you need to make changes to a project that you don't own, the first thing to do is to create a "fork", so that a repository gets created with all the code, which is yours.

Then, you can make changes if you need to.

After you've made your changes in your own fork, it's time to ask nicely for your code changes to be added to the original repository!

5. Pull request

This is where you ask for the changes you've made to be added from the fork (your copy of the code) to the actual code of the project.

Someone will look at the changes and if they agree with them, the pull request will be approved and your changes will added!

I hope this helped you make sense of some common terms. Are there any terms I've missed? Let me know!

Make your very first open source contribution!

Now that you've understood the most common terms in open source, it's time to make your first contribution. The best thing you can do in this case, is start simple, instead of jumping straight into huge codebases.

What if your first contribution was literally creating a simple file, just so you can practice and dip your toes in the water?

My project Say Something is here to help!

Say Something is a project where you can share a message with the world. But to do that, you'll need to contribute to the source code by creating a very simple file. Say Something will give you clear instructions on how to post a message in the Write page.

Perfect for first time contributors!

Give it a go:

https://just-say-something.vercel.app/

In your own opinion, what makes a tutorial beginner friendly?

Savvas Stephanides — Fri, 28 Jul 2023 14:58:50 +0000

I asked this question on Twitter (sorry, X) and got some amazing responses so far. Thought it'd be appropriate to ask here as well. 🙂

Quickly add random text to your HTML with this simple trick! 🏃‍♂️💨

Savvas Stephanides — Thu, 06 Jul 2023 14:00:00 +0000

It's 11 o'clock on Saturday night.

Pubs are packed with people drinking and enjoying their night out.

But not you. You're inside looking into your wide-screen monitor. You decided instead, to dive into the magical world of HTML! 🌈

So there you are, with Visual Studio Code open. Your HTML code right in front of you with all its colourful glory thanks to the syntax highlighting by VS Code.

The HTML looks something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My page</title>
</head>
<body>
    <div></div>
</body>
</html>

But that div looks empty. And that makes you sad. You need to add some text in there to see how it looks in the browser. "Hello world" is cool and all but you're looking for something more realistic to how the div will be used in real life...

Then you discover the solution! A piece of text written over 2000 years ago is perfect for this situation. It's called "lorem ipsum".

Now you can add text to your div! Thing is, every time you need to add some of this text, you need to go to a website, copy some of the text, and paste it in your editor. Is there a faster way, without having to leave your editor? Yes there is!

The `lorem` shortcut!

Open your HTML page in VSCode, point to the part where you want to add some random text, write this: lorem5 and press Tab

What just happened? 5 words have been added to your HTML just like that. Now you can save precious seconds, or minutes even, with this shortcut!

Now try this: write lorem*5 and press Tab:

5 paragraphs have been pasted into your text file! 🔥

Now you never need to leave your editor to add some random text to your HTML page!

And that's the lorem shortcut which you can use in VS Code or any other editor that supports emmet! Thanks for reading!

This is the best app for coding on a phone!

Savvas Stephanides — Tue, 27 Jun 2023 16:22:03 +0000

Coding is, without a doubt, one of the most interesting and exciting endeavours one can undertake. You start with learning some basic fundamentals, like if statements, loops and functions and you end up building big applications on the web for thousands of users to enjoy.

Now here's the thing. Typically, to learn coding, you need a big screen. Why? Because syntax in every programming language takes a lot of space. Each line of code can be quite long because of the nature of coding: giving very specific instructions to a computer.

So what if I want to practice coding on a phone? A phone has a tiny screen which will make it virtually impossible to write code sufficiently on. A small virtual keyboard usually does things worse. So what can we do?

Use Apple Shortcuts

The best way to learn to code on a phone is to throw away the syntax you typically find in Javascript or Python, and instead start using apps that lets you drag-and-drop commands.

One such app is Apple Shortcuts on iPhone.

Shortcuts is a great time-saving app for creating tasks. For example, you can create a task which gets your current location and shares it with a contact of your choice. Or start a new workout from your workout app whenever you arrive at the gym.

So how does it help me learn to code?

With Apple Shortcuts you can practice coding fundamentals such as:

If statements

You can add if blocks to your task so that it executes something only if a condition is met. For example, if some text in your task is "Hello".

Loops

To create a loop in Apple Shortcuts, you can use a "Repeat" block. For example, vibrate the device 5 times.

Arrays

You can use arrays in Apple Shortcuts by creating a "List" block. For example, create a list of cities. Then you can create a "Repeat with each" block to speak each city back to the user.

Functions

You can run functions by running shortcuts within other shortcuts. For example, create a shortcut which shows a "Hello world" notification...

...then create a second shortcut which runs the first shortcut.

Conclusion

There are loads of stuff you can do with Apple Shortcuts on iPhone which can let you practice coding fundamentals. Sure it's not Javascript or Python, but the fundamentals are always the same, regardless how you use them. Have fun with Apple Shortcuts!

Forem: Savvas Stephanides

Run Deepseek locally using Docker!

About

What we're building

Steps

Step 1: Create docker-compose file

Step 2: Add first app

Step 3: Install Deepseek

Step 4: Create a website

HTML

CSS

Javascript

Import showdown

Step 5: Add web page to Docker Compose

Run the website

Let's test it!

Host PHP for free!

What you'll need to have installed

Steps

Step 1: Create a PHP project

Step 2: Create a Docker Hub account

Step 3: Create a Docker image

Step 4: Host image on Docker Hub

Step 5: Sign up for Render

Create a new Web service on Render

Create a new Laravel project in seconds using Docker!

Step 1: Create a new project directory

Step 2: Create a Docker Compose file

What is happening here?

Step 3: Run the containers

Step 4: Check your site

Run WordPress locally using Docker!

Steps

Step 1: Create a new directory

Step 2: Open code editor

Step 3: Create a Dockerfile

Step 4: Create a Docker Compose file

Step 5: Download WordPress

Step 6: Move Wordpress directory to your project

Step 7: Build containers

Step 8: Run containers

Step 9: Setup your website

What’s your earliest memory of coding?

New computer? Install THIS first... 💻

There's more!

Learn more about Docker

Learn from a Docker Captain!

Docker Docs

Explore the images available in Docker Hub

Learning a new tool for your complex project? THIS is the best way to master it! 👍🎓

The problem

The solution

The complete journey of an open source contribution

Station 1: The issue

Station 2: The assignment

Station 3: The fork

Station 4: The clone

Station 5: The code

Station 6: The push

Station 7: The pull request

Last stop: The merge

5 common terms used in Open Source, explained.

5 open source terms

1. Open source

2. Git

3. Repository

4. Fork

5. Pull request

Make your very first open source contribution!

In your own opinion, what makes a tutorial beginner friendly?

Quickly add random text to your HTML with this simple trick! 🏃‍♂️💨

The lorem shortcut!

This is the best app for coding on a phone!

Use Apple Shortcuts

If statements

Loops

Arrays

Functions

Conclusion

The `lorem` shortcut!