teleren/devto huggingface dataset:
Making a fetch (GET) request in JavaScript
Published: 2022-07-24 17:38:32

Learning how to do a fetch request, just like anything in coding, can be confusing at first.  I am currently in the first phase of my coding boot camp at Flatiron where I learned, among plenty of other things, how to do a FETCH request. 

The fetch() method is a way of retrieving data from an API or database and is available on the global scope. There are actually four different fetch requests, "GET", "POST", "PATCH/PUT", and "DELETE".  I'm only going to talk about about "GET". It's like telling the API "I need to get some information from you." Once the data is obtained, it can be added to the DOM.

The fetch() method requires only one parameter which is the URL of the resource that you want to fetch. To set up a fetch request, pass a URL string in as an argument. 

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

You will need to convert the data to JSON by adding .then() methods. JSON is just an efficient format for sending information over the wire. By converting the data to JSON, this allows the user to easily work with it. 

With this standard fetch format, what we expect to happen with the fetched data is expressed after the second .then. In my project, I set up code to display the fetched data on the web page by creating and appending elements (see below). The entire fetch request was built within this function.


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

This particular function fetches random dog images from an API and adds them to the DOM once a user "clicks" on a button.  I created an event listener in the global scope and used a callback to invoke the function once the button is clicked.


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

Fetch can be confusing and frustrating at first, but once you get the hang of it, fetching and manipulating the data is a ton of fun. This is important as you will need to get good at fetching data from a backend if you want to be a front-end developer.



Resource:
“Fetch API - Web Apis: MDN.” Web APIs | MDN,
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
CRUD App using React JS
Tags: react, javascript, webdev
Published: 2022-07-24 17:20:10

**Demo** : https://crud-app-using-reactjs.vercel.app/
**Github** : https://github.com/erajamanickam/reactjs-crud-app/

Simple React JS CRUD App

- **C** : Create
- **R** : Read
- **U** : Update
- **D** : Delete

React js is one of the most used JavaScript libraries for frontend development. It’s very important to have the basic functionality of CRUD operations in with react-js.

Create User Name, Email address and Phone number

