teleren/devto huggingface dataset:
Queue using Linked List ES6
Tags: javascript, queue, datastructure, jsnotes
Published: 2022-03-15 16:27:00


### Queue
 Queue is an Abstact data structure, similar to Stacks, but differs, a queue is open at its both ends, One end is used to insert data (enque) and the other is used to removed data (dequeue). Queue follows First-in-First-Out methodology.

 A real-world example is a queue of people waiting for getting vaccinated for covid. First comers will get vaccinated first.
#### Operations
    Fundamental Operation ::
    1. enqueue() -- store an item to the queue;
    2. dequeue() -- remove an item from the head/first element
    Auxilary operation::
    1. peek() -- Get the first element with-out dequeue()
    2. isfull() -- Checks if the queue is full.
    3. isempty() -- Checks if the queue is empty.
## Javascript implementation of Queue (Linked-List)
```javascript
// Queue implementation in linked list

// Node class
class Node {
    constructor(value){
        this.value = value;
        this.next = null;
    }
}

class Queue {
    constructor(){
        this.first = null;
        this.last = null;
        this.length = 0;
    }

    peek(){
        // check if the list if empty
        if(this.length === 0 ) return 'List is empty';
        return this.first
    }
    enqueue(value){
        const newNode = new Node(value);
        // check if the list if empty
        if (this.length === 0){
            this.first = newNode;
            this.last = this.first;
        }else {
            this.last.next = newNode;
            this.last = newNode
        }
        this.length++
        return this
    }

    dequeue(){
     if(!this.first){//if first is equal null
         return 'Empty List'
     }
     if(this.first == this.last){
         this.last = null; //remove the last reference
     }
     const holding = this.first.next;
     this.first  = holding;
     this.length--;
     return this;   
    }

}

// new instance of the Queue
const queue = new Queue()
// peek 
console.log(queue.peek())
// enque first node
console.log(queue.enqueue("Gopi"))
console.log(queue.enqueue("Venkata"))
console.log(queue.enqueue("Poorna"))
// peek again
console.log(queue.peek())
// Dequeue
console.log(queue.dequeue())
console.log(queue.dequeue())
console.log(queue.dequeue())
console.log(queue.dequeue())
```
useStorage-Custom Hook in Next.js
Tags: react, javascript, nextjs, showdev
Published: 2022-03-18 09:32:53

If you're using Next.js you know that it doesn't get along with `localStorage` (or any storage for that matter).
That's because the storages are located under the global object `windows`, which is equal to `undefined` on the server, so we have to explicitly tell Next.js what to run in the server and what on the client.

First, I added a util that indicates if we are in SSR (server side rendering):

```js
export const isSsr = typeof window === 'undefined';
```

### The hook 🪝

```react
import { useState, useEffect } from 'react';
import { isSsr } from '@/utils/isSsr';

export const getStorage = (storage, key) => JSON.parse(storage.getItem(key));

export const setStorage = (storage, key, newValue) => storage.setItem(key, JSON.stringify(newValue));

const useStorage = (storageType, key, initialValue) => {
  if (isSsr) return [initialValue];

  const storageName = `${storageType}Storage`;
  const storage = window[storageName];

  const [value, setValue] = useState(getStorage(storage, key) || initialValue);

  useEffect(() => {
    setStorage(storage, key, value);
  }, [value]);

  return [value, setValue];
};

export default useStorage;
```

### A brief rundown

- We have 2 functions `getStorage` and `setStorage` that are responsible for `getting and parsing` and `setting and stringifying` the data respectively.

- Before writing the logic that uses the `window` object I told Next.js to return the initial value.

- Every time the value changes the hook will update the chosen storage.


### How to use

```react

const LOCAL_STORAGE_KEY = 'filters';
const initialStateFilters = { isExpended: true };

const [filters, setFilters] = useStorage('local', LOCAL_STORAGE_KEY, initialStateFilters);

// The value
const { isExpended } = filters;

// Setting the value
const handleToggle = newIsExpended => setFilters({ ...filters, isExpended: newIsExpended });
```

