teleren/devto huggingface dataset:
Weekly Quick Tips: Pub/Sub vs Observer Pattern?
Tags: beginners, architecture
Published: 2023-01-07 18:48:05

In my attempts to blog more, I am going to do weekly tips on stuff that I think would be helpful or interesting to know for beginners. I will probably link to other articles but the intention of Weekly Quick Tips is for something someone can read in <5 min and walk away with a general sense of "wow that was interesting" or "_nod_ good to know".

So to start it off, let's talk about Pub/Sub vs Observer Pattern. They're similar but just slightly different!

Starting off with the easier one, Observer Pattern. It's simple, there is a Subject that is being watched by many Observers. The Observers are subscribed to a Subject and eagerly wait for new information. There is a direct relationship between the Subject <-> Observer.

Pub/Sub has a middle layer called message broker/event bus that allows for decoupling between the Publisher and Subscriber. So both the Publisher and Subscriber only talk to the message broker and the two are completely oblivious to each other's existence. 

You may ask, well what the heck - why would I want that? First off, the decoupling lets you minimize the risk of merge conflicts as people can work separately and since the two are independent of each other, if one happens to go down or encounters an issue it will not cause the other to immediately fail. Scaling can be easily done as well.

Disadvantages? Well that independence is a double edged sword my friend. It also is harder to track logging when something goes wrong and you have to be very sure that the Publisher is sending the message, a way for the subscriber to notify the broker that it received the message and handling the communication between the two. With a traditional client <-> server like in an Observer pattern, an error can just bubble up directly and it is easier to follow. 

Thanks for tuning in, please feel free to comment if you have thoughts. At the end of the day, this is about learning so let's work together to help each other learn :D 

Sources: 
-https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern
-https://hackernoon.com/observer-vs-pub-sub-pattern-50d3b27f838c
Methods, Symbols, and strings
Published: 2023-01-07 18:40:34

What is the difference? How do I know when to call one vs the other? Ex case:

In reformatting:

`matching_movies = Movie.all
@list_of_movies = matching_movies.order( created_at: desc )`

to:

`matching_movies = Movie.all.order( created_at: :desc )`

what is the class of :desc? Why did we use it?
Learning from Out-of-date Online Tutorials & Courses?
Tags: webdev, beginners, programming, discuss
Published: 2023-01-07 18:39:57

**To keep** expanding my software knowledge and coding skills, I search frequently for online tutorials and courses. But many that I find are in need of software updates and clearly are being neglected by the authors and/or companies that posted them. It's not helpful to me when I find an online project that looks intriguing yet requires considerably earlier versions of the software I have loaded and am now trying to learn.

I'm guessing the tutorial or course authors did not get paid much, if anything, for their efforts or got very little feedback from those who used the materials. And now they have moved on to other opportunities and challenges in their software careers and have simply left their once-helpful materials marooned in cyberspace.

**What can be** done about this, realistically? Try to contact the authors and ask them to update what they posted (or at least give you some guidance)? Attempt the tutorial project using the much-newer software releases and force yourself to try to debug and rewrite your way to completion? Use the bones of an outdated tutorial and try to create a new and somewhat different project? Or--???

What approach(es) do you favor?
React "scroll" hook using new faster event
Tags: react, javascript, html
Published: 2023-01-07 18:37:14

**Goal**
We will create a React custom hook which will tell us whether we have scrolled beyond a certain vertical position or not.

This specific implementation returns a boolean value only: "whether our scrolling has exceeded a given y-value or not", because we want the hook to expose no more than the needed information.

I am currently using this to make my "page fixed header" taller to display more info, when the user scrolls past the first part of the page and this part disappears from sight.

**Why this hook?**
When we scroll from A to B, the currently used scroll detections (onscroll event) normally trigger multiple times, which can slow down the page.

**Note**
What is a "React custom hook"? One definition (or my definition) is:
-- _if a function is named "use.." and calls at least one other React hook_,
then it's a "React custom hook".

