teleren/devto huggingface dataset:
My Hacktoberfest 2022 contributions
Tags: hacktoberfest, opensource
Published: 2022-10-15 06:20:09

---
title: My Hacktoberfest 2022 contributions
published: true
tags: hacktoberfest, opensource 
---
<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Intro
My name is Paul, I come from the sunny country of Greece (locaten in Athens), and I am a software engineer with 8 years of experience in the field. 
I work at a not-for-profit software company called [SciFY](https://www.scify.gr/site/en/), where we build software with a societal impact, like video games for the blind, assistive technologies, e-democracy tools, and more. Check out our [Github profile](https://github.com/scify)! 🤩👨🏼‍🦽

{% embed https://github.com/scify %}

### Background

I have studied Computer Science in Greece, and I much enjoy learning new things about everything! 🦾👨🏼‍🚀

### Progress

I join Hacktoberfest every year, since 2017. I much enjoy the enthusiasm of the FOSS community, and the hype of open-source software during this month. I also get a chance to work again on small -yet important- updates and improvements of our open-source projects! 🎃🧙 

### Contributions

This year I decided to contribute to the very own projects of the organization I work for. We have some legacy application that needed revamping, and some others that are in the process of adding new features to.

More specifically:

#### 1. ICSee (I Can See) Android app for people with low-vision

ICSee is an Android app, written in Java. It helps people with low-vision to see small texts through the phone camera, by applying special real-time filters. 
In the context of Hacktoberfest 2022, I took the opportunity to upgrade the app to the latest version of [OpenCV](https://opencv.org/) (the library we use to handle real-time image processing), as well as support new languages.

{% embed https://github.com/scify/ICSee %}


#### 2. Dianoia mobile app for people with emerging, early-stage dementia

People with dementia, due to the ongoing decline in their mental abilities, need proper care at each stage. Their carers feel they have a great responsibility in their hands. Therefore, dementia affects not only the person dealing with it, but the caregivers, too.

Dianoia is an [Ionic](https://ionicframework.com/) smartphone app for family caregivers and health professionals in order to provide knowledge about simple techniques of non-pharmaceutical interventions will provide valuable insight and tools.

In the context of Hacktoberfest 2022, I took the opportunity to enrich the app with new content, fix several bugs, and make the UI look much smoother!

{% embed https://github.com/scify/Dianoia-app %}


### Reflections

Like every year, it is beyond exctiting to see the software development communitu to passionate about such an innovative event. 🧑🏿‍🚀

This year, I also liked the inclusion of low-code or even no-code contributions, since I think that such endeavor will introduce open-source to an even wider audience! ❤️🥳

I look forward to participating in Hacktoberfest every year! 😄👨‍💻
How to Get Started With React – A Beginner's Guide
Tags: react, javascript, webdev
Published: 2022-10-15 06:14:05

React js is a javascript library and it is also termed as a framework because it can be directly be compared with javascript frameworks like angular , view.

Most people including me used react because of it’s huge community support and you can find many article and solutions like this about react js everywhere on goggle.

I used react js because it was so popular and in demand , but after using it I felt that this is the fastest way to design web apps and It was amazing experience while coding because now frontend is not only about designing but it is also about implementing business logics and techniques.

Many developers want to learn react but learning react can be difficult if you directly jump into in without learning basics of Javascript.

Some of the terms to be learned before diving into react js are :

## HTML
 — Learn basics of HTML 5 like div tags , classes and id’s of HTML and stuffs like semantic tags as (section , aside , header , footer);

## CSS
 — Learning CSS helps to learn react js faster cause styling is necessity for front-end developers.

## JAVASCRIPT
 — Learning basics of Js is important as what we use is only ES6 stand for EcmaScript 2015. Learn following things in ES6 like : map method , filter method , template strings , var , let , const , hoisting , arrow functions , this keyword , class in js , OOP in js , destructuring etc.

## REACT DOCS
 — Learn react docs more than anything in world then you feel react js is so easy that a common man learn do it within months.

## Conclusion
 
Now, create more projects like todolist, ecommerce website, api covid tracker and many crud projects to be used in react.
How to use authenticated proxy with Node's fetch
Tags: typescript, node, fetch
Published: 2022-10-15 06:10:53

---
title: How to use authenticated proxy with Node's fetch
published: true
description: To use an authenticated proxy with fetch in node, you need to register an undici proxy agent as a global dispatcher.
tags: typescript,node,fetch
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
![fetch in node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3y0ffgogco8zmvnek1v.png)

The fetch API is now available in node18. However, I was having trouble figuring out how to use a proxy.

Finally, we were able to use fetch through a proxy with the following code.

```ts
import { ProxyAgent, setGlobalDispatcher } from "undici"
import { Base64 } from "js-base64"

const agent = new ProxyAgent({
  uri: "http://yout-proxy-host:8080",
  auth: Base64.encode("username:password"),
})

setGlobalDispatcher(agent)

const main = async () => {
  const response = await fetch("https://api.example.com/super-cool-api")
  const json = await response.json()
  console.log(json)
}

main()
```

I am not good at English so I leave you only with the successful code 🎮
Mastering Deployment: Showcasing Your React App on GitHub Pages
Tags: react, html, css, github
Published: 2022-10-15 05:57:06


To deploy your React app on GitHub Pages, follow these steps:

1. **Create a GitHub Repository:**
   If you haven't already, create a new repository on GitHub where you'll store your React app's code.

2. **Set Up Your React App:**
   Make sure your React app is ready for deployment. Run the following command to create a production build:
   ```sh
   npm run build
   ```

3. **Install `gh-pages` Package:**
   Use the `gh-pages` package to streamline the deployment process. Install it using:
   ```sh
   npm install gh-pages --save-dev
   ```

4. **Configure `package.json`:**
   In your `package.json` file, add the following lines:
   ```json
   "homepage": "https://<username>.github.io/<repository-name>",
   "scripts": {
     "deploy": "gh-pages -d build"
   }
   ```

5. **Commit and Push:**
   Commit your changes and push them to the repository:
   ```sh
   git add .
   git commit -m "Preparing for deployment"
   git push origin main
   ```

6. **Deploy to GitHub Pages:**
   Run the deployment script using:
   ```sh
   npm run deploy
   ```

7. **Check GitHub Settings:**
   In your repository on GitHub, navigate to the "Settings" tab. Scroll down to the GitHub Pages section and ensure that the source is set to `gh-pages` branch.

8. **Access Your Deployed App:**
   After a few minutes, your React app should be accessible at the URL: `https://<username>.github.io/<repository-name>`

9. **Update and Redeploy:**
   Whenever you make changes to your app, repeat steps 2, 4, 5, and 6 to update and redeploy your app.

10. **Custom Domain (Optional):**
    If you have a custom domain, you can configure it in the GitHub Pages settings.

By following these steps, you'll effectively deploy your React app on GitHub Pages, making it accessible to a wider audience.
Hi, I'm Mohammed Rishin
Published: 2022-10-15 05:55:05

I'm a Experienced Digital Marketer planning to shift to Web Development. I'm trying hard to improve my skills and learn new technologies.

My Introduction to the Dev Community: https://dev.to/mohdrishin/comment/22a7g


I write articles about technology, digital marketing, cyber security and everything around it. The platform I own for writing articles is [The Wise Script](https://thewisescript.com/).
How to build a dark mode toggle with CSS and Javascript
Tags: javascript, css, html
Published: 2022-10-15 05:47:14

Hello friends 👋, after being asked many times how to make a dark mode toggle, I have decided to write this step-by-step tutorial with HTML, CSS, and JavaScript.

To follow this tutorial, you need two things installed on your laptop.

- A web browser: Google Chrome, Firefox, or any other web browser.

- A text editor: the most famous developer text editor is VScode, but you can use any text editor.

https://www.youtube.com/watch?v=CObOf-HlRUM&ab_channel=Ucode

------------------------------------------------------------------------
CHAPTERS:
------------------------------------------------------------------------
00:00 Light/Dark mode toggle introduction
00:13 Add HTML CSS JS files
01:04 CSS Global Variables
01:31 HTML structure
02:48 Page Styling
04:54 Toggle Button With JavaScript
06:14 Changing Dark theme global variables

If you prefer reading, here is my post explaining how to make this sidebar menu clone.
http://www.u-code.online/how-to-build-a-dark-mode-toggle-with-css-and-javascript/

------------------------------------------------------------------------
CODE SOURCE:
------------------------------------------------------------------------
https://www.buymeacoffee.com/ucode/e/95279
slowly shifting grain V/S slowly changing dimension??
Tags: datawarehouse
Published: 2022-10-15 05:46:48

My learned friend,

Can someone please enlighten me about difference between slowly shifting grain V/S slowly changing dimension. I am sure they are not same. Grain refers to the lowest level of information stored in a fact is defined. For example for a sales transaction we can say the grain will be what product, which day, which store(location), what customer, what quantity. Can this ever drift or change slowly..?

Slowly changing dimension is I know has three options

**option 1** where we simply overwrite the old attribute value with the new value. So no history is maintained.

**option 2** we insert a new row in dimension

**option 3** keep a pair of attributes to preserve the old and new value adding additional columns

**BUT WHAT IS SLOWLY CHANGIN OR DRIFTNG GRAIN?**
#qstn-2> #node.js, #API CALL ,#Notification mechanism , #nodejs Events
Published: 2022-10-15 05:40:26

A Node.js-based server never waits for an API to return data. Instead, it moves to the next API after calling it, and a notification mechanism from a Node.js event responds to the server for the previous API call

How does the notification mechanism actually works? What is actually happening behind the scene?
React Query Custom Hooks Example in react js
Tags: react, javascript, webdev
Published: 2022-10-15 04:39:53

Let's create a custom hook with react query.
Now we will create a component that fetches list of products with react query.

Now in Product.js component ,

```
const Product = () => {
  const products = useProducts()
   if(products.isLoading) return "Loading ....."
   if(products.isError) return "Error ...." 
  return(
   <>
      products.map((product) => (
     <h4 key={product.id}>{product.title}</h4>
  ))
   </>
)
}
```

Lets create a hook as useProducts.js

```
const useProducts = () => {
  return useQuery(['products'] , getProducts)
};

```
Now if we want to fetch single data then we can pass id 

```
const Product = () => {
const params = useParams();
const id = Number(params?.id)
  const product = useProduct(id)
   if(product.isLoading) return "Loading ....."
   if(product.isError) return "Error ...." 
  return(
   <>
     <h4>{product.title}</h4>
  ))
   </>
)
}

const useProduct = (id) => {
  return useQuery(['product' , id] , () => getProduct(id))
};
```

Now for post and edit,

```
const AddProduct = () => {
  const mutation = useAddProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data)}></button>
   </>
  )
)
};

const useAddProduct = () => {
  return useMutation(postProduct , {
  onSuccess : () => {
    toast.success(`Added successfully`)
  }
})
};

```

for edit ,

```
const EditProduct = () => {
  const params = useParams();
  const id = Number(params.id);
  const mutation = useEditProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data , id)}></button>
   </>
  )
)
};

const useEditProduct = () => {
  return useMutation(editProduct , {
  onSuccess : () => {
    toast.success(`edited successfully`)
  }
})
};
```

## Conclusion,

This is the best way to manage the server side data and separate the business logics with the UI components and hence anyone from outer world can check , edit and understand the code. This is the best way to work with react and only the needed component will use the data from the custom hook.
1531. Leetcode solution in python3
Tags: python
Published: 2022-10-15 04:37:31

```python
class Solution:
  def getLengthOfOptimalCompression(self, s: str, k: int) -> int:
    def getLength(maxFreq):  # The length to compress `maxFreq`
      if maxFreq == 1:
        return 1  # C
      if maxFreq < 10:
        return 2  # [1-9]c
      if maxFreq < 100:
        return 3  # [1-9][0-9]c
      return 4    # [1-9][0-9][0-9]c

    # Compression(i, k) := length of optimal compression of s[i:] w/ at most k deletion
    @functools.lru_cache(None)
    def compression(i, k):
      if k < 0:
        return math.inf
      if i == len(s) or len(s) - i <= k:
        return 0

      ans = math.inf
      maxFreq = 0  # Max freq in s[i..j]
      count = Counter()

      # Make chars in s[i..j] be same
      # Keep the char that has max freq in this range and remove other chars
      for j in range(i, len(s)):
        count[s[j]] += 1
        maxFreq = max(maxFreq, count[s[j]])
        ans = min(ans, getLength(maxFreq) +
                  compression(j + 1, k - (j - i + 1 - maxFreq)))

      return ans

    return compression(0, k)

```

#Leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/string-compression-ii/
Day 9-10
Tags: blog, nextjs, 100daysofcode
Published: 2022-10-15 04:37:02

# Day 9-10

I have been working really hard on the [hackathon](https://codebattles.dev) but I have realized this is way too hard for my level. I am planning on attending a hackathon more my level (high school). But, instead of working on that project I plan to focus on my Nasa site where I will implement features that I am thinking about that involve API. I am constantly checking on my [cocktail recipe page](https://cocktails-recipies.vercel.app) to make sure that there aren't any bugs or styling issues and brainstorming ideas to offer a better experience.


## Ideas to add to cocktail website: 
- user authentication
- save certain recipes to your profile
Laravel LDAP authentication - Laravel login with LDAP
Tags: webdev, php, opensource, laravel
Published: 2022-10-22 13:36:47

---
title: Laravel LDAP authentication - Laravel login with LDAP
published: true
date: 2022-10-15 04:31:36 UTC
tags: webdevelopment,php,opensource,laravel
canonical_url: https://medium.com/geekculture/laravel-ldap-authentication-laravel-login-with-ldap-437674903068
---

[![](https://cdn-images-1.medium.com/max/2600/0*vr0S7ZxE_G0GXwaW)](https://medium.com/geekculture/laravel-ldap-authentication-laravel-login-with-ldap-437674903068?source=rss-17217f29618a------2)

Laravel LDAP authentication with an example — part 2

[Continue reading on Geek Culture »](https://medium.com/geekculture/laravel-ldap-authentication-laravel-login-with-ldap-437674903068?source=rss-17217f29618a------2)
CSS Grid: Part 1 - grid-template
Tags: css, grid
Published: 2022-10-15 02:29:34

We have six divs that display numbers from 1 to 6: 
```html
   <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </body>
```  
Preview of the code: 
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx0u025jbch6qe493fgf.png">
  <figcaption> without any grid </figcaption>
</figure>
To turn the container into a grid, we first apply the `display: grid` property to the container class: 
```css
 .container {
    display: grid;
  }
```
### grid-template-columns
In order to specify the columns, we give the container  `grid-template-columns`. `grid-template-columns` property allow us to define how many columns we will have in our grid and how wide each column will be. 
```css
.container {
   display: grid;
   grid-template-columns: 100px auto 100px;
 }
``` 
The `auto` keyword in this case means that the columns will take up whatever remaining space there is in the width.
Preview of the code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xsmpjelzml1r3rd9xt6.png)
### grid-template-rows
The `grid-template-rows` property allows us to define the height of each row:
```css
 .container {
     display: grid;
     grid-template-columns: 100px auto 100px;
     grid-template-rows: 50px 200px;
   }
```
Preview of the code:
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd299r3te8vhmkr4qx19.png">
  <figcaption> 3 columns(top to bottom) and two rows (left to right) </figcaption>
</figure> 
###grid-gap or gap
To set the gap between rows and columns, we can use the grid-gap or gap property:
```css
 .container {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px 50px;
    grid-gap: 3px;
  }
```
If we want our grid to be two columns wide and three rows long, we can remove the third column and add an additional row:
```css
.container {
   display: grid;
   grid-template-columns: 100px auto;
   grid-template-rows: 50px 50px 200px;
   grid-gap: 3px;
 }
```
Preview of the code:
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do4s2t1sw7rz69ef6jfl.png">
  <figcaption> 3 rows and 2 columns </figcaption>
</figure>
OPPO Reno 9 Specifications Leaked well Before Launch
Tags: gadgets, oppo, mobile
Published: 2022-10-15 03:48:35

The OPPO Reno 9 is due for a launch soon and now tipster Mukul Sharma has uncovered leaked specifications forward of the Reno 9’s India debut. The specifications have can be found on Digital Chat Station on Weibo. [Read More...](https://techzpad.com/oppo-reno-9-specifications-leaked-before-launch)
Refactoring My Code
Tags: staticsitegenerator, github, python, opensource
Published: 2022-10-15 03:23:31


## What I Learned This Week 

This week I learned how to 
- refactor my existing code to make it easier to read, maintain, and improve modularity
- use git rebase to rewrite history on a branch
-	use git commit --amend to change a commit message
-	use git merge


## The Refactoring 

Until now I had worked on [Rwar](https://github.com/saminarp/rwar) – my static site generator written in Python, without paying much attention to ways I could make the code cleaner and easier to read. This week was all about cleaning up my code. I refactored my code by reducing code duplication, extracting functions, removing global variables, and giving better names to my variables. Previously, I had already worked on splitting my code up into multiple files. To do the refactoring of my code, I first created a branch called `refactoring` and made all my changes on this branch. 

## Git Rebase and Squash 

[Rebase](https://git-scm.com/docs/git-rebase) and [Squash](https://www.git-tower.com/learn/git/faq/git-squash) are two terms that are completely new to me. Rebasing was pretty cool as when I did `git rebase main -i`, I was able to see the history of my commits on the `refactoring` branch. It opened up a `vim` editor where I could see and edit commit messages and use the word `squash` beside specific commits to squash them together to make it into [one single commit](https://github.com/saminarp/rwar/commit/a5a5dea26b8dbdb2e341a6c98410894dbbc240b7). 

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


## Trial and Error 

I made some mistakes during the rebase process as I was trying to initially rebase while being on the 'main' branch, whereas I should have been on the 'refactoring' branch. This actually created a bit of a mess and I had to fix my errors. After that, I also faced some merge conflicts while trying to merge the branch which I had to resolve.

I was also not too happy with the commit messages I had written while refactoring. I believe the messages could be more descriptive versus just the generic way I had written ‘refactor: extract function’ or ‘refactor: no global var’. There was even a time I went to grab coffee in the middle of writing my code and forgot what I had committed and sent the same commit message twice. I did have a change to edit this on the vim editor during the interactive rebase. I then googled best practices for commit messages and learned a whole lot. I will be sure to follow these practices in the future.
How to create a blog from scratch using mern stack coding and web development ?
Tags: beginners, react, news, javascript
Published: 2022-10-15 02:43:44

If you are reading this my name is FARES tinakiche I started learning web development about 1 year ago this how I built my full stack blog project to see the full project with the code 
**[click here](https://fares00t.gumroad.com/l/ovsib?_gl=1*1j8usd6*_ga*MTI3ODM2MDM2Ni4xNjY0OTIwOTIz*_ga_6LJN6D94N6*MTY2NTc5OTkwNS4zLjEuMTY2NTgwMDUzMi4wLjAuMA..&a=714625875)**

**Project description**
This blog is highly costumable with code and mostly mobile friendly

in this project i used the mern stack 

- MongoDB
- Express 
- React 
- NodeJS

Here are some photos from the project

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

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

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

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

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

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

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

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

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

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

**file structure**


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



Index.js
```
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ContextProvider } from "./context/Context";

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

```