teleren/devto huggingface dataset:
Slider/carousel with javascript and HTML
Tags: javascript
Published: 2024-03-23 20:23:06

Lets build a fun project. This slider project is made with plain javascript and HTML.

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

This slider supports both clockwise and anticlockwise navigation of slides
There are multiple ways to get it working. Three different ways are incorporated to use the slider.
 1)The vertical radio button lets user navigate to next image and also helps to know the position/index of image in the slide.
 2)The top arrow button on click help achieve slider functionality in anti-clockwise direction. Once all slides are over it will start over from first slide. 
 3)The bottom car button makes slides roll in clockwise direction and is configured to move with slides on click.

The github link to project-[Slider](https://github.com/Shivangip285/Slider)
Day-1 of Getting an Paying Job
Tags: hustling, webdev, discuss, career
Published: 2024-03-23 19:47:31

**Hi Friends 👋**

I am starting a Journey where I try to learn new things and hopefully land a high paying Job.

So Here is the Recap of my Day - 1.

- ✅ Serverless Backends
- ✅ Completed the user Flow and Login setup of my final Year project - **DigiVote - A decentralized Voting App**.


Here is a Summary of what I have learned 

#### Serverless Backends
 - `serverless` is a backend deployment in which cloud providers dynamically manages the allocation and scaling the server.
- Some of the Popular Cloud providers are 
  **Cloudflare Workers [Free setup, no CC Required]**
  **Google Cloud Functions**
  **AWS Lambda**
- I explored Cloudflare Workers and deployed an app on Cloudflare.
- Under the hood, Cloudflare doesn't uses node.js, they have made their own wrapper on V8 engine, so you don't use `Express` for routing purposes.
- A good alternative of this can be - [Hono]https://hono.dev/

```js
    import { Hono } from 'hono'
    const app = new Hono()

    // c here stand for context, it contains both request and response object
    app.get('/', (c) => c.text('Hello Cloudflare Workers!'))


    export default app
```


#### DigiVote - A Decentralized Voting App
Similar to all the Voting app online, But it will have these extra features. 

- OTP Verification
- Image Verification
- A Disposable Wallet with a token in it [As everyone doesn't have a wallet]


if you have any recommendations, feel free to share it ☺️.
Thank You.
Cutting-Edge Boating Tech: Navigating the Future of Sailing
Published: 2024-03-23 19:44:49

Step into the future of sailing with our latest post on the newest [technologies in boats](https://allaboutmarina.com/boating/upgrade-your-boat-with-smart-technology-essentials/). From autonomous navigation systems to eco-friendly electric motors, we explore how innovation is transforming the boating world. Learn about smart yacht systems that make sailing smoother and more enjoyable, and discover how advanced materials are making boats lighter, faster, and more durable. Whether you're a tech enthusiast or a seasoned sailor, these advancements promise to take your boating experience to the next level. Join us as we navigate the cutting-edge of boating technology!
A Quick Intro To Seed Rejection in Human+AI Teams
Tags: humanaiteaming, ai
Published: 2024-03-23 19:38:55

🚀 Excited to share my latest blog: "Getting Rid of the Bad Seeds: A Quick Intro to Seed Rejection in Human+AI Teams"! 🚀

For more than 40 years, I’ve been interested in how we interact with machines.  This blog dives into the world of human+AI collaboration.  It provides a brief introduction to the problem of seed rejection in human+AI collaboration.

This piece highlights my understanding of human+AI interaction has evolved. Humans can prompt AI systems.  AI can prompt humans.  Wait, what?!  Yep!  Or Humans and AI can work together.

Read the [blog here](https://medium.com/@jasoncorso/getting-rid-of-the-bad-seeds-a-quick-intro-to-seed-rejection-in-human-ai-teams-7497129323ff).

I'd love to hear what the dev.to community thinks about this direction.
Glam My Markup✨: Breezy Camp
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-23 19:26:09

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
<!-- Tell us what you built and what you were looking to achieve. -->
In order to style this markup, I decided to go with a subtle fresh leafy green theme.
## Demo
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
{% codepen https://codepen.io/sarah-okolo/pen/YzMVRPZ %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

Okay, for this challenge, I wasn't exactly sure how I wanted to style it, my most challenging part was what to use for the background. I didn't want something too loud and distracting, but I also wanted something that caught attention. Eventually what came to my mind was "camp", "trees", "leaves". Ah, I had an idea, why don't I use a leaf-falling effect for the background? Yes, that was perfect for me.

I wanted something unique for the hover state of the submit button. that was one of my favorite things to implement.

I particularly like the character counter I included for the textareas. It was a bit challenging to implement as we weren't allowed to modify the markup, so I had to find a workaround to embed the counter elements using JavaScript and I'm glad it worked out just fine😊

Overall, I just think my submission has a breath of fresh air to it, you know, that fresh camp air.

I hope you like it guys😊😊😊
Thanks for viewing!
<!-- Thanks for participating! -->
describe the python architecture in detail?
Published: 2024-03-23 19:21:11

describe the python architecture in detail?


Python’s architecture is quite intricate and involves several stages from writing code to executing it. Here’s a detailed breakdown:

1. Code Editor: The journey begins in the code editor, where Python code is written according to Python’s syntax rules. This is the stage where programmers write their source code, which is human-readable1.

2. Source Code (.py files): After writing the code, it’s saved as a .py file. This file contains instructions written in Python for the system to execute1.

3. Compilation to Bytecode: Python’s compiler then takes over, converting the source code into bytecode. This is a form of intermediate code that is not directly executable by the machine. During this stage, the compiler also checks for syntax errors. If no errors are found, a .pyc file containing the bytecode is generated1.

4. Python Virtual Machine (PVM): The bytecode is sent to the Python Virtual Machine (PVM), which is essentially the Python interpreter. The PVM reads the bytecode and converts it into machine-executable code. This process is done line by line, and if an error occurs, the interpretation halts with an error message1.

5. Execution of Machine Code: Finally, the machine code, which is a binary language consisting of 0s and 1s, is executed by the CPU. This is the last step where the actual execution of the program occurs, and the desired output is produced1.

Additionally, Python uses dynamic typing and a combination of reference counting and a cycle-detecting garbage collector for memory management. It also employs dynamic name resolution (late binding), which binds method and variable names during program execution2.

Python’s design supports object-oriented programming and offers some support for functional programming in the Lisp tradition. It’s known for its high-level built-in data structures, dynamic typing, and binding, which make it suitable for Rapid Application Development and as a scripting language to connect existing components
Title: A Clear Vision: Unveiling the Wonders of New Laser Eye Technology
Published: 2024-03-23 19:14:03

In the bustling city of Lumina, where the neon lights danced upon the streets and dreams took flight with every passing moment, there lived a young dreamer named Alex. With aspirations as vast as the starlit sky above, Alex's journey was filled with ambition and wonder, yet hindered by the shackles of poor vision.

Amidst the cacophony of city life, Alex yearned for clarity – not just in the bustling streets of Lumina, but in the corridors of the mind and the depths of the soul. It was during one fateful night, beneath the twinkling canopy of stars, that a revelation dawned upon Alex – the key to unlocking a world of newfound clarity lay within the realm of new laser eye technology.

Driven by an insatiable thirst for knowledge and a desire to break free from the confines of blurry vision, Alex embarked on a quest to uncover the mysteries of this transformative technology. Guided by the guiding light of WebDo Solutions Blogs, Alex delved deep into the annals of ophthalmic innovation, where tales of precision and possibility awaited.

From the ancient scrolls of the Eye Institute to the modern laboratories of tomorrow, Alex traversed the landscape of ocular enlightenment, seeking answers to questions both mundane and profound. Along the way, Alex encountered fellow seekers – kindred spirits whose lives had been forever changed by the magic of laser eye surgery.

![New Laser Eye Technology](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua9un3cr2cedr98luuz2.jpg)
With each passing day, Alex's resolve grew stronger, fueled by the promise of a future unencumbered by the limitations of poor vision. And when the day of the procedure finally arrived, Alex stood on the threshold of a new dawn, ready to embrace the transformative power of new laser eye technology.

As the gentle hum of the laser filled the air, Alex felt a sense of peace wash over them – a profound understanding that, in this moment, anything was possible. And when the world came into focus once more, Alex beheld a landscape teeming with vibrancy and clarity – a testament to the wondrous capabilities of modern science.

With newfound vision and a heart filled with gratitude, Alex set forth into the world, eager to share their story with all who would listen. For in the bustling city of Lumina, where dreams took flight and possibilities knew no bounds, the journey toward clarity was just beginning.

Link: [Unveil the Wonders of New Laser Eye Technology with WebDo Solutions Blogs](https://blog.webdosolutions.com/new-laser-eye-technology/)
Streamlit editable dataframe with nested columns
Tags: streamlit, dataframe, aggrid, python
Published: 2024-03-23 19:12:27

Hi all! 👋

Looking to implement nested columns in a Streamlit dataframe. Any tips or pointers?

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

Thanks!
How I Built Graph based AI-Powered Search Engine, All Local
Tags: machinelearning, programming, llm, neo4j
Published: 2024-03-23 18:49:18

Crafting the Melody of Localized AI Search, which gives sources !

[Detailed Article](https://medium.com/@learn-simplified/how-i-built-graph-based-ai-powered-search-engine-all-local-531a23a489df)

Objective: My journey involved building a graph-based AI-powered search engine, entirely locally, 
Focusing on:
Independence: No reliance on external services like OpenAI, opting for open-source tools.
Innovation: Utilizing the latest technologies for top-notch speed and accuracy.
Flexibility: Ensuring the engine is portable, scalable, and adaptable to diverse setups and future needs.

🚀 Initial Approach: Kickstarting the project involved:
Module Creation: Using langchain for language processing and lamaindex for efficient data organization.
Exploration: Experimenting with vector DB for data storage and retrieval enhancement.
Technique Refinement: Trying different RAG techniques to improve search result generation.
Integration: Adding distributors and API servers for seamless communication between engine components.

🛠️ Challenges Faced:
As I delved deeper into the project, I encountered several hurdles that prompted me to seek alternative solutions.
Writing everything from scratch proved to be exceedingly time-consuming, hindering progress.
Additionally, accuracy issues arose, impacting the reliability of the search results.
Organizing data and establishing accurate relationships posed further challenges, complicating the engine’s functionality.
Moreover, concerns regarding speed and scalability arose, casting doubt on the engine’s ability to handle increasing demands.

🚀 How I Solutionize it:
In response to these challenges, I started on a new exploration, leading me to discover the Gen AI Stack.
This innovative solution offered a structured approach, streamlining the organization of data.
Docker emerged as a valuable tool for scalability, facilitating seamless integration with various models to enhance the engine’s accuracy.
The inclusion of langchain provided robust language processing capabilities, while the integration of neo4j significantly improved the accuracy of data relationships within the engine.

💡 Next Steps:
Distributor Integration: Balancing workload across various models for enhanced performance.
Rust Utilization: Using Rust programming language for optimized model serving.
Multi-Modal Functionality: Adding support for processing diverse data types.
Cloud Support: Enhancing accessibility and scalability through cloud integration.
Accuracy Evaluation: Exploring tools like RAGAs or LangSmith for continuous accuracy tracking.

🔗 Stay Tuned for Updates and Insights!
Fashion show in Moscow
Tags: fashion, moscow, style, show
Published: 2024-03-23 18:31:48


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jol2batwvfctkk8wvpzd.jpeg)
From February 19 to 22, 2024, Moscow hosted the fashion exhibition “CPM” (Collection Premier Moscow) at Expocentre. It was attended by fashion experts and more than 950 brands from 27 countries: Italy, China, Switzerland, Turkey and others. As well as hundreds of visitors and dozens of speakers who discussed important and very relevant topics.

Alexander Shainikov, CEO of EXPO FUSION LLC:
“We are seeing a steady increase in the participation of both Russian and international companies and predict that this trend will continue in the near future. CPM has been and remains an important driving force for the development and support of the fashion industry.”

Potential trends for 2024 were announced, as well as speakers and experts reviewed the behavior of the clothing market over recent years. Fashion shows of various brands were also held on the territory of the exhibition, which attracted a lot of media and viewers. Well, it should be noted the points with clothes on the huge pavilions, where there were shoes, outerwear, and much more. In general, it is very interesting!
React UseEffect
Tags: react, typescript, webdev, javascript
Published: 2024-03-23 18:22:40

---
useEffect adalah Hook lain yang disediakan oleh React yang memungkinkan Anda menjalankan efek samping dalam komponen fungsional. Efek samping ini bisa berupa berlangganan data, memanipulasi DOM secara langsung, atau melakukan tugas-tugas lain yang memerlukan "membersihkan" ketika komponen di-unmount atau ketika nilai-nilai tertentu berubah.

## 
**Step-by-Step React** _useEffect_

1.  **Import _useEffect_** from React:

```javascript
import React, { useEffect } from 'react';
```

2.  **Menjalankan _useEffect_**:
```javascript
useEffect(() => {
    // Kode untuk useEffect misal fetchdata atau apapun di sini
}, [dependencies]);
```
- Fungsi di dalam useEffect akan dijalankan setiap kali komponen dirender.
- dependencies adalah array yang berisi nilai-nilai yang jika berubah, akan memicu rerender dan eksekusi ulang efek tersebut.

3.  **Clean _useEffect_** React:
```javascript
useEffect(() => {
    // Kode untuk _useEffect_ di sini

    return () => {
        // Kode untuk membersihkan _useEffect_
    };
}, [dependencies]);
```
- Fungsi yang dikembalikan oleh useEffect akan dijalankan saat komponen di-unmount atau sebelum eksekusi ulang efek baru.

## **_Best Practice_**

* Gunakan useEffect untuk mengelola efek samping: Misalnya, berlangganan data, menyesuaikan judul halaman, atau memperbarui state global.

* Hati-hati dengan dependencies: Pastikan dependencies yang Anda masukkan adalah yang benar-benar diperlukan untuk memicu eksekusi efek yang diinginkan.

* Jangan lakukan pekerjaan berat di dalam useEffect: Gunakan useEffect untuk tugas-tugas ringan. Untuk tugas yang lebih kompleks, pertimbangkan untuk memisahkannya ke dalam fungsi terpisah.

* Gunakan clean-up function untuk membersihkan efek: Jika efek samping Anda memerlukan pembersihan, pastikan untuk melakukannya di dalam clean-up function yang dikembalikan oleh useEffect.

contoh useEffect untuk fetchData dari api :
```javascript
useEffect(() => {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            setData(data);
            
        })
        .catch(error => {
            setError(error);
            
        });
}, []);
```
* setData adalah bagian dari _useState_ .kita pindahkan datanya ke state, artinya setData digunakan untuk menerima Data dari api yang kita fetch
Correct code?
Published: 2024-03-23 18:18:53


        <input class="form-control" id="name" name="name" placeholder="Name" type="majordesicion.com">
      </div>
      <div class="col-sm-6 form-group">
        <input class="form-control" id="email" name="email" 
      <div class="col-sm-12 form-group">
What is Instagram Panel?
Published: 2024-03-23 18:18:39

What is Instagram Panel
Today, billions of people actively use at least one social media application. Therefore, these applications are becoming a very popular advertising tool for both individuals and companies. In particular, Instagram differs from many other applications with its high advertising revenues. Thanks to the [Instagram panel](https://measmm.com), you can save time and effort to strengthen your social media. You can manage your account successfully and professionally with interaction packages consisting of organic followers.
How to Get Instagram Likes?
People spend some of their daily lives on internet platforms. Instagram is one of the most popular apps today. Therefore, people strive to reach high followers and likes on their Instagram accounts. Although it has interesting content, in some cases, sharing alone may not be enough. At this stage, smm panel service is running to the aid of individuals and businesses. Thanks to the panel service, you can activate the amount of likes you want.
What is Social Media Like?
Social media likes are of great value in digital marketing. Thanks to [social media like packages](https://measmm.com), you can increase the customer potential of your business by strengthening your social media. As you increase your engagement rates, your accounts will be more visible in discovery. As your traffic increases, you have the opportunity to reach more users depending on the algorithm of the application. Thanks to the increase in your followers and likes day by day, you will achieve high success in your interaction rates. You can have the opportunity to compete with your competitors more professionally and successfully.
Build Simple Real-time Knowledge Server with RAG, LLM, and Knowledge Graphs in Docker
Tags: development, machinelearning, ai, systemdesign
Published: 2024-03-23 18:13:50

Dockerized Wisdom: Building Your Own Real-time Knowledge Server

[Detailed Article](https://medium.com/@learn-simplified/build-simple-real-time-knowledge-server-with-rag-llm-and-knowledge-graphs-in-docker-6db776d85ddc)

[Code](https://github.com/aniket-work/AI_Powered_Dev_Search_Engine.git)

🌟Build and Explore the fascinating world of real-time knowledge servers! 🌟

🚀Experience the world of real-time knowledge servers powered by RAG, LLM, and Knowledge Graphs! 

This article is a step-by-step guide, from setting up the Docker environment to implementing the FastAPI server, aimed at showcasing the practical application of cutting-edge technologies.

🎯 What's in the box :

Understanding the Building Blocks :
 Get an overview of core technologies including Streaming Q, callbacks, Large Language Models (LLMs), knowledge graphs (like Neo4j), and Retrieval Augmented Generation (RAG).

Hands-on Knowledge: 
 Follow the code walkthrough to build your own real-time, knowledge-based Q&A system.

Exploring Applications: 
 Learn how this system could power better chatbots, customer support tools, and unlock insights from your own data.

Configuring Models: 
 Explore how to load and configure embedding models and language models (LLMs) for your knowledge server.
TASK 01
Published: 2024-03-23 17:35:39

**1)TYPES OF TESTING:**
    1)MANUAL TESTING
    2)AUTOMATION TESTING
    3)DATABASE TESTING
    4)API TETSING
**2)DIFFERENT STLC PHASES**
     1)REQUIREMENT ANALYSIS
     2)TEST PLANNING
     3) TEST CASE DEVELOPEMENT
     4)TEST ENVIROINMENT SETUP
     5) TEST EXECUTION
     6) TEST CYCLE CLOSURE