**Document scrollend event** is newly available on Firefox and Chrome. [caniuse](https://caniuse.com/?search=Document%20scrollend%20event)


**First we will create a file "hooks/useScrollExceeds.ts"**

```ts
import { useEffect } from "react";

const useScrollExceeds = (
  exceedY: number,
  setScrollExceeds: (exceeds: boolean) => void
) => {
  useEffect(() => {
    const callOnScrollEnd = (): void => {
      setScrollExceeds(window.pageYOffset >= exceedY);
    };

    document.addEventListener("scrollend", callOnScrollEnd);

    return () => {
      document.removeEventListener("scrollend", callOnScrollEnd);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
};

export default useScrollExceeds;
```


**Then in our own component file, for example Page.tsx**

```ts
import { useScrollExceeds } from "../hooks";
...
const Page = () => {
  const [scrollExceeds, setScrollExceeds] = useState(false);

  useScrollExceeds(123, setScrollExceeds); // 123: y-value we want to check for

  const someFunction = () => {
    if (scrollExceeds) {
      // do something if we've scrolled more than 123 pixels vertically
  }
}

  // Or pass the information to some other component
  return (
...
  <Header scrollExceeds={scrollExceeds}>
...
```
Exposing a deployment in kubernetes
Tags: tutorial, kubernetes, beginners, devops
Published: 2023-01-07 18:35:35

Exposing a deployment:

```
kubectl expose deployment <name_of_deployment> --type=LoadBalancer/NodePort/ClusterIP(Default) --port=<port_no_at_which_deployment_needs_to_be_exposed> 

```

type= LoadBalancer is only available for those environments that support load balancer like AWS. 
Now via above command what we are doing is, we are creating a service that will be exposed on the assigned port number.
Now, What is service?

Service:
Service basically help us to reach the pods and container running in a pod. Another k8s object responsible for exposing pod within cluster and outside it.
If you’ll see, Pods do have an IP address but we can’t access them from outside of cluster Via this IP, also, whenever the pod gets terminated and another pod spinnup’s, the IP address of the pod will change.
Service, basically groups these pods together and assign a particular IP address to that group of pods. Benefit of this is, pods might get terminated but the service will never terminate, and hence, pods inside the service will be reachable. Also, when on exposing this service, we make pods reachable from outside of cluster. Without service, it becomes very difficult to reach out these pods and hence we need service.

--type=NodePort :
Actually means that this deployment should be exposed with the help of worker/slave node on which its running, which makes this deployment accessible from outside, but a more better approach is loadbalancer.

--type=LoadBalancer :
This not only helps to assign IP to the service, but also, routes the load in the balanced way to the service.

---type=ClusterIP is default type and lets you expose the deployment via cluster IP.

To see the running services
```
kubectl get services
```
This is basically an imperative approach of running or basically creating a service.
For declarative approach, stay tunned.
Creating data specifically for each user in React / Node.js
Tags: react, node, mongodb
Published: 2023-01-07 18:24:02

I'm a beginner trying to create an Invoicing application. I went with React and Node/Express, and set up the authentication with Redux.

I'm currently trying to figure out how can i make it so that when a user logs in, he only sees the invoices he created himself. Because each time i connect with a different user i see the same data i previously created with another user.

What would be a solution in this case ? I thought about adding a foreign key of userId for each created invoice, is it a good idea ?
Setup AWS S3 bucket for NodeJS
Published: 2023-01-07 18:11:29

Amazon Simple Storage Service (S3) is one of the best tool to store the file/media. Let's set it up with nodejs framework.

1. Setup S3 bucket with public access. 
2. Integrate S3 with NodeJS.

### 1. Setup S3 bucket with public access. 

First thing first, let's create a bucket
![Create Bucket Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx1g6olwka5xuovarcwq.png)

Enter the name and Change the region if required, here I'm keeping it Oregon as default.
![Enter Bucket Name Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua5xw70j4z2ai9txwynp.png)

As I need a public bucket so I'm enabling a ACL and keeping Radio options as it is.

![Enable ACL Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6lzilf258axp6yob326.png)

Same as above, uncheck the checkbox in order to make it public.
![Block Public Access Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc469f1ic105opqe9c4g.png)

![Acknowledgement Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/078mnlp8du1y0urrwcc2.png)



Keep rest of the options as it is unless required, and hit create bucket button.
Now once bucket is created we would have to update the bucket policy in order to access it as public bucket. 

1. Open a Bucket
2. Go to permission and scroll down to Bucket Policy, and Edit

```json
{
	"Version": "2008-10-17",
	"Statement": [
		{
			"Sid": "AllowPublicRead",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::ravis-blog-bucket/*"
		}
	]
}
```

- Scroll down to CORS policy and Edit
```json
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
```
Make sure that you update the bucket name inside the policy code "Resource".

In order to test the setup, upload a single file and try to access it from outside, i.e. Incognito.


### 2. Integrate S3 with NodeJS

Assuming you already have express app setup and we are ready to proceed with aws sdk setup. In order to acccess S3 apis from nodejs we would need to install `aws-sdk` npm package.

Lets also install the `uuid` and `mime` as helper packages.

```js
const { S3 } = require('aws-sdk');
const uuid = require('uuid').v4;
const mime = require("mime");

const s3 = new S3();
const uploader = (file, filepath) => {
    console.log("uploading file -> ", file);
    const params = {
        Bucket: process.env.AWS_S3_BUCKET, // ravis-blog-bucket
        Key: `${filepath}${uuid()}_${Date.now()}_.${mime.getExtension(file.mimetype)}`,
        Body: file.buffer
    };

    console.log(params);
    return s3.upload(params);
}
```
Now it's ready for user, we can call the uploader function and pas multipart file and filePath ( location path at S3, i.e. images/logos/ ).
Using Named Pipes in C# for Interprocess Communication
Tags: csharp, dotnet, programming, tutorial
Published: 2023-01-07 18:10:51

Named pipes are a type of interprocess communication (IPC) mechanism that allow data to be exchanged between two or more processes on a computer. They are called "named" pipes because they are identified by a unique name, rather than by a file descriptor like other types of pipes in Unix-like systems.

Named pipes are useful for a variety of purposes, including:

- Enabling processes that run on different computers to communicate with each other over a network
- Allowing processes to communicate with each other even if they don't have permission to access each other's memory or files
- Allowing multiple processes to read and write to the same pipe concurrently
- In C#, named pipes can be created and used through the System.IO.Pipes namespace. To create a named pipe, you can use the NamedPipeServerStream or NamedPipeClientStream class, depending on whether you want to create a server or client pipe.

Here is an example of how to create a named pipe server in C#:

```csharp
using (var server = new NamedPipeServerStream("my_pipe_name"))
{
    Console.WriteLine("Waiting for client connection...");
    server.WaitForConnection();
    Console.WriteLine("Client connected.");

    // Read and write data through the pipe
}

```


And here is an example of how to create a named pipe client in C#:

```csharp
using (var client = new NamedPipeClientStream(".", "my_pipe_name", PipeDirection.InOut))
{
    Console.WriteLine("Connecting to server...");
    client.Connect();
    Console.WriteLine("Connected to server.");

    // Read and write data through the pipe
}

```

Once a named pipe has been created, you can use the Read() and Write() methods of the NamedPipeServerStream or NamedPipeClientStream class to read and write data to the pipe.

## Join Me

Follow me on [Twitter](https://twitter.com/volkanalkilic) and [Linkedin](https://www.linkedin.com/in/volkanalk%C4%B1l%C4%B1%C3%A7/) for more content.
Noisy Intermediate Scale Quantum Computer (NISQ)
Published: 2023-01-07 17:55:10

Noisy Intermediate Scale Quantum Computer (NISQ): Comments on The Chinese Quantum Paper

Paper by Kevin Kane
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brbdh04wrt6z3gxa2ory.jpg)

There is a paper making waves in the media because Chinese scientists proposed a way to break RSA 2048 with less than a few hundred quantum computing qubits. This puts them within striking distance of being able to crash financial systems at will around the world. What some people miss about the Chinese paper is that people are now going to spend a year thinking of ideas that derive from parts of it.

The paper appears to be inspired by a 4-year old idea first put forward by Zapata Computing, Inc. That paper is titled, "Variational Quantum Factoring." Ergo, China is 4 years behind the U.S. in quantum algorithm development. It appears like China is winning, but it is not. It is likely innovations that go beyond VQF in the US are no longer being published.

VQF: https://lnkd.in/gcrNRHwU

When at Stanford Research Institute (SRI) people like Christopher Savoie brought forward the core architecture to Siri before it was an Apple product. Their approach gave birth to personal AI assistants. Among others at SRI, Christopher is one of the actual pioneers behind AI as we know it today. Without SRI there might not be a ChatGPT.

Christopher and his team now lead Zapata Computing, a company likely 4 years ahead of this Chinese paper making rounds in the media. An important backstory is this: Certain people challenged the SRI AI Personal Assistant approach and said it could not be done, or that it would not work. Well, those people look like idiots today. Those who challenge an approximate approach to using quantum mechanics to factor large integers will likely again suffer a similar fate of being made out to look ridiculous in time.

Shor's is likely already beaten. It is just not being published. As to why Chinese researchers published this paper, my guess is to send a warning shot to the US, and to make it clear that the losing side of history are those who are in what I call, "anti-quantum computing" elements in governments who fear its power in the hands of the public. While we should fear quantum computing being used for criminal activities the answer is to not slow its development down. Before there was Google people probably feared what would happen if criminals could access all the world's research to design weapons with it that introduce harm to humanity. It turns out despite this we are all still fine. These kind of fears are short-sighted and anti-progress. We should trust ourselves more. The fear is unjustified.

https://lnkd.in/gNMtJh6G

https://lnkd.in/gWM-hh6H
automate convert upper case to lower case before save
Published: 2023-01-07 17:46:11


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aneiczjpl3njw4jzzq1f.png)
Use of package-lock.json
Tags: node, webdev, frontend, backend
Published: 2023-01-07 17:40:03

