teleren/devto huggingface dataset:
Spring Framework: About Aware suffix interface
Tags: spring
Published: 2024-06-16 15:54:07

Following discussion is based on source code of Spring Framework 6.1.8.

Some commonly used Spring Framework components can be injected into your bean during bean creation.

# Commonly used Aware interface

| Interface name | Information interested | Injected by |
| -------------- | ---------------------- | ----------- |
| org.springframework.context.ApplicationEventPublisherAware | ApplicationEventPublisher | org.springframework.context.support.ApplicationContextAwareProcessor#invokeAwareInterfaces |
| org.springframework.context.MessageSourceAware | MessageSource | org.springframework.context.support.ApplicationContextAwareProcessor#invokeAwareInterfaces |
| org.springframework.context.EnvironmentAware | Environment | org.springframework.context.support.ApplicationContextAwareProcessor#invokeAwareInterfaces |
| org.springframework.beans.factory.BeanNameAware | Bean name | org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory#invokeAwareMethods |
| org.springframework.beans.factory.BeanFactoryAware | BeanFactory | org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory#invokeAwareMethods |
| org.springframework.context.ApplicationContextAware | ApplicationContext | org.springframework.context.support.ApplicationContextAwareProcessor#invokeAwareInterfaces |
Twilio Challenge: AI-Powered Voice Assistant
Tags: devchallenge, twiliochallenge, ai, twilio
Published: 2024-06-16 15:37:29

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

## What I Built
I created an AI-powered voice assistant designed to handle complex questions.  Many existing voice assistants struggle with these types of inquiries, which can be frustrating for users.  My assistant aims to bridge this gap.

## Demo
To try out this app, make a call to **+1 (423) 454-3174**. You will be greeted with a prompt, say your request after the initial prompt.

### Source code
{% github ThatCoolGuyyy/Twilio-Gemini %}

Here is an article I wrote that has detailed steps to build the PHP-Laravel version of this voice assistant - https://www.twilio.com/en-us/blog/build-ai-powered-voice-assistant-twilio-laravel-openai

## Twilio and AI

I used **Twilio Programmable voice** to get the user's request, this request is then passed into **Gemini API** which processes the request and returns a response. **Twilio Programmable Voice** is then used to return the response to the user in voice format. **Twilio Functions** was used to host the code.

## Additional Prize Categories
**Twilio Times Two** - The project uses **Twilio Programmable Voice** and **Twilio Functions**.

**Impactful Innovators:** My AI-powered voice assistant addresses the challenge of accessing information. It helps to bridge the gap between users who might struggle with traditional search methods, like the elderly, people with disabilities, or those with limited literacy skills.
Why TypeScript Might Not Be the Best Choice for Your Development Project.
Tags: typescript, development, javascript
Published: 2024-06-16 15:21:08

TypeScript has gained significant popularity among developers for its strong typing, improved tooling, and enhanced code quality. It’s hailed as a significant improvement over vanilla JavaScript, promising to catch errors early and make large codebases more maintainable. However, despite its many advantages, TypeScript is not without its downsides. In this blog post, we’ll explore some of the reasons why TypeScript might not be the best choice for your development project.

1. Steep Learning Curve
For developers who are accustomed to JavaScript, transitioning to TypeScript can be challenging. The introduction of static types requires learning new concepts and syntax. This learning curve can slow down the development process, especially for teams with tight deadlines. Developers need to understand not only TypeScript’s features but also how to properly integrate them into their existing workflow.

2. Increased Complexity
TypeScript adds a layer of complexity to your codebase. With additional syntax and type definitions, the code can become harder to read and maintain, particularly for new team members or developers unfamiliar with TypeScript. The added complexity can lead to longer development times and potentially introduce more bugs if types are not correctly defined or used.