**3)QUALITIES OF MANUAL TESTER WITH EXAMPLE**
       MANUAL TESTER SHOULD POSSES GOOD ANALYTICAL SKILLS IN DETAIL,COMMUNICATION SKILLS,GOOD DOMAIN KNOWLEDGE AND ALSO THE TIME MANAGEMENT.
     _FOR EXAMPLE_ : A GOOD TESTER SHOULD ENCOUNTER THE EVEN SMAL ERROR OR CHANGE IN APPLICATION .

**4) DIFFERENCE BETWEEN WATERFALL AND AGILE METHODOLOGY**
           **WATERFALL**
     1)IT NEVER WELCOMES THE CHANGE . IT HARDLY / RARELY WELCOMES THE CHANGE.
     2)ONCE THE COMPLETE DEVELOPMENT IS DONE, THEN WE START DOING THE TESTING.
              **AGILE**
 1)IT ALWAYS WELCOMES THE CHANGE . CHANGE SHOULD COME IN TIMELY MANNER.
 2) WE  DO THE TESTING OF FEATURES PARELLELY ( PART BY PART).
Elephants.Fun: Tips
Tags: nft, patchwork, base, documentation
Published: 2024-03-23 17:32:31

---
title: Elephants.Fun: Tips
published: true
description:
tags: NFT, Patchwork, Base, docs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g5355og04diz8ia7udp.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-23 14:57 +0000
---