if you want to connect you can do so here:
[Github](https://github.com/erajamanickam)
[Linkedin](https://linkedin.com/in/rajamanickamweb)
[Portfolio](https://erajamanickam.github.io/)
Linked List
Tags: beginners, programming, tutorial, python
Published: 2022-07-24 17:18:00


Linked List Creation--

```
class Node:   # Node Creation
    def __init__(self, data):
        self.data=data
        self.ref=None 
class LinkedList:   # Connecting the nodes
    def __int__(self):
        self.head=None
    def print_ll(self):  # Printing of the created linhed list
        if self.head is None:
            print("Linked list is empty")
            return
        n=self.head
        while n:
            print(n.data)
            n=n.ref
                
node1 =Node(10)   # Given the vazlue in the 1st node
node2=Node(2)   # Giving the value in the second node
q1=LinkedList()  # Calling the Linkeglist function
q1.head=node1  # pointing of q1 as a head node
node1.ref=node2   # storing the addresss of the 2nd node into 
                    first node
q1.print_ll()  # printing of q1
```
Resetting your Room
Published: 2022-07-24 12:39:24

Think of your Desktop as your [Room](https://jamesclear.com/reset-the-room). Got it, great!

Ok now setup your clear script that will remove all social media, outlook, teams, slack, any electron app. Now before you leave for the coffee you need to start your coding run that script.

**Windows version**

Here's a list of all tasks running in command line.
`tasklist `

Now all we are going to do is add the executables that are associated with distraction and create [time confetti](https://www.hbs.edu/ris/Publication%20Files/Time%20Confetti_edd2cc39-5cee-47ce-a9e5-b3cb1c28e0eb.pdf).

Here's my top five
`taskkill /f /im chrome.exe
taskkill /f /im outlook.exe
taskkill /f /im slack.exe
taskkill /f /im teams.exe
taskkill /f /im code.exe`


and save that file as clear.bat or better yet reset-the-room.bat

Remove the `/f` if you want a prompt to give the program a changes to prompt you to save anything.

Now you have a way of resetting the room. Make sure you reset the physical room as well. And go to a [greenspace ](https://www.newscientist.com/article/mg24933270-800-green-spaces-arent-just-for-nature-they-boost-our-mental-health-too/) every now and then.
Little Red Riding Hood downloading Docker images from the web
Published: 2022-07-24 17:17:57

---
title: Little Red Riding Hood downloading Docker images from the web
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aquvgknp06e2dyys4vy2.png
canonical_url: 'https://kevwe.com/weekly/202230'
# Use a ratio of 100:42 for best results.
---
Technology is amazing, but nowadays we happen to hear also a lot of horror stories.

This does not mean: "do not use the technology", rather: "know it so well that you can use it safely".

It can be from Docker, the entire Microservices scene or the Church of Serverless: each one can tell some bad experience of its own. Just make sure you choose what you choose because:

- it fits your needs
- you know what you are doing


https://kevwe.com/weekly/202230
macOS Ventura Wallpaper Siri Shortcuts
Tags: macos, shortcuts, automation, wallpapers
Published: 2022-07-24 16:50:25

## These two Base64-Bound Baddies might simplify your yuppie existence for another few weeks.​

Somehow, I managed to find myself in possession of two Very Large image files: the(?) new dark/light wallpaper pair coming in macOS Ventura. (Here they are in full, [**light**](https://davidblue.wtf/ventura/venturalight.jpg) and [**dark**](https://davidblue.wtf/ventura/venturadark.jpg), so we've got that out of the way.) I don't actually remember where they came from, so I hope that doesn't matter much to you. (Maybe don't contact me if it actually does lol.)

Anyhow, I've actually had them for quite a while, but I've been meaning to do what I'm trying to tell you about for far, *far* longer. Basically, files (like images) can be stored within single Siri Shortcuts entirely in plaintext form thanks to the magic of [base64](https://en.wikipedia.org/wiki/Base64) and the now quite familiar [Base64 Encode](https://matthewcassinelli.com/actions/base64-encode/) action. I've been meaning to """"ǝ ƃ ɐ ɹ ǝ ʌ ǝ l"""" this capability to simplify my own, sick, superficial, yet craven need to cycle through inordinately huge image files as my desktop backgrounds/*wallpaper* for literally years, now, but I finally just fucking did it, all for you.

[**VenturaLight**](https://www.icloud.com/shortcuts/f4e3460dfd684bf2a70bf4a55717d389)

[**VenturaDark**](https://www.icloud.com/shortcuts/e28e2c01892b4fbdafb3a967061924d1)

They're very simple (3 whole actions!) but **please keep in mind that they are also gargantuan**. Since I'm super smart in a way I definitely love very much, I happen to know that *all* of one's Siri Shortcuts are actually stored in a single sqlite file that is constantly being prodded every which way by iCloud Drive's mania... Keeping these around is not going to help. 


![VenturaLight Siri Shortcut](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jocn72feao1t8my0085.png)
Share docker socket to http rest with some filtering
Tags: docker, traefik, go
Published: 2022-07-24 16:09:01

I will share socket files to http with forward tool, https://github.com/worldline-go/forward which I programmed.

This tool listening http request and forwarding to the socket with some method filtering.

So lets download or run in docker:

To download visit the [release page](https://github.com/worldline-go/forward/releases/)

```sh
# scratch version
docker pull ghcr.io/worldline-go/forward:v0.1.2
# alpine version
docker pull ghcr.io/worldline-go/forward:v0.1.2-alpine
```

This tool asking you a command parameter to show location of the socket file and redirection path and some filtering methods.


In here, I will redirect all `/docker/*` requests to the `docker.sock` file. And I will disabled some method, so without any filtering methods all methods is works.

Using `-` begining on the method name is disabling:

```
-s /docker.sock:/docker/:-POST,-PUT,-DELETE,-PATCH
```

```
export socket to HTTP
version: 0.1.2 commit: b8e86c7 buildDate:2022-06-29T10:46:25Z

Usage:
  forward [flags]

Flags:
  -h, --help                 help for forward
  -H, --host string          Host to listen on, default: 0.0.0.0:8080 (default "0.0.0.0:8080")
  -s, --socket stringArray   Socket to export: /var/run/docker.sock:/docker/:*,-POST,-PUT,-DELETE
  -v, --version              version for forward
```

Lets run

```sh
docker run --rm -p 8080:8080 -v /var/run/docker.sock:/docker.sock ghcr.io/worldline-go/forward:v0.1.2 -s /docker.sock:/docker/:-POST,-PUT,-DELETE,-PATCH
```

Now call http service, (check [this document](https://docs.docker.com/engine/api/v1.41/) for detail)

```sh
curl http://localhost:8080/docker/containers/json
```

I shared to the `/docker` path so I called with `/docker` prefix but this is for just demo not need to set any path.

---

Now, we can use this tool for in traefik.

Traefik is a proxy tool and in swarm mode it is need a `docker.sock` communication to find services's information.

We can mount docker.sock to Traefik and solve communication but there is one point. In the swarm's worker nodes `docker.sock` cannot reach to the swarm-api (default). We can fix this communication to run forward tool as service and set Traefik to the our service to communicate with docker socket.

Forward service
```yaml
forward-docker:
  image: ghcr.io/worldline-go/forward:v0.1.2
  command: "-s /var/run/docker.sock::-POST,-PUT,-PATCH,-DELETE"
  deploy:
    mode: global
    # Just works in manager nodes for swarm API
    placement:
      constraints:
        - "node.role==manager"
  volumes:
    - /var/run/docker.sock:/var/run/docker.sock
  networks:
    - proxy
```

In traefik's static configuration change enpoint
```yaml
providers:
  docker:
    # endpoint: "unix///var/run/docker.sock"
    endpoint: "tcp://forward-docker:8080"
```

Now you can replicate your Traefik in the all nodes of the swarm.
Event Loops in Javascript
Tags: javascript, beginners, tutorial, webdev
Published: 2022-07-24 16:04:00

Hello guys today i want to discuss the topic "Event Loop" in Javascript. 
Lets get started...

## What is Event Loop?
* Javascript is a single threaded language so , it performs one operation at a time.The language doesn't support multithreading
* Event Loops helps Javascript to perform asynchronous operations.

## Call Stack -
* Call stack is used to keep track of all the operations to be executing and once the operation is executed it is pop out from the call stack and the next operation in line will be executed.

## Event Queue - 
* Event Queue is used to to push new function to the call stack to execute it. It follows the queue pattern of FIFO(First in First out).It sends the functions in the exact sequence they are in.

## Browser Api - 
* These are built-in Api's in Browsers
* It helps in performing the Aysnc operation by creating a seperate thread and once the operation is ready to be executed it is sent to the event queue.
* The Event queue wait until the call stack is empty then push this aysnc operation to the call stack to get executed.
* An example of this is "settimeout" in js. 


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


Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION FOR IMPROVEMENT, PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl
Mailing: Build, test, send emails with TypeScript and React
Tags: typescript, react, opensource, showdev
Published: 2022-07-24 16:00:54

###[Github link](https://github.com/successor-software/mailing)

We’re longtime users of Action Mailer and wanted something similar for our typescript/react apps. We didn’t find anything, so we decided to build Mailing. We added some small features that we would’ve liked in Action Mailer, including a mobile preview toggle (with hotkeys), and the ability to send a test email right from the browser while developing. Finally, we went all in on MJML so that we never have to think about nested tables or email clients :)

_HTML is simple, why a framework?_
Writing raw HTML for emails is a bit like making a website in 1999… table layout, inline styling, no JS at runtime. As modern web frameworks mature it becomes more and more arcane relative to the rest of the codebase.

_Why code emails at all?_
There are a lot of nice no-code SaaS email solutions these days, but sometimes you want your app to be self-contained or need more automated testability or you want to enforce a design system programatically. I’ve hit all of the above and I’m also just more comfortable expressing layout as code than learning a bespoke WYSIWYG editor.

At our real estate startup, one of our most loved features was an email digest of new properties matching your search criteria. It was a cornerstone retention mechanism and we had a ton of logic (and tests) ensuring that it wasn’t sent twice in a day, never contained the same property more than once in a week, had the properties ordered in a certain way, could be retried on failure, metered sends over time to avoid self-DDOS etc, etc. As we grew and started moving some stuff to Mailchimp and Iterable for marketing to own, product emails with a ton of logic stayed in the codebase where they could be tested.

Without further adieu, please check it out and LMK if you find it useful (or bugs). Thanks!!

#[Check it out on Github!](https://github.com/successor-software/mailing)
Paracetamol.js💊| #175: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-07-24 15:35:02

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
let a = 1;
{
  let a = 2;
}
console.log(a);
```

A. `1`, `2`
B. `2`
C. `1`
D. `SyntaxError`

Respuesta en el primer comentario.

---
Read long-short syntax of config in Go
Tags: go, tutorial
Published: 2022-07-24 15:04:26

Lets think we have config file like: (I use json)

This is short syntax

```json
{
    "network": "test-network"
}
```

And long syntax

```json
{
    "network": {
        "name": "test-network",
        "description": "for testing purposes"
    }
}
```

When reading this configurations we should give own decoder function to parse and write to the our object.

Before to do that lets check our example.

First create struct for long and short format and try unmarshal.

```go
package main

import (
	"encoding/json"
	"fmt"
)

type NetworkDescription struct {
	Name        string `json:"name"`
	Description string `json:"description"`
}

type NetworkLong struct {
	Network NetworkDescription `json:"network"`
}

type NetworkShort struct {
	Network string `json:"network"`
}

func main() {
	networkLongTest1 := &NetworkLong{}
	err := json.Unmarshal([]byte(`{"network":{"name":"foo","description":"bar"}}`), networkLongTest1)
	fmt.Printf("%#v\nErr: %v", networkLongTest1, err)

	networkLongTest2 := &NetworkLong{}
	err = json.Unmarshal([]byte(`{"network":"foo"}`), networkLongTest2)
	fmt.Printf("%#v\nErr: %v", networkLongTest2, err)
}
```

Result obviously give error in second try
```
$ go run main.go
&main.NetworkLong{Network:main.NetworkDescription{Name:"foo", Description:"bar"}}
Err: <nil>
&main.NetworkLong{Network:main.NetworkDescription{Name:"", Description:""}}
Err: json: cannot unmarshal string into Go struct field NetworkLong.network of type main.NetworkDescription
```

Good now we can use this error in our custom Unmarshaler's interface implementation.

I am using stdlib's `json` to unmarshaller so Unmarshaler interface has one function `UnmarshalJSON([]byte) error`

We can create new struct type and use that one but I will just modify our `NetworkLong` struct because I will turn short version to the long.

```go
type NetworkLong struct {
	Network NetworkDescription `json:"network"`
}

func (n *NetworkLong) UnmarshalJSON(b []byte) error {
	// change type to don't use our custom unmarshal
	type longFormat NetworkLong
	nLong := &longFormat{}
	err := json.Unmarshal(b, &nLong)
	if err != nil {
		nShort := &NetworkShort{}
		err = json.Unmarshal(b, nShort)
		if err != nil {
			return err
		}

		n.Network = NetworkDescription{
			Name: nShort.Network,
		}

		return nil
	}

	*n = NetworkLong(*nLong)

	return nil
}
```

And our result is
```
&main.NetworkLong{Network:main.NetworkDescription{Name:"foo", Description:"bar"}}
Err: <nil>
&main.NetworkLong{Network:main.NetworkDescription{Name:"foo", Description:""}}
Err: <nil>
```

Check in the [playground](https://go.dev/play/p/tbMfltytIRm)
Linked list creation , deletion, insertion, and reversing of linked list
Published: 2022-07-24 15:00:00

**Linked list creation , deletion, insertion, and reversing of linked list**
```

#include <iostream>
using namespace std;
struct Node
{
  int data;
  struct Node *next;
};
struct Node *head;
void printList()
{
  Node *temp = head;
  while (temp != NULL)
  {
    cout << temp->data << " ";
    temp = temp->next;
  }
  cout << endl;
}
void insertNode(int data, int pos)
{
  Node *temp1 = new Node();
  temp1->data = data;
  if (pos == 1)
  {
    temp1->next = head;
    head = temp1;
    return;
  }
  Node *temp2 = head;
  for (size_t i = 0; i < pos - 2; i++)
  {
    temp2 = temp2->next;
  }
  temp1->next = temp2->next;
  temp2->next = temp1;
}
void deleteNode(int pos)
{
  Node *temp1 = head;
  if (pos == 1)
  {
    head = temp1->next;
    delete temp1;
    return;
  }
  for (int i = 0; i < pos - 2; i++)
  {
    temp1 = temp1->next;
  }
  Node *temp2 = temp1->next;
  temp1->next = temp2->next;
  delete temp2;
}
void reverseList()
{
  Node *prev, *current, *next;
  current = head;
  prev = NULL;
  while (current != NULL)

  {
    next = current->next;
    current->next = prev;
    prev = current;
    current = next;
  }
  head = prev;
}
int main()
{
  head = NULL;
  for (int i = 1; i < 6; i++)
  {
    insertNode(i, i);
  }
  printList();
  deleteNode(3);
  printList();
  reverseList();
  printList();
  return 0;
}
```
Build and Deploy a Nuxt3 app to Netlify
Tags: nuxt, javascript, netlify, automation
Published: 2022-07-24 14:43:18

Imagine you want to build and deploy a Nuxt3 app on Netlify. Because custom scripts are not allowed on Netlify, you will not be able to perform custom tasks like automated testing before deploying the website to your Jamstack hosting platform.

That is where continuous integration/continuous deployment comes in. With a CI/CD system, you can run the kind of automated tests that create successful deployments. In this tutorial, I will lead you through building a Nuxt3 app, writing automated tests for it, and deploying it on Netlify.

Read the full blog on [CircleCI](https://circleci.com/blog/deploy-nuxt3-app-to-netlify/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Python 101 Series
Tags: python, programming, tutorial, beginners
Published: 2022-07-24 14:32:46

Python, world's one of the most popular general-purpose programming languages. According to the [2021 Developer Survey](https://insights.stackoverflow.com/survey/2021?_ga=2.236209345.190202062.1628102352-126161871.1625855113#technology-most-popular-technologies) Python is the 4th most popular technology rated by _Professional Developers_. Python is easy to learn and use programming language, and I believe that is one of the reasons why YOU also wanted to learn Python.

![2021 Developer Survey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yx6pf4t0y1ef9n76t827.png)

# What you will get from this series

1.  You will learn about Python's history
2.  You will understand basic concepts of programming
3.  You will be able to write and understand code on your own
4.  You will work on some small projects
5.  You will get knowledge to know "what to google when you stuck"

# Outline of this series

1.  Introduction
2.  Variable & DataType
3.  Conditional Statements
4.  Data Structures
5.  Loops & Iterations
6.  Functions
7.  Regular Expression & Files
8.  Object-Oriented Programming

# Is this series for you?

I know, I know! You are the audience. But I am specifically targeting the people who are just getting started or new to the programming world. It does not mean people who know programming won't get anything. There might be some concepts that you have not learned yet, or you want to refresh the concepts you have learned once. It is always a good idea to develop a strong core.

# What is the use of Python?

Nowadays, you will see everyone exaggerating the use of Python. People will say, python can be used here and here and here. But should you use Python everywhere?

The simple answer is NO. I agree, that Python is an amazing language, but every programming language has its use case. Python is broadly used for the following tasks:

1. Back-end development
2. System Scripting / Automation Scripting
3. Internet of Things
4. Data Science & Machine Learning
5. Small Part of Software / Game Development

---

Time to decide. Now, after reading all these if you think that Python can be useful to you then let's do it.

![Python 101 Series | Let's do it!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grw1zc7qb1ffb84fwe3i.png)

Make sure to share any thoughts, questions, or concerns. I would love to see them. Let me know if you need any help or want to discuss something. Reach out to me on [Twitter](https://twitter.com/Sahil_Fruitwala), [LinkedIn](https://bit.ly/3JbsPDm) or signup for my Newsletter.

If you want me to explain any specific topic, reach out to me on any social media platform.
CSS: display property
Tags: css, beginners, html
Published: 2022-07-24 13:57:12

When you have been using technology for many years, things are done automatically and it is not easy to pass on the fundamentals to a new _entry level_ person on the team. Here I have put together some notes to explain the different possibilities of using the property display of HTML elements.

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

See my little guid here: [CSS_property_display.pdf](https://github.com/eleonorarocchi/CSSplayground/blob/main/CSS_property_display.pdf)