teleren/devto huggingface dataset:
Hacktoberfest 2023- Learnings and Experience!
Tags: hack23contributor
Published: 2023-10-30 16:45:55

### Introduction

I'm Juanita, a passionate undergrad who is exploring open-source and learning while doing. This was my second Hacktoberfest and was filled with learnings. Got to work on some amazing projects and learnt something new which was fun! 
You can checkout my Github here -> https://github.com/JuanitaCathy

### Journey Throughout

This Hacktoberfest was certainly filled with many highs and lows, one of the lows being me struggling to find a repository to contribute to. Initially, as I wasn't well aware of the trending tech, I found it hard to get hold of a repository to contribute to. However, when I found a repository which somewhat aligned to what I wanted to do, I went through their codebase and learnt some basic stuff and contributed with what I learnt. 

I was learning by doing and this was helpful as it wasn't just a one-time thing and will help me in a long run. I started with basic contributions like python scripts and went on to go abit advance. This was a massive boost in confidence as well which is nice. It was a nice experience and the maintainers of the repository I contributed to were also pretty chill which further enhanced the experience.

### Growth

When I started out with Hacktoberfest, I wasn't sure if I could apply my theoretical knowledge of a specific language for real-world applications. However, with me learning things on the go and applying them made me more confident and strong with my foundations. 

I initially knew only Python, however, there was this one contribution where I had to add Poetry support and that was a really big confidence boost once I finished as when I started out, I had no clue what Poetry was. For now, I'm having fun learning and creating an impact through open-source. Hacktoberfest 2023 really is my inflection point and I love it.
Transform Digital Identity with AgentChain
Tags: blockchain, frontend, startup, career
Published: 2023-10-30 16:45:17

My name is Osler Hutson, and I'm the founder of AgentChain. We're a digital identity solution aimed at transforming compliance in industries like insurance, finance, and real estate through dynamic NFTs and Distributed Ledger Technology (DLT).
The Opportunity
We're on the verge of closing a major funding round and our mission extends far beyond the current hype around blockchain and NFTs. We're building technology that has real-world impact, solving complex problems for licensed professionals and entities in compliance-related sectors.
The Role
We're looking for a technical lead who's as serious about this mission as we are. Your focus will be on creating an intuitive and user-friendly front-end experience that will be the tipping point in our conversations with investors. We need someone who can visualize a timeline and execute efficiently.
Why You Should Join
The right individual will find the task at hand to be rather straightforward, albeit pivotal. We're offering a rare ground-floor opportunity to share in the equity and future profits of what is set to be a transformative venture.
Next Steps
If you're self-motivated and you've been waiting for a chance to make real-world changes using your skills in blockchain and UI development, please reach out and let's explore how we can make history together.
It's Easy To Switch from CommonJS to ES Modules with TS2ESM
Tags: typescript, node, javascript, webdev
Published: 2023-10-30 16:23:12