A Beginner's Guide

Welcome to the exciting world of NFTs (Non-Fungible Tokens)! If you're new here, don't worry. We'll walk you through creating your very own digital elephant, step by step. It's simpler than you think!

## Step 1: Mint Your First NFT

- **Where to Begin:** Head over to [Elephants.Fun](https://elephants.fun/) to create your first NFT on the Base chain. Minting is just a fancy term for making your digital token official.

## Step 2: Assemble Your Elephant

- **Gathering Elements:** Your elephant is unique thanks to various attributes like background (bg), base color, mouth, and eyes. Collect these essential parts and any other features you'd like to add.
- **Putting It Together:** Use the website's interface (UI) to combine these attributes into your very own elephant.

## Step 3: Customize on the Fly

- **Changing Features:** Feel free to swap different features in and out of your elephant. Experiment to see what looks best!
- **Deconstruction:** If you decide to start over, you can dismantle your elephant to retrieve the individual attributes. This is handy as you collect more options.

## Step 4: Keep It Fresh

- **Frequent Updates:** Don't hesitate to switch up your elephant's look whenever you're in the mood for a change.

## Step 5: Expand Your Collection

- **More Traits:** Use the "Mint Traits" function within the UI to find more attributes. Another option is to visit [Mint.fun](https://mint.fun/base/0xbeEEEEEeeeEF0da9a8B35516d7B1acE4a33380AB) for a wider selection.

And there you have it! Your first foray into the world of NFTs. Remember, the key is to have fun and let your creativity shine. Happy minting!

[openSea, Elephants](https://opensea.io/collection/elephants-attributes)
[openSea, Traits](https://opensea.io/collection/build-an-elephant)
[Bridge BASE](https://bridge.base.org/deposit)

![1st Elephants NFTs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxweerm9rh6ns2pi5ubd.png)