teleren/devto huggingface dataset:
Web Dev Tools of the Week (No. 3)
Tags: javascript, webdev, tooling, opensource
Published: 2023-09-25 18:55:24

The latest issue of my newsletter, which went out last week, [can be found here](https://mailchi.mp/webtoolsweekly/web-tools-531). Below is a brief roundup of some of my picks for the week.


## [Dyte Video SDK](https://dyte.io/video-sdk)
The issue contains a full product review of Dyte's video SDK. Thanks to Dyte for supporting this week's newsletter!


[![Dyte Video SDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fagi4a3mxamc73lep1tq.png)](https://dyte.io/video-sdk)


## [Slick Grid](https://slickgrid.net/)
Not a new project, but I've never included it before and it recently was updated to remove jQuery as a dependency. It's a client-side grid library compatible with Bootstrap.


[![Slick Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9262ovn7nd87ttzbjzb.png)](https://slickgrid.net/)


## [Plotteus](https://www.plotteus.dev/)
An open-source JavaScript data visualization library designed to help you tell better stories.


[![Plotteus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzdl5bbxcoo1klol2dgn.png)](https://www.plotteus.dev/)


## [Create Chrome Extension](https://github.com/guocaoyi/create-chrome-ext)
A scaffold/starter tool, Like create-react-app, but for doing browser extension development.


[![Create Chrome Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xog8bsqtpel599hmgpm.png)](https://github.com/guocaoyi/create-chrome-ext)



## [RustRover](https://www.jetbrains.com/rust/)
A new IDE from JetBrains specifically designed for Rust developers. Free while in Public preview.


[![RustRover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsn90rgcnygo2xbqz50z.png)](https://www.jetbrains.com/rust/)



## [Momento](https://getmomento.io/)
Not a free tool, but it's an all-in-one monitoring solution for your domains, SSL certs, DNS records, etc.


[![Momento](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zygccb5lgdk0ufv9ix27.png)](https://getmomento.io/)


## Subscribe for More
That's it for this week's small roundup of tools. You can [subscribe to Web Tools Weekly](https://webtoolsweekly.com/) for more or view the latest [full issue](https://mailchi.mp/webtoolsweekly/web-tools-531) for the complete list of new tools.
The DevOps Roadmap: Navigating Modern Software Development
Published: 2023-09-25 18:32:57

In the rapidly evolving landscape of software development, DevOps has emerged as a crucial practice that bridges the gap between development and operations teams. DevOps principles and practices aim to streamline the software development lifecycle, increase collaboration, and enhance overall efficiency. Whether you’re a seasoned developer or just starting your journey, this DevOps roadmap will guide you through the key principles, tools, and best practices to succeed in the world of modern software development.



Checkout the DevOps Roadmap [here](https://codesolutionshub.com/2023/09/25/the-devops-roadmap-navigating-modern-software-development/?utm_source=dev_to&utm_campaign=dev_to_devops_roadmap)
collapsed menu getting refreshed on page opening
Tags: webdev, javascript, programming, bootstrap
Published: 2023-09-25 18:28:26

i am developing one sidebar with 3 levels deep using bootstrap
i have divide screen into 2 parts 1 for sidebar and 2nd part to open the form.when i am clicking on sub-sub-menu  the collapsed menu list going back to normal please help me

<script>
         // JavaScript code to handle menu item clicks and store state in sessionStorage
         $(document).ready(function () {
             // Restore collapsed state from sessionStorage
             $('.collapse').each(function () {
                 var isCollapsed = sessionStorage.getItem($(this).attr('id'));
                 if (isCollapsed === 'true') {
                     $(this).collapse('hide');
                 }
             });

             // Handle menu item clicks
             $('.menu-link').click(function (event) {
                 event.preventDefault(); // Prevent the default anchor tag behavior
                 var targetCollapse = $(this).next('.collapse');
                 targetCollapse.collapse('toggle');
                 var isCollapsed = targetCollapse.hasClass('show');
                 sessionStorage.setItem(targetCollapse.attr('id'), isCollapsed.toString());
             });

             $('.submenu-link').click(function (event) {
                 event.preventDefault(); // Prevent the default anchor tag behavior
                 var targetCollapse = $(this).next('.collapse');
                 targetCollapse.collapse('toggle');
                 var isCollapsed = targetCollapse.hasClass('show');
                 sessionStorage.setItem(targetCollapse.attr('id'), isCollapsed.toString());
             });
         });

         // Check if a menu item should be active on page load
         $(document).ready(function () {
             var activeMenuId = sessionStorage.getItem('activeMenuId');
             if (activeMenuId) {
                 $('#' + activeMenuId).addClass('active');
             }
         });

         // Update active menu item on click
         $('.list-group-item').click(function () {
             var menuId = $(this).find('a').attr('href').substring(1);
             sessionStorage.setItem('activeMenuId', menuId);
         });
</script>
this is my js code
Setting up a git-server on linux
Tags: git, linux, webdev
Published: 2023-09-25 18:11:59

Before starting, Let us know the part of **What is a git-server**?
A git-server is server where we can host git repositories, for e.g. [GitHub](https://github.com) & [GitLab](https://gitlab.com), etc.. The git platform is a decentralized version control system, which means we have the local copy of the repo, and we can externally host the repo at any place. This increases the usability for the user to even code the project even the server is offline, and can upload the changes once hit online. Setting-Up a private git-server is a good option for a private organizations like companies, or can be a nice project for a college student. 

## Setting-Up the linux Machine
You can use any flavour of linux distro. Make sure you setup every-thing you need to set a basic server, like _**Opening the required ports**_ and stuff, accessing your server via **SSH or Display**. You can do this by the guidance from any developer or just tutorials. 

SSH port is must for the git. So make sure to open the 22 port. You can do this with `ufw` command
```bash
$ ufw enable               # To start the ufw
$ ufw allow OpenSSH        # To Open the 22 port
# To check if done 👍?
$ ufw status
```
You should see an output saying Port 22 is enabled.

## Setting-Up the user for handling git server
You need to add a new user named `git` on your linux machine, make sure that you add that user to sudoers file. After that, you need to access the user `git` using some ssh keys. For that You need to generate ssh-keys on your local machine and copy the public keys to access your repo via SSH from your private server.

Steps for setting-up a user for git-server
1. Create a sudo user named **git**
 - ```bash
$ sudo useradd git
$ sudo usermod -aG sudo git
$ su git                # change to git user
```
2. Create a `.ssh` folder & store the public keys for the repositories
 - ```bash
   $ mkdir ~/.ssh
   $ touch ~/.ssh/authorized_keys
   ```Generate your ssh-keys on your local machine to access your repo on server. Copy the public key and paste it in this file.  
3. Create the /git/repo-name or /repo-name file in the file-system.
 - ```bash
   $ sudo chown git /git or /repo-name
   $ cd /git
   $ mkdir test_repo.git
   ```By default /git folder belongs to root only. Change the Owner-Ship to git using `chown`
4. Initialize the git repository. 
 - ```bash
   $ git init --bare
   ``` Always use the --bare flag, because this makes the repository convenient for pulling from & pushing to. The normal repositories doesn't help pulling or pushing.
5. Completed
 - ```bash
   $ git clone git@your-server-ip:/git/test_repo.git
   ``` You can use this repo just like the one cloned from your github account

---
That's it, your private git-server is ready to server now.
Top 4 jobs in gaming-related programming
Tags: gamedev, unity3d, backend, database
Published: 2023-09-25 18:03:18

We know that in the Outdefine community there are many fans of video games or people who want to work developing this kind of projects.🕹🎮

So...What are the most sought-after and best-suited profiles in the video game industry? Here they go: 🪙👩🏻‍💻👨🏽‍💻

✅Sr. Unity Technical Artist | $3.500 - $5.000
✅Sr. Backend Engineer | $5.300 - $7.400
✅Unity SDK Developer | $3.500 - $5.000
✅Data Base Administrator | $3.000 - $4.000


What other job would you add? Comment if you already work on video games field! 💬

Find jobs like these and more by registering at app.outdefine.com 🚀⌨
Boost Your Productivity and Write Better Code with AI Tools 🪄
Tags: webdev, ai, rust
Published: 2023-09-25 17:56:14


AI is rapidly transforming the software development industry, and there are a number of free AI tools available to help you boost your productivity and write better code.

But what if I told you that there are AI tools that can do more than just help you with code completion and error checking? 🚀

In my latest blog post on Outdefine community board, I explore some of the most exciting new AI tools for software developers, and how they can help you take your coding skills to the next level.

Click the link below to learn more: https://www.outdefine.com/community/board/free-ai-tools-for-software-developers-and-engineers-in-2023-072074 ⌨🖥

⚡👨🏽‍💻 If you're a software developer or engineer, I encourage you to check out my blog post to learn more about how AI tools can help you boost your productivity and write better code.

Join [outdefine.com](outdefine.com) to get your dream job today!
Why I like Dash for ML and DS projects?
Tags: python, machinelearning, ai, visualizations
Published: 2023-09-25 17:52:38

1. Interactive data visualization. This is essential for ML and DS projects, as it allows you to explore and understand your data in a visual way. For example, you could create a dashboard that allows you to visualize the performance of your ML model on different datasets, or to explore the relationships between different variables in your data.

2. Dash is easy to learn and use, even for beginners. It has a simple API and a variety of pre-built components, which makes it easy to get started. It is possible to create a basic dashboard with just a few lines of code.
 
3. Flexible and scalable. This makes it suitable for a wide range of ML and DS projects. You can use it to build simple dashboards for exploratory data analysis, or complex dashboards for production use i.e., building a dashboard that allows users to interact with your ML model to make predictions.
 
4. Dash is collaborative; therefore, it is easy to share your dashboards with others. You can deploy your dashboards to the web or share them as standalone applications.
 
5. Dash is an open-source framework, which means that it is free to use and modify. This gives you the flexibility to customize the framework to meet your specific needs. You can use dash to add new components or extend the existing components.

Most of these projects here! https://dallo7.github.io/ are developed in Dash.
Pocket Kotlin-C# Dictionary. B
Tags: kotlin, csharp
Published: 2023-09-25 17:41:31

## B

| Kotlin | C# |
| --- | --- |
| **break**<br> Statement to exit loops [Learn more](https://kotlinlang.org/docs/returns.html) | **break**<br> Statement to exit loops. C# **break** is also used to exit **switch**, while in Kotlin **when** this is not needed.<br> C# **break** can exit only inner loop, while Kotlin has **break@myLabel** syntax to exit loop of any level. [Learn more](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/statements/jump-statements) |
| **by**<br> Delegation of interface implementation or property getter and setter to another class [Learn more](https://kotlinlang.org/docs/delegated-properties.html) [and more](https://kotlinlang.org/docs/delegation.html) | This type of delegation has no built-in language support. One has to manually write code that calls delegates |
[Free eBook] The API. 3rd Edition
Tags: books, api, rest, designpatterns
Published: 2023-09-25 17:27:39

Hey.
May I humbly announce in this wonderful community that I have finished the 3rd edition of the book called simply “[The API](https://twirl.github.io/The-API-Book/).”

The book now comprises six sections:
  * The API design
  * API patterns
  * Backward compatibility
  * HTTP APIs & the REST architectural principles
  * SDKs and UI libraries
  * API product management.

The book is Creative-Commons licensed and [hosted on Github](https://github.com/twirl/The-API-Book). Hope you will find it useful!
How to get the host from a LiveView Socket
Tags: elixir, phoenix
Published: 2023-09-25 17:09:35

First, you need to allow the WebSocket to display the URI. You can do it by editing your `endpoint.ex` file:

```elixir
socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [:uri, session: @session_options]]
```

In the example above, we added `:uri` the `connect_info` websocket option.

Now, we can create a mount hook to get access to the `host` value. In the example below, we'll add the host to our socket assigns, so we can use it in our LiveView with `socket.assigns.host`:

```elixir
# host_plug.ex
def on_mount(:add_host, params, _session, socket) do
  %URI{host: host} = Phoenix.LiveView.get_connect_info(socket, :uri)

  socket = Phoenix.Component.assign(socket, host: host)

  {:cont, socket}
end
```

Now, you need to add this mount hook to our `live_session` in our `router.ex` file:

```elixir
scope "/", MyAppWeb do
  pipe_through [:browser]

  live_session :my_routes,
    on_mount: [{MyAppWeb.HostHook, :add_host}] do
    live "/", HomeLive
  end
end
```

That's it! Now we can get the host in our LiveView by using `socket.assigns.host`.

---

Note: If you're getting an error like this: `** (MatchError) no match of right hand side value: nil`, it might mean that you forgot to add `:uri` to your `connect_info` as I mentioned on the first step.
Creating an AWS EC2 instance with Terraform
Tags: terraform, dataops, devops, cloud
Published: 2023-09-25 16:48:14

## TL;DR

Here's the Terraform code to create an EC2 instance:

```terraform
resource "aws_instance" "my_project_ec2" {
  instance_type = "t2.micro"
  ami = "ami-06e46074ae430fba6"
  tags = {
    Name = "my-python-project"
  }
}

```

--- 

## EC2 Instance (Elastic Compute Cloud)

Elastic Compute Cloud (EC2) is a virtual server provided by AWS that allows you to run applications and services in the cloud - it's just a regular computer but in the cloud.

EC2 is awesome because:

- We don't need to invest in infrastructure upfront
- It allows us to scale up/down (vertically) to handle different workloads
- It offers different purchasing options (on demand, reserved, spot)

### Terraform it up

We're past the basics now, so let's create an EC2 instance. Here's the code to do it:

```terraform
resource "aws_instance" "my_project_ec2" {
  instance_type = "t2.micro"
  ami = "ami-06e46074ae430fba6"
  tags = {
    Name = "my-python-project"
  }
}
```

> The resource name `my-python-project` that comes after the resource type `aws_instance` is not the same as the resource name that appears in the Admin Console. For that, I had to use `tags` parameter.

Once again, the infrastructure is updated after we run `terraform plan` and `terraform apply` and a new EC2 instance is created.i

### Wait, what is AMI?

Amazon Machine Image (AMI) is a pre-configured package required to launch an EC2 instance that includes an operating system, software packages and other requirements. It's essentially a template that can be used to launch EC2 instances (Linux, Windows or Mac)

AMI is awesome because:

- We don't need to manually install packages and requirements
- We can launch several EC2 with the same configuration (load balancing)
- When selecting the AMI, we can use the Advanced Details tab to run a bash script (e.g. to update `yum` and install `httpd`)

Ok. So far, we have a computer where we can run our project and a database in which we can persist and read data. Now it's time to give them proper access - in other words, we have to specify what AWS resources and who should be able to access them.
React UseEffect() Rendering twice!
Tags: react, webdev, beginners, programming
Published: 2023-09-25 16:37:21

One of the strange behaviours I came across using useEffect().
let's go through the effect and then jump into the solution.
Here is a code below.

App.js
```
import React from 'react'
import { useEffect,useState } from 'react';
import './App.css';
import io from 'socket.io-client'

function App() {


  useEffect(()=>{
   console.log("hello from use effect");
  },[])

  return (
    <div>
  Hello world

    </div>
  
  );
}

export default App;
```
and index .js

```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);



```
This is a small code snippet where we are just showing "hello World" on the web page and there is a useeffect hook which prints
"hello from use effect". After running it on the development server you can see the print statement printing twice in the console. 

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

The solution is to remove the React.strictMode
 tag around the app. and this solves our multiple render issues associated with useEffect.

Thank you:)

Happy coding!
Exploring ICE and SDP in the WebRTC Ecosystem
Tags: ice, sdp, webrtc
Published: 2023-09-25 16:36:11

As remote work, video conferencing, and live streaming become increasingly popular, the need for robust real-time communication technology is surging. [WebRTC (Web Real-Time Communication)](https://www.digitalsamba.com/blog/what-is-webrtc-signalling) has emerged as a leading solution for real-time digital interactions. However, ensuring a dependable network connection between devices is not without challenges, particularly when firewalls or NATs (Network Address Translators) are in the mix.

In this discussion, we'll explore two cornerstone elements of WebRTC: the ICE (Interactive Connectivity Establishment) and SDP (Session Description Protocol) frameworks, which are crucial for enabling smooth online interactions.

## Understanding ICE
ICE is a pivotal protocol within WebRTC that aids in forming connections between internet-enabled devices. It's especially useful for circumventing hurdles like firewalls and NATs that can disrupt direct communication between devices.

Through a mechanism known as "ICE gathering," devices exchange sets of network coordinates, known as ICE candidates. These candidates help determine the most effective route for creating a stable connection, allowing for uninterrupted real-time interactions.

## Overcoming NATs and Firewalls with ICE
NATs act as gatekeepers, allocating a single public IP address for multiple devices on a local network. This provides an additional layer of security, but it complicates direct device-to-device (peer-to-peer) connections. ICE bridges this gap.

During "ICE gathering," devices share potential network addresses or ICE candidates, which describe possible routes for establishing a link. ICE then assesses these candidates, selecting the most appropriate one to set up a reliable connection, even when NATs and firewalls are present.

## Decoding ICE Candidates
In WebRTC, ICE candidates serve as potential network addresses that enable devices to connect online. Devices can have multiple candidates, detailing information such as IP addresses, port numbers, and transport protocols. When initiating a WebRTC session, devices exchange these candidates to identify the most favorable route for communication, ensuring a successful connection.

## Choosing Network Paths with ICE
To determine the best connection route, ICE candidates undergo a "connectivity check," which involves sending and receiving short messages to gauge connection quality and latency. If a direct peer-to-peer link is unattainable, [STUN and TURN servers](https://www.digitalsamba.com/blog/stun-vs-turn) are employed to facilitate ICE candidate exchange and manage connections.

## Critical Role of ICE Servers
ICE servers are instrumental in the WebRTC framework, serving as the infrastructure for establishing connections between WebRTC-enabled devices, particularly when firewalls or NATs are involved.


Do you wanna know more? Read more on our article "[ICE and SDP in WebRTC](https://www.digitalsamba.com/blog/ice-and-sdp-in-webrtc)"
Share us your project for Hacktoberfest 2023!
Tags: discuss, opensource, hacktoberfest, hacktoberfest23
Published: 2023-09-25 16:30:00

Less than one week, and **Hacktoberfest 2023** will start 🥳

- Have you already participated to an Hackathon? 
- Do you know [Hacktoberfest](https://hacktoberfest.com)? 

*And the last point :*
- Do you have a project you'd like to share with us? Or a project that's close to your heart!

Some good questions and posts are already published 🙌💚

{% embed https://dev.to/bekahhw/what-repos-would-you-recommend-to-new-contributors-for-hacktoberfest-47no %} {% embed https://dev.to/this-is-learning/creating-your-first-valid-pr-for-hacktoberfest-2023-21f2 %}
AMZ Sparks – Amazon Marketing Services Consultant
Published: 2023-09-25 16:06:24


We [AMZSparks ](https://amzsparks.com/)specialise in helping businesses like yours reach their full potential. Whether you’re looking to increase your sales, streamline your operations, or expand your reach, we got you covered. From precise Amazon Catalog Management to expert Amazon Product Sourcing, we've got you covered. Boost visibility and sales with meticulous Amazon Keyword Research and compelling Amazon Listing Optimization. Launch and rank your products with precision using our proven strategies. Dominate the marketplace with our results-driven Amazon ppc Advertising Services and trust us with seamless Amazon Account Management. Expand your brand reach with our strategic Brand Expanding Management services. Experience unparalleled success on Amazon with our comprehensive solutions tailored for your business.

Contact us today at : info@amzsparks.com
Open Source ABCs: Stack Overflow
Tags: opensource, discuss, 100daysofoss
Published: 2023-09-25 15:45:07

---
title: Open Source ABCs: Stack Overflow
published: true
description: Join our #100DaysOfOSS blog series as we explore the world of Open Source Software (OSS) from A to Z! Every week, we'll discuss two new letters of the English alphabet. Share your thoughts, ideas, and favorite OSS projects for each letter. Let's celebrate the power of open source together! 
tags: opensource, discuss, 100DaysOfOSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxwg4ygmybnni1tpwdx3.png
# Use a ratio of 100:42 for best results.
series: 100DaysOfOSS
---

Welcome to our [#100DaysOfOSS series](https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k). Until October 31, we'll be doing  Open Source Software (OSS) terms from A to Z. We'll be diving into a different letter of the English alphabet, uncovering OSS concepts, and sharing our thoughts on them.

Today, we're covering the letter "S" for Stack Overflow.

**Stack Overflow**: Stack Overflow is a popular question-and-answer website used by developers, serving as a valuable resource for open-source contributors seeking help, guidance, or solutions to coding challenges.

Now, we want to hear from you! What other OSS terms can you think of that start with the letter "S"? And if you want to chime in to talk about the impact of things like ChatGPT on Stack Overflow, we'd love to hear your thoughts! 

Remember to use the hashtag #100DaysOfOSS if you share on social media, and don't forget to tag us [@saucedopen](https://twitter.com/saucedopen) so we can follow along.