---
title: Use of package-lock.json
published: true
description: 
tags: #node #webdev #frontend #backend
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m008oec4lgh6bt3iu2s.jpg

# Use a ratio of 100:42 for best results.
# published_at: 2023-01-07 17:32 +0000
---

1. Let's create a new directory and initialize it with `npm init -y`.
    1. This will create a new `package.json` file.
2. Let’s say we’re in 2021 and we want to install moment.js in our project.
3. That time we would’ve done, `npm i moment`, but to replicate the same let’s install the latest version of this package at that time which was 2.29.0 (Currently latest is 2.29.4). So the command for that will be `npm i moment@2.29.0`
    1. This will add a new key for moment inside package.json’s dependencies key, with the value as the version number ^2.29.0.
    It’ll also create `package-lock.json` and node_modules folder. Inside node_modules folder we can see that the moment library has been added with the same version number, i.e. 2.29.0 & same is in the package-lock.json
        
    ![Screenshot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh5xpgxnbt6c1bx01bya.png)
     
4. Push code to Github along with both `package.json` & `package-lock.json` (or simply delete the node_modules folder) 
5. Take a clone of this repo (or simply delete the node_modules folder), and in that run `npm i`. 
    1. Now since the package-lock file is present it’ll simply install the version of moment that is mentioned in that file which is 2.29.0 inside node_modules. So both package.json & package-lock.json will be on the same package as in the screenshot shown above.
    2. This also means that the developer who commited the code, and someone who clones the project let’s say today, when the latest version of moment is 2.29.4, will also install the version 2.29.4 only because of package-lock.json 