To Continue reading..[url](https://www.8orinfinityfacts.com/2024/06/why-typescript-might-not-be-best-choice.html)
Making a progress bar in easy steps
Tags: css, html, web3, webdev
Published: 2024-06-16 15:18:22

Here i will be giving you easy steps to build a progress bar using HTML and CSS only. We will be using @keyframes for CSS animation.
**Step 1: HTML**

Create a div and another nested div

```
<div class="outer-box">
   <div class="inner-box">80%</div>
</div>
```
**Step 2: CSS**

Give width to outer-box and inner-box with some padding in CSS. Here i have given padding of 10px. Now add animation with name "progressbar" and make the animation liner. Give animation duration as you like, here i have given it of 5 second. Now using "@keyframes" give you animation from and to. You can also replace from and to with 0% and 100% as you like.
```
.outer-box{
    width:300px;
    padding:10px;
    background-color: blueviolet;
    border-radius:10px;
}
.inner-box{
    text-align: center;
    max-width: 280px;
    padding: 10px;
    background-color: #61cf71;
    animation: progressbar linear forwards;
    animation-duration: 5s;
    border-radius: 10px;
    color: white;
    font-family: cursive;
}
@keyframes progressbar {
    from{width:1%}
    to{width:80%;}
}

```

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

This is simple progress bar. More complex progress bars can be made using javascript.

Thanks
Feel free for any query.
Host Website for FREE using Github Pages
Tags: webdev, github, javascript, beginners
Published: 2024-06-16 15:11:54

-First Login to your **Github account** and then choose the repository which you want to [deploy online](https://youtu.be/bO1i5ObvdJg?feature=shared).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c84kc644k7pwy0d3exy7.JPG)
-Then go to settings and select pages
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e4jgj410bc1g27sof5a.JPG)
-After selecting pages go to **branch option** and select branch as main

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

-Now save the changes and after **selecting branch **and refresh the page **2-3 times**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxe6681p3t4yu5qupxoy.JPG)
-Now You will see a link it means your project is **deployed**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtfv9ugsj2whih8q2ve2.JPG)

-Now ,click on that link and **visit you site** and you can see your project has  been **successfully deployed**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apuyp2gyp1z3t5ezx5jf.JPG)
Integrating ClickHouse with AWS S3
Published: 2024-06-16 15:03:36

### **Integrating ClickHouse with AWS S3**

To integrate ClickHouse with an S3 bucket for fetching data, performing operations, and putting data back, follow these steps:

### **1. Setting Up ClickHouse**

**Install ClickHouse**:

- On a Debian-based system:
        
```bash
sudo apt-get install clickhouse-server clickhouse-client
```

- Start ClickHouse server:

```bash
sudo service clickhouse-server start
# or
sudo clickhouse start
```
        
- Start clickhouse-client with:
        
```bash
clickhouse-client --password
```

### **2. Fetching Data from S3 and Loading into ClickHouse**

**Create a Table in ClickHouse**:
    
```sql
CREATE TABLE s3_data (
    id UInt32,
    name String,
    value Float32
) ENGINE = MergeTree()
ORDER BY id;
```
    
**Load Data from S3**:
Use the **`s3`** table function to load data directly from an S3 bucket:
    
```sql
INSERT INTO s3_data
SELECT *
FROM s3('https://s3.amazonaws.com/your-bucket/path/to/data.csv', 'YOUR_AWS_ACCESS_KEY_ID', 'YOUR_AWS_SECRET_ACCESS_KEY', 'CSVWithNames');
```

### **3. Performing Operations on Data in ClickHouse**

Perform SQL queries to analyze the data:

```sql
SELECT name, AVG(value) AS avg_value
FROM s3_data
GROUP BY name;
```
Networking to a 5th Grader in 256 words.
Tags: devchallenge, cschallenge, computerscience, networking
Published: 2024-06-16 14:39:13

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

## Explainer

Imagine you want to send a hand-written invite to a buddy who lives far away to your birthday party. In order to send this invite, you would need to use a postal service. Sending data through the internet is like using a postal service.

Firstly, you would write your letter and put it in an envelope (which is like creating a message on your computer). Then, you write your friend's home address on the envelope which tells the postal service the destination (which is like an IP address for the internet).

Next, you place the envelope in the mailbox (which is similar to using your Wi-Fi or home internet to send a message). Now, it's up to the postal service to deliver your mail. The postal workers are like internet service providers who move your mail from one place to another using trucks and post offices. These trucks and post offices are like routers and servers on the internet.

At each post office along the way, your mail might be sorted and sent to another post office. As time goes on, your mail gets closer and closer to your buddy's house. This is similar to how data travels from servers and routers on the internet.

Eventually, your mail is delivered to your friend's house. When your friend opens the envelope, it's like their computer receiving and showing the message you sent.

So, sending messages and pictures on the internet is a lot like sending letters through the postal service, but with computers and special addresses instead.
Create FastAPI App Like pro part-1
Tags: fastapi, python, uvicorn, pydentic
Published: 2024-06-16 14:36:49

install fastapi using following commend 

```
pip install fastapi[all]
```

Create a project directory  named it then start 
**Step #1:** Create a **server** directory and add an** __init__.py **file to it. Then, create the following subdirectories within the server directory:

    

1. **DB**: This directory will contain all the code for database connections.
2.     **Models**: This directory will house the models for all tables.
3.     **Routers**: This directory will contain all the routers. Ensure that each table has a separate router.
4.     **Schemas**: This directory will contain all the Pydantic schemas for each table. Ensure that each table has a separate file for its schema.
5.     **Utils**: This directory will contain utility functions and code.
**Note: all of the above directory needs file name __init__.py**
check this picture to understand file structure 

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