Migrating a TypeScript project from CommonJS to ESM is now incredibly simple, thanks to the [TS2ESM tool](https://github.com/bennycode/ts2esm) and the [configuration fixes in TS 5.2](https://devblogs.microsoft.com/typescript/announcing-typescript-5-2/#breaking-changes-and-correctness-fixes). 
<!--more-->
You can achieve this in just 5 simple steps:

1. Set `type` to `module` in your package.json
2. Set `module` to `nodenext` in your tsconfig.json
3. Set `moduleResolution` to `nodenext` in your tsconfig.json
4. Globally install `ts2esm` by running `npm i -g ts2esm`
5. Execute the `ts2esm` command within your project's directory

As a result, you'll see that all your relative import and export statements now either include an explicit ".js" extension or "index.js" suffix, as is required for ECMAScript modules. 

The `ts2esm` command will also enhance imports from JSON files in your TypeScript code by using [import assertions](https://v8.dev/features/import-assertions):

```ts
import fixtures from '../test/fixtures.json' assert {type: 'json'};
```

## Video Tutorial

{% youtube bgGQgSQSpI8 %}
Revolutionizing Customer Service: The Role of Mobile Banking Applications
Published: 2023-10-30 16:22:41

The advent of [mobile banking application](https://www.technbrains.com/mobile-application/on-demand-app-development/)s has made them a standard feature in the banking sector, amplifying user experience and customer service. Nevertheless, it's worth noting that the cost of development can vary depending on the application's complexity.

**Reach Out To Us**

Email: contact@technbrains.com
Call: 833-888-8370

**Social Links**

Facebook
https://www.facebook.com/pages/category/Software-Company/Technbrains-100478948441594/

Twitter
https://twitter.com/technbrains

Instagram
https://www.instagram.com/technbrains/

LinkedIn
https://www.linkedin.com/company/technbrains
Placeholder Maintainer
Tags: hack23maintainer
Published: 2023-10-30 16:05:08

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a maintainer. Is this your first Hacktoberfest, or have you maintained in others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Project
<!-- Tell us about the repository that you hosted. What processes did you set up to review and merge pull requests? Feel free to embed your GitHub repo by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your project goals changed since publicly maintaining it? -->
Manual Testing
Tags: testing
Published: 2023-10-30 15:58:42

**Manual Testing🤔**

Manual testing is a testing process which is testing the software without any automated tool. Tester will do the test cases manually with end user perspective. Will ensure that all the software working as mentioned in the document. Test case report also generated manually. Manual testing is mandatory for every new software before automated testing.

**Types of Manual Testing**

1.Black box testing
2.White box testing
3.Grey box testing

**Benefits of Manual Testing😍**

- If you are a manual tester you don't need programming language.
- Manual testing is easy for new tester to learn.
- Using manual testing the bugs can identify in the early stages.
- Manual testing is cost effective.

**Drawbacks of Manual Testing😔**

- Large number of human sources need for manual testing.
- Manual testing is very time consuming. All the test cases executed manually so tester need more time testing.
- Manual testing is very costly in big project in short period of time.
- Manual testing does not cover all aspect of testing.
Minimalistic Authentication in Rails
Tags: rails, webdev, programming, authentication
Published: 2023-10-30 15:44:16

I have used devise in the past for user authentication and while it is a powerful gem, it certainly imposes a lot of restrictions on you. 

Most of the time, it is so closed off that you cannot even open the hood and tweak it to your needs. I think this comes mostly from the fact, that it concerns itself with just _too much_. From verification of a password up to tracking of failed sign-ins, there is a lot that seems to be possible with devise, what bothers me is that i can't take over some part if devise's solutions does not work for me.

So, for my projects,  I wanted to get rid of the cruft and start with minimal solutions. One first step on this journey is
**Tinytokenauth-rails** https://github.com/1klap/tinytokenauth-rails

It just concerns itself with the problem, how does any controller know whether a user is signed in or not (if yes, who is it) and how to sign a given user in or out.

With this, the task (and freedom) to come up with a solution for the required work around this, falls to the developer. Like model creation, password checking, controller and routes for registration and session, email sending, password change handling, etc. But this is also the part where customization can and will occur. Like when you want to sign up users with an invite token or a referral code, it will be trivial to add when you are handling the sign-up code yourself.

To me, this make most sense. I while I agree that not every developer should write his own authentication code from scratch, because this can be hard problems with subtle caveats, I also think that this should not be considered arcane craft that must never be touched.

I am happy for the increase in flexibilty. If you crave the same, try out the gem and let me know in the comment section here or on github how you like it.
Quick overview of Next JS 14 Updates
Tags: webdev, nextjs, programming, javascript
Published: 2023-10-30 15:37:01

Hello 👋 and welcome to the new Next JS 14. Yes, you've heard it right, within 12 months Next JS 14 is here🏃. Let's look at the updates:

 • Turbopack 🚄
 • Server Actions(Stable) 
 • Partial Prerendering(Preview) 🪟
 • Next.js Learn(New) 🏫

## Turbopack 🚄

Between performance 🚀 and features, performance always wins 🥇.

Initially, they thought of changing the source language but eventually continued with the Rust Engine.

5000 integration tests for the next dev are now passing with Turbopack 😎, the underlying Rust Engine. These tests include 7 years ⏲️ of bug fixes and reproductions🤯.

After testing on http://vercel.com with the new Next 14
• Up to 53.3% faster local server startup 🚀
• Up to 94.7% faster code updates with Fast Refresh 🔄

## Server Actions(Stable)

Next JS 13 was great but one key missing 😭 ingredient is Server Actions. Now with Next JS 14, Server Actions are stable 😀 and we can call them from anywhere.


![Form code for server actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2slrel0o3q9m3837awt.png)

Data updating, ren-rendering, or redirecting can now happen in one network roundtrip 🛜. You can now also reuse the different actions♻️ .

## Partial Prerendering(Preview)

If you are a front-end developer, this improvement is for you.

loading ? <Spin /> : <Component />

I hope you have seen this syntax 😁. It's annoying to handle the fetch time delay⏳.

Partial Prerendering comes here with your Suspense boundaries🪟. Here's how it works.

![Skeleton via partial prerender ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efehlzx384uo16462rl7.png)

## Next.js Learn(New)

Vercel comes with some great & brand new free courses.

 • Styling and Tailwind CSS
 • Optimizing Fonts and Images
 • Creating Layouts and Pages
 • Navigating Between Pages
 • Setting Up Your Postgres Database
 • Fetching Data with Server Components
 • Static and Dynamic Rendering
 • Streaming
 • Partial Prerendering (Optional)
 • Adding Search and Pagination
 • Mutating Data
 • Handling Errors
 • Improving Accessibility
 • Adding Authentication
 • Adding Metadata

Happy to see your opinion on these changes.
Connect for more :)
How to search logs in S3/Azure/GCP storage fast and cheap using cloudgrep
Tags: aws, gcp, azure
Published: 2023-10-30 15:36:53

cloudgrep searches cloud storage. It currently supports searching log files, optionally compressed with gzip (.gz) or zip (.zip), in AWS S3, Azure Storage or Google Cloud Storage.

You can get it at https://github.com/cado-security/cloudgrep

### Why? ###
- Directly searching cloud storage, without indexing logs into a SIEM or Log Analysis tool, can be faster and cheaper.
- There is no need to wait for logs to be ingested, indexed, and made available for searching.
- It searches files in parallel for speed.
- This may be of use when debugging applications, or investigating a security incident.


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

### Example ###

Simple example:
```
./cloudgrep --bucket test-s3-access-logs --query 9RXXKPREHHTFQD77
python3 cloudgrep.py -b test-s3-access-logs -q 9RXXKPREHHTFQD77
```

Simple Azure example:
```
python3 cloudgrep.py -an some_account -cn some_container -q my_search
```

Simple Google example:
```
python3 cloudgrep.py -gb my-gcp-bucket -q my_search
```


More complicated example:
```
python3 cloudgrep.py -b test-s3-access-logs --prefix "logs/" --filename ".log" -q 9RXXKPREHHTFQD77 -s "2023-01-09 20:30:00" -e "2023-01-09 20:45:00" --file_size 10000 --debug
```

Saving the output to a file:
```
python3 cloudgrep.py -b test-s3-access-logs -q 9RXXKPREHHTFQD77 --hide_filenames > matching_events.log
```

Example output:
```
Bucket is in region: us-east-2 : Search from the same region to avoid egress charges.
Searching 11 files in test-s3-access-logs for 9RXXKPREHHTFQD77...
access2023-01-09-20-34-20-EAC533CB93B4ACBE: abbd82b5ad5dc5d024cd1841d19c0cf2fd7472c47a1501ececde37fe91adc510 bucket-72561-s3bucketalt-1my9piwesfim7 [09/Jan/2023:19:20:00 +0000] 1.125.222.333 arn:aws:sts::000011110470:assumed-role/bucket-72561-myResponseRole-1WP2IOKDV7B4Y/1673265251.340187 9RXXKPREHHTFQD77 REST.GET.BUCKET - "GET /?list-type=2&prefix=-collector%2Fproject-&start-after=&encoding-type=url HTTP/1.1" 200 - 946 - 33 32 "-" "Boto3/1.21.24 Python/3.9.2 Linux/5.10.0-10-cloud-amd64 Botocore/1.24.46" - aNPuHKw== SigV4 ECDHE-RSA-AES128-GCM-SHA256 AuthHeader bucket-72561-s3bucketalt-1my9piwesfim7.s3.us-east-2.amazonaws.com TLSv1.2 - -
```
My first React JS work
Tags: beginners, javascript, react
Published: 2023-10-30 15:33:07

This the first project that created by following allow with the instructor:

index.js

```
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

App.js

```
import { useEffect, useState } from "react"


export default function App(){
  const [advice, setAdvice] = useState("");
  const [count, setCount] = useState(0);

  async function getAdvice(){
     const res = await fetch('https://api.adviceslip.com/advice');
     const data = await res.json();
     setAdvice(data.slip.advice);
     setCount((c) => c + 1);

  }

  useEffect(function () {
    getAdvice();
  }, []);

  return ( 
    <div>
      <h1>{ advice }</h1>
      <button onClick={getAdvice}>Get Advice </button>
      <Message count={count}/>
    </div>
  );
}

function Message(props){
  return (
    <p>
      You have read <strong>{props.count}</strong> pieces of advice
    </p>
  );
}
```
Python - Depth-First Search (DFS) for Tree and Graph Traversal
Tags: python, programming, tutorial, algorithms
Published: 2023-10-30 15:30:00

Depth-first search (DFS) is a fundamental algorithm for traversing tree-like or graph-like data structures. It explores as far as possible along a branch before backtracking. You can use it for various tasks, including finding paths, cycle detection, etc. Here's an example:

**Example - Depth-First Search in Python for Tree Traversal:**

```python
class TreeNode:
    def __init__(self, val):
        self.val = val
        self.children = []

def dfs_tree(node):
    if not node:
        return

    print(node.val)  # Process the current node

    for child in node.children:
        dfs_tree(child)  # Recursively visit child nodes

# Example usage:
root = TreeNode(1)
node2 = TreeNode(2)
node3 = TreeNode(3)
node4 = TreeNode(4)
node5 = TreeNode(5)

root.children = [node2, node3]
node2.children = [node4, node5]

dfs_tree(root)  # Traverses and prints the tree nodes in DFS order
```

We define a basic tree structure using a `TreeNode` class in this example. We then implement a depth-first search (`dfs_tree`) to traverse the tree and process nodes in a depth-first manner. DFS is particularly useful for exploring structures like trees, where you want to visit nodes deeply before moving horizontally to sibling nodes.

You can adapt the same DFS concept to traverse graphs by using appropriate data structures (e.g., adjacency lists) and keeping track of visited nodes to avoid infinite loops when dealing with cyclic graphs.
What’s Your Go-To Method for Defining Colors in CSS?🤔
Tags: css, webdev, colors
Published: 2023-10-30 15:13:34

---
title: What’s Your Go-To Method for Defining Colors in CSS?🤔
published: true
description: 
tags: CSS, webdev, colors
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-10-30 14:54 +0000
---

Selecting the right colors in CSS is fundamental to web design. Do you have a preferred method for defining colors in your projects? Whether you're a seasoned developer or just starting out, choosing colors can be a creative process. Some swear by hexadecimal values, others opt for RGB or HSL. 

As for me, I’ve always used hex codes. Well, at some point, I’ve tried out RGB and RGBA values. I’d always thought the others were “complex.” Digging deeper, it all came down to personal preference, and most times, project requirements.
I delved into the four most popular methods of defining colors in CSS in this article:
[4 Ways to Define Colors in CSS](https://www.makeuseof.com/css-colors-ways-defining/)
Props In React JS Functional Components
Tags: webdev, javascript, react, beginners
Published: 2023-10-30 15:07:00

In this article we will learn about how to use pro**ps in react JS** and what is props in react JS. Props is a very important concept if you are learning frontend development.

## What is Props

In simple way props means properties. So, passing a props meaning pass some properties from parent component to child component. In development we pass our necessary data as a prop from parent component to child component. 

```
`import { useState } from 'react'
import './App.css'
import Card from './components/Card'

function App() {

  return (
    <>
      <h1>Props</h1>
      <div style={{display:"flex", justifyContent:"space-between", width:"90%", margin:"auto"}}>
      <Card title="This is Blog No 1" des="This is the descroption of blog no 1" btn="Read Blog 1"/>
      <Card title="This is Blog No 2" des="This is the descroption of blog no 2" btn="Read Blog 2"/>
      <Card title="This is Blog No 3" des="This is the descroption of blog no 3" btn="Read Blog 3"/>
      </div>
    </>
  )
}

export default App`

```
The above code is of app.jsx. So app.jsx is parent component and Card is child component. I have used Card component 3 times and passing props or data of title, des and btn. The datas are different but props are same. 

Let's see how to get and use those props in our child component. 

```
`const Card = (props) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{props.title}</h2>
            <p>{props.des}</p>
            <button>{props.btn}</button>
        </div>
    </div>
    </>
  )
}`
```

All the props are passed as a object and we get it as a functional argument. Then used the values with there keys. Also, we can de-structure the values and use them. Like the following example. 

```
`const Card = ({title, des, btn}) => {
  return (
    <>
    <div className='card'>
        <div className='card-container'>
            <h2>{title}</h2>
            <p>{des}</p>
            <button>{btn}</button>
        </div>
    </div>
    </>
  )
}`
```

Hope you understood about what is props. I have created a tutorial video about props. You also can watch it for understand in better way.

{% embed https://youtu.be/Suwo_jLxofM?si=jF6WCspkdLjyqCJ4 %}
Các framwork phổ biến khi dùng để làm giao diện xem video , nghe nhạc là những framwork nào ?
Published: 2023-10-30 15:12:26

mình muốn biết vài những thư viện phổ biến để làm trình xem video , phát nhạc , mọi người cho mình vài ý kiến nên dùng loại nào
Git cheatsheet
Tags: github, git, githubhack23
Published: 2023-10-30 15:10:46

"Don't be overwhelmed by learning Git! 😊 It's simpler than you might think. Here's a condensed list of essential Git commands and concepts to get you started:

1. Core:
   - git init
   - git clone
   - git add
   - git commit
   - git status
   - git diff
   - git checkout
   - git reset
   - git log
   - git show
   - git tag
   - git push
   - git pull

2. Branching:
   - git branch
   - git checkout -b
   - git merge
   - git rebase
   - git branch --set-upstream-to
   - git branch --unset-upstream
   - git cherry-pick

3. Merging:
   - git merge
   - git rebase

4. Stashing:
   - git stash
   - git stash pop
   - git stash list
   - git stash apply
   - git stash drop

5. Remotes:
   - git remote
   - git remote add
   - git remote remove
   - git fetch
   - git pull
   - git push
   - git clone --mirror

6. Configuration:
   - git config
   - git global config
   - git reset config

7. Plumbing:
   - git cat-file
   - git checkout-index
   - git commit-tree
   - git diff-tree
   - git for-each-ref
   - git hash-object
   - git ls-files
   - git ls-remote
   - git merge-tree
   - git read-tree
   - git rev-parse
   - git show-branch
   - git show-ref
   - git symbolic-ref
   - git tag --list
   - git update-ref

8. Porcelain:
   - git blame
   - git bisect
   - git checkout
   - git commit
   - git diff
   - git fetch
   - git grep
   - git log
   - git merge
   - git push
   - git rebase
   - git reset
   - git show
   - git tag

9. Alias:
   - git config --global alias.<alias> <command>

10. Hook:
   - git config --local core.hooksPath <path>

For faster learning, check out these resources:
1. Git Official Documentation: git-scm.com/doc
2. GitHub Learning Lab: https://lnkd.in/dfQY6Jtp
3. Codecademy Course: https://lnkd.in/dwG5_C6q
4. Pro Git by Scott Chacon [Book]: git-scm.com/book/en/v2
5. YouTube:
   - FreeCodeCampOrg for beginners: rb.gy/ljxt5s
   - FreeCodeCampOrg for intermediate learners: rb.gy/1x6mc

#Git #VersionControl #LearningGit

Feel free to connect with me on LinkedIn: https://www.linkedin.com/in/farhakousar16
And check out my GitHub profile and star my repositories: https://github.com/FarhaKousar1601

If you have anything to add or any questions, don't hesitate to ask! 😊🌱"
Embarking on a Tech Journey: Crafting Digital Dreams into Reality
Tags: webdev, beginners, csharp, dotnet
Published: 2023-10-30 15:10:29

🚀 Exciting Update! 🚀

I'm ecstatic to introduce my brand-new Developer Portfolio on Netlify! 🌐✨

As an aspiring full-stack developer and tech enthusiast, this portfolio is my digital canvas, showcasing the projects and experiences that have shaped my journey. From web applications to JavaScript coding feats, it's a collection that reflects my tech passion.

But that's not all! I've also crafted "Vinay Jain Dev" Blog, where I delve into challenges and solutions in the ever-evolving realm of software development.

My blog, hosted on Heroku, is where we can discuss, learn, and grow together. I'm excited to connect with fellow developers, share insights, and inspire each other on our coding journeys.

Explore my portfolio: https://vinayjaindev.netlify.app/
Discover the blog: https://vinay-jain-dev-blog-afc5bebd3d4f.herokuapp.com/

Thank you for being part of this fantastic community. Let's keep learning, growing, and coding together! 💻🚀 #DeveloperPortfolio #TechBlog #CodingJourney #SoftwareDevelopment #Netlify #Heroku #WebDevelopment
Proud Moments In Mentoring!
Tags: beginners, mentoring, exercism
Published: 2023-10-30 15:07:29

Ok, yeah, I'm bragging a bit.  But it does give me a (possibly undeserved) sense of accomplishment to help other developers step up their coding game.  And I strongly suggest that if you want to step up your coding game, try mentoring others.  As the old saying goes when one teaches, two learn. 

https://exercism.org/profiles/OnorioCatenacci/testimonials?uuid