6. If we had **NOT commited** `package-lock.json` file, but only `package.json`, when `npm i` was done, it would have found ^2.29.0 in package.json, but then it would’ve went to npm repository to find if there’s any new minor or patch release after 2.29.0, and since current latest version is 2.29.4, in node_modules this latest version will be installed and also in the newly created package-lock.json file, this version will be present.
    
    ![Screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7dbp575uvajnqtbb8z3.png)
Making an ETL Pipeline for geospatial data to postgres/postgis database
Tags: database, datascience, python
Published: 2023-01-07 17:19:33

**Extract** - First I gather the data from USGS's earth explorer for elevation data, global extreme sea level prediction data from the European commission, and the hydrobasin data from the hydroshed project and finally the country boundries data from natural earth data. 

**Load** - Then I load each dataset into the relational database. Which was built using docker image of postgis extension of postgres. And then connected to qGis for the team to access. This amazing [tutorial](https://alexurquhart.com/post/set-up-postgis-with-docker/) was super helpful here. 

**Transform** - Finally I clip, vectorize, deduplicate and merge the datasets with sql spatial queries, qGis and geopandas so that all data is consistent. 

the steps here involve resampling the rasters to be a less fine grain, then clipping the data to remove ocean pixels, and then, vectorizing the rasters with zonal statistics, removing irrelevant attributes from the hydrobasin dataset and merging the hydrobasin and sealevel rise prediction datasets by a spatial join, and then merging that data to the vectorized raster by the common hydrobasin column. Finally basic subtraction is applied to find the areas of elevation data that are at risk of sea level rise. 

Further mapping is then done in qGis to understand the crop yield loss and other economic factors. 


Transform steps - Processing:

-All steps leading up to analysis and visualisation steps, so the output is the file with all hexagons and elevation zonal stats data, the pivoted elsr data on hydrobasin, and finally the clipped shapefile in 3035 epsg for italy with the hexagons and geometry. 

okay so we got the dem data from usgs script on a bounding box for italy i believe, then merging it into a tif file then in qgis clipping it with the italy boundary and resampling it to be less fine resolution. 

the elsr point data we clipped also with the boudnary of italy in qgis

watersheds came from hydrobasins and was also clipped by the italy border in qgis
Mastering Technical Team Leadership for Mid to Senior Level Engineers
Tags: leadership, webdev, javascript, career
Published: 2023-01-07 17:18:09


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

Are you a mid to senior level engineer looking to up your technical team leadership game? Our new ebook, "[Mastering Technical Team Leadership for Mid to Senior Level Engineers](https://hisachin.gumroad.com/l/Mastering-Technical-Team-Leadership)" is here to help.

In this comprehensive guide, we cover all the essential topics that technical team leaders need to succeed. From setting clear goals and expectations, to providing guidance and mentorship, to driving innovation and continuous improvement within the team, this ebook has it all.

But that's not all. We also delve into topics such as managing team dynamics and communication, building and maintaining a positive team culture, managing remote teams and virtual collaboration, leading with a vision and strategy, motivating and inspiring team members, leading through change and uncertainty, building and maintaining trust with team members, and communicating effectively with team members.

In addition, we provide insight on how to identify and address the development needs of team members, encourage continuous learning and improvement, support career development and growth within the team, define and shape the team culture, build trust and collaboration within the team, encourage diversity and inclusion within the team, and create a positive and supportive work environment.

But that's not all. We also cover the key skills and qualities of effective technical team leaders, the role of the technical team leader in an organization, the importance of technical team leadership for team success, and offer key takeaways and best practices for technical team leadership. We even discuss future trends and challenges in technical team leadership, and offer final thoughts on the importance of effective technical team leadership.

As you can see, our ebook is packed with valuable information that every mid to senior level technical team leader needs to know. So don't wait – [get your copy](https://hisachin.gumroad.com/l/Mastering-Technical-Team-Leadership) today and take your technical team leadership skills to new heights!