teleren/devto huggingface dataset:
Pushing your app in Docker in a few clicks
Tags: devopspass, devops, docker, webdev
Published: 2024-04-09 16:44:20


## Video

{% embed https://www.youtube.com/watch?v=NCzJixmzoK8 %}

## Step by Step

[https://www.devopspass-ai.com/](https://www.devopspass-ai.com/) - Video version in the end of article.

Imagine you're developing some application and its good time to make it public or at least test on some more production-similar environment.

Or for a local development you need some infra, like Redis, MongoDB, MySQL or Postgres. Nice candidate for that is to spin it up with Docker and Docker compose.

## Add Docker app

![Docker app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1wfyf7k2gpnuhkl6v0y.png)

To start with Docker, add Docker application you switch to Docker in left side.


![Docker integrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyiatyrad8e9xqvpsokk.png)

At the bottom you can see three tabs:
* **Docker containers**, to manage running/stopped containers
* **Docker images**, to manage local images
* **Docker compose**, to see running Docker Compose stacks

In the Right you can see Docker app actions:


![Docker app actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecxzmnn1vx1w79efu6vh.png)

* **Install Docker**, to install Docker on MacOS, Linux, Windows
* **Generate Dockerfile**, to generate Dockerfile for application
* **Start Docker container**, just an action to start Docker container from DOP UI
* **Generate compose.yml**, action to generate Docker Compose config file

## Generating Dockerfile

![Generate Dockerfile action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a07q7b1dnzpgdo5kkgw.png)

Action **Generate Dockerfile** is used to generate `Dockerfile` for your application, we support various languages, including:

* Python
* Python Django
* Python Flask
* Golang
* Java Spring Boot
* Java Quarkus
* NodeJS
* NodeJS node-gyp
* NodeJS NestJS
* React
* React pnpm
* ASP.NET Core
* ASP.NET Core Alpine
* Ruby RoR
* Ruby RoR with assets
* Rust root
* Rust non-priviledged
* Dart
* R Studio MSSQL
* R Studio MySQL

## Docker Compose

Once you have `Dockerfile` for app, you can create Docker Compose config:

![Generate Docker Compose config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xayztwsopj1k58gbsul3.png)

Action asking if you need infra, like nginx, MySQL, MongoDB, PostgreSQL, Redis. For all backeds it will create volume, so you can be sure that your data will be in place after restart of laptop/PC.

After that you can spin stack up and play with it...
js13kGames Challenge in Gamedev.js Jam 2024!
Tags: gamedevjs, gamedev, js13k, javascript
Published: 2024-04-09 16:53:42

---
title: js13kGames Challenge in Gamedev.js Jam 2024!
published: true
date: 2024-04-09 16:36:03 UTC
tags: gamedevjs,gamedev,js13k,javascript
canonical_url: https://medium.com/js13kgames/js13kgames-challenge-in-gamedev-js-jam-2024-8e7493e79e13
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dssvtkzcob4xr25r8ynk.png
---

We will be having a dedicated [js13kGames Challenge](https://gamedevjs.com/jam/2024/#challenge-js13kgames) in the upcoming edition of [Gamedev.js Jam 2024](https://itch.io/jam/gamedevjs-2024) that starts **April 13th** with the chance of winning thirteen unique [Badlucky](https://js13kgames.myspreadshop.com/badlucky-A65cb29c25e1af93b733fd9fe) t-shirts!

> Celebrate the thirteenth edition of the js13kGames competition by following its rules: create a web game that fits into a 13 kilobyte zip package!

The fifth edition of [Gamedev.js Jam](https://gamedevjs.com/jam/2024/) will now have an optional opportunity to exercise your [js13k-fu](https://js13kgames.com/) skills before August. Instead of a whole month you’ll have only **13 days** though, so keep that in mind. You will, however, have the chance to win the cool swag: [Badlucky](https://js13kgames.myspreadshop.com/badlucky-A65cb29c25e1af93b733fd9fe) t-shirts.

![A crossover episode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvs5zi3ccojp7o3is7ej.png)

Zip sizes will be validated outside of Itch to make sure there’s no cheating, since Itch itself don’t have such functionality. The top13 winning games will be picked by filtering the scores of the best overall entries based on the js13kGames challenge checkbox selected.

Have any questions? Join [js13kGames Slack](https://slack.js13kgames.com) or visit [js13kGames channel on the Gamedev.js Discord server](https://discord.gg/NUqnXZC4). Good luck and have fun!
Clear Site Data in Chrome - Quickly, Without Touching Your Mouse 🗑️
Tags: chrome, devtools, chromedevtools
Published: 2024-04-09 16:32:53

**To _Clear Site Data_ in Chrome quickly, without using your mouse:**

- **Press `F12`** to open Chrome Dev Tools.
- **Press `Cmd+Shift+P`** to open the command palette.
- **Type "data"** to see the "Clear site data" option at the top.
- **Hit `Enter`** to execute. 🎉


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lege8a1reflsjpqi4zz0.png)


---

This will clear the all the `localStorage`, `sessionStorage`, cookies, service workers, etc. for your current site.
Deploy Web Application using Nginx and Docker on Ubuntu
Tags: react, docker, ubuntu, nginx
Published: 2024-04-09 16:18:15

## Prerequisites:

1. Ubuntu Machine
2. Basic Docker knowledge 
3. Node and NPM on Local Device and Ubuntu
4. Docker on Ubuntu machine

## Flow:

* On local machine create a React App if you don't already have 1 by following command
```
npx create-react-app react-app
cd react-app
npm start
```
> **NOTE:** You can name your project anything, I have kept it react-app in this demo

* Create a `Dockerfile`on root level of react-app directory with below content.
```
FROM node:lts-alpine as build  # Use Node.js LTS Alpine image as build environment

WORKDIR /app  # Set working directory inside the container to /app

COPY package*.json ./  # Copy package.json and package-lock.json files to /app directory

RUN npm ci  # Install dependencies using npm's CI mode for faster and consistent builds

COPY . .  # Copy the rest of the application files to /app directory

RUN npm run build  # Build the application using npm script

FROM nginx:latest as prod  # Use the latest Nginx image as production environment

COPY --from=build /app/build /usr/share/nginx/html  # Copy built files from the previous stage to Nginx HTML directory

COPY nginx.conf /etc/nginx/nginx.conf  # Copy custom Nginx configuration file to override default configuration

EXPOSE 80/tcp  # Expose port 80 for incoming HTTP traffic

CMD ["/usr/sbin/nginx", "-g", "daemon off;"]  # Start Nginx server with daemon off for foreground execution

```
* We will also need to create a Nginx configuration file to listen for any connection at port 80. Create a new file name `nginx.conf`at root level of project directory.

```
http {

  include mime.types;

  set_real_ip_from        0.0.0.0/0;
  real_ip_recursive       on;
  real_ip_header          X-Forward-For;
  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;

  server {
    listen 80;
    server_name localhost;
    root /proxy;
    limit_req zone=mylimit burst=70 nodelay;

    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;   
    }
  }
}

events {}
```
* Push this code on GitHub Repo
* Deploy Ubuntu machine on any cloud provider if you don't have setup on local device
* On Ubuntu machine we need to node, npm, docker installed, if it is not configured then do so.
* After installing node, npm, docker, pull the code from GitHub Repo & run these commands to run our application on server.
* This command will create an image for the above mentioned `dockerfile`.
`docker build -t react-app-image:1.0.0 .`
* Now we will create a container for the image we created, by running the following command.
`docker run -d -p 80:80 --name react-server with-docker`
Now our application should running on the `PORT 80`. If you are using cloud for ubuntu machine then search in browser `public_ip_of_machine:80`, if you are deploying it on local device then open `localhost:80` in browser.

_**BYE 👋👋**_
Understanding of Python Tuples
Tags: webdev, python, programming, coding
Published: 2024-04-09 16:09:00

Python tuples are another fundamental data structure, similar to lists but with some key differences. Understanding tuples and their usage is crucial for effective Python programming.

## What are Python Tuples?

Tuples in Python are ordered collections of items, similar to lists. However, tuples are immutable, meaning they cannot be modified after creation. Tuples are often used to represent fixed collections of related data.

## Creating Tuples

Tuples are created by enclosing items in parentheses ( ), separated by commas.

```
# Example of creating a tuple
my_tuple = (1, 2, 3, 4, 5)
```

## Accessing Elements

You can access individual elements of a tuple using square brackets and the index of the element, just like with lists.

```
# Example of accessing elements
print(my_tuple[0])   # Output: 1
print(my_tuple[-1])  # Output: 5
```

## Tuple Packing and Unpacking

Tuple packing is the process of creating a tuple without using parentheses, while tuple unpacking involves assigning the elements of a tuple to multiple variables.

```
# Example of tuple packing and unpacking
my_tuple = 1, 2, 3   # Tuple packing
a, b, c = my_tuple   # Tuple unpacking
print(a, b, c)       # Output: 1 2 3
```

## Immutable Nature

Tuples are immutable, meaning once created, their elements cannot be changed, added, or removed.

```
# Example of trying to modify a tuple
my_tuple[0] = 'a'    # Raises TypeError: 'tuple' object does not support item assignment
```

## Use Cases

Tuples are commonly used for:

 - Returning multiple values from functions.
 - Representing fixed collections of related data, such as coordinates or RGB colors.
 - Ensuring data integrity by preventing accidental modifications.

## Tuple Methods

While tuples are immutable and do not have as many methods as lists, they still provide a few useful methods like count() and index().

```
# Example of tuple methods
my_tuple = (1, 2, 2, 3, 4)
print(my_tuple.count(2))   # Output: 2
print(my_tuple.index(3))   # Output: 3
```

Python tuples are versatile data structures that offer immutability and fixed collections of related data. By understanding how to create, access, and utilize tuples, you can write more efficient and expressive code. Tuples, while similar to lists, serve distinct purposes in Python programming and are a valuable tool in your coding arsenal.
Announcing a New Puppet Code Testing Course: PE502 - Test and Deliver
Published: 2024-04-09 15:41:26

We are excited to announce a new Puppet course that will transform your approach to testing Puppet code. **PE502 - Test and Deliver** is a comprehensive course that will equip you with the skills and knowledge necessary to test your Puppet code effectively.

This course will cover three key areas of testing: unit, integration, and acceptance testing. You will learn how to write tests for your Puppet code that cover these critical areas, ensuring your code is robust, accurate and reliable.

Throughout the course, we will focus on using the **RSpec** testing framework, a powerful tool for writing expressive and maintainable tests. You will learn how to harness RSpec's full potential for testing your Puppet code. The course will include a deep dive into the internals of RSpec and rspec-puppet, giving you a thorough understanding of how these tools work and how to use them effectively. We will also make heavy use of the **Puppet Development Kit (PDK)** throughout the course.

In addition, we will be introducing just enough of the Ruby language to aid in the testing of Puppet code. We will take a close look at module dependency workflow, including `.fixtures.yml` and the `Puppetfile`. We’ll show you step-by-step how to set up an Rspec testing framework, how to test roles and profiles, and how to use Puppet’s Bolt and `puppet apply` to conduct acceptance testing.

To help you solidify your understanding, the course includes three fully interactive labs where you can practice writing tests for Puppet code in a simulated environment. Regular quizzes will also be provided to assess your understanding and reinforce key concepts.

In addition to RSpec, the course will introduce you to a range of testing tools that can enhance your workflow, including Onceover, Litmus, Beaker, and Serverspec. While specific tools will be covered, the course will emphasize the importance of testing methodology over tooling. You will learn how to approach testing in a way that is flexible and adaptable to different tools and environments.

You will also learn about Continuous Integration/Continuous Deployment (CI/CD) principles, with a focus on using Continuous Delivery for Puppet Enterprise to automate the testing and deployment of your Puppet code.

Throughout the course, you will receive valuable developer tips for working with RSpec and testing Puppet code, based on real-world experience and best practices.

**PE502 - Test and Deliver** will be offered in both on-demand and instructor-led formats, allowing you to choose the learning style that best suits your needs.

Don't miss this opportunity to take your Puppet code testing skills to the next level. Stay tuned for more details on the course launch date and enrollment information. Master the art of testing Puppet code with **PE502 - Test and Deliver** and ensure your Puppet code is of the highest quality.
Evaluation of OpenAI Assistants
Tags: chatgpt, llm, openai, llmops
Published: 2024-04-09 15:31:43

Recently, I had an interesting user call where the user wanted to evaluate the performance of OpenAI assistants.

**The Use Case:**
- Similar to a RAG pipeline, the user built an Assistant to answer medical queries about diseases and medicines.
- Provided a prompt to instruct the assistant and a set of files containing supporting information from which the assistant was required to generate responses.

**Challenges Faced:**
- Had to mock conversations with the chatbot, acting as different personas (e.g., a patient with malaria), which was time-consuming for over 100 personas.
- After mocking conversations, had to manually rate individual responses based on parameters like whether the response was grounded in supporting documents, concise, complete, and polite.

**Solution Developed:**
- **Simulating Conversations:** Built a tool that mocks conversations with the Assistant based on user personas (e.g., "A patient asking about the treatment of malaria").
- **Evaluation of OpenAI Assistant:** Tool rates the conversation on parameters like user satisfaction, grounded facts, relevance, etc., using UpTrain's [pre-configured metrics](https://docs.uptrain.ai/predefined-evaluations/overview) (20+ metrics covering use cases such as response quality, tonality, grammar, etc.)

Currently seeking feedback for the developed tool. Would love it if you can check it out on: https://github.com/uptrain-ai/uptrain/blob/main/examples/assistants/assistant_evaluator.ipynb
Gradient Descent 2
Published: 2024-04-09 15:07:55

Gradient descent, Türkçe olarak "gradyan inişi" veya "eğim inişi" olarak da bilinir, bir optimizasyon algoritmasıdır. Bu algoritma, bir fonksiyonun minimumunu veya maksimumunu bulmaya çalışırken kullanılır. Özellikle makine öğrenmesi ve yapay zeka gibi alanlarda çok yaygın olarak kullanılır.

Gradient descent'in temel amacı, bir fonksiyonun minimum (veya maksimum) noktasına ulaşmak için adımlar atmak ve bu adımları fonksiyonun eğimi (gradyanı) yönünde alarak gerçekleştirmektir. Bir fonksiyonun eğimi, o noktada fonksiyonun en hızlı arttığı yönü gösterir. Gradient descent, bu eğimi takip ederek fonksiyonun minimumunu bulmaya çalışır.

Algoritmanın adımları genellikle şu şekilde özetlenebilir:

1. Başlangıç noktası seçme: Rastgele bir başlangıç noktası seçilir veya belirlenir.
2. Gradient hesaplama: Başlangıç noktasındaki fonksiyonun eğimi (gradyanı) hesaplanır.
3. Adım boyutunu belirleme: Bir öğrenme oranı (learning rate) adı verilen bir parametre seçilir. Bu parametre, her adımda ne kadar ilerleneceğini belirler.
4. Yeni konumu hesaplama: Eğimi takip ederek, yeni bir konum hesaplanır ve bu konuma öğrenme oranı ile bir adım atılır.
5. Durdurma koşulunu kontrol etme: Belirli bir durdurma kriteri sağlanana kadar 2-4 adımları tekrarlanır. Bu kriter, örneğin belirli bir iterasyon sayısına ulaşmak veya gradyanın belirli bir küçüklüğe ulaşması gibi olabilir.

Gradient descent, çeşitli varyasyonları ile yaygın olarak kullanılır. Bunlar arasında stokastik gradient descent (SGD), mini-batch gradient descent, momentum, Adagrad, RMSprop, ve Adam gibi algoritmalar bulunur. Bu varyasyonlar, farklı optimizasyon ihtiyaçlarına ve farklı fonksiyon yapılarına uygun şekilde tasarlanmıştır.

created by GPT
What's Markdown Language used for
Tags: markdown, firstpost
Published: 2024-04-09 14:48:26

Markdown is an easy-to-use markup language that is used with plain text to add formatting elements (headings, bulleted lists, URLs) to plain text without the use of a formal text editor or the use of HTML tags. Markdown is device agnostic and displays the writing format consistently across device types.

Uzbekcha - Markdown - bu foydalanish uchun qulay belgilash tili bo'lib, u oddiy matn bilan formatlash elementlarini (sarlavhalar, markirovka qilingan ro'yxatlar, URL manzillar) rasmiy matn muharriridan yoki HTML teglaridan foydalanmasdan oddiy matnga qo'shish uchun ishlatiladi. Markdown qurilmaning agnostik xususiyatiga ega va yozish formatini doimiy ravishda qurilma turlari bo‘yicha ko‘rsatadi.
Gradient Descent
Published: 2024-04-09 14:47:13

**Gradient Descent (Gradyan Azalma)**, bir maliyet fonksiyonunu en aza indiren parametrelerinin değerlerini bulmak için kullanılan bir **optimizasyon algoritmasıdır**. Bu algoritma, rastgele alınan değişkenlerle başlayarak **global minimum değerine ulaşmayı amaçlar**. İşleyişini adım adım anlatayım:

1. **Her parametre için Kayıp Fonksiyonunun türevini al**: Modelimizin performansını ölçen bir kayıp fonksiyonu vardır. Bu fonksiyonun her parametreye göre türevini hesaplarız.
2. **Parametreler için rastgele değerler topla ve toplanan değerleri parametrelere gönder**: Başlangıçta parametreler için rastgele değerler seçeriz.
3. **Adım büyüklüğünü hesapla**: Bu, her adımda ne kadar ilerleyeceğimizi belirler.
4. **Yeni parametreyi hesapla**: Türevleri kullanarak yeni parametre değerlerini güncelleriz.
5. **Minimum seviyeye ulaşana kadar 2. adıma dön**: Bu adımları tekrar ederek global minimuma yaklaşırız.

Örnek olarak, Python ile yazılmış bir script kullanarak bu adımları görselleştirebiliriz. Adım büyüklüğünün doğru seçilmesi önemlidir. Ayrıca, büyük veri setleri için **Batch Gradient Descent** kullanılabilir, bu da tüm veri setinde işlem yapar ama daha hızlıdır ¹²³.

```python
# Örnek bir Gradient Descent uygulaması
def gradient_descent(learning_rate=0.01, num_iterations=1000):
    param = 0  # Başlangıçta rastgele bir değer seçiyoruz
    for i in range(num_iterations):
        gradient = compute_gradient(param)  # Parametrenin türevini hesapla
        param -= learning_rate * gradient  # Yeni parametreyi güncelle
        print(f"Iteration {i+1}: Parameter = {param:.4f}")
    return param

# Öğrenme oranını ve iterasyon sayısını ayarlayarak çalıştırabiliriz
final_param = gradient_descent(learning_rate=0.1, num_iterations=1000)
```

Bu algoritma, makine öğrenmesi modellerinin eğitiminde sıkça kullanılır ve doğru parametre değerlerini bulmamıza yardımcı olur.
A Font Changer to Personalize Your Web Experience
Tags: showdev, ui, webdev, design
Published: 2024-04-09 14:31:03

Hey everyone,

I'm just a regular guy who spends way too much time online. Whether it's scrolling through articles, binging blogs, or just doing some work, I realized something – the web can be a pretty dull place, visually speaking. Ever got tired of staring at the same old fonts and colors on every site? Yeah, me too.

That's why I created [BetterFont](https://betterfont.net). It's a simple idea, really: let's make the web a bit more us. With BetterFont, you can change fonts, tweak colors, adjust spacing... all that good stuff, directly in your browser. No coding, no fuss. Whether you need bigger fonts to read comfortably, or you're just in the mood for a change, BetterFont's got your back.

I made [BetterFont](https://link.zhihu.com/?target=https%3A%2F%2Fbetterfont.net%2F) for two main reasons: 1. To give you (and me) the freedom to see the web in a way that suits us better. 2. To save our eyes from the monotony of the same look every webpage offers.

I genuinely hope BetterFont makes your web browsing more enjoyable and personal. Keen to hear what you think and looking forward to your feedback!

Cheers!

Here's the link: [BetterFont](https://betterfont.net)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htzqcu81f91q1c6hmxkh.png)
All in One AI App with Cloudflare Pages
Tags: cloudflarechallenge, devchallenge, ai, nextjs
Published: 2024-04-09 14:30:19

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## All in one app with ai for chat, image generation, text summarization, code copilot and Translation generator.


![ai-cloudflare-app-banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxw7q3f98i192egz51j2.png)


## Demo
[Demo Link](https://ai-cloudflare.pages.dev/)

## My Code

{% embed https://github.com/shaileshofficial2019/ai-cloudflare %}

## Journey

Got a inspiration from [Code with Antonio](https://codewithantonio.com) and this is the first time i am deploying a nextjs app on pages, it was easy to integrate AI models in nextjs app and easy to deploy nextjs app on Cloudflare Pages.

**Multiple Models and/or Triple Task Types**

Here is the list of all Cloudflare Models used in the project.

| Type             | Model Name |
|------------------|------------|
| Conversation     | [@cf/meta/llama-2-7b-chat-fp16](https://developers.cloudflare.com/workers-ai/models/llama-2-7b-chat-fp16)     |
| Image generation | [@cf/lykon/dreamshaper-8-lcm](https://developers.cloudflare.com/workers-ai/models/dreamshaper-8-lcm)        |
| Summarization    | [@cf/facebook/bart-large-cnn](https://developers.cloudflare.com/workers-ai/models/bart-large-cnn)      |
| Translation      | [@cf/meta/m2m100-1.2b](https://developers.cloudflare.com/workers-ai/models/m2m100-1.2b)           |
| Code             | [@hf/mistral/mistral-7b-instruct-v0.2](https://developers.cloudflare.com/workers-ai/models/mistral-7b-instruct-v0.2)     |