> You're maybe wondering why I'm using an object as the value of the data, it is simply for scalability reasons.
In the future we'll probably want to add more filters, so instead of creating a hook for each one we'll have them all under the same key.

### Thank you for reading!
React Project Deployment
Tags: react, javascript, webdev, beginners
Published: 2022-03-18 09:07:17

[Complete Playlist for the Pproject](https://www.youtube.com/watch?v=rV1xJQN0zTI&list=PL-jai53vg8d2At-01wCUVShUXavlmGm2Z)
Check it out guys if u are learning React or looking into some cool react stuff
Do share it if possible
[Github Repo for Project](https://github.com/47karimasif/bills-app)
I Created Counter. Just To Count Up Things
Published: 2022-03-18 08:29:43

I created a website called Counter. Its a simple application made to count things. For Example : I created this so I can count how many sand particles are there in a spoon full of sand. Its a weird idea. But when you have so many things to count, this app may help you. You can increase and decrease count. Also if you click a button, it add or subtract when space bar is clicked.

Its Open Source on GitHub. Feel free to contribute. If this app is useful, let's add more feature (I think this app is useless).

You can find the repository [here](https://github.com/JagannathKrishna/Counter). 
App is hosted [here](https://jagannathkrishna.github.io/Counter/).

Thank You For You Time 🙂
Have A Nice Day.
Upload images to Cloudinary using Angular
Tags: beginners, typescript, angular, cloudinary
Published: 2022-03-18 08:11:21

Cloudinary is a SaaS based platform that helps you to store high quality images, where in your free tire you can store 25GB of images and videos. it has may other options to customize the image. 
     here I required the basic feature that is upload a image to Cloudinary via Angular. in my recent project, I was using firebase storage to store images but this time for a change thought to learn something new taking an inspiration by my tech enthusiast friend I though to try it out.

I am using Angular version 12. here for this basic upload feature there is **no need to import any Cloudinary package**. let's further roll out into the steps:- 

**First lets set up Cloudinary part**
1. Sign in or login to your Cloudinary account.
2. now click on settings and then **upload** tab.
3. in the tab find for Upload presets option
4. now click on **Add upload preset** and add a Upload preset name.
5. select Signing Mode as unsigned and add a folder name.
6. now click on save button

**Now in the Angular Project**

- From the input type file, get the file value
- Pass it to a function that accept the image data

```
function onChangeImg(){
   data.append('file', file);
   data.append('upload_preset', 'Upload presets name here');
   data.append('cloud_name', 'copy from dashboard')
   data.append('public_id', file Name+todaysDate)
   this.myService.uploadSignature(data).subscribe((imageData) => {
     this.imageUrl = imageData.url;
     this.registrationForm.patchValue({
       signatureUrl: imageData.url
     });
   })
}
```
- Now in the Service side
```
//upload signature
  uploadSignature(vals): Observable<any>{
    let data = vals;
    return this.http.post('https://api.cloudinary.com/v1_1/cloud_name/image/upload',data)
  }
```
- In the angular once the function is submitted, then in the response you will get a image URL that can be store and used to access the uploaded image. 

This were the few process to be followed which in return helps tp store image and that can be retrieved properly. Cloudinary is a good tool to fulfill the above requirements.

Anyone reading the article faces any issues can comment bellow. I will love to reply. Thank you
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-03-18 08:00:02

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b4d7b44.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why doesn't Hollywood make more Big Data movies?

___A:___ NoSQL.
 -->
Vue3 + Vite + Boostrap 5 + Sass Setup
Tags: vue, vite, boostrap5, sass
Published: 2022-03-18 07:42:15

### 1: Installing Vue3 using Vite

```sh
> npm init vue@latest
```
- This command will install and execute **create-vue**, the official Vue project scaffolding tool.
- You will be presented with prompts for a number of optional features such as TypeScript and testing support:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8yrj2ee8i0qujjoh1nj.png)
- **Browser url**: [http://localhost:3000/](http://localhost:3000/)

### 2: File cleanup & Display simple Hello World!
```sh
> rm -r src/assets/
> rm -r src/components/
```

```vue
<!-- src/App.vue -->
<template>
  <h1>Hello World!</h1>
</template>
```

### 3: Install Boostrap 5 & Setup
```sh
> npm install bootstrap
```

```javascript
// src/main.js
import { createApp } from "vue";
import App from "./App.vue";

import "bootstrap/dist/css/bootstrap.css";

createApp(App).mount("#app");

import "bootstrap/dist/js/bootstrap.js";
```

### 4: Sass Setup
- Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:
```sh
> npm install -D sass
```

```vue
<!-- src/App.vue -->
<template>
  <h1>Hello World!</h1>
</template>

<style lang="scss">
h1 {
  color: green;

  &:hover {
    color: greenyellow;
  }
}
</style>
```
### Done!!!
React Virtual DOM - Explained in Simpler Words
Tags: react, virtualdom, dom
Published: 2022-03-18 07:24:46

## What is DOM?
Let’s first understand what DOM is? DOM stands for Document Object Model. It is a structural representation of a tree with nodes representing different HTML tags as JavaScript objects which makes it easier for the browser to understand.

We all have worked with DOM before in Vanilla JS like document.getElementById or document.getElementByClass and the list are in red endless with which we can easily modify the content as our heart’s desire. 

## Updating the content
To modify the content or styling, we need JavaScript objects as the browser cannot understand HTML tags. Every time we change the content or styling, a new state corresponding to that change is made, thus there will be a change in the state (from initial to final) updating DOM (UI) with it.

But we still have no clue of what became the most expensive limitation that such an Ideal process has that React came with a solution of its own to deal with it.

## Problem with DOM

As already described, there is no such problem with the actual process, but this process can only be used for a DOM tree with a small number of nodes, when we are talking about, let’s say a thousand nodes, everything can go wrong.

According to the process, after every state change, the DOM tree has to be re-rendered, and re-rendering a tree with 1000 nodes is not a good way to deal with it as many things can go wrong like losing speed or accuracy and can even cost us as it may take a lot of space while doing so.

To solve this problem, react developed came up with a new DOM called Virtual DOM for React Apps.

[Continue Reading](https://tekolio.com/react-virtual-dom-explained-in-simple-words/)
Why I’m Quitting Caffeine
Published: 2022-03-18 07:21:22

For the overwhelming majority of developers, caffeine can be seen as a staple in your life, one of the cornerstones in your diet and the same could’ve been said about me. While I consider myself on the higher point of caffeine consumption, I do love my coffee from time to time. But at times it got a bit too much. 

I had a cup when I woke up, another around 9am, 11 am and 2 pm when my energy inevitably started to slump, one more before gym and a few sprinkled in between when I was bored, thirsty or just wanted another... You know?

I sometimes even found myself saying things like: “Okay... Let me have a cup of coffee and then I can get started with the work!”. Oh boy...

While caffeine may have a lot of benefits, if not used in moderation there comes a point when it can be detrimental to you health and productivity. And since I’m someone who generally deals in the extremes, I decided to cut out caffeine completely!

Don’t get me wrong, the first few days sucked! I felt groggy and drained in the first few days, and even developed a headache... But once you get passed all the withdrawal, the grass is mostly greener on the other side. 

Here a few benefits I’ve been experiencing. 

## Consistent Energy Levels

While I don’t feel as hyper as I would when I have caffeine in my system, I find that from the moment I wake up until my bed time, I always have the energy and focus to do what is demanded from me. I don’t experience any crashes or slumps, which results in more overall focus. 

## A Clearer Mind

I feel more clear and focused when there is a task ahead of me. I also haven’t experienced the cycle of stress and anxiety I usually go through when a deadline is peaking at me from the cracks in the floor.   

My stress levels and mood has greatly improved for the most part. This is because caffeine increases the amount of cortisol you produce, which is responsible generating the fight-or-flight response.  

## Way Better Sleep

Sleep is a developer’s super power. There’s a lot of evidence that shows an increase in performance with tasks that demand a lot of cognitive energy (brain power).

Removing caffeine has not only made me fall asleep faster, but has also improved my overall quality of sleep as I’ve found that I feel well rested the next morning. This has really improved my work rate and ability.  

While I certainly miss the taste of a cappuccino and want that rush you get after the espresso kicks in, drinking less of caffeine has actually had a super positive impact on my life. Hopefully you try it and see if it works for you. Would be keen to know what your relationship with caffeine is.
Alpine.js: Displaying API data in a HTML table
Tags: alpinejs, tutorial, javascript
Published: 2022-03-18 05:32:15

In this tutorial we’ll be using Alpine.js to load data from an API and then display that data in a HTML table. We’ll be using the free [SportsDB API](https://www.thesportsdb.com/) to load a list of teams from the English Premier League along with some associated team data.

Let’s get started, for the purposes of this tutorial you can load Alpine via CDN:

```html
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

Now for the HTML markup starting with a wrapper `<div>` for the component:

```html
<div
    x-cloak
    x-data="{teams: [], 'isLoading': true}"
    x-init="fetch('https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?id=4328')
    .then(response => response.json())
    .then(response => { teams = response.teams; isLoading = false; console.log(response.teams); })"
>
<!-- Table will go here -->
</div>
```

`x-cloak` hides an element until Alpine has fully loaded, in this instance it will prevent the flash of the table header before the `x-show` has evaluated and hidden the element. For the `x-cloak` attribute to work you must also include the following CSS:

```css
[x-cloak] {
  display: none !important;
}
```

`x-data` defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference. In this case it’ll store the team data in an array and the loading state of the component.

`x-init` is used to fetch the data and store it in `x-data` before processing and rendering the component. The data itself is being fetched with the JavaScript `fetch()` method using the SportsDB API endpoint for the English Premiere League teams.

If successful you should the team data logged in the browser console as follows:


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

We can now output this data into a HTML table:

```html
<h1 x-show="isLoading">Loading...</h1>
<table x-show="!isLoading">
    <tr>
        <th>Team</th>
        <th>Founded</th>
        <th>Stadium</th>
        <th>Capacity</th>
    </tr>
    <template x-for="team in teams" :key="team.idTeam">
        <tr>
        <td x-text="team.strTeam"></td>
        <td x-text="team.intFormedYear"></td>
        <td x-text="team.strStadium"></td>
        <td x-text="team.intStadiumCapacity"></td>
        </tr>
    </template>
</table>
```

`x-show` toggles the visibility of the `<h1>` loading text and the `<table>` based on the value of `isLoading`. We then use the `x-for` directive to loop through each team and output that data using `x-text` into the individual table rows. The `<template>` element used here is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded.

That’s all for this tutorial, in it we used 6 of the 15 directives available in V3 of Alpine.js. If your interested in exploring the framework further be sure to checkout some of our other [Alipine.js tutorials](https://w3collective.com/tag/alpine/).
Priorities for Telescope 2.9
Tags: opensource, productivity
Published: 2022-03-18 03:48:49


I would like to reflect a bit about what my plans are for Telescope 2.9😄.

## Translating Telescope's About Page

For this release, I would like to focus on translating [Telescope's  About page](https://telescope.cdot.systems/about/) into Mandarin and review the Russian version of the page once it is ready to be reviewed. You can view more details about the issue [here](https://github.com/Seneca-CDOT/telescope/issues/2962).

This would be my first experience contributing to localization efforts. It is so cool that I can utilize my language skills in programming. It is like you get to experience the magic feeling when you get to enjoy your hobby while doing the job. I think if I find it exciting, I might explore more opportunities to strengthen my language abilities and help community with localizing global software😋😌. 

Here is an amazing article for anyone who is also interested in software localization/translation that my professor Dave shared with me a while ago: 

[What they don’t tell you when you translate your app](https://ericwbailey.design/writing/what-they-dont-tell-you-when-you-translate-your-app/)

It has a lot of great points and stuff to think about when localizing/translating software 💡💡💡.

##  Finishing up the Star field 

I would also like to finish my little creative project about star fields. Specifically, [this sneaky bug🐛](https://github.com/Seneca-CDOT/telescope/issues/3194).

Also, thanks to our Telescope community, I am going to get some help fixing [this little guy🐛](https://github.com/Seneca-CDOT/telescope/issues/3193). 

## File the Necessary Issues for YouTube information bar

I have been working on [this](https://github.com/Seneca-CDOT/telescope/issues/2680) for a while now, from designing all the way to doing the back-end. I didn't expect that this issue was THAT  huge at first. But I am trying my best to finish it up. I am planning to file a few issues to do the front-end and fix the back-end a bit. Hopefully, we are going to have a complete YouTube information bar once and for all very soon!! 

Wish me luck!😉😋
Some of the largest companies using Vue.js
Tags: vue, javascript, webdev
Published: 2022-03-18 06:07:37

I updated today my article and compared to 2020 it seems that **Dribbble** and **Nespresso** **no longer use Vue.js** **while companies like Sony, 9GAG, Foxconn and Aramco have started using it** 🚀😍

- Google
- Apple
- Nintendo
- Behance
- Trivago
- Gitlab
- Trustpilot
- Pornhub
- JustEat
- Glovo
- Zoom
- The Motley Fool
- BitPay
- Square
- Livestorm
- BMW
- Louis Vuitton
- Upwork
- Namecheap
- Bilibili
- Sony
- 9GAG
- Aramco
- Foxconn

Check out the full article on Medium to discover more companies 👇

{% medium https://medium.com/notonlycss/google-apple-and-other-users-of-vue-js-e4505359e5d5 %}

ps. If you know other companies using Vue.js/Nuxt.js please let me know so I can update the article 😉
Building an InnerSource ecosystem using AWS DevOps tools
Tags: innersource, aws
Published: 2022-03-18 05:50:51


![InnerSource Portal with AWS CodeCommit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgakq68ldiny8ztch4j3.png)
**M**ost software companies leverage open source software (OSS) in their products, as it is a great mechanism for standardizing software and bringing in cost effectiveness via the re-use of high quality, time-tested code. Some organizations may allow its use as-is, while others may utilize a vetting mechanism to ensure that the OSS adheres to the organization standards of security, quality, etc. This confidence in OSS stems from how these community projects are managed and sustained, as well as the culture of openness, collaboration, and creativity that they nurture.

Many organizations building closed source software are now trying to imitate these development principles and practices. This approach, which has been perhaps more discussed than adopted, is popularly called “InnerSource”.

> 
InnerSource is the term for the emerging practice of organizations adopting the open source methodology, albeit to develop proprietary software.

In Oct 2021, I wrote a blog for my employer AWS that discussed on how to build a model InnerSource ecosystem that leverages multiple AWS services, such as CodeBuild, CodeCommit, CodePipeline, CodeArtifact, and CodeGuru, along with other AWS services and open source tools.

[Click here](https://aws.amazon.com/blogs/devops/building-an-innersource-ecosystem-using-aws-devops-tools/) to read the full blog.
How to get a Client IP address in Laravel
Tags: laravel, beginners, webdev, tutorial
Published: 2022-03-18 05:16:58

## What is an IP Address?
An Internet Protocol(IP) address also known as a logical address is given by the internet service provider(ISP) which uniquely identifies a system over the network. IP address keeps on changing from time to time.

## How to get a Client IP address in Laravel?
For getting the IP Address we have to include use Illuminate\Http\Request; in the controller and then add the code of the below pre tag. It will give the IP address of the network.
```
$clientIP = request()->ip();
dd($clientIP);
```
```
public function index(Request $request){
  dd($request->ip());
}
```
```
$clientIP = \Request::ip();
dd($clientIP);
```
```
$clientIP = \Request::getClientIp(true);
dd($clientIP);
```
**Thank you** for reading this blog.