**step#2**
create backend.py inside server directory and it should contain following code and adjust it according to your needs

```
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from server.routers import test_question_router

app = FastAPI(title="Backend for Tip for fastapi", version="0.0.1",docs_url='/')


app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
    allow_credentials=True,
)

app.include_router(your_router.router)

@app.get("/ping")
def health_check():
    """Health check."""

    return {"message": "Hello I am working!"}

```
Step#3
then Create file name 
run.py out side the server  directory
add following code

```
import os

import uvicorn

ENV: str = os.getenv("ENV", "dev").lower()
if __name__ == "__main__":
    uvicorn.run(
        "server.backend:app",
        host=os.getenv("HOST", "0.0.0.0"),
        port=int(os.getenv("PORT", 8080)),
        workers=int(os.getenv("WORKERS", 4)),
        reload=ENV == "dev",
    )


```
Now you can run you FastAPI project with just following commend 

```
python run.py
```
this is my github
[https://github.com/MuhammadNizamani](https://github.com/MuhammadNizamani)
this is my squad on daily.dev
[https://dly.to/DDuCCix3b4p](https://dly.to/DDuCCix3b4p)
check code  example on this repo and please give a start to my repo
https://github.com/MuhammadNizamani/Fastapidevto
AWS Lambda Layer
Tags: aws, devops, lambda, cicd
Published: 2024-06-16 14:18:31

This is something I was stuck on while deploying the lambda function, even though the code was only a few 100 lines I had to deploy the function with a zip file including all the node dependencies unnecessarily, it was quite annoying and I'm having this feeling you felt the same way that why you landed over here.

Let's get started...

This is quite simple, it is made just for the problem I've discussed above i.e. Take away the dependencies and focus on code.

Official Definitions:
`A Lambda layer is a .zip file archive that contains supplementary code or data. Layers usually contain library dependencies, a custom runtime, or configuration files.`
If you are interested in reading more about it here's the [link](https://docs.aws.amazon.com/lambda/latest/dg/chapter-layers.html).

We can start using it now that we know what the lambda layer is.


**STEP I**
Search lambda in the service list and go to the layer on the left side.

![Lambda Layer page on AWS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02n8fm79pykgiptuf1qm.png)

**STEP II**
Now we gonna create a package that we'll upload in layers

**NOTICE**: The path of the folders is important you can't mess this up otherwise it won't work. Different runtimes have different path like Im using node

My folder structure is like this 

```
/layers
|------- /nodejs
            |----- /node_modules
            |----- package.json
            |----- package-lock.json
```
If you wanna check out other runtime paths I suggest you should check the table given [here](https://docs.aws.amazon.com/lambda/latest/dg/packaging-layers.html)

Make sure any modules you're adding are executable in Linux as lambda layers are executed in Amazon-Linux(Linux).

Now Zip the folder **layers.zip** or anything you wanna name it.

**STEP III**
Head towards the lambda page. Now we will upload the zip to lambda layers by creating a new layer.

![Lambda layer creation page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk959gni0pu7lyhelt4x.png)

Name the layer anything you want.
Don't forget to add the other details like architecture and runtime these 2 are the most important.
![lambda layer detailed form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcpt0k2n8k0b0rky2dm9.png)

After you're done click on Create and done

Now you can attach this layer to any of your lambda functions and just call the package as you write normally. You don't have to do anything to integrate it. Enjoy the freedom of writing the code on the browser or make any changes to it on the go without worrying about the package or zipping it.

## Thank you
MarsX
Tags: cms, devtool, devops, websitebuilder
Published: 2024-06-16 14:02:18

Attention all developers, entrepreneurs, and tech enthusiasts: Are you ready to revolutionize the world of software development? With MarsX, you can create high-quality apps quickly and easily, without the need to reinvent the wheel or spend hours writing complex code. Our low-code platform allows you to focus on the unique aspects of your projects, while our subscription-based model provides access to all the micro apps built by thousands of developers.

But that's not all! By building micro-apps and publishing them on our marketplace, you can generate a sustainable revenue stream and take your career to the next level. With MarsX, you can create MicroApps instead of building yet another SAAS with less hustle and no need to market, and be paid by thousands of users.

Join us and unlock the potential of a devtool that combines AI+NoCode+ProCode on top of MicroApps🚀

Visit [our website](https://marsx.dev/) for more info

Member of [marsx.dev](https://marsx.dev/) family
Got a question or wanna say hi?
I’m on Twitter: [@johnrushx](https://twitter.com/johnrushx)
useSuspenseQuery
Tags: javascript, react, tanstack
Published: 2024-06-16 13:50:00

---
title: "useSuspenseQuery"
published: false
description: How nested React <Suspense/> and useSuspenseQuery work together.
tags: [JavaScript, React, tanstack]
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1e7y44kta11x0krg3ab.png
published_at: 2024-06-16 13:50 +0000
published: true
canonical_url: https://blog.mrloop.com/javascript/react/tanstack/2024/06/01/use-suspense-query
---


I was interested in how nested React [`<Suspense/>`](https://react.dev/reference/react/Suspense) and [TanStack useSuspenseQuery](https://tanstack.com/query/) worked together. The small app below is a visualization of various combinations of [`<Suspense/>`](https://react.dev/reference/react/Suspense) and [TanStack Query](https://tanstack.com/query/).

{% embed https://stackblitz.com/edit/mrloop-use-suspense-query?embed=1&file=src%2FApp.tsx %}

The source code is available at [GitHub](https://github.com/mrloop/use-suspense-query). Using the custom `<DelayedQuery/>` component it is easy to compose different loading scenarios to see how they behave. Give it a try, edit and run the code at [StackBlitz](https://stackblitz.com/~/github.com/mrloop/use-suspense-query).

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

__Nested__ shows 3 nested `<Suspense/>`, and within each `<Suspense/>` a `useSuspenseQuery` is run. The fetches run in serial. The loading state for the first query is shown, then when that is loaded the loading state for the second query and then when that is loaded the loading state for the third query is shown.

__Parallel__ shows a `<Suspense/>` containing 3 `useSuspenseQuery`, with 2 fetches taking 1 second and 1 fetch taking 2 seconds. A single loading state is shown until the last query finishes after 2 seconds.

__Cached__ shows two variations. The first variation __Fast load first__ show a `<Suspense/>` containing 3 `useSuspenseQuery` as in the __Parallel__ example but in this case all the queries use the same cache key. They are making the same request and can make use of the cache. The first request will take 4 seconds, the second will take 10 seconds and the third will take 10 seconds. A single loading state is shown until the first 4 second request completes, the other queries don't attempt to make a query but instead wait for the first query to run that has the same cache key and use the cached result. All results are displayed after 4 seconds.

The second variation __Slow load first__ is the same as __Fast load first__ but the order of the queries is changed, in this case the first request will take 10 seconds, the second request will take 4 seconds and the third request will take 10 seconds. A single loading state is shown until the first 10 second request completes, the other queries don't attempt to make a query but instead wait for the first query to run that has the same cache key and use the cached result. All results are displayed after 10 seconds.
Foodprint: try it at https://foodprint.orth.uk
Tags: octograd2020
Published: 2020-05-20 07:41:47

## My Final Project
Food production is responsible for 26% of global greenhouse gas emissions. You have the power to decide how much CO2 gets produced by the food industry. Choose your food responsibly, save the planet. Foodprint is here to help. Analyse your food consumption habits and identify ways to reduce your CO2 emissions.

## Demo Link
https://foodprint.orth.uk

## Link to Code
{% github https://github.com/ben-xD/foodprint/ %}

## How we built it (what's the stack? did I run into issues or discover something new along the way?)
On a high level, we used React native, NodeJS and Firebase. We even learnt some Java to write some native code for a 'share' functionality, to be able to get a recipe's carbon footprint from a website. We had issues with GraphQL, which involved Apollo-server/ client library bugs and workarounds. It was interesting to see that libraries are not perfect, and are doing the best they can.

More architectural details are available in the [video](https://foodprint.orth.uk/video).

## Additional Thoughts / Feelings / Stories
I learnt a lot from this project, and I have 1 project left before graduation. I will be making the most of it. 🙂
רכבת ישראל
Published: 2024-06-16 13:46:06

בואו נשים את זה על השולחן: ל[רכבת ישראל](https://israel-train.co.il/) יש מספר בעיות עיקריות - מחסור בקווים, תקציבים ותחנות. פתרון הבעיה מחייב גישה הוליסטית
Trust my own code
Published: 2024-06-16 13:34:18

On my game developer adventure. The things I trust most is my own codes, the ET series. 

PoolManager is sword, that I adapt from other code country. It powerful yet not complete. 

ETPoolManager is magic sword, create by my own power. What make it so special??? Well, it has different algorithm, remove the unnecessary model unit, fully integrate with both zenject and native framework, ... But most of all, it builds for me to use. 

#unity #unitydev #gamedev, #taniafelidea #tonicatfeldiae #poolmanager




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