teleren/devto huggingface dataset:
Twilio Challenge: Language Translator via Twilio Functions, WhatsApp, Appwrite & OpenAI
Tags: devchallenge, twiliochallenge, ai, twilio
Published: 2024-06-16 13:28:03

*This is a submission for [Twilio Challenge v24.06.12](https://dev.to/challenges/twilio)*

## What I Built
As an avid translator who often faces challenges with different languages when traveling across different countries. To solve my own problem, I wanted to create a simple chatbot that lets me quickly translate text from my preferred language to another, making it so much easier to communicate with other people.

Therefore, I created an **AI Language Translator** using the `WhatsApp Sandbox` mode in `Twilio Programmable Messaging`, `Twilio Functions`, `Appwrite Database` and `OpenAI's GPT-4o API`.

## Demo

### Watch how it works
Here is a demo video of the app:
{% embed https://www.youtube.com/watch?v=YPARXF9TXyw %}

### Tech Stack
- The chatbot uses **Twilio Programmable Messaging (WhatsApp Sandbox)** and **Twilio Functions** to communicate with the user. 
- **Appwrite Database** is primarily used to store the state of the user through the conversation, and all conversation data is deleted as soon as the translation is sent to the user. 
- **OpenAI's GPT-4o API** is used to translate the text to the specified language.

### Steps to try
You can try it out by scanning the QR Code in the image or by texting the code `join trail-has` to the number `+14155238886` on WhatsApp.

![Twilio WhatsApp Sandbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzeudq96ekpsr3vpyyi1.png)

Once that is done, send the message `Hello Twilio` to begin using the chatbot.

### Source code
You can also view the source code of the Twilio Function on GitHub:
{% embed https://github.com/adityaoberai/language-translator-twilio-function %}

## Twilio and AI
To create this chatbot, I used **OpenAI's GPT-4o API** in a Twilio Function. This function consumes the text to translate, and the target language based on the user's input and returns the translated text.

## Additional Prize Categories

* `Twilio Times Two`: The project uses **Twilio Programmable Messaging (WhatsApp Sandbox)** and **Twilio Functions**.

* `Impactful Innovators`: In a far more interconnected world than ever, a tool that simplifies cross-language communication will help bring people from different cultures closer together.

## Feedback, Updates, and Testimonials

- During the process of developing the Twilio Function, I discovered an issue with the max length of environment variables. The issue has already been acknowledged by the Twilio team.

{% embed https://dev.to/adityaoberai/comment/2fpj3 %}

- The project is getting real-world usage and positive user feedback publicly!

{% embed https://twitter.com/fidelisnwabisi/status/1803512147663868323 %}
CSS :is() pseudo-class selector.
Tags: webdev, css, html, devops
Published: 2024-06-16 13:03:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaedvqpou0hy3atxev2s.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0f7h1q9v2lmyfz29ut5.png)
Push notifications from server with Telegram Bot API
Tags: telegram, python
Published: 2024-06-16 12:54:29

---
title: Push notifications from server with Telegram Bot API 
published: true
description: How to push notifications to Telegram messaging application
tags: telegram, python
cover_image: https://images.unsplash.com/photo-1636743091340-af4ee8147080?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-16 12:12 +0000
---

I needed a way to keep myself updated with what happens on the server (new user signup, daily stats with visitors, new user send a message to me thru contact form etc.).

You can do that with just email, but you can also do it with the help of Telegram Bot API.

Install telegram on your phone. Once installed, search for `BotFather` - click start and then type `/newbot` (follow the steps there, save safely the private bot token for the api). After the new bot is created search it and start a conversation with it (this will help you get chat_id which we will need later).

After your first conversation with the bot get the `chat_id`:
```shell
curl -X GET 'https://api.telegram.org/botTOKEN:FROM-BOTFATHER/getUpdates'
```

The response will look similar to this: 

```json
{
  "ok": true,
  "result": [
    {
      "update_id": 123123123123,
      "message": {
        "message_id": 124,
        "from": {
          "id": CHAT_ID,
          "is_bot": false,
          "first_name": "NAME",
          "last_name": "NAME",
          "language_code": "en"
        },
        "chat": {
          "id": "HERE-IS-CHAT_ID-YOU-NEED",
          "first_name": "NAME",
          "last_name": "NAME",
          "type": "private"
        },
        "date": 1718539209,
        "text": "/start",
        "entities": [
          {
            "offset": 0,
            "length": 6,
            "type": "bot_command"
          }
        ]
      }
    }
  ]
}
```

Take chat_id value from: `HERE-IS-CHAT_ID-YOU-NEED` (see up).

Nice, now save CHAT_ID and TELEGRAM_API_TOKEN in `.env` file (or somewhere else just don't push it to a public repo).

Here is the code to send push notifications (messages from the server to your phone) at each 10 seconds.

```python

import time
import requests
from config import cfg


def server_push_notifications():
    try:
        while True:
            url = f"https://api.telegram.org/bot{cfg.TELEGRAM_API_TOKEN}/sendMessage"
            response = requests.post(
                url=url,
                params={'chat_id': cfg.CHAT_ID, 'text': 'All system are ok.', 'parse_mode': 'Markdown'}
            )
            print(url, response.json())
            time.sleep(10)
    except KeyboardInterrupt:
        return 


if __name__ == "__main__":
    server_push_notifications()

```

As you can see the base is just a POST request to telegram api with chat_id and text as body. What you send as a message is up to you.

For something more serious I would recommend using [scheduler](https://github.com/DigonIO/scheduler), but I don't see why a barebones while loop with a time.sleep won't do the same thing.
5 Essential Tips for New Frontend Web Developers
Published: 2024-06-16 12:49:29

Hello, DEV community! I'm Ridoy Hasan, a new front-end web developer. Here are five tips that have helped me to become a successful developer:

**1**/ Master the Fundamentals: Focus on HTML, CSS, and JavaScript. These are the building blocks of web development. Use resources like MDN Web Docs and freeCodeCamp.

**2**/ Build Projects: Apply your knowledge by creating small projects. This boosts your skills and builds your portfolio.

**3**/ Learn Git: Git is crucial for version control. Start with basic commands and use resources like the Git Official Documentation.

**4**/ Stay Updated: Follow industry trends through platforms like DEV , Stack Overflow, and Reddit's r/webdev.

**5**/ Ask for Help: The developer community is supportive. Use forums like Stack Overflow and dev.to when you need assistance.

Happy coding! Share your thoughts or questions in the comments.
ERROR : Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-8.4-bin.zip'.
Tags: android, kotlin
Published: 2024-06-16 12:23:11

```
Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-8.4-bin.zip'.
Reason: java.lang.RuntimeException: Could not create parent directory for lock file C:\Program Files\Java\jdk-17\wrapper\dists\gradle-8.4-bin\1w5dpkrfk8irigvoxmyhowfim\gradle-8.4-bin.zip.lck

Please ensure Android Studio can write to the specified Gradle wrapper distribution directory.
You can also change Gradle home directory in Gradle Settings.

```

File - Settings - Gradle - Gradle user home 자리를 비워두기

_참조 : https://stackoverflow.com/questions/75723748/gradle-error-in-android-studio-could-not-create-parent-directory-for-lock-file_
Linux networking tools
Tags: networking, linux, devops
Published: 2024-06-16 12:12:59

𝗦𝗼𝘂𝗿𝗰𝗲: https://wizardzines.com/networking-tools-poster/


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


share in the section comments your favorite tool :)
Linux networking tools
Tags: networking, linux, devops
Published: 2024-06-16 12:12:59

𝗦𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/grHR7Kdv


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


share in the section comments your favorite tool :)
SteamVR Overlay with Unity: Create Project
Tags: unity3d, steamvr, vr, openv
Published: 2024-06-16 10:32:30

## Create a new Unity project
Create a new project on Unity Hub.
Select 3D project template.

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

## Install SteamVR Plugin
Click “Add to My Asset” on the Unity Asset Store.

https://assetstore.unity.com/packages/tools/integration/steamvr-plugin-32647

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

Then click **“Open in Unity”** on the asset store page.
Unity Package Manager will be shown, click **Import**.

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

Click **OK** in this dialog and restart the Unity project as instructed.

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

The installation is complete if the **Assets/SteamVR** folder is created.

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

---

### Optional: If you don’t use the SteamVR Plugin

In this tutorial, we use the OpenVR files included in the SteamVR Plugin.
If you want to use the latest version of OpenVR or to have a minimal amount of files, download the following files from their [GitHub repository](https://github.com/ValveSoftware/openvr).

- headers/openvr_api.cs
- bin/win64/openvr_api.dll (and other dlls you want to support)

Put the downloaded files inside the Assets folder.

---

## Project setting
Open **Edit > Project Settings > XR Plug-in Management**.
Uncheck **Initialize XR on Startup**.

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

## Create empty scene
Delete all objects from the scene.

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

Finally, the project setup is done! We will set up the OpenVR API in the next part.
What is Hexadecimal?
Tags: webdev, beginners, css
Published: 2024-06-16 12:07:42

### So, What the Heck is Hexadecimal?

Hexadecimal also known as Base 16 is used for a variety of things, such as CSS colors, Minecraft Redstone, and more. The main one we will focus on today will be using it in CSS.
___
You may have seen numbers and letters within a CSS color tag before `#A1B2C3`, this is using Hexadecimal to generate colors for CSS, it is used as modern computers can visualize around **16 million** colors and Hexadecimal happens to be almost perfect (16^6 = 16,777,216). Hexadecimal begins like common Base 10, (0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and for reference Binary: 0, 1) it is very similar it counts up from 0 to 9, after that is gets a tad bit strange, it starts using the English Alphabet (A, B, C, D, E, F) you can think of these letters like playing card values (J: 11, Q: 12, K: 13, etc.). In ascending order A starts at 10 and F ends at 15. In Base 10 each column to the left of the 1’s place multiplies by 10, Binary multiplies by 2, so Hexadecimal (Base 16) therefore multiplies by 16: `4096 | 256 | 16 | 1` or Base 10: `1000 | 100 | 10 | 1`.
___
With this newfound knowledge we can easily convert Base 10 to Hexadecimal and vice versa. For example take the number 312 and convert it into Hexadecimal, we can do it with only three place values: 138.
___
To use it in CSS you initiate the color with a hash symbol `#` and then type in Hexadecimal, each space for R(red) G(green) B(blue) uses two values, so `16 | 1`, they can simulate up to 256 different values (0 to 255), so you can think of a color as `#R(_ _)G(_ _)B(_ _)`, and each value you add in each color space adds or removes that color from the total.
___
I hope you found this helpful in someway. Like clearing up misnomers or learning something completely new (I know this completely changed the CSS game when I learned Hexadecimal and could better visualize the color outputs). Go teach someone else you know who would need this.

Have a good day!

— SalladShooter
How to focus on self learning and grow in an Operations and Delivery team
Tags: growth, operations
Published: 2024-06-16 11:53:26

A constant conversation at work is around how people in delivery and operation teams, have less time availability for learning and growth. One should take the steps for self learning at work place - This not only helps stay motivated but also paves way for growth.

https://medium.com/@purple-orchard/continuous-learning-and-growth-in-product-delivery-teams-85c6542a55b7
AI has replaced web developers!
Tags: webdev, ai, jobs, tech
Published: 2024-06-16 11:43:01

If I asked you “Will AI replace us as web developers?” all of you would answer it differently, some might say — “yes” and some may disagree and say “No” Their answer is primarily based on their opinion, but not facts.

And to let you know guys, **AI has replaced us, it already did!**

Well, I am not making such bold statements out of thin air I have proof and proper research that shows us that AI has already started replacing so many tech jobs (i.e. graphic designing, video editing, web development), and that’s quite a haunting fact.

## Impact of AI Across Various Departments

![](https://miro.medium.com/v2/resize:fit:786/format:webp/1*qzJycFbqHeZPUntSlRtl8w.png)Chart showing the jobs that are most impacted by AIThis chart illustrates what impacts AI has on various departments. Notably, AI had a significant influence on 73% of the IT sector, with 26% experiencing a moderate(small impact) effect and a mere 1% remaining unaffected, the dominance of AI in IT shows its critical role in transforming this field.

Now, this topic is such a controversy that everybody nowadays has their thoughts regarding this. While some might say: *“C’mon, AI is just a tool that wouldn’t affect us.”* or *“AI lacks human touch.”*, I want to tell them that AI has already started replacing us by doing our jobs. so many freelance jobs on popular platforms like Upwork were affected by this.

## Freelance jobs on upwork affected by AI

![](https://miro.medium.com/v2/resize:fit:786/format:webp/1*geTJOju6YCdnovg2W4JxeQ.png)Here you can see the number of new Upwork jobs for various categories over time since the release of ChatGPT. As seen, Web Design jobs had irregular ups and downs. Along with other jobs followed a similar trend but with less volatility.

Frontend Development, marked with a yellow line, indicates that the number of jobs for this could be low.  
And the disaster doesn’t end here, these were only the short-term effects of AI on our careers, while the long-term effects of AI are unpredictable. Nobody knows when a new AI tool is about to launch that will completely change our lives and our careers — the possibilities are endless.

## What are you supposed to do?

The best you can do is to upgrade your skills aim to become the **top 1%** of your field and try to learn as much as possible in a short period. And stay updated about what’s going on in the industry this way your value will increase and you’ll be able to survive against AI (hopefully).

![](https://miro.medium.com/v2/resize:fit:640/format:webp/1*icB2Rh5mPjri8kGVsEMf6w.gif)Join my newsletter to stay updated about new trends before anyone else!


> [**Join Code Whispers today — it’s free!**](https://code-whispers.beehiiv.com/subscribe)
> 
>
?? (Nullish coalescing) vs || (Logical OR) in Javascript
Tags: webdev, javascript, beginners, programming
Published: 2024-06-16 11:29:30


Both Nullish Coalescing Operator (??) and Logical OR (||) operator are often used in JavaScript to provide a default value to variables. These help us prevent any unexpected behavior in our code.

**Nullish Coalescing Operator (??):** This is specifically designed to handle situations where the left operand might be unintentionally left unassigned (null) or missing a a value (undefined). It only considers null and undefined as nullish values.

**Logical OR (||):** This is useful when you want a default value if the left operand is any falsy value. This includes null, undefined, 0, empty string (""), false, and NaN.

**Lets take these examples :**

1. **If you want to check and avoid printing empty values, use the Logical OR Operator (||).**

`console.log("" || "Hello")` // "Hello"
`console.log("" ?? "Hello")` // ""

2. **If 0 or Boolean false is a valid return value in your use-case, use ?? (Nullish coalescing).**

`console.log(0 || "Hello")` // "Hello"
`console.log(0 ?? "Hello")` // 0

`console.log(false || "Hello")` // "Hello"
`console.log(false ?? "Hello")` // false

`console.log(0 || "Hello")` // "Hello"
`console.log(0 ?? "Hello")` // 0

3. **If you are only checking for undefined or null, you can go for either one of them :**

`console.log(undefined ?? "Hello")` // "Hello"
`console.log(undefined || "Hello")` // "Hello"

`console.log(null ?? "Hello")` // "Hello"
`console.log(null || "Hello")` // "Hello"
Lock / Mutex to an 8th grader (Difficulty 1)
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-16 11:25:04

*This is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer
Imagine you're in an exam hall where only one student can go to the restroom at a time using a pass. When they return, the pass goes to the next student. Similarly, computers use locks to let only one app access a resource at a time while others wait.

## Additional Context
I am planning to post 5 submissions explaining "Lock/Mutex" at 5 levels of difficulty. This is Difficulty 1.

An 8th grader probably hasn't heard of the term "mutex." An explanation that relates to something they have seen and explains how computers use a similar concept can be helpful.

For more about explaining the term in 5 Levels of difficulty, refer to the below post. It's interesting!

{% embed https://dev.to/sauravshah31/computer-science-challenge-lets-make-it-interesting-lai %}

[Next explanation for Difficulty 2](https://dev.to/sauravshah31/lock-mutex-to-a-cs-undergraduate-59me)

**Cheers🎉** ~ [sauravshah31](https://x.com/sauravshah31)
Solving the Stale Docs Dilemma
Tags: webdev, javascript, devops, productivity
Published: 2024-06-16 11:21:17


![Clarity reminder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36p5mt9atejj3t8dpzo6.png)

Hey Dev.to community,

I've been thinking a lot about the state of our documentation. It's frustrating when important files like `README.md`, `CHANGELOG.md`, database diagrams, and architectural docs, etc. become outdated because, let's face it, we often forget to update them amidst the hustle of development.

I built [Clarity Reminder](https://clarity.thebase.company/) out of this pain. Stale docs are a common issue, and I wanted a solution that seamlessly integrates with our workflow to keep our documentation up-to-date without extra effort.

Clarity Reminder is a GitHub app that nudges you to update essential docs with every pull request. Here’s how it works:

1. **Install the App**: Add Clarity Reminder to your GitHub repository.
2. **Configure**: Create a `.clarity/config.yaml` file to set up custom reminders.
3. **Automate**: The app reminds you to update your docs whenever necessary.

## I Need Your Feedback!

I'm looking for your honest feedback and suggestions. Your input can help make Clarity Reminder better for everyone. Check it out [here](https://clarity.thebase.company/) and let me know what you think!

Thanks for reading and happy coding!

---
Patrick from The Base Company
Derelict: Battleship in VR
Tags: octograd2020, githubsdp
Published: 2020-05-20 06:10:54

## Summary
Derelict is a Virtual Reality based spin on the classic battleship game that allows a player to compete against an AI while standing on a cliff overlooking the foggy sea. When a player places a ship on the board, it appears in the distance on the water. When the player or AI lands a shot, a visible explosion is seen and heard coming from the ship on the sea. When all parts of a ship are hit, it sinks down beneath the waves.

## Demo Link
[Overly Dramatic Derelict Demo Video](https://www.youtube.com/watch?v=wbaUJPeeVB8&feature=youtu.be)
 
## {% github https://github.com/RyanStonebraker/Derelict %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How I built it
This project was built as part of my Software Engineering class during my 2nd year of college. The goal of the project was to spend a total of around 15 hours peer-programming some version of the game of battleship while using best coding practices. My fellow classmate and I took this as a challenge to not only build a full-scale Virtual Reality rendition of battleship using SteamVR, Unity, C#, and Github Atom, but to also do it hackathon style in a single day. We started at 10 am in the morning with a complete blank slate and by 5:30 am the next day and many RedBulls later, we had a finished, working build of the game. However, since we had started so early before the project was due, we ended up spending additional hours adding in extra features, improving the graphics, and making an overly dramatic demo video.


## Additional Thoughts / Feelings / Stories
This project was pivotal to my college experience for many reasons. For one, it was my first taste at programming in something akin to a hackathon environment. This stuck with me so much that the following year, I pushed for and led the organization of the first ever school-wide hackathon at my university and formed a hackathon committee where I encouraged others to experience this alternative work style. Additionally, this project was one of the rare instances in which I was not chasing deadlines in college and actually had time to expand on ideas that were initially considered reach goals. This led to a level of learning that far exceeded the initial bounds of the project and helped shape my path as a